/* Portada: hero, línea del tiempo, asignaturas, índice,
   materiales, exámenes y autor. Extraído del HTML aprobado. */

/* == PARTE: front-page.php · hero =========================== */
.hero{background:var(--noche);color:var(--sobre-noche);position:relative;overflow:hidden;padding:calc(var(--paso) * .9) 0 calc(var(--paso) * .85)}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,rgba(200,154,74,.16),transparent 65%),
    radial-gradient(ellipse 60% 50% at 90% 20%,rgba(168,99,43,.14),transparent 70%);
}
.hero .env{position:relative}
.hero-rejilla{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.hero-rejilla{grid-template-columns:1.35fr .9fr;gap:60px}}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.05rem);margin-bottom:24px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--acento-2)}
.hero p{font-size:1.12rem;color:rgba(239,227,204,.82);max-width:56ch}
.hero-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.boton{
  display:inline-block;padding:14px 28px;text-decoration:none;
  font-family:'Marcellus',serif;font-size:.98rem;
  background:var(--acento-2);color:#17212C;border:1px solid var(--acento-2);
  transition:transform .2s ease,background .2s ease;
}
.boton:hover{background:#dcbe86;transform:translateY(-2px)}
.boton.linea{background:transparent;color:var(--sobre-noche);border-color:rgba(239,227,204,.4)}
.boton.linea:hover{background:rgba(239,227,204,.08);border-color:rgba(239,227,204,.75)}
.boton.oscura{background:var(--noche);color:var(--sobre-noche);border-color:var(--noche)}
.boton.oscura:hover{background:var(--noche-alt)}

.retrato{position:relative;display:none}
@media(min-width:900px){.retrato{display:block}}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;filter:sepia(.28) contrast(1.04)}
.retrato figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;
  background:linear-gradient(to top,rgba(14,37,54,.95),transparent);
  font-size:.84rem;color:rgba(239,227,204,.85);
}
.retrato figcaption b{display:block;font-family:'Marcellus',serif;font-size:1.05rem;font-weight:400;color:var(--sobre-noche)}

.cronologia{margin-top:calc(var(--paso) * .7);border-top:1px solid rgba(239,227,204,.22);background:var(--noche-alt)}
.cronologia .env{display:flex;overflow-x:auto;padding:0}
.cronologia a{
  flex:0 0 auto;padding:16px 20px;text-decoration:none;
  font-family:'Marcellus',serif;font-size:.86rem;
  color:rgba(239,227,204,.62);white-space:nowrap;
  border-right:1px solid rgba(239,227,204,.12);
  transition:color .2s ease,background .2s ease;
}
.cronologia a:first-child{border-left:1px solid rgba(239,227,204,.12)}
.cronologia a:hover{color:var(--acento-2);background:rgba(239,227,204,.05)}
.cronologia a i{font-style:normal;color:rgba(239,227,204,.35);margin-right:7px;font-size:.76rem}

/* ===== Sección de épocas ===== */

.crono{position:sticky;top:0;z-index:30;background:var(--papel);border-bottom:1px solid var(--linea);height:var(--barra);display:flex;align-items:center}
.crono-regla{position:relative;display:none}
@media(min-width:880px){.crono-regla{display:block}}
.crono-linea{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--linea)}
.crono-avance{position:absolute;left:0;top:50%;height:1px;background:var(--acento);width:0}
.crono-marcas{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--barra)}
.marca{position:relative;width:22px;height:var(--barra);display:grid;place-items:center}
.marca::after{content:'';width:1px;height:9px;background:var(--tinta-2);opacity:.45;transition:height .2s,opacity .2s,background .2s}
.marca:hover::after{height:14px;opacity:1}
.marca[aria-current="true"]::after{height:20px;opacity:1;background:var(--acento);width:2px}
.marca-tit{position:absolute;top:calc(50% + 14px);left:50%;transform:translateX(-50%);
 font-family:'Marcellus',serif;font-size:.74rem;white-space:nowrap;color:var(--tinta-2);
 opacity:0;transition:opacity .2s}
.marca:hover .marca-tit{opacity:1}
.marca[aria-current="true"] .marca-tit{opacity:1;color:var(--acento);font-size:.82rem}

/* ---------- Selector (móvil) ---------- */
.crono-movil{display:flex;align-items:center;gap:10px;width:100%}
@media(min-width:880px){.crono-movil{display:none}}
.flecha{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:50%;flex:0 0 auto}
.flecha svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flecha[disabled]{opacity:.35}
.actual{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Marcellus',serif;font-size:1rem}
.actual svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.rejilla{position:fixed;inset:0;z-index:40;background:var(--papel);padding:24px;display:none;overflow:auto}
.rejilla.abierta{display:block}
.rejilla h4{font-family:'Marcellus',serif;margin-bottom:16px;font-size:1.1rem}
.rej-ops{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rej-op{border:1px solid var(--linea);padding:12px;text-align:left;font-family:'Marcellus',serif;font-size:.92rem}
.rej-op[aria-current="true"]{background:var(--noche);color:var(--papel);border-color:var(--noche)}
.rej-cerrar{margin-top:18px;color:var(--acento);border-bottom:1px solid var(--acento)}

/* ---------- Escena ---------- */
.viaje{position:relative}
.escena{position:sticky;top:var(--barra);height:calc(100svh - var(--barra));overflow:hidden;
 background:radial-gradient(ellipse 70% 55% at 50% 88%,var(--papel-alt),var(--papel) 70%)}
.escena .env{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding-top:18px;padding-bottom:18px}
@media(min-width:880px){
  .escena .env{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
}
.rotulos{position:relative;min-height:clamp(170px,22svh,240px)}
@media(min-width:880px){.rotulos{min-height:280px}}
.rotulo{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.rotulo.activo{opacity:1;transform:none;pointer-events:auto}
.rot-pie{font-family:'Marcellus',serif;font-size:.8rem;color:var(--acento);letter-spacing:.1em;margin-bottom:4px}
.rotulo h3{font-size:clamp(1.7rem,4.2vw,2.9rem);margin-bottom:8px}
.rot-txt{color:var(--tinta-2);max-width:44ch;font-size:clamp(.92rem,2.4vw,1.05rem)}
.rot-cta{display:inline-block;margin-top:14px;font-family:'Marcellus',serif;font-size:.9rem;
 text-decoration:none;color:var(--acento);border-bottom:1px solid var(--acento);padding-bottom:2px}
.rot-cta:hover{color:var(--tinta);border-color:var(--tinta)}

.figuras{position:relative;min-width:0;height:100%}
.fig{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);height:94%;width:auto;max-width:100%;
 object-fit:contain;opacity:0;visibility:hidden;transition:opacity .09s linear;will-change:opacity}
.suelo{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:min(46%,240px);height:26px;
 background:radial-gradient(ellipse at center,rgba(43,33,24,.22),rgba(43,33,24,0) 70%)}
.pista{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:.74rem;color:var(--tinta-2);opacity:.6;pointer-events:none}

.cierre{padding:46px 0 80px;text-align:center}
.cierre .boton{display:inline-block;padding:14px 30px;text-decoration:none;font-family:'Marcellus',serif;font-size:1rem;
 background:var(--noche);color:var(--papel);border:1px solid var(--noche)}
.cierre .boton:hover{background:#1b4263}


/* ---------- Apaisado con poca altura: dos columnas compactas ---------- */
@media (max-height:560px) and (orientation:landscape){
  :root{--barra:44px}
  .escena .env{grid-template-columns:1.15fr .85fr;grid-template-rows:none;gap:22px;align-items:center;padding:6px 24px}
  .rotulos{min-height:0}
  .rotulo h3{font-size:1.55rem;margin-bottom:4px}
  .rot-pie{font-size:.68rem;margin-bottom:2px}
  .rot-txt{font-size:.86rem;line-height:1.5;max-width:40ch}
  .rot-cta{margin-top:8px;font-size:.8rem}
  .fig{height:97%;bottom:3%}
  .suelo{height:16px;bottom:2%;width:min(40%,180px)}
  .pista{display:none}
  .flecha{width:34px;height:34px}
  .actual{font-size:.92rem}
}

/* ---------- Sin animación: móvil apaisado, pantallas bajas, reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .viaje{height:auto!important}
  .escena{position:static;height:auto;overflow:visible;padding:20px 0}
  .escena .env{display:block;height:auto}
  .rotulos{min-height:0}
  .rotulo{position:static;opacity:1;transform:none;pointer-events:auto;
   border-top:1px solid var(--linea);padding:26px 0}
  .figuras{display:none}
  .pista,.crono{display:none}
}

/* == Secciones comunes ====================================== */
.seccion{padding:var(--paso) 0}
.seccion + .seccion{border-top:1px solid var(--linea)}
.titulo-bloque{margin-bottom:42px;max-width:64ch}
.titulo-bloque h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:12px}
.titulo-bloque p{color:var(--tinta-2)}
.fila-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:none}
.enlace-mas{
  font-family:'Marcellus',serif;font-size:.94rem;text-decoration:none;
  border-bottom:1px solid var(--acento);padding-bottom:2px;color:var(--acento);white-space:nowrap;
}

/* == Seis asignaturas ======================================= */
.areas{display:grid;gap:2px;background:var(--linea)}
@media(min-width:700px){.areas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.areas{grid-template-columns:repeat(3,1fr)}}
.area{background:var(--papel);padding:32px 28px 30px;display:flex;flex-direction:column;gap:11px;text-decoration:none;transition:background .25s ease}
.area:hover{background:var(--papel-hueco)}
.area-curso{font-family:'Marcellus',serif;font-size:.8rem;color:var(--acento);letter-spacing:.1em}
.area h3{font-size:1.42rem}
.area p{font-size:.95rem;color:var(--tinta-2);line-height:1.6;flex:1}
.area-pie{font-size:.84rem;color:var(--tinta-2);border-top:1px solid var(--linea);padding-top:12px;margin-top:4px}
.area.destacada{background:var(--papel-hueco);border-top:3px solid var(--acento)}
.area.destacada:hover{background:#fbf5e8}


/* == Lámina en la tarjeta de asignatura == */
.area{padding:0}
.area .lamina{aspect-ratio:12/5;overflow:hidden;background:var(--papel-alt);border-bottom:1px solid var(--linea)}
.area .lamina img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.area .cuerpo{padding:28px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.area:hover .lamina{background:#dcc9a6}

/* == Índice temático ======================================== */
.indice{display:grid;gap:32px}
@media(min-width:720px){.indice{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.indice{grid-template-columns:repeat(4,1fr);gap:28px}}
.capitulo{border-top:2px solid var(--tinta);padding-top:16px}
.capitulo h3{display:flex;align-items:baseline;gap:10px;font-size:1.1rem;margin-bottom:14px}
.capitulo h3 i{font-style:normal;font-size:.8rem;color:var(--acento)}
.capitulo ul{list-style:none;display:grid;gap:7px}
.capitulo li a{
  display:flex;justify-content:space-between;gap:12px;font-size:.92rem;
  text-decoration:none;color:var(--tinta-2);padding-bottom:6px;
  border-bottom:1px dotted var(--linea);transition:color .2s ease;
}
.capitulo li a:hover{color:var(--acento)}
.capitulo li a span{font-size:.8rem;opacity:.7;flex:0 0 auto}
.indice-pie{margin-top:38px;padding-top:22px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.indice-pie p{color:var(--tinta-2);font-size:.96rem;max-width:60ch}

/* == Artículos ============================================== */
.articulos{display:grid;gap:34px}
@media(min-width:700px){.articulos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.articulos{grid-template-columns:repeat(3,1fr)}}
.articulo{display:flex;flex-direction:column;gap:13px;text-decoration:none}
.articulo .lamina{aspect-ratio:3/2;overflow:hidden;background:var(--papel-alt);border:1px solid var(--linea)}
.articulo .lamina img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.articulo:hover .lamina img{transform:scale(1.03)}
.lamina.sin-foto{
  display:grid;place-items:center;text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,var(--linea) 9px,var(--linea) 10px),var(--papel-alt);
}
.lamina.sin-foto span{
  font-family:'Marcellus',serif;font-size:.86rem;letter-spacing:.14em;color:var(--acento);
  background:var(--papel);padding:10px 16px;border:1px solid var(--linea);
}
.articulo-meta{font-size:.82rem;color:var(--tinta-2);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.articulo-meta b{font-weight:400;color:var(--acento)}
.articulo-meta i{font-style:normal;opacity:.4}
.articulo h3{font-size:1.22rem;line-height:1.3}
.articulo:hover h3{text-decoration:underline;text-decoration-color:var(--acento)}
.articulo p{font-size:.94rem;color:var(--tinta-2);line-height:1.6}

/* == Materiales (CPT recurso) =============================== */
.materiales{display:grid;gap:2px;background:var(--linea);border:1px solid var(--linea)}
@media(min-width:640px){.materiales{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.materiales{grid-template-columns:repeat(4,1fr)}}
.material{background:var(--papel);padding:26px 24px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:background .25s ease}
.material:hover{background:var(--papel-hueco)}
.material .tipo-icono{width:34px;height:34px;stroke:var(--acento);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.material h3{font-size:1.12rem}
.material p{font-size:.9rem;color:var(--tinta-2);line-height:1.55;flex:1}
.material .formato{font-size:.78rem;color:var(--acento);font-family:'Marcellus',serif;letter-spacing:.06em}

/* == EVAU + IB ============================================== */
.examenes{background:var(--noche);color:var(--sobre-noche)}
.examenes .doble{display:grid;gap:44px}
@media(min-width:880px){.examenes .doble{grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(239,227,204,.18);border:1px solid rgba(239,227,204,.18)}}
.panel{background:var(--noche);padding:0}
@media(min-width:880px){.panel{padding:38px 36px}}
.panel h2{font-size:clamp(1.6rem,3vw,2.15rem);margin-bottom:14px}
.panel p{color:rgba(239,227,204,.8);margin-bottom:22px}
.panel ul{list-style:none;display:grid;gap:11px;margin-bottom:26px}
.panel li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-bottom:1px solid rgba(239,227,204,.14);padding-bottom:10px;font-size:.96rem}
.panel li span{font-size:.8rem;color:rgba(239,227,204,.55);flex:0 0 auto}
.panel .sello{
  display:inline-block;font-family:'Marcellus',serif;font-size:.78rem;letter-spacing:.1em;
  color:var(--acento-2);border:1px solid rgba(200,154,74,.5);padding:5px 12px;margin-bottom:16px;
}

/* == Testimonios ============================================ */
.testimonios{display:grid;gap:30px}
@media(min-width:760px){.testimonios{grid-template-columns:repeat(3,1fr)}}
.testimonio{border-top:2px solid var(--acento);padding-top:20px}
.testimonio p{font-size:1.02rem;line-height:1.7;font-style:italic;color:var(--tinta)}
.testimonio footer{margin-top:14px;font-size:.84rem;color:var(--tinta-2);font-style:normal}
.testimonio footer b{display:block;font-family:'Marcellus',serif;font-size:.98rem;font-weight:400;color:var(--tinta);font-style:normal}

/* == Autor ================================================== */
.autor{display:grid;gap:38px;align-items:center}
@media(min-width:860px){.autor{grid-template-columns:.8fr 1.2fr;gap:60px}}
.autor-foto{border:1px solid var(--linea);padding:10px;background:var(--papel-hueco)}
.autor-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:sepia(.2)}
.autor h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:18px}
.autor p + p{margin-top:1em}
.autor blockquote{margin:26px 0;padding-left:22px;border-left:2px solid var(--acento);font-style:italic;color:var(--tinta-2)}
.credenciales{display:flex;flex-wrap:wrap;gap:28px;margin-top:28px;padding-top:22px;border-top:1px solid var(--linea)}
.credenciales div b{display:block;font-family:'Marcellus',serif;font-size:1.7rem;font-weight:400;color:var(--acento)}
.credenciales div span{font-size:.84rem;color:var(--tinta-2)}