/* ==========================================================================
   FILMES JÍBARO LLC — hoja de estilos única
   Sistema de diseño en variables CSS. Nada hardcodeado fuera de :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color --------------------------------------------------------------- */
  /* El fondo no es un negro neutro: es el granate de marca desaturado y
     bajado de luminosidad, para que todo el sitio viva dentro de la familia
     cromática del logo. */
  --color-fondo:        #0E0B0B;
  --color-superficie:   #191313;
  --color-superficie-2: #241C1C;
  --color-marca:        #863232;  /* SOLO relleno. Contraste 2.35:1 -> nunca texto */
  --color-marca-claro:  #C85B58;  /* Texto y enlaces. Contraste 4.75:1 -> AA */
  --color-texto:        #F2EDE9;  /* 16.86:1 */
  --color-texto-tenue:  #A39A97;  /* 7.12:1 */
  --color-borde:        rgba(242, 237, 233, 0.14);
  --color-borde-fuerte: rgba(242, 237, 233, 0.28);
  --color-velo:         rgba(14, 11, 11, 0.72);

  /* Tipografía ---------------------------------------------------------- */
  /* Una sola familia variable. El logo es una grotesca en dos anchos
     (FILMES normal, JÍBARO ultracondensada); el sitio hace lo mismo. */
  --fuente: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ancho-display: 62;   /* eje wdth mínimo: la condensada del logo */
  --ancho-texto: 100;

  --txt-xs:   clamp(0.75rem,  0.73rem + 0.10vw, 0.8125rem);
  --txt-sm:   clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --txt-base: clamp(1rem,     0.96rem + 0.20vw, 1.125rem);
  --txt-md:   clamp(1.125rem, 1.05rem + 0.36vw, 1.4375rem);
  --txt-lg:   clamp(1.5rem,   1.29rem + 1.05vw, 2.25rem);
  --txt-xl:   clamp(2.25rem,  1.59rem + 3.30vw, 4.5rem);
  --txt-2xl:  clamp(3.25rem,  1.35rem + 9.50vw, 9rem);
  --txt-hero: clamp(3.75rem,  0.90rem + 14.25vw, 13rem);

  --interlineado-apretado: 0.86;
  --interlineado-titulo: 1.04;
  --interlineado-texto: 1.62;

  /* Espacio — escala fluida ---------------------------------------------- */
  --esp-3xs: 0.25rem;
  --esp-2xs: 0.5rem;
  --esp-xs:  0.75rem;
  --esp-sm:  1rem;
  --esp-md:  1.5rem;
  --esp-lg:  2.5rem;
  --esp-xl:  clamp(3rem, 2rem + 5vw, 6rem);
  --esp-2xl: clamp(4.5rem, 2.5rem + 9vw, 10rem);
  --esp-3xl: clamp(6rem, 3rem + 14vw, 15rem);

  /* Retícula ------------------------------------------------------------- */
  --ancho-max: 82rem;
  --ancho-lectura: 62ch;   /* < 80 caracteres */
  --margen-lateral: clamp(1.25rem, 0.5rem + 4vw, 5rem);

  /* Movimiento ----------------------------------------------------------- */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-salida: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-rapida: 200ms;
  --dur-media: 380ms;
  --dur-lenta: 600ms;

  --radio: 2px;   /* casi recto: el logo no tiene una sola esquina redonda */
  --nav-alto: 4.5rem;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--txt-base);
  font-variation-settings: "wght" 400, "wdth" var(--ancho-texto);
  line-height: var(--interlineado-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grano de película. Un único SVG en línea, sin petición de red, sobre todo
   el documento. Es lo que impide que los negros planos se vean digitales. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

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

a { color: var(--color-marca-claro); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-marca-claro);
  outline-offset: 3px;
}

::selection { background: var(--color-marca); color: var(--color-texto); }

.salta-al-contenido {
  position: absolute;
  left: var(--esp-sm);
  top: -100%;
  z-index: 200;
  padding: var(--esp-2xs) var(--esp-sm);
  background: var(--color-marca);
  color: var(--color-texto);
  transition: top var(--dur-rapida) var(--curva);
}
.salta-al-contenido:focus { top: var(--esp-sm); }

.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;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-variation-settings: "wght" 900, "wdth" var(--ancho-display);
  line-height: var(--interlineado-apretado);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  word-spacing: 0.05em;   /* a wdth 62 los espacios se cierran y las palabras se pegan */
}

.display-hero { font-size: var(--txt-hero); }
.display-xl   { font-size: var(--txt-2xl); }
.display-lg   { font-size: var(--txt-xl); }
.display-md   { font-size: var(--txt-lg); line-height: var(--interlineado-titulo); }

/* Texto corrido: vuelve al ancho normal y al peso de lectura */
p, li, dd, dt, figcaption, label, input, textarea, select, button {
  font-variation-settings: "wght" 400, "wdth" var(--ancho-texto);
}

p { margin: 0 0 var(--esp-sm); max-width: var(--ancho-lectura); }
p:last-child { margin-bottom: 0; }

.entradilla {
  font-size: var(--txt-md);
  color: var(--color-texto-tenue);
  line-height: 1.5;
  max-width: 48ch;
}

.dato {
  font-size: var(--txt-sm);
  color: var(--color-texto-tenue);
  font-variation-settings: "wght" 500, "wdth" 88;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   4. ESTRUCTURA
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion { padding-block: var(--esp-2xl); }
.seccion--ancha { padding-block: var(--esp-3xl); }
.seccion--superficie { background: var(--color-superficie); }

/* El título de sección sangra hasta el borde izquierdo de la pantalla y se
   corta: el gesto de escala de la referencia, sin copiarle nada. */
.titulo-seccion {
  margin-bottom: var(--esp-xl);
  color: var(--color-texto);
}
.titulo-seccion .apunte {
  display: block;
  margin-top: var(--esp-md);
  font-size: var(--txt-md);
  font-variation-settings: "wght" 400, "wdth" var(--ancho-texto);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  /* Hereda del h1: hay que devolverlo a valores de texto corrido o los
     espacios entre palabras se abren como si estuviera justificado. */
  word-spacing: normal;
  text-wrap: pretty;
  color: var(--color-texto-tenue);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   5. NAVEGACIÓN
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-media) var(--curva),
              border-color var(--dur-media) var(--curva),
              backdrop-filter var(--dur-media) var(--curva);
}
.nav.es-solida {
  background: var(--color-velo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-borde);
}
.nav__interior {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
}
.nav__logo { display: block; flex-shrink: 0; }
.nav__logo img { width: clamp(7.5rem, 11vw, 10.5rem); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__enlace {
  position: relative;
  display: inline-block;
  padding-block: var(--esp-2xs);
  color: var(--color-texto);
  font-size: var(--txt-sm);
  font-variation-settings: "wght" 600, "wdth" 88;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* El subrayado se abre desde la izquierda, como un filo entrando */
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-marca-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--curva);
}
.nav__enlace:hover::after,
.nav__enlace:focus-visible::after,
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); }
.nav__enlace[aria-current="page"] { color: var(--color-marca-claro); }

.nav__boton {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio);
  color: var(--color-texto);
  cursor: pointer;
}
.nav__boton > span:first-child,
.nav__boton > span:first-child::before,
.nav__boton > span:first-child::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform var(--dur-media) var(--curva), opacity var(--dur-rapida);
}
.nav__boton > span:first-child { margin-inline: auto; position: relative; }
.nav__boton > span:first-child::before,
.nav__boton > span:first-child::after { content: ""; position: absolute; left: 0; }
.nav__boton > span:first-child::before { top: -6px; }
.nav__boton > span:first-child::after  { top: 6px; }
.nav__boton[aria-expanded="true"] > span:first-child { background: transparent; }
.nav__boton[aria-expanded="true"] > span:first-child::before { transform: translateY(6px) rotate(45deg); }
.nav__boton[aria-expanded="true"] > span:first-child::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav__boton { display: grid; place-items: center; }
  /* El logo y el botón se pintan por encima del panel desplegable. Sin esto,
     el panel cerrado asoma por debajo del borde y tapa el logotipo. */
  .nav__logo, .nav__boton { position: relative; z-index: 1; }
  .nav__menu {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: calc(var(--nav-alto) + var(--esp-sm)) var(--margen-lateral) var(--esp-lg);
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    transform: translateY(-100%);
    transition: transform var(--dur-media) var(--curva-salida);
  }
  .nav__menu.esta-abierto { transform: translateY(0); }
  .nav__menu li { width: 100%; border-top: 1px solid var(--color-borde); }
  .nav__enlace { display: block; width: 100%; padding-block: var(--esp-sm); font-size: var(--txt-md); }
  .nav__enlace::after { display: none; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-alto) + var(--esp-lg)) var(--esp-xl);
  overflow: hidden;
  isolation: isolate;
}

.hero__medio {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__medio img,
.hero__medio video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Tratamiento de imagen: se apaga el color y se tiñe hacia el granate,
     para que ninguna foto compita con el único acento del sistema. */
  filter: grayscale(0.55) contrast(1.14) brightness(0.62);
}
/* Viñeteo + degradado inferior: sostiene el texto sin caja ni sombra */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 85% at 50% 32%, transparent 28%, rgba(14,11,11,0.75) 100%),
    linear-gradient(to top, var(--color-fondo) 2%, rgba(14,11,11,0.35) 46%, rgba(14,11,11,0.55) 100%);
}

/* Marca de agua: el machete a sangre por el borde derecho. Es el único
   momento en que el sitio se permite un gesto grande. */
.hero__machete {
  position: absolute;
  right: var(--margen-lateral);
  bottom: 0;
  z-index: -1;
  height: min(76svh, 44rem);
  width: auto;
  opacity: 0.2;
  pointer-events: none;
}
/* En móvil el machete ocupaba media pantalla y competía con el titular.
   Se reduce y se retira al fondo. */
@media (max-width: 768px) {
  .hero__machete { height: 38svh; right: -0.5rem; opacity: 0.13; }
}

.hero__contenido { position: relative; width: 100%; }

.hero__titulo {
  font-size: var(--txt-hero);
  max-width: 14ch;
}
.hero__titulo .linea { display: block; overflow: hidden; }
.hero__titulo .linea > span { display: block; }

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-md);
  margin-top: var(--esp-lg);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde);
}
.hero__lema {
  max-width: 40ch;
  margin: 0;
  color: var(--color-texto-tenue);
  font-size: var(--txt-md);
  line-height: 1.45;
}

.hero__baja {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  color: var(--color-texto-tenue);
  font-size: var(--txt-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 88;
}
.hero__baja::after {
  content: "";
  width: 1px; height: 2.5rem;
  background: linear-gradient(to bottom, var(--color-marca-claro), transparent);
  animation: desliza 2.4s var(--curva) infinite;
}
@keyframes desliza {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. BOTONES
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--color-marca);
  border-radius: var(--radio);
  background: var(--color-marca);
  color: var(--color-texto);
  font-size: var(--txt-sm);
  font-variation-settings: "wght" 700, "wdth" 88;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-media) var(--curva),
              border-color var(--dur-media) var(--curva),
              color var(--dur-media) var(--curva);
}
.boton:hover, .boton:focus-visible {
  background: transparent;
  color: var(--color-marca-claro);
  border-color: var(--color-marca-claro);
}
.boton--fantasma {
  background: transparent;
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto);
}
.boton--fantasma:hover, .boton--fantasma:focus-visible {
  border-color: var(--color-marca-claro);
  color: var(--color-marca-claro);
}
.boton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   8. REEL / VÍDEO EMBEBIDO
   -------------------------------------------------------------------------- */
.reel__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  overflow: hidden;
}
.reel__marco iframe { width: 100%; height: 100%; border: 0; }

/* Portada con clic: el iframe no se carga hasta que el usuario lo pide.
   Ahorra ~700 KB y varios puntos de Lighthouse en móvil. */
.reel__portada {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--esp-sm);
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  cursor: pointer;
}
.reel__portada img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.55);
  transition: filter var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
}
.reel__portada:hover img, .reel__portada:focus-visible img {
  filter: grayscale(0) brightness(0.72);
  transform: scale(1.03);
}
.reel__play {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4rem, 8vw, 6rem);
  aspect-ratio: 1;
  border: 1px solid var(--color-texto);
  border-radius: 50%;
  background: var(--color-velo);
  transition: background var(--dur-media) var(--curva), border-color var(--dur-media) var(--curva);
}
.reel__portada:hover .reel__play { background: var(--color-marca); border-color: var(--color-marca); }
.reel__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 14px solid currentColor;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.reel__etiqueta {
  position: relative;
  font-size: var(--txt-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 88;
}

/* --------------------------------------------------------------------------
   9. PROYECTOS
   -------------------------------------------------------------------------- */
.rejilla-proyectos {
  display: grid;
  gap: var(--esp-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.proyecto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  overflow: hidden;
  transition: border-color var(--dur-media) var(--curva);
}
/* Sin esto el filtro no oculta nada: display:flex gana al [hidden] del
   navegador, que solo declara display:none. */
.proyecto[hidden] { display: none; }
.proyecto:hover, .proyecto:focus-within { border-color: var(--color-borde-fuerte); }

.proyecto__medio {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-superficie-2);
}
.proyecto__medio img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) contrast(1.1) brightness(0.72);
  transform: scale(1.01);
  transition: filter var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
}
.proyecto:hover .proyecto__medio img,
.proyecto:focus-within .proyecto__medio img {
  filter: grayscale(0) contrast(1) brightness(0.92);
  transform: scale(1.05);
}
.proyecto__medio--vacio {
  display: grid;
  place-items: center;
  color: var(--color-marca);
  opacity: 0.35;
}
.proyecto__medio--vacio svg { height: 46%; width: auto; }

.proyecto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
  padding: var(--esp-md);
  flex: 1;
}
.proyecto__titulo {
  font-size: var(--txt-lg);
  font-variation-settings: "wght" 800, "wdth" 70;
}
.proyecto__titulo a { color: inherit; }
/* Toda la tarjeta es clicable sin anidar enlaces ni romper el teclado */
.proyecto__titulo a::before { content: ""; position: absolute; inset: 0; }

.proyecto__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs) var(--esp-sm);
  color: var(--color-texto-tenue);
  font-size: var(--txt-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 88;
}
.proyecto__sinopsis {
  margin: var(--esp-2xs) 0 0;
  color: var(--color-texto-tenue);
  font-size: var(--txt-sm);
  line-height: 1.55;
}

/* Filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs);
  margin-bottom: var(--esp-lg);
  padding: 0;
  list-style: none;
}
.filtro {
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto-tenue);
  font-size: var(--txt-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 88;
  cursor: pointer;
  transition: color var(--dur-rapida) var(--curva),
              border-color var(--dur-rapida) var(--curva),
              background var(--dur-rapida) var(--curva);
}
.filtro:hover { color: var(--color-texto); border-color: var(--color-borde-fuerte); }
.filtro[aria-pressed="true"] {
  background: var(--color-marca);
  border-color: var(--color-marca);
  color: var(--color-texto);
}

/* Ficha individual */
.ficha__cabecera { padding-block: calc(var(--nav-alto) + var(--esp-xl)) var(--esp-lg); }
.ficha__titulo { font-size: var(--txt-2xl); }
.ficha__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--esp-xs) var(--esp-md);
  margin-top: var(--esp-md);
}
.ficha__cuerpo {
  display: grid;
  gap: var(--esp-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .ficha__cuerpo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.ficha__creditos { list-style: none; margin: 0; padding: 0; }
.ficha__creditos li {
  display: flex; flex-wrap: wrap; gap: var(--esp-2xs) var(--esp-sm);
  padding-block: var(--esp-xs);
  border-top: 1px solid var(--color-borde);
  font-size: var(--txt-sm);
}
.ficha__creditos li:last-child { border-bottom: 1px solid var(--color-borde); }
.ficha__creditos dt, .ficha__creditos .rol {
  min-width: 11ch;
  color: var(--color-texto-tenue);
  text-transform: uppercase;
  font-size: var(--txt-xs);
  letter-spacing: 0.08em;
  font-variation-settings: "wght" 600, "wdth" 88;
}

.laureles {
  display: flex; flex-wrap: wrap; gap: var(--esp-md);
  margin: 0; padding: 0; list-style: none;
}
.laureles li {
  padding: var(--esp-xs) var(--esp-sm);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: var(--txt-xs);
  color: var(--color-texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-variation-settings: "wght" 600, "wdth" 88;
}

/* Las modalidades de cada servicio son información, no botones: sin caja,
   marcadas con un filo granate a la izquierda. */
.modalidades {
  display: flex; flex-wrap: wrap;
  gap: var(--esp-2xs) var(--esp-md);
  margin: var(--esp-md) 0 0; padding: 0;
  list-style: none;
}
.modalidades li {
  padding-left: var(--esp-2xs);
  border-left: 2px solid var(--color-marca);
  color: var(--color-texto-tenue);
  font-size: var(--txt-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600, "wdth" 88;
}

.galeria {
  display: grid;
  gap: var(--esp-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.galeria img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.82);
  transition: filter var(--dur-media) var(--curva);
}
.galeria img:hover { filter: grayscale(0) brightness(1); }

/* --------------------------------------------------------------------------
   10. SERVICIOS
   -------------------------------------------------------------------------- */
/* Lista, no tarjetas: son cinco líneas de negocio, no cinco productos. */
.servicios { margin: 0; padding: 0; list-style: none; }
.servicio {
  display: grid;
  gap: var(--esp-2xs) var(--esp-lg);
  padding-block: var(--esp-lg);
  border-top: 1px solid var(--color-borde);
  transition: border-color var(--dur-media) var(--curva);
}
.servicio:last-child { border-bottom: 1px solid var(--color-borde); }
.servicio:hover { border-top-color: var(--color-marca); }
@media (min-width: 768px) {
  .servicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}
.servicio__titulo {
  font-size: var(--txt-lg);
  font-variation-settings: "wght" 800, "wdth" 70;
}
.servicio__texto { color: var(--color-texto-tenue); margin: 0; }

/* --------------------------------------------------------------------------
   11. FORMULARIO
   -------------------------------------------------------------------------- */
.formulario { display: grid; gap: var(--esp-md); max-width: 38rem; }
.campo { display: grid; gap: var(--esp-3xs); }
.campo label {
  font-size: var(--txt-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  font-variation-settings: "wght" 600, "wdth" 88;
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  font-family: inherit;
  font-size: var(--txt-base);
  transition: border-color var(--dur-rapida) var(--curva);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--color-marca-claro);
  outline-offset: 1px;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--color-marca-claro);
}
.campo__error {
  min-height: 1.1em;
  font-size: var(--txt-xs);
  color: var(--color-marca-claro);
}
/* Trampa antispam: invisible para personas, rellenable por robots */
.trampa {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.aviso-envio {
  padding: var(--esp-sm) var(--esp-md);
  border-left: 3px solid var(--color-marca-claro);
  background: var(--color-superficie);
  font-size: var(--txt-sm);
}
.aviso-envio[hidden] { display: none; }

.datos-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-md); }
.datos-contacto dt {
  font-size: var(--txt-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  font-variation-settings: "wght" 600, "wdth" 88;
  margin-bottom: var(--esp-3xs);
}
.datos-contacto dd { margin: 0; font-size: var(--txt-md); }

/* --------------------------------------------------------------------------
   12. PIE
   -------------------------------------------------------------------------- */
.pie {
  padding-block: var(--esp-xl) var(--esp-lg);
  border-top: 1px solid var(--color-borde);
  background: var(--color-fondo);
}
.pie__rejilla {
  display: grid;
  gap: var(--esp-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .pie__rejilla { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.pie__logo img { width: 12rem; margin-bottom: var(--esp-md); }
.pie h2 {
  font-size: var(--txt-sm);
  letter-spacing: 0.1em;
  color: var(--color-texto-tenue);
  font-variation-settings: "wght" 700, "wdth" 88;
  margin-bottom: var(--esp-sm);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2xs); }
.pie a { color: var(--color-texto); font-size: var(--txt-sm); }
.pie a:hover { color: var(--color-marca-claro); }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: var(--esp-2xs) var(--esp-md);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-tenue);
  font-size: var(--txt-xs);
}

/* --------------------------------------------------------------------------
   13. 404
   -------------------------------------------------------------------------- */
.error {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--nav-alto) + var(--esp-xl)) var(--esp-xl);
}
.error__codigo {
  font-size: var(--txt-hero);
  /* Es un <p>, así que hereda los ajustes de texto corrido: hay que pedirle
     explícitamente la condensada pesada del sistema. */
  font-variation-settings: "wght" 900, "wdth" var(--ancho-display);
  color: var(--color-marca);
  line-height: 0.8;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   14. MARCADORES DE CONTENIDO PENDIENTE
   Visibles a propósito. Se borran cuando llega el material real.
   -------------------------------------------------------------------------- */
.falta {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px dashed var(--color-marca-claro);
  border-radius: var(--radio);
  color: var(--color-marca-claro);
  font-size: var(--txt-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wght" 700, "wdth" 88;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   15. MOVIMIENTO
   -------------------------------------------------------------------------- */
.revela {
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--curva);
}
.revela.es-visible { opacity: 1; }

/* Los medios sí escalan al entrar: el movimiento aquí informa de que hay
   imagen, no decora un bloque de texto. */
.revela-medio img, .revela-medio .reel__marco {
  transform: scale(1.04);
  transition: transform 900ms var(--curva);
}
.revela-medio.es-visible img, .revela-medio.es-visible .reel__marco {
  transform: scale(1);
}

/* Secuencia única de carga del hero */
.hero__titulo .linea > span {
  transform: translateY(105%);
  transition: transform 850ms var(--curva);
}
.hero.esta-lista .hero__titulo .linea > span { transform: translateY(0); }
.hero__titulo .linea:nth-child(2) > span { transition-delay: 90ms; }
.hero__titulo .linea:nth-child(3) > span { transition-delay: 180ms; }

.hero__pie, .hero__machete {
  opacity: 0;
  transition: opacity 900ms var(--curva) 420ms;
}
.hero.esta-lista .hero__pie { opacity: 1; }
.hero.esta-lista .hero__machete { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revela, .hero__pie { opacity: 1; }
  .hero__machete { opacity: 0.22; }
  .hero__titulo .linea > span { transform: none; }
  .revela-medio img, .revela-medio .reel__marco { transform: none; }
}