/* ==========================================================================
   Fenster Design
   1. Tipografías   2. Tokens   3. Base   4. Utilidades
   5. Header        6. Hero     7. Footer
   ========================================================================== */

/* 1. TIPOGRAFÍAS ---------------------------------------------------------- */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. TOKENS --------------------------------------------------------------- */

:root {
  /* Paleta de marca. No sustituir. */
  --navy: #0e293e;
  --crema: #fbf3e8;
  --cristal: #8fadc4;
  --rojo: #d93033;

  /* Derivados, todos dentro de la misma familia */
  --navy-90: #16354c;
  --navy-80: #24455d;
  --crema-sombra: #f1e7d9;
  --linea: rgba(14, 41, 62, 0.14);
  --linea-clara: rgba(251, 243, 232, 0.22);

  /* Contraste verificado:
     crema sobre navy .......... 13.1:1  AAA
     navy sobre crema .......... 13.1:1  AAA
     cristal sobre navy ......... 6.1:1  AA
     navy sobre cristal ......... 6.1:1  AA
     blanco sobre rojo .......... 4.8:1  AA
     crema sobre cristal ........ 2.1:1  NO USAR */

  --fuente-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala tipográfica: salto agresivo del h1 al cuerpo */
  --t-hero: clamp(2.9rem, 8.4vw, 7.5rem);
  --t-h2: clamp(2rem, 5vw, 4.25rem);
  --t-h3: clamp(1.35rem, 2.4vw, 1.9rem);
  --t-entrada: clamp(1.05rem, 1.6vw, 1.3rem);
  --t-texto: 1rem;
  --t-chico: 0.875rem;
  --t-etiqueta: 0.75rem;

  /* Sistema de 8px */
  --e1: 8px;   --e2: 16px;  --e3: 24px;  --e4: 32px;
  --e5: 48px;  --e6: 64px;  --e7: 96px;  --e8: 128px;
  --e9: 176px;

  --margen: clamp(16px, 5vw, 80px);
  --ancho: 1560px;

  /* Geometría redondeada: es lo que separa una web actual de una plantilla
     de 2015. Se aplica a TODA imagen y tarjeta del sitio. */
  --radio: clamp(14px, 1.5vw, 24px);
  --radio-grande: clamp(20px, 2.2vw, 34px);
  --radio-pastilla: 999px;

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.65, 0.05, 0.36, 1);
  --header-alto: 88px;
}

/* 3. BASE ----------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo al saltar por anclas */
  scroll-padding-top: var(--header-alto);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--navy);
  font-family: var(--fuente-texto);
  font-size: var(--t-texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Red de seguridad contra desbordes horizontales.
     'clip' y no 'hidden': hidden convierte al body en contenedor de scroll,
     lo que rompe position:sticky y confunde los eventos de scroll. */
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

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

:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--navy); color: var(--crema); }

.salta-al-contenido {
  position: absolute;
  left: var(--e2);
  top: -100px;
  z-index: 200;
  background: var(--navy);
  color: var(--crema);
  padding: var(--e2) var(--e3);
  font-size: var(--t-chico);
  transition: top 0.2s var(--curva);
}
.salta-al-contenido:focus { top: var(--e2); }

/* 4. UTILIDADES ----------------------------------------------------------- */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}

/* Pastilla: la etiqueta de sección va dentro de un contorno redondeado.
   Es un detalle chico que cambia por completo la lectura de la página. */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 9px var(--e3) 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
}
.pastilla--clara {
  border-color: var(--linea-clara);
  color: var(--crema);
  background: rgba(251, 243, 232, 0.07);
  backdrop-filter: blur(6px);
}
.pastilla i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rojo);
  flex-shrink: 0;
}

/* Cabecera de sección centrada, con mucho aire */
.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e3);
  margin-bottom: var(--e7);
}
.cabecera h2 { font-size: var(--t-h2); max-width: 18ch; }
.cabecera p {
  max-width: 54ch;
  font-size: var(--t-entrada);
  opacity: 0.74;
  line-height: 1.55;
}

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

/* Grano: textura muy sutil sobre los fondos planos.
   Sin mix-blend-mode a propósito: las mezclas se aíslan en cuanto el
   contenedor crea un contexto de apilado propio (z-index, transform,
   will-change) y el resultado se vuelve un bloque opaco. Opacidad baja
   con mezcla normal se ve igual y no falla nunca. */
.grano::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 58px;
  padding: 0 var(--e4);
  font-family: var(--fuente-texto);
  font-size: var(--t-chico);
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 0;
  border-radius: var(--radio-pastilla);
  cursor: pointer;
  transition: transform 0.25s var(--curva), background-color 0.25s var(--curva),
              color 0.25s var(--curva);
}

.boton--primario {
  background: var(--rojo);
  color: #fff; /* blanco puro: 4.8:1 sobre el rojo de marca. Crema no alcanza AA. */
}
.boton--primario:hover { transform: translateY(-2px); background: #c2292c; }

.boton--linea {
  background: transparent;
  color: var(--crema);
  border: 1px solid var(--linea-clara);
}
.boton--linea:hover { transform: translateY(-2px); border-color: var(--crema); }

.boton .flecha { transition: transform 0.25s var(--curva); }
.boton:hover .flecha { transform: translateX(4px); }

/* 5. HEADER --------------------------------------------------------------- */

.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-alto);
  display: flex;
  align-items: center;
  transition: height 0.35s var(--curva), background-color 0.35s var(--curva),
              box-shadow 0.35s var(--curva);
}

.encabezado::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0;
  transition: opacity 0.35s var(--curva);
}

/* Velo degradado bajo el header: el hero tiene cielo claro arriba y la
   navegación perdería contraste sin esto. */
.encabezado::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(14, 41, 62, 0.72) 0%,
    rgba(14, 41, 62, 0.34) 55%,
    rgba(14, 41, 62, 0) 100%);
  transition: opacity 0.35s var(--curva);
}
.encabezado.compacto::after { opacity: 0; }

.encabezado.compacto {
  height: 68px;
  box-shadow: 0 1px 0 var(--linea-clara);
}
.encabezado.compacto::before { opacity: 0.97; }

.encabezado .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  position: relative;
}

.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img {
  height: 38px;
  width: auto;
  transition: height 0.35s var(--curva);
}
.encabezado.compacto .marca img { height: 30px; }

.navegacion {
  display: flex;
  align-items: center;
  gap: clamp(var(--e3), 2.4vw, var(--e5));
}

.navegacion a {
  color: var(--crema);
  font-size: var(--t-chico);
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: var(--e1) 0;
}

.navegacion a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--curva);
}
.navegacion a:hover::after { transform: scaleX(1); transform-origin: left; }

.contacto-header {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.contacto-header a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  /* Área táctil mínima 44×44 */
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--e2);
  color: var(--crema);
  font-size: var(--t-chico);
  font-weight: 500;
  border: 1px solid var(--linea-clara);
  transition: background-color 0.25s var(--curva), border-color 0.25s var(--curva);
}
.contacto-header a:hover { background: rgba(251, 243, 232, 0.1); border-color: var(--crema); }
.contacto-header svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Botón de menú, solo móvil */
.boton-menu {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linea-clara);
  color: var(--crema);
  cursor: pointer;
}
.boton-menu span {
  display: block;
  width: 18px; height: 1px;
  background: currentColor;
  position: relative;
}
.boton-menu span::before,
.boton-menu span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--curva);
}
.boton-menu span::before { top: -6px; }
.boton-menu span::after { top: 6px; }

/* 6. HERO ----------------------------------------------------------------- */

/* La pista da recorrido de scroll extra para que el marco se transforme
   mientras sigue a la vista. En móvil no existe: el hero es normal. */
.hero { position: relative; }
.hero__pista { height: 100svh; }

.hero__marco {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  /* --p va de 0 a 1 según el scroll. Lo escribe main.js. */
  --p: 0;
}

/* La caja es lo que se encoge y se redondea, dejando ver el crema de fondo.
   Se anima por 'inset', no por 'transform': un transform sobre el elemento
   sticky lo promovía a capa propia y la foto no se pintaba en el primer
   render. El texto queda fuera de la caja, así que no se encoge con ella. */
.hero__caja {
  position: absolute;
  inset: calc(var(--p) * clamp(18px, 3.2vw, 52px));
  z-index: 0;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
  border-radius: calc(var(--p) * var(--radio-grande));
}

@media (min-width: 861px) {
  .hero__pista { height: 178svh; }
  .hero__marco { position: sticky; top: 0; }
}

/* Sin z-index negativos: al promover el marco a capa propia (will-change),
   los hijos con z-index negativo se pintan detrás de su fondo y la foto
   desaparece. Todo va en positivo. */
.hero__medio {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__medio img,
.hero__medio video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Ken Burns muy sutil: 1 → 1.06 en 20s, una sola pasada */
.motion .hero__medio img,
.motion .hero__medio video {
  animation: kenburns 20s var(--curva-suave) forwards;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Velo navy: 58% arriba y 74% abajo, para que el texto siempre gane */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(14, 41, 62, 0.62) 0%,
      rgba(14, 41, 62, 0.50) 34%,
      rgba(14, 41, 62, 0.68) 72%,
      rgba(14, 41, 62, 0.86) 100%);
}

.hero .envoltura {
  position: relative;
  z-index: 2;
  padding-block: var(--e7) clamp(var(--e5), 9vh, var(--e8));
  width: 100%;
  /* El texto se va pronto (queda en cero cerca de --p 0.42) para no quedarse
     fantasmeando encima de la foto mientras la caja se encoge. */
  opacity: calc(1 - var(--p) * 2.4);
  transform: translateY(calc(var(--p) * -40px));
}

.hero__marco.vacio .envoltura,
.hero__marco.vacio .hero__bajar { pointer-events: none; }

.hero__etiqueta { margin-bottom: var(--e4); }

.hero h1 {
  color: var(--crema);
  font-size: var(--t-hero);
  max-width: 16ch;
  margin-bottom: var(--e4);
}

/* Cada línea entra desde su propia máscara */
.linea { display: block; overflow: hidden; }
.linea > span { display: block; }

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
  max-width: 1100px;
}

.hero__texto {
  color: var(--crema);
  font-size: var(--t-entrada);
  line-height: 1.5;
  max-width: 44ch;
  opacity: 0.94;
}

.hero__bajar {
  position: absolute;
  z-index: 2;
  right: var(--margen);
  bottom: clamp(var(--e4), 6vh, var(--e6));
  display: flex;
  align-items: center;
  gap: var(--e2);
  color: var(--crema);
  opacity: calc(0.72 - var(--p) * 1.8);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__bajar i {
  display: block;
  width: 1px; height: 54px;
  background: currentColor;
  transform-origin: top;
}
.motion .hero__bajar i { animation: baja 2.4s var(--curva-suave) infinite; }
@keyframes baja {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 7. DECLARACIÓN ----------------------------------------------------------
   Frase grande que se resuelve palabra por palabra conforme entra en pantalla.
   Sin JS todas las palabras están ya en navy: se lee completa igual. */

.declaracion {
  position: relative;
  background: var(--crema);
  padding-block: clamp(var(--e7), 18vh, var(--e9));
  z-index: 1;
}

.declaracion__texto {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.9rem, 5.4vw, 4.4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 19ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.declaracion__texto span {
  color: var(--navy);
  transition: color 0.45s var(--curva);
}

/* Solo con movimiento permitido arrancan apagadas */
.motion .declaracion__texto span.apagada { color: var(--cristal); }

.declaracion__pie {
  display: flex;
  justify-content: center;
  margin-top: var(--e6);
}

/* 8. SERVICIOS ------------------------------------------------------------ */

.servicios {
  position: relative;
  z-index: 1;
  background: var(--crema);
  padding-block: clamp(var(--e7), 12vh, var(--e9));
}

.rutas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--e4), 4vw, var(--e7));
}

.ruta {
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  padding: clamp(var(--e4), 3.4vw, var(--e6));
  background: rgba(255, 255, 255, 0.4);
  transition: border-color 0.3s var(--curva), transform 0.3s var(--curva);
}
.ruta:hover { border-color: var(--navy); transform: translateY(-4px); }

.ruta__num {
  font-family: var(--fuente-titulo);
  font-size: var(--t-chico);
  color: var(--cristal);
  margin-bottom: var(--e4);
}

.ruta h3 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: var(--e1);
}

.ruta__intro {
  font-size: var(--t-entrada);
  color: var(--navy);
  opacity: 0.66;
  margin-bottom: var(--e4);
}

.ruta__lista { list-style: none; margin: 0; padding: 0; }
.ruta__lista li {
  position: relative;
  padding: var(--e2) 0 var(--e2) var(--e4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-chico);
  line-height: 1.5;
}
.ruta__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 23px;
  width: 14px; height: 1px;
  background: var(--cristal);
}

.extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: center;
  list-style: none;
  margin: var(--e6) 0 0;
  padding: 0;
}
.extras li span {
  display: inline-block;
  padding: 12px var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-size: var(--t-chico);
}

/* 9. PORTAFOLIO ------------------------------------------------------------ */

.portafolio {
  position: relative;
  z-index: 1;
  background: var(--crema-sombra);
  padding-block: clamp(var(--e7), 12vh, var(--e9));
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  justify-content: center;
  margin-bottom: var(--e6);
}

.filtro {
  min-height: 44px;
  padding: 0 var(--e3);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-family: var(--fuente-texto);
  font-size: var(--t-chico);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva),
              border-color 0.25s var(--curva);
}
.filtro:hover { border-color: var(--navy); }
.filtro.activo { background: var(--navy); color: var(--crema); border-color: var(--navy); }

.rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--e4), 3.6vw, var(--e6));
}

/* Columna flexible para que las etiquetas queden pegadas abajo y las fichas
   de un mismo renglón terminen a la misma altura, aunque el texto varíe. */
.ficha { margin: 0; display: flex; flex-direction: column; }
.ficha[hidden] { display: none; }

.ficha__foto {
  position: relative;
  display: block;
  /* Todas las portadas comparten proporción: así los títulos de las fichas
     arrancan a la misma altura y la rejilla se lee ordenada. La foto completa,
     sin recortar, sigue estando en el visor. */
  aspect-ratio: 3 / 2;
  border-radius: var(--radio-grande);
  overflow: hidden;
  /* Miniatura de 20 px incrustada: se ve borrosa mientras carga la foto real
     y desaparece sola cuando esta la tapa. No necesita JavaScript. */
  background-color: var(--cristal);
  background-size: cover;
  background-position: center;
}
.ficha__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--curva);
}
.ficha__foto:hover img { transform: scale(1.035); }

.ficha__contador {
  position: absolute;
  left: var(--e3);
  bottom: var(--e3);
  padding: 8px var(--e2);
  border-radius: var(--radio-pastilla);
  background: rgba(14, 41, 62, 0.82);
  color: var(--crema);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}
.ficha__foto:hover .ficha__contador,
.ficha__foto:focus-visible .ficha__contador { opacity: 1; transform: none; }

.ficha__pie {
  padding-top: var(--e3);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ficha__pie h3 { font-size: var(--t-h3); }

.ficha__lugar {
  font-size: var(--t-chico);
  color: var(--navy);
  opacity: 0.6;
  margin-top: 2px;
}

.ficha__resumen {
  font-size: var(--t-chico);
  line-height: 1.55;
  margin-top: var(--e2);
  max-width: 46ch;
  opacity: 0.86;
}

.ficha__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  margin-top: auto;   /* empuja las etiquetas al pie de la ficha */
  padding-top: var(--e3);
}
.ficha__tags li {
  padding: 6px var(--e2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ficha__tags .es-curso { border-color: var(--rojo); color: var(--rojo); }

.sin-resultados {
  text-align: center;
  margin-top: var(--e6);
  opacity: 0.6;
}

/* 10. PROCESO -------------------------------------------------------------- */

.proceso {
  position: relative;
  z-index: 1;
  background: var(--navy);
  color: var(--crema);
  padding-block: clamp(var(--e7), 14vh, var(--e9));
  overflow: hidden;
}
.proceso .cabecera h2 { color: var(--crema); }

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e5);
  counter-reset: paso;
}

.paso { border-top: 1px solid var(--linea-clara); padding-top: var(--e3); }

.paso__num {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--cristal);
  margin-bottom: var(--e3);
}

.paso h3 {
  font-family: var(--fuente-texto);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--e1);
}

.paso p { font-size: var(--t-chico); line-height: 1.6; opacity: 0.78; }

/* 11. CONTACTO ------------------------------------------------------------- */

.contacto {
  position: relative;
  z-index: 1;
  background: var(--crema);
  padding-block: clamp(var(--e7), 12vh, var(--e9));
}

.contacto__cuerpo {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--e5), 5vw, var(--e7));
  align-items: start;
}

.canales { display: flex; flex-direction: column; gap: var(--e2); }

.persona {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--e2);
}
.persona[hidden] { display: none; }
.persona__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  line-height: 1.1;
}
.persona__puesto {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cristal);
}

.canal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  justify-content: center;
  padding: var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.canal:hover { border-color: var(--navy); transform: translateX(4px); }

.canal__etiqueta {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cristal);
}
.canal__valor { font-size: 1.05rem; font-weight: 500; }

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
}
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.campo input,
.campo select,
.campo textarea {
  min-height: 52px;
  padding: var(--e2);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color 0.2s var(--curva);
}
.campo textarea { min-height: auto; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--navy); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--rojo); }

.campo__error { font-size: var(--t-chico); color: var(--rojo); }

.formulario__pie {
  flex-direction: row;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.formulario__nota { font-size: var(--t-chico); opacity: 0.75; }

/* 12. VISOR DE FOTOS ------------------------------------------------------- */

.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e2);
}
.visor[hidden] { display: none; }

.visor__fondo { position: absolute; inset: 0; background: rgba(8, 24, 37, 0.94); }

.visor__caja {
  position: relative;
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.visor__barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: var(--crema);
}
.visor__titulo { font-family: var(--fuente-titulo); font-size: 1.2rem; }
.visor__cuenta {
  margin-left: auto;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.visor__cerrar,
.visor__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: rgba(251, 243, 232, 0.1);
  border: 1px solid var(--linea-clara);
  border-radius: 50%;
  color: var(--crema);
  cursor: pointer;
  transition: background-color 0.2s var(--curva);
}
.visor__cerrar:hover, .visor__nav:hover { background: rgba(251, 243, 232, 0.24); }

.visor__figura {
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.visor__figura img {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: var(--radio);
  background: var(--navy-90);
}
.visor__figura figcaption {
  color: var(--crema);
  font-size: var(--t-chico);
  opacity: 0.74;
  text-align: center;
}

.visor__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
}
.visor__nav--prev { left: calc(var(--e2) * -1); }
.visor__nav--next { right: calc(var(--e2) * -1); }

/* 13. FOOTER --------------------------------------------------------------- */

.pie {
  position: relative;
  background: var(--navy);
  color: var(--crema);
  padding-block: var(--e7) var(--e4);
  overflow: hidden;
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--e6) var(--e5);
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--linea-clara);
}

.pie__marca img { height: 46px; width: auto; margin-bottom: var(--e3); }

.pie__lema {
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  line-height: 1.22;
  max-width: 22ch;
  color: var(--crema);
}

.pie h3 {
  font-family: var(--fuente-texto);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cristal);
  margin-bottom: var(--e3);
}

.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--e1); }

.pie li a,
.pie__dato {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--t-chico);
  color: var(--crema);
  opacity: 0.86;
  transition: opacity 0.2s var(--curva), transform 0.2s var(--curva);
}
.pie li a:hover { opacity: 1; transform: translateX(3px); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--e4);
  font-size: var(--t-etiqueta);
  opacity: 0.66;
}

.redes {
  display: flex;
  gap: var(--e1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linea-clara);
  border-radius: 50%;
  color: var(--crema);
  transition: background-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.redes a:hover { background: rgba(251, 243, 232, 0.12); transform: translateY(-2px); }
.redes a[hidden] { display: none; }

/* WhatsApp flotante: persistente y sin tapar contenido */
.wa-flotante {
  position: fixed;
  right: var(--e2);
  bottom: var(--e2);
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--crema);
  box-shadow: 0 6px 24px rgba(14, 41, 62, 0.34);
  transition: transform 0.25s var(--curva);
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { width: 26px; height: 26px; }

/* 8. RESPONSIVE ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-alto: 72px; }

  .navegacion {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e3);
    padding: var(--e7) var(--margen);
    background: var(--navy);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.45s var(--curva), visibility 0.45s;
  }
  .navegacion.abierto { transform: translateY(0); visibility: visible; }
  .navegacion a { font-size: clamp(1.5rem, 7vw, 2.25rem); font-family: var(--fuente-titulo); }

  /* El logo se queda encima del menú abierto, no detrás. */
  .marca { position: relative; z-index: 2; }

  .boton-menu { display: inline-flex; position: relative; z-index: 2; }
  .boton-menu[aria-expanded="true"] span { background: transparent; }
  .boton-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .boton-menu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

  /* En móvil el header solo lleva el teléfono; WhatsApp va en el botón flotante */
  .contacto-header .solo-escritorio { display: none; }

  .wa-flotante { display: flex; }

  /* El pie deja aire para no quedar bajo el botón flotante */
  .pie { padding-bottom: var(--e7); }

  /* En móvil el hero no se transforma: sin recorrido extra ni escalado. */
  .hero__marco {
    --p: 0 !important;
    /* Crece si el contenido no cabe, en vez de recortarlo. */
    height: auto;
    min-height: 100svh;
  }
  .hero__pista { height: auto; }
  .hero__caja { inset: 0; border-radius: 0; }
  .hero .envoltura { opacity: 1; }

  .hero__bajar { display: none; }
  .hero__pie { gap: var(--e3); }
  .hero__pie .boton { width: 100%; justify-content: center; }

  .rutas { grid-template-columns: 1fr; }
  .rejilla { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; gap: var(--e4); }
  .contacto__cuerpo { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }

  /* Los filtros se deslizan en vez de apilarse en cuatro renglones */
  .filtros {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--margen) * -1);
    padding-inline: var(--margen);
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex-shrink: 0; }

  .visor__nav--prev { left: 0; }
  .visor__nav--next { right: 0; }
  .visor__figura img { max-height: 62vh; }
}

@media (max-width: 420px) {
  .pie__rejilla { grid-template-columns: 1fr; gap: var(--e5); }
  .pasos { grid-template-columns: 1fr; }
}

/* Ventanas muy bajas (portátil en horizontal, navegador con panel abierto):
   sin esto el titular no cabe y la etiqueta se mete debajo del header. */
@media (max-height: 620px) {
  .hero .envoltura { padding-block: var(--e6) var(--e4); }
  .hero h1 { font-size: clamp(2.2rem, 7vh, 4rem); margin-bottom: var(--e3); }
  .hero__etiqueta { margin-bottom: var(--e3); }
}

/* 9. MOVIMIENTO REDUCIDO --------------------------------------------------
   Desactiva todo el movimiento, sin excepciones. El contenido nunca depende
   de una animación para ser visible: el estado por defecto ya es visible y
   solo la clase .motion (que añade el JS) introduce el movimiento. */

@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;
    scroll-behavior: auto !important;
  }
}