/* ============================================================================
   pages — la composicion de cada pagina
   ========================================================================== */

/* ============================================================== la portada
   Plano violeta y fotografia UNO AL LADO DEL OTRO, no uno encima del otro.
   El export ponia linear-gradient(#6214a8b3, #000000b3) sobre cada foto: la
   imagen quedaba de textura y el titular perdia contraste real. */
.hero { background: var(--violet); color: var(--on-violet); }
.hero__grid { display: grid; gap: 0; align-items: stretch; }
/* 1fr 1fr y max-width de --w-page/2 EXACTO: con esos dos valores el borde
   izquierdo del titular cae en (W - --w-page)/2 + --gutter, que es justo donde
   empieza el contenido de .u-page, a cualquier ancho y sin usar vw (que
   incluiria la barra de scroll). Antes era 1.05fr con +--gutter en el
   max-width, y solo coincidia exactamente a 1600px: -8px a 1280, -4px a 1440,
   +8px a 1920. */
@media (min-width: 56rem) { .hero__grid { grid-template-columns: 1fr 1fr; } }

.hero__copy {
  padding-block: clamp(var(--s-8), 8vw, var(--s-10));
  padding-inline: var(--gutter);
  max-width: calc(var(--w-page) / 2);
  margin-left: auto;
  width: 100%;
  /* El cuerpo del titular se mide contra ESTA columna, no contra el viewport. */
  container-type: inline-size;
}
/* El eslogan de marca, encima del titular.
   AMBAR SOBRE VIOLETA: 4,62:1 medido sobre el pixel pintado, que es el peor par
   del sitio y aun asi pasa AA como texto normal. Donde la faceta hunde el plano
   sube a 5,98:1. Sobre claro el mismo ambar daria 2,08:1 y no seria texto: aqui
   vale porque debajo hay violeta, no papel. */
.hero__eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s-3);
}
.hero__title {
  /* --fs-display escala con vw, pero el titular vive en una columna que es la
     mitad del viewport: a 1024 daba 76px sobre 461px de medida, o sea 6em, y
     partia en 5 lineas con tres de una sola palabra. En cqi la medida se
     mantiene en ~10em a cualquier ancho. */
  font-size: clamp(2.375rem, 10.3cqi, 3.75rem);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-5);
}
.hero__lede {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--on-violet-2);
  max-width: 46ch;
  margin-bottom: var(--s-7);
}
.hero__media { position: relative; min-height: clamp(15rem, 42vw, 30rem); }
/* La fotografia es 1,90:1 y la caja ronda 1,2:1, asi que cover recorta por
   los lados. El portatil esta en la mitad derecha, de modo que el recorte
   centrado se lo comia a medias. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

/* El chaflan muerde la esquina del medio hacia el plano violeta. */
@media (min-width: 56rem) {
  .hero__media { clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)); }
}

/* ------------------------------------------------- cabecera de pagina
   Las interiores no llevan hero fotografico: un plano violeta bajo, con el
   titulo y una entradilla. Menos ruido y carga mucho menos. */
.page-head {
  background: var(--violet);
  color: var(--on-violet);
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
}
.page-head__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-4);
}
.page-head__lede {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--on-violet-2);
  max-width: 42ch;
}

/* ------------------------------------------------------- bloque de texto */
.section-head { margin-bottom: var(--s-7); }
.section-icon { width: 3rem; height: 3rem; margin-bottom: var(--s-4); }
.section-head__title { margin-bottom: var(--s-4); }
.section-head__lede { color: var(--mute); font-size: var(--fs-lead); max-width: 42ch; }
.plane-violet .section-head__lede,
.plane-deep .section-head__lede { color: var(--on-violet-2); }

/* --------------------------------------------------- dos columnas texto+foto */
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(var(--s-7), 5vw, var(--s-9)); }
  .split--flip .split__media { order: -1; }
}
.split__media img { width: 100%; }
/* Dos columnas de TEXTO, sin foto. .split centra en vertical, que es lo que
   quiere una foto al lado de un parrafo; con dos columnas de alto muy distinto
   los dos encabezados quedan a alturas distintas y se lee como un descuadre.
   Alineadas arriba arrancan juntas. */
.split--top { align-items: start; }

/* --------------------------------------------------------- panel de CTA
   La UNICA sombra del sitio: se monta sobre el borde de dos planos y
   necesita despegarse de los dos a la vez.

   Aqui NO va box-shadow, aunque sea lo que pide el cuerpo. El panel lleva
   .notch-tr-bl, y clip-path recorta el render ya pintado: la sombra se
   dibujaba y el recorte se la comia entera. Estuvo asi, muerta y sin que lo
   cantara nada, hasta que se midio. La sombra vive ahora en el .u-page de
   abajo, que es el ancestro sin recortar mas cercano. */
.cta-panel {
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  background: var(--violet);
  color: var(--on-violet);
}
.cta-panel__title { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.cta-panel__lede { color: var(--on-violet-2); margin-bottom: var(--s-6); max-width: 48ch; }
.cta-phone {
  display: inline-block;
  margin-top: var(--s-5);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--amber);          /* 4,65:1 sobre violeta, y va en tamano grande */
  text-decoration: none;
}
.cta-phone:hover { text-decoration: underline; }

/* Variante con fotografia. El padding baja al cuerpo: sobre .cta-panel impide que
   la imagen llegue a los bordes del plano. La diagonal no se repite aqui, que
   clip-path recorta tambien a los hijos y la foto entra ya mordida. */
.cta-panel--media { padding: 0; display: grid; }
.cta-panel--media .cta-panel__body { padding: clamp(var(--s-6), 5vw, var(--s-8)); }

/* La relacion de aspecto vive en el contenedor y la foto va absoluta dentro. En el
   <img>, con la altura ya resuelta, calcularia el ANCHO y desbordaria la columna. */
.cta-panel__media { position: relative; aspect-ratio: 16 / 10; }
.cta-panel__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* El encuadre va horneado en el fichero: la foto se recorto a 16:10 centrada en el
   sujeto, asi que el cover recorta por los lados y nunca por la cabeza. Por eso no
   hace falta object-position. */

/* Fundido contra el morado para que la foto no llegue al copy con un corte duro. */
.cta-panel__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--violet), transparent 2rem);
}

@media (min-width: 56rem) {
  .cta-panel--media { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .cta-panel__media { aspect-ratio: auto; min-height: 22rem; }
  .cta-panel__media::after {
    background: linear-gradient(to right, var(--violet), transparent 6rem);
  }
}

/* La elevacion del panel, puesta en su envoltorio porque el panel esta
   recortado. El :has() NO es cosmetico, es el guarda: .u-page sale 4-9 veces
   por pagina y una de ellas es .site-header__inner, que contiene el .site-nav
   con position: fixed. Un filter ahi le cambia el bloque contenedor y el menu
   movil colapsa de 375x747 a 375x96, con los siete enlaces en una rendija.
   :has(> .cta-panel) casa exactamente uno por pagina, nunca la cabecera.
   NO ensanchar este selector. */
.u-page:has(> .cta-panel) { filter: var(--shadow-1-clip); }

/* En PAPEL se apaga. Un subarbol con filter se rasteriza al paginar: con el
   filtro puesto, el titular, la entradilla, la etiqueta del boton y el
   telefono salen del panel como bitmap y desaparecen de la capa de texto del
   PDF, o sea que dejan de poder seleccionarse y buscarse. En papel la sombra
   no aporta nada y el texto si. */
@media print {
  .u-page:has(> .cta-panel) { filter: none; }

  /* Las bandas violeta y el pie llevan el texto en BLANCO. El dialogo de impresion trae
     "graficos de fondo" desactivado por defecto, y en ese modo el navegador descarta el
     plano pero conserva el color del texto: la pagina saldria en blanco sobre blanco.
     No he conseguido reproducirlo con --print-to-pdf, que si imprime los fondos y da una
     banda correcta; forzarlos es la unica forma de que lo que ya sale bien salga bien
     tambien con el ajuste en contra, sin depender de lo que marque quien imprime. */
  .hero, .page-head, .plane-violet, .plane-deep, .cta-panel, .site-footer {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* La decoracion si se retira, por lo mismo que el filtro de aqui arriba: en papel no
     aporta y gasta tinta. El plano se queda porque sostiene la legibilidad del texto. */
  .hero__copy::after,
  .hero::after,
  .plane-violet::after,
  .page-head::after,
  .site-footer::before,
  .site-footer::after { display: none; }
}

/* ------------------------------------------------------------ liderazgo */
.leader { display: grid; gap: var(--s-7); }
@media (min-width: 56rem) { .leader { grid-template-columns: 20rem 1fr; gap: var(--s-9); } }
.leader__portrait img { width: 100%; }
.leader__name { font-size: var(--fs-h1); font-weight: 800; letter-spacing: var(--tr-display); }
.leader__role { color: var(--violet); font-weight: 600; margin-top: var(--s-2); }
.leader__body { margin-top: var(--s-5); }
.leader__body p + p { margin-top: var(--s-4); }

/* -------------------------------------------------------------- contacto */
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-9); } }
.contact-item + .contact-item { margin-top: var(--s-5); }
.contact-item__label { font-size: var(--fs-sm); font-weight: 700; color: var(--violet); }
.contact-item__value { font-size: var(--fs-lead); text-decoration: none; }
.contact-item__value:hover { text-decoration: underline; }

/* ---------------------------------------------------------- formularios */
.form-stack { display: grid; gap: var(--s-5); }
.form-section { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.form-section:first-of-type { padding-top: 0; border-top: 0; }
.form-section__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--violet);
  margin-bottom: var(--s-5);
}
.form-note { color: var(--mute); font-size: var(--fs-sm); max-width: var(--w-prose); }

/* =========================================================== movimiento
   UN solo momento animado en todo el sitio, el de la portada, y se ANADE
   bajo prefers-reduced-motion: no-preference en vez de quitarse bajo
   reduce. El estado por defecto es el visible.

   Esto no es un detalle de estilo. El sitio anterior ocultaba 28 elementos
   con style="opacity:0" en el HTML y los revelaba con un disparador
   SCROLL_INTO_VIEW de Webflow IX2, que no dispara para lo que ya esta en el
   viewport. Aqui la visibilidad del contenido no depende de JavaScript en
   ningun momento. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lede, .hero__actions {
    animation: subir var(--dur-3) var(--ease-out) both;
  }
  .hero__lede    { animation-delay: 60ms; }
  .hero__actions { animation-delay: 120ms; }
}

/* La animacion mueve SOLO transform. No toca opacity a proposito.
   Con `opacity: 0` en el fotograma inicial y fill-mode both, el texto se queda
   invisible mientras la animacion no corra: y no corre cuando el documento no
   se esta pintando (pestana en segundo plano, sesion restaurada, un rastreador
   que renderiza sin viewport). Medido: el h1 se quedo en opacity 0 durante mas
   de 7 segundos con la pagina sin pintar, y accesslint lo canto como 2,76:1.

   Es exactamente el fallo del que venia el sitio anterior, solo que en CSS en
   vez de en IX2: contenido que no se ve hasta que algo lo dispara. Moviendo
   solo transform, si la animacion no corre el texto sigue legible y como mucho
   se queda 12px mas abajo. */
@keyframes subir {
  from { transform: translateY(0.75rem); }
  to   { transform: none; }
}