/* Oposan · páginas principales (convocatorias, test, clases, material, Julio, FAQ, 404).
   Se apoya en styles.css; no lo modifica. */

/* cabecera de página interior */
.cab-pagina{padding-block:clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--c-filete);position:relative;isolation:isolate}
.cab-pagina::before{content:'';position:absolute;inset:0;z-index:-1;background:url(/assets/grano.png) center/300px;opacity:.06;pointer-events:none}
.cab-pagina h1{font-size:clamp(2rem,1.3rem + 3vw,3.5rem);max-width:22ch}
.cab-pagina .lead{max-width:42rem}
.cab-pagina .btn{margin-top:.25rem}
.migas{margin-bottom:1.25rem;font-size:.875rem}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.migas li+li::before{content:'/';margin-right:.5rem;color:var(--c-gris)}
.migas a{color:var(--c-enlace)}
.migas [aria-current]{color:var(--c-gris)}

/* ficha de información oficial */
.ficha-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ficha-texto h2{font-size:1.5rem;margin-top:0}
.ficha-texto>div+div{margin-top:1.75rem}
.tarjeta-oficial{border-top:4px solid var(--c-titular);background:var(--c-banda)}
.tarjeta-oficial h2{font-size:1.375rem}
.datos{margin:0}
.datos>div{padding:.75rem 0;border-top:1px solid var(--c-filete)}
.datos>div:first-child{border-top:0;padding-top:0}
.datos dt{font-weight:700;color:var(--c-titular);font-size:.9375rem;margin-bottom:.15rem}
.datos dd{margin:0}
.marcador-pend{background:#fff;border:1px dashed var(--c-titular);border-radius:4px;padding:0 .35em}
.sello{display:inline-block;padding:.1rem .6rem;border-radius:999px;font:600 .8125rem/1.5 var(--f-cuerpo);border:1px solid var(--c-titular);color:var(--c-titular);vertical-align:middle;white-space:nowrap}
.sello-ok{background:var(--c-banda)}
.sello-pend{background:#fff;border-style:dashed}
.tarjeta-oficial .sello-ok{background:#fff}
.estado-tarjeta{max-width:52rem}
.estado-tarjeta h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
.rejilla-fichas{margin-top:1.5rem}
.rejilla-fichas .tarjeta-link{display:block;text-decoration:none;color:var(--c-texto);border-top:4px solid var(--c-titular);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.rejilla-fichas .tarjeta-link h3{border:0;padding:0}
.rejilla-fichas .tarjeta-link:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(1 34 85 / .14)}
.rejilla-fichas .tarjeta-link:hover h3{text-decoration:underline;text-underline-offset:.2em}
.enlaces-rel{margin-inline:auto}
.cierre .nota{margin-inline:auto}

/* marcadores de lo que falta */
.marcador{background:#FFF3B0;color:#0B1220;padding:0 .3em;border-radius:4px;font-weight:600}
.foto-marcador{aspect-ratio:4/5;max-width:22rem;width:100%;display:grid;place-items:center;text-align:center;padding:1.5rem;background:var(--c-superficie);border:2px dashed var(--c-titular);border-radius:var(--r-tarjeta)}

/* quién es Julio */
.julio-rejilla{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.julio-rejilla h2{font-size:1.5rem}
.metodo{margin:1.25rem 0 0;padding:0;list-style:none;counter-reset:m;display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.metodo li{counter-increment:m;border-top:3px solid var(--c-titular);padding-top:.9rem;font-size:.9375rem}
.metodo li::before{content:counter(m);display:block;font:600 1.5rem/1 var(--f-titular);color:var(--c-titular);margin-bottom:.4rem}
.metodo strong{display:block;font:600 1.125rem/1.3 var(--f-titular);color:var(--c-titular)}

/* material */
.ficha-producto{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ficha-producto h2{font-size:1.5rem}
.compra{border-top:4px solid var(--c-enlace);position:sticky;top:96px}
.compra h2{font-size:1.375rem}
.compra h3{font-size:1.125rem}
.compra hr{border:0;border-top:1px solid var(--c-filete);margin:1.25rem 0}
.precio{font:600 2.25rem/1.1 var(--f-titular);color:var(--c-titular);margin-bottom:.75rem}
.precio span{font:500 .9375rem var(--f-cuerpo);color:var(--c-gris)}
.btn-desactivado{background:#E4E7EC;color:var(--c-gris);border:2px dashed var(--c-gris);cursor:not-allowed;width:100%;pointer-events:none}
.nota-lista{margin:0;padding-left:1.1rem;font-size:.875rem;color:var(--c-gris)}
.aviso{max-width:52rem;padding:1rem 1.25rem;background:#fff;border-left:4px solid var(--c-titular);border-radius:0 var(--r-boton) var(--r-boton) 0}

/* privacidad primera capa */
.privacidad{max-width:52rem;padding:clamp(1.25rem,3vw,2rem);background:var(--c-superficie);border:1px solid var(--c-filete);border-radius:var(--r-tarjeta);font-size:.9375rem}
.privacidad h2{font-size:1.25rem}
.privacidad dl{margin:0}
.privacidad dl>div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid var(--c-filete)}
.privacidad dt{font-weight:700;color:var(--c-titular)}
.privacidad dd{margin:0}

/* formulario de clases */
.formulario h2{font-size:1.5rem}
.formulario .btn-accion{width:100%}

@media (max-width:860px){
  .ficha-grid,.ficha-producto,.julio-rejilla{grid-template-columns:1fr}
  .metodo{grid-template-columns:1fr}
  .compra{position:static}
  .privacidad dl>div{grid-template-columns:1fr;gap:.15rem}
  .foto-marcador{max-width:none;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .rejilla-fichas .tarjeta-link{transition:none}
  .rejilla-fichas .tarjeta-link:hover{transform:none;box-shadow:none}
}

/* Retrato tipográfico de Julio (Web v1, 17-10) */
.retrato{margin:0 0 1.25rem}
.retrato-tarjeta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;aspect-ratio:4/5;max-width:22rem;width:100%;padding:1.5rem;background:var(--c-fondo);border:1px solid var(--c-filete);border-radius:var(--r-tarjeta);box-shadow:0 1px 0 var(--c-filete)}
.retrato-mono{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144;font-weight:600;font-size:clamp(5rem,14vw,8rem);line-height:1;letter-spacing:-.02em;color:var(--c-titular)}
.retrato-nombre{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;color:var(--c-titular);border-top:2px solid var(--c-salvia);padding-top:.75rem;margin-top:.25rem}
.retrato-rol{font-size:.95rem;color:var(--c-gris);max-width:18rem}
.retrato-inicio .retrato-tarjeta{aspect-ratio:auto;max-width:none;padding:1.25rem}
.retrato-inicio .retrato-mono{font-size:4.5rem}
.retrato img{display:block;max-width:22rem;width:100%;height:auto;border-radius:var(--r-tarjeta)}
.retrato-inicio img{max-width:none}
@media (max-width:860px){.retrato-tarjeta{max-width:none;aspect-ratio:16/10}}

/* Web v4: pie de la foto de Julio */
.pie-foto{margin-top:.75rem}
.pie-foto b{display:block;font:600 1.375rem/1.2 var(--f-titular);color:var(--c-titular)}
.pie-foto span{font-size:.95rem;color:var(--c-gris)}