/* ==========================================================================
   Componentes · marca Laboratorio
   Reglas: ningún color HEX aquí (solo variables de tokens.css), objetivos
   táctiles de 44 px o más, foco visible y versión sin movimiento.
   ========================================================================== */

/* ---------- Variables propias de componentes (claro) ---------- */
:root {
  --borde-campo: var(--gris-texto);          /* 3:1 o más contra el fondo: bordes de campos */
  --btn-principal-borde: transparent;
  --chip-demo-fondo: var(--ambar-suave);
  --chip-demo-texto: var(--ambar-texto);
  --nav-fondo: color-mix(in srgb, var(--color-fondo) 80%, transparent);
  --brillo: color-mix(in srgb, var(--cobalto) 14%, transparent);
  --exito-fondo: color-mix(in srgb, var(--exito) 10%, var(--color-superficie));
  --error-fondo: color-mix(in srgb, var(--error) 9%, var(--color-superficie));
  --info-fondo: var(--cielo);
  --aviso-borde: var(--ambar);
  /* Iconos usados como máscara (los de trazo 2 px del sprite, en versión embebida) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --borde-campo: var(--gris-oscuro);
    --btn-principal-borde: var(--cobalto-claro);
    --chip-demo-fondo: color-mix(in srgb, var(--ambar) 16%, var(--tinta-2));
    --chip-demo-texto: var(--ambar);
    --brillo: color-mix(in srgb, var(--cobalto-claro) 16%, transparent);
    --exito: var(--exito-claro);
    --error: var(--error-claro);
    --info-fondo: var(--cielo-oscuro);
  }
}
:root[data-tema="oscuro"] {
  --borde-campo: var(--gris-oscuro);
  --btn-principal-borde: var(--cobalto-claro);
  --chip-demo-fondo: color-mix(in srgb, var(--ambar) 16%, var(--tinta-2));
  --chip-demo-texto: var(--ambar);
  --brillo: color-mix(in srgb, var(--cobalto-claro) 16%, transparent);
  --exito: var(--exito-claro);
  --error: var(--error-claro);
  --info-fondo: var(--cielo-oscuro);
}

/* ---------- Iconos (trazo 2 px, cuadrícula de 24) ---------- */
.icono {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icono--marca { color: var(--color-marca); }
.icono--chico { width: 20px; height: 20px; }
.icono--grande { width: 32px; height: 32px; }

/* ==========================================================================
   Botones
   Principal: Cobalto + blanco. Acción (Cotizar, WhatsApp, Agendar): Ámbar + Tinta.
   ========================================================================== */
.btn {
  --_fondo: var(--boton-principal-fondo);
  --_texto: var(--boton-principal-texto);
  --_borde: var(--btn-principal-borde);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--tamano-tactil); min-width: var(--tamano-tactil);
  padding: 10px 22px;
  background: var(--_fondo); color: var(--_texto);
  border: 2px solid var(--_borde);
  border-radius: var(--radio-medio);
  font: 700 var(--texto-base)/1.2 var(--fuente-texto);
  text-decoration: none; text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-rapida) var(--curva-salida),
              background-color var(--dur-rapida) var(--curva-salida),
              box-shadow var(--dur-media) var(--curva-salida);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: color-mix(in srgb, var(--_fondo) 88%, var(--tinta)); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn .icono { width: 20px; height: 20px; }

.btn--accion { --_fondo: var(--boton-accion-fondo); --_texto: var(--boton-accion-texto); --_borde: transparent; }
.btn--accion:hover { background: color-mix(in srgb, var(--_fondo) 90%, var(--blanco)); box-shadow: var(--sombra-1); }

.btn--secundario {
  --_fondo: transparent; --_texto: var(--color-texto); --_borde: var(--color-texto);
}
.btn--secundario:hover { background: color-mix(in srgb, var(--color-texto) 8%, transparent); }

.btn--fantasma { --_fondo: transparent; --_texto: var(--color-enlace); --_borde: transparent; padding-inline: 14px; }
.btn--fantasma:hover { background: var(--color-chip-fondo); }

.btn--grande { min-height: 52px; padding-inline: 28px; font-size: var(--texto-grande); }
.btn--bloque { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Botón magnético: el JS mueve --mx / --my solo con puntero fino */
.btn--magnetico { translate: var(--mx, 0) var(--my, 0); }

/* Botón de icono (cerrar, menú, tema) */
.btn-icono {
  display: inline-grid; place-items: center;
  width: var(--tamano-tactil); height: var(--tamano-tactil);
  background: transparent; color: var(--color-texto);
  border: 2px solid var(--color-borde); border-radius: var(--radio-medio);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-rapida) var(--curva-salida);
}
.btn-icono:hover { background: var(--color-chip-fondo); }

/* WhatsApp flotante: en computador va a la derecha (el chat, a la izquierda); en celular queda un solo botón
   flotante, el del chat, que trae WhatsApp adentro (panel de expertos, 20-oct: no tapar la pantalla). */
.wa-flotante {
  position: fixed; right: var(--esp-4); bottom: calc(var(--esp-4) + env(safe-area-inset-bottom));
  z-index: 40;
  box-shadow: var(--sombra-2);
  min-height: 56px; padding-inline: 20px; border-radius: var(--radio-pildora);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: wa-llega .5s ease 1.2s both, wa-aviso 1.6s ease 9s 2;
}
.wa-flotante:hover, .wa-flotante:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: var(--sombra-2), 0 0 0 4px color-mix(in srgb, var(--ambar) 25%, transparent); }
.wa-flotante:active { transform: scale(.97); }
@keyframes wa-llega { from { opacity: 0; transform: translateY(16px); } }
@keyframes wa-aviso { 0%, 100% { box-shadow: var(--sombra-2); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ambar) 30%, transparent), var(--sombra-2); } }
.wa-flotante--demo { position: static; box-shadow: var(--sombra-1); animation: none; }
@media (max-width: 959px) { .wa-flotante:not(.wa-flotante--demo) { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-flotante { animation: none; transition: none; } .wa-flotante:hover { transform: none; } }
/* Mientras está el aviso de cookies, los botones flotantes no compiten con él */
body:has(.cookies-pie) .wa-flotante:not(.wa-flotante--demo), body:has(.cookies-pie) .asistente__boton { visibility: hidden; }

/* ==========================================================================
   Etiquetas y chips
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 12px;
  background: var(--color-chip-fondo); color: var(--color-chip-texto);
  border-radius: var(--radio-pildora);
  font: 500 var(--texto-chico)/1.3 var(--fuente-mono);
  letter-spacing: var(--tracking-etiquetas); text-transform: uppercase;
  white-space: nowrap;
}
.chip .icono { width: 16px; height: 16px; }
.chip--demo { background: var(--chip-demo-fondo); color: var(--chip-demo-texto); }
.chip--exito { background: var(--exito-fondo); color: var(--exito); }
.chip--tinta { background: var(--tinta); color: var(--blanco); }

/* Chip filtro (galería por rubro) y opción seleccionable del cotizador */
.chip-filtro {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--tamano-tactil); padding: 8px 18px;
  background: var(--color-superficie); color: var(--color-texto);
  border: 2px solid var(--borde-campo); border-radius: var(--radio-pildora);
  font: 700 var(--texto-base)/1.2 var(--fuente-texto);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-rapida) var(--curva-salida), border-color var(--dur-rapida);
}
.chip-filtro:hover { border-color: var(--color-marca); }
.chip-filtro[aria-pressed="true"] {
  background: var(--color-chip-fondo); color: var(--color-chip-texto);
  border-color: var(--color-marca);
}
/* El estado activo no depende solo del color: aparece una marca de verificación */
.chip-filtro[aria-pressed="true"]::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor;
  mask: var(--i-check) center / contain no-repeat;
  -webkit-mask: var(--i-check) center / contain no-repeat;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.tarjeta {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--esp-4);
  padding: var(--esp-5);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-grande);
  overflow: hidden;
}
.tarjeta h3, .tarjeta h4 { margin: 0; }

/* Brillo suave que sigue al cursor (solo puntero fino) */
@media (hover: hover) and (pointer: fine) {
  .tarjeta--brillo::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), var(--brillo), transparent 70%);
    opacity: 0; transition: opacity var(--dur-media) var(--curva-salida);
  }
  .tarjeta--brillo:hover::before { opacity: 1; }
  .tarjeta--brillo { transition: border-color var(--dur-media) var(--curva-salida), box-shadow var(--dur-media) var(--curva-salida); }
  .tarjeta--brillo:hover { border-color: var(--color-marca); box-shadow: var(--sombra-1); }
}

.tarjeta__icono {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--color-chip-fondo); color: var(--color-chip-texto);
  border-radius: var(--radio-medio);
}

/* Bento: bloques de distinto tamaño sobre una grilla de 6 columnas */
.bento { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento > * { grid-column: span 3; }
  .bento > .bento__ancho { grid-column: span 4; }
  .bento > .bento__chico { grid-column: span 2; }
  .bento > .bento__completo { grid-column: 1 / -1; }
}

/* Tarjeta de caso ("experimento") */
.caso__marco {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background: var(--color-fondo);
  border: var(--borde-ancho) dashed var(--borde-campo);
  border-radius: var(--radio-chico);
  color: var(--color-texto-suave);
  text-align: center; padding: var(--esp-4);
}
.caso__enlace { color: inherit; text-decoration: none; }
.caso__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* toda la tarjeta es clicable */
.caso__enlace:focus-visible { outline: none; }
.caso__enlace:focus-visible::after { outline: 3px solid var(--foco); outline-offset: 3px; }
.caso__entrar {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  color: var(--color-enlace); font-weight: 700;
}
.caso__entrar .icono { transition: translate var(--dur-media) var(--curva-salida); }
.tarjeta:hover .caso__entrar .icono { translate: 4px 0; }

/* Tarjeta de plan (escalera: Estar → Mostrar → Captar → Automatizar → Vender) */
.plan { gap: var(--esp-4); }
.plan__verbo { font-family: var(--fuente-titulos); font-weight: 900; font-size: var(--texto-h3); letter-spacing: var(--tracking-titulos); line-height: 1.1; }
.plan__precio { font: 500 2rem/1.1 var(--fuente-mono); font-variant-numeric: tabular-nums; }
.plan__insignia { min-height: 28px; }
.plan__desde { display: block; font: 500 var(--texto-chico)/1.3 var(--fuente-mono); letter-spacing: var(--tracking-etiquetas); text-transform: uppercase; color: var(--color-texto-suave); }
.plan__iva { font: 500 var(--texto-chico)/1.3 var(--fuente-mono); color: var(--color-texto-suave); letter-spacing: .02em; }
.plan__lista { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }
.plan__lista li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.plan__lista .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--exito); }
.plan__cta { margin-top: auto; }
.plan--destacado {
  border: 3px solid var(--color-marca);
  box-shadow: var(--sombra-2);
}

/* ==========================================================================
   Formularios
   ========================================================================== */
.campo { display: grid; gap: var(--esp-2); }
.campo__etiqueta { font-weight: 700; }
.campo__req { color: var(--color-texto-suave); font-weight: 400; }
.campo__ayuda, .campo__error, .campo__ok { font-size: .9375rem; margin: 0; }
.campo__ayuda { color: var(--color-texto-suave); }
.campo__error { display: flex; gap: 6px; align-items: flex-start; color: var(--error); font-weight: 700; }
.campo__ok { display: flex; gap: 6px; align-items: flex-start; color: var(--exito); font-weight: 700; }
.campo__error .icono, .campo__ok .icono { width: 20px; height: 20px; margin-top: 1px; }

.entrada, .area, .seleccion {
  width: 100%; min-height: var(--tamano-tactil);
  padding: 10px 14px;
  background: var(--color-superficie); color: var(--color-texto);
  border: 2px solid var(--borde-campo); border-radius: var(--radio-chico);
  font: 400 var(--texto-base)/1.4 var(--fuente-texto);
  transition: border-color var(--dur-rapida) var(--curva-salida), box-shadow var(--dur-rapida);
}
.area { min-height: 120px; resize: vertical; }
.entrada::placeholder, .area::placeholder { color: var(--color-texto-suave); opacity: 1; }
.entrada:hover, .area:hover, .seleccion:hover { border-color: var(--color-marca); }
.entrada:focus-visible, .area:focus-visible, .seleccion:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--color-marca);
}
.entrada[aria-invalid="true"], .area[aria-invalid="true"] { border-color: var(--error); border-width: 3px; }
.entrada.es-ok { border-color: var(--exito); }
.entrada[disabled] { opacity: .55; cursor: not-allowed; background: var(--color-fondo); }

/* Casilla y radio (nunca premarcadas en consentimientos) */
.opcion { display: flex; gap: var(--esp-3); align-items: flex-start; min-height: var(--tamano-tactil); padding-block: 8px; cursor: pointer; }
.opcion input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; margin-top: 1px;
  background: var(--color-superficie); border: 2px solid var(--borde-campo); border-radius: 6px; cursor: pointer;
  display: grid; place-items: center; transition: background-color var(--dur-rapida), border-color var(--dur-rapida); }
.opcion input[type="radio"] { border-radius: 50%; }
.opcion input:checked { background: var(--color-marca); border-color: var(--color-marca); }
.opcion input[type="checkbox"]:checked::after {
  content: ""; width: 14px; height: 14px; background: var(--color-fondo);
  mask: var(--i-check) center / contain no-repeat;
  -webkit-mask: var(--i-check) center / contain no-repeat;
}
.opcion input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-fondo); }
.opcion input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.opcion__texto small { display: block; color: var(--color-texto-suave); font-size: .9375rem; margin-top: 2px; }

/* Interruptor (cookies por tipo) */
.interruptor { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); min-height: var(--tamano-tactil); }
.interruptor input { appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0;
  background: var(--color-fondo); border: 2px solid var(--borde-campo); border-radius: var(--radio-pildora); cursor: pointer;
  transition: background-color var(--dur-media) var(--curva-salida); }
.interruptor input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--borde-campo); transition: translate var(--dur-media) var(--curva-salida), background-color var(--dur-media); }
.interruptor input:checked { background: var(--color-marca); border-color: var(--color-marca); }
.interruptor input:checked::before { translate: 20px 0; background: var(--color-fondo); }
.interruptor input:disabled { opacity: .6; cursor: not-allowed; }
.interruptor input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

/* Cuadro de consentimiento explícito (Ley 21.719) */
.consentimiento {
  padding: var(--esp-4); border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-chico);
  background: var(--color-fondo); display: grid; gap: var(--esp-2); font-size: .9375rem;
}
.consentimiento dl { margin: 0; display: grid; gap: 2px; }
.consentimiento dt { font: 500 var(--texto-chico)/1.3 var(--fuente-mono); letter-spacing: var(--tracking-etiquetas); text-transform: uppercase; color: var(--color-texto-suave); margin-top: var(--esp-2); }
.consentimiento dd { margin: 0; }

/* ==========================================================================
   Avisos
   ========================================================================== */
.aviso {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  padding: var(--esp-4); border-radius: var(--radio-medio);
  border: var(--borde-ancho) solid var(--color-borde);
  background: var(--color-superficie);
}
.aviso .icono { margin-top: 1px; }
.aviso__titulo { font-weight: 700; margin: 0 0 2px; }
.aviso p { max-width: none; }
.aviso--info { background: var(--info-fondo); border-color: transparent; }
.aviso--info .icono { color: var(--color-chip-texto); }
.aviso--exito { background: var(--exito-fondo); border-color: var(--exito); }
.aviso--exito .icono { color: var(--exito); }
.aviso--error { background: var(--error-fondo); border-color: var(--error); }
.aviso--error .icono { color: var(--error); }
.aviso--demo { background: var(--chip-demo-fondo); border-color: var(--aviso-borde); }
.aviso--demo .icono, .aviso--demo .aviso__titulo { color: var(--chip-demo-texto); }

.tostada {
  display: inline-flex; gap: var(--esp-3); align-items: center;
  padding: 12px 18px; border-radius: var(--radio-medio);
  background: var(--tinta); color: var(--blanco); box-shadow: var(--sombra-2);
}
.tostada .icono { color: var(--cobalto-claro); }

/* ==========================================================================
   Navegación
   ========================================================================== */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: var(--nav-fondo);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); /* vidrio esmerilado: solo menú y ventanas */
  border-bottom: var(--borde-ancho) solid var(--color-borde);
}
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 68px; }
.barra__logo { display: block; view-transition-name: logo; }
.nav { display: none; }
.nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--esp-1); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tamano-tactil); padding-inline: 14px;
  color: var(--color-texto); font-weight: 700; text-decoration: none; border-radius: var(--radio-medio);
}
.nav a:hover { background: var(--color-chip-fondo); }
.nav a[aria-current="page"] { color: var(--color-chip-texto); background: var(--color-chip-fondo); box-shadow: inset 0 -3px 0 var(--color-marca); }
@media (min-width: 960px) { .nav { display: block; } .barra__menu { display: none; } }

.menu-movil { border-top: var(--borde-ancho) solid var(--color-borde); padding-block: var(--esp-3); }
.menu-movil ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-movil a { display: flex; align-items: center; min-height: 52px; padding-inline: var(--esp-2); color: var(--color-texto); font-weight: 700; font-size: var(--texto-grande); text-decoration: none; border-bottom: var(--borde-ancho) solid var(--color-borde); }
.menu-movil[hidden] { display: none; }
@media (min-width: 960px) { .menu-movil { display: none; } }

.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9375rem; }
.migas li { display: flex; align-items: center; gap: 6px; }
.migas li + li::before { content: "/"; color: var(--color-texto-suave); }
.migas a { display: inline-flex; align-items: center; min-height: 32px; }
.migas [aria-current] { color: var(--color-texto-suave); }

.pie { background: var(--tinta); color: var(--niebla); padding-block: var(--esp-8); }
.pie a { color: var(--cobalto-claro); }
.pie .texto-suave { color: var(--gris-oscuro); }
.pie__columnas { display: grid; gap: var(--esp-6); }
@media (min-width: 768px) { .pie__columnas { grid-template-columns: 2fr 1fr 1fr; } }
.pie ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.pie ul a { display: inline-flex; align-items: center; min-height: var(--tamano-tactil); }

/* ==========================================================================
   Pasos, nivel de líquido, acordeón, cargando
   ========================================================================== */
.pasos { list-style: none; padding: 0; display: grid; gap: var(--esp-3); counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; gap: var(--esp-3); align-items: flex-start; }
.pasos li::before {
  content: "PASO " counter(paso, decimal-leading-zero);
  flex: none; min-width: 86px;
  font: 500 var(--texto-chico)/1.6 var(--fuente-mono); letter-spacing: var(--tracking-etiquetas); color: var(--color-texto-suave);
}
.pasos [aria-current="step"] { font-weight: 700; }
.pasos [aria-current="step"]::before { color: var(--color-chip-texto); }

/* Nivel de líquido: progreso del cotizador y de la pieza 3D */
.nivel { height: 12px; background: var(--color-chip-fondo); border-radius: var(--radio-pildora); overflow: hidden; border: var(--borde-ancho) solid var(--color-borde); }
.nivel__relleno { height: 100%; width: var(--nivel, 0%); background: var(--color-marca); border-radius: inherit; transition: width var(--dur-lenta) var(--curva-salida); }

.acordeon { border-top: var(--borde-ancho) solid var(--color-borde); }
.acordeon details { border-bottom: var(--borde-ancho) solid var(--color-borde); }
.acordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4);
  min-height: 56px; padding-block: 12px; cursor: pointer; list-style: none;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: var(--texto-grande);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ""; flex: none; width: 24px; height: 24px; background: var(--color-marca);
  mask: var(--i-mas) center / contain no-repeat; -webkit-mask: var(--i-mas) center / contain no-repeat;
  transition: rotate var(--dur-media) var(--curva-salida);
}
.acordeon details[open] summary::after { rotate: 45deg; }
.acordeon details > div { padding-bottom: var(--esp-4); }

.esqueleto { display: block; border-radius: var(--radio-chico); background: var(--color-chip-fondo); min-height: 16px;
  animation: pulso 1.4s var(--curva-entrada-salida) infinite alternate; }
@keyframes pulso { from { opacity: .5; } to { opacity: 1; } }

/* ==========================================================================
   Ventanas (vidrio esmerilado solo aquí y en el menú)
   ========================================================================== */
.ventana {
  width: min(520px, calc(100% - 32px)); padding: var(--esp-5);
  background: var(--color-superficie); color: var(--color-texto);
  border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-2);
}
.ventana::backdrop { background: color-mix(in srgb, var(--tinta) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  .ventana[open] { animation: ventana-entra var(--dur-media) var(--curva-salida); }
  @keyframes ventana-entra { from { opacity: 0; translate: 0 12px; } }
}

.cookies {
  display: grid; gap: var(--esp-4); padding: var(--esp-5);
  background: var(--color-superficie); border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-grande); box-shadow: var(--sombra-2);
}
/* "Rechazar" pesa igual que "Aceptar": mismo tamaño, mismo contraste de borde */
.cookies__acciones { display: grid; gap: var(--esp-3); }
.cookies__acciones .btn { width: 100%; }
@media (min-width: 640px) { .cookies__acciones { grid-template-columns: repeat(3, 1fr); } }

/* "Hecho por Tu Laboratorio Web" */
.sello {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--tamano-tactil);
  color: inherit; text-decoration: none; font: 500 var(--texto-chico)/1.2 var(--fuente-mono); letter-spacing: var(--tracking-etiquetas); text-transform: uppercase;
}
.sello img { width: 28px; height: 28px; }
.sello:hover span { text-decoration: underline; }

/* ==========================================================================
   Documentación del sistema (solo /estilos.html)
   ========================================================================== */
.muestra { padding: var(--esp-4); border-radius: var(--radio-grande); border: var(--borde-ancho) solid var(--color-borde); background: var(--color-superficie); }
.muestra--fondo { background: var(--color-fondo); }
.muestra--tinta { background: var(--tinta); color: var(--niebla); border-color: var(--tinta); }

.color-grid { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.color { border-radius: var(--radio-medio); border: var(--borde-ancho) solid var(--color-borde); overflow: hidden; background: var(--color-superficie); }
.color__muestra { height: 72px; background: var(--c); border-bottom: var(--borde-ancho) solid var(--color-borde); }
.color__info { padding: var(--esp-3); font: 500 var(--texto-chico)/1.5 var(--fuente-mono); }
.color__info strong { display: block; font-family: var(--fuente-texto); font-size: var(--texto-base); }

.proporcion { display: flex; height: 40px; border-radius: var(--radio-medio); overflow: hidden; border: var(--borde-ancho) solid var(--color-borde); }
.proporcion span { display: grid; place-items: center; font: 500 var(--texto-chico)/1 var(--fuente-mono); }

.tabla-wrap { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px; border-bottom: var(--borde-ancho) solid var(--color-borde); vertical-align: middle; }
.tabla th { font: 500 var(--texto-chico)/1.3 var(--fuente-mono); letter-spacing: var(--tracking-etiquetas); text-transform: uppercase; color: var(--color-texto-suave); }
.par { display: inline-grid; place-items: center; min-width: 72px; padding: 4px 10px; border-radius: var(--radio-chico); font-weight: 700; background: var(--p-fondo); color: var(--p-texto); border: var(--borde-ancho) solid var(--color-borde); }
.veredicto { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.veredicto--si { color: var(--exito); }
.veredicto--no { color: var(--error); }

.ejemplo-tipo { display: grid; grid-template-columns: 1fr; gap: var(--esp-2); padding-block: var(--esp-4); border-bottom: var(--borde-ancho) solid var(--color-borde); }
@media (min-width: 768px) { .ejemplo-tipo { grid-template-columns: 180px 1fr; align-items: baseline; } }

.iconos-grid { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.icono-celda { display: grid; justify-items: center; gap: var(--esp-2); padding: var(--esp-4) var(--esp-2); border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-medio); background: var(--color-superficie); text-align: center; }

.espacio-barra { height: 16px; background: var(--color-marca); border-radius: 3px; }
.radio-caja { width: 72px; height: 72px; background: var(--color-chip-fondo); border: 2px solid var(--color-marca); }
.mov-pista { position: relative; height: 48px; background: var(--color-fondo); border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-pildora); }
.mov-punto { position: absolute; top: 5px; left: 5px; width: 36px; height: 36px; border-radius: 50%; background: var(--color-marca); transition: translate var(--t, var(--dur-media)) var(--c, var(--curva-salida)); }
.mov-pista.activo .mov-punto { translate: calc(var(--ancho-pista, 300px) - 46px) 0; }

.indice { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.indice a { display: inline-flex; align-items: center; min-height: var(--tamano-tactil); padding-inline: 14px; border-radius: var(--radio-pildora); background: var(--color-superficie); border: var(--borde-ancho) solid var(--color-borde); color: var(--color-texto); text-decoration: none; font-weight: 700; }
.indice a:hover { border-color: var(--color-marca); color: var(--color-enlace); }

.sec-cabecera { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-6); }
.sec-cabecera .etiqueta { color: var(--color-chip-texto); }

/* ---------- Reducción de movimiento: todo queda quieto y legible ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-icono, .tarjeta, .mov-punto, .nivel__relleno, .esqueleto, .acordeon summary::after, .caso__entrar .icono { transition: none !important; animation: none !important; }
  .btn--magnetico { translate: none !important; }
}

/* Redes sociales del pie: botones de 44 px, solo los que tienen enlace */
.redes { display: flex; gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }
.redes__boton { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-pildora); border: 1px solid currentColor; color: inherit;
  transition: transform .2s ease, background-color .2s ease; }
.redes__boton:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 12%, transparent); }
.redes__boton svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .redes__boton { transition: none; } .redes__boton:hover { transform: none; } }

/* Aviso de cookies en barra compacta: texto chico, botones de igual peso, nunca más de un tercio de la pantalla */
.cookies--barra { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-medio); }
.cookies__texto { margin: 0; font-size: .875rem; line-height: 1.45; max-width: none; }
.cookies--barra .cookies__acciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
.cookies--barra .btn { min-height: 44px; padding-inline: var(--esp-3); font-size: .875rem; }
@media (min-width: 860px) { .cookies--barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .cookies--barra .cookies__acciones { grid-template-columns: repeat(3, auto); } }

/* Ventana con el detalle de un plan (js/plan-detalle.js) */
.dialogo-plan { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: var(--borde-ancho) solid var(--color-borde); border-radius: var(--radio-grande);
  background: var(--color-superficie); color: var(--color-texto); box-shadow: var(--sombra-2); overflow: auto; }
.dialogo-plan[open] { display: grid; gap: var(--esp-3); padding: var(--esp-5); animation: dialogo-entra .25s var(--curva-salida); }
.dialogo-plan::backdrop { background: color-mix(in srgb, var(--tinta) 55%, transparent); backdrop-filter: blur(2px); }
.dialogo-plan__cabeza { display: flex; justify-content: space-between; align-items: start; gap: var(--esp-3); }
.dialogo-plan__cabeza h2 { margin: 0; font-size: var(--texto-h2); }
.dialogo-plan__cabeza .etiqueta { margin: 0; color: var(--color-chip-texto); }
.dialogo-plan__cerrar { font-size: 1.5rem; line-height: 1; }
.dialogo-plan h3 { margin: var(--esp-2) 0 0; font-size: var(--texto-grande); }
.dialogo-plan p { margin: 0; }
.dialogo-plan__todos summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.dialogo-plan__acciones { display: grid; gap: var(--esp-2); margin-top: var(--esp-2); }
.dialogo-plan__acciones .enlace-simple { justify-self: center; min-height: 44px; display: inline-flex; align-items: center; color: var(--color-enlace); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .dialogo-plan[open] { animation: none; } }

/* Matraz del logo que se llena con el scroll (js/ui.js): queda encima del logo, en la zona del matraz */
.barra__logo { position: relative; flex-shrink: 0; }
/* Logo más ancho desde el cambio a tulaboratorioweb.cl: entre 960 y 1199 px el menú no cabe entero; «Cotizador» sobra porque el botón Ámbar lleva al mismo lugar */
.barra__cta { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1199px) { .nav a[href$="cotizador.html"] { display: none; } }
.logo__liquido { position: absolute; left: 0; top: 0; width: 186px; height: 32px; pointer-events: none; }
.logo__nivel { fill: color-mix(in srgb, var(--cobalto), var(--ambar) calc(max(0, var(--avance, 0) - .85) / .15 * 100%)); opacity: .85;
  transform: translateY(calc(31px + (1 - var(--avance, 0)) * 28px)); transition: transform .2s linear; }
/* Prueba legal visible en el pie */
.pie__legal { margin: var(--esp-3) 0 0; font: 500 .8125rem/1.5 var(--fuente-mono); color: var(--gris-oscuro); }