/* Base del tema Kocsa.
   Portado de kocsa-design-hub/docs/assets/styles.css con el prefijo kcs-.
   Todos los valores vienen de los frames del Figma medidos en las tres
   resoluciones. Los tamaños y espaciados que cambian por resolución están en
   variables.css como modos, no aquí. Nada de valores a criterio propio: si un
   valor no está en el diseño, se pregunta.
   Interlineado: 1,2 en todo el sitio, tal como lo fija el diseño.

   Qué vive aquí y qué no, en assets/css/REPARTO.md. */

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

body {
  margin: 0;
  background: var(--kcs-color-neutral-surface);
  color: var(--kcs-color-neutral-canvas);
  font-family: var(--kcs-font-body);
  font-size: var(--kcs-font-escala-b100);
  line-height: var(--kcs-font-interlineado-todo);
  /* Ejes fijos de la fuente variable, según indicación de Narita. El peso lo
     controla font-weight, que la fuente mapea al eje wght. */
  font-variation-settings: "INKT" 0, "slnt" 0, "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }

/* core separa con 24 px los hijos de .wp-site-blocks, o sea la cabecera, el
   main y el pie. El diseño no tiene ese hueco: la separación del pie la pone su
   propio margin-top, medido en los frames. El selector lleva `body` delante para
   ganar por especificidad (0,1,1) a la regla de core (0,1,0) sin !important. */
body .wp-site-blocks > * { margin-block-start: 0; }

:where(a, button):focus-visible {
  outline: 2px solid var(--kcs-color-brand-primary);
  outline-offset: 3px;
}

/* Rejilla del sitio: el diseño trabaja al 80 % del ancho de ventana en
   escritorio, con 20 px de margen en móvil. */
.kcs-contenedor {
  width: calc(100% - calc(var(--kcs-espaciado-03) * 2));
  max-width: var(--kcs-layout-ancho-80);
  margin-inline: auto;
}
.kcs-bloque { padding-inline: 0; }

/* Utilidades de material pendiente ---------------------------------------- */

.kcs-img-placeholder {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kcs-img-ratio, 437.33 / 262.4);
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .22);
  overflow: hidden;
}
.kcs-img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--kcs-espaciado-01);
  font-size: var(--kcs-font-escala-l200);
  color: rgba(255, 255, 255, .5);
  text-align: center;
}
.kcs-pending {
  display: inline-block;
  min-width: 3ch;
  padding-inline: .35em;
  border-bottom: 1px dashed rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .6);
}

/* Antetítulo con los chevrones de marca ---------------------------------- */

.kcs-antetitulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kcs-font-escala-l100);
  font-weight: var(--kcs-font-pesos-bold);
  text-transform: uppercase;
}
.kcs-antetitulo__chevrones { width: 57.33px; height: 12px; flex: none; }

/* Botones ---------------------------------------------------------------- */

.kcs-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Alto fijo del componente: 43 px medidos en los frames de 375 y de 1920, con
     tipografía de 14 y de 16. El relleno solo lo alcanza en escritorio. */
  min-height: 43px;
  padding: var(--kcs-espaciado-02) var(--kcs-espaciado-04);
  font-family: var(--kcs-font-body);
  font-size: var(--kcs-font-escala-l100);
  font-weight: var(--kcs-font-pesos-bold);
  line-height: var(--kcs-font-interlineado-todo);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.kcs-btn--claro { background: var(--kcs-color-neutral-canvas); color: var(--kcs-color-neutral-ink); }
.kcs-btn--marca { background: var(--kcs-color-brand-primary); color: var(--kcs-color-neutral-canvas); }

/* Encabezado de sección: antetítulo más titular ------------------------- */

/* En 375 el antetítulo se pega al título: 12 px, no los 32 de escritorio. Medido en
   los frames de 375 sobre la distancia de tinta a tinta, que da 18 px. */
.kcs-encabezado { display: flex; flex-direction: column; gap: var(--kcs-espaciado-02); }
.kcs-encabezado__titulo {
  font-size: var(--kcs-font-escala-h100);
  font-weight: var(--kcs-font-pesos-bold);
  line-height: var(--kcs-font-interlineado-todo);
}
.kcs-encabezado__entradilla {
  font-size: var(--kcs-font-escala-h300);
  font-weight: var(--kcs-font-pesos-regular);
  /* El antetítulo se pega al título, pero la entradilla no: en 375 el diseño deja
     22 px de caja ahí, así que suma sobre el gap de 12 del contenedor. */
  margin-top: var(--kcs-espaciado-015);
}

/* Encabezado con acción a la derecha en escritorio */
.kcs-encabezado-accion { display: flex; flex-direction: column; gap: var(--kcs-espaciado-05); }
.kcs-encabezado-accion + .kcs-encabezado-accion__texto { margin-top: var(--kcs-espaciado-04); }
.kcs-encabezado-accion__texto { max-width: 62ch; font-size: var(--kcs-font-escala-h400); font-weight: var(--kcs-font-pesos-semibold); }

/* Primitivas de composición ---------------------------------------------- */

.kcs-articulo + .kcs-seccion { margin-top: var(--kcs-espaciado-20); }
.kcs-bloque-64 { display: flex; flex-direction: column; gap: var(--kcs-espaciado-06); }
/* Igual que .kcs-pila-20 pero sin el relleno superior: la portada arranca con el
   héroe, que ya trae el suyo. */
.kcs-portada { display: flex; flex-direction: column; gap: var(--kcs-espaciado-20); }
/* El contenedor ya aporta el relleno superior.
   Se contempla también el caso de que el héroe cuelgue del div de core: ese div
   se saca de la caja con display: contents, pero eso no cambia a quién empareja
   un selector, así que sin esta segunda forma el héroe conserva su relleno y la
   página crece 80 px. */
.kcs-pila-20 > .kcs-heroe,
.kcs-pila-20 > .kcs-contenido > .kcs-heroe { padding-top: 0; }
.kcs-pila-20 { display: flex; flex-direction: column; gap: var(--kcs-espaciado-20); padding-top: var(--kcs-espaciado-15); }

/* El div que core mete alrededor del contenido ------------------------------
   core/post-content envuelve los bloques en un <div class="entry-content
   wp-block-post-content is-layout-flow"> con dos reglas propias que estorban:
   `display: flow-root`, que empata en especificidad con la clase de la pila y
   gana por orden de carga dejando el gap sin efecto, y un `margin-block-start:
   24px` entre hermanos.

   En vez de pelear la especificidad, el div se saca de la caja con display:
   contents: los bloques pasan a ser hijos directos de la pila y reciben su
   hueco de 120/144/160 px, que es lo que mide el diseño. Los selectores van
   acotados al padre (0,2,0) para ganar a las reglas de core sin !important. */
.kcs-pila-20 > .kcs-contenido,
.kcs-portada > .kcs-contenido { display: contents; }

/* Todas las primitivas de composición del diseño separan con gap, medido en los
   frames. Core añade además 24 px de margen entre hermanos a cualquier grupo con
   `is-layout-flow`, y ese margen se suma al gap: en las páginas legales metía 96
   px de más solo en el bloque de párrafos. Aquí se anula de una vez para todas
   ellas. `body` delante para ganar (0,1,1) a la regla de core (0,1,0). */
body :is(
	.kcs-portada, .kcs-pila-20, .kcs-seccion, .kcs-bloque-64,
	.kcs-encabezado, .kcs-encabezado-accion, .kcs-fases
) > *,
.kcs-pila-20 > .kcs-contenido > *,
.kcs-portada > .kcs-contenido > * { margin-block: 0; }

/* Envoltorio de portada de pantalla. Lo comparten kocsa/heroe-portada y
   kocsa/heroe-interior, y Nosotros y Cómo trabajamos no cargan el CSS del
   primero: por eso la base vive aquí y solo el lema, el titular grande y la
   fotografía a sangre se quedan con el bloque de portada. */
.kcs-heroe { display: flex; flex-direction: column; gap: var(--kcs-espaciado-06); padding-top: var(--kcs-espaciado-15); }
/* El texto de portada no llega al borde del bloque: el diseño le deja 20 px a la
   derecha (335 → 315 en móvil, 1376 → 1356 en escritorio). */
.kcs-heroe > .kcs-encabezado { padding-right: var(--kcs-espaciado-03); }
.kcs-seccion { display: flex; flex-direction: column; gap: var(--kcs-espaciado-10); }
/* Cuando lo que sigue al encabezado es el par texto + botón, el diseño de 375 aprieta
   ese hueco a 20. Con la rejilla de entradas debajo se mantiene en 32. */
.kcs-seccion:has(> .kcs-encabezado-accion) { gap: var(--kcs-espaciado-03); }
.kcs-seccion--listado { padding-top: var(--kcs-espaciado-15); }
.kcs-accion-centrada { display: flex; justify-content: center; }

/* Toda regla del diseño que dé la altura de una imagen por proporción tiene que
   declarar height: auto. WordPress imprime width y height como atributos en cada
   <img> que sirve, y esos atributos cuentan como altura declarada: con las dos
   dimensiones definidas, el navegador ignora el aspect-ratio. Las tarjetas de
   proyecto salían a 600 px de alto —el height del atributo— en vez de a los 199
   que da la proporción 443/261 del diseño. */

/* Fotografías sueltas a ancho de contenedor -------------------------------
   Las tres formas que usa el diseño. Son utilidades, no un componente: las
   instancian kocsa/imagen, kocsa/mensaje-accion, kocsa/heroe-interior y
   kocsa/seccion, así que no pueden vivir en ninguno de ellos.

   El diseño no les da proporción: les fija el alto con un porcentaje del alto de
   la ventana de referencia, y por eso cambian de recorte en cada resolución.

   Sexta vez que dos bloques se parecen y no son el mismo componente: esta imagen
   mide el 30 % de la ventana en Cómo trabajamos (244 en 375, 540 en 1920) y el
   40-60 % en el cierre de Nosotros (324 y 648). Medido en los seis frames. */

/* Con dirección de arte (portada): el alto lo da la proporción. */
.kcs-imagen-ancha { display: block; width: 100%; }
.kcs-imagen-ancha img { width: 100%; height: auto; aspect-ratio: 335 / 406; object-fit: cover; }

/* El porcentaje de ventana no es el mismo en todas las pantallas: Gracias usa el
   60 % (487 px) y Nosotros el 30 % (244 px), medidos los dos en sus frames de
   375. Se pasa por variable para que el valor de escritorio, ya validado, siga
   mandando abajo. */
.kcs-imagen-alta { width: 100%; height: var(--kcs-alto-imagen, var(--kcs-alto-ventana-60)); object-fit: cover; }
.kcs-imagen-alta--30 { --kcs-alto-imagen: var(--kcs-alto-ventana-30); }

.kcs-imagen-ancha-simple { width: 100%; height: var(--kcs-alto-ventana-30); object-fit: cover; }
.kcs-imagen-ancha-simple--alta { height: var(--kcs-alto-ventana-40); }

@media (min-width: 1024px) {
  .kcs-imagen-ancha img { aspect-ratio: 1376 / 756; }
  /* 648 px, no 320. El hub declara las dos alturas en sendos bloques @media de
     1024 px y, con la misma especificidad, manda la última escrita. Al fijar
     height directamente, el token deja de intervenir en escritorio. */
  .kcs-imagen-alta { height: 648px; }
  .kcs-imagen-ancha-simple { height: var(--kcs-alto-ventana-50); }
  .kcs-imagen-ancha-simple--alta { height: var(--kcs-alto-ventana-60); }
}

/* Bloque de proceso: imagen y texto a dos columnas ------------------------
   La base vive aquí, no en el bloque kocsa/proceso, porque kocsa/fases la
   reutiliza (.kcs-fase .kcs-proceso) y Cómo trabajamos no lleva el bloque de
   proceso: si estas reglas se fueran con él, las fases se romperían. Los
   modificadores propios de cada uno sí van en su style.css. */

.kcs-proceso { display: flex; flex-direction: column; background: var(--kcs-color-neutral-ink); }
/* La foto es un <picture> cuando hay dirección de arte (portada) y un <img>
   suelto en el resto de pantallas, tal como en el diseño. La proporción se
   declara para las dos formas; donde el bloque fija una altura definida
   (--estandar y las fases), esa altura manda y la proporción queda inerte.

   Ojo con el ancho: el <img> suelto ya lo recibe de .kcs-proceso__foto, que en
   escritorio vale 50 %. Ponerle aquí width: 100 % lo rompía, porque
   img.kcs-proceso__foto (0,1,1) gana a .kcs-proceso__foto (0,1,0) y la foto se
   comía la fila entera. El width solo lo lleva el <img> de dentro del
   <picture>, que sí tiene que llenar a su padre. */
.kcs-proceso__foto { display: block; width: 100%; }
.kcs-proceso__foto img { width: 100%; }
.kcs-proceso__foto img,
img.kcs-proceso__foto { height: auto; aspect-ratio: 335 / 275; object-fit: cover; }
.kcs-proceso__texto { display: flex; flex-direction: column; gap: var(--kcs-espaciado-10); padding: var(--kcs-espaciado-05); }

/* Titular y párrafo de la tarjeta de ámbito, en su forma general. El diseño los
   usa también dentro del bloque de proceso y de las fases, que no cargan el CSS
   de kocsa/ambitos: Nosotros lleva el proceso sin la rejilla de ámbitos y se
   quedaría sin estos tamaños. Las medidas propias de la tarjeta van acotadas al
   hijo directo (.kcs-ambito > …) y viven en blocks/ambitos/style.css. */
.kcs-ambito__titulo { font-size: var(--kcs-font-escala-h200); font-weight: var(--kcs-font-pesos-bold); }
.kcs-ambito__texto { font-size: var(--kcs-font-escala-h400); color: rgba(255, 255, 255, .78); }
@media (min-width: 1600px) {
  .kcs-ambito__texto { font-size: var(--kcs-font-escala-b100); }
}

/* Escritorio: 1024 px en adelante --------------------------------------- */

@media (min-width: 1024px) {
  .kcs-contenedor { width: 80%; }
  .kcs-seccion--listado { padding-top: var(--kcs-espaciado-10); }
  .kcs-bloque { padding-inline: var(--kcs-espaciado-03); --kcs-sangrado-bloque: var(--kcs-espaciado-03); }

  /* Los gaps que en 375 valen otra cosa. Escritorio conserva el valor validado. */
  .kcs-encabezado { gap: var(--kcs-espaciado-04); }
  .kcs-encabezado__entradilla { margin-top: 0; }
  .kcs-encabezado-accion { gap: var(--kcs-espaciado-04); }
  .kcs-encabezado-accion { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--kcs-espaciado-05); }
  .kcs-encabezado-accion__texto { flex: 1; min-width: 0; }
  .kcs-seccion, .kcs-seccion:has(> .kcs-encabezado-accion) { gap: var(--kcs-espaciado-10); }

  .kcs-proceso { flex-direction: row; align-items: stretch; }
  .kcs-proceso__foto { width: 50%; height: auto; }
  .kcs-proceso__foto img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .kcs-proceso__texto { width: 50%; justify-content: center; padding: var(--kcs-espaciado-15) var(--kcs-espaciado-10); gap: var(--kcs-espaciado-10); }
}

@media (min-width: 1600px) {
  .kcs-bloque { padding-inline: var(--kcs-espaciado-10); --kcs-sangrado-bloque: var(--kcs-espaciado-10); }
}

/* Interacción -------------------------------------------------------------
   Leída de las variantes de los componentes del diseño (páginas Atoms y
   Molecules). Un único mecanismo para todo lo pulsable: el texto se desplaza y
   entra una copia idéntica por arriba. Ni el fondo ni el color cambian al pasar
   el ratón, cosa que sí ocurre en el estado de foco.

   En el hub estas reglas enumeraban con :is() los selectores de cada bloque
   (.tarjeta, .proyecto, .dato__valor, .adjunto__accion…), lo que ataba la base
   al marcado interno de los bloques. Aquí la propiedad se invierte: quien es
   pulsable se declara con .kcs-pulsable desde su propio render.php.

     .kcs-pulsable            desplazamiento del texto           (todo lo pulsable)
     .kcs-pulsable--foco      + naranja al enfocar               (.kcs-btn--claro)
     .kcs-pulsable--chevron   + naranja y chevron a la izquierda (enlaces de menú y pie)

   Es la única desviación deliberada respecto al CSS ya validado: el resultado
   computado debe ser idéntico, pero hay que confirmarlo con regresión visual. */

/* Texto rotativo: dos copias apiladas dentro de una ventana de una línea.
   Recorrido de una línea, que a 16 px con interlineado 1,2 son los 20 px del
   diseño. */
.kcs-rotativo {
  white-space: nowrap;
  display: block;
  overflow: hidden;
  height: 1.2em;
}
.kcs-rotativo__pista {
  display: block;
  transform: translateY(-1.2em);
}
.kcs-rotativo__pista > span { display: block; height: 1.2em; }

@media (prefers-reduced-motion: no-preference) {
  .kcs-rotativo__pista { transition: transform .28s ease; }
}

.kcs-pulsable:is(:hover, :focus-visible) .kcs-rotativo__pista { transform: translateY(0); }

/* Estado de foco: el texto pasa al naranja de marca y aparece el chevron a la
   izquierda, a 13 px del texto, como en la variante State=Focused. El botón
   claro toma el color pero no el chevron. */
.kcs-pulsable--foco:focus-visible,
.kcs-pulsable--chevron:focus-visible {
  color: var(--kcs-color-brand-primary);
  position: relative;
}
.kcs-pulsable--chevron:focus-visible::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 8.694px;
  height: 12px;
  transform: translateY(-50%);
  background: var(--kcs-color-brand-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Estado desactivado: opacidad del 50 %, sin cambio de color. */
.kcs-pulsable[aria-disabled="true"], .kcs-pulsable:disabled { opacity: .5; pointer-events: none; }

/* Recorte de la caja de texto: probado y descartado ----------------------- */
/* Figma da la caja del glifo (un texto de 36 px mide 28 de alto) y el CSS reserva el
   interlineado completo, lo que deja 8-11 px de más en cada texto. `text-box: trim-both`
   lo recorta, y se midió sobre las nueve pantallas en las tres resoluciones:
     · sin recorte               53 % de los elementos coinciden con el diseño
     · trim-both cap alphabetic  54 %
     · trim-both cap text        53 %
   Un punto de mejora, a cambio de acortar las páginas entre 100 y 180 px —lo que descuadra
   todo lo que viene debajo— y de que Firefox lo ignore. No compensa. Se deja anotado con los
   números para no volver a probarlo a ciegas. */