/* =========================================================
   PÁGINAS INTERIORES  (scope: .ct-*)

   Extraído del <style id="riera-ct"> que vivía dentro de
   page-como-trabajamos.php. Salió de ahí porque estas secciones
   son ya bloques ACF (acf/pagina-hero, acf/pagina-columnas,
   acf/pagina-promesa, acf/pagina-datos) y un bloque no puede
   depender del <style> de una plantilla concreta: no lo tendría
   ni en el editor ni si se usa en otra página.

   Fotografía real, dos bandas oscuras y cifras en serif.
   Ni una tarjeta con sombra: la home ya tiene rejillas de
   tarjetas y estas páginas no deben parecerse.
========================================================= */

/* ---- Hero con la foto de fondo. Más bajo que el de la portada (que ocupa
   el viewport entero) para que no compitan, y con el degradado cargado a la
   izquierda, donde cae el texto. ---- */
.ct-hero { position: relative; background: var(--dark); overflow: hidden; padding: 132px 40px 116px; }
.ct-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ct-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.ct-hero::after {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, rgba(12,12,12,.92) 0%, rgba(12,12,12,.70) 52%, rgba(12,12,12,.42) 100%),
		linear-gradient(180deg, rgba(12,12,12,.42) 0%, rgba(12,12,12,0) 42%, rgba(12,12,12,.38) 100%);
}
.ct-hero__i { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
.ct-hero__bc { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; transition: color .2s; }
.ct-hero__bc:hover { color: var(--orange); }
.ct-hero__h1 { font-family: var(--serif); font-size: clamp(48px, 6vw, 84px); font-weight: 500; line-height: .98; letter-spacing: -.025em; color: #fff; margin-bottom: 28px; }
.ct-hero__h1 em { color: var(--orange); font-style: italic; }
.ct-hero__lead { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.80); max-width: 62ch; margin-bottom: 40px; }
.ct-hero__ctas { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; }
/* El secundario del tema es de trazo oscuro: sobre foto hay que aclararlo. */
.ct-hero .btn-g { color: #fff; border-color: rgba(255,255,255,.42); }
.ct-hero .btn-g:hover { color: var(--orange); border-color: var(--orange); }

/* ---- Compromisos a cuatro columnas: foto, número, título y texto. Sin
   caja, sin borde y sin sombra: es prensa, no tarjetas. ---- */
.ct-pledge { background: var(--white); padding: 104px 40px; }
.ct-pledge__i { max-width: 1400px; margin: 0 auto; }
.ct-pledge__head { max-width: 60ch; margin-bottom: 60px; }
.ct-pledge__head .eyebrow { margin-bottom: 16px; }
.ct-pledge__t { font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.ct-pledge__t em { color: var(--orange); font-style: normal; }
.ct-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ct-col__media { aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; background: var(--dark); margin-bottom: 22px; }
.ct-col__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.ct-col:hover .ct-col__media img { transform: scale(1.04); }
.ct-col__n { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; color: var(--orange); display: block; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ct-col__t { font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); margin-bottom: 12px; }
.ct-col__d { font-size: 14px; line-height: 1.7; color: var(--text-2); }

/* ---- Promesa central: segunda banda oscura sobre la foto del equipo ---- */
.ct-promise { position: relative; background: var(--dark); overflow: hidden; padding: 120px 40px; }
.ct-promise__bg { position: absolute; inset: 0; z-index: 0; }
.ct-promise__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: .32; filter: grayscale(.35); }
.ct-promise::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.62) 62%, rgba(15,15,15,.42) 100%); }
.ct-promise__i { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
/* Cae en UNA línea en desktop: sin tope de caracteres y con el cuerpo
   ajustado a lo que admite el ancho de la caja. */
.ct-promise__q { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 50px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; color: #fff; margin-bottom: 26px; }
.ct-promise__q em { color: var(--orange); font-style: normal; }
.ct-promise__s { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.74); max-width: 88ch; margin-bottom: 32px; }
.ct-promise__cta { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.35); transition: color .25s, border-color .25s, gap .25s; }
.ct-promise__cta:hover { color: var(--orange); border-bottom-color: var(--orange); gap: 16px; }

/* ---- Cierre: los datos que sostienen el método ---- */
.ct-facts { background: var(--cream); padding: 96px 40px; }
.ct-facts__i { max-width: 1400px; margin: 0 auto; }
.ct-facts__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 60px; }
.ct-facts__t { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.ct-facts__t em { color: var(--orange); font-style: normal; }
.ct-facts__lead { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 50ch; }
.ct-facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ct-fact { border-top: 2px solid var(--orange); padding: 24px 24px 0 0; }
.ct-fact__n { font-family: var(--serif); font-size: 58px; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.ct-fact__n span { font-size: 24px; letter-spacing: -.01em; }
.ct-fact__l { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 16px 0 10px; line-height: 1.5; }
.ct-fact__d { font-size: 14px; line-height: 1.65; color: var(--text-2); }

@media (max-width: 1100px) {
	.ct-cols { grid-template-columns: repeat(2, 1fr); gap: 36px 30px; }
}
@media (max-width: 1000px) {
	.ct-facts__head { grid-template-columns: 1fr; gap: 32px; }
	.ct-facts__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
	.ct-cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
	.ct-hero { padding: 84px 22px 72px; }
	.ct-pledge, .ct-facts { padding: 72px 22px; }
	.ct-promise { padding: 80px 22px; }
	.ct-pledge__t, .ct-facts__t { font-size: 30px; }
}

/* ========================================================
   ESCALA DE TITULARES · 21-sep-2026
   Misma razón que en servicios.css: esta hoja va después de main.css.
   Ver el bloque de la escala al final de main.css.
======================================================== */
.ct-pledge__t, .ct-facts__t {
  font-size: var(--t-h2); font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
}
.ct-col__t {
  font-size: var(--t-h4); font-weight: 500; line-height: 1.22; letter-spacing: -.015em;
}
.ct-promise__q {
  font-size: var(--t-quote); font-weight: 500; line-height: 1.22; letter-spacing: -.02em;
}
.ct-fact__n {
  font-size: var(--t-num); font-weight: 500; line-height: 1; letter-spacing: -.025em;
}
.ct-fact__n span { font-size: .5em; }

/* ========================================================
   HERO DE CONTACTO A DOS COLUMNAS · 21-sep-2026
   Sustituye al encuadre que se ajustó esta misma mañana sobre el hero
   de portada reutilizado. Víctor: la foto quedaba dura y el texto
   encima no le convencía. Se separan: tinta y texto a la izquierda,
   fotografía en su propia columna a la derecha, sin degradado.

   Las dos columnas van a 1fr cada una y la foto se estira a la altura
   de la caja con `position:absolute`, para que sea el texto el que
   marca el alto y la foto no imponga el suyo. En móvil (<=980px) se
   apilan y la foto pasa a un 4/3 a ancho completo, que en esta toma
   entra casi sin recorte: la original es 3/2.
======================================================== */
.cthero { background: var(--dark); color: #fff; overflow: hidden; }
/* La rejilla NO se limita a un ancho máximo: si se limitara, en pantallas
   anchas quedaría una franja de fondo a la derecha de la foto y parecería un
   fallo. La foto sale a sangre y es el TEXTO el que se alinea.

   El padding izquierdo reproduce exactamente dónde empieza el contenido de
   los módulos de abajo: contenedor de 1440 centrado con 40 de margen, o sea
   max(40, (100vw - 1440) / 2). Por debajo de 1180 esos módulos pasan a 24 de
   margen y el hero los sigue. Si algún día cambia el ancho del contenedor,
   hay que cambiarlo también aquí. */
.cthero__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.cthero__text { padding: 116px 60px 116px max(40px, calc((100vw - 1440px) / 2)); align-self: center; }
.cthero__eye { display: block; margin-bottom: 18px; }
.cthero__h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: 0 0 24px; }
.cthero__h1 em { color: var(--orange); font-style: normal; }
.cthero__sub { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.80); max-width: 52ch; margin: 0 0 38px; }
.cthero__ctas { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; }
.cthero .btn-g { color: #fff; border-color: rgba(255,255,255,.42); }
.cthero .btn-g:hover { color: var(--orange); border-color: var(--orange); }
.cthero__media { position: relative; margin: 0; min-height: 540px; }
.cthero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block; }

@media (max-width: 1180px) {
  .cthero__text { padding: 92px 40px 92px 24px; }
  .cthero__media { min-height: 460px; }
}

@media (max-width: 980px) {
  .cthero__i { grid-template-columns: 1fr; }
  .cthero__text { padding: 84px 24px 46px; }
  .cthero__sub { max-width: none; }
  .cthero__media { min-height: 0; aspect-ratio: 4 / 3; }
  .cthero__media img { position: static; object-position: 44% center; }
}

/* ========================================================
   CONTACTO · HERO EN GRIS Y FORMULARIO EN CLARO · 21-sep-2026
   Víctor veía la página demasiado oscura de arriba abajo: hero negro,
   formulario negro y mapa negro seguidos. Se rompe la secuencia: el
   hero pasa al gris del módulo del formulario y el formulario pasa a
   fondo claro. Así la página respira y el bloque donde hay que hacer
   algo (rellenar el formulario) es el más luminoso.

   La variante clara va con modificador y no tocando `.cform-section`
   a secas porque ese módulo lo usan también el bloque `acf/contact-form`
   y la ficha de equipo, que siguen en oscuro.
======================================================== */
.cthero { background: var(--dark); }

.cform-section--light { background: var(--cream); border-top: 1px solid var(--line); }
.cform-section--light .cform__title { color: var(--ink); }
.cform-section--light .cform__sub { color: var(--text-2); }
.cform-section--light .cform__info-lbl { color: var(--text-2); }
.cform-section--light .cform__info-val { color: var(--ink); }
.cform-section--light .cform__field label { color: var(--text-2); }
.cform-section--light .cform__input,
.cform-section--light .cform__select,
.cform-section--light .cform__textarea {
  background: var(--white); border-color: rgba(0,0,0,.14); color: var(--ink);
}
.cform-section--light .cform__input::placeholder,
.cform-section--light .cform__textarea::placeholder { color: rgba(0,0,0,.34); }
.cform-section--light .cform__input:focus,
.cform-section--light .cform__select:focus,
.cform-section--light .cform__textarea:focus { border-color: var(--orange); background: var(--white); }
.cform-section--light .cform__select option { background: var(--white); color: var(--ink); }
.cform-section--light .cform__check { color: var(--text-2); }

/* ------------------------------------------------------------------
 * Móvil: textos de heros y cajas un punto más grandes (1-oct-2026).
 * Va aquí, al final del último CSS del tema que carga en todo el sitio,
 * para ganar a las reglas de main.css y servicios.css sin tocarlas.
 * Solo sube el texto de lectura; titulares y botones se quedan igual.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	/* Heros */
	.hero__sub { font-size: 17px; }
	.hero__eye, .ss-hero__bc { font-size: 12px; }
	/* La portada pinta su hero con un <style> propio (home-elevate.php), que
	   va después en el HTML: hace falta un punto más de especificidad. */
	body .hf-elevate .hero__sub { font-size: 16.5px; }
	body .hf-elevate .hf-kpis__l { font-size: 11.5px; }
	.ss-kpi__l { font-size: 12px; }

	/* Cajas y tarjetas */
	.pstep__t { font-size: 16px; }
	.pstep__d { font-size: 15px; }
	.scard__desc, .oacard__d, .bcard__ex, .tadv__cd, .cred__d,
	.ss-help__bd, .ss-flow__sd { font-size: 15.5px; }
	.ncard__d, .ss-cred__d, .ss-reto__li, .about__li { font-size: 16px; }
	.aud__cd { font-size: 15px; }
	.tcard__role { font-size: 14.5px; }
	.ss-help__btag, .ncard__tag { font-size: 11px; }
	.pcard__date { font-size: 11px; }
}

/* ------------------------------------------------------------------
 * Móvil: botones y enlaces centrados, con el mismo criterio en todo el
 * sitio (1-oct-2026). Los botones ocupan el 85% de la pantalla con el texto
 * centrado; los enlaces subrayados se centran a su ancho, porque estirados
 * la línea de debajo cruzaría toda la pantalla. El enlace dentro de las
 * tarjetas de áreas (.oarea) se queda alineado con su tarjeta.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.btn-p, .btn-outline, .calcpromo__cta,
	body .cform-section .fluentform .ff-btn-submit,
	body .cform__card .fluentform .ff-btn-submit {
		display: flex; width: min(100%, 85vw); max-width: 100%; box-sizing: border-box;
		margin-left: auto; margin-right: auto;
		justify-content: center; text-align: center;
	}
	.btn-g, .press__more, .founder__link {
		display: flex; width: fit-content; max-width: 85%;
		margin-left: auto; margin-right: auto;
		justify-content: center; text-align: center;
	}
	.oarea .btn-g { margin-left: 0; margin-right: 0; }
	/* Si el botón y el enlace iban en fila, cada uno pasa a su línea. */
	:is(div, p):has(> .btn-p, > .btn-g, > .btn-outline):not(.oarea) { flex-wrap: wrap; row-gap: 18px; }
}

/* Portada en móvil: el titular sube. El hero arrancaba 120px por debajo de
   la cabecera; va después del <style> de home-elevate.php, de ahí el body. */
@media (max-width: 900px) {
	body .hf-elevate .hero__inner { padding-top: 64px; }
}