/* Estilos propios de las paginas internas.
   La home tiene su hero animado y esta congelada por orden de Julio; estas
   paginas comparten su marca y su tipografia, pero entran directas al contenido. */

/* En la home, .hoja sube con un margen negativo para fundirse con el hero.
   Aqui no hay hero, asi que ese margen se comia la cabecera entera: el titulo
   y el enlace de volver quedaban por encima del borde de la pantalla, con el
   scroll en cero y sin forma de verlos. */
.hoja{ margin-top:0 }

/* ---------- el menu, ya colocado y sin animacion ---------- */
.nav-lat{ pointer-events:none }
.nav-lat-links{ pointer-events:auto }
.nav-lat-logo{ pointer-events:auto }
.nav-real{ pointer-events:auto }

/* El menu cambia de color sin transicion, igual que en la home. Con la
   transicion de 0,3s heredada, al cruzar el borde de una seccion de color el
   enlace pasa por tonos intermedios que no contrastan con ninguno de los dos
   fondos. Medido: durante ese tramo el color era rgb(41,67,110), que no existe
   en la paleta. */
.nav-real, .nav-sep, .nav-lat-logo, .nav-lat-nombre{ transition:none }

/* la pagina en la que estas se marca, para saber siempre donde estas */
.nav-real[aria-current="page"]{ color:var(--petroleo) }
/* Sobre fondo de color la pagina activa vuelve a marfil, como el resto del menu.
   Sin esto ganaba el petroleo, porque pesa igual que la regla que aclara el menu
   y esta hoja carga despues: el enlace activo quedaba a 1 de contraste sobre el
   azul y a 1,16 sobre el verde. La linea verde de debajo sigue marcando cual es. */
.nav-real[aria-current="page"].sobre-oscuro{ color:var(--marfil) }
.nav-real[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background:var(--verde-vinculo);
}

/* ---------- cabecera de pagina ---------- */
.pag-cabeza{
  padding:clamp(96px,16vh,190px) var(--pad) clamp(40px,6vh,72px);
  max-width:1320px;
}
.pag-cabeza h1{
  /* El h1 hereda white-space:nowrap del hero de la home, donde el descriptor va
     forzado a una sola linea. Aqui los titulares son largos y sin esto se salian
     por la derecha: medidos 1865px de texto dentro de una caja de 927. */
  white-space:normal;
  font-size:clamp(34px,5vw,66px); line-height:1.06; letter-spacing:-.02em;
  font-weight:800; margin:0 0 .5em; max-width:17ch;
}
.pag-entrada{
  font-size:clamp(17px,1.35vw,22px); line-height:1.65; max-width:60ch;
  color:var(--azul-raiz);
}
.pag-entrada p{ margin:0 0 .85em }
.pag-entrada p:last-child{ margin-bottom:0 }
/* El bloque de entrada no tenia margen inferior, asi que lo que viniera despues
   quedaba pegado a el si no era un parrafo hermano: medido, 0px antes de la
   frase de manifiesto y antes del boton. El aire va en el contenedor, no en
   cada caso suelto. */
.pag-entrada{ margin-bottom:clamp(22px,2.4vh,32px) }
.pag-entrada:last-child{ margin-bottom:0 }

/* Sobre fondo de color, TODO el texto pasa a marfil. .pag-entrada fijaba el azul
   y ganaba a la regla del fondo, asi que los parrafos salian azul sobre azul:
   medido, contraste de 1 a 1, o sea invisibles. */
.oscuro .pag-entrada, .verde .pag-entrada, .petroleo .pag-entrada{ color:var(--marfil) }
.oscuro .ficha p, .verde .ficha p, .petroleo .ficha p,
.oscuro .pasos li, .verde .pasos li, .petroleo .pasos li,
.oscuro .pregunta p, .verde .pregunta p, .petroleo .pregunta p,
.oscuro .destacado, .verde .destacado, .petroleo .destacado{ color:var(--marfil) }

/* ---------- volver ---------- */
.volver{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; text-decoration:none;
  color:var(--azul-raiz); min-height:44px;
}
.volver:hover{ color:var(--petroleo) }
.volver span{ font-size:17px; line-height:1 }
.oscuro .volver, .verde .volver, .petroleo .volver{ color:var(--marfil) }

/* ---------- fichas de contenido ---------- */
.fichas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(22px,2.6vw,40px); margin-top:clamp(28px,4vh,48px);
}
.ficha{ border-left:2px solid var(--verde-vinculo); padding-left:clamp(16px,1.6vw,24px) }
.ficha h3{ font-size:clamp(18px,1.5vw,23px); margin:0 0 .5em; line-height:1.32 }
.ficha p{ margin:0 0 .7em; line-height:1.6; font-size:clamp(15px,1.05vw,17px) }
.ficha p:last-child{ margin-bottom:0 }
.oscuro .ficha h3, .verde .ficha h3, .petroleo .ficha h3{ color:var(--marfil) }

/* ---------- pasos numerados: el orden ES el mensaje ---------- */
.pasos{ list-style:none; margin:clamp(26px,4vh,44px) 0 0; padding:0; counter-reset:paso }
.pasos li{
  counter-increment:paso; position:relative;
  padding:clamp(15px,1.7vh,21px) 0 clamp(15px,1.7vh,21px) clamp(44px,4vw,62px);
  border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);
  line-height:1.6; font-size:clamp(15px,1.1vw,18px);
}
.pasos li:last-child{ border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent) }
.pasos li::before{
  content:counter(paso); position:absolute; left:0; top:clamp(15px,1.7vh,21px);
  font-size:clamp(13px,.95vw,15px); font-weight:800; color:var(--petroleo);
  font-variant-numeric:tabular-nums;
}
.oscuro .pasos li::before, .verde .pasos li::before, .petroleo .pasos li::before{ color:var(--verde-vinculo) }

/* ---------- preguntas ---------- */
.preguntas{ margin-top:clamp(26px,4vh,44px); max-width:74ch }
.pregunta{
  border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding:clamp(20px,2.6vh,30px) 0;
}
.pregunta:last-child{ border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent) }
.pregunta h3{ font-size:clamp(17px,1.3vw,21px); margin:0 0 .6em; line-height:1.3 }
.pregunta p{ margin:0 0 .6em; line-height:1.65; font-size:clamp(15px,1.05vw,17px) }
.pregunta p:last-child{ margin-bottom:0 }
.oscuro .pregunta h3, .verde .pregunta h3, .petroleo .pregunta h3{ color:var(--marfil) }

/* ---------- una idea sola, en voz de manifiesto ---------- */
.destacado{
  font-family:var(--editorial); font-size:clamp(24px,3.2vw,44px);
  line-height:1.25; max-width:20ch; margin:0; font-weight:400;
}

/* ---------- pie ---------- */
.pie{
  padding:clamp(40px,6vh,68px) var(--pad); font-size:14px; line-height:1.7;
  display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center;
}
.pie a{ color:inherit }

/* ---------- el carril del menu, igual que en la home ---------- */
@media (min-width:1280px){
  .pag-cabeza, .bloque, .pie{ padding-left:calc(var(--pad) + var(--carril,166px)) }
}


/* En telefono el menu es la barra de abajo y lleva SU PROPIO fondo marfil, asi
   que no depende de lo que tenga detras. Sin esto, el guion lo aclaraba igual y
   quedaba marfil sobre marfil: cuatro enlaces invisibles, cazados por axe. */
@media (max-width:1279px){
  .nav-real.sobre-oscuro,
  .nav-real[aria-current="page"].sobre-oscuro,
  .nav-lat-logo.sobre-oscuro,
  .nav-lat-nombre.sobre-oscuro{ color:var(--azul-raiz) }
  .nav-real[aria-current="page"]{ color:var(--petroleo) }
}


/* El titular de pagina va de 66px en pantalla grande a 34px en telefono, y el
   interlineado de 1,06 solo sirve para el extremo grande. */
@media (max-width:900px){
  .pag-cabeza h1{ line-height:1.16 }
}