/* ==========================================================================
   Aura Event Planner — Sistema de diseño "Luz de Aura"
   --------------------------------------------------------------------------
   Dirección de arte: la marca vive en la transición de la tarde a la noche
   encendida. Fondo índigo profundo como lienzo, luz rosa y coral como acento.
   El arco (tomado de las ventanas y montajes reales de Aura) es el motivo
   gráfico que hilvana portada, categorías y galería.

   Mobile-first. Todo el movimiento respeta prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca — extraídos del logotipo oficial */
  --rosa: #F7C6C7;
  --coral: #F6B07F;
  --lavanda: #AFACD6;

  /* Índigo: el ancla oscura de la marca */
  --tinta: #363271;
  --tinta-800: #2A2659;
  --tinta-900: #1E1B42;
  --tinta-950: #14122E;

  /* Neutros cálidos */
  --marfil: #FBF7F2;
  --arena: #F2E9DE;
  --arena-200: #E7DBCB;
  --carbon: #221F1C;
  --texto: #4A443D;
  --texto-tenue: #7C736A;
  --blanco: #FFFFFF;
  --borde: #E4D9C8;
  --borde-oscuro: rgba(247, 198, 199, 0.22);

  /* Semánticos */
  --fondo: var(--marfil);
  --fondo-alt: var(--arena);
  --tinta-texto: var(--carbon);

  /* Tipografía */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica editorial — más audaz que la anterior */
  --t-display: clamp(2.75rem, 9vw, 7.5rem);
  --t-h1: clamp(2.35rem, 6.4vw, 5rem);
  --t-h2: clamp(1.85rem, 4.4vw, 3.35rem);
  --t-h3: clamp(1.25rem, 2.3vw, 1.7rem);
  --t-cuerpo: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --t-grande: clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);
  --t-micro: 0.76rem;

  /* Espaciado */
  --e-2xs: 0.35rem;
  --e-xs: 0.6rem;
  --e-sm: 1rem;
  --e-md: 1.75rem;
  --e-lg: 3rem;
  --e-xl: clamp(3.5rem, 8vw, 7rem);
  --e-2xl: clamp(5rem, 12vw, 10rem);

  /* Formas */
  --arco: 50% 50% 0 0 / 28% 28% 0 0;   /* arco de medio punto suave */
  --radio-sm: 4px;
  --radio: 10px;
  --radio-lg: 22px;

  --ancho: 1240px;
  --ancho-estrecho: 940px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido: 220ms;
  --medio: 420ms;
  --lento: 800ms;

  --sombra-baja: 0 2px 12px rgba(34, 31, 28, 0.06);
  --sombra: 0 18px 50px -18px rgba(34, 31, 28, 0.28);
  --sombra-alta: 0 40px 90px -30px rgba(30, 27, 66, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.7;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2. Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--tinta-texto);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 var(--e-sm);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.01em; }

/* Fraunces variable: más "wonk" y suavidad en tamaños grandes */
.display {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.032em;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
  margin: 0;
}

.cursiva { font-style: italic; font-variation-settings: 'SOFT' 60, 'WONK' 1; }

p { margin: 0 0 var(--e-sm); }
p:last-child { margin-bottom: 0; }

.entrada { font-size: var(--t-grande); line-height: 1.55; color: var(--texto); }
.prosa { max-width: 62ch; }
.prosa-corta { max-width: 46ch; }

/* Antetítulo */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--tinta);
  margin: 0 0 var(--e-sm);
}
.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.kicker.centrado::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, video { max-width: 100%; display: block; height: auto; }

/* --------------------------------------------------------------------------
   3. Accesibilidad
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar-enlace {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--tinta);
  color: #fff;
  padding: 0.9rem 1.4rem;
  font-weight: 600;
  border-radius: 0 0 var(--radio) 0;
}
.saltar-enlace:focus { left: 0; }

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .revelar { opacity: 1 !important; transform: none !important; }
  .marquesina-pista { animation: none !important; }
}

/* --------------------------------------------------------------------------
   4. Estructura
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.contenedor-estrecho { max-width: var(--ancho-estrecho); }

section { padding-block: var(--e-xl); position: relative; }
section.amplia { padding-block: var(--e-2xl); }
section.ajustada { padding-block: var(--e-lg); }

.franja-arena { background: var(--fondo-alt); }

/* Secciones oscuras: invierten los colores de texto */
.franja-tinta {
  background: var(--tinta-900);
  color: rgba(255,255,255,0.82);
  --tinta-texto: #fff;
}
.franja-tinta h1, .franja-tinta h2, .franja-tinta h3 { color: #fff; }
.franja-tinta .kicker { color: var(--rosa); }
.franja-tinta p { color: rgba(255,255,255,0.78); }
.franja-tinta a { color: var(--rosa); }

.encabezado-seccion { max-width: 58ch; margin-bottom: var(--e-lg); }
.encabezado-seccion.centrado {
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cabecera de sección con enlace a la derecha */
.seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--e-md);
  margin-bottom: var(--e-lg);
}
.seccion-cabecera > div { max-width: 52ch; }

/* --------------------------------------------------------------------------
   5. Botones y enlaces
   -------------------------------------------------------------------------- */
.boton {
  --b-fondo: var(--tinta);
  --b-texto: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: var(--b-fondo);
  color: var(--b-texto);
  transition: transform var(--rapido) var(--ease),
              box-shadow var(--rapido) var(--ease),
              color var(--rapido) var(--ease),
              border-color var(--rapido) var(--ease);
}
/* Relleno que sube desde abajo al pasar el cursor */
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--coral);
  transform: translateY(101%);
  transition: transform var(--medio) var(--ease);
}
.boton:hover, .boton:focus-visible {
  color: var(--tinta-900);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.boton:hover::before, .boton:focus-visible::before { transform: translateY(0); }
.boton:active { transform: translateY(0); }

.boton-contorno {
  --b-fondo: transparent;
  --b-texto: var(--tinta);
  border-color: currentColor;
}
.boton-claro { --b-fondo: #fff; --b-texto: var(--tinta-900); }
.boton-contorno-claro {
  --b-fondo: transparent;
  --b-texto: #fff;
  border-color: rgba(255,255,255,0.55);
}
.boton-contorno-claro:hover, .boton-contorno-claro:focus-visible { color: var(--tinta-900); }

.grupo-botones { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Enlace con subrayado animado */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;              /* objetivo táctil cómodo en móvil */
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--medio) var(--ease), gap var(--rapido) var(--ease);
}
.enlace-flecha:hover, .enlace-flecha:focus-visible { gap: 0.85rem; background-size: 0% 1px; }
.enlace-flecha svg { width: 15px; height: 15px; flex-shrink: 0; }
.franja-tinta .enlace-flecha { color: var(--rosa); }

/* --------------------------------------------------------------------------
   6. Encabezado y navegación
   -------------------------------------------------------------------------- */
.encabezado {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background var(--medio) var(--ease-suave),
              box-shadow var(--medio) var(--ease-suave),
              border-color var(--medio) var(--ease-suave);
  border-bottom: 1px solid transparent;
}
/* Sobre la portada: transparente y en blanco */
.encabezado[data-sobre-hero="true"]:not([data-fijo="true"]) {
  --nav-color: #fff;
  background: linear-gradient(180deg, rgba(20,18,46,0.55) 0%, rgba(20,18,46,0) 100%);
}
.encabezado[data-fijo="true"] {
  --nav-color: var(--carbon);
  background: rgba(251, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--borde);
  box-shadow: var(--sombra-baja);
}
.encabezado:not([data-sobre-hero="true"]) {
  --nav-color: var(--carbon);
  background: rgba(251, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--borde);
}

.barra-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.7rem clamp(1.25rem, 5vw, 3rem);
  transition: padding var(--medio) var(--ease);
}
.encabezado[data-fijo="true"] .barra-nav { padding-block: 0.4rem; }

.marca-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.marca-logo img {
  height: clamp(52px, 8vw, 78px);
  width: auto;
  transition: height var(--medio) var(--ease), filter var(--medio) var(--ease);
}
.encabezado[data-fijo="true"] .marca-logo img { height: clamp(44px, 6vw, 60px); }
/* El logo es rosa/coral: sobre la portada oscura se aclara ligeramente */
.encabezado[data-sobre-hero="true"]:not([data-fijo="true"]) .marca-logo img {
  filter: brightness(1.18) saturate(1.05);
}

.nav-principal { display: none; }
.nav-principal ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-principal a {
  position: relative;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav-color, var(--carbon));
  padding-block: 0.45rem;
  transition: color var(--rapido) var(--ease), opacity var(--rapido) var(--ease);
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--ease);
}
.nav-principal a:hover::after,
.nav-principal a:focus-visible::after,
.nav-principal a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principal a[aria-current="page"] { opacity: 1; }

.acciones-nav { display: flex; align-items: center; gap: 0.7rem; }
.acciones-nav .boton { padding: 0.7rem 1.25rem; font-size: 0.82rem; }
.encabezado[data-sobre-hero="true"]:not([data-fijo="true"]) .acciones-nav .boton-nav {
  --b-fondo: rgba(255,255,255,0.14);
  --b-texto: #fff;
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
}

/* Botón hamburguesa */
.boton-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.boton-menu span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--nav-color, var(--carbon));
  transition: transform var(--medio) var(--ease), opacity var(--rapido) var(--ease);
}
.boton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú móvil a pantalla completa */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--tinta-900);
  padding: calc(env(safe-area-inset-top) + 6.5rem) clamp(1.5rem, 7vw, 3rem) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity var(--medio) var(--ease),
              transform var(--medio) var(--ease),
              visibility var(--medio);
}
.menu-movil.abierto { opacity: 1; visibility: visible; transform: none; }
.menu-movil nav ul { list-style: none; margin: 0; padding: 0; }
.menu-movil nav a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
  padding-block: 0.4rem;
  opacity: 0;
  transform: translateY(14px);
}
.menu-movil.abierto nav a {
  animation: subir var(--lento) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}
.menu-movil nav a[aria-current="page"] { color: var(--rosa); }
.menu-movil-pie {
  margin-top: auto;
  padding-top: var(--e-md);
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
}
.menu-movil-pie a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.95rem;
}
.menu-movil .boton { align-self: flex-start; }

@keyframes subir { to { opacity: 1; transform: none; } }

@media (min-width: 1000px) {
  .nav-principal { display: block; }
  .boton-menu { display: none; }
  .menu-movil { display: none; }
}

body.menu-abierto { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Portada (hero)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tinta-950);
  color: #fff;
  isolation: isolate;
}
.hero-fondo {
  position: absolute;
  inset: 0;
  /* z-index 0, no negativo: con un contexto de apilamiento propio en .hero,
     un valor negativo dejaba la fotografía detrás del fondo del bloque. */
  z-index: 0;
  overflow: hidden;
}
.hero-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* --- Paseo de imágenes de portada ---
   Cuatro fotografías que se funden entre sí con un paneo lento.
   Todo en CSS: sin librerías, sin JavaScript y sin video pesado. */
.hero-fondo .diapositiva {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: paseo-hero 32s linear infinite;
}
/* El primer retraso es negativo para que la portada aparezca ya visible,
   sin un parpadeo oscuro al cargar. Los demás encadenan cada 8 s. */
.hero-fondo .diapositiva:nth-child(1) { animation-delay: -1s; }
.hero-fondo .diapositiva:nth-child(2) { animation-delay:  7s; }
.hero-fondo .diapositiva:nth-child(3) { animation-delay: 15s; }
.hero-fondo .diapositiva:nth-child(4) { animation-delay: 23s; }

.hero-fondo .diapositiva img {
  /* Encuadre alto: en móvil la franja visible sin velo es la superior,
     así que ahí es donde debe caer el motivo de la fotografía. */
  object-position: 50% 28%;
  animation: deriva-hero 32s var(--ease-suave) infinite;
}
.hero-fondo .diapositiva:nth-child(1) img { animation-delay: -1s; }
.hero-fondo .diapositiva:nth-child(2) img { animation-delay:  7s; }
.hero-fondo .diapositiva:nth-child(3) img { animation-delay: 15s; }
.hero-fondo .diapositiva:nth-child(4) img { animation-delay: 23s; }

/* La salida de una foto coincide con la entrada de la siguiente:
   el fundido es continuo y nunca queda el fondo al descubierto. */
@keyframes paseo-hero {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  25%   { opacity: 1; }
  28%   { opacity: 0; }
  100%  { opacity: 0; }
}
/* El acercamiento ocurre solo mientras la foto es visible */
@keyframes deriva-hero {
  0%   { transform: scale(1.02); }
  28%  { transform: scale(1.12); }
  100% { transform: scale(1.12); }
}

/* Sin movimiento: se muestra fija la primera fotografía */
@media (prefers-reduced-motion: reduce) {
  .hero-fondo .diapositiva { animation: none; opacity: 0; }
  .hero-fondo .diapositiva:first-child { opacity: 1; }
  .hero-fondo .diapositiva img { animation: none; transform: none; }
}
/* Velo: oscurece la mitad inferior, donde va el texto, y deja
   respirar la parte alta para que la fotografía se aprecie. */
.hero-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo en dos tiempos: la mitad superior deja respirar la fotografía y la
     inferior se cierra lo suficiente para que el texto blanco cumpla contraste
     AA sobre cualquiera de las cuatro imágenes del paneo. */
  background:
    linear-gradient(180deg,
      rgba(20,18,46,0.46) 0%,
      rgba(20,18,46,0.10) 18%,
      rgba(20,18,46,0.30) 32%,
      rgba(20,18,46,0.68) 44%,
      rgba(20,18,46,0.86) 58%,
      rgba(20,18,46,0.94) 100%);
}

.hero-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(4.5rem, 11vh, 7.5rem);
}
.hero .kicker { color: var(--rosa); }
.hero .display { color: #fff; max-width: 15ch; }
.hero .display em {
  font-style: italic;
  color: var(--rosa);
  font-variation-settings: 'SOFT' 70, 'WONK' 1;
}
.hero-entrada {
  color: rgba(255,255,255,0.86);
  max-width: 44ch;
  font-size: var(--t-grande);
  margin-top: var(--e-md);
}
.hero .grupo-botones { margin-top: var(--e-md); }

/* --- Portada en dos columnas a partir de tableta ---
   Las fotografías de Aura son verticales. En pantallas anchas, en vez de
   recortarlas a una franja apaisada (que deja fuera casi toda la escena),
   viven en un marco vertical con el arco de la marca, junto al texto.
   El texto queda sobre el índigo sólido, así que siempre se lee. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    max-width: var(--ancho);
    margin-inline: auto;
    padding: clamp(7rem, 12vh, 9.5rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 8vh, 6rem);
    background: var(--tinta-900);
  }
  .hero-fondo {
    position: relative;
    inset: auto;
    z-index: auto;
    order: 2;
    /* Proporción vertical fija: la fotografía se ve completa,
       no una franja recortada como ocurría a pantalla ancha. */
    aspect-ratio: 3 / 4;
    height: min(74vh, 660px);
    width: auto;
    max-width: 100%;
    justify-self: center;
    border-radius: var(--arco);
    box-shadow: var(--sombra-alta);
  }
  /* Dentro del marco solo hace falta un leve asentado inferior */
  .hero-fondo::after {
    background: linear-gradient(180deg,
      rgba(20,18,46,0) 55%,
      rgba(20,18,46,0.28) 100%);
  }
  .hero-contenido {
    order: 1;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* El titular se dimensiona a la columna, no al ancho de la ventana */
  .hero .display {
    font-size: clamp(2.6rem, 4.5vw, 4.4rem);
    max-width: 11ch;
  }
  .hero-entrada { max-width: 36ch; font-size: 1.05rem; margin-top: var(--e-sm); }
  .indicador-scroll { left: clamp(1.25rem, 5vw, 3rem); transform: none; }
}

/* Indicador de scroll */
.indicador-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255,255,255,0.75);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.indicador-scroll::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: caer 2.4s var(--ease-suave) infinite;
  transform-origin: top;
}
@keyframes caer {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}
@media (min-width: 800px) and (min-height: 620px) {
  .indicador-scroll { display: flex; }
}

/* Portada de páginas interiores */
.hero-interior {
  position: relative;
  min-height: clamp(42vh, 52vh, 60vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tinta-900);
  color: #fff;
  padding-top: 7rem;
}
.hero-interior .hero-fondo::after {
  background: linear-gradient(180deg, rgba(20,18,46,0.72) 0%, rgba(20,18,46,0.35) 45%, rgba(20,18,46,0.85) 100%);
}
.hero-interior .contenedor { position: relative; z-index: 1; padding-bottom: var(--e-lg); }
.hero-interior h1 { color: #fff; max-width: 20ch; }
.hero-interior p { color: rgba(255,255,255,0.82); max-width: 54ch; }
.hero-interior .kicker { color: var(--rosa); }

/* Portada interior sin foto */
.hero-sencillo {
  background: var(--arena);
  padding-top: calc(7rem + var(--e-lg));
  padding-bottom: var(--e-lg);
}

/* --------------------------------------------------------------------------
   8. Marquesina
   -------------------------------------------------------------------------- */
.marquesina {
  overflow: hidden;
  padding-block: clamp(1.1rem, 2.6vw, 1.9rem);
  background: var(--tinta-900);
  border-block: 1px solid rgba(255,255,255,0.08);
  user-select: none;
}
.marquesina-pista {
  display: flex;
  width: max-content;
  animation: desplazar 42s linear infinite;
}
.marquesina:hover .marquesina-pista,
.marquesina:focus-within .marquesina-pista { animation-play-state: paused; }
.marquesina-grupo {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.marquesina span {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
.marquesina span.acento { color: var(--rosa); font-style: italic; }
.marquesina .punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
}
@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   9. Bloque editorial asimétrico
   -------------------------------------------------------------------------- */
.editorial {
  display: grid;
  gap: var(--e-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .editorial.texto-derecha .editorial-media { order: -1; }
}

/* Pareja de imágenes desfasadas */
.par-imagenes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.4rem);
  align-items: start;
}
.par-imagenes figure { margin: 0; }
.par-imagenes img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radio);
}
.par-imagenes figure:first-child { padding-top: clamp(1.5rem, 5vw, 3.5rem); }
.par-imagenes figure:last-child img { aspect-ratio: 3 / 4.6; }

/* Imagen única con arco */
.figura-arco { margin: 0; position: relative; }
.figura-arco img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--arco);
}
.figura-arco figcaption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--texto-tenue);
}

/* Detalle decorativo: arco de línea fina */
.arco-decorativo {
  position: absolute;
  border: 1px solid var(--borde);
  border-bottom: 0;
  border-radius: var(--arco);
  pointer-events: none;
  z-index: -1;
}

/* Lista de valores sin tarjetas */
.lista-valores {
  list-style: none;
  margin: var(--e-md) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.lista-valores li {
  padding-block: var(--e-md);
  border-top: 1px solid var(--borde);
  display: grid;
  gap: 0.35rem;
}
.lista-valores li:last-child { border-bottom: 1px solid var(--borde); }
.lista-valores h3 { margin: 0; font-size: 1.18rem; }
.lista-valores p { margin: 0; font-size: 0.97rem; }
.franja-tinta .lista-valores li { border-color: var(--borde-oscuro); }

/* Cifra/dato destacado */
.dato { display: grid; gap: 0.2rem; }
.dato strong {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--tinta);
  font-weight: 600;
}
.dato span { font-size: 0.88rem; color: var(--texto-tenue); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   10. Tipos de evento — mosaico con arcos
   -------------------------------------------------------------------------- */
.rejilla-tipos {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .rejilla-tipos { grid-template-columns: repeat(4, 1fr); }
  /* Ritmo vertical alterno: las piezas pares bajan un poco */
  .rejilla-tipos > *:nth-child(even) { transform: translateY(clamp(1.5rem, 4vw, 3rem)); }
}

.tipo-evento {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.tipo-evento-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--arco);
  background: var(--arena-200);
}
.tipo-evento-media img {
  width: 100%;
  aspect-ratio: 3 / 4.2;
  object-fit: cover;
  transition: transform var(--lento) var(--ease), filter var(--lento) var(--ease);
}
.tipo-evento-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,46,0) 45%, rgba(20,18,46,0.7) 100%);
  opacity: 0.85;
  transition: opacity var(--medio) var(--ease);
}
.tipo-evento:hover .tipo-evento-media img,
.tipo-evento:focus-visible .tipo-evento-media img { transform: scale(1.07); }
.tipo-evento:hover .tipo-evento-media::after { opacity: 1; }

.tipo-evento-texto {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.1rem 1.15rem 1.25rem;
  color: #fff;
}
.tipo-evento-texto small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rosa);
  margin-bottom: 0.25rem;
}
.tipo-evento-texto h3 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
}
.tipo-evento-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease);
}
.tipo-evento:hover .tipo-evento-flecha,
.tipo-evento:focus-visible .tipo-evento-flecha { opacity: 1; transform: none; }
@media (hover: none) {
  .tipo-evento-flecha { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11. Galería editorial
   -------------------------------------------------------------------------- */
.galeria-editorial {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) {
  .galeria-editorial { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .galeria-editorial > *:nth-child(1) { grid-column: 1 / span 5; }
  .galeria-editorial > *:nth-child(2) { grid-column: 6 / span 4; margin-top: clamp(2rem, 6vw, 5rem); }
  .galeria-editorial > *:nth-child(3) { grid-column: 10 / span 3; }
  .galeria-editorial > *:nth-child(4) { grid-column: 1 / span 3; }
  .galeria-editorial > *:nth-child(5) { grid-column: 4 / span 4; margin-top: clamp(1rem, 3vw, 2.5rem); }
  .galeria-editorial > *:nth-child(6) { grid-column: 8 / span 5; }
}

.pieza {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--arena-200);
}
.pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform var(--lento) var(--ease);
}
.pieza.alta img { aspect-ratio: 3 / 4.6; }
.pieza.baja img { aspect-ratio: 4 / 3.4; }
.pieza:hover img { transform: scale(1.05); }

.pieza figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 0.95rem;
  background: linear-gradient(180deg, rgba(20,18,46,0) 0%, rgba(20,18,46,0.78) 100%);
  color: #fff;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity var(--medio) var(--ease);
}
.pieza:hover figcaption, .pieza:focus-within figcaption { opacity: 1; }
@media (hover: none) { .pieza figcaption { opacity: 1; } }

/* Botón que cubre la pieza (abre la galería) */
.pieza .abrir-imagen {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   12. Portafolio (página) — filtros + mosaico
   -------------------------------------------------------------------------- */
.filtros-portafolio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--e-lg);
}
.filtro-boton {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--borde);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  transition: background var(--rapido) var(--ease),
              color var(--rapido) var(--ease),
              border-color var(--rapido) var(--ease);
}
.filtro-boton:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro-boton[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

.rejilla-portafolio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.7rem, 2vw, 1.4rem);
}
@media (min-width: 720px) { .rejilla-portafolio { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .rejilla-portafolio { grid-template-columns: repeat(4, 1fr); } }

.item-portafolio { position: relative; margin: 0; }
.item-portafolio.destacado { grid-column: span 2; }
.item-portafolio .etiqueta {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(251,247,242,0.92);
  color: var(--tinta);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   13. Visor de imágenes (lightbox)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 12, 32, 0.95);
  backdrop-filter: blur(8px);
}
.lightbox.activo { display: flex; animation: aparecer var(--medio) var(--ease); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.lightbox-figura { margin: 0; max-width: min(92vw, 900px); text-align: center; }
.lightbox img {
  max-height: 82vh;
  max-width: 100%;
  width: auto;
  border-radius: var(--radio);
  margin-inline: auto;
}
.lightbox-descripcion {
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  margin-top: 0.9rem;
}
.lightbox-cerrar, .lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.lightbox-cerrar:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.24); transform: scale(1.06); }
.lightbox-cerrar {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px;
  font-size: 1.4rem;
  line-height: 1;
}
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 1.5rem; }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-anterior { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-siguiente { right: clamp(0.5rem, 2vw, 1.5rem); }

/* --------------------------------------------------------------------------
   14. Proceso
   -------------------------------------------------------------------------- */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: paso;
}
.paso {
  counter-increment: paso;
  display: grid;
  gap: 0.5rem var(--e-md);
  padding-block: var(--e-md);
  border-top: 1px solid var(--borde);
  align-items: start;
}
.paso:last-child { border-bottom: 1px solid var(--borde); }
.franja-tinta .paso { border-color: var(--borde-oscuro); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--coral);
  font-weight: 600;
}
.paso h3 { margin: 0; }
.paso p { margin: 0; }
@media (min-width: 760px) {
  .paso { grid-template-columns: 4.5rem 1fr 1.1fr; align-items: baseline; }
  .paso::before { grid-row: span 2; }
}

/* --------------------------------------------------------------------------
   15. Servicios / listas con detalle
   -------------------------------------------------------------------------- */
.rejilla { display: grid; gap: var(--e-md); }
@media (min-width: 700px) { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

.bloque-servicio {
  display: grid;
  gap: 0.6rem;
  padding-top: var(--e-md);
  border-top: 2px solid var(--tinta);
}
.bloque-servicio h3 { margin: 0; }
.bloque-servicio ul {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.94rem;
}
.bloque-servicio li { padding-left: 1.1rem; position: relative; }
.bloque-servicio li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
}

.chip-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--e-sm); }
.chip {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   16. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq-lista { border-top: 1px solid var(--borde); }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
  padding: 1.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 600;
  color: var(--tinta-texto);
  transition: color var(--rapido) var(--ease);
}
.faq-pregunta:hover { color: var(--tinta); }
.faq-pregunta .signo {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.faq-pregunta .signo::before,
.faq-pregunta .signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--tinta);
  transition: transform var(--medio) var(--ease);
}
.faq-pregunta .signo::after { transform: rotate(90deg); }
.faq-item[data-abierto="true"] .signo::after { transform: rotate(0deg); }
.faq-respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--medio) var(--ease);
}
.faq-item[data-abierto="true"] .faq-respuesta { grid-template-rows: 1fr; }
.faq-respuesta-interior { overflow: hidden; }
.faq-respuesta-interior p { padding-bottom: 1.35rem; max-width: 68ch; }

/* --------------------------------------------------------------------------
   17. Formulario
   -------------------------------------------------------------------------- */
.formulario { display: grid; gap: var(--e-sm); }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--tinta-texto); }
.requerido { color: var(--coral); }
.campo input, .campo select, .campo textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--carbon);
  padding: 0.85rem 1rem;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  width: 100%;
  transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(54,50,113,0.12);
  outline: none;
}
.campo-fila { display: grid; gap: var(--e-sm); }
@media (min-width: 640px) { .campo-fila.dos { grid-template-columns: 1fr 1fr; } }
.campo-check { display: flex; align-items: flex-start; gap: 0.65rem; }
/* 24x24 mínimo: WCAG 2.2 AA, criterio 2.5.8 Tamaño del objetivo (mínimo). */
.campo-check input { width: 24px; height: 24px; min-width: 24px; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--indigo, #363271); cursor: pointer; }
.campo-check label { font-weight: 400; font-size: 0.92rem; line-height: 1.55; }
.campo-ayuda { font-size: 0.82rem; color: var(--texto-tenue); }
.mensaje-error { display: none; font-size: 0.84rem; color: #A4303F; }
.campo.con-error .mensaje-error { display: block; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: #A4303F; }
.mensaje-estado {
  display: none;
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--radio-sm);
  font-size: 0.95rem;
}
.mensaje-estado.mostrar { display: block; }
.mensaje-estado.exito { background: #EAF3E7; color: #2C5133; border: 1px solid #BCD8B4; }
.mensaje-estado.error { background: #FBE9E9; color: #8A2734; border: 1px solid #EDBFC2; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[aria-busy="true"] { opacity: 0.65; cursor: progress; }

/* --------------------------------------------------------------------------
   18. Llamado final
   -------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--tinta-900);
  color: #fff;
  text-align: center;
  padding-block: var(--e-2xl);
  isolation: isolate;
}
.cta-fondo { position: absolute; inset: 0; z-index: -1; }
.cta-fondo img { width: 100%; height: 100%; object-fit: cover; }
.cta-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,18,46,0.86) 0%, rgba(30,27,66,0.78) 100%),
    radial-gradient(90% 70% at 50% 110%, rgba(247,198,199,0.25) 0%, rgba(20,18,46,0) 65%);
}
.cta-final h2 { color: #fff; margin-inline: auto; max-width: 18ch; }
.cta-final h2 em { font-style: italic; color: var(--rosa); }
.cta-final p { color: rgba(255,255,255,0.8); max-width: 52ch; margin-inline: auto; }
.cta-final .grupo-botones { justify-content: center; margin-top: var(--e-md); }
.cta-final .kicker { color: var(--rosa); justify-content: center; }

/* --------------------------------------------------------------------------
   19. Pie de página
   -------------------------------------------------------------------------- */
.pie-pagina {
  background: var(--tinta-950);
  color: rgba(255,255,255,0.72);
  padding-block: var(--e-xl) var(--e-md);
  font-size: 0.94rem;
}
.pie-rejilla {
  display: grid;
  gap: var(--e-lg);
  padding-bottom: var(--e-lg);
}
@media (min-width: 760px) { .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie-pagina h3 {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: var(--e-sm);
}
.pie-pagina ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.pie-pagina li { display: flex; align-items: center; min-height: 40px; }
.pie-pagina a { color: rgba(255,255,255,0.78); text-decoration: none; transition: color var(--rapido) var(--ease); }
/* Los enlaces del pie ocupan toda la fila para tocarse con comodidad */
.pie-pagina li > a { display: flex; align-items: center; width: 100%; min-height: 40px; }
.pie-pagina a:hover { color: var(--rosa); }
.pie-logo img { height: 74px; width: auto; margin-bottom: var(--e-sm); }
.pie-pagina .lema { max-width: 34ch; color: rgba(255,255,255,0.65); }
.redes-sociales { display: flex; gap: 0.7rem; margin-top: var(--e-md); }
.redes-sociales a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.redes-sociales a:hover { background: rgba(255,255,255,0.12); border-color: var(--rosa); transform: translateY(-2px); }
.redes-sociales svg { width: 19px; height: 19px; }
.pie-inferior {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--e-md);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.83rem;
  color: rgba(255,255,255,0.55);
}
.pie-inferior ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   20. WhatsApp flotante
   -------------------------------------------------------------------------- */
.whatsapp-flotante {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.5rem);
  bottom: calc(clamp(0.9rem, 3vw, 1.5rem) + env(safe-area-inset-bottom));
  z-index: 150;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  transition: transform var(--medio) var(--ease), opacity var(--medio) var(--ease);
}
.whatsapp-flotante:hover { transform: scale(1.07); }
.whatsapp-flotante svg { width: 29px; height: 29px; }
/* Se aparta cuando el menú móvil está abierto */
body.menu-abierto .whatsapp-flotante { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   21. Migas y utilidades
   -------------------------------------------------------------------------- */
.migas { font-size: 0.82rem; color: var(--texto-tenue); margin-bottom: var(--e-sm); }
.migas a { color: inherit; text-decoration: none; display: inline-block; padding-block: 0.55rem; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.hero-interior .migas, .hero-interior .migas a { color: rgba(255,255,255,0.72); }

.aviso-discreto {
  background: var(--arena);
  border: 1px dashed var(--coral);
  border-radius: var(--radio-sm);
  padding: var(--e-sm) var(--e-md);
  font-size: 0.9rem;
  color: var(--texto-tenue);
}

.pagina-404 { text-align: center; padding-block: var(--e-2xl); }
.pagina-404 .codigo {
  font-family: var(--serif);
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
  color: var(--tinta);
  opacity: 0.16;
  margin: 0;
}

.centrado { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   22. Revelado al hacer scroll
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
  transition-delay: var(--retraso, 0ms);
}
.revelar.visible { opacity: 1; transform: none; }

/* Variante para imágenes: además de subir, revelan con un ligero zoom */
.revelar-media { overflow: hidden; }
.revelar-media img {
  transform: scale(1.08);
  transition: transform 1.2s var(--ease);
}
.revelar-media.visible img { transform: scale(1); }