/* ==========================================================================
   Mónica Pérez · Consultora de Inteligencia Empresarial
   Hoja de estilos del sitio. Tokens de marca según el Manual de identidad 1.0
   (sept. 2026). No añadir colores ni familias fuera de este bloque.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Paleta de marca (manual p. 9) */
  --petroleo: #163A43;
  --teal: #2B6670;
  --salvia: #8EA9A3;
  --arena: #E8DED2;
  --marfil: #F7F4EF;
  --tinta: #1B1D1F;
  --coral: #E67A67;
  --coral-suave: #F2C9C1;
  --blanco: #FFFFFF;

  /* Derivados medidos (contraste AA calculado en brief/03) */
  --tinta-suave: #4A5A5E;      /* 6,57:1 sobre marfil · 5,42:1 sobre arena */
  --marfil-suave: #B9C9C6;     /* 7,11:1 sobre petróleo */
  --linea: rgba(22, 58, 67, .18);
  --linea-fuerte: rgba(22, 58, 67, .38);
  --linea-oscura: rgba(247, 244, 239, .22);

  /* Roles (se redefinen por capítulo oscuro) */
  --fondo: var(--marfil);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --titular: var(--petroleo);
  --foco: var(--petroleo);

  /* Tipografía */
  --f-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --t-hero: clamp(2.6rem, 1.3rem + 5.6vw, 6rem);
  --t-h2: clamp(2rem, 1.35rem + 2.5vw, 3.35rem);
  --t-h3: clamp(1.25rem, 1.08rem + .7vw, 1.6rem);
  --t-lead: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --t-body: 1.125rem;
  --t-small: 1rem;
  --t-label: .875rem;

  /* Espacio: escala 4 px (manual p. 13: 8·16·24·32·48·64) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --gutter: clamp(1rem, .4rem + 2.6vw, 3rem);
  --capitulo: clamp(4.5rem, 2.5rem + 8vw, 10rem);
  --ancho: 1240px;
  --medida: 62ch;

  /* Forma: radio único 10 px en bloques y controles, 8 px en fichas */
  --r: 10px;
  --r-ficha: 8px;

  /* Movimiento */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --t-rapida: 160ms;
  --t-media: 280ms;

  color-scheme: light;
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s6); overflow-x: clip; }
body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--titular);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
::selection { background: var(--coral-suave); color: var(--petroleo); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
input, textarea, button, select { font: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--petroleo); color: var(--marfil); padding: var(--s3) var(--s4);
  border-radius: var(--r); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s4); }
.wrap { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.medida { max-width: var(--medida); }

/* Grounds: cada capítulo se asienta en su propio fondo (corte duro) */
.fondo-marfil { --fondo: var(--marfil); background: var(--marfil); }
.fondo-arena  { --fondo: var(--arena); background: var(--arena); }
.fondo-petroleo {
  --fondo: var(--petroleo);
  --texto: var(--marfil);
  --texto-suave: var(--marfil-suave);
  --titular: var(--marfil);
  --foco: var(--coral-suave);
  --linea: var(--linea-oscura);
  --linea-fuerte: rgba(247, 244, 239, .45);
  background: var(--petroleo);
  color: var(--marfil);
}
.fondo-petroleo ::selection { background: var(--coral-suave); color: var(--petroleo); }
.fondo-petroleo .texto-suave, .texto-suave { color: var(--texto-suave); }

/* ---------- Firma tipográfica (manual p. 7-8) ---------------------------- */
.firma { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--petroleo); line-height: 1; }
.firma__nombre { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
.firma__desc { font-family: var(--f-texto); font-weight: 400; font-size: .8rem; margin-top: .35em; letter-spacing: 0; }
.fondo-petroleo .firma { color: var(--marfil); }

/* ---------- Botones y enlaces de acción ---------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: .8rem 1.4rem;
  border-radius: 8px; border: 0;
  background: var(--coral); color: var(--tinta);          /* tinta sobre coral: 5,91:1 (AA) */
  font-family: var(--f-texto); font-weight: 500; font-size: 1rem; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px -12px rgba(160,70,50,.55);
  transition: transform var(--t-rapida) var(--ease), background-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.boton:hover { text-decoration: none; background: color-mix(in srgb, var(--coral), #FFFFFF 14%); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 22px -12px rgba(160,70,50,.6); }
.boton:active { transform: translateY(1px); }
/* Botón secundario: para ir a otra página, nunca para contactar */
.boton--secundario { background: transparent; color: var(--petroleo); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--petroleo); }
.boton--secundario:hover { background: var(--petroleo); color: var(--marfil); box-shadow: inset 0 0 0 1.5px var(--petroleo), 0 12px 22px -14px rgba(22,58,67,.55); }
.boton:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }

.enlace {
  font-weight: 600; color: var(--titular); text-decoration: underline;
  text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .3em;
  min-height: 44px; display: inline-flex; align-items: center;
}
.enlace:hover { text-decoration-thickness: 3px; }

/* ---------- Cabecera ------------------------------------------------------ */
.cabecera { position: relative; z-index: 20; border-bottom: 1px solid color-mix(in srgb, var(--arena), var(--coral) 18%); }
/* Firma de cabecera: nombre y descriptor en versalitas espaciadas (manual p. 7) */
.cabecera .firma { gap: .4rem; }
.cabecera .firma__nombre { font-size: 1.45rem; line-height: 1; }
.cabecera .firma__desc { margin-top: 0; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); line-height: 1.2; }
@media (max-width: 560px) {
  .cabecera .firma__nombre { font-size: 1.3rem; }
  /* 12 px: mínimo del descriptor según el manual (p. 8); en dos líneas */
  .cabecera .firma__desc { font-size: .75rem; letter-spacing: .08em; max-width: 17em; }
}
@media (max-width: 340px) {
  .cabecera .firma__desc { letter-spacing: .03em; max-width: none; }
  .menu-toggle { padding-inline: .7rem; }
}
.cabecera__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  min-height: 72px; padding-block: var(--s3);
}
.nav-principal ul { display: flex; align-items: center; gap: clamp(var(--s4), 2vw, var(--s6)); list-style: none; margin: 0; padding: 0; }
.nav-principal a:not(.boton) { font-weight: 500; font-size: 1rem; text-decoration: none; color: var(--petroleo); padding-block: var(--s3); white-space: nowrap; }
.nav-principal a:not(.boton):hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.nav-principal a[aria-current]:not(.boton) { font-weight: 600; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.nav-principal .boton { min-height: 44px; padding: .6rem 1rem; font-size: .96rem; }
.menu-toggle {
  display: none; min-height: 44px; min-width: 44px; padding: .5rem .9rem;
  background: transparent; color: var(--petroleo); border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r); font-weight: 600; cursor: pointer;
}
/* Menú desplegable por debajo de 1024 px: ahí la firma con descriptor y los enlaces ya no caben en una línea */
@media (max-width: 1023.98px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav-principal { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--marfil); border-bottom: 1px solid var(--linea); }
  .nav-principal.is-open { display: block; }
  .nav-principal ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--gutter) var(--s5); }
  .nav-principal li a:not(.boton) { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
  .nav-principal li:last-child { padding-top: var(--s4); }
  .nav-principal .boton { width: 100%; min-height: 48px; }
}
.no-js .nav-principal { display: block; position: static; }
.no-js .menu-toggle { display: none; }

/* ---------- Folio: navegación de capítulos fija -------------------------- */
.folio {
  position: fixed; z-index: 30; left: var(--gutter); right: var(--gutter); bottom: max(var(--s4), env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3);
  pointer-events: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-media) var(--ease), transform var(--t-media) var(--ease), visibility 0s linear var(--t-media);
  visibility: hidden;
}
.folio.is-visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.folio > * { pointer-events: auto; }
.folio__indice { position: relative; }
.folio__boton {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: .55rem 1rem .55rem .85rem;
  background: var(--blanco); color: var(--petroleo);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  box-shadow: 0 10px 24px -14px rgba(22,58,67,.55);
  font-size: .95rem; cursor: pointer; text-align: left;
}
.folio__boton span:first-child { color: var(--tinta-suave); }
.folio__boton strong { font-family: var(--f-display); font-weight: 700; }
.folio__boton svg { flex: none; transition: transform var(--t-rapida) var(--ease); }
.folio__boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.folio__lista {
  position: absolute; left: 0; bottom: calc(100% + var(--s2)); min-width: 260px;
  margin: 0; padding: var(--s2); list-style: none;
  background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  box-shadow: 0 18px 40px -18px rgba(22,58,67,.6);
}
.folio__lista[hidden] { display: none; }
.folio__lista a { display: flex; gap: var(--s3); padding: .6rem .75rem; border-radius: 6px; text-decoration: none; color: var(--petroleo); font-weight: 500; }
.folio__lista a:hover { background: var(--marfil); }
.folio__lista a[aria-current="true"] { background: var(--arena); font-weight: 700; }
.folio .boton { box-shadow: 0 10px 24px -12px rgba(22,58,67,.55); }
.folio__acciones { display: flex; align-items: flex-end; gap: var(--s2); }
/* Volver arriba: mismo lenguaje que el índice del folio */
.folio__arriba, .arriba-suelto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 40px; height: 40px; padding: 0; flex: none;
  background: var(--blanco); color: var(--petroleo); text-decoration: none;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  box-shadow: 0 10px 24px -14px rgba(22,58,67,.55);
  font-size: .95rem; font-weight: 600;
  transition: opacity var(--t-media) var(--ease), transform var(--t-media) var(--ease), visibility 0s linear var(--t-media);
}
.folio__arriba:hover, .arriba-suelto:hover { text-decoration: none; border-color: var(--petroleo); }
.folio__arriba:active, .arriba-suelto:active { transform: translateY(1px); }
.js .folio__arriba:not(.is-visible), .js .arriba-suelto:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(8px); }
.folio__arriba.is-visible, .arriba-suelto.is-visible { transition-delay: 0s; }
.arriba-suelto { position: fixed; z-index: 30; right: var(--gutter); bottom: max(var(--s4), env(safe-area-inset-bottom)); }
/* Solo icono: el texto «Volver arriba» queda disponible para lectores de pantalla */
.folio__arriba span, .arriba-suelto span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.folio__arriba { align-self: center; }
.folio.sin-cta .boton { opacity: 0; visibility: hidden; transform: translateY(8px); }
.folio .boton { transition: opacity var(--t-media) var(--ease), transform var(--t-media) var(--ease), visibility 0s; }
@media (max-width: 560px) {
  .folio { left: var(--s3); right: var(--s3); }
  .folio__boton span:first-child { display: none; }
  .folio__boton { padding-inline: .8rem; }
  .folio .boton { padding-inline: 1rem; }
  .folio__boton strong { max-width: 19vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .folio .boton { padding-inline: .75rem; font-size: .92rem; gap: .4rem; }
  .folio__acciones { gap: 6px; }
}
@media (max-width: 560px) {
  /* En móvil el índice muestra «Índice» en vez del capítulo actual (no cabe sin cortarse) */
  .folio__boton strong { display: none; }
  .folio__boton::before { content: "Índice"; font-weight: 600; }
  .folio__boton { gap: var(--s2); }
}
@media (max-width: 340px) {
  .folio__boton::before { content: none; }
  .folio__boton { min-width: 48px; justify-content: center; padding: 0; }
  .folio .boton { padding-inline: .6rem; font-size: .88rem; }
}

/* ---------- Portada ------------------------------------------------------ */
.portada { position: relative; }
.historia { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.historia > .capitulo { grid-column: 1 / -1; }
.historia > .capitulo:nth-child(1) { grid-row: 1; }
.historia > .capitulo:nth-child(2) { grid-row: 2; }
.historia > .capitulo:nth-child(3) { grid-row: 3; }
.historia > .capitulo:nth-child(4) { grid-row: 4; }
.portada.capitulo { padding-block: 0; }
.historia > .capitulo > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.historia > .capitulo > .wrap > .col-texto { grid-column: 1; }
.portada__cuerpo { min-height: min(calc(100svh - 72px), 900px); display: flex; flex-direction: column; justify-content: center; padding-block: var(--s7) var(--s9); }
.portada__kicker { font-weight: 500; color: var(--teal); margin-bottom: var(--s5); font-size: var(--t-small); }
/* Titular largo (5 líneas en escritorio): tamaño contenido para no invadir el vídeo */
.portada h1 { font-size: clamp(2.1rem, 1.3rem + 2vw, 2.9rem); letter-spacing: -.028em; line-height: 1.08; max-width: 20ch; }
.portada__lead { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); color: var(--tinta-suave); max-width: 46ch; margin-top: var(--s5); line-height: 1.6; }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s7); }

/* ---------- Capítulos ---------------------------------------------------- */
.capitulo { position: relative; padding-block: var(--capitulo); }
.capitulo h2 { font-size: var(--t-h2); max-width: 18ch; letter-spacing: -.03em; }
.capitulo__intro { margin-top: var(--s5); font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; color: var(--texto-suave); }
.metodo__intro { font-size: var(--t-body); line-height: 1.65; max-width: 58ch; }
.capitulo p + p { margin-top: var(--s4); }
.fondo-petroleo h2, .fondo-petroleo h3 { letter-spacing: -.015em; }
.fondo-petroleo p { line-height: 1.65; }

/* Reconocer: el punto de partida */
.antetitulo {
  display: flex; align-items: center; gap: var(--s4);
  font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
  margin-bottom: var(--s5);
}
.antetitulo::before { content: ""; width: 2rem; height: 1px; background: var(--teal); flex: none; }
.reconocer h2 { font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.45rem); max-width: 30ch; letter-spacing: -.025em; line-height: 1.15; }
.reconocer__intro { margin-top: var(--s5); max-width: 64ch; color: var(--tinta); font-size: var(--t-small); line-height: 1.75; }
.citas-reto { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.citas-reto li {
  background: var(--blanco); color: var(--tinta-suave);
  border: 1px solid color-mix(in srgb, var(--arena), var(--petroleo) 8%);
  border-left: 3px solid var(--salvia); border-radius: 6px;
  padding: var(--s5) var(--s5); font-size: var(--t-small); line-height: 1.6;
  min-height: 6.25rem;
}
@media (max-width: 860px) { .citas-reto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .citas-reto { grid-template-columns: minmax(0, 1fr); } .citas-reto li { min-height: 0; } }
/* En escritorio este capítulo tiene fondo propio: sube sobre el vídeo como una página y usa todo el ancho */
@media (min-width: 1024px) {
  .con-escena .historia > .capitulo.reconocer { background: var(--marfil); z-index: 2; box-shadow: 0 -30px 60px -40px rgba(22,58,67,.25); }
  .con-escena .historia .reconocer .col-texto { max-width: 1100px; grid-column: 1 / -1; }
}

/* Cómo puedo ayudarte: tres áreas, cada una con su servicio principal y sus complementarios */
.ayuda__perfil { margin-top: var(--s4); max-width: 40rem; font-size: var(--t-small); color: var(--tinta-suave); }
.areas { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s7); }
.area { padding-top: var(--s5); border-top: 1px solid var(--linea-fuerte); }
.area h3 { font-size: var(--t-h3); display: flex; align-items: baseline; gap: var(--s3); }
.area__num { font-family: var(--f-display); font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; color: var(--teal); font-variant-numeric: tabular-nums; }
.area__pregunta { margin-top: var(--s2); color: var(--tinta-suave); font-style: italic; }
.insignia {
  display: grid; gap: var(--s2); margin-top: var(--s5); padding: var(--s5);
  background: var(--blanco); color: var(--tinta); text-decoration: none;
  border: 1px solid var(--linea); border-left: 3px solid var(--teal); border-radius: var(--r);
  box-shadow: 0 14px 30px -26px rgba(22,58,67,.5);
  transition: border-color var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.insignia:hover { border-color: var(--petroleo); border-left-color: var(--teal); text-decoration: none; }
.insignia:active { transform: translateY(1px); }
.insignia__tipo { font-size: var(--t-label); font-weight: 600; color: var(--teal); }
.insignia__nombre { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--petroleo); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.insignia__texto { font-size: var(--t-small); color: var(--tinta-suave); line-height: 1.55; }
.insignia__formato { font-size: var(--t-label); font-weight: 500; color: var(--petroleo); font-variant-numeric: tabular-nums; }
.complementarios { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s1); }
.complementarios a {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); padding-block: var(--s2);
  font-weight: 600; color: var(--petroleo);
  text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: .28em;
}
.complementarios a:hover { text-decoration-thickness: 3px; }
.complementarios span { font-weight: 400; font-size: var(--t-label); color: var(--tinta-suave); }
.ayuda__todos { margin-top: var(--s7); display: grid; justify-items: start; gap: var(--s3); }
.ayuda__todos p { max-width: 36ch; font-size: var(--t-small); color: var(--tinta-suave); }
.derivacion { margin-top: var(--s5); max-width: 40rem; color: var(--tinta-suave); }

/* Método (el pico) */
.fases { list-style: none; margin: var(--s8) 0 0; padding: 0; counter-reset: fase; }
.fase { position: relative; min-height: 64svh; padding: var(--s6) 0 var(--s8) calc(3.25rem + var(--s5)); counter-increment: fase; }
.fase::before {
  content: counter(fase); position: absolute; left: 0; top: var(--s6);
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--linea-fuerte); border-radius: 50%; color: var(--titular); background: var(--fondo);
  transition: background-color var(--t-media) var(--ease), color var(--t-media) var(--ease), border-color var(--t-media) var(--ease);
}
.fase::after { content: ""; position: absolute; left: calc(1.625rem - .5px); top: calc(var(--s6) + 3.5rem); bottom: 0; width: 1px; background: var(--linea); }
.fase:last-child::after { display: none; }
.fase.is-activa::before { background: var(--titular); color: var(--fondo); border-color: var(--titular); }
.fase h3 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); letter-spacing: -.02em; }
.fase p { margin-top: var(--s4); max-width: 36rem; color: var(--texto-suave); font-size: var(--t-body); }
.fase.is-activa p { color: var(--texto); }
.criterios { margin-top: var(--s7); display: grid; gap: var(--s5); max-width: 40rem; }
.criterios h3 { font-size: var(--t-h3); }
.criterios dl { margin: 0; display: grid; gap: var(--s4); }
.criterios dt { font-family: var(--f-display); font-weight: 700; color: var(--titular); }
.criterios dd { margin: var(--s1) 0 0; color: var(--texto-suave); }
.acciones-capitulo { margin-top: var(--s7); }

/* ---------- El atlas que cobra sentido (escena en vídeo) ------------------- */
/* Decorativa: su significado está en el texto de cada capítulo. */
.escena-escenario { grid-column: 1 / -1; grid-row: 1 / 5; position: relative; z-index: 0; pointer-events: none; display: none; }
.escena-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.escena { position: absolute; inset: 0; background: #E4DACD; }
.escena-escenario .escena { left: 34%; }
.escena video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 120ms linear;
}
.escena video[data-clip="atlas"] { opacity: 1; }
/* La mano que suelta la hoja entra por el borde derecho del plano: encuadre a la derecha */
.escena video[data-clip="ruta"] { object-position: 100% 35%; }
.escena-escenario .escena {
  /* Deja limpia la mitad izquierda para el texto y funde el borde inferior */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.historia > .capitulo { z-index: 1; }
/* Algunas extensiones del navegador (Video Speed Controller y similares) dibujan
   un indicador de velocidad («1.00») sobre cualquier vídeo. Estos vídeos son
   decorativos y los mueve el scroll: se oculta ese indicador. */
.escena .vsc-controller, .escena-inline .vsc-controller, .vsc-controller { display: none !important; visibility: hidden !important; }

/* Móvil y tableta: un clip por capítulo (visible también sin JavaScript, como imagen fija) */
.escena-inline { margin: var(--s7) 0 0; border-radius: var(--r); overflow: hidden; background: #E4DACD; aspect-ratio: 4 / 3; box-shadow: 0 18px 36px -28px rgba(22,58,67,.55); }
.escena-inline video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.escena-inline video[data-src*="ruta-movil"] { object-position: 100% 40%; }

@media (min-width: 1024px) {
  .con-escena .escena-escenario { display: block; }
  .escena-inline { display: none; }
  .con-escena .historia > .capitulo { background: transparent; }
  .con-escena .historia .col-texto { max-width: min(34rem, 40vw); }
  /* Con el vídeo detrás, la portada ocupa toda la pantalla también en monitores altos:
     así la pieza coral se levanta antes de que suba el capítulo siguiente */
  .con-escena .portada__cuerpo { min-height: calc(100svh - 72px); }
  .con-escena .historia .fondo-petroleo {
    --fondo: var(--marfil); --texto: var(--tinta); --texto-suave: var(--tinta-suave); --titular: var(--petroleo);
    --foco: var(--petroleo); --linea: rgba(22,58,67,.18); --linea-fuerte: rgba(22,58,67,.38);
    color: var(--tinta);
  }
}
@media (max-width: 1023.98px) {
  .historia, .historia > .capitulo > .wrap { grid-template-columns: minmax(0, 1fr); }
  .portada__cuerpo { min-height: auto; padding-block: var(--s6) var(--s8); }
  .fase { min-height: 0; padding-bottom: var(--s6); }
}

/* ---------- Casos ---------------------------------------------------------- */
.aviso-demostrativo {
  margin-top: var(--s6); max-width: 46rem; padding: var(--s5) var(--s5);
  background: var(--coral-suave); color: var(--petroleo); border-radius: var(--r);
}
.aviso-demostrativo strong { font-weight: 700; }
.casos { margin-top: var(--s8); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6); }
.caso { grid-column: span 6; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: clamp(var(--s5), 3vw, var(--s7)); box-shadow: 0 1px 0 #fff inset, 0 18px 36px -30px rgba(22,58,67,.5); }
.caso--destacado { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); }
.caso__etiqueta { display: inline-block; font-size: var(--t-label); font-weight: 600; color: var(--petroleo); background: var(--coral-suave); padding: .25rem .6rem; border-radius: 6px; margin-bottom: var(--s4); }
.caso__cabecera .caso__etiqueta { margin-bottom: 0; margin-right: var(--s2); }
.caso__aviso { font-size: var(--t-label); color: var(--tinta-suave); }
.caso__area { margin-top: var(--s5); font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; color: var(--teal); font-variant-numeric: tabular-nums; }
.caso__cabecera h3 { margin-top: var(--s2); }
.caso__servicio { margin-top: var(--s4); font-size: var(--t-small); color: var(--tinta-suave); }
.caso__servicio a { font-weight: 600; color: var(--petroleo); text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
.caso h3 { font-size: var(--t-h3); }
.caso dl { margin: var(--s5) 0 0; display: grid; gap: var(--s4); }
.caso--destacado dl { margin: 0; }
.caso dt { font-family: var(--f-display); font-weight: 700; color: var(--teal); font-size: var(--t-small); }
.caso dd { margin: var(--s1) 0 0; font-size: var(--t-small); line-height: 1.55; }
.caso__limite { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: var(--t-small); color: var(--tinta-suave); }
@media (max-width: 860px) {
  .casos { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .caso, .caso--destacado { grid-column: 1 / -1; }
  .caso--destacado { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* ---------- Sobre mí ------------------------------------------------------- */
.sobre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s6), 6vw, var(--s9)); align-items: start; }
.retrato { margin: 0; position: sticky; top: var(--s6); }
.retrato__marco { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: #D9D3CB; border-bottom: 4px solid var(--coral); } /* Línea coral en el borde inferior de cada fotografía */
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato figcaption { font-size: var(--t-label); color: var(--tinta-suave); margin-top: var(--s3); }
.sobre__texto h2 { max-width: 16ch; }
.sobre__texto > p { margin-top: var(--s5); max-width: var(--medida); }
.perspectivas { margin: var(--s7) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.perspectivas div { padding-top: var(--s4); border-top: 1px solid var(--linea-fuerte); }
.perspectivas dt { font-family: var(--f-display); font-weight: 700; color: var(--petroleo); }
.perspectivas dd { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--tinta-suave); }
.herramientas { margin-top: var(--s7); max-width: var(--medida); }
.herramientas .antetitulo { margin-bottom: var(--s4); }
.herramientas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.herramientas__lista li {
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--marfil); border: 1px solid color-mix(in srgb, var(--arena), var(--petroleo) 18%);
  font-family: var(--f-display); font-weight: 500; font-size: .95rem; line-height: 1.3; color: var(--petroleo);
}
.herramientas__nota { margin-top: var(--s5); font-size: var(--t-small); color: var(--tinta-suave); }
.sobre__enlace { margin-top: var(--s6); }
@media (max-width: 860px) {
  .sobre { grid-template-columns: minmax(0, 1fr); }
  .retrato { position: static; max-width: 420px; }
  .perspectivas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Preguntas frecuentes ------------------------------------------ */
.preguntas h2 { max-width: none; }
.faq { margin-top: var(--s6); max-width: 52rem; border-top: 1px solid var(--linea-fuerte); }
.faq details { border-bottom: 1px solid var(--linea-fuerte); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  padding: var(--s5) 0; min-height: 56px;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--petroleo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--petroleo); border-bottom: 2px solid var(--petroleo);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--t-rapida) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.faq details > div { padding: 0 0 var(--s5); max-width: var(--medida); }
.faq details > div p + p { margin-top: var(--s3); }

/* ---------- Contacto (cierre) --------------------------------------------- */
.contacto { padding-bottom: var(--s8); }
.contacto__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s6), 6vw, var(--s9)); align-items: start; }
.contacto h2 { max-width: 14ch; }
.pasos { list-style: none; margin: var(--s7) 0 0; padding: 0; counter-reset: paso; display: grid; gap: var(--s5); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s4); color: var(--marfil-suave); font-size: var(--t-small); }
.pasos li::before { content: counter(paso); font-family: var(--f-display); font-weight: 700; color: var(--marfil); width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--linea-fuerte); border-radius: 50%; display: grid; place-items: center; font-size: .95rem; }
.pasos strong { color: var(--marfil); font-weight: 600; }
.canales { margin-top: var(--s7); font-size: var(--t-small); color: var(--marfil-suave); }
.canales ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); }
.canales a { color: var(--marfil); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; text-decoration-color: var(--coral); }

/* Retrato cercano en el cierre */
.contacto__retrato { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s7); }
.contacto__retrato img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--petroleo), 0 0 0 4px var(--coral); }
.contacto__retrato p { font-size: var(--t-small); color: var(--marfil-suave); max-width: 28ch; }
.contacto__retrato strong { color: var(--marfil); font-weight: 600; }

/* Formulario */
.formulario {
  background: var(--marfil); color: var(--tinta); border-radius: var(--r);
  padding: clamp(var(--s5), 4vw, var(--s8));
  --texto: var(--tinta); --texto-suave: var(--tinta-suave); --titular: var(--petroleo); --foco: var(--petroleo); --linea: rgba(22,58,67,.18); --linea-fuerte: rgba(22,58,67,.38);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.6);
}
.formulario ::selection { background: var(--coral-suave); }
.formulario__apoyo { color: var(--tinta-suave); margin-bottom: var(--s6); }
.campo { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.campo label, .campo .etiqueta { font-weight: 600; color: var(--petroleo); font-size: var(--t-small); }
.campo .opcional { font-weight: 400; color: var(--tinta-suave); }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem;
  background: var(--blanco); color: var(--tinta);
  border: 1.5px solid #7E8D90; border-radius: var(--r);
  transition: border-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.campo textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.campo input:hover, .campo textarea:hover { border-color: var(--petroleo); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--petroleo); box-shadow: 0 0 0 3px rgba(22,58,67,.35); }
.campo__ayuda { font-size: var(--t-label); color: var(--tinta-suave); }
.campo__error { font-size: var(--t-label); color: #9E2B1C; font-weight: 600; display: flex; gap: var(--s2); align-items: flex-start; }
.campo__error:empty { display: none; }
.campo__error::before { content: "Revisa:"; }
.campo.tiene-error input, .campo.tiene-error textarea { border-color: #9E2B1C; border-width: 2px; }
.campo--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); }
.campo--check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--petroleo); }
.campo--check label { font-weight: 400; color: var(--tinta); }
.campo--check .campo__error { grid-column: 1 / -1; }
.campo--trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Primera capa de información de protección de datos: visible, en letra pequeña */
.info-rgpd { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linea); font-size: .8125rem; color: var(--tinta-suave); line-height: 1.55; }
.info-rgpd__titulo { font-weight: 600; color: var(--petroleo); margin-bottom: var(--s1); }
.info-rgpd strong { font-weight: 600; color: var(--petroleo); }
.resumen-errores { background: #FBE9E5; border: 2px solid #9E2B1C; color: var(--tinta); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.resumen-errores h3 { font-size: 1.05rem; color: #7A1F13; }
.resumen-errores ul { margin: var(--s2) 0 0; padding-left: 1.2em; }
.resumen-errores a { color: #7A1F13; font-weight: 600; }
.estado-envio { margin-top: var(--s4); font-size: var(--t-small); }
.estado-envio:empty { display: none; }
.estado-envio.is-error { background: #FBE9E5; border: 1px solid #9E2B1C; padding: var(--s4); border-radius: var(--r); }
.estado-envio.is-aviso { background: var(--arena); padding: var(--s4); border-radius: var(--r); }
.exito { text-align: left; }
.exito h3 { font-size: var(--t-h3); }
.exito p { margin-top: var(--s4); }
.formulario .boton { width: 100%; }
.formulario .boton[aria-busy="true"] { animation: pulso 900ms var(--ease) infinite alternate; }
@keyframes pulso { from { opacity: .7; } to { opacity: 1; } }
@media (max-width: 860px) { .contacto__rejilla { grid-template-columns: minmax(0, 1fr); } }

/* Pie dentro del cierre */
.pie { margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--linea-oscura); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s5); align-items: flex-end; font-size: var(--t-label); color: var(--marfil-suave); }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.pie a { color: var(--marfil); min-height: 44px; display: inline-flex; align-items: center; }
.pie .firma__nombre { font-size: 1.75rem; }
.pie .firma__desc { font-size: .875rem; }

/* ---------- Páginas interiores (servicios y legal) ------------------------ */
.pagina-cabecera { padding-block: var(--s8) var(--s8); border-bottom: 1px solid var(--linea); }
.migas { font-size: var(--t-label); color: var(--tinta-suave); margin-bottom: var(--s5); }
.migas a { color: var(--petroleo); }
.pagina-cabecera h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); letter-spacing: -.03em; max-width: 20ch; }
.pagina-cabecera .lead { font-size: var(--t-lead); color: var(--tinta-suave); max-width: 44ch; margin-top: var(--s5); line-height: 1.5; }
.pagina-cabecera .portada__acciones { margin-top: var(--s6); }
.cabecera-foto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(var(--s6), 6vw, var(--s9)); align-items: center; }
.cabecera-foto figure { margin: 0; }
.cabecera-foto .retrato__marco { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: #DDD8D1; }
.cabecera-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .cabecera-foto { grid-template-columns: minmax(0, 1fr); } .cabecera-foto figure { max-width: 320px; } }
.pagina-cabecera .apoyo { margin-top: var(--s5); font-size: var(--t-small); color: var(--tinta-suave); }
.bloque { padding-block: clamp(var(--s8), 6vw, var(--s10)); }
.bloque h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); letter-spacing: -.025em; max-width: 22ch; }
.bloque h3 { font-size: var(--t-h3); margin-top: var(--s6); }
.bloque .prosa { max-width: var(--medida); }
.bloque .prosa > * + * { margin-top: var(--s4); }
.bloque .prosa h2 + *, .bloque h2 + .prosa { margin-top: var(--s5); }
.bloque ul.lista { padding-left: 1.2em; }
.bloque ul.lista li + li { margin-top: var(--s2); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); margin-top: var(--s6); }
@media (max-width: 760px) { .dos-col { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }
.citas { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.citas li { padding: var(--s5); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); font-family: var(--f-display); font-weight: 600; color: var(--petroleo); line-height: 1.35; }
@media (max-width: 760px) { .citas { grid-template-columns: minmax(0, 1fr); } }
.pasos-servicio { list-style: none; margin: var(--s6) 0 0; padding: 0; counter-reset: ps; display: grid; gap: var(--s4); max-width: 48rem; }
.pasos-servicio li { counter-increment: ps; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--linea); }
.pasos-servicio li::before { content: counter(ps); font-family: var(--f-display); font-weight: 700; color: var(--teal); font-size: 1.1rem; }
.pasos-servicio strong { font-family: var(--f-display); color: var(--titular); }
.tabla-scroll { overflow-x: auto; margin-top: var(--s6); border-radius: var(--r); border: 1px solid var(--linea-fuerte); background: var(--blanco); -webkit-overflow-scrolling: touch; }
.tabla-scroll:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--t-small); }
caption { text-align: left; padding: var(--s4) var(--s5); font-weight: 600; color: var(--petroleo); caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: var(--s4) var(--s5); border-top: 1px solid var(--linea); }
thead th { background: var(--petroleo); color: var(--marfil); font-family: var(--f-display); font-weight: 700; border-top: 0; }
tbody th { font-family: var(--f-display); font-weight: 700; color: var(--petroleo); }
td.precio { font-family: var(--f-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--petroleo); }
.nota-tabla { margin-top: var(--s4); font-size: var(--t-label); color: var(--tinta-suave); max-width: var(--medida); }
.destacado-petroleo { border-radius: var(--r); padding: clamp(var(--s6), 5vw, var(--s8)); }
/* Textos legales: títulos de sección contenidos y con aire para leerlos como documento */
.bloque .legal h2 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); letter-spacing: -.01em; max-width: none; margin-top: var(--s7); }
.bloque .legal h2:first-child { margin-top: 0; }
.bloque .legal h2 + * { margin-top: var(--s3); }
.fecha-legal { margin-top: var(--s7); font-size: var(--t-label); color: var(--tinta-suave); }
.pendiente { background: var(--coral-suave); color: var(--petroleo); padding: .1em .35em; border-radius: 4px; font-weight: 600; }
.pie-simple { background: var(--petroleo); color: var(--marfil-suave); padding-block: var(--s8) var(--s7); }
.pie-simple .pie { margin-top: 0; border-top: 0; padding-top: 0; }
.pie-simple .firma { color: var(--marfil); }
.pie-simple .firma__desc { color: var(--marfil-suave); }
.cta-final { padding-block: clamp(var(--s8), 6vw, var(--s10)); }
.cta-final h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); max-width: 22ch; }
.cta-final p { margin-top: var(--s4); max-width: var(--medida); color: var(--marfil-suave); }
.cta-final .portada__acciones { margin-top: var(--s6); }

/* ---------- Servicios: página índice (servicios/index.html) --------------- */
/* Selector por situación */
.situaciones { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.situaciones a {
  display: grid; gap: var(--s3); height: 100%; padding: var(--s5);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  color: var(--petroleo); text-decoration: none;
  transition: border-color var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.situaciones a:hover { border-color: var(--petroleo); text-decoration: none; }
.situacion__frase { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.35; }
.situacion__destino { font-size: var(--t-small); color: var(--tinta-suave); }
.situacion__destino strong { font-weight: 600; color: var(--petroleo); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
@media (max-width: 760px) { .situaciones { grid-template-columns: minmax(0, 1fr); } }

/* Áreas: el servicio principal en grande y los complementarios debajo */
.area-bloque { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--linea-fuerte); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); scroll-margin-top: var(--s6); }
.area-bloque__cabecera { position: sticky; top: var(--s6); align-self: start; }
.area-bloque__cabecera h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.02em; margin-top: 0; }
.area-bloque__cabecera .area__num { display: block; margin-bottom: var(--s2); font-size: var(--t-small); }
.area-bloque__cabecera p { margin-top: var(--s3); color: var(--tinta-suave); font-style: italic; }
.area-bloque__servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.tarjeta-servicio { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); }
.tarjeta-servicio--insignia { grid-column: 1 / -1; padding: var(--s6); border-left: 3px solid var(--teal); box-shadow: 0 18px 36px -30px rgba(22,58,67,.5); }
.tarjeta-servicio--ancha { grid-column: 1 / -1; }
.tarjeta-servicio__tipo { font-size: var(--t-label); font-weight: 600; color: var(--teal); }
.bloque .tarjeta-servicio h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--petroleo); }
.bloque .tarjeta-servicio--insignia h4 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); }
.tarjeta-servicio h4 span { display: block; margin-top: var(--s1); font-family: var(--f-texto); font-weight: 400; font-size: var(--t-label); color: var(--tinta-suave); }
.tarjeta-servicio__problema { font-size: var(--t-small); color: var(--tinta-suave); line-height: 1.55; }
.tarjeta-servicio__entregables { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.tarjeta-servicio__entregables li { font-size: var(--t-label); padding: .2rem .6rem; background: var(--marfil); border: 1px solid var(--linea); border-radius: 6px; }
.tarjeta-servicio__formato { margin-top: auto; padding-top: var(--s2); font-size: var(--t-label); color: var(--petroleo); font-weight: 500; font-variant-numeric: tabular-nums; }
.tarjeta-servicio__enlace { align-self: flex-start; font-weight: 600; color: var(--petroleo); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.tarjeta-servicio__enlace:hover { text-decoration-thickness: 3px; }
@media (max-width: 960px) { .area-bloque { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .area-bloque__cabecera { position: static; } }
@media (max-width: 640px) { .area-bloque__servicios { grid-template-columns: minmax(0, 1fr); } .tarjeta-servicio--insignia { padding: var(--s5); } }
.puerta-abierta { margin-top: var(--s8); padding: var(--s6); border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); }
.bloque .puerta-abierta h3 { margin-top: 0; }
.puerta-abierta p { margin-top: var(--s2); max-width: 52ch; color: var(--tinta-suave); }

/* Cómo crecen los servicios */
.escaleras { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.escalera { list-style: none; margin: 0; padding: var(--s5); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); display: grid; gap: 0; }
.escalera li { position: relative; padding: 0 0 var(--s4) var(--s6); font-size: var(--t-small); }
.escalera li:last-child { padding-bottom: 0; font-weight: 600; color: var(--petroleo); }
.escalera li::before { content: ""; position: absolute; left: .3rem; top: .45em; width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid var(--teal); background: var(--blanco); }
.escalera li:last-child::before { background: var(--teal); }
.escalera li:not(:last-child)::after { content: ""; position: absolute; left: calc(.6rem - .5px); top: calc(.45em + .7rem); bottom: .15rem; width: 1px; background: var(--salvia); }
@media (max-width: 860px) { .escaleras { grid-template-columns: minmax(0, 1fr); } }

/* Formatos de trabajo */
.formatos { margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); max-width: 60rem; }
.formatos div { padding-top: var(--s4); border-top: 1px solid var(--linea-fuerte); }
.formatos dt { font-family: var(--f-display); font-weight: 700; color: var(--titular); }
.formatos dd { margin: var(--s2) 0 0; color: var(--texto-suave); font-size: var(--t-small); line-height: 1.6; }
@media (max-width: 640px) { .formatos { grid-template-columns: minmax(0, 1fr); } }

/* Fichas cortas de los servicios complementarios */
.ficha-corta { margin-top: var(--s7); padding: clamp(var(--s5), 3vw, var(--s7)); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); scroll-margin-top: var(--s6); }
.ficha-corta .ficha-corta__area { font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; color: var(--teal); font-variant-numeric: tabular-nums; }
.bloque .ficha-corta h3 { margin-top: var(--s2); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.02em; }
.ficha-corta h3 span { display: block; margin-top: var(--s1); font-family: var(--f-texto); font-weight: 400; font-size: var(--t-small); letter-spacing: 0; color: var(--tinta-suave); }
.ficha-corta .ficha-corta__promesa { margin-top: var(--s4); max-width: 52ch; font-size: var(--t-lead); line-height: 1.45; color: var(--petroleo); }
.ficha-corta__cuerpo { margin-top: var(--s6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
.ficha-corta h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--petroleo); }
.ficha-corta h4 ~ h4 { margin-top: var(--s5); }
.ficha-corta h4 + p, .ficha-corta h4 + ul { margin-top: var(--s2); }
.ficha-corta p, .ficha-corta li { font-size: var(--t-small); line-height: 1.6; }
.ficha-corta ul { padding-left: 1.2em; }
.ficha-corta li + li { margin-top: var(--s1); }
.ficha-corta__nota { margin-top: var(--s5); padding: var(--s4) var(--s5); background: var(--marfil); border-radius: var(--r-ficha); font-size: var(--t-small); color: var(--tinta-suave); }
.ficha-corta__pie { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); }
.ficha-corta__pie dl { margin: 0; display: grid; gap: var(--s2); }
.ficha-corta__pie dl div { display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--t-small); }
.ficha-corta__pie dt { font-weight: 600; color: var(--petroleo); }
.ficha-corta__pie dd { margin: 0; color: var(--tinta-suave); }
@media (max-width: 760px) { .ficha-corta__cuerpo { grid-template-columns: minmax(0, 1fr); } }

/* Un ejemplo (páginas de servicio) */
.ejemplo { margin-top: var(--s6); max-width: 52rem; padding: clamp(var(--s5), 3vw, var(--s6)); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); }
.ejemplo .caso__etiqueta { margin-bottom: 0; margin-right: var(--s2); }
.bloque .ejemplo h3 { margin-top: var(--s4); }
.modalidad__es { display: block; margin-top: var(--s1); font-family: var(--f-texto); font-weight: 400; font-size: var(--t-label); color: var(--tinta-suave); }
.ejemplo dl { margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.ejemplo dt { font-family: var(--f-display); font-weight: 700; color: var(--teal); font-size: var(--t-small); }
.ejemplo dd { margin: var(--s1) 0 0; font-size: var(--t-small); line-height: 1.55; }
.ejemplo .enlace { display: inline-block; margin-top: var(--s5); }

/* ---------- Transiciones de capítulo (mejora progresiva, sin JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .corte { animation: corte linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes corte { from { clip-path: inset(9% 0 0 0 round 0); } to { clip-path: inset(0 0 0 0 round 0); } }
  }
}


/* ---------- Entrada de la portada y apariciones ---------------------------- */
/* Funcionales, no intrusivas: se mantienen con «reducir movimiento» (más cortas).
   Windows activa esa preferencia por defecto en muchos equipos. */
@keyframes entrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.portada__kicker, .portada h1, .portada__lead, .portada__acciones { animation: entrada 900ms var(--ease) both; }
.portada h1 { animation-delay: 120ms; }
.portada__lead { animation-delay: 260ms; }
.portada__acciones { animation-delay: 380ms; }
.js .aparece { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--retraso, 0ms); }
.js .aparece.is-dentro { opacity: 1; transform: none; }

/* Estados de interacción más claros (solo con puntero fino) */
@media (hover: hover) and (pointer: fine) {
  .caso { transition: transform var(--t-media) var(--ease), box-shadow var(--t-media) var(--ease), border-color var(--t-media) var(--ease); }
  .caso:hover { transform: translateY(-4px); border-color: var(--linea-fuerte); box-shadow: 0 1px 0 #fff inset, 0 26px 44px -30px rgba(22,58,67,.55); }
  .retrato__marco img, .cabecera-foto img { transition: transform 900ms var(--ease); }
  .retrato__marco:hover img, .cabecera-foto .retrato__marco:hover img { transform: scale(1.03); }
  .insignia:hover, .situaciones a:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -24px rgba(22,58,67,.6); }
  .perspectivas div { transition: border-color var(--t-media) var(--ease); }
  .perspectivas div:hover { border-color: var(--petroleo); }
}

/* ---------- Movimiento reducido: solo se atenúa lo intrusivo -------------- */
@media (prefers-reduced-motion: reduce) {
  .portada__kicker, .portada h1, .portada__lead, .portada__acciones { animation-duration: 450ms; }
  .js .aparece { transform: translateY(6px); transition-duration: 350ms; }
}

/* ---------- Impresión ----------------------------------------------------- */
@media print {
  .folio, .arriba-suelto, .escena-escenario, .escena-inline, .menu-toggle, .skip-link { display: none !important; }
  .fondo-petroleo { background: #fff !important; color: var(--tinta) !important; --titular: var(--petroleo); --texto-suave: var(--tinta-suave); }
  .fase::before { color: var(--petroleo) !important; }
  .fase p, .criterios dd, .pasos li { color: var(--tinta) !important; }
  .capitulo { padding-block: 2rem; }
}