/* ==========================================================================
   Club Flinta — hoja de estilos compartida
   Todas las páginas (index, wet-sauna, contacto) usan este archivo.

   Esta versión implementa la CONTRAPROPUESTA VISUAL (canvas "Club Flinta —
   Contrapropuesta visual"): dos temas que conviven.

     · Marca madre  -> violeta profundo + coral. Inicio y Contacto.
     · Wet Sauna    -> mármol claro + bordó/cereza + celeste.

   Lo único que NO cambia respecto de la versión anterior es el HERO de Wet
   Sauna (imagen de mármol, lente WebGL que sigue al puntero y vapor del
   título). Todo ese bloque está marcado como INTOCABLE más abajo.

   Orden del archivo:
     1. Tokens
     2. Base, grano y utilidades
     3. Navegación
     4. Inicio (marca madre)
     5. Formularios
     6. Footer
     7. Wet Sauna
     8. HERO WET SAUNA — intocable
     9. Contacto
    10. Responsive
   ========================================================================== */

@view-transition { navigation: auto; }

/* ==========================================================================
   0. TIPOGRAFÍAS DE LA MARCA
   --------------------------------------------------------------------------
   Tres familias, cinco archivos, servidos desde assets/fonts/:

     · Whyte Inktrap Bold    -> títulos de impacto: hero, H1, wordmark.
     · Hatton Medium Italic  -> subtítulos y frases destacadas: H2, citas.
     · Whyte Regular/Medium  -> texto, menú, etiquetas; Medium para botones
                                y énfasis.
     · Whyte Regular Italic  -> solo los significados en alemán del
                                acrónimo FLINTA (<i> en Inicio). Es la
                                itálica real: antes el navegador inclinaba la
                                recta a mano y se notaba. Pesa 28 KB y se
                                baja solo en las páginas que la usan.

   Cada archivo trae SOLO su corte. No hay Whyte Bold, ni Whyte Medium
   Italic, ni Hatton recta: si un componente pide uno de esos, el navegador
   no tiene el archivo. `font-synthesis: none` (en body) le prohíbe
   inventarlo: cae al corte más cercano que sí existe, en vez de engordar o
   inclinar las letras artificialmente.

   Los .woff2 están recortados a latín (castellano + inglés, con ¿, ñ, —,
   comillas y €). Si el sitio suma otro idioma con otros caracteres, hay que
   regenerarlos desde los .otf: el cómo está en CONTEXTO-PROYECTO.md.
   ========================================================================== */

@font-face {
  font-family: 'Whyte Inktrap';
  src: url('assets/fonts/whyte-inktrap-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hatton';
  src: url('assets/fonts/hatton-medium-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('assets/fonts/whyte-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('assets/fonts/whyte-regular-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Whyte';
  src: url('assets/fonts/whyte-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Marca madre. Rampa de violetas con un único acento cálido.
     El naranja es el acento: kickers, el asterisco, la guarda, el ticket y los
     CTA. Es el contrapeso cálido de un sitio que, si no, lee todo violeta.
     Nunca lleva texto marfil encima: sobre naranja el texto va en violeta. */
  --violeta-900: #2B1C27;   /* fondo principal */
  --violeta-800: #3A2536;   /* mancha de fondo */
  --violeta-700: #4F364B;   /* bandas alternadas */
  --violeta-500: #6A4E8C;   /* mancha de fondo */
  --violeta-200: #CABAD7;   /* respiro claro (misión / ticket) */
  --naranja:     #FF892E;   /* ACENTO ÚNICO */
  --marfil:      #F7E9DE;   /* texto sobre oscuro */

  /* ---- Wet Sauna — dirección "mármol griego". Misma paleta de siempre:
     el hero depende de estos tokens y por eso no se tocan. */
  --ws-marmol:  #faf6f0;
  --ws-celeste: #c2dcff;
  --ws-bordo:   #7a0000;
  --ws-cereza:  #c81d2b;
  --ws-tinta:   #2b0a0e;

  /* ---- Capa semántica (la que leen los componentes). */
  --fondo: var(--violeta-900);
  --tinta: var(--marfil);
  --acento: var(--naranja);
  --acento-2: var(--violeta-200);
  --acento-3: var(--violeta-500);
  --linea: rgba(247, 233, 222, 0.16);
  --linea-suave: rgba(247, 233, 222, 0.12);
  --tinta-suave: rgba(247, 233, 222, 0.82);
  --tinta-tenue: rgba(247, 233, 222, 0.55);

  /* Los respaldos son los que se ven el instante antes de que llegue el
     .woff2 (font-display: swap): elegidos por ancho parecido, para que el
     texto no salte de renglón cuando cambia. */
  /* Color del asterisco del logo. Las letras usan currentColor. */
  --logo-acento: var(--naranja);

  --font-display: 'Whyte Inktrap', 'Helvetica Neue', Arial, sans-serif;
  --font-frase: 'Hatton', Georgia, 'Times New Roman', serif;
  --font-sans: 'Whyte', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Medidas. --pad-x es el margen lateral de todas las bandas. */
  --pad-x: clamp(24px, 5vw, 56px);
  --gutter: var(--pad-x);
  --w-content: 1240px;
  --w-prose: 62ch;
}

[data-theme="wetsauna"] {
  --fondo: var(--ws-marmol);
  --tinta: var(--ws-tinta);
  --acento: var(--ws-bordo);
  --acento-2: var(--ws-cereza);
  --acento-3: var(--ws-celeste);
  --linea: rgba(122, 0, 0, 0.2);
  --linea-suave: rgba(122, 0, 0, 0.12);
  --tinta-suave: rgba(43, 10, 14, 0.8);
  --tinta-tenue: rgba(122, 0, 0, 0.5);
  --logo-acento: var(--ws-cereza);
}

/* ==========================================================================
   2. BASE, GRANO Y UTILIDADES
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.55;
  font-synthesis: none;
  /* En Mac, el texto claro sobre fondo oscuro se ve más grueso de lo que es
     (el suavizado por subpíxel lo engorda). Con esto Whyte Regular se ve con
     su peso real en las páginas violetas. No cambia nada en Windows ni en
     celulares, que ya dibujan así. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Inktrap es ancha y pesada: a tamaño de titular se le cierra el tracking
   para que la palabra lea como bloque. Hatton va sin tocar: su cursiva ya
   trae el espaciado que necesita. */
h1, .wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2, h3 {
  font-family: var(--font-frase);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
}
strong, b { font-weight: 500; }

a { color: inherit; text-decoration: none; }

/* El sprite (logo, monograma y asterisco) vive una sola vez por página. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* .flor es el asterisco del logo usado suelto, como detalle gráfico (el nombre de la clase quedó de cuando era una flor de seis pétalos).
   Gira al pasar por encima del enlace que la contiene. */
.flor {
  display: inline-block;
  color: var(--acento);
  vertical-align: middle;
  transition: transform 0.6s ease;
  transform-origin: center;
  flex-shrink: 0;
}
a:hover .flor, a:focus-visible .flor { transform: rotate(70deg); }

/* Grano de película. En Inicio va fundido en "overlay"; en Wet Sauna se
   mantiene el grano de siempre para no alterar el hero. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Etiqueta en mayúscula muy espaciada. Es la voz "de sistema" del sitio:
   nombra la sección sin competir con el titular. */
.kicker {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Bandas: todo el sitio es una pila de bandas a sangre. */
.banda {
  position: relative;
  padding: clamp(72px, 9vw, 110px) var(--pad-x);
}
.banda__in { max-width: var(--w-content); margin: 0 auto; }

/* Reveal al hacer scroll (lo enciende motion.js). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Manchas de color difuminadas: el fondo vivo del hero y del footer. */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.blob--a { width: 60vw; height: 60vw; left: -16vw; top: -20vw; background: var(--violeta-700); opacity: 0.8; animation: blobfloat-a 18s ease-in-out infinite; }
.blob--b { width: 50vw; height: 50vw; right: -12vw; top: -14vw; background: var(--violeta-800); opacity: 0.8; animation: blobfloat-b 22s ease-in-out infinite; }
.blob--c { width: 34vw; height: 34vw; left: 32vw; bottom: -14vw; background: var(--naranja); opacity: 0.4; filter: blur(100px); animation: blobfloat-c 15s ease-in-out infinite; }
.blob--d { width: 42vw; height: 42vw; right: 4vw; bottom: -20vw; background: var(--violeta-500); opacity: 0.6; filter: blur(95px); animation: blobfloat-d 20s ease-in-out infinite; }

@keyframes blobfloat-a { 0%, 100% { transform: translate(-14%, -10%) scale(1); }    50% { transform: translate(18%, 14%) scale(1.3); } }
@keyframes blobfloat-b { 0%, 100% { transform: translate(20%, 10%) scale(1.1); }    50% { transform: translate(-18%, -16%) scale(0.85); } }
@keyframes blobfloat-c { 0%, 100% { transform: translate(-12%, 16%) scale(0.9); }   50% { transform: translate(16%, -18%) scale(1.25); } }
@keyframes blobfloat-d { 0%, 100% { transform: translate(14%, -12%) scale(1.05); }  50% { transform: translate(-16%, 14%) scale(0.8); } }

@media (prefers-reduced-motion: reduce) {
  .blob, .wave__track, .tile { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .heat-haze { filter: none; }
  html { scroll-behavior: auto; }
}

/* El logo (kit "Logo v2"). Es un <svg><use href="#logo"> del sprite de
   cada página: las letras toman `color` y el asterisco `--logo-acento`.
   Cada pieza se dibuja en su proporción exacta, así que alcanza con darle
   un ancho. Mínimos de la hoja de marca, a respetar al achicarlo: logo
   completo 160px, monograma F* 32px, asterisco 16px. */
.logo { display: block; height: auto; aspect-ratio: 388.19 / 162.06; overflow: visible; }
.logo--monograma { aspect-ratio: 1; }
.logo--sin-club { aspect-ratio: 388.19 / 155.92; }
/* El SVG oficial trae aire a la izquierda de la F (un 6,9% del ancho). Donde
   el logo va alineado a la izquierda con texto debajo, ese aire lo corría
   hacia adentro: se compensa con un margen negativo proporcional al ancho. */
.logo--alineado { width: var(--w); margin-left: calc(var(--w) * -0.069); }

/* "Club Flinta* presenta": es un rótulo, no un titular — tiene que quedar
   muy por debajo del nombre de la edición. Va el logo completo a 110px, por
   debajo del mínimo de la hoja de marca (160px): "CLUB" queda muy chico, y
   está decidido así (Mic, 02/10/2026) para que el nombre entero esté. La
   palabra se apoya en la base del logo. */
.presenta { display: flex; align-items: flex-end; gap: 8px; }
.presenta .logo { --w: 110px; width: var(--w); margin-inline: calc(var(--w) * -0.069); }
/* (el SVG trae el mismo aire a los dos lados: se compensan ambos para que
   "presenta" quede pegado al asterisco y, centrado, el conjunto no se corra.) */
.presenta > span:last-child { padding-bottom: 4px; }

/* ==========================================================================
   3. NAVEGACIÓN
   ========================================================================== */

header.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px var(--pad-x);
  background: rgba(43, 28, 39, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea-suave);
}

.site-nav .wordmark-small {
  display: block;
  flex-shrink: 0;
  color: var(--marfil);
  line-height: 0;
}
.site-nav .logo--completo { --w: 160px; }
.site-nav .logo--monograma { display: none; width: 40px; }
.site-nav nav { display: flex; gap: clamp(18px, 3vw, 36px); }

.site-nav nav a {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marfil);
  opacity: 0.82;
  white-space: nowrap;
  transition: color 0.22s ease, opacity 0.22s ease;
}
.site-nav nav a:hover,
.site-nav nav a:focus-visible { opacity: 1; color: var(--naranja); }
.site-nav nav a[aria-current="page"] { opacity: 1; color: var(--naranja); }

/* --- Switcher de idioma ---------------------------------------------------
   Vive dentro del mismo <nav> que el resto de los links, pero se lee como
   control y no como seccion: pildora con borde, una sola palabra. El
   aria-current de los links normales no le aplica porque nunca apunta a la
   pagina actual — siempre apunta al otro idioma. */
.site-nav nav .lang-switch {
  padding: 3px 9px;
  border: 1px solid var(--linea-suave);
  border-radius: 999px;
  opacity: 0.7;
  line-height: 1.5;
}
.site-nav nav .lang-switch:hover,
.site-nav nav .lang-switch:focus-visible {
  opacity: 1;
  color: var(--naranja);
  border-color: var(--naranja);
}

/* ==========================================================================
   4. INICIO — MARCA MADRE
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   Alineado a la izquierda y sobre las manchas en movimiento. */
.hero-home { position: relative; overflow: hidden; }
.hero-home__in {
  position: relative;
  padding: clamp(80px, 11vw, 130px) var(--pad-x) clamp(60px, 8vw, 90px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 780px;
}
.hero-home h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(2.75rem, 6.6vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--marfil);
}
.hero-home h1 .logo { --w: clamp(260px, 44vw, 560px); }
.hero-home .tagline {
  font-size: 1.1875rem;
  color: var(--tinta-suave);
  max-width: 420px;
}

/* --- Split: qué es / por qué ---------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; }

.split__media {
  background: var(--violeta-700);
  background-image: radial-gradient(circle at 30% 20%, rgba(255, 137, 46, 0.1), transparent 60%);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.split__media img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
/* PENDIENTE: acá va una fotografía real de espacio / comunidad. Hasta que
   exista, el hueco queda como un paño de color con el degradado de arriba —
   se lee como un bloque gráfico más y no como algo que falta.

   Antes este espacio mostraba un cartel que decía "reemplazar por fotografía
   real". Se sacó el 22/09/2026 porque no era una nota interna: era texto
   publicado, visible para cualquiera que entrara al sitio, y en la home en
   inglés aparecía además en castellano. El recordatorio vive acá, en el
   código, que es donde lo ve quien puede hacer algo al respecto.

   Cuando esté la foto: va un <img> adentro del <figure class="split__media">
   de v1/index.html Y de v1/en/index.html, con su alt en el idioma de cada
   página. La regla .split__media img de arriba ya la acomoda sola. */

.split__txt {
  background: var(--violeta-900);
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
}
.split__txt .kicker { color: var(--acento); margin-bottom: 14px; }
.split__bloque + .split__bloque {
  border-top: 1px solid var(--linea);
  padding-top: 36px;
  margin-top: 36px;
}
.split__lead {
  font-size: clamp(1.3125rem, 1.9vw, 1.625rem);
  line-height: 1.32;
  color: var(--marfil);
}
/* El rótulo queda fuera: es un <p class="kicker"> y `p:not(.split__lead)`
   tiene MÁS especificidad que `.split__txt .kicker`, así que le pisaba el
   naranja y lo dejaba marfil. */
.split__txt p:not(.split__lead):not(.kicker) {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinta-suave);
}
.split__txt p + p { margin-top: 16px; }

/* --- Desglose del acrónimo ------------------------------------------------ */
.letras {
  background: var(--violeta-700);
  padding: 44px var(--pad-x);
  display: flex;
  justify-content: center;
}
/* Seis columnas iguales, sin wrap: el acrónimo se lee en una sola línea en
   teléfono, tablet y desktop. Lo que se achica es la tipografía, nunca la
   cantidad de columnas — FLINTA partido en dos filas deja de ser una palabra. */
.letras__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
  max-width: 1100px;
  width: 100%;
  list-style: none;
}
.letra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px clamp(4px, 1.4vw, 22px);
  min-width: 0;
  text-align: center;
  transition: transform 0.25s ease;
}
.letra + .letra { border-left: 1px solid rgba(247, 233, 222, 0.18); }
.letra:hover { transform: translateY(-4px); }
.letra b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 4.2vw, 2.5rem);
  line-height: 1;
  color: var(--acento);
  transition: color 0.25s ease;
}
.letra:hover b { color: var(--violeta-200); }
/* La palabra alemana puede partirse en dos renglones; la letra grande no. */
.letra i {
  font-size: clamp(0.5625rem, 1.15vw, 0.8125rem);
  line-height: 1.25;
  color: var(--marfil);
  opacity: 0.9;
  /* Corta solo donde el HTML puso &shy;, con guion: "Inter-geschlecht-liche".
     `anywhere` partía la palabra en cualquier letra y quedaba ilegible. */
  hyphens: manual;
  overflow-wrap: break-word;
}
.letra .kicker {
  font-size: clamp(0.5rem, 0.95vw, 0.625rem);
  letter-spacing: 0.1em;
  /* 0.55 daba 3.93 sobre el violeta medio; 0.7 lo sube por encima de 4.5. */
  color: rgba(247, 233, 222, 0.7);
}

/* --- Misión ---------------------------------------------------------------
   El respiro claro de la página: fondo violeta pálido y una sola frase. */
.mision {
  background: var(--violeta-200);
  padding: clamp(72px, 9vw, 110px) var(--pad-x) clamp(20px, 3vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.mision .flor { width: 26px; height: 26px; }
.mision .kicker { color: var(--violeta-700); opacity: 0.75; }
/* El texto de la misión es el h2 de la sección: la frase ES el titular. */
.mision h2 {
  max-width: 660px;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--violeta-700);
}

/* --- Ticket de la próxima edición ----------------------------------------- */
.ticket-zona {
  background: var(--violeta-200);
  padding: 20px var(--pad-x) clamp(84px, 11vw, 130px);
  display: flex;
  justify-content: center;
}
.ticket {
  position: relative;
  background: var(--naranja);
  max-width: 620px;
  width: 100%;
  padding: clamp(36px, 5vw, 52px) clamp(30px, 5vw, 56px);
  border-radius: 6px;
  transform: rotate(-1.2deg);
  box-shadow: 0 26px 50px rgba(43, 28, 39, 0.32);
  transition: transform 0.35s ease;
}
.ticket:hover { transform: translateY(-6px) rotate(0deg); }
/* Las dos muescas del borde: lo que lo vuelve un ticket y no una tarjeta. */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  left: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violeta-200);
}
.ticket::before { top: -15px; }
.ticket::after { bottom: -15px; }
.ticket .kicker { color: var(--violeta-900); opacity: 0.7; margin-bottom: 12px; }
/* Sobre el naranja, el asterisco naranja del logo desaparecería: va en el
   cereza de Wet Sauna. Es el único color de la otra paleta que entra en
   Inicio, a propósito: este ticket es la puerta a Wet Sauna y el asterisco
   ya anticipa su color. */
.ticket .kicker.presenta { opacity: 1; --logo-acento: var(--ws-cereza); }
/* "presenta" es una nota al pie del logo: más chica que un kicker común. */
.ticket .kicker.presenta > span:last-child { opacity: 0.7; font-size: 0.625rem; letter-spacing: 0.12em; padding-bottom: 5px; }
.ticket h2 {
  /* El nombre de la edición es lo más grande del ticket, bien por encima
     del rótulo "Club Flinta* presenta". */
  font-size: clamp(3rem, 6.4vw, 4.5rem);
  line-height: 1;
  color: var(--violeta-900);
  margin-bottom: 18px;
}
.ticket p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--violeta-900);
  margin-bottom: 30px;
}

/* --- Newsletter (home) y formulario de Contacto ---------------------------
   Comparten regla a propósito: es el mismo componente en dos páginas. */
.newsletter,
.contacto-form {
  background: var(--violeta-900);
  padding: clamp(72px, 9vw, 110px) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.newsletter h2,
.contacto-form h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  color: var(--acento);
}
.newsletter > p,
.contacto-form > p { font-size: 1rem; color: rgba(247, 233, 222, 0.8); max-width: 46ch; }

/* --- Sumate como marca ----------------------------------------------------
   Banda coral a ancho completo, con el asterisco gigante como filigrana. */
.marcas {
  position: relative;
  overflow: hidden;
  background: var(--naranja);
  padding: clamp(48px, 6vw, 64px) var(--pad-x);
}
.marcas__flor {
  position: absolute;
  right: -30px;
  top: 50%;
  width: 300px;
  height: 300px;
  transform: translateY(-50%) rotate(12deg);
  opacity: 0.14;
  color: var(--violeta-900);
  pointer-events: none;
}
.marcas__in {
  position: relative;
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.marcas__txt { max-width: 560px; }
.marcas h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  color: var(--violeta-900);
  margin-bottom: 8px;
}
.marcas p { font-size: 1rem; color: var(--violeta-900); }

/* --- Botones --------------------------------------------------------------
   Píldora. El color lo pone quien lo usa: sobre coral va oscuro, sobre
   oscuro va coral. No hay degradés. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  cursor: pointer;
  border: none;
  background: var(--violeta-900);
  color: var(--marfil);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover,
.btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 13, 18, 0.4); }
.btn--naranja { background: var(--naranja); color: var(--violeta-900); }

/* ==========================================================================
   5. FORMULARIOS
   ========================================================================== */

form.mail-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 620px;
}
form.mail-form input,
form.mail-form textarea {
  flex: 1 1 260px;
  min-width: 240px;
  padding: 15px 22px;
  border-radius: 999px;
  border: 1px solid rgba(247, 233, 222, 0.3);
  background: transparent;
  color: var(--marfil);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease;
}
form.mail-form textarea {
  flex-basis: 100%;
  min-height: 130px;
  border-radius: 18px;
  resize: vertical;
  line-height: 1.6;
}
form.mail-form input::placeholder,
form.mail-form textarea::placeholder { color: rgba(247, 233, 222, 0.5); }
form.mail-form input:focus,
form.mail-form textarea:focus { outline: none; border-color: var(--naranja); }
form.mail-form button {
  flex: 0 0 auto;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  background: var(--naranja);
  color: var(--violeta-900);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
form.mail-form button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 13, 18, 0.4); }
form.mail-form button:disabled { opacity: 0.5; cursor: default; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-feedback { margin-top: 12px; font-size: 0.95rem; min-height: 1.2em; }
.form-feedback[data-state="ok"] { color: var(--naranja); }
.form-feedback[data-state="error"] { color: var(--violeta-200); }

/* Solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */

footer.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--violeta-900);
  border-top: 1px solid var(--linea-suave);
}
.site-footer .blob--a { width: 48vw; height: 48vw; left: -14vw; top: -10vw; opacity: 0.65; filter: blur(100px); }
.site-footer .blob--c { width: 36vw; height: 36vw; left: auto; right: -8vw; bottom: -6vw; opacity: 0.35; }
.site-footer .blob--d { width: 38vw; height: 38vw; right: auto; left: 15vw; bottom: -18vw; }

.site-footer__in { position: relative; padding: 64px var(--pad-x) 0; }

.footer-cols {
  display: grid;
  /* Cuatro columnas desde que el footer sumó la de Idioma. auto-fit en vez de
     repeat(4, 1fr) para que en pantallas medianas se acomode en dos filas de
     dos en vez de espicharse. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 56px;
}
/* Es un h2 para que el footer tenga jerarquía real, pero se ve como kicker. */
.footer-col h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  border-top: 1px solid rgba(247, 233, 222, 0.25);
  padding-top: 14px;
  margin-bottom: 16px;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col a,
.footer-col span {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marfil);
  opacity: 0.75;
  margin-bottom: 10px;
  transition: color 0.22s ease, opacity 0.22s ease;
}
.footer-col a:hover,
.footer-col a:focus-visible { opacity: 1; color: var(--naranja); }
.footer-col span { color: var(--tinta-tenue); }

/* Wordmark gigante: llena el ancho del footer y cierra la página. */
.footer-wordmark {
  max-width: var(--w-content);
  margin: 0 auto;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 9.4vw, 7.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--marfil);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.footer-wordmark .logo { width: clamp(220px, 44vw, 520px); }

footer .legal {
  padding: 20px 0 28px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(247, 233, 222, 0.45);
}

/* ==========================================================================
   7. WET SAUNA — "mármol griego"
   --------------------------------------------------------------------------
   Es la única página de base clara. La nav, el footer y los formularios se
   repintan; el resto de los componentes son propios de esta página.
   ========================================================================== */

[data-theme="wetsauna"] {
  background-image:
    linear-gradient(105deg, transparent 40%, rgba(122, 0, 0, 0.035) 41%, transparent 43%),
    linear-gradient(72deg, transparent 60%, rgba(200, 29, 43, 0.03) 61%, transparent 63%),
    linear-gradient(15deg, transparent 25%, rgba(122, 0, 0, 0.025) 26%, transparent 28%);
  background-attachment: fixed;
}

[data-theme="wetsauna"] .grain { opacity: 0.035; mix-blend-mode: normal; }

[data-theme="wetsauna"] header.site-nav {
  background: rgba(250, 246, 240, 0.88);
  border-bottom: 1px solid rgba(122, 0, 0, 0.12);
}
/* Logo de Wet Sauna sobre claro, como en la hoja de marca: letras en bordó
   casi negro y asterisco cereza. */
[data-theme="wetsauna"] .site-nav .wordmark-small { color: var(--ws-tinta); }
[data-theme="wetsauna"] .site-nav nav a {
  color: var(--ws-bordo);
  opacity: 0.8;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
[data-theme="wetsauna"] .site-nav nav a:hover,
[data-theme="wetsauna"] .site-nav nav a:focus-visible { opacity: 1; color: var(--ws-bordo); }
[data-theme="wetsauna"] .site-nav nav .lang-switch { border-color: rgba(122, 0, 0, 0.3); }
[data-theme="wetsauna"] .site-nav nav .lang-switch:hover,
[data-theme="wetsauna"] .site-nav nav .lang-switch:focus-visible { border-color: var(--ws-bordo); }

[data-theme="wetsauna"] .site-nav nav a[aria-current="page"] {
  opacity: 1;
  color: var(--ws-bordo);
  border-bottom-color: var(--ws-cereza);
}

/* Títulos de sección: centrados, Hatton, bordó. */
.ws-h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  color: var(--ws-bordo);
  text-align: center;
}

/* Guarda griega: el divisor que sigue al hero. */
.guarda {
  display: flex;
  overflow: hidden;
  height: 14px;
  color: var(--ws-bordo);
  opacity: 0.5;
}
.guarda svg { width: 100%; height: 14px; display: block; }

/* 01 — ¿Qué pasa si vamos más lento? */
.ws-intro { padding: clamp(80px, 10vw, 120px) var(--pad-x); }
.ws-intro__in { max-width: 760px; margin: 0 auto; text-align: center; }
.ws-intro h2 { margin-bottom: 24px; }
.ws-intro p { font-size: 1.0625rem; line-height: 1.7; color: rgba(43, 10, 14, 0.8); }

/* Ola: la banda de agua que corre entre secciones. */
.wave { overflow: hidden; line-height: 0; }
.wave__track { display: flex; width: max-content; animation: wave-drift 14s linear infinite; }
.wave__track svg { display: block; flex-shrink: 0; }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 02 — De qué va: fragmentos de mármol desparramados sobre el bordó.
   Cada uno flota con su propio ritmo; al pasar el mouse se frena, se
   endereza y sube. */
.ws-que {
  position: relative;
  background: var(--ws-bordo);
  padding: clamp(72px, 9vw, 100px) var(--pad-x) clamp(80px, 10vw, 110px);
  overflow: hidden;
}
.ws-que h2 { color: var(--ws-marmol); margin-bottom: clamp(40px, 6vw, 64px); }

/* Dos columnas. Las fichas ya no van desparramadas en absoluto: se reparten en
   una grilla y la inclinación y el flote quedan como gesto, no como layout.
   Con posiciones absolutas la sección no se podía releer en ningún ancho
   intermedio sin que las fichas se pisaran. */
.tile-field {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 32px;
  /* 720 y no 820: a 410px de ancho cada ficha entraba en un solo renglón y
     leían como botones. Con ~344 el texto cae en dos líneas y vuelven a leerse
     como fragmentos sueltos. */
  max-width: 720px;
  margin: 0 auto;
  list-style: none;
}
/* La quinta ficha queda sola: ocupa el ancho de las dos columnas, centrada y
   más angosta, para que la fila impar no lea como un hueco. */
.tile-field > :nth-child(5) { grid-column: 1 / -1; max-width: 344px; justify-self: center; width: 100%; }

.tile {
  border-radius: 8px;
  padding: 24px 26px;
  background: var(--ws-marmol);
  color: var(--ws-bordo);
  box-shadow: 0 18px 30px rgba(20, 4, 4, 0.3);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.tile p { font-family: var(--font-frase); font-style: italic; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.tile--celeste { background: var(--ws-celeste); color: var(--ws-tinta); box-shadow: 0 16px 28px rgba(20, 4, 4, 0.28); }
.tile--cereza  { background: var(--ws-cereza);  color: var(--ws-marmol); box-shadow: 0 18px 32px rgba(20, 4, 4, 0.35); }

.tile-wrap:nth-child(1) .tile { animation: tile-drift-1 6s   ease-in-out infinite; }
.tile-wrap:nth-child(2) .tile { animation: tile-drift-2 7s   ease-in-out infinite 0.3s; }
.tile-wrap:nth-child(3) .tile { animation: tile-drift-3 6.5s ease-in-out infinite 0.6s; }
.tile-wrap:nth-child(4) .tile { animation: tile-drift-4 7.5s ease-in-out infinite 0.2s; }
.tile-wrap:nth-child(5) .tile { animation: tile-drift-5 6.8s ease-in-out infinite 0.9s; }

@keyframes tile-drift-1 { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-6px); } }
@keyframes tile-drift-2 { 0%, 100% { transform: rotate(2deg) translateY(0); }    50% { transform: rotate(0.8deg) translateY(6px); } }
@keyframes tile-drift-3 { 0%, 100% { transform: rotate(-2deg) translateY(0); }   50% { transform: rotate(-0.6deg) translateY(-5px); } }
@keyframes tile-drift-4 { 0%, 100% { transform: rotate(2.5deg) translateY(0); }  50% { transform: rotate(1deg) translateY(5px); } }
@keyframes tile-drift-5 { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-0.4deg) translateY(-4px); } }

.tile-wrap:hover .tile,
.tile-wrap:focus-within .tile {
  animation-play-state: paused;
  transform: rotate(0deg) translateY(-10px) !important;
  box-shadow: 0 30px 46px rgba(20, 4, 4, 0.4) !important;
  z-index: 5;
}

/* 03 — Antes de venir: medallones unidos por una línea punteada. */
.ws-antes { position: relative; background: var(--ws-marmol); padding: clamp(80px, 10vw, 120px) var(--pad-x) clamp(72px, 9vw, 100px); }
.ws-antes h2 { margin-bottom: 72px; }
.medallones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
  list-style: none;
}
.medallon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vw, 16px);
  width: 200px;
  min-width: 0;
  flex: 1 1 0;
  max-width: 200px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.medallon:hover { transform: translateY(-6px); }
/* El medallón se achica con el ancho en vez de bajar a una columna: los tres
   pilares se leen de un vistazo, que es el punto de la sección. */
.medallon__icono {
  width: clamp(56px, 15vw, 112px);
  height: clamp(56px, 15vw, 112px);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ws-marmol);
  border: 2px solid var(--ws-cereza);
  display: flex;
  align-items: center;
  justify-content: center;
}
.medallon__icono svg { width: 36%; height: 36%; }
.medallon h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(0.5625rem, 1.5vw, 0.75rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ws-bordo);
}
.medallon p {
  font-size: clamp(0.6875rem, 1.6vw, 0.875rem);
  line-height: 1.5;
  color: rgba(43, 10, 14, 0.78);
}
.medallones__linea {
  width: clamp(12px, 4vw, 60px);
  height: 2px;
  margin-top: clamp(28px, 7.5vw, 55px);
  flex-shrink: 0;
  align-self: flex-start;
  background: repeating-linear-gradient(90deg, var(--ws-cereza) 0 6px, transparent 6px 12px);
}

/* 04 — Preguntas frecuentes: celeste con brillo de agua detrás. */
.ws-faq {
  position: relative;
  overflow: hidden;
  background: var(--ws-celeste);
  padding: clamp(72px, 9vw, 110px) var(--pad-x);
}
.ws-faq__shimmer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ws-faq__shimmer span { position: absolute; border-radius: 50%; }
.ws-faq__shimmer span:nth-child(1) {
  width: 40vw; height: 40vw; left: -10vw; top: -14vw;
  background: var(--ws-marmol); filter: blur(90px); opacity: 0.5;
  animation: shimmer-a 16s ease-in-out infinite;
}
.ws-faq__shimmer span:nth-child(2) {
  width: 34vw; height: 34vw; right: -8vw; bottom: -16vw;
  background: var(--ws-cereza); filter: blur(100px); opacity: 0.12;
  animation: shimmer-b 20s ease-in-out infinite;
}
@keyframes shimmer-a { 0%, 100% { transform: translate(-10%, -8%) scale(1); }   50% { transform: translate(14%, 10%) scale(1.2); } }
@keyframes shimmer-b { 0%, 100% { transform: translate(12%, 6%) scale(1.05); }  50% { transform: translate(-12%, -10%) scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
  .ws-faq__shimmer span { animation: none; }
}

.ws-faq__in { position: relative; max-width: 820px; margin: 0 auto; }
.ws-faq h2 { color: var(--ws-tinta); margin-bottom: 44px; }

.ws-faq details { border-bottom: 1px solid rgba(43, 10, 14, 0.18); }
.ws-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 8px;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  color: var(--ws-tinta);
  transition: background 0.2s ease;
}
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary:hover { background: rgba(122, 0, 0, 0.04); }
/* El "+" no se reemplaza por una "×": se gira 45°, que ES una × y además se
   puede animar. Cambiar el `content` da un salto seco. */
.ws-faq summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(43, 10, 14, 0.55);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease;
}
.ws-faq summary:hover::after { color: var(--ws-cereza); transform: rotate(90deg); }
.ws-faq details[open] summary::after,
.ws-faq details[open] summary:hover::after { transform: rotate(45deg); color: var(--ws-cereza); }
.ws-faq details p {
  padding: 0 8px 18px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(43, 10, 14, 0.85);
}
.ws-faq details p a { color: var(--ws-bordo); text-decoration: underline; }

/* Footer de Wet Sauna: mismo esqueleto, paleta clara. */
[data-theme="wetsauna"] footer.site-footer {
  background: var(--ws-marmol);
  border-top: 1px solid rgba(122, 0, 0, 0.15);
}
[data-theme="wetsauna"] .footer-col h2 { color: var(--ws-bordo); border-top-color: rgba(122, 0, 0, 0.2); }
[data-theme="wetsauna"] .footer-col a { color: var(--ws-bordo); opacity: 0.7; }
[data-theme="wetsauna"] .footer-col a:hover,
[data-theme="wetsauna"] .footer-col a:focus-visible { opacity: 1; color: var(--ws-cereza); }
[data-theme="wetsauna"] .footer-col span { color: rgba(122, 0, 0, 0.5); }
[data-theme="wetsauna"] .footer-wordmark { color: var(--ws-bordo); font-size: clamp(2.25rem, 8.6vw, 6.75rem); }
[data-theme="wetsauna"] .footer-wordmark em { font-style: normal; color: var(--ws-cereza); }
[data-theme="wetsauna"] footer .legal { color: rgba(122, 0, 0, 0.5); }

/* ==========================================================================
   8. HERO DE WET SAUNA — INTOCABLE
   --------------------------------------------------------------------------
   Todo lo que sigue hasta el final de la sección se conserva tal cual de la
   versión anterior: la lente WebGL que sigue al puntero (hero-lens.js), la
   foto de mármol, el vapor del título y sus medidas. La contrapropuesta no
   lo modifica — solo cambia lo que está alrededor.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: clamp(40px, 8vh, 90px) var(--gutter);
}
@media (min-width: 1024px) {
  .hero { min-height: 92svh; }
}
.hero .eyebrow {
  font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  opacity: 0.9;
}
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 1.02;
  background: linear-gradient(90deg in oklab, var(--acento-2), var(--acento) 45%, var(--acento-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .tagline {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  opacity: 0.9;
  max-width: 34ch;
}

/* Efecto "vapor / calor" para el título de Wet Sauna */
.heat-haze { filter: url(#heat-haze-filter); }

.a-sangre { width: 100%; }

/* Lente del hero: dos capas. El mármol ocupa todo el hero y un rectángulo
   que sigue al puntero revela la segunda imagen deformada. La interacción
   vive en hero-lens.js. */
.hero-lens {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ws-marmol);  /* color mientras arranca el contexto WebGL */
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;          /* los eventos los escucha .hero, no el canvas */
}
.hero-lens.is-ready { opacity: 1; }

.hero-lens canvas { display: block; width: 100%; height: 100%; }

/* Sin WebGL o con shader roto: queda la imagen base como fondo, sin
   interacción. Nunca un rectángulo negro. */
.hero-lens.is-fallback {
  opacity: 1;
  background-image: var(--hero-fallback, none);
  background-size: cover;
  background-position: center;
}
.hero-lens.is-fallback canvas { display: none; }

/* Viñeta para que el texto del hero se lea sobre cualquier imagen. */
.hero-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 85% at 50% 45%,
              transparent 30%, color-mix(in oklab, var(--ws-bordo) 30%, transparent) 100%);
  pointer-events: none;
}

/* El contenido del hero queda por encima del canvas. */
.hero > *:not(.hero-lens) { position: relative; z-index: 1; }

/* Hero. Sobre la foto de mármol el eyebrow queda justo encima de la zona más
   clara: va a opacidad plena para que no se pierda. */
[data-theme="wetsauna"] .hero .eyebrow { opacity: 1; }

[data-theme="wetsauna"] .hero h1 {
  background: linear-gradient(90deg in oklab, var(--ws-bordo), var(--ws-cereza) 55%, var(--ws-bordo));
  -webkit-background-clip: text;
  background-clip: text;
}
/* Viñeta más liviana, para no ensuciar el mármol de la foto. */
[data-theme="wetsauna"] .hero-lens::after {
  background: radial-gradient(115% 85% at 50% 45%,
              transparent 35%, color-mix(in oklab, var(--ws-bordo) 16%, transparent) 100%);
}

/* ======================= FIN DEL BLOQUE INTOCABLE ======================== */

/* ==========================================================================
   9. CONTACTO
   ========================================================================== */

.page-head {
  position: relative;
  overflow: hidden;
}
.page-head__in {
  position: relative;
  padding: clamp(80px, 10vw, 120px) var(--pad-x) clamp(48px, 6vw, 72px);
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-head .kicker { color: var(--acento); }
.page-head h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--marfil);
}
.page-head .tagline { font-size: 1.1875rem; color: var(--tinta-suave); max-width: 420px; }

.contacto-directo { background: var(--violeta-700); padding: clamp(56px, 7vw, 80px) var(--pad-x); }
.contacto-directo .kicker { color: var(--acento); margin-bottom: 14px; }
.contacto-directo__in { max-width: var(--w-content); margin: 0 auto; }
.contacto-directo .mail {
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  color: var(--marfil);
  border-bottom: 1px solid var(--linea);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contacto-directo .mail:hover { color: var(--naranja); border-bottom-color: var(--naranja); }
.contacto-directo .redes { margin-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; }
.contacto-directo .redes a {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marfil);
  opacity: 0.82;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
}
.contacto-directo .redes a:hover { opacity: 1; color: var(--naranja); border-bottom-color: var(--naranja); }

/* Mismo bloque que "Sumate a la lista" en la home: misma banda, mismo
   titular, mismos campos píldora. Ver la regla compartida arriba. */

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  /* Los clamp de abajo son por vw: en pantallas chicas caian al piso y dejaban
     texto de 8-9px, ilegible en telefono. De tablet para abajo se fijan en el
     tamano de lectura y no siguen encogiendo. El desktop queda como estaba. */
  /* Con 11px las palabras mas largas ("Lesbianas") no entran en una columna de
     54px: se cortan el tracking y el padding, y se permite guion automatico
     (el <html> declara lang="es-AR") para que partan prolijo en vez de
     pisar la linea divisoria. */
  .letra { padding-left: 3px; padding-right: 3px; }
  .letra .kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  .letra i { font-size: 0.75rem; }
  .medallon h3 { font-size: 0.75rem; }
  .medallon p { font-size: 0.875rem; }
  .footer-col a,
  .footer-col span { font-size: 0.875rem; }

  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 320px; }
  .split__media img,
  .split__media:not(:has(img))::after { min-height: 260px; }

  .footer-cols { grid-template-columns: 1fr; gap: 36px; }

  .marcas__flor { width: 200px; height: 200px; right: -60px; }

  /* Fichas de "De qué va": una columna, con aire entre ellas. Apretadas no se
     leían como piezas sueltas, se leían como una lista mal maquetada. */
  .tile-field { grid-template-columns: 1fr; gap: 22px; }
  .tile-field > :nth-child(5) { max-width: none; }
  .tile-wrap:nth-child(odd)  { transform: translateX(-2%); }
  .tile-wrap:nth-child(even) { transform: translateX(2%); }
  .tile-wrap:active .tile {
    transform: rotate(0deg) scale(1.03) !important;
    box-shadow: 0 20px 30px rgba(20, 4, 4, 0.4) !important;
  }
}

@media (max-width: 560px) {
  /* El logo completo (160px como mínimo) no entra junto al menú a 375px:
     en celular el menú lleva el monograma F*, la variante chica de la marca. */
  header.site-nav { padding: 10px 16px; gap: 10px; }
  .site-nav .logo--completo { display: none; }
  .site-nav .logo--monograma { display: block; }
  /* Cuatro items (tres secciones + el switcher de idioma) tienen que entrar en
     una sola linea a 375px con los textos mas largos, que son los del
     castellano: INICIO WET SAUNA CONTACTO EN. Por eso el gap y el tracking
     bajan mas que en el resto del sitio. */
  .site-nav nav { gap: 9px; }
  .site-nav nav a { font-size: 0.75rem; letter-spacing: 0.05em; }
  .site-nav nav .lang-switch { padding: 2px 6px; }
  .marcas__in { flex-direction: column; align-items: flex-start; }
  /* En columna, el `flex: 1 1 260px` de los campos pasa a valer sobre el ALTO
     y el input se estiraba a 260px de alto: con border-radius 999px quedaba
     una elipse gigante. En columna los campos no flexionan. */
  form.mail-form { flex-direction: column; align-items: stretch; }
  form.mail-form input,
  form.mail-form textarea,
  form.mail-form button { flex: 0 0 auto; width: 100%; min-width: 0; }
}

/* --- Hero de Inicio: derretido en movimiento (05/10/2026) ----------------
   El lienzo lo dibuja hero-melt.js. Si WebGL no está disponible, el script
   no agrega .melt-on y quedan las manchas de siempre. */
.hero-melt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.melt-on .hero-home .blobs { display: none; }
.site-footer .hero-melt.is-on ~ .blobs { display: none; }
.site-footer__in { position: relative; }

/* --- Qué es / Por qué FLINTA* sin columna de imagen (05/10/2026) ---------
   Arriba, la frase sola y centrada. Abajo, dos columnas: a la izquierda
   "¿Por qué Flinta*?" grande y tipográfico (como la placa del Posteo 2), a la
   derecha el texto. Fondo sólido. */
.split--sin-media { display: block; position: relative; overflow: hidden; background: var(--violeta-900); }
.split--sin-media .split__txt {
  position: relative;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 130px) var(--pad-x);
  background: transparent;
}
.split__bloque--lead { max-width: 900px; margin: 0 auto clamp(70px, 9vw, 120px); text-align: center; }
.split__bloque--lead .split__lead { font-size: clamp(1.75rem, 3.4vw, 2.875rem); line-height: 1.18; }
.split__porque {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  border-top: 1px solid var(--linea);
  padding-top: clamp(56px, 7vw, 90px);
}
.split--sin-media .split__porque .split__bloque { border: 0; margin: 0; padding: 0; }
.porque-titulo { display: flex; flex-direction: column; gap: 6px; color: var(--marfil); }
.porque-titulo__por {
  font-family: var(--font-frase);
  font-weight: 500;
  font-size: clamp(3rem, 7.2vw, 6.75rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.porque-titulo__por i { font-style: italic; }
.porque-titulo__logo {
  --w: clamp(230px, 34vw, 470px);
  position: relative;
  display: block;
  width: calc(var(--w) * 1.16);
  height: calc(var(--w) * 0.4017);
}
.porque-titulo__logo .logo { width: var(--w); height: calc(var(--w) * 0.4017); display: block; }
.porque-titulo__q {
  position: absolute;
  left: calc(var(--w) * 0.94);
  top: calc(var(--w) * 0.325 - var(--w) * 0.314 * 0.7825);
  font-family: var(--font-frase);
  font-weight: 500;
  font-size: calc(var(--w) * 0.314);
  line-height: 1;
}
@media (max-width: 860px) {
  .split__porque { grid-template-columns: 1fr; gap: 36px; }
}

/* --- Movimiento al hacer scroll, más marcado (05/10/2026) ----------------
   Solo en Inicio (.melt-on lo pone hero-melt.js). Las secciones suben y se
   enfocan; las letras de FLINTA entran una por una. */
.melt-on .reveal {
  transform: translateY(70px);
  filter: blur(8px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
}
.melt-on .reveal.is-visible { transform: none; filter: none; }
.melt-on .split--sin-media.reveal,
.melt-on .letras.reveal { opacity: 1; transform: none; filter: none; }
.melt-on .split--sin-media .split__bloque--lead,
.melt-on .split--sin-media .porque-titulo,
.melt-on .split--sin-media .split__porque .split__bloque {
  opacity: 0; transform: translateY(60px); filter: blur(6px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
}
.melt-on .split--sin-media.is-visible .split__bloque--lead,
.melt-on .split--sin-media.is-visible .porque-titulo,
.melt-on .split--sin-media.is-visible .split__porque .split__bloque { opacity: 1; transform: none; filter: none; }
.melt-on .split--sin-media.is-visible .porque-titulo { transition-delay: 0.35s; }
.melt-on .split--sin-media.is-visible .split__porque .split__bloque { transition-delay: 0.55s; }
.melt-on .letras .letra {
  opacity: 0;
  transform: translateY(60px) rotate(-8deg) scale(0.85);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.melt-on .letras.is-visible .letra { opacity: 1; transform: none; }
.melt-on .letras.is-visible .letra:nth-child(2) { transition-delay: 0.12s; }
.melt-on .letras.is-visible .letra:nth-child(3) { transition-delay: 0.24s; }
.melt-on .letras.is-visible .letra:nth-child(4) { transition-delay: 0.36s; }
.melt-on .letras.is-visible .letra:nth-child(5) { transition-delay: 0.48s; }
.melt-on .letras.is-visible .letra:nth-child(6) { transition-delay: 0.6s; }
.melt-on .letras.is-visible .letra:hover { transform: translateY(-4px); transition-delay: 0s; }

/* --- Formas de gradiente que se mueven lento detrás (05/10/2026) ---------
   El fondo de cada sección sigue siendo sólido; la forma es un acento. */
.split--sin-media::before,
.letras::before,
.mision::before,
.newsletter::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: forma-lenta 22s ease-in-out infinite alternate;
}
.split--sin-media::before { width: 42vw; height: 34vw; right: -10vw; top: 30%; background: radial-gradient(closest-side, rgba(106, 78, 140, 0.75), transparent); }
.letras { position: relative; overflow: hidden; }
.letras::before { width: 30vw; height: 20vw; left: 8vw; top: -6vw; background: radial-gradient(closest-side, rgba(255, 137, 46, 0.35), transparent); animation-duration: 18s; }
.mision { position: relative; overflow: hidden; }
.mision::before { width: 36vw; height: 26vw; left: 50%; top: 4vw; margin-left: -18vw; background: radial-gradient(closest-side, rgba(255, 137, 46, 0.4), transparent); }
.newsletter { position: relative; overflow: hidden; }
.newsletter::before { width: 50vw; height: 34vw; left: -12vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(106, 78, 140, 0.8), transparent); animation-duration: 26s; }
.letras > *, .mision > *, .newsletter > *, .split--sin-media > * { position: relative; z-index: 1; }
@keyframes forma-lenta {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(6vw, -3vw) scale(1.2) rotate(20deg); }
  100% { transform: translate(-5vw, 2vw) scale(0.9) rotate(-15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .split--sin-media::before, .letras::before, .mision::before, .newsletter::before { animation: none; }
  .melt-on .reveal, .melt-on .letras .letra,
  .melt-on .split--sin-media .split__bloque--lead,
  .melt-on .split--sin-media .porque-titulo,
  .melt-on .split--sin-media .split__porque .split__bloque { transition: none; filter: none; transform: none; }
}


/* --- Ajustes 05/10/2026 (2) ----------------------------------------------- */
/* Grano como en los posteos: más grueso y con más contraste. Wet Sauna
   conserva el suyo (regla [data-theme="wetsauna"] .grain, más específica). */
.grain {
  opacity: 0.13;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='1.8' intercept='-0.4'/><feFuncG type='linear' slope='1.8' intercept='-0.4'/><feFuncB type='linear' slope='1.8' intercept='-0.4'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* El fondo de cada sección queda siempre visible; lo que entra animado es su
   contenido. Así la misión y el ticket (mismo lavanda) no muestran un corte
   oscuro entre las dos mientras cargan. */
.melt-on .reveal,
.melt-on .reveal.is-visible { opacity: 1; transform: none; filter: none; }
.melt-on .reveal > * {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(6px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
}
.melt-on .reveal.is-visible > * { opacity: 1; transform: none; filter: none; }
.melt-on .reveal.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.melt-on .reveal.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.melt-on .reveal.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.melt-on .split--sin-media.reveal > *,
.melt-on .letras.reveal > * { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .melt-on .reveal > * { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Hero: la frase en Hatton itálica y más pegada al logo. */
.hero-home .tagline {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.3vw, 1.875rem);
  color: var(--marfil);
  margin-top: calc(-1 * clamp(260px, 44vw, 560px) * 0.07);
  max-width: none;
}

/* Barra de navegación más finita. */
header.site-nav { padding-top: 5px; padding-bottom: 5px; }
.site-nav .logo--completo { --w: 126px; }
.site-nav nav a { font-size: 0.75rem; }

/* Footer: el derretido del hero, mucho más tenue. */
.hero-melt--footer { opacity: 0.85; }

/* ==========================================================================
   REVISIÓN UX (06/10/2026)
   ========================================================================== */

/* --- Hero: el derretido se funde con la sección siguiente, sin borde recto. */
.hero-home::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(80px, 12vw, 170px);
  background: linear-gradient(to bottom, rgba(43, 28, 39, 0), var(--violeta-900));
  pointer-events: none;
  z-index: 1;
}
.hero-home__in { z-index: 2; transform-origin: left center; will-change: transform, opacity; }

/* --- Logo que viaja: con el logo grande en pantalla, la barra no lo repite. */
.site-nav .wordmark-small { transition: opacity 0.45s ease, transform 0.45s ease; }
.logo-en-hero .site-nav .wordmark-small { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* --- Menos aire muerto ----------------------------------------------------- */
.split--sin-media .split__txt { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(64px, 8vw, 110px); }
.split__bloque--lead { margin-bottom: clamp(48px, 6vw, 84px); }
.split__porque { padding-top: clamp(40px, 5vw, 68px); }
.newsletter { padding-bottom: clamp(36px, 4vw, 56px); }

/* --- "Espacios cuidados": énfasis en la voz de la marca, no en mayúsculas. */
.enfasis {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 1.12em;
  color: var(--marfil);
  text-decoration: underline;
  text-decoration-color: var(--naranja);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* --- Ticket: muescas en los dos lados, a media altura. */
.ticket::before,
.ticket::after { top: 50%; bottom: auto; transform: translateY(-50%); }
.ticket::before { left: -15px; right: auto; }
.ticket::after  { left: auto; right: -15px; }

/* --- Sumate como marca: baja a berry; el naranja queda para lo principal. */
.marcas { background: #8A4F7A; }
.marcas h2,
.marcas p { color: var(--marfil); }
.marcas__flor { color: var(--naranja); opacity: 0.22; }

/* --- Contraste ------------------------------------------------------------- */
.letra .kicker { color: rgba(247, 233, 222, 0.86); }
body:not([data-theme="wetsauna"]) .footer-col span { color: rgba(247, 233, 222, 0.78); opacity: 1; }

/* --- Botones: relleno líquido al pasar el mouse. */
.btn,
form.mail-form button { position: relative; overflow: hidden; isolation: isolate; --liquido: #8A4F7A; }
.btn--naranja,
form.mail-form button { --liquido: var(--violeta-200); }
.btn::before,
form.mail-form button::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(100% + 48px);
  width: max(260%, 340px);
  aspect-ratio: 1;
  border-radius: 43%;
  background: var(--liquido);
  transform: translateX(-50%) rotate(0deg);
  transition: top 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: liquido-gira 6s linear infinite;
  pointer-events: none;
}
.btn:hover::before,
.btn:focus-visible::before,
form.mail-form button:hover:not(:disabled)::before,
form.mail-form button:focus-visible::before { top: -45%; }
@keyframes liquido-gira { to { transform: translateX(-50%) rotate(360deg); } }
[data-theme="wetsauna"] .btn::before,
[data-theme="wetsauna"] form.mail-form button::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::before, form.mail-form button::before { animation: none; transition: none; }
  .hero-home__in { transform: none !important; opacity: 1 !important; }
}

/* --- Móvil ----------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Área táctil de 44px en la barra sin hacerla más alta. */
  .site-nav nav a { position: relative; }
  .site-nav nav a::after { content: ""; position: absolute; inset: -14px -5px; }
  .split--sin-media .split__porque .split__bloque p { line-height: 1.7; }
  .split--sin-media .split__porque .split__bloque p + p { margin-top: 22px; }
}
@media (max-width: 560px) {
  /* El acrónimo sigue en una sola fila horizontal: columnas al ancho de su
     contenido, sin líneas divisorias, y textos que no se cortan. */
  .letras { padding: 30px 14px; }
  .letras__row { grid-template-columns: repeat(6, auto); justify-content: space-between; }
  .letra { padding: 8px 0; gap: 5px; }
  .letra + .letra { border-left: 0; }
  .letra b { font-size: 1.5rem; }
  .letra i { font-size: 0.625rem; line-height: 1.2; hyphens: manual; -webkit-hyphens: manual; }
  .letra .kicker { font-size: 0.5rem; letter-spacing: 0.06em; white-space: nowrap; hyphens: none; -webkit-hyphens: none; }
}

/* Ticket: recupera su inclinación y la elevación al pasar el mouse (la regla
   genérica del reveal le pisaba el transform). */
.melt-on .ticket-zona.is-visible > .ticket { transform: rotate(-1.2deg); }
.melt-on .ticket-zona.is-visible > .ticket:hover { transform: translateY(-6px) rotate(0deg); transition: transform 0.35s ease; }

/* ==========================================================================
   AJUSTES 05/10/2026 (3)
   ========================================================================== */

/* --- Hero: la frase deja Hatton (eran tres cursivas seguidas). Va en Whyte,
   chica, como una firma debajo del logo. */
.hero-home .tagline {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  letter-spacing: 0.01em;
  color: var(--tinta-suave);
  margin-top: calc(-1 * clamp(260px, 44vw, 560px) * 0.03);
}

/* --- Apertura: "Creando propuestas…". Sale de los posteos de IG: degradado
   violeta con brillo naranja, curvas de nivel que se mueven lento, una órbita
   con texto alrededor de la frase y la chispa de cuatro puntas. */
.apertura {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 80% at 8% 20%, rgba(106, 78, 140, 0.85), transparent 70%),
    radial-gradient(45% 70% at 92% 85%, rgba(255, 137, 46, 0.55), transparent 70%),
    var(--violeta-900);
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
  display: flex;
  justify-content: center;
  text-align: center;
}
.apertura__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Sin bordes rectos: arriba y abajo se funde con el violeta de las vecinas. */
.apertura__fondo::before,
.apertura__fondo::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 28%;
  z-index: 1;
}
.apertura__fondo::before { top: 0; background: linear-gradient(to bottom, var(--violeta-900), rgba(43, 28, 39, 0)); }
.apertura__fondo::after  { bottom: 0; background: linear-gradient(to top, var(--violeta-900), rgba(43, 28, 39, 0)); }
.apertura__topo { width: 100%; height: 100%; display: block; }
.apertura__anillos {
  fill: none;
  stroke: rgba(247, 233, 222, 0.1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: 880px 320px;
  animation: topo-deriva 40s ease-in-out infinite alternate;
}
@keyframes topo-deriva {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(-60px, 30px) rotate(14deg) scale(1.06); }
}
.apertura__in {
  position: relative;
  width: min(100%, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.apertura .split__lead {
  position: relative;
  font-size: clamp(1.5rem, 2.9vw, 2.375rem);
  line-height: 1.16;
  color: var(--marfil);
}
.apertura .split__lead em { font-style: italic; color: var(--naranja); }

/* El asterisco, como en la misión, pero vivo: gira lento. */
.apertura__sello {
  position: relative;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
}
.apertura__sello .flor { width: 30px; height: 30px; animation: asterisco-gira 18s linear infinite; }
@keyframes asterisco-gira { to { transform: rotate(360deg); } }

/* Chispas de fondo, a los costados de la frase. */
.apertura__chispa {
  position: absolute;
  right: -6%;
  top: 8%;
  width: clamp(16px, 2vw, 24px);
  height: clamp(16px, 2vw, 24px);
  color: var(--marfil);
  animation: chispa 3.2s ease-in-out infinite;
}
.apertura__chispa--2 {
  right: auto;
  left: -4%;
  top: auto;
  bottom: 4%;
  width: clamp(10px, 1.2vw, 15px);
  height: clamp(10px, 1.2vw, 15px);
  animation-delay: -1.6s;
}
@keyframes chispa {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(0.5) rotate(45deg); opacity: 0.45; }
}

/* Palabra por palabra (las arma hero-melt.js). */
.palabras-on .palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(3deg);
  filter: blur(6px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s ease;
  transition-delay: calc(var(--i) * 55ms + 0.15s);
}
.palabras-in .palabra { opacity: 1; transform: none; filter: none; }

@media (max-width: 560px) {
  .apertura { padding: 52px 20px 48px; }
  .apertura .split__lead { font-size: 1.4375rem; }
  .apertura__chispa { right: 0; top: 0; }
  .apertura__chispa--2 { left: 2px; bottom: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .apertura__anillos, .apertura__chispa, .apertura__sello .flor { animation: none; }
}
/* El "¿Por qué?" ahora abre su sección: sin línea ni aire de arriba de más. */
.split--sin-media .split__porque { border-top: 0; padding-top: 0; }

/* --- Celular --------------------------------------------------------------- */
@media (max-width: 560px) {
  /* La barra lleva el monograma F*, que no repite el logo grande del hero:
     no se esconde mientras el hero está en pantalla. */
  .logo-en-hero .site-nav .wordmark-small { opacity: 1; transform: none; pointer-events: auto; }

  /* "Intergeschlechtliche" en dos renglones (Interge- / schlechtliche), así la
     columna de la I mide lo mismo que las otras. */
  .letra--larga i { max-width: 6.3em; letter-spacing: -0.01em; }

  /* Footer corto: sin "Navegación" (está en la barra) ni títulos; todo en
     una línea centrada que parte sola. */
  .site-footer__in { padding-top: 40px; }
  .footer-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    padding-bottom: 32px;
  }
  .footer-col { display: contents; }
  .footer-col--nav,
  .footer-col h2,
  .footer-col span,
  .footer-col [aria-current="page"] { display: none; }
  .footer-col a { margin-bottom: 0; padding: 8px 0; font-size: 0.8125rem; }
  .footer-col a[href^="mailto:"] { flex-basis: 100%; text-align: center; text-transform: none; letter-spacing: 0.02em; }
  footer .legal { padding: 14px 0 22px; }
}

/* --- Apertura en lavanda (05/10/2026) ---------------------------------------
   Mismo fondo claro que la misión. Sobre lavanda el texto va en violeta y el
   naranja suelto no se lee: "espacios cuidados de encuentro" lleva un
   resaltado naranja de marcador, que se pinta cuando la frase termina de
   entrar. */
.apertura { background: var(--violeta-200); }
.apertura__fondo {
  background:
    radial-gradient(50% 70% at 10% 15%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(45% 70% at 90% 90%, rgba(255, 137, 46, 0.22), transparent 70%);
}
.apertura__fondo::before,
.apertura__fondo::after { display: none; }
.apertura__anillos { stroke: rgba(79, 54, 75, 0.08); }
.apertura .split__lead { color: var(--violeta-700); }
.apertura .split__lead em {
  color: var(--violeta-700);
  background-image: linear-gradient(rgba(255, 137, 46, 0.55), rgba(255, 137, 46, 0.55));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.38em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.08em;
}
/* Con la entrada palabra por palabra, el resaltado va en cada palabra y se
   dibuja de izquierda a derecha al final. */
.palabras-on .split__lead em { background: none; }
.palabras-on .split__lead em .palabra {
  background-image: linear-gradient(rgba(255, 137, 46, 0.55), rgba(255, 137, 46, 0.55));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.38em;
  /* Estira el resaltado sobre el espacio que sigue, para que no quede cortado
     entre palabra y palabra. */
  padding-right: 0.26em;
  margin-right: -0.26em;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s ease, background-size 0.6s ease;
  transition-delay: calc(var(--i) * 55ms + 0.15s), calc(var(--i) * 55ms + 0.15s), calc(var(--i) * 55ms + 0.15s), calc(var(--i) * 90ms + 1.2s);
}
.palabras-in .split__lead em .palabra { background-size: 100% 0.38em; }
.apertura__chispa { color: var(--violeta-700); }

/* --- Hero en pantallas grandes: la frase arranca donde arranca "CLUB" (la
   "l" de Flinta), no en la pata de la F, y gana tamaño. 0.188 es la distancia
   entre la F y "CLUB" medida sobre el logo, en proporción a su ancho. */
@media (min-width: 861px) {
  .hero-home .tagline {
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    padding-left: calc(clamp(260px, 44vw, 560px) * 0.188);
    margin-top: calc(-1 * clamp(260px, 44vw, 560px) * 0.06);
  }
}

/* --- Aviso de cookies. Lo arma analytics.js. Usa la capa semántica, así que
   en Wet Sauna sale en mármol y bordó sin reglas aparte. Los dos botones
   tienen el mismo tamaño a propósito: rechazar tiene que ser tan fácil como
   aceptar. Sobre el acento el texto va en el color de fondo (violeta sobre
   naranja, mármol sobre bordó). */
.cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--fondo);
  color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: 0 14px 40px rgba(20, 13, 18, 0.35);
  font-family: var(--font-sans);
}
.cookies__texto { flex: 1 1 260px; margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }
.cookies__botones { display: flex; gap: 10px; flex: 0 0 auto; }
.cookies__btn {
  min-width: 108px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--acento);
  background: transparent;
  color: var(--tinta);
  font: 500 0.875rem/1.2 var(--font-sans);
  cursor: pointer;
}
.cookies__btn--si { background: var(--acento); color: var(--fondo); }
.cookies__btn:focus-visible,
.cookies__link:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.cookies__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Sin footer (Wet Sauna "próximamente"): suelto en la esquina, discreto.
   Queda debajo del aviso (z-index menor) mientras el aviso está abierto. */
.cookies__link--suelto {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 90;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--tinta-tenue);
}
@media (max-width: 480px) {
  .cookies__botones { flex: 1 1 100%; }
  .cookies__btn { flex: 1 1 0; }
}