/* ==========================================================================
   ORCELIS — Sistema visual
   Sin dependencias externas. Fuente autoalojada. Iconos SVG en línea.
   Paleta real de marca (kit del logotipo): ámbar #F5B60F sobre tinta #0F2231.

   ⚠️ EL ÁMBAR SOLO ADMITE TEXTO OSCURO ENCIMA (10,4:1).
      Con texto blanco da 1,8:1 y suspende WCAG.
   ========================================================================== */

/* Figtree variable, subconjunto latino, autoalojada. SIL Open Font License.
   Única fuente del sitio (regla de rendimiento del proyecto): 20,2 KB cubren
   todo el rango 400–800. Se probó Lexend y se descartó: es un 15 % más ancha,
   pesa el doble y afloja el bloque del titular. El archivo queda en
   /fuentes-candidatas/ por si algún día se reabre la decisión. */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/figtree-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--orcelis-ambar: #F5B60F;
	--orcelis-ambar-hover: #DDA30B;
	--orcelis-tinta: #0F2231;
	--orcelis-tinta-claro: #17334A;
	--orcelis-crema: #FBF7EF;
	--orcelis-texto: #111111;
	--orcelis-verde: #2E7D32;
	--orcelis-alerta: #C62828;
	--orcelis-borde: #E6E2D9;
	--orcelis-radio: 14px;
	--orcelis-ancho: 1180px;
	/* Sombras contenidas: el estilo de marca se apoya en bordes finos y aire,
	   no en sombras pesadas (referencia: guía visual de la v2). */
	--orcelis-sombra: 0 1px 2px rgba(15,34,49,.04), 0 4px 14px rgba(15,34,49,.05);
	--orcelis-sombra-alta: 0 2px 4px rgba(15,34,49,.06), 0 14px 36px rgba(15,34,49,.10);
	--orcelis-papel: #FDFBF7; /* fondo cálido de base */
	--orcelis-ease: cubic-bezier(.2,.7,.3,1);
}

body {
	font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--orcelis-texto);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	/* GeneratePress trae un gris frío por defecto que choca con el crema cálido
	   de la marca. Base en papel cálido; alternancia papel ↔ crema ↔ tinta. */
	background: var(--orcelis-papel);
}
.site-content, .site-main { background: var(--orcelis-papel); }

/* Etiqueta de sección.
   ── REGLA DE MARCA 2 ──────────────────────────────────────────────────────
   El ámbar es del logotipo y de los CTAs, NO del texto. Sobre fondo claro no
   llega al contraste que exige WCAG para texto pequeño.
   Aquí el TEXTO va en el gris oscuro del tema (8,45:1) y el ámbar se queda
   solo en el guioncito decorativo del ::before, que no es texto.
   (Antes iba en #9A7A12 y daba 3,8:1 — suspendía.)
   ────────────────────────────────────────────────────────────────────────── */
.orcelis-eyebrow {
	display: flex; align-items: center; gap: .6rem; justify-content: center;
	font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: #3F4A56; margin: 0 0 .7rem;
}
.orcelis-eyebrow::before {
	content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--orcelis-ambar); flex: 0 0 auto;
}
.orcelis-seccion--tinta .orcelis-eyebrow { color: var(--orcelis-ambar); }
.orcelis-eyebrow--izq { justify-content: flex-start; }
/* Titulares.
   El prefijo `body` NO es decorativo: GeneratePress declara `h1 { font-weight:400;
   line-height:1.2em }` en su main.min.css, que se carga DESPUÉS de nuestro CSS
   crítico en línea. Con la misma especificidad gana el último, así que el H1 de
   la home llevaba desde el principio pintándose en redonda (400) en vez de en la
   negra (800) que pide el sistema tipográfico. Detectado midiendo el render real
   (2026-08-04), no leyendo el CSS: la declaración estaba puesta y parecía correcta.
   Con `body h1` (0,0,1,1) ganamos por especificidad y deja de depender del orden.
   Afecta igual a h2 y h3: TODA la jerarquía se estaba pintando en 400, que es
   por lo que los titulares de sección no destacaban sobre el texto corrido.
   Los pesos van al tope de Figtree (800) en H1 y H2, y 700 en H3. */
body h1 { font-weight: 800; line-height: 1.08; }
body h2 { font-weight: 800; line-height: 1.12; }
body h3 { font-weight: 700; line-height: 1.25; }
h1, h2, h3 { letter-spacing: -.028em; }
h2 { margin-bottom: .6em; }

/* Utilidad de sección: centra el contenido y da aire lateral.
   Los hijos se limitan al ancho de contenido para que TODO quede alineado:
   sin esto, los bloques sin max-width propio se salían por la izquierda
   (los bloques alignfull de Gutenberg ensanchan la caja del contenido). */
.orcelis-seccion { padding: clamp(3rem, 6vw, 5.5rem) 1.25rem; }
.orcelis-seccion > * { max-width: var(--orcelis-ancho); margin-inline: auto; }
.orcelis-seccion--crema { background: var(--orcelis-crema); border-block: 1px solid rgba(15,34,49,.06); }
.orcelis-seccion--tinta { background: var(--orcelis-tinta); color: #fff; }
.orcelis-seccion--tinta h2, .orcelis-seccion--tinta h3 { color: #fff; }

/* -------- Landing: fuera el contenedor blanco de GeneratePress -------- */
.orcelis-landing .site-content,
.orcelis-landing .content-area,
.orcelis-landing .site-main,
.orcelis-landing .site-main > article,
.orcelis-landing .inside-article,
.orcelis-landing .entry-content {
	padding: 0 !important; margin: 0 !important; background: none !important;
	box-shadow: none !important; border: 0 !important; max-width: none;
}
.orcelis-landing .entry-content > *:not([class*="align"]):not(.orcelis-countdown) {
	padding-left: max(1.25rem, calc((100% - var(--orcelis-ancho)) / 2));
	padding-right: max(1.25rem, calc((100% - var(--orcelis-ancho)) / 2));
}

/* -------- Cabecera -------- */
.orcelis-logo { display: inline-flex; align-items: center; }
.orcelis-logo img, .orcelis-logo svg { height: 38px; width: auto; display: block; }
.site-header { border-bottom: 1px solid var(--orcelis-borde); }
.main-navigation a { font-weight: 600; transition: color .15s var(--orcelis-ease); }

/* -------- Botones -------- */
.orcelis-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95em 1.8em; border-radius: 999px;
	font-weight: 700; font-size: 1.02rem; line-height: 1.2;
	text-decoration: none; cursor: pointer; border: 2px solid transparent;
	transition: background-color .18s var(--orcelis-ease), transform .12s var(--orcelis-ease), box-shadow .18s var(--orcelis-ease);
}
/* REGLA DE MARCA 3 — el botón toma sus colores de las variables que fija
   config.php ('estilo_cta': 'ambar' o 'verde'). Ambas combinaciones cumplen AA.
   Texto blanco sobre ámbar da 1,81:1 y NO se usa nunca. */
.orcelis-btn--primario {
	background: var(--orcelis-cta-fondo); color: var(--orcelis-cta-texto);
	box-shadow: 0 6px 18px var(--orcelis-cta-sombra);
}
.orcelis-btn--primario:hover {
	background: var(--orcelis-cta-fondo-hover); color: var(--orcelis-cta-texto);
	transform: translateY(-2px); box-shadow: 0 10px 26px var(--orcelis-cta-sombra);
}

.orcelis-btn--secundario {
	background: transparent; color: var(--orcelis-tinta); border-color: rgba(15,34,49,.28);
}
.orcelis-btn--secundario:hover {
	background: var(--orcelis-tinta); color: #fff; border-color: var(--orcelis-tinta); transform: translateY(-2px);
}
.orcelis-seccion--tinta .orcelis-btn--secundario { color: #fff; border-color: rgba(255,255,255,.45); }
.orcelis-seccion--tinta .orcelis-btn--secundario:hover { background: #fff; color: var(--orcelis-tinta); }
.orcelis-btn:active { transform: translateY(0); }
.orcelis-btn[data-orcelis-pendiente] { opacity: .5; }
.orcelis-microcopy { font-size: .92rem; color: #5C6773; margin-top: .7em; }

/* -------- Hero -------- */
.orcelis-hero {
	padding: clamp(2.5rem, 5vw, 4.5rem) max(1.25rem, calc((100% - var(--orcelis-ancho)) / 2)) clamp(3rem, 5vw, 4.5rem);
	background: radial-gradient(1200px 500px at 80% -10%, #FDF3D8 0%, transparent 60%), var(--orcelis-crema);
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 3.5rem; align-items: center;
}
.orcelis-hero__texto > *:first-child { margin-top: 0; }
/* Hero: bloque compacto. El interlineado corto (1.05) y el espaciado negativo
   son lo que convierte tres o cuatro líneas sueltas en UNA masa que se lee de un
   golpe. `text-wrap: balance` evita la última línea huérfana de dos palabras. */
.orcelis-hero h1 {
	margin: 0 0 .5em;
	font-size: clamp(2.05rem, 3vw + .85rem, 2.9rem);
	line-height: 1.05;
	letter-spacing: -.032em;
	text-wrap: balance;
}

.orcelis-hero__texto p { max-width: 50ch; font-size: 1.1rem; color: #35404B; }
.orcelis-hero .orcelis-microcopy { margin-bottom: 1.6rem; }
.orcelis-hero__media img {
	width: 100%; height: auto; border-radius: var(--orcelis-radio);
	box-shadow: var(--orcelis-sombra-alta); display: block;
}
.orcelis-hero__media figure { margin: 0; }
.orcelis-hero__media .orcelis-placeholder-bloqueante {
	display: flex; align-items: center; justify-content: center; min-height: 320px; margin: 0;
}

/* Tira de confianza */
.orcelis-confianza { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.orcelis-confianza li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; color: #35404B; }
.orcelis-confianza__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: 0 0 auto;
	background: var(--orcelis-verde); color: #fff; font-size: .72rem; font-weight: 800;
}

/* -------- Barra de urgencia (sobre la cabecera) -------- */
.orcelis-barra-urgencia {
	display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: center;
	background: var(--orcelis-tinta); color: #fff;
	padding: .6rem 1.25rem; font-size: .92rem; line-height: 1.4; text-align: center;
}
.orcelis-barra-urgencia strong { color: var(--orcelis-ambar); font-weight: 800; }
.orcelis-barra-urgencia__enlace { color: var(--orcelis-ambar); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; white-space: nowrap; }
.orcelis-barra-urgencia__enlace:hover { color: #fff; }

/* -------- Banda regulatoria / countdown -------- */
.orcelis-countdown {
	display: flex; gap: 1rem; align-items: center; justify-content: center;
	background: var(--orcelis-tinta); color: #fff;
	padding: 1.6rem max(1.25rem, calc((100% - 900px) / 2)); text-align: center;
	border-top: 4px solid var(--orcelis-ambar);
}
.orcelis-countdown__icono { font-size: 1.6rem; flex: 0 0 auto; }
.orcelis-countdown__texto { margin: 0; max-width: 62ch; font-size: 1.05rem; }
.orcelis-countdown__texto strong { color: var(--orcelis-ambar); }
.orcelis-countdown__dias { color: var(--orcelis-ambar); font-weight: 800; }

/* -------- Bloques de beneficio -------- */
.orcelis-beneficios { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.orcelis-beneficio {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
	max-width: var(--orcelis-ancho); margin: 0 auto clamp(3rem, 6vw, 5rem);
	padding: 0 1.25rem;
}
.orcelis-beneficio:last-child { margin-bottom: 0; }
/* La alternancia y el estilo de la imagen se aplican al SEGUNDO hijo del bloque,
   sea cual sea: el <div class="orcelis-beneficio__media"> original o un bloque
   Imagen de Gutenberg (<figure>) puesto desde el editor.
   Sin esto, al sustituir el marcador por una imagen se perdía la alternancia. */
.orcelis-beneficio:nth-of-type(even) .orcelis-beneficio__media,
.orcelis-beneficio:nth-of-type(even) > *:nth-child(2) { order: -1; }
.orcelis-beneficio__media img,
.orcelis-beneficio > *:nth-child(2) img {
	width: 100%; height: auto; border-radius: var(--orcelis-radio); box-shadow: var(--orcelis-sombra); display: block;
}
.orcelis-beneficio > figure { margin: 0; }
.orcelis-beneficio__etiqueta {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--orcelis-tinta); font-size: .78rem; margin: 0 0 .7rem;
}
.orcelis-beneficio__etiqueta::before {
	content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--orcelis-ambar);
}
.orcelis-beneficio h2 { margin-top: 0; }
.orcelis-beneficio p { color: #35404B; }

/* -------- Rejilla de funcionalidades -------- */
.orcelis-funcionalidades {
	list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: var(--orcelis-ancho);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem;
}
.orcelis-funcionalidades li {
	display: flex; align-items: center; gap: .75rem; font-size: 1rem; font-weight: 500;
	background: #fff; border: 1px solid var(--orcelis-borde); border-radius: 10px; padding: .85rem 1.1rem;
	transition: transform .15s var(--orcelis-ease), box-shadow .15s var(--orcelis-ease);
}
.orcelis-funcionalidades li:hover { border-color: rgba(245,182,15,.6); background: #fff; box-shadow: var(--orcelis-sombra); }
.orcelis-funcionalidades__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.5rem; height: 1.5rem; border-radius: 8px; flex: 0 0 auto;
	/* Verde profundo, no el verde medio: sobre el tinte al 12% el #2E7D32
	   daba 4,24:1 y suspendía para texto pequeño. Con #14532D sube a 7,53:1. */
	background: rgba(46,125,50,.12); color: #14532D; font-size: .8rem; font-weight: 800;
}

/* -------- Cómo funciona (pasos numerados) -------- */
/* `auto` en los laterales, no 0: si no, el shorthand pisa el centrado que da
   `.orcelis-seccion > *` y la rejilla se pega al borde izquierdo. */
.orcelis-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2.5rem auto 0; max-width: var(--orcelis-ancho); }
.orcelis-paso__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: 1rem;
	background: var(--orcelis-ambar); color: var(--orcelis-texto);
	font-weight: 800; font-size: 1.25rem;
}
.orcelis-paso h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.orcelis-paso p { margin: 0; color: #35404B; }

/* -------- Tarjetas de segmento -------- */
.orcelis-tarjetas {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
	max-width: var(--orcelis-ancho); margin: 2.5rem auto 0;
}
.orcelis-tarjeta {
	background: #fff; border: 1px solid var(--orcelis-borde); border-radius: var(--orcelis-radio);
	padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: .9rem;
	transition: transform .18s var(--orcelis-ease), box-shadow .18s var(--orcelis-ease);
}
.orcelis-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--orcelis-sombra-alta); border-color: rgba(245,182,15,.55); }
.orcelis-tarjeta h3 { margin: 0; font-size: 1.3rem; }
.orcelis-tarjeta p { margin: 0; color: #35404B; flex: 1; }
.orcelis-tarjeta .orcelis-btn { align-self: flex-start; }
.orcelis-tarjeta__icono {
	width: 3rem; height: 3rem; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	background: rgba(245,182,15,.16); color: var(--orcelis-tinta);
}
.orcelis-tarjeta__icono svg { width: 1.6rem; height: 1.6rem; }

/* -------- Diferenciador -------- */
.orcelis-diferenciador { text-align: center; }
.orcelis-diferenciador h2 { max-width: 22ch; margin-inline: auto; }
.orcelis-diferenciador p { max-width: 68ch; margin-inline: auto; color: rgba(255,255,255,.86); font-size: 1.08rem; }
/* El dato que sustenta el titular: destacado en ámbar, justo debajo. */
.orcelis-diferenciador__dato {
	color: var(--orcelis-ambar) !important; font-size: 1.18rem !important; font-weight: 600;
	margin-top: -.2rem; margin-bottom: 1.4rem;
}

/* -------- FAQ -------- */
.orcelis-faq { max-width: 820px; margin: 2rem auto 0; }
.orcelis-faq__item { border-bottom: 1px solid var(--orcelis-borde); }
.orcelis-faq__pregunta {
	cursor: pointer; font-weight: 700; font-size: 1.06rem; padding: 1.15rem 0; list-style: none;
	display: flex; align-items: flex-start; gap: .8rem; transition: color .15s var(--orcelis-ease);
}
.orcelis-faq__pregunta::-webkit-details-marker { display: none; }
.orcelis-faq__pregunta::before {
	content: "+"; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	background: var(--orcelis-crema); color: var(--orcelis-tinta);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; transition: background .15s var(--orcelis-ease), transform .2s var(--orcelis-ease);
}
.orcelis-faq__pregunta:hover::before { background: var(--orcelis-ambar); }
.orcelis-faq__item[open] .orcelis-faq__pregunta::before { content: "−"; background: var(--orcelis-ambar); }
.orcelis-faq__respuesta { padding: 0 0 1.2rem 2.4rem; color: #35404B; }
.orcelis-faq__respuesta p { margin: 0; }

/* -------- CTA intermedio y final -------- */
.orcelis-cta-intermedio {
	max-width: var(--orcelis-ancho); margin: 0 auto; text-align: center;
	padding: 2.5rem 1.25rem 0; /* sin padding inferior: ya lo pone la sección */
}
.orcelis-cta-intermedio .orcelis-microcopy { margin-bottom: 0; }
.orcelis-cta-final { background: var(--orcelis-ambar); color: var(--orcelis-texto); text-align: center; }
.orcelis-cta-final h2 { color: var(--orcelis-texto); max-width: 20ch; margin-inline: auto; }
.orcelis-cta-final .orcelis-microcopy { color: rgba(17,17,17,.72); }
.orcelis-cta-final .orcelis-btn--primario {
	background: var(--orcelis-tinta) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(15,34,49,.28);
}
.orcelis-cta-final .orcelis-btn--primario:hover { background: #071722; color: #fff; }
/* ── REGLA DE MARCA 2 ───────────────────────────────────────────────────────
   El botón secundario sobre el ámbar del CTA final DEBE ir en texto oscuro.
   La página /asesores/ trae dos CTAs en esta sección y el secundario heredaba
   `color:#fff` de la variante --tinta: blanco sobre ámbar da 1,81:1, que es la
   combinación prohibida del proyecto. Detectado midiendo el render, no leyendo
   el CSS: en la home no salía porque allí el CTA final solo tiene un botón.
   ────────────────────────────────────────────────────────────────────────── */
.orcelis-cta-final .orcelis-btn--secundario {
	color: var(--orcelis-texto);
	border-color: rgba(17,17,17,.42);
	background: transparent;
}
.orcelis-cta-final .orcelis-btn--secundario:hover {
	background: var(--orcelis-texto); color: #fff; border-color: var(--orcelis-texto);
}

/* -------- Pie de página -------- */
.orcelis-footer { background: var(--orcelis-tinta); color: rgba(255,255,255,.78); font-size: .95rem; }
.orcelis-footer__inner {
	max-width: var(--orcelis-ancho); margin: 0 auto; padding: 3.5rem 1.25rem 2rem;
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem;
}
.orcelis-footer h3 {
	color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
	margin: 0 0 1.1rem; font-weight: 800;
}
.orcelis-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
/* :not(.orcelis-btn) es imprescindible. Sin él, esta regla pintaba el CTA del
   pie de blanco sobre ámbar → 1,81:1, exactamente lo que prohíbe la regla 3. */
.orcelis-footer a:not(.orcelis-btn) { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s var(--orcelis-ease); }
.orcelis-footer a:not(.orcelis-btn):hover { color: var(--orcelis-ambar); }
.orcelis-footer__logo img { height: 34px; width: auto; margin-bottom: 1.1rem; }
.orcelis-footer__claim { max-width: 34ch; line-height: 1.6; }
.orcelis-footer__legal {
	border-top: 1px solid rgba(255,255,255,.14); margin-top: 1rem;
	padding: 1.25rem 1.25rem 2rem; text-align: center; font-size: .87rem; color: rgba(255,255,255,.6);
	max-width: var(--orcelis-ancho); margin-inline: auto;
}
.orcelis-footer__legal a { color: rgba(255,255,255,.7); }

/* -------- Verificador -------- */
/* La página del verificador lleva .orcelis-landing, que anula el padding de los
   contenedores de GeneratePress: el aire hasta el pie hay que darlo aquí. */
/* El aire va como MARGEN del componente, no como padding del <main>: la regla
   de .orcelis-landing anula el padding de .site-main con !important y se lo
   comía, dejando el verificador pegado al pie. */
.orcelis-verificador-intro { padding-top: clamp(2rem, 5vw, 3.5rem); }
.orcelis-verificador {
	max-width: 660px; padding: 0 1.25rem;
	margin: 2rem auto clamp(4.5rem, 9vw, 8rem);
}
/* GeneratePress anula el margen inferior del último hijo de .site-main con
   `.separate-containers .site-main > :last-child { margin-bottom: 0 }`, que es
   más específica que la de arriba. Como el verificador SIEMPRE es el último
   elemento de su página, se quedaba pegado al pie. */
.orcelis-verificador-pagina > .orcelis-verificador:last-child {
	margin-bottom: clamp(4.5rem, 9vw, 8rem) !important;
}
.orcelis-vf__progreso { background: rgba(15,34,49,.1); border-radius: 999px; height: 8px; overflow: hidden; margin-bottom: .6rem; }
.orcelis-vf__progreso span { display: block; height: 100%; background: var(--orcelis-ambar); transition: width .25s var(--orcelis-ease); }
.orcelis-vf__contador { font-size: .85rem; color: #5C6773; margin: 0 0 1.6rem; font-weight: 600; }
.orcelis-vf__titulo { margin-top: 0; }
.orcelis-vf__opciones { display: flex; flex-direction: column; gap: .8rem; }
.orcelis-vf__opcion {
	text-align: left; padding: 1.1rem 1.3rem; border: 2px solid var(--orcelis-borde); border-radius: var(--orcelis-radio);
	background: #fff; color: var(--orcelis-texto); cursor: pointer; font-size: 1.05rem; font-family: inherit; font-weight: 500;
	transition: border-color .15s var(--orcelis-ease), background .15s var(--orcelis-ease), transform .12s var(--orcelis-ease);
}
/* El `color` en :hover es OBLIGATORIO. GeneratePress pinta los <button>:hover en
   blanco, y sin declararlo el texto de la opción desaparecía al pasar el ratón.
   Es la misma trampa que en el estado normal; se coló al reescribir el CSS. */
.orcelis-vf__opcion:hover,
.orcelis-vf__opcion:focus-visible {
	border-color: var(--orcelis-ambar); background: #FFFCF3;
	color: var(--orcelis-texto); transform: translateX(3px);
}
.orcelis-vf__superficie { display: grid; gap: 1rem; margin: 1.2rem 0; }
.orcelis-vf__campo { display: flex; align-items: center; gap: .7rem; }
.orcelis-vf__campo span { min-width: 110px; font-weight: 600; }
.orcelis-vf__campo input, .orcelis-vf__select, .orcelis-vf__email {
	padding: .8em; border: 2px solid var(--orcelis-borde); border-radius: 10px; font-size: 1rem; font-family: inherit;
	transition: border-color .15s var(--orcelis-ease);
}
.orcelis-vf__campo input:focus, .orcelis-vf__select:focus, .orcelis-vf__email:focus { outline: none; border-color: var(--orcelis-ambar); }
.orcelis-vf__select, .orcelis-vf__email { width: 100%; box-sizing: border-box; }
.orcelis-vf__nav { display: flex; justify-content: space-between; margin-top: 1.6rem; gap: 1rem; align-items: center; }
.orcelis-vf__atras { background: none; border: none; color: #5C6773; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; }
.orcelis-vf__atras:hover { color: var(--orcelis-tinta); }
.orcelis-vf__rgpd { display: flex; gap: .7rem; align-items: flex-start; margin: 1.2rem 0; font-size: .92rem; color: #35404B; }
.orcelis-vf__rgpd input { margin-top: .15rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--orcelis-verde); }
/* Casilla OPCIONAL de novedades: separada de la obligatoria por una línea, para
   que se vea a simple vista que son dos consentimientos distintos y que este no
   hace falta para recibir el informe. El color mantiene contraste AA (7.1:1). */
.orcelis-vf__rgpd--opcional { margin-top: -.35rem; padding-top: 1rem; border-top: 1px solid var(--orcelis-borde); font-size: .86rem; color: #45525F; }
/* Pie de fuentes del veredicto. Plegado por defecto: quien solo quiere el
   resultado no lo ve, y quien duda lo abre. Contraste AA en todo el bloque. */
.orcelis-vf__fuentes {
	margin: 2rem 0 0; padding-top: 1.2rem;
	border-top: 1px solid var(--orcelis-borde);
	font-size: .88rem; color: #35404B;
}
.orcelis-vf__fuentes > summary {
	cursor: pointer; font-weight: 700; color: var(--orcelis-tinta-claro);
	list-style: none; display: flex; align-items: center; gap: .45rem;
}
.orcelis-vf__fuentes > summary::-webkit-details-marker { display: none; }
.orcelis-vf__fuentes > summary::before {
	content: "▸"; font-size: .8em; transition: transform .15s var(--orcelis-ease);
}
.orcelis-vf__fuentes[open] > summary::before { transform: rotate(90deg); }
.orcelis-vf__fuentes > summary:focus-visible { outline: 2px solid var(--orcelis-tinta); outline-offset: 3px; }
.orcelis-vf__fuentes ul { margin: .9rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.orcelis-vf__fuentes a { color: var(--orcelis-tinta-claro); text-decoration: underline; }
.orcelis-vf__revisado { margin: .9rem 0 0; font-size: .82rem; color: #45525F; }
.orcelis-vf__aviso-legal { margin: .5rem 0 0; font-size: .82rem; color: #45525F; }
.orcelis-vf__legal { margin: -.4rem 0 1.2rem; font-size: .82rem; color: #45525F; }
.orcelis-vf__legal a { color: var(--orcelis-tinta-claro); text-decoration: underline; }
.orcelis-vf__error { color: var(--orcelis-alerta); font-weight: 700; }
/* Resultado */
.orcelis-vf__resultado h2 { margin-top: 0; }
.orcelis-vf__obligaciones { list-style: none; padding: 0; display: grid; gap: .8rem; }
.orcelis-vf__obligaciones li { padding: 1rem 1.15rem; border-radius: 10px; background: var(--orcelis-crema); border-left: 4px solid var(--orcelis-borde); }
.orcelis-vf__obligaciones li.es-vigor { border-left-color: var(--orcelis-alerta); }
.orcelis-vf__obligaciones li.severidad-alta { border-left-color: var(--orcelis-alerta); background: #FDF1F0; }
.orcelis-vf__badge { display: inline-block; background: var(--orcelis-alerta); color: #fff; font-size: .7rem; font-weight: 800; padding: .2em .6em; border-radius: 5px; vertical-align: middle; letter-spacing: .04em; }
.orcelis-vf__nota { background: var(--orcelis-tinta); color: #fff; padding: 1rem 1.15rem; border-radius: 10px; }
.orcelis-vf__nota strong { color: var(--orcelis-ambar); }
.orcelis-vf__riesgo { margin: 1.3rem 0; padding: 1.15rem; border-radius: 10px; }
.orcelis-vf__riesgo.riesgo--alto { background: #FDF1F0; }
.orcelis-vf__riesgo.riesgo--medio { background: #FFF8E6; }
.orcelis-vf__riesgo.riesgo--software { background: #EDF4FB; }
.orcelis-vf__sancion { font-weight: 700; color: var(--orcelis-alerta); }
.orcelis-vf__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 .5rem; }
.orcelis-vf__enviado { font-size: .93rem; color: #5C6773; }
.orcelis-vf__compartir { border-top: 1px solid var(--orcelis-borde); margin-top: 1.8rem; padding-top: 1.2rem; }
.orcelis-vf__wa, .orcelis-vf__copiar {
	display: inline-block; margin-right: .8rem; color: var(--orcelis-tinta); background: #fff;
	border: 2px solid var(--orcelis-borde); border-radius: 999px; padding: .55em 1.2em; cursor: pointer;
	text-decoration: none; font-family: inherit; font-size: .95rem; font-weight: 600;
	transition: border-color .15s var(--orcelis-ease), background .15s var(--orcelis-ease);
}
.orcelis-vf__wa:hover, .orcelis-vf__copiar:hover { border-color: var(--orcelis-ambar); background: #FFFCF3; color: var(--orcelis-tinta); }

/* -------- Formularios -------- */
.orcelis-form { max-width: 580px; }
.orcelis-form__campo { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.orcelis-form__campo label { font-weight: 700; font-size: .95rem; }
.orcelis-form input[type="text"], .orcelis-form input[type="email"], .orcelis-form input[type="tel"], .orcelis-form textarea {
	padding: .8em; border: 2px solid var(--orcelis-borde); border-radius: 10px; font-size: 1rem;
	font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color .15s var(--orcelis-ease);
}
.orcelis-form input:focus, .orcelis-form textarea:focus { outline: none; border-color: var(--orcelis-ambar); }
.orcelis-form__rgpd { display: flex; margin: .5rem 0 1.4rem; font-size: .92rem; color: #35404B; }
.orcelis-form__rgpd label { display: flex; gap: .7rem; align-items: flex-start; }
.orcelis-form__ok { background: #EEF7EE; border-left: 4px solid var(--orcelis-verde); padding: 1rem 1.15rem; border-radius: 10px; }

/* -------- Blog -------- */
.orcelis-blog-autor { color: #5C6773; font-size: .95rem; margin: .3rem 0 1.6rem; font-weight: 600; }
.orcelis-blog-cta { margin-top: 2.5rem; padding: 2rem; background: var(--orcelis-crema); border-radius: var(--orcelis-radio); text-align: center; }
.orcelis-blog-cta p { margin: 0 0 1.1rem; }
/* #7A828C daba 3,89:1 sobre blanco y suspendía AA en TODAS las páginas.
   #5C6773 da 5,74:1 y sigue leyéndose como texto secundario. */
.orcelis-breadcrumbs { font-size: .87rem; color: #5C6773; margin-bottom: 1rem; }
.orcelis-breadcrumbs a { color: var(--orcelis-tinta); }

/* -------- Título del listado del blog y de los archivos -------- */
.orcelis-titulo-listado {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	margin: 0 0 1.6rem;
}

/* -------- Placeholder de contenido pendiente -------- */
.orcelis-placeholder-bloqueante {
	border: 2px dashed var(--orcelis-alerta); background: #FDF1F0; color: #7A1A1A;
	padding: 1.35rem; border-radius: var(--orcelis-radio); text-align: center; font-weight: 600;
}
.orcelis-aviso-editor { color: var(--orcelis-alerta); font-size: .82rem; }

/* -------- CTA sticky móvil -------- */
.orcelis-sticky-movil { display: none; }

/* -------- Responsive -------- */
@media (max-width: 1000px) {
	.orcelis-hero { grid-template-columns: 1fr; gap: 2.5rem; }
	.orcelis-hero__texto p { max-width: none; }
	.orcelis-hero__media .orcelis-placeholder-bloqueante { min-height: 200px; }
	.orcelis-funcionalidades { grid-template-columns: repeat(2, 1fr); }
	.orcelis-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
	.orcelis-beneficio { grid-template-columns: 1fr; gap: 1.5rem; }
	.orcelis-beneficio:nth-of-type(even) .orcelis-beneficio__media { order: 0; }
	.orcelis-tarjetas, .orcelis-pasos, .orcelis-funcionalidades { grid-template-columns: 1fr; }
	.orcelis-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
	.orcelis-barra-urgencia { font-size: .84rem; padding: .5rem .8rem; }
	.orcelis-confianza { flex-direction: column; gap: .5rem; }
	.orcelis-countdown { flex-direction: column; gap: .6rem; }
	.orcelis-vf__campo span { min-width: 92px; }
	.orcelis-faq__respuesta { padding-left: 0; }
	.orcelis-sticky-movil {
		display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
		background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
		border-top: 1px solid var(--orcelis-borde); padding: .7rem 1rem;
		box-shadow: 0 -4px 20px rgba(15,34,49,.1);
	}
	.orcelis-sticky-movil .orcelis-btn { display: flex; width: 100%; }
	body { padding-bottom: 5rem; }
}

/* -------- Accesibilidad: foco visible -------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--orcelis-ambar); outline-offset: 2px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	/* Anular la duración no anula el desplazamiento: sin esto el botón sigue
	   saltando, solo que de golpe. */
	.orcelis-btn:hover, .orcelis-btn:focus-visible { transform: none !important; }
}

/* -------- Lista de espera de la v2 (modo pre-lanzamiento) --------
   Página sobria a propósito: quien llega aquí venía a registrarse y se
   encuentra con que no puede. Lo que necesita es una explicación clara y una
   salida, no una segunda landing que le vuelva a vender el producto. */
.orcelis-espera {
	max-width: 660px; margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.orcelis-espera h1 { margin: 0 0 .6em; }
.orcelis-espera__sub { font-size: 1.1rem; color: #35404B; max-width: 54ch; }
.orcelis-espera .orcelis-confianza { margin-top: 1.8rem; }

.orcelis-espera__form {
	margin-top: 2.2rem; padding: clamp(1.4rem, 3vw, 2rem);
	background: var(--orcelis-crema); border: 1px solid var(--orcelis-borde);
	border-radius: var(--orcelis-radio);
	display: grid; gap: 1rem;
}
.orcelis-espera__form p { margin: 0; }
.orcelis-espera__form label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: .35rem; }
.orcelis-espera__form input[type="text"],
.orcelis-espera__form input[type="email"],
.orcelis-espera__form input[type="tel"] {
	width: 100%; padding: .8rem .9rem; font: inherit;
	border: 1px solid var(--orcelis-borde); border-radius: 10px; background: #fff;
}
.orcelis-espera__form input:focus-visible {
	outline: 2px solid var(--orcelis-tinta); outline-offset: 1px; border-color: var(--orcelis-tinta);
}
.orcelis-opcional { font-weight: 400; color: #5C6773; }

.orcelis-espera__rgpd label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-size: .9rem; color: #35404B; }
.orcelis-espera__rgpd input { margin-top: .2rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--orcelis-verde); }
.orcelis-espera__error { color: var(--orcelis-alerta); font-weight: 700; margin-top: 1.2rem; }

/* Trampa para bots: fuera de pantalla, pero NO display:none — algunos bots
   detectan y esquivan los campos ocultos con display. */
.orcelis-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.orcelis-espera__exito { border-left: 4px solid var(--orcelis-verde); padding-left: 1.3rem; }
.orcelis-espera__mientras { margin-top: 1.6rem; font-size: .96rem; color: #35404B; }

/* -------- /asesores/ — landing profesional --------
   Reutiliza el sistema de la home (hero de dos columnas, .orcelis-beneficio,
   .orcelis-faq). Aquí solo van los ajustes propios del perfil técnico: el H2 del
   hero es descriptivo y largo, y los CTAs van en pareja. */

/* El hero de asesores lleva H1 + H2 seguidos. El H2 no es un titular de sección:
   es la bajada, y con el peso 800 del sistema competiría con el H1. */
.orcelis-hero--asesores .orcelis-hero__sub {
	font-weight: 500;
	font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem);
	line-height: 1.5;
	letter-spacing: 0;
	color: #35404B;
	max-width: 54ch;
	margin: 0 0 1.6rem;
}

/* Pareja de CTAs: demo primero, trial después. En móvil se apilan a ancho
   completo para que el pulgar no falle. */
/* T7.1 — El microcopy «30 minutos · Con un agrónomo...» quedaba pegado a los
   botones. 1.25rem de separación y, en móvil, 1rem entre los dos botones para
   que no se toquen al apilarse. */
.orcelis-cta-par { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 1.25rem; }
.orcelis-cta-par .orcelis-btn { margin: 0; }

/* Barra de credenciales: una línea, sin adornos. */
.orcelis-credenciales {
	background: var(--orcelis-tinta); color: #fff;
	padding: 1rem clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}
.orcelis-credenciales p {
	margin: 0; max-width: var(--orcelis-ancho); margin-inline: auto;
	font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.92);
}

/* Tres columnas del gabinete. */
.orcelis-gabinete__cols { gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: 2rem; }
.orcelis-gabinete__cols h3 { margin: 0 0 .5em; }
.orcelis-gabinete__cols p { color: #35404B; }

/* Bloque motor.
   T3 — El título iba centrado y la intro se pegaba al margen izquierdo de la
   página: `.orcelis-seccion > *` centra los hijos con max-width del contenedor
   ancho, pero el párrafo llevaba su propio max-width en ch y quedaba anclado a
   la izquierda de esa caja ancha. Se resuelve dándoles a los dos el MISMO
   contenedor estrecho y centrándolo. */
.orcelis-motor > h2,
.orcelis-motor__intro {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.orcelis-motor__intro {
	font-size: 1.1rem; color: #35404B;
	margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Los cuatro sub-bloques comparten retícula con los de la home: misma columna
   de texto, mismo gutter, y el zigzag lo da :nth-of-type(even). */
.orcelis-motor .orcelis-beneficio { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.orcelis-motor .orcelis-beneficio:last-child { margin-bottom: 0; }

.orcelis-plan-asesor p { max-width: 62ch; }
.orcelis-plan-asesor .orcelis-microcopy { margin-top: .8rem; }

@media (max-width: 768px) {
	.orcelis-cta-par { flex-direction: column; }
	.orcelis-cta-par .orcelis-btn { width: 100%; }
	.orcelis-credenciales p { font-size: .88rem; text-align: left; }
}


/* T7.4 — Pulido final de /asesores/.
   El ritmo vertical entre secciones lo da .orcelis-seccion, igual que en la
   home; aquí solo se alinean las piezas que traían ancho propio. */
.orcelis-faq-seccion .orcelis-faq { max-width: 820px; margin-inline: auto; }
.orcelis-faq-seccion > h2 { text-align: center; }
.orcelis-gabinete > h2 { text-align: center; max-width: 720px; margin-inline: auto; }

/* Placeholders de captura: misma proporción 16:10 en todos, para que el staging
   sea evaluable y no bailen los bloques. NO salen a producción. */
.orcelis-placeholder-bloqueante {
	aspect-ratio: 16 / 10;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: .4rem;
}