/* ==============================================================
   layout.css — header/nav, footer, widget de WhatsApp, secciones
   El nav y el footer viven SIEMPRE sobre carbón (nunca transparente,
   nunca cambia de fondo al hacer scroll).
   Logo: el nav usa .nav__logo (animado); footer y copyright usan .logo
   (estático, mismos tamaños y colores).
   ============================================================== */

/* --- Header / Nav ----------------------------------------------- */
/* Especificación: documentacion/componente-nav-noedelaflor.md
   - El header es sticky SIEMPRE (nunca sale del viewport). nav.js
     añade .is-sticky al cruzar STICKY_SCROLL_ACTIVATE y la quita bajo
     STICKY_SCROLL_DEACTIVATE; la clase solo cambia el estado visual:
     aparece el borde dorado y el logo colapsa a <n> letra por letra.
   - Mobile-first: hamburguesa + panel lateral por debajo de 1376px;
     barra de 3 columnas con los valores exactos de Figma desde 1376px.
     El breakpoint sale de sumar anchos reales (padding 80×2 + logo 207
     + links 551 + toggle/CTA 241 + gaps 100×2 = 1359px) más ~17px de
     margen para diferencias de métrica tipográfica entre navegadores.
     Si cambia un tamaño del nav, recalcular y actualizar también
     DESKTOP_MEDIA en nav.js. */
.site-header {
  /* Tokens del componente — editables aquí. Los valores desktop se
     sobreescriben en las media queries del final de esta sección. */
  --nav-pad-x: 20px;            /* padding horizontal (mobile) */
  --nav-pad-y: 16px;            /* padding vertical (mobile) */
  --nav-col-gap: 100px;         /* gap entre las 3 columnas (desktop) */
  --nav-content-max: 1280px;    /* ancho máx. del contenido interno (frame de Figma) */
  --nav-link-size: var(--text-body);    /* 18px — links y CTA (paso "body") */
  --nav-toggle-size: var(--text-label); /* 14px — toggle ES|EN (paso "label") */
  --nav-link-gap: 25px;         /* gap entre links (desktop) */
  --nav-logo-size: 2rem;        /* 32px — letras del logo */
  --nav-sign-size: 1.5rem;      /* 24px — signos < > del logo */
  --nav-logo-letter-ms: var(--ease-fast); /* duración de cada letra (150ms) */
  --nav-logo-stagger: 45ms;     /* retraso entre una letra y la siguiente */
  --nav-panel-width: 85%;       /* panel mobile: % del viewport… */
  --nav-panel-max-width: 340px; /* …con tope para tablets */
  --nav-panel-block-gap: var(--space-7); /* 64px — separa el bloque de links del bloque toggle+CTA */
  --nav-panel-ms: var(--ease-slow); /* apertura/cierre del panel mobile (450ms) */

  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* El panel mobile cerrado vive a la derecha del viewport (translateX(100%));
     clip en X evita que genere scroll horizontal sin crear un contenedor de
     scroll (overflow hidden rompería el sticky). En Y sigue visible para que
     el panel abierto se extienda por debajo del header. */
  overflow-x: clip;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  /* Sin borde en estado normal (el nav "flota" sobre el Hero); el borde
     oro de 1px aparece solo en sticky. El 1px transparente se conserva
     siempre para que la altura no salte al cambiar de estado. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-base) var(--curve-standard);
}

.site-header.is-sticky { border-bottom-color: var(--color-oro); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* El fondo (.site-header) es full-width; el contenido se limita al frame
     de 1280px de Figma (+ padding) y se centra en monitores anchos. */
  max-width: calc(var(--nav-content-max) + 2 * var(--nav-pad-x));
  margin-inline: auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
}

/* --- Col 1: logotipo <noedelaflor> ------------------------------ */
/* Cada carácter va en su propio <span>. Las letras (o…r) colapsan en
   ancho y opacidad con un retraso escalonado: --out cuenta desde la
   "r" (primera en desaparecer) y --in desde la "o" (primera en
   reaparecer). nav.js asigna ambos índices y el ancho real (--w) de
   cada letra para que la transición sea lineal. */
.nav .nav__logo {
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--nav-logo-size);
  line-height: 1;
  color: var(--color-crema);
  text-decoration: none;
}

.nav__logo-text {
  display: inline-flex;
  align-items: center;
}

.nav__logo-text > * + * { margin-left: 1px; }  /* gap mínimo entre caracteres */

.nav__logo-sign {
  font-size: var(--nav-sign-size);
  font-weight: var(--weight-black);
  color: var(--color-oro);
}

.nav__logo-letter {
  display: none;                 /* mobile: el logo es siempre <n> */
  overflow: hidden;
  max-width: var(--w, none);
  opacity: 1;
  /* Estado expandido = letras reapareciendo → curva de entrada (ease-out) */
  transition: max-width var(--nav-logo-letter-ms) var(--curve-out),
              opacity var(--nav-logo-letter-ms) var(--curve-out),
              margin-left var(--nav-logo-letter-ms) var(--curve-out);
  transition-delay: calc(var(--in, 0) * var(--nav-logo-stagger));
}

.is-sticky .nav__logo-letter {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  /* Letras desapareciendo → curva de salida (ease-in) */
  transition-timing-function: var(--curve-in);
  transition-delay: calc(var(--out, 0) * var(--nav-logo-stagger));
}

/* nav.js activa esta clase un instante (sin repintado) para medir el
   ancho natural de cada letra, incluso en estado sticky. */
.nav__logo-letter.is-measuring {
  max-width: none;
  margin-left: 1px;
  transition: none;
}

/* --- Botón hamburguesa → X (solo mobile) ------------------------ */
.nav__toggle {
  display: inline-flex;
  width: 44px;                   /* área táctil mínima */
  height: 44px;
  padding: 10px;
  margin-right: -10px;           /* el ícono queda alineado al padding del nav */
  margin-block: -6px;            /* la altura de la barra la sigue dando el logo (32px) */
}

.nav__toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
}

.nav__toggle-line {
  display: block;
  width: 24px;
  height: 1.5px;                 /* líneas finas (ficha de estilo) */
  background-color: currentColor;
  transition: transform var(--ease-base) var(--curve-standard),
              opacity var(--ease-fast) var(--curve-standard);
}

/* Las líneas 1 y 3 viajan 7.5px (6px de gap + 1.5px de línea) al centro y
   rotan ±45°; la del medio se desvanece. Reversible al cerrar. */
.nav__toggle[aria-expanded="true"] .nav__toggle-icon :nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-icon :nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-icon :nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* --- Panel desplegable (mobile) --------------------------------- */
/* Entra de derecha a izquierda y sale de izquierda a derecha.
   visibility se retrasa al cerrar para que los links no sean
   tabulables mientras el panel está oculto. */
.nav__menu {
  position: absolute;
  top: calc(100% + 1px);         /* justo debajo del borde inferior del header */
  right: 0;
  width: var(--nav-panel-width);
  max-width: var(--nav-panel-max-width);
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--nav-panel-block-gap);
  padding: var(--space-6) var(--nav-pad-x) var(--space-7);
  background-color: var(--color-carbon);
  transform: translateX(100%);
  visibility: hidden;
  /* Estado cerrado = animación de cierre → curva de salida */
  transition: transform var(--nav-panel-ms) var(--curve-in),
              visibility 0s linear var(--nav-panel-ms);
}

.nav__menu[data-open="true"] {
  transform: none;
  visibility: visible;
  /* Apertura → curva estándar, sin retraso de visibility */
  transition: transform var(--nav-panel-ms) var(--curve-standard),
              visibility 0s linear 0s;
}

/* Overlay carbón semitransparente detrás del panel (sobre el resto del
   sitio, no sobre la barra). Misma duración/curvas que el panel; nav.js
   marca el header con .is-menu-open y cierra el menú al tocarlo. */
.nav__overlay {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background-color: var(--color-carbon-55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nav-panel-ms) var(--curve-in),
              visibility 0s linear var(--nav-panel-ms);
}

.site-header.is-menu-open .nav__overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--nav-panel-ms) var(--curve-standard),
              visibility 0s linear 0s;
}

/* Bloquea el scroll del documento mientras el panel está abierto */
html.nav-open { overflow: hidden; }

/* --- Col 2: enlaces de navegación ------------------------------ */
.nav__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nav-link-gap);
}

.nav__links a {
  position: relative;
  display: inline-block;
  font-size: var(--nav-link-size);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-crema);
  transition: color var(--ease-base) var(--curve-standard);
}

/* Subrayado oro 1.5px, ~4px bajo la línea base. Nace de izquierda a
   derecha al entrar el cursor y se retrae de derecha a izquierda al salir
   (mismo origen, transición inversa). */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--link-underline-gap));
  height: var(--link-underline-thickness);
  background-color: var(--color-oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-base) var(--curve-standard);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--color-oro);
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Active (clic): oro oscurecido ~10%, subrayado sólido */
.nav__links a:active {
  color: var(--color-oro);
  filter: brightness(0.9);
}

.nav__links a:active::after { transform: scaleX(1); }

/* --- Col 3: toggle de idioma + CTA ------------------------------ */
.nav__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

/* Toggle ES | EN — el idioma activo se pinta en oro a partir del
   atributo data-i18n-lang que i18n.js mantiene en <html> (ES por defecto) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--nav-toggle-size);
  line-height: 1;
  color: var(--color-crema);
}

.lang-toggle__icon {
  width: 18px;
  height: 18px;
}

.lang-toggle__langs { display: inline-flex; }   /* ES|EN pegados, sin gap */

.lang-toggle__opt { transition: color var(--ease-fast) var(--curve-standard); }

.lang-toggle__opt[data-lang="es"] { color: var(--color-oro); }

html[data-i18n-lang="en"] .lang-toggle__opt[data-lang="es"] { color: inherit; }
html[data-i18n-lang="en"] .lang-toggle__opt[data-lang="en"] { color: var(--color-oro); }

/* CTA primario sobre carbón: oro sólido + texto carbón, 162×42, radio 5px */
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 162px;
  height: 42px;
  font-size: var(--nav-link-size);
  font-weight: var(--weight-label);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-carbon);
  background-color: var(--color-oro);
  border-radius: 5px;
  transition: filter var(--ease-fast) var(--curve-standard);
}

.nav__cta:hover { filter: brightness(0.92); }   /* ±8-10% luminosidad, mismo color */

/* --- Desktop (≥ 1376px = 86em) ---------------------------------- */
@media (min-width: 86em) {
  /* Fallback de la altura del header antes de que nav.js la mida:
     40 + 40 padding + 42 CTA + 1 borde = 123px */
  :root { --header-height: 7.6875rem; }

  .site-header {
    --nav-pad-x: 80px;
    --nav-pad-y: 40px;
  }

  /* 3 columnas: 1fr auto 1fr mantiene los links centrados aunque el
     logo cambie de ancho al colapsar a <n>. */
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--nav-col-gap);
  }

  .nav__toggle { display: none; }
  .nav__overlay { display: none; }

  .nav .nav__logo { justify-self: start; }   /* el área clicable es solo el logo */

  .nav__logo-letter { display: inline-block; }

  /* El contenedor del panel desaparece: links y acciones pasan a ser
     hijos directos del grid (columnas 2 y 3). */
  .nav__menu,
  .nav__menu[data-open="true"] {
    display: contents;
    visibility: visible;
  }

  .nav__links {
    flex-direction: row;
    align-items: center;
    gap: var(--nav-link-gap);
    justify-self: center;
  }

  .nav__actions {
    flex-direction: row;
    align-items: center;
    gap: 19px;
    justify-self: end;
  }
}

/* --- Secciones ---------------------------------------------------- */
.section { padding-block: var(--section-padding); }

/* --- CTA final (todas las páginas, antes del footer) ------------------ */
/* Especificación: docs/componente-cta-final-noedelaflor.md (Figma 102:1567).
   Vive aquí y no en pages/*.css porque se repite en todas las páginas
   (copiado a mano, como nav y footer). Fondo carbón con el efecto de puntos
   del Hero (dots-effect.js, data-dots-effect en la sección): el canvas va
   absoluto detrás del contenido. Sin reveal ni fade: el título y los
   botones son estáticos. Botones con el mismo flash diagonal + elevación
   que Precios (pages/inicio.css, .pr-btn) — misma técnica, mismos tokens. */
.cta-final {
  --cf-pad-y: clamp(var(--space-7), 13.3vw, 192px);   /* 192px en desktop, mismo ritmo que Inicio */
  --cf-pad-x: 20px;
  --cf-content-max: 1280px;
  --cf-text-max: 1053px;             /* ancho del bloque título + botones (Figma) */
  --cf-title-to-actions: 32px;
  --cf-actions-gap: 25px;            /* entre botones */
  --cf-btn-width: 240px;             /* desktop; en mobile 100% */
  --cf-btn-height: 64px;
  --cf-btn-radius: 5px;
  --cf-btn-pad-x: 12px;              /* justo para que "Tengo una duda" + ícono quepan en 240px */
  --cf-btn-icon-gap: 10px;           /* ícono → texto */
  --cf-btn-icon-size: 24px;
  --cf-btn-lift: -2px;               /* elevación en hover (Precios) */
  --cf-btn-scale-hover: 1.03;
  --cf-flash-duration: 600ms;        /* una sola pasada, no usa los tokens de estado */
  --cf-flash-width: 40%;             /* ancho de la banda de brillo */

  position: relative;                /* contiene el canvas absoluto */
  overflow: hidden;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--cf-pad-y) var(--cf-pad-x);
}

/* Canvas del efecto de puntos: detrás de todo, nunca captura el puntero
   (misma regla que .dots-canvas del Hero; se repite aquí porque
   pages/inicio.css solo carga en Inicio) */
.cta-final .dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta-final__inner {
  position: relative;                /* por encima del canvas */
  max-width: var(--cf-text-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cf-title-to-actions);
  text-align: center;
}

.cta-final__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);   /* Fraunces Regular (400) */
  font-size: var(--fs-h1);           /* 28px → 43px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Botones: apilados y al 100% en mobile; fila de 240px desde 768px */
.cta-final__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cf-actions-gap);
  width: 100%;
}

/* Mismo patrón que .pr-btn: elevación + scale con rebote (--curve-spring);
   el flash diagonal vive en ::after y se recorta con overflow: hidden. */
.cta-final__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;                /* el ::after no se sale del contexto del botón */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-btn-icon-gap);
  min-height: var(--cf-btn-height);
  padding: 0 var(--cf-btn-pad-x);
  border: 1px solid var(--color-oro);
  border-radius: var(--cf-btn-radius);
  font-size: var(--fs-h3);           /* 20px → 24px, Hanken Grotesk Regular */
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--ease-base) var(--curve-spring),
              background-color var(--ease-base) var(--curve-standard);
}

.cta-final__btn--primary {
  background-color: var(--color-oro);
  color: var(--color-carbon);
}

.cta-final__btn--secondary {
  background-color: transparent;
  color: var(--color-crema);
}

.cta-final__btn-icon {
  width: var(--cf-btn-icon-size);
  height: var(--cf-btn-icon-size);
  flex-shrink: 0;
}

/* Flash diagonal: banda de brillo fuera del botón por la izquierda */
.cta-final__btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cf-flash-width);
  background: linear-gradient(to right, rgba(245, 237, 220, 0), rgba(245, 237, 220, 0.45), rgba(245, 237, 220, 0));
  transform: translateX(-250%) skewX(-20deg);
  pointer-events: none;
  z-index: -1;                       /* debajo del texto, encima del fondo (isolation) */
}

.cta-final__btn--secondary::after {
  background: linear-gradient(to right, rgba(224, 168, 46, 0), rgba(224, 168, 46, 0.35), rgba(224, 168, 46, 0));
}

@media (hover: hover) and (pointer: fine) {
  .cta-final__btn:hover {
    transform: translateY(var(--cf-btn-lift)) scale(var(--cf-btn-scale-hover));
  }
  .cta-final__btn--secondary:hover { background-color: var(--color-oro-10); }

  /* El flash cruza una sola vez: solo transiciona al entrar; al salir vuelve
     a su sitio sin animación para que no "regrese" visiblemente */
  .cta-final__btn:hover::after {
    transform: translateX(350%) skewX(-20deg);
    transition: transform var(--cf-flash-duration) var(--curve-standard);
  }
}

/* Touch: sin hover persistente, el botón responde mientras se mantiene presionado */
.cta-final__btn:active { transform: scale(0.98); transition-duration: var(--ease-fast); }

/* Nota bajo los botones ("Desde $3,999 MXN · Si no cumplo…"): microcopy de
   confianza en --fs-label (13px → 14px), un paso arriba de los 12px para que
   no se pierda junto a los botones. Mismo gap del inner (--cf-title-to-actions)
   que separa título y botones. */
.cta-final__note {
  margin: 0;
  font-size: var(--fs-label);        /* 13px → 14px */
  line-height: 1.5;
}

/* --- Tablet y desktop (≥ 768px): botones en fila, 240px cada uno ------ */
@media (min-width: 48em) {
  .cta-final__actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
  }

  .cta-final__btn { min-width: var(--cf-btn-width); }  /* 240px; crece solo si el texto no cabe */
}

/* Movimiento reducido: sin elevación ni flash */
@media (prefers-reduced-motion: reduce) {
  .cta-final__btn, .cta-final__btn::after { transition: none; }
  .cta-final__btn:hover { transform: none; }
  .cta-final__btn:hover::after { transform: translateX(-250%) skewX(-20deg); }
}

/* --- Logo estático (footer y copyright) --------------------------- */
/* Misma construcción que el logo del nav (un <span> por carácter) pero
   sin animación. Tamaños vía --logo-size / --logo-sign-size.
   Vive aquí (no en pages/inicio.css) porque el footer y el copyright van
   en TODAS las páginas — antes solo Inicio lo cargaba y el logo se veía
   sin estilo en las demás (bug detectado por Rey, sept 2026). */
.logo {
  --logo-size: 2rem;          /* 32px letras */
  --logo-sign-size: 1.5rem;   /* 24px signos < > */
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--logo-size);
  line-height: 1;
  color: var(--color-crema);
  text-decoration: none;
}

.logo__text {
  display: inline-flex;
  align-items: center;
}

.logo__text > * + * { margin-left: 1px; }

.logo__sign {
  font-size: var(--logo-sign-size);
  font-weight: var(--weight-black);
  color: var(--color-oro);
}

/* --- Footer --------------------------------------------------------- */
/* Especificación: documentacion/componente-footer-noedelaflor.md
   Desktop: 5 columnas de 256px (logo+tagline / espaciador / navegación /
   legales / contacto) dentro de un contenedor de 1280px centrado. El
   espaciador se resuelve con una primera columna de 2fr (512px = logo +
   espaciador) en vez de un bloque vacío. Mobile: bloques apilados a la
   izquierda, sin espaciador.
   El breakpoint columnas → apilado (1080px) se calcula con anchos
   reales — ver el comentario de la media query al final de la sección. */
.site-footer {
  --footer-pad-x: 20px;            /* gutter lateral (alineado con el nav; el doc dice 10px,
                                      irrelevante en desktop porque el contenedor centra a 1280) */
  --footer-pad-y: 90px;
  --footer-content-max: 1280px;
  --footer-stack-gap: var(--space-6);   /* 48px entre bloques apilados (mobile) */
  --footer-link-gap: 8px;               /* título → primer link, y entre links */
  --footer-social-gap: 16px;
  --copyright-pad-y: 32px;

  background-color: var(--color-carbon);
  color: var(--color-crema);
}

.footer {
  /* Ambos bordes siempre visibles (sin condición de scroll). El borde
     inferior es a la vez el único separador con el copyright notice. */
  border-top: 1px solid var(--color-oro);
  border-bottom: 1px solid var(--color-oro);
  padding: var(--footer-pad-y) var(--footer-pad-x);
}

.footer__inner {
  max-width: var(--footer-content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-stack-gap);
}

/* Col 1: logo + tagline */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 256px;               /* ancho de columna en Figma: fija el quiebre del tagline */
}

.footer__tagline {
  margin: 0;
  font-size: var(--text-body);    /* 18px */
  line-height: 1.5;
}

/* Cols 3–5: título + lista */
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-link-gap);
}

.footer__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;             /* 20px */
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-oro);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--footer-link-gap);
}

/* Links: un escalón más suave que el nav (crema 80%), hover oro + subrayado.
   Mismo mecanismo que el nav: ::after con scaleX que nace de izquierda a
   derecha al entrar y se retrae de derecha a izquierda al salir. */
.footer__list a,
.footer__list button {   /* "Preferencias de cookies": <button> con aspecto de link */
  position: relative;
  display: inline-block;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-crema-80);
  text-decoration: none;
  transition: color var(--ease-base) var(--curve-standard);
}

.footer__list a::after,
.footer__list button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                     /* con line-height 1.5 la caja ya deja ~4px bajo la base */
  height: var(--link-underline-thickness);
  background-color: var(--color-oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-base) var(--curve-standard);
}

.footer__list a:hover,
.footer__list button:hover { color: var(--color-oro); }
.footer__list a:hover::after,
.footer__list button:hover::after { transform: scaleX(1); }

/* Col 5: íconos sociales (24px de alto, gap 16px). El SVG se aplica como
   máscara para que el color venga de currentColor: crema por defecto,
   oro al hover — sin duplicar archivos. */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--footer-social-gap);
}

.footer__social a {
  display: inline-flex;
  color: var(--color-crema);
  transition: color var(--ease-fast) var(--curve-standard);  /* hover de ícono */
}

.footer__social a:hover { color: var(--color-oro); }

.footer__icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.footer__icon--whatsapp  { --icon: url("/assets/img/svgs/whatsapp-icon.svg"); }
.footer__icon--email     { --icon: url("/assets/img/svgs/email-icon.svg"); width: 26px; }
.footer__icon--instagram { --icon: url("/assets/img/svgs/Instagram-icon.svg"); }
.footer__icon--facebook  { --icon: url("/assets/img/svgs/facebook-icon.svg"); width: 12px; }
.footer__icon--linkedin  { --icon: url("/assets/img/svgs/linkedin-icon.svg"); }

/* --- Copyright notice ------------------------------------------------ */
/* Sin borde superior propio: el borde inferior del footer es el separador. */
.copyright {
  padding: var(--copyright-pad-y) var(--footer-pad-x);
  font-size: 1rem;                /* 16px en todo el bloque */
  line-height: 1.5;
  color: var(--color-crema-50);
}

.copyright__inner {
  max-width: var(--footer-content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;            /* mobile: todo centrado */
  text-align: center;
  gap: var(--space-4);
}

/* Bloque izquierdo: © MMXXVI + logo reducido + derechos, en una línea */
.copyright__left {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.copyright__symbol,
.copyright__hash {
  color: var(--color-oro-50);
}

.copyright .logo {
  --logo-size: 1rem;              /* 16px, sin animación */
  --logo-sign-size: 0.75rem;      /* misma proporción que el logo grande (24/32) */
  color: var(--color-crema-50);
}

.copyright .logo__sign { color: var(--color-oro-50); }

/* Bloque derecho: "Hecho con…" + hashtags */
.copyright__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.copyright__right p { margin: 0; }

.copyright__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

/* --- Desktop (≥ 1080px = 67.5em): columnas en fila + copyright en línea */
/* Breakpoint calculado con anchos reales, mismo criterio que el nav:
   - Footer: las 5 columnas son iguales, así que manda la más ancha
     ("PONTE EN CONTACTO" = 204.75px): 5 × 204.75 + padding 20 × 2 = 1064px,
     más ~16px de margen para métricas tipográficas → 1080px.
   - Copyright: bloque izq. 436px + bloque der. 436px + padding 40 = 912px;
     cabe desde ~950px, por lo que comparte este mismo breakpoint.
   Si cambia el copy de los títulos o los tamaños, recalcular. */
@media (min-width: 67.5em) {
  .footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;   /* 512 / 256 / 256 / 256 a 1280px */
    align-items: start;
    gap: 0;
  }

  .copyright__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: right;
  }

  .copyright__left { justify-content: flex-start; }
  .copyright__right { align-items: flex-end; }
  .copyright__tags { justify-content: flex-end; }
}

/* --- Widget de WhatsApp (flotante, fijo, todas las páginas) ------- */
.whatsapp-widget {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-whatsapp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--color-oro);
  color: var(--color-carbon);
  /* pendiente: ícono SVG de líneas finas; sombra sutil, sin glow */
}

/* --- Banner de consentimiento de cookies (todas las páginas, incl. 404) --- */
/* Especificación: docs/componente-cookies-noedelaflor.md (captura de diseño,
   sin nodo de Figma). Vive aquí, junto al widget de WhatsApp, porque se
   repite en todas las páginas (HTML copiado a mano). Lógica en
   assets/js/cookie-consent.js: el banner nace con `hidden` y el JS lo
   muestra solo si no hay decisión vigente.
   Tarjeta crema no modal (sin overlay): esquina inferior izquierda desde
   768px, conviviendo con WhatsApp (esquina derecha); en mobile a todo el
   ancho con margen lateral y WhatsApp oculto mientras está abierto
   (html.cookie-banner-open). Aceptar y Rechazar con el MISMO estilo
   (outline sobre crema) y el mismo ancho: ninguno se destaca. */
.cookie-banner {
  --cookie-width: 310px;                 /* desktop/tablet (spec) */
  --cookie-offset: var(--space-4);       /* 24px a los bordes, igual que WhatsApp */
  --cookie-offset-mobile: var(--space-3);  /* 16px, igual que el gutter mínimo */
  --cookie-pad: 24px 16px;
  --cookie-radius: var(--radius-md);     /* 10px (captura) */
  --cookie-shadow: 0 8px 24px rgba(36, 24, 19, 0.16);  /* carbón con opacidad, sin quinto color */
  --cookie-icon-size: 80px;
  --cookie-icon-size-mobile: 56px;       /* ocupa menos alto en mobile */
  --cookie-icon-to-text: 24px;
  --cookie-text-to-actions: 24px;
  /* 16px en 375 → 14px desde 768 (sube en mobile para leerse mejor) */
  --cookie-text-size: clamp(0.875rem, 1.1193rem - 0.5089vw, 1rem);
  --cookie-btn-min-width: 104px;
  --cookie-btn-height: 44px;
  --cookie-btn-gap: 16px;
  --cookie-btn-radius: 5px;

  position: fixed;
  left: var(--cookie-offset-mobile);
  right: var(--cookie-offset-mobile);
  bottom: var(--cookie-offset-mobile);
  z-index: var(--z-cookie);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--cookie-pad);
  border: 1px solid var(--color-carbon);
  border-radius: var(--cookie-radius);
  background-color: var(--color-crema);
  color: var(--color-carbon);
  box-shadow: var(--cookie-shadow);
  text-align: center;
  /* Fade de entrada/salida (JS alterna .is-visible; `hidden` al terminar) */
  opacity: 0;
  transition: opacity var(--ease-base) var(--curve-standard);
}

.cookie-banner[hidden] { display: none; }
.cookie-banner.is-visible { opacity: 1; }

.cookie-banner__icon {
  width: var(--cookie-icon-size-mobile);
  height: var(--cookie-icon-size-mobile);
  margin-bottom: var(--cookie-icon-to-text);
}

.cookie-banner__text {
  margin: 0 0 var(--cookie-text-to-actions);
  font-size: var(--cookie-text-size);
  line-height: 1.5;
}

/* Link en copy sobre crema (estilo §5): texto carbón, subrayado oro de 1px
   siempre visible que engrosa a 2px en hover — mismo mecanismo que .prose a */
.cookie-banner__link {
  color: var(--color-carbon);
  text-decoration: underline;
  text-decoration-color: var(--color-oro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--ease-base) var(--curve-standard);
}

.cookie-banner__link:hover { text-decoration-thickness: 2px; }

/* Dos columnas de 1fr: ambos botones toman el ancho del más ancho */
.cookie-banner__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--cookie-btn-min-width), 1fr);
  gap: var(--cookie-btn-gap);
}

/* Secundario sobre crema (estilo §5): outline carbón; hover estándar =
   borde oro sólido + fondo oro al 10%. Focus: outline global de base.css */
.cookie-banner__btn {
  min-height: var(--cookie-btn-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-carbon);
  border-radius: var(--cookie-btn-radius);
  background-color: transparent;
  color: var(--color-carbon);
  font-size: var(--text-label);          /* 14px */
  font-weight: var(--weight-label);      /* 500 */
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color var(--ease-base) var(--curve-standard),
              border-color var(--ease-base) var(--curve-standard);
}

.cookie-banner__btn:hover {
  border-color: var(--color-oro);
  background-color: var(--color-oro-10);
}

/* Mobile: mientras el banner está abierto, el botón de WhatsApp se oculta */
@media (max-width: 47.99em) {
  .cookie-banner-open .whatsapp-widget { display: none; }
}

/* --- Tablet y desktop (≥ 768px): tarjeta de 310px, esquina inferior izq. */
@media (min-width: 48em) {
  .cookie-banner {
    right: auto;
    left: var(--cookie-offset);
    bottom: var(--cookie-offset);
    width: var(--cookie-width);
  }

  .cookie-banner__icon {
    width: var(--cookie-icon-size);
    height: var(--cookie-icon-size);
  }
}

/* Movimiento reducido: aparece y desaparece sin fade */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .cookie-banner__link, .cookie-banner__btn { transition: none; }
}