/* ==========================================================================
   ALO Marketing - sistema de diseno
   Tema oscuro como principal, claro soportado via prefers-color-scheme.
   Acento verde de marca (la estrella), un solo acento en toda la web.
   Radios: --r-s para controles, --r-l para paneles e imagenes. Sin excepciones.
   ========================================================================== */

/* --- Fuentes autoalojadas (SIL OFL, ver assets/fonts/LICENCIA.txt) --------- */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  /* Marca: un unico acento, el verde de la estrella. */
  --verde: #2fd97f;
  --verde-hover: #4ee294;
  --verde-tenue: rgba(47, 217, 127, 0.12);
  --verde-borde: rgba(47, 217, 127, 0.28);

  /* Superficies: negro tenido de verde, nunca #000. */
  --fondo: #0a0e0c;
  --fondo-2: #101613;
  --fondo-3: #161e1a;
  --borde: rgba(255, 255, 255, 0.09);
  --borde-fuerte: rgba(255, 255, 255, 0.16);

  --texto: #eaf0ec;
  --texto-2: #9aa8a1;
  /* Medido, no elegido a ojo: el valor anterior (#6b7a73) daba 4,06 sobre
     --fondo-2 y suspendia WCAG AA en el texto de ayuda del formulario y en los
     chips. Este da 5,52 sobre --fondo y 5,20 sobre --fondo-2. */
  --texto-3: #7d8c85;
  --sobre-verde: #06251a;

  /* Tipografia */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Forma: dos pasos, aplicados de forma consistente. */
  --r-s: 6px;
  --r-l: 18px;

  /* Ritmo */
  --ancho: 1360px;
  --lateral: clamp(1.25rem, 5vw, 4rem);
  --seccion: clamp(5rem, 11vw, 9.5rem);

  /* Curvas: las nativas de CSS son demasiado flojas. */
  --sal: cubic-bezier(0.23, 1, 0.32, 1);
  --entrasal: cubic-bezier(0.77, 0, 0.175, 1);

  /* Tema bloqueado en oscuro, a proposito.
     La escena WebGL calibra su niebla contra --fondo para que los planos se
     disuelvan en el en vez de recortarse. Mantener esa calibracion en dos temas
     obliga a dos escenas y a dos juegos de contraste sobre fotografia, que es
     mas superficie de la que un sitio de una persona puede sostener bien.
     El tema claro se descarto tras verlo montado: las fotos se lavaban. */
  color-scheme: dark;
}

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

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

  /* El fondo se pinta aqui y no en body, a proposito. El lienzo de estrellas
     es hijo de body con z-index negativo, y un z-index negativo queda por
     encima del fondo de la raiz pero por debajo del de su propio padre. Con
     el fondo en body, body taparia el cielo y no se veria ni una estrella. */
  background: var(--fondo);
}

body {
  margin: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
canvas { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

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

::selection {
  background: var(--verde);
  color: var(--sobre-verde);
}

/* --- Tipografia ------------------------------------------------------------ */
.display {
  font-size: clamp(2.5rem, 6.6vw, 5.25rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 560;
  text-wrap: balance;
}

.titulo {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 550;
  text-wrap: balance;
}

.subtitulo {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 550;
}

.entradilla {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.cuerpo {
  color: var(--texto-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.etiqueta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 500;
}

.verde { color: var(--verde); }

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

.seccion { padding-block: var(--seccion); }

.linea-sup { border-top: 1px solid var(--borde); }

/* Grano fino sobre todo el lienzo. Fijo y sin eventos: no repinta al hacer
   scroll, que es lo que destroza los FPS en movil. */
/* --- Cielo -----------------------------------------------------------------
   Lienzo fijo por detras de todo el documento. Fijo y no absoluto: asi no
   crece con la pagina ni obliga a pintar un lienzo de 30.000 px de alto. El
   desplazamiento con el scroll lo hace el propio dibujo, cada estrella a su
   ritmo segun su profundidad. */
.estrellas {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  /* El reset da max-width:100% a todo canvas. Aqui sobra y ademas estorba: el
     JS fija el ancho en pixeles y el reset lo recortaria, reescalando el
     dibujo. */
  max-width: none;
  pointer-events: none;
}

/* En modo de colores forzados (contraste alto de Windows) el navegador cambia
   el fondo de html por el color del sistema, pero NO toca los pixeles de
   dentro de un canvas. Con cualquiera de los temas claros que trae Windows 11
   el fondo pasa a casi blanco y las estrellas, que son halos casi blancos en
   composicion aditiva, dejan de verse por completo: quedaria una capa
   invisible gastando bateria. En contraste alto la decoracion se retira. */
@media (forced-colors: active) {
  .estrellas,
  .grano {
    display: none;
  }
}

.grano {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --- Cabecera -------------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background-color 260ms var(--sal), border-color 260ms var(--sal);
  border-bottom: 1px solid transparent;
}

.cabecera[data-fija='si'] {
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--borde);
}

@media (prefers-reduced-transparency: reduce) {
  .cabecera[data-fija='si'] {
    background: var(--fondo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  white-space: nowrap;
}

.marca svg { width: 22px; height: 22px; flex: none; }
.marca span { color: var(--texto); }
.marca b { font-weight: 600; color: var(--texto-2); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.6rem);
}

/* El :not(.boton) es obligatorio: sin el, `.nav a` (0,1,1) gana a
   `.boton-primario` (0,1,0) y el boton de contacto hereda el gris del menu
   sobre el verde, que se queda muy por debajo de contraste AA. */
.nav a:not(.boton) {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--texto-2);
  padding: 0.4rem 0;
  position: relative;
  transition: color 180ms ease;
  white-space: nowrap;
}

.nav a[aria-current='page']:not(.boton) { color: var(--texto); }

.nav a:not(.boton)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--sal);
}

.nav a[aria-current='page']::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .nav a:not(.boton):hover { color: var(--texto); }
  .nav a:not(.boton):hover::after { transform: scaleX(1); }
}

.menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: transform 160ms var(--sal), border-color 180ms ease;
}

.menu-btn:active { transform: scale(0.97); }
.menu-btn svg { width: 18px; height: 18px; }

/* --- Botones --------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.35rem;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--sal), background-color 180ms ease,
    border-color 180ms ease, color 180ms ease;
}

.boton:active { transform: scale(0.97); }

.boton-primario {
  background: var(--verde);
  color: var(--sobre-verde);
  font-weight: 560;
}

.boton-secundario {
  border-color: var(--borde-fuerte);
  color: var(--texto);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .boton-primario:hover { background: var(--verde-hover); }
  .boton-secundario:hover { border-color: var(--texto-3); background: var(--fondo-2); }
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--verde);
  font-size: 0.95rem;
}

.enlace-flecha svg {
  width: 15px;
  height: 15px;
  transition: transform 220ms var(--sal);
}

@media (hover: hover) and (pointer: fine) {
  .enlace-flecha:hover svg { transform: translateX(4px); }
}

/* --- Hero con escena WebGL -------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-top: 6rem;
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  isolation: isolate;
  overflow: hidden;
}

/* El lienzo y su poster comparten caja: el poster se ve hasta que la escena
   esta lista, y es lo unico que se ve si no hay WebGL o hay movimiento reducido. */
.hero-lienzo,
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.hero-poster {
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.7);
  transition: opacity 700ms var(--sal);
}

.hero[data-escena='lista'] .hero-poster { opacity: 0; }

/* El lienzo no lleva transicion propia: la entrada la hace la opacidad del
   material dentro de la escena. Con las dos capas fundiendo a la vez se veian
   el poster y los planos superpuestos casi un segundo, y como el poster es la
   misma foto que uno de los planos, parecia un fallo de repintado. */
.hero-lienzo { opacity: 1; }

/* Velo en dos ejes. Uno vertical solo hasta la altura de las acciones, y otro
   horizontal sobre el tercio izquierdo, que es donde vive el titular. Asi el
   texto llega a contraste AA sin apagar la escena en la mitad derecha, que es
   justo lo que hay que ver. Un unico velo vertical hacia arriba obligaria a
   tapar tambien la zona donde estan los planos. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      125% 85% at 6% 94%,
      color-mix(in srgb, var(--fondo) 94%, transparent) 0%,
      color-mix(in srgb, var(--fondo) 58%, transparent) 40%,
      transparent 70%
    ),
    linear-gradient(
      to top,
      var(--fondo) 3%,
      color-mix(in srgb, var(--fondo) 52%, transparent) 20%,
      transparent 54%
    );
}

.hero .contenedor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  width: 100%;
}

.hero h1 { max-width: 15ch; }

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-aparte {
  padding-bottom: 0.5rem;
  border-left: 1px solid var(--verde-borde);
  padding-left: 1.25rem;
}

/* --- Casos: panel doble asimetrico ----------------------------------------- */
.casos-doble {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.caso-panel {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--fondo-2);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-height: 26rem;
  transition: border-color 260ms ease, transform 380ms var(--sal);
}

.caso-panel figure {
  margin: 0;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.caso-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--sal), filter 500ms ease;
}

.caso-cuerpo {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border-top: 1px solid var(--borde);
  background: var(--fondo-2);
}

.caso-cuerpo p { color: var(--texto-2); font-size: 0.95rem; margin-top: 0.5rem; }

.caso-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  color: var(--texto-3);
}

@media (hover: hover) and (pointer: fine) {
  .caso-panel:hover { border-color: var(--verde-borde); transform: translateY(-3px); }
  .caso-panel:hover img { transform: scale(1.035); }
}

/* --- Servicios: rejilla asimetrica (3 celdas para 3 servicios) -------------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Con dos servicios en vez de tres, la rejilla de tres columnas dejaba un
   hueco muerto a la derecha. Las reglas de los media query de abajo siguen
   mandando en pantallas pequenas porque van despues con la misma
   especificidad. */
.servicios-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Piezas de trabajo: video y texto lado a lado --------------------------- */
.pieza {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* El video va primero en el documento para que en movil se vea la pieza antes
   de leer sobre ella. En escritorio esta variante lo manda a la derecha. */
.pieza-invertida .marco-video { order: 2; }

.marco-video {
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

.marco-video video {
  display: block;
  width: 100%;
  height: auto;
}

.marco-vertical {
  max-width: 21rem;
  margin-inline: auto;
  border-radius: var(--r-l);
}

.servicio {
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--fondo-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  text-decoration: none;
  min-height: 17rem;
  transition: border-color 260ms ease, background-color 260ms ease;
}

/* La celda destacada ocupa el hueco grande y lleva imagen
   real de fondo. Las otras dos celdas son tipograficas. */
.servicio-destacado {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  min-height: 30rem;
  justify-content: flex-end;
  border-color: var(--verde-borde);
}

.servicio-destacado img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 900ms var(--sal);
}

.servicio-destacado::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 12, 9, 0.94) 12%, rgba(6, 12, 9, 0.45) 55%, rgba(6, 12, 9, 0.15) 100%);
}

.servicio-destacado > * { position: relative; z-index: 2; }
.servicio-destacado .subtitulo,
.servicio-destacado .cuerpo { color: #eaf0ec; }
.servicio-destacado .cuerpo { color: #b9c7c0; }

.servicio p { font-size: 0.95rem; margin-top: 0.6rem; }

.servicio-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-3);
  letter-spacing: 0.1em;
}

@media (hover: hover) and (pointer: fine) {
  .servicio:hover { border-color: var(--verde-borde); background: var(--fondo-3); }
  .servicio-destacado:hover img { transform: scale(1.04); }
  .servicio-destacado:hover { background: var(--fondo-2); }
}

/* --- Caso ampliado: pantallas del sitio ------------------------------------ */
.caso-ampliado {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.pantallas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.pantalla-escritorio {
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

.pantalla-movil {
  position: absolute;
  right: -1rem;
  bottom: -2.5rem;
  width: 27%;
  min-width: 116px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.75);
}

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.dato dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 0.35rem;
}

.dato dd {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* --- Caso a sangre con fotografia ------------------------------------------ */
.sangre {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.sangre > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sangre::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 12, 9, 0.95) 8%, rgba(6, 12, 9, 0.55) 48%, rgba(6, 12, 9, 0.2) 100%);
}

.sangre .contenedor { padding-block: clamp(3rem, 8vh, 6rem); }
.sangre .titulo,
.sangre .etiqueta { color: #eaf0ec; }
.sangre .etiqueta { color: var(--verde); }
.sangre .cuerpo { color: #c2cfc8; }

.tira-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: 2.5rem;
  max-width: 34rem;
}

.tira-fotos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-s);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Tres piezas en vez de dos y a todo el ancho del contenedor. Va como clase y
   no como estilo en linea para que el media query de movil pueda bajarla a dos
   columnas: a 375px, tres miniaturas salen a 104px y no se ve nada. */
.tira-tres {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Proceso: raíl con titulo fijo ----------------------------------------- */
.proceso {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.proceso-fijo { position: sticky; top: 7.5rem; }

.paso {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--borde);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.paso:last-child { border-bottom: 1px solid var(--borde); }
.paso h3 { font-size: 1.15rem; font-weight: 550; letter-spacing: -0.02em; }
.paso p { color: var(--texto-2); font-size: 0.95rem; max-width: 54ch; }

/* --- Bloque de confianza --------------------------------------------------- */
.confianza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.cita {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
  font-weight: 500;
  text-wrap: balance;
}

.cita-autor {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--texto-3);
}

.cita-autor b { color: var(--texto); font-weight: 550; }

/* --- Contacto -------------------------------------------------------------- */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.campo {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.campo label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texto);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--fondo-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  color: var(--texto);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.campo textarea { min-height: 8rem; resize: vertical; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-3); }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--verde);
  outline: none;
  background: var(--fondo-3);
}

.ayuda { font-size: 0.82rem; color: var(--texto-3); }

.error {
  font-size: 0.82rem;
  color: #ff8b7a;
  display: none;
}

.campo[data-error='si'] .error { display: block; }
.campo[data-error='si'] input,
.campo[data-error='si'] textarea { border-color: #ff8b7a; }

/* Trampa antispam: fuera de pantalla, nunca display:none (los bots lo detectan). */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.datos-contacto {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  background: var(--fondo-2);
}

.datos-contacto a {
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  transition: color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .datos-contacto a:hover { color: var(--verde); }
}

/* --- Pie ------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--borde);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.pie h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 500;
  margin-bottom: 1rem;
}

.pie li { margin-bottom: 0.6rem; }

.pie a {
  text-decoration: none;
  color: var(--texto-2);
  font-size: 0.94rem;
  transition: color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .pie a:hover { color: var(--texto); }
}

.pie-legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--texto-3);
}

/* --- Revelado al entrar en pantalla ----------------------------------------
   El estado oculto cuelga de [data-js='si'], que marca un script minimo en el
   <head>. Si el JS no llega a ejecutarse (bloqueado, error de red, un fallo en
   sitio.js), el atributo no existe, la regla no aplica y el contenido se ve
   entero. Ocultar por defecto y confiar en que el JS lo muestre es la forma
   habitual de dejar una web en blanco sin enterarse.
   Sin transform en el eje X, para no crear scroll horizontal en movil. */
[data-js='si'] [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--sal), transform 700ms var(--sal);
  transition-delay: var(--retraso, 0ms);
}

[data-js='si'] [data-revelar='visto'] {
  opacity: 1;
  transform: none;
}

/* --- Movimiento reducido ---------------------------------------------------- */
/* Menos movimiento, no cero: se conservan opacidad y color, que ayudan a
   comprender la interfaz. Desaparece todo desplazamiento. */
@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;
  }

  [data-js='si'] [data-revelar] { opacity: 1; transform: none; }
  .hero-lienzo { display: none; }
  .hero-poster { opacity: 0.5; }
}

/* --- Tablet ----------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero .contenedor { grid-template-columns: minmax(0, 1fr); }
  .hero-aparte { border-left: none; padding-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--verde-borde); max-width: 34rem; }

  .casos-doble,
  .caso-ampliado,
  .proceso,
  .confianza,
  .contacto { grid-template-columns: minmax(0, 1fr); }

  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pieza { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .pieza-invertida .marco-video { order: 0; }
  .marco-vertical { max-width: 19rem; }
  .servicio-destacado { grid-column: span 2; grid-row: auto; min-height: 24rem; }

  .proceso-fijo { position: static; }
  .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Movil ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .nav { display: none; }
  .nav[data-abierto='si'] {
    display: flex;
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--lateral) 1.5rem;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
  }

  .nav[data-abierto='si'] a:not(.boton) {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--borde);
    font-size: 1rem;
  }

  .nav[data-abierto='si'] .boton {
    margin-top: 1rem;
    padding: 0.9rem 1.35rem;
    justify-content: center;
  }

  .menu-btn { display: inline-flex; }

  .servicios { grid-template-columns: minmax(0, 1fr); }
  .servicio-destacado { grid-column: span 1; min-height: 21rem; }

  .caso-panel { min-height: 21rem; }
  .pantalla-movil { right: 0; bottom: -1.5rem; width: 30%; }
  .tira-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr); }
  .hero-acciones .boton { flex: 1 1 100%; }
  .pie-legal { flex-direction: column; align-items: flex-start; }
}