/* ==========================================================================
   Componentes — header (Fase 3), hero, nosotros, preguntas frecuentes y WhatsApp
   flotante (Fase 7)
   ========================================================================== */

/* ---------- Logo ----------
   El viewBox del SVG está recortado al contorno: todo el alto es logo. */
.logo {
  display: block;
}

.logo__img {
  width: auto;
  height: 4rem;
}

/* ---------- Botón hamburguesa (solo móvil) ----------
   Área táctil de 44px. Las 3 barras se apilan desde el centro y,
   con aria-expanded="true", la 1 y la 3 se cruzan en una X. */
.menu-toggle {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(var(--space-2) * -1);
  border-radius: var(--radius-pill);
}

.menu-toggle__bar {
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 0.8125rem);
  width: 1.625rem;
  height: 2px;
  background: var(--chalk);
  border-radius: var(--radius-pill);
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-fast) linear;
}

.menu-toggle__bar:nth-child(1) {
  transform: translateY(-0.5rem);
}

.menu-toggle__bar:nth-child(3) {
  transform: translateY(0.5rem);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: rotate(-45deg);
}

/* ---------- Navegación principal (pastilla de vidrio) ----------
   Vidrio grueso y estático, solo con capas (sin backdrop-filter ni
   filtros SVG: detrás hay degradado liso y la pastilla se anima en la
   entrada). De afuera hacia adentro:
   - .main-nav: cuerpo casi transparente y sombra que lo despega.
   - ::before: canto nítido de 1.5px, más brillante arriba y abajo.
   - ::after: grosor del cristal; bandas de luz por dentro del canto,
     más anchas en los extremos curvos, como un tubo.
   - .main-nav__glass: tornasol cálido en los extremos (::before)
     y brillo especular tenue arriba (::after).
   El indicador naranja es un solo elemento que main.js mueve al link
   en hover/foco (--indicator-x, --indicator-w) y regresa al activo. */
.main-nav {
  position: relative;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.035)),
    var(--nav-pill-bg);
  box-shadow:
    0 0.125rem 0.25rem rgba(0, 9, 45, 0.35),
    0 0.75rem 2rem rgba(0, 9, 45, 0.45);
}

.main-nav::before,
.main-nav::after,
.main-nav__glass,
.main-nav__glass::before,
.main-nav__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Canto: anillo recortado con máscara */
.main-nav::before {
  padding: 1.5px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.32) 30%,
    rgba(255, 255, 255, 0.22) 60%,
    rgba(255, 255, 255, 0.55)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

/* Grosor: luz que corre por dentro del canto (arriba, abajo y los
   extremos), una sombra fina que marca el borde interior del tubo y
   un leve aclarado en las curvas, donde el cristal concentra luz */
.main-nav::after {
  inset: 1.5px;
  background:
    radial-gradient(ellipse 2rem 70% at 0% 50%, rgba(238, 237, 232, 0.1), transparent 75%),
    radial-gradient(ellipse 2rem 70% at 100% 50%, rgba(238, 237, 232, 0.1), transparent 75%);
  box-shadow:
    inset 0 0.25rem 0.3rem -0.15rem rgba(255, 255, 255, 0.4),
    inset 0 -0.25rem 0.35rem -0.15rem rgba(255, 255, 255, 0.22),
    inset 0.7rem 0 0.7rem -0.4rem rgba(255, 255, 255, 0.2),
    inset -0.7rem 0 0.7rem -0.4rem rgba(255, 255, 255, 0.2),
    inset 0 0 0 0.5rem rgba(255, 255, 255, 0.025),
    inset 0 0 1.6rem 0.35rem rgba(0, 18, 79, 0.4);
}

/* Tornasol cálido: dos medias lunas pegadas a cada extremo */
.main-nav__glass::before {
  inset: 2px;
  box-shadow:
    inset 0.25rem 0 0.25rem -0.1rem rgba(255, 196, 150, 0.35),
    inset 0.6rem 0 0.5rem -0.3rem rgba(238, 237, 232, 0.22),
    inset -0.25rem 0 0.25rem -0.1rem rgba(238, 237, 232, 0.4),
    inset -0.6rem 0 0.5rem -0.3rem rgba(255, 170, 110, 0.22);
}

/* Brillo especular: reflejo amplio y tenue arriba y otro abajo a la
   derecha (sin manchas puntuales en los extremos) */
.main-nav__glass::after {
  background:
    radial-gradient(ellipse 30% 55% at 30% 0%, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(ellipse 22% 45% at 82% 100%, rgba(255, 255, 255, 0.08), transparent 70%);
}

.main-nav__list {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(var(--space-5), 0.4rem + 2.4vw, 3.25rem);
  padding-inline: clamp(var(--space-5), 0.6rem + 1.6vw, 2.25rem);
}

.main-nav__link {
  position: relative;
  display: block;
  padding-block: 1.0625rem;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--chalk);
  transition: color var(--duration-fast) linear;
}

.main-nav__link.is-active {
  color: var(--chalk);
}

.main-nav__link:focus-visible {
  outline-offset: 0;
}

.main-nav__indicator {
  position: absolute;
  z-index: 1;
  bottom: 0.5rem;
  left: 0;
  width: var(--indicator-w, 0);
  height: 2px;
  background: var(--orange-500);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0.75rem rgba(255, 123, 44, 0.55);
  translate: var(--indicator-x, 0) 0;
  opacity: 0;
  pointer-events: none;
}

/* Primero se coloca sin transición; luego main.js agrega .is-ready */
.main-nav__indicator.is-ready {
  opacity: 1;
  transition:
    translate var(--duration-base) var(--ease-out),
    width var(--duration-base) var(--ease-out);
}

/* Sin JS: línea fija bajo el link activo */
html:not(.js) .main-nav__indicator {
  display: none;
}

html:not(.js) .main-nav__link.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 0.5rem;
  height: 2px;
  background: var(--orange-500);
  border-radius: var(--radius-pill);
}

/* ---------- Redes sociales ---------- */
.social {
  display: flex;
  gap: var(--space-3);
}

.social__link {
  display: grid;
  place-items: center;
  padding: var(--space-1);
  color: var(--chalk);
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) linear,
    transform var(--duration-base) var(--ease-out);
}

.social__link:hover,
.social__link:focus-visible {
  color: var(--orange-500);
  transform: scale(1.12);
}

.social__icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- Síguenos en redes ----------
   Etiqueta en Playfair Display cursiva seguida de los 3 íconos de redes. */
.follow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.follow__label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Teléfono y correo ----------
   En texto, debajo de las redes y en tono suave para no competir con
   ellas; el ícono naranja es el acento. */
.contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-4);
}

.contact-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--duration-fast) linear;
}

.contact-list__link:hover,
.contact-list__link:focus-visible {
  color: var(--chalk);
}

.contact-list__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--chalk);
}

/* ==========================================================================
   Hero: fondo y atmósfera
   Capas, de abajo hacia arriba (todas decorativas, aria-hidden):
   1. Base --klein-800 (en .hero, layout.css)
   2. Luz central: reflector de estudio detrás de la van
   3. Brillo --glow con blur y "respiración" (animations.css)
   4. Viñeta: bordes y esquinas casi negros + marco arriba/abajo
   5. Piso: sombra de contacto y reflejo (en .scene__stage, más abajo)
   6. Grano: ruido SVG casi imperceptible contra el banding
   ========================================================================== */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-backdrop);
  overflow: hidden;
  pointer-events: none;
}

.hero__backdrop > * {
  position: absolute;
  display: block;
}

/* 2. Luz central. La caída es en curva (no lineal) para que se sienta
   como el haz de un reflector y no como un círculo pintado. Encima, un
   núcleo pequeño con --glow: el "punto caliente" del reflector. */
.hero__light {
  inset: 0;
  background:
    radial-gradient(
      ellipse calc(var(--light-w) * 0.5) calc(var(--light-h) * 0.42) at var(--light-x) calc(var(--light-y) - 6%),
      color-mix(in srgb, var(--glow) 42%, transparent) 0%,
      color-mix(in srgb, var(--glow) 20%, transparent) 50%,
      transparent 100%
    ),
    radial-gradient(
      ellipse var(--light-w) var(--light-h) at var(--light-x) var(--light-y),
      var(--klein-500) 0%,
      color-mix(in srgb, var(--klein-500) 96%, transparent) 20%,
      color-mix(in srgb, var(--klein-500) 80%, transparent) 38%,
      color-mix(in srgb, var(--klein-500) 52%, transparent) 54%,
      color-mix(in srgb, var(--klein-500) 24%, transparent) 70%,
      color-mix(in srgb, var(--klein-500) 7%, transparent) 85%,
      transparent 100%
    );
}

/* 3. Brillo extra: más pequeño, pegado al techo de la van (contraluz).
   Sin filter: blur (se recalculaba en cada cuadro de la animación y
   trababa la entrada): la caída suave la dan los pasos del degradado. */
.hero__glow {
  left: calc(var(--glow-x) - var(--glow-w) / 2);
  top: calc(var(--glow-y) - var(--glow-h) / 2);
  width: var(--glow-w);
  height: var(--glow-h);
  background: var(--glow-soft);
  opacity: 0.3;
}

/* 4. Viñeta: radial desde el punto de luz hasta --klein-900 en los bordes,
   más un degradado lineal que enmarca arriba (menú) y abajo. */
.hero__vignette {
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--klein-900) 34%, transparent) 0%,
      color-mix(in srgb, var(--klein-900) 14%, transparent) 9%,
      transparent 18%,
      transparent 84%,
      color-mix(in srgb, var(--klein-900) 30%, transparent) 100%
    ),
    radial-gradient(
      ellipse var(--vignette-w) var(--vignette-h) at var(--light-x) var(--light-y),
      transparent 0%,
      transparent 30%,
      color-mix(in srgb, var(--klein-900) 30%, transparent) 50%,
      color-mix(in srgb, var(--klein-900) 70%, transparent) 70%,
      color-mix(in srgb, var(--klein-900) 93%, transparent) 87%,
      var(--klein-900) 100%
    );
}

/* 6. Grano: feTurbulence en escala de grises, en mosaico. Fijo (no se
   anima): da textura de papel fotográfico al azul liso. */
.hero__grain {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 13.75rem;
  opacity: 0.07;
}

/* ---------- Hero: texto ----------
   Espaciado vertical medido sobre la referencia: el título va pegado
   al eyebrow y los bloques siguientes respiran ~2rem entre sí. */
.hero__eyebrow {
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}

.hero__title {
  margin-top: clamp(var(--space-4), 0.6rem + 0.8vw, var(--space-5));
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

/* Cada línea es la máscara de su texto: el recorte (clip-path) solo
   existe durante la entrada (line-mask, animations.css). */
.hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero__title-text {
  display: block;
}

/* "FÁCIL Y SEGURO" en itálica naranja. La itálica se inclina hacia la
   derecha: un poco de aire antes del punto. */
.hero__title-accent {
  margin-right: 0.04em;
  font-style: italic;
  color: var(--orange-500);
}

.hero__lead {
  margin-top: clamp(var(--space-5), 1rem + 1vw, var(--space-6));
  max-width: 30ch;
  font-size: 1.125rem;
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ---------- Botón ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
}

/* CTA principal: pastilla naranja con círculo blanco y flecha.
   Texto Klein oscuro (--color-on-accent) y no blanco: el blanco sobre este
   naranja no llega al contraste AA (Fase 8).
   Volumen: degradado vertical (más claro arriba), filo de luz arriba y
   borde más oscuro abajo (sombras inset), sombra de contacto y halo
   naranja. Hover: sube 2px, crece el halo, la flecha avanza y un brillo
   diagonal (::before) cruza el botón. El brillo solo se anima de ida;
   al salir se reinicia sin transición. También cruza una vez al final
   de la entrada (cta-shine, animations.css). */
.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-2) var(--space-2) var(--space-2) 1.75rem;
  background: linear-gradient(180deg, var(--orange-400) 0%, var(--orange-500) 55%, var(--orange-600) 100%);
  color: var(--color-on-accent);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  box-shadow: var(--shadow-cta-bevel), var(--shadow-cta);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: var(--shadow-cta-bevel), var(--shadow-cta-hover);
  transform: translateY(-2px);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  transform: translateX(320%) skewX(-20deg);
  transition: transform var(--duration-slow) var(--ease-out);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-cta-bevel), var(--shadow-cta);
}

/* Círculo de la flecha: como una perilla, con luz arriba y una
   sombrita naranja oscura que lo despega del botón */
.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--chalk) 100%);
  color: var(--orange-500);
  border-radius: var(--radius-circle);
  box-shadow:
    0 0.125rem 0.375rem color-mix(in srgb, var(--orange-600) 70%, rgba(0, 9, 45, 0.6)),
    inset 0 -1px 0 rgba(0, 9, 45, 0.08);
}

.btn__arrow {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow {
  transform: translateX(3px);
}

.hero__cta {
  margin-top: clamp(var(--space-6), 1.4rem + 1vw, var(--space-7));
}

/* ---------- Fila de confianza ----------
   Tres beneficios separados por líneas finas: ícono naranja y texto en
   dos renglones (palabra clave en blanco, el resto en gris). Sin borde
   ni fondo para que no parezcan botones. */
.trust {
  display: flex;
  align-items: center;
}

.hero__trust {
  margin-top: clamp(var(--space-6), 1.4rem + 1vw, var(--space-7));
}

.trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  font-size: 0.8125rem;
  font-weight: var(--fw-light);
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
}

.trust__item:first-child {
  padding-left: 0;
}

.trust__item + .trust__item {
  border-left: 1px solid var(--line);
}

.trust__key {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--chalk);
}

.trust__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--chalk);
}

/* ---------- Escena: ruta punteada ----------
   La caja del SVG coincide con su viewBox (la van +15% a cada lado y
   +40% arriba), así que escala parejo y sus coordenadas son píxeles de
   van-v2.png. El trazo usa vector-effect="non-scaling-stroke": mide 2.5px
   y punteado 8/10 en cualquier tamaño. Por encima de las cajas, por
   debajo de la van (--z-van). */
.scene__route {
  position: absolute;
  z-index: var(--z-base);
  left: -15%;
  top: -40%;
  width: 130%;
  max-width: none; /* base.css limita los svg al 100% */
  height: 140%;
  overflow: visible;
  color: var(--color-accent);
  pointer-events: none;
}

/* ---------- Escena: pines de ubicación ----------
   left/top = extremo de la ruta ÷ tamaño de van-v2.png (1324×740).
   El translate lleva la punta de la gota justo a ese punto. */
.scene__pin {
  position: absolute;
  z-index: var(--z-base);
  display: block;
  width: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  translate: -50% -100%;
}

/* Inicio de la ruta: (60, 190) */
.scene__pin--start {
  left: 4.53%;
  top: 25.68%;
}

/* Final de la ruta: (1400, 330) */
.scene__pin--end {
  left: 105.74%;
  top: 44.59%;
}

.scene__pin-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0.35rem 0.4rem rgba(0, 9, 45, 0.45));
}

.scene__pin-drop {
  fill: var(--color-accent);
}

/* Brillo curvo en el hombro de la gota: da volumen sin degradados */
.scene__pin-shine {
  fill: none;
  stroke: var(--chalk);
  stroke-opacity: 0.35;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.scene__pin-dot {
  fill: var(--chalk);
}

/* Anillo de pulso naranja en el piso, bajo la punta. Invisible: solo
   se ve una vez, cuando el pin aterriza (pin-ring, animations.css). */
.scene__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 120%;
  aspect-ratio: 2.4 / 1;
  translate: -50% -50%;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-circle);
  opacity: 0;
  pointer-events: none;
}

/* Sombra elíptica pequeña en el piso, bajo la punta */
.scene__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 70%;
  height: 0.45rem;
  translate: -50% -50%;
  border-radius: var(--radius-circle);
  background: radial-gradient(closest-side, rgba(0, 9, 45, 0.7), rgba(0, 9, 45, 0.3) 60%, transparent);
}

/* ---------- Escena: van y piso de estudio ----------
   Todo en % del escenario (= tamaño de la van). Los valores del piso
   están calibrados para assets/img/van-v2.png (1324×740, vista 3/4 con
   el frente a la izquierda). Puntos de apoyo en píxeles de la foto:
   esquina de la defensa (40, 615), llanta delantera (640, 738) y
   llanta trasera (1200, 555). Si cambia la foto, recalibrar. */
/* Halo azul y sombra hacia el piso. Fijas: lo que se mueve es el
   <picture> (.hero__van-frame), así no se recalculan en cada cuadro. */
.hero__van {
  filter:
    drop-shadow(0 0 2.5rem color-mix(in srgb, var(--glow) 30%, transparent))
    drop-shadow(0 1.25rem 1.5rem rgba(0, 9, 45, 0.45));
}

/* Estudio: pared y piso. --floor-y es la altura de la unión pared/piso
   en % del escenario; cambia por breakpoint (responsive.css) para quedar
   siempre detrás de la base de las cajas: si la base de una caja cae
   arriba de la unión, la caja se ve metida en la pared o flotando.
   La caja va de --floor-y − 25% a +75% del escenario, así la unión
   queda en su 25%. Arriba la pared se aclara un poco (rebote de luz) y
   abajo el piso, más claro cerca de la pared y más oscuro al frente.
   La máscara desvanece todo junto (luz, línea y retícula) hacia los
   lados y hacia abajo: por eso la línea termina donde termina la
   retícula. El centro va un poco a la derecha de la van (53% de la
   caja = 58% del escenario) para que del lado del texto se apague antes
   de llegar al párrafo (~-4% del escenario). */
.scene__floor {
  position: absolute;
  left: -70%;
  width: 240%;
  top: calc(var(--floor-y) - 25%);
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--glow) 8%, transparent) 14%,
    color-mix(in srgb, var(--glow) 22%, transparent) 25%,
    color-mix(in srgb, var(--klein-500) 34%, transparent) 38%,
    color-mix(in srgb, var(--klein-500) 14%, transparent) 62%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(ellipse 26% 75% at 53% 25%, #000 0%, #000 30%, rgba(0, 0, 0, 0.45) 60%, transparent 92%);
  mask-image: radial-gradient(ellipse 26% 75% at 53% 25%, #000 0%, #000 30%, rgba(0, 0, 0, 0.45) 60%, transparent 92%);
}

/* Línea de la pared y retícula: un SVG (ver index.html) que ocupa del
   25% al 100% de la caja. Su borde de arriba ES la unión, y como el
   viewBox escala con el escenario (que siempre tiene la proporción de
   la van), la perspectiva no cambia con el tamaño de pantalla. */
.scene__floor-grid {
  position: absolute;
  left: 0;
  top: 25%;
  width: 100%;
  height: 75%;
}

.scene__floor-lines,
.scene__floor-seam {
  fill: none;
  stroke-width: 1;
}

.scene__floor-lines {
  stroke: rgba(255, 255, 255, 0.14);
}

.scene__floor-seam {
  stroke: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

/* Reflejo azul horizontal: el piso brillante bajo la van. El pico queda
   justo bajo las llantas y se desvanece hacia el frente (abajo).
   Nota de rendimiento (aplica a toda la escena): lo que entra con
   opacidad o transform no lleva filter: blur, porque el compositor lo
   recalcula en cada cuadro y traba la entrada. La caída suave la dan
   los pasos de los degradados. */
.scene__reflection {
  position: absolute;
  left: -40%;
  width: 180%;
  top: 60%;
  height: 120%;
  background:
    radial-gradient(
      ellipse 34% 12% at 52% 32%,
      color-mix(in srgb, var(--glow) 45%, rgba(255, 255, 255, 0.7)) 0%,
      color-mix(in srgb, var(--glow) 62%, rgba(255, 255, 255, 0.34)) 20%,
      color-mix(in srgb, var(--glow) 58%, transparent) 40%,
      color-mix(in srgb, var(--glow) 34%, transparent) 60%,
      color-mix(in srgb, var(--glow) 14%, transparent) 80%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 50% 50% at 50% 26%,
      color-mix(in srgb, var(--glow) 100%, transparent) 0%,
      color-mix(in srgb, var(--klein-500) 86%, transparent) 24%,
      color-mix(in srgb, var(--klein-500) 62%, transparent) 44%,
      color-mix(in srgb, var(--klein-500) 40%, transparent) 64%,
      color-mix(in srgb, var(--klein-500) 18%, transparent) 82%,
      transparent 100%
    );
}

/* Brillo del piso: el reflejo de la van, difuso como en un piso de
   estudio pulido. No es la foto volteada: en la vista 3/4 el espejo
   deforma las llantas. Son degradados: dos manchas oscuras bajo las
   llantas y un velo claro bajo el costado blanco (::before), sobre la
   misma línea de piso que la sombra. Caja: y 70%…115% del escenario. */
.scene__gloss {
  position: absolute;
  left: 0;
  width: 100%;
  top: 70%;
  height: 45%;
  background:
    /* Llanta delantera (640, 738) */
    radial-gradient(
      ellipse 5.5% 9% at 48.3% 75%,
      rgba(0, 9, 45, 0.55) 0%,
      rgba(0, 9, 45, 0.3) 45%,
      rgba(0, 9, 45, 0.1) 75%,
      transparent 100%
    ),
    /* Llanta trasera (1200, 555): más lejos, más chica */
    radial-gradient(
      ellipse 3.8% 6.5% at 90.4% 19%,
      rgba(0, 9, 45, 0.45) 0%,
      rgba(0, 9, 45, 0.24) 45%,
      rgba(0, 9, 45, 0.08) 75%,
      transparent 100%
    );
}

/* Velo claro: el costado blanco reflejado entre las dos llantas,
   paralelo a la línea de piso (−18°) y un poco abajo de ella */
.scene__gloss::before {
  content: "";
  position: absolute;
  left: 54%;
  width: 31%;
  top: 43%;
  height: 13%;
  rotate: -18deg;
  border-radius: var(--radius-circle);
  background: radial-gradient(
    closest-side,
    rgba(238, 237, 232, 0.34) 0%,
    rgba(238, 237, 232, 0.2) 40%,
    rgba(238, 237, 232, 0.08) 72%,
    transparent 100%
  );
}

/* Sombra de contacto: halo amplio bajo toda la van + dos núcleos
   oscuros que siguen el piso de la vista 3/4. Los núcleos se miden en
   % de esta caja (x -26…1298, y 533…711 en píxeles de la foto). */
.scene__shadow {
  position: absolute;
  left: -2%;
  width: 100%;
  top: 72%;
  height: 24%;
  background: radial-gradient(
    closest-side,
    rgba(0, 9, 45, 0.82) 0%,
    rgba(0, 9, 45, 0.62) 35%,
    rgba(0, 9, 45, 0.36) 62%,
    rgba(0, 9, 45, 0.12) 84%,
    transparent 100%
  );
}

.scene__shadow::before,
.scene__shadow::after {
  content: "";
  position: absolute;
  /* Degradado vertical (no radial): igual de oscuro a todo lo largo,
     también en las llantas, que quedan cerca de las puntas */
  background: linear-gradient(transparent, rgba(0, 9, 45, 0.95) 50%, transparent);
  border-radius: var(--radius-circle);
  filter: blur(0.2rem);
}

/* Costado: de la llanta delantera a la trasera (sube hacia atrás) */
.scene__shadow::before {
  left: 42.75%;
  top: 48.2%;
  width: 57.4%;
  height: 34%;
  rotate: -18deg;
}

/* Frente: de la esquina de la defensa a la llanta delantera */
.scene__shadow::after {
  left: 3.4%;
  top: 67%;
  width: 48.3%;
  height: 30%;
  rotate: 11.6deg;
}

/* ---------- Escena: cajas ----------
   Dos fotos que ya vienen apiladas, en vista 3/4 desde arriba como la
   van: la pila de 3 detrás del frente (izquierda) y una caja sola junto
   a la llanta trasera (derecha). Su base queda un poco arriba de la
   línea de piso de la van (defensa y llanta trasera), así se leen
   detrás de ella, y abajo de la unión con la pared (--floor-y). Cada
   caja se apoya en el piso con su propia sombra (.scene__box-shadow,
   entra junto con la caja) y lleva un velo azul
   translúcido (recortado con la misma foto como máscara) del lado
   contrario a la luz. El velo no usa mix-blend-mode: obligaba a
   repintar la escena en cada cuadro de la entrada. */
.scene__stack {
  position: absolute;
}

.scene__stack--back {
  --box-mask: url("../assets/img/cajas-pila.webp");
  --shade: linear-gradient(to right, color-mix(in srgb, var(--klein-800) 34%, transparent), transparent 75%);
  left: -15%;
  bottom: 19%;
  width: 26%;
}

.scene__stack--front {
  --box-mask: url("../assets/img/caja-sola.webp");
  --shade: linear-gradient(to left, color-mix(in srgb, var(--klein-800) 30%, transparent), transparent 75%);
  left: 93%;
  bottom: 26%;
  width: 15%;
}

.scene__box {
  position: relative;
  isolation: isolate;
  display: block;
}

/* Sombra: SVG con la huella de la caja (ver index.html). Va dentro de
   la caja (no en la pila) para aparecer y moverse con ella. El blur es
   del SVG y está en píxeles de la imagen, así escala con la caja. */
.scene__box-shadow {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scene__box-light {
  fill: color-mix(in srgb, var(--glow) 55%, transparent);
}

/* El trazo agranda la huella (la mitad de su grosor por lado) para que
   la sombra asome por fuera de las aristas aunque la caja sea chica */
.scene__box-shadow-soft {
  fill: rgba(0, 9, 45, 0.6);
  stroke: rgba(0, 9, 45, 0.6);
  stroke-width: 40;
  stroke-linejoin: round;
}

.scene__box-shadow-tight {
  fill: rgba(0, 9, 45, 0.9);
  stroke: rgba(0, 9, 45, 0.9);
  stroke-width: 10;
  stroke-linejoin: round;
}

.scene__box img {
  width: 100%;
  height: auto;
  filter: brightness(0.94) saturate(0.9);
}

.scene__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shade);
  -webkit-mask: var(--box-mask) center / 100% 100% no-repeat;
  mask: var(--box-mask) center / 100% 100% no-repeat;
}

/* ---------- Badges circulares ----------
   Disco de vidrio Klein con borde fino. Encima, el anillo de texto que
   gira (.badge__spin › .badge__text, ver animations.css) y al centro el
   anillo naranja con el ícono, que se queda fijo. */
.badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7.5rem, 5rem + 5vw, 10rem);
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-circle);
  /* Sin backdrop-filter: girando en la entrada costaba cuadros; un
     fondo algo más denso da el mismo vidrio sobre la escena */
  background: color-mix(in srgb, var(--klein-800) 72%, transparent);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--chalk);
}

.badge__spin {
  position: absolute;
  inset: 0;
}

.badge__text {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* px en unidades del viewBox (160): escala con el badge */
.badge__curve-text {
  fill: currentColor;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.badge__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-circle);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.badge__icon {
  width: 52%;
  height: auto;
}

/* Hover: el anillo naranja brilla (el giro acelera en animations.css) */
.badge:hover .badge__core {
  border-color: var(--color-accent-hover);
  box-shadow:
    0 0 1rem color-mix(in srgb, var(--orange-500) 60%, transparent),
    inset 0 0 0.75rem color-mix(in srgb, var(--orange-500) 35%, transparent);
}

/* ==========================================================================
   Nosotros (index.html)
   El mismo fondo que el hero, en capas de degradado sobre la sección
   (de arriba hacia abajo): marco oscuro arriba y abajo, viñeta a
   --klein-900 en las orillas, núcleo --glow y luz --klein-500 detrás de
   las tarjetas, y la base --klein-700. Sin blur. Encima, el grano.
   El punto de luz y la viñeta se ajustan por breakpoint (responsive.css).
   Servicios y preguntas frecuentes usan este mismo fondo con otra
   posición de la luz.
   ========================================================================== */
.about,
.services,
.faq {
  --light-x: 70%;
  --light-y: 52%;
  --light-w: 34%;
  --light-h: 62%;
  --vignette-w: 62%;
  --vignette-h: 95%;

  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--klein-900) 34%, transparent) 0%,
      color-mix(in srgb, var(--klein-900) 14%, transparent) 9%,
      transparent 18%,
      transparent 84%,
      color-mix(in srgb, var(--klein-900) 30%, transparent) 100%
    ),
    radial-gradient(
      ellipse var(--vignette-w) var(--vignette-h) at var(--light-x) var(--light-y),
      transparent 0%,
      transparent 30%,
      color-mix(in srgb, var(--klein-900) 30%, transparent) 50%,
      color-mix(in srgb, var(--klein-900) 70%, transparent) 70%,
      color-mix(in srgb, var(--klein-900) 93%, transparent) 87%,
      var(--klein-900) 100%
    ),
    radial-gradient(
      ellipse calc(var(--light-w) * 0.5) calc(var(--light-h) * 0.42) at var(--light-x) calc(var(--light-y) - 6%),
      color-mix(in srgb, var(--glow) 32%, transparent) 0%,
      color-mix(in srgb, var(--glow) 14%, transparent) 50%,
      transparent 100%
    ),
    radial-gradient(
      ellipse var(--light-w) var(--light-h) at var(--light-x) var(--light-y),
      var(--klein-500) 0%,
      color-mix(in srgb, var(--klein-500) 96%, transparent) 20%,
      color-mix(in srgb, var(--klein-500) 80%, transparent) 38%,
      color-mix(in srgb, var(--klein-500) 52%, transparent) 54%,
      color-mix(in srgb, var(--klein-500) 24%, transparent) 70%,
      color-mix(in srgb, var(--klein-500) 7%, transparent) 85%,
      transparent 100%
    ),
    var(--klein-700);
}

/* Grano (decorativo, igual que .hero__grain) */
.about::after,
.services::after,
.faq::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 13.75rem;
  opacity: 0.07;
  pointer-events: none;
}

/* ---------- Texto ----------
   Eyebrow con una línea naranja corta delante, título en Playfair con
   "buenas manos" en itálica naranja (6.4:1 sobre navy). */
.about__eyebrow,
.services__eyebrow,
.faq__eyebrow,
.not-found__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}

.about__eyebrow::before,
.services__eyebrow::before,
.faq__eyebrow::before,
.not-found__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--orange-500);
}

.about__title,
.services__title {
  margin-top: clamp(var(--space-4), 0.6rem + 0.8vw, var(--space-5));
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: var(--lh-display);
}

.about__title-accent,
.services__title-accent {
  margin-right: 0.04em;
  font-style: italic;
  color: var(--orange-500);
}

.about__body {
  margin-top: clamp(var(--space-5), 1rem + 1vw, var(--space-6));
  max-width: 46ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.about__body p + p {
  margin-top: var(--space-4);
}

/* Link a preguntas frecuentes: chalk con subrayado naranja, como un
   link discreto y no como otro botón; la flecha avanza */
.about__link {
  display: inline-block;
  margin-top: clamp(var(--space-6), 1.4rem + 1vw, var(--space-7));
  font-weight: var(--fw-medium);
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* La flecha va en línea, pegada a la última palabra (.about__link-end):
   si el link se parte en 2 renglones, bajan juntas */
.about__link-end {
  white-space: nowrap;
}

.about__link-arrow {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: -0.2em;
  transition: transform var(--duration-base) var(--ease-out);
}

.about__link:hover .about__link-arrow,
.about__link:focus-visible .about__link-arrow {
  transform: translateX(3px);
}

/* ---------- Valores ----------
   Cuadrícula de 2×2; la segunda columna baja un poco para que no se vea
   como tabla. Tarjetas de vidrio sobre la luz navy (sin
   backdrop-filter): velo oscuro leve de base, reflejo chalk que se
   apaga hacia abajo, borde fino y filo de luz arriba.
   Hover: sube 4px y el borde se aclara. */
.about__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
}

.value-card {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(238, 237, 232, 0.1), rgba(238, 237, 232, 0.02) 60%),
    rgba(0, 9, 45, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1.25rem 2.5rem rgba(0, 9, 45, 0.22);
  transition:
    translate var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.value-card:nth-child(even) {
  margin-top: var(--space-8);
}

.value-card:hover {
  translate: 0 -4px;
  border-color: var(--line-strong);
}

/* Ícono en anillo naranja, como los badges del hero */
.value-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--orange-500);
  border-radius: var(--radius-circle);
  background: rgba(238, 237, 232, 0.06);
  color: var(--chalk);
}

.value-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Número decorativo arriba a la derecha (aria-hidden) */
.value-card__number {
  position: absolute;
  top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  right: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1;
  color: color-mix(in srgb, var(--chalk) 40%, transparent);
}

/* Título de la tarjeta en Outfit (no en Playfair como los h3 globales) */
.value-card__title {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-transform: none;
}

.value-card__text {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ==========================================================================
   Servicios (index.html)
   Mismo fondo que Nosotros (las reglas de arriba se comparten), con la
   luz centrada detrás de la galería. Eyebrow, título y acento también
   se comparten con Nosotros.
   ========================================================================== */
.services {
  --light-x: 50%;
  --light-y: 68%;
  --light-w: 64%;
  --light-h: 58%;
  --vignette-w: 96%;
  --vignette-h: 100%;
}

.services__title {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
}

.services__lead {
  max-width: 40ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Link a preguntas frecuentes dentro del texto: como .faq__link (chalk
   con subrayado naranja; en hover pasa a naranja) */
.services__link {
  color: var(--chalk);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-out);
}

.services__link:hover {
  color: var(--orange-400);
}

.services__cta {
  margin-top: var(--space-5);
}

/* ---------- Galería en acordeón ----------
   Cuatro paneles en fila. El abierto crece hasta ~52 % del ancho
   (flex-grow 3.25 contra 1 de cada cerrado: 3.25 / 6.25) y se ve a
   color; los cerrados quedan bajo un velo navy (sin filtros) y girados
   8° hacia el abierto. La galería es un contenedor de tamaño: la foto
   de cada panel mide lo que mide el abierto (--open-w) más un 20 % para
   el paralaje, así solo se recorta y no se reescala al animar. El
   nombre y la descripción del abierto miden --open-w desde el primer
   cuadro, para que no se reacomoden mientras el panel crece.
   En celular es una columna (responsive.css). */
.service-gallery {
  --gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem);
  --pad: clamp(1rem, 0.6rem + 1.1vw, 1.75rem);
  --open-w: calc((100cqw - 3 * var(--gap)) * 0.52);
  --text-w: calc(var(--open-w) - 2 * var(--pad) - 2px);
  /* Arranca de inmediato y frena suave (una curva que arranca lento se
     sentía con retraso) */
  --dur-panel: 0.6s;
  --ease-panel: cubic-bezier(0.25, 0.8, 0.25, 1);

  container-type: size;
  display: flex;
  gap: var(--gap);
}

.service-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  transition: flex-grow var(--dur-panel) var(--ease-panel);
}

.service-panel.is-active {
  flex-grow: 3.25;
}

/* Marco: recorta la foto con esquinas redondas y gira en 3D.
   clamp(-1, --offset, 1) da -1 a la izquierda del abierto, 1 a la
   derecha y 0 en el abierto. El contenido va abajo (flex-end). */
.service-panel__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: var(--pad);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--klein-800);
  box-shadow: var(--shadow-md);
  transform: perspective(75rem) rotateY(calc(clamp(-1, var(--offset, 0), 1) * -8deg));
  transition:
    transform var(--dur-panel) var(--ease-panel),
    border-color var(--duration-base) var(--ease-out);
}

.service-panel.is-active .service-panel__frame {
  border-color: var(--line-strong);
}

/* Foto: centrada en el panel y corrida a un lado en los cerrados */
.service-panel__media {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 50%;
  width: calc(var(--open-w) * 1.2);
  max-width: none;
  height: 100%;
  translate: calc(-50% + clamp(-1, var(--offset, 0), 1) * 6%) 0;
  scale: 1.06;
  transition:
    translate var(--dur-panel) var(--ease-panel),
    scale var(--dur-panel) var(--ease-panel);
}

.service-panel.is-active .service-panel__media {
  scale: 1;
}

.service-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradados oscuros arriba y abajo (::before) para leer el número y
   el texto, y velo navy
   (::after) sobre los cerrados; al pasar el mouse se aclara un poco */
.service-panel__frame::before,
.service-panel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.service-panel__frame::before {
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--klein-900) 45%, transparent) 0%,
      transparent 22%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--klein-900) 92%, transparent) 0%,
      color-mix(in srgb, var(--klein-900) 66%, transparent) 26%,
      color-mix(in srgb, var(--klein-900) 20%, transparent) 50%,
      transparent 64%
    );
}

.service-panel__frame::after {
  background: var(--klein-900);
  opacity: 0.6;
  transition: opacity var(--dur-panel) var(--ease-panel);
}

.service-panel.is-active .service-panel__frame::after {
  opacity: 0;
}

@media (hover: hover) {
  .service-panel:not(.is-active):hover .service-panel__frame::after {
    opacity: 0.45;
  }
}

/* Número decorativo arriba (aria-hidden), como en las tarjetas de Nosotros */
.service-panel__number {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-style: italic;
  line-height: 1;
  color: color-mix(in srgb, var(--chalk) 75%, transparent);
  text-shadow: 0 1px 0.75rem rgba(11, 17, 36, 0.6);
}

/* El h3 solo envuelve al botón: la letra la pone el nombre */
.service-panel__heading {
  font-family: inherit;
  line-height: inherit;
  text-transform: none;
}

/* Raya naranja sobre el nombre del abierto (entra en animations.css) */
.service-panel.is-active .service-panel__heading::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--orange-500);
  transform-origin: left;
}

/* Botón: su ::after cubre todo el panel, así se abre tocando donde sea.
   El marco de foco va sobre esa capa, por dentro del borde. */
.service-panel__trigger {
  display: block;
  color: var(--chalk);
  text-align: left;
}

.service-panel__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: calc(var(--radius-lg) - 1px);
}

.service-panel__trigger:focus-visible {
  outline: none;
}

.service-panel__trigger:focus-visible::after {
  outline: 2px solid var(--color-focus);
  outline-offset: -0.375rem;
}

/* Nombre: en los cerrados va en vertical, de abajo hacia arriba; en el
   abierto es el título en Playfair. Al cambiar entra con un fundido
   (animations.css). */
.service-panel__name {
  display: block;
  width: fit-content;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  rotate: 180deg;
  text-shadow: 0 1px 0.75rem rgba(11, 17, 36, 0.7);
}

.service-panel.is-active .service-panel__name {
  width: var(--text-w);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: 0;
  white-space: normal;
  writing-mode: horizontal-tb;
  rotate: none;
}

/* Descripción: solo en el abierto. En los cerrados se desvanece y luego
   se oculta (visibility), así los lectores de pantalla tampoco la leen
   (el botón lo anuncia con aria-expanded). */
.service-panel__text {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  width: var(--text-w);
  max-width: 42ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s var(--ease-out),
    visibility 0s linear 0.2s;
}

.service-panel.is-active .service-panel__text {
  position: static;
  margin-top: var(--space-3);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s var(--ease-out) 0.35s,
    visibility 0s;
}

/* ==========================================================================
   Puntos de sección (inicio con pantallas completas)
   Columna de puntos a la derecha, centrada en alto: uno por pantalla,
   el activo en naranja y un poco más grande. Los crea main.js solo
   cuando hay pantallas completas. Cada botón mide 1.5rem para tocarlo
   fácil; el punto visible es su ::before. Al pasar el mouse o con el
   foco aparece el nombre de la sección a la izquierda.
   ========================================================================== */
.page-dots {
  position: fixed;
  top: 50%;
  right: calc(max(0.25rem, var(--gutter) / 2 - 0.75rem) + env(safe-area-inset-right));
  z-index: var(--z-float);
  translate: 0 -50%;
}

.page-dots__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-dots__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-circle);
}

.page-dots__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--chalk) 50%, transparent); /* ~3.9:1 sobre navy */
  transition:
    scale var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.page-dots__dot:hover::before {
  background: var(--chalk);
}

.page-dots__dot[aria-current="true"]::before {
  scale: 1.35;
  background: var(--orange-500);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--orange-500) 22%, transparent);
}

/* Nombre de la sección (decorativo: el botón ya lleva aria-label) */
.page-dots__label {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  color: var(--chalk);
  opacity: 0;
  translate: 0.375rem -50%;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);
}

.page-dots__dot:hover .page-dots__label,
.page-dots__dot:focus-visible .page-dots__label {
  opacity: 1;
  translate: 0 -50%;
}

/* ==========================================================================
   Preguntas frecuentes (index.html, última pantalla)
   Pestañas por tema y acordeón (main.js). Fondo de Nosotros (arriba),
   con la luz detrás del título. Las preguntas son tarjetas oscuras
   translúcidas con texto chalk; el naranja solo marca la pregunta
   abierta.
   Sin JS (o antes de que cargue main.js) todo se ve: sin pestañas, con
   el título de cada tema y todas las respuestas abiertas.
   ========================================================================== */
.faq {
  --light-x: 50%;
  --light-y: 30%;
  --light-w: 62%;
  --light-h: 56%;
  --vignette-w: 100%;
  --vignette-h: 110%;
}

/* ---------- Encabezado ----------
   Eyebrow con la raya naranja a los dos lados (centrado) y el título. */
.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 56rem;
  text-align: center;
}

.faq__eyebrow::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--orange-500);
}

.faq__title {
  margin-top: clamp(var(--space-3), 0.5rem + 0.6vw, var(--space-4));
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  line-height: var(--lh-tight);
}

/* ---------- Pestañas ----------
   Pastillas con borde fino; la activa se llena de chalk desde abajo
   (::before, solo transform) y su texto pasa a Klein. Al cambiar, el
   fondo de la anterior baja y el de la nueva sube. */
.faq__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: clamp(var(--space-5), 1rem + 1vw, var(--space-6));
}

.faq__tabs[hidden] {
  display: none;
}

.faq__tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.faq__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--white) 0%, var(--chalk) 100%);
  transform: translateY(101%);
  transition: transform 500ms var(--ease-out);
}

.faq__tab:hover {
  color: var(--chalk);
  border-color: var(--line-strong);
}

.faq__tab[aria-selected="true"] {
  color: var(--klein-900);
  border-color: var(--chalk);
}

.faq__tab[aria-selected="true"]::before {
  transform: none;
}

.faq__tab:focus-visible {
  border-radius: var(--radius-pill);
}

/* ---------- Temas y lista ---------- */
.faq__panels {
  margin-top: clamp(var(--space-5), 1rem + 1vw, var(--space-6));
}

.faq__panel + .faq__panel {
  margin-top: var(--space-7);
}

.faq__panel[hidden] {
  display: none;
}

/* Con JS el tema lo nombra su pestaña: el título queda solo para
   lectores de pantalla */
.faq__group-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
}

.js .faq__group-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.faq__list {
  display: grid;
  gap: var(--space-3);
}

/* ---------- Pregunta (tarjeta oscura) ----------
   Velo chalk muy tenue sobre el navy con borde fino. Abierta: superficie
   un poco más clara, borde más visible y el "×" en naranja (solo línea,
   sin relleno). */
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: rgba(238, 237, 232, 0.03);
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.faq__item:hover {
  border-color: var(--line-strong);
}

.faq__item.is-open {
  border-color: var(--line-strong);
  background-color: rgba(238, 237, 232, 0.06);
}

.faq__question {
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: clamp(1rem, 0.9rem + 0.3vw, 1.125rem) clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
  border-radius: calc(var(--radius-lg) - 1px);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: left;
  color: var(--chalk);
}

.faq__trigger:focus-visible {
  outline-offset: 0;
  border-radius: calc(var(--radius-lg) - 1px);
}

/* Círculo con "+": al abrir gira 45° y queda como "×" */
.faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-circle);
  color: var(--chalk);
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.faq__icon svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-base) var(--ease-out);
}

.faq__trigger:hover .faq__icon {
  border-color: var(--chalk);
}

.faq__item.is-open .faq__icon {
  border-color: var(--orange-500);
  color: var(--orange-500);
}

.faq__item.is-open .faq__icon svg {
  transform: rotate(45deg);
}

/* Sin JS las respuestas no se cierran: el ícono no tendría sentido */
html:not(.js) .faq__icon {
  display: none;
}

/* ---------- Respuesta ----------
   La altura se anima con grid-template-rows (0fr ↔ 1fr), sin medir en
   JS. Cerrada: visibility hidden, así su contenido sale del orden de
   tabulación y de los lectores de pantalla (al terminar de cerrarse). */
.faq__answer {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--duration-base) var(--ease-out),
    visibility 0s;
}

.faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__answer p {
  max-width: 62ch;
  padding: 0 clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem) clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted); /* ~11:1 sobre navy */
  transition: opacity var(--duration-base) var(--ease-out);
}

.faq__answer strong {
  color: var(--chalk);
  font-weight: var(--fw-medium);
}

.js .faq__item:not(.is-open) .faq__answer {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.js .faq__item:not(.is-open) .faq__answer p {
  opacity: 0;
}

/* Links de las respuestas: texto chalk con subrayado naranja; en hover
   el texto pasa a naranja (6.4:1 sobre navy) */
.faq__link {
  color: var(--chalk);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq__link:hover {
  color: var(--orange-400);
}

/* ---------- Cierre: contacto ----------
   Tarjeta Klein hundida con borde fino: texto a la izquierda y, a la derecha,
   WhatsApp y correo como dos tarjetas gemelas apiladas (todo en una
   columna en móvil, responsive.css). */
.faq__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(var(--space-6), 1.5rem + 1vw, var(--space-7));
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 120% at 100% 50%, color-mix(in srgb, var(--chalk) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--klein-900) 45%, transparent);
}

.faq__actions-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.faq__actions-text {
  margin-top: var(--space-1);
  color: var(--text-muted);
}

.faq__contacts {
  display: grid;
  flex: none;
  gap: var(--space-3);
  width: min(100%, 18.5rem);
}

/* Contacto: ícono en anillo chalk, nombre del canal, el dato real
   debajo y una flecha. Hover: borde naranja, fondo apenas cálido,
   sube 2px y la flecha avanza (solo transform, color y borde). */
.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--klein-900) 55%, transparent);
  color: var(--chalk);
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.contact-link:hover,
.contact-link:focus-visible {
  border-color: color-mix(in srgb, var(--orange-500) 70%, transparent);
  background-color: color-mix(in srgb, var(--orange-500) 8%, var(--klein-900));
  transform: translateY(-2px);
}

.contact-link:focus-visible {
  border-radius: var(--radius-pill);
}

.contact-link__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--chalk) 45%, transparent);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--chalk) 10%, transparent);
  color: var(--chalk);
}

.contact-link__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-link__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  line-height: 1.2;
}

.contact-link__label {
  font-weight: var(--fw-semibold);
}

.contact-link__value {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.contact-link__arrow {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: auto;
  color: var(--chalk);
  transition: transform var(--duration-base) var(--ease-out);
}

.contact-link:hover .contact-link__arrow,
.contact-link:focus-visible .contact-link__arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   Footer (index.html, al final de preguntas frecuentes)
   Banda más oscura que sube con el scroll sobre el fondo quieto de la
   sección, con borde fino arriba y una raya naranja corta alineada al
   contenido. Cuatro columnas: logo, texto y redes · navegación ·
   contacto · horario (2 y 1 columnas en responsive.css). Abajo, el
   copyright tras otra línea fina. Títulos en Outfit con el espaciado
   del eyebrow; links en chalk suave que pasan a chalk con subrayado
   naranja.
   ========================================================================== */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--klein-900) 55%, transparent) 0%,
    color-mix(in srgb, var(--klein-900) 88%, transparent) 100%
  );
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(max(0px, (100% - var(--container-max)) / 2) + var(--gutter));
  width: 3rem;
  height: 1px;
  background: var(--orange-500);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-7) clamp(var(--space-6), 1rem + 3vw, var(--space-9));
  padding-block: clamp(var(--space-8), 2rem + 3vw, var(--space-10));
}

/* ---------- Marca ---------- */
.site-footer__logo {
  display: inline-block;
  border-radius: var(--radius-sm);
}

.site-footer__logo img {
  width: auto;
  height: clamp(4rem, 3.4rem + 1.5vw, 5rem);
}

.site-footer__tagline {
  max-width: 30ch;
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* El padding de cada ícono (.social__link) no corre la fila */
.site-footer__social {
  margin-top: var(--space-4);
  margin-left: calc(var(--space-1) * -1);
}

/* ---------- Columnas ---------- */
.site-footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--chalk);
}

.site-footer__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__address {
  font-style: normal;
}

.site-footer__link {
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition:
    color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--chalk);
  text-decoration-color: var(--orange-500);
}

/* Contacto: ícono naranja de línea delante del dato */
.site-footer__link--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--orange-500);
}

.site-footer__text {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.site-footer__text + .site-footer__text {
  margin-top: var(--space-3);
}

/* ---------- Copyright ----------
   La línea de arriba (un degradado de 1px) mide lo mismo que el
   contenido, sin los márgenes del contenedor */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(100% - var(--gutter) * 2) 1px no-repeat;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   Página 404
   Fondo navy con luz de estudio detrás del texto y más profundo hacia
   abajo (degradados de varios pasos, sin blur). Arriba, una ruta
   punteada naranja que termina en un pin con un signo de pregunta;
   luego eyebrow, título con "no existe" en itálica naranja, texto, el
   CTA al inicio y dos links de texto (servicios y preguntas frecuentes).
   ========================================================================== */
.not-found {
  background:
    radial-gradient(
      ellipse 60% 32rem at 50% 12rem,
      color-mix(in srgb, var(--klein-500) 55%, transparent) 0%,
      color-mix(in srgb, var(--klein-500) 38%, transparent) 25%,
      color-mix(in srgb, var(--klein-500) 18%, transparent) 50%,
      color-mix(in srgb, var(--klein-500) 6%, transparent) 75%,
      transparent 100%
    ),
    linear-gradient(180deg, var(--klein-700) 0%, var(--klein-800) 100%);
}

.not-found__route {
  width: clamp(10rem, 7rem + 10vw, 15rem);
  height: auto;
  margin-bottom: clamp(var(--space-5), 1rem + 1.5vw, var(--space-7));
  overflow: visible;
}

.not-found__path {
  stroke: var(--orange-500);
}

.not-found__start {
  fill: var(--klein-700);
  stroke: var(--orange-500);
  stroke-width: 2;
}

.not-found__pin {
  fill: var(--orange-500);
}

.not-found__pin-mark {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: var(--fw-semibold);
  fill: var(--klein-900);
}

/* El eyebrow lleva la raya naranja a los dos lados para quedar centrado */
.not-found__eyebrow {
  justify-content: center;
}

.not-found__eyebrow::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--orange-500);
}

.not-found__title {
  max-width: 14ch;
  margin-top: clamp(var(--space-4), 0.6rem + 0.8vw, var(--space-5));
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: var(--lh-display);
}

/* "no existe" va junto, en su propia línea */
.not-found__title-accent {
  white-space: nowrap;
  font-style: italic;
  color: var(--orange-500);
}

.not-found__lead {
  max-width: 34rem;
  margin-top: clamp(var(--space-4), 0.75rem + 0.6vw, var(--space-5));
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.not-found__cta {
  margin-top: clamp(var(--space-6), 1.5rem + 1vw, var(--space-7));
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

/* Como .faq__link: chalk con subrayado naranja, naranja en hover */
.not-found__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--duration-fast) var(--ease-out);
}

.not-found__link:hover {
  color: var(--orange-400);
}

/* ---------- WhatsApp flotante (Fase 7) ----------
   Círculo verde fijo abajo a la derecha, en todos los anchos: es el
   único acceso a WhatsApp (no está en las redes del header), así la
   acción principal del hero sigue siendo cotizar.
   Respeta el área segura de iOS (notch / barra de inicio). */
.whatsapp-float {
  position: fixed;
  right: calc(var(--space-4) + env(safe-area-inset-right));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-circle);
  background: var(--whatsapp-500);
  color: var(--chalk);
  box-shadow:
    0 0.75rem 1.75rem rgba(0, 9, 45, 0.55),
    0 0.25rem 1.25rem color-mix(in srgb, var(--whatsapp-500) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    visibility 0s;
}

/* Encima del CTA del hero se esconde (main.js); visibility lo saca
   del orden de tabulación mientras no se ve */
.whatsapp-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.8);
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.06);
  box-shadow:
    0 1rem 2rem rgba(0, 9, 45, 0.6),
    0 0.25rem 1.75rem color-mix(in srgb, var(--whatsapp-500) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.whatsapp-float:focus-visible {
  border-radius: var(--radius-circle);
}

.whatsapp-float__icon {
  width: 1.75rem;
  height: 1.75rem;
}