/* ==========================================================================
   PÁGINAS INTERIORES · migas de pan, título, tarjetas con giro y texto
   Colores, tipografía y medidas: theme.css (variables).
   Estructura de clases (las genera src/build.js):
     .crumbs       migas de pan (Home > Sección > Página): permiten subir de nivel
     .page-title   título <h1> de la página
     .tiles        rejilla de tarjetas (.tiles--1 = una sola, a todo el ancho)
       .tile         tarjeta enlace; al pasar el cursor gira y muestra .tile__cap
     .prose        texto largo de la página
   ========================================================================== */

/* Todos los bloques de página comparten el ancho de la portada */
.crumbs,.page-title,.tiles,.prose{width:var(--hero-w);margin-left:auto;margin-right:auto}
@media (max-width:760px){ .crumbs,.page-title,.tiles,.prose{width:100%} }

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Migas de pan ---------- */
.crumbs{margin-top:calc(-1 * clamp(20px,3vw,36px) + 8px);margin-bottom:40px;font-family:var(--font-crumbs);font-style:var(--fst-crumbs);font-size:var(--fs-crumbs);word-spacing:var(--ws-crumbs);color:var(--crumbs-color)}
.crumbs ol{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:">";margin:0 .45em}
.crumbs a{color:inherit;transition:color .2s}
nav.crumbs ol li a:not(.tile):not(.btn):not(.nav__brand):hover,nav.crumbs ol li a:not(.tile):not(.btn):not(.nav__brand):focus-visible{color:var(--crumbs-hover);text-decoration:none}
.crumbs [aria-current]{font-weight:400}

/* ---------- Título ---------- */
.page-title{margin-top:clamp(16px,2.5vw,28px);margin-bottom:clamp(20px,3vw,36px);font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:1.2;color:var(--title-color)}

/* ---------- Rejilla de tarjetas ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.tiles--1{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){ .tiles{grid-template-columns:minmax(0,1fr);gap:20px} }

/* Tarjeta: la imagen se pliega (gira sobre su eje horizontal) contra un fondo oscuro fijo; el recuadro recorta
   todo lo que sobresale, y el texto entra con el mismo giro, en el mismo sentido, cuando la imagen ya está plegada.
   Duración: --t-flip; profundidad: --tile-perspective. */
.tile{position:relative;overflow:hidden;background:var(--tile-cap-bg);display:block;aspect-ratio:var(--tile-ratio);perspective:var(--tile-perspective);color:var(--tile-cap-ink);text-decoration:none}
.tile--big{aspect-ratio:auto}                      /* imagen grande: conserva su proporción (max-width inline si la imagen es pequeña) */
.tile--big .tile__img{height:auto}
.tile__img{display:block;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;
           transition:transform var(--t-flip) ease-in var(--t-flip),opacity 0s linear var(--t-flip)}  /* al salir el cursor, la imagen vuelve después del texto; opacity 0 al llegar a 90° evita la línea del canto */
.tile__cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;padding:16px;
           text-align:center;opacity:0;transform:rotateX(90deg);transition:transform var(--t-flip) ease-out,opacity 0s linear var(--t-flip);backface-visibility:hidden;pointer-events:none}
.tile__title{font-size:var(--fs-tile-title);line-height:1.15}
.tile__desc{font-size:var(--fs-tile-desc);line-height:1.3}
.tile:hover .tile__img,.tile:focus-visible .tile__img{transform:rotateX(-90deg);opacity:0;transition:transform var(--t-flip) ease-in,opacity 0s linear var(--t-flip)}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{opacity:1;transform:none;transition:transform var(--t-flip) ease-out var(--t-flip),opacity 0s linear var(--t-flip)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Pantallas táctiles (sin cursor): no hay giro; el título se muestra bajo la imagen. */
@media (hover:none){
  .tile{aspect-ratio:auto;perspective:none;overflow:visible;background:none}
  .tile__img{height:auto;aspect-ratio:var(--tile-ratio)}
  .tile--big .tile__img{aspect-ratio:auto}
  .tile__cap{position:static;opacity:1;transform:none;pointer-events:auto;background:none;color:var(--ink);align-items:flex-start;text-align:left;padding:8px 0 0}
  .tile:hover .tile__img,.tile:focus-visible .tile__img{transform:none;opacity:1}
  .tile__title{font-size:1.1rem;font-weight:600}
  .tile__desc{font-size:.9rem;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){ .tile__img,.tile__cap{transition:none} }

/* ---------- Texto largo ---------- */
.prose{margin-top:clamp(24px,3vw,40px)}
.prose>*{max-width:var(--measure)}
.prose p{margin:0 0 1.1em;font-size:var(--fs-body);line-height:var(--lh-body)}
.prose a{color:inherit}

/* ---------- Videos: listado ---------- */
/* Miniaturas con proporción propia y título en negrita debajo; la cara oculta añade «Watch now». */
.tiles--video{--tile-ratio:var(--tile-ratio-video);row-gap:calc(var(--gap) * .9)}
.vtile__title{margin:.55em 0 0;font-size:var(--fs-vtitle);font-weight:700;line-height:1.3}
@media (hover:none){ .vtile__title{display:none} }   /* en táctil el título ya se muestra bajo la imagen, dentro de la tarjeta */
.tile__cta{margin-top:.6em;font-size:var(--fs-tile-cta);color:var(--accent);letter-spacing:.04em}
.tile__cta::before{content:"\25B6\00a0"}                       /* triángulo de reproducción */
@media (hover:none){ .tile__cta{display:none} }

/* ---------- Videos: ficha ---------- */
.film-wrap,.meta{width:var(--hero-w);margin-left:auto;margin-right:auto}   /* .film-wrap fija el ancho de página; .film (max-width en línea) limita el vídeo a 1,5 veces su resolución */
@media (max-width:760px){ .film-wrap,.meta{width:100%} }
.film{max-width:100%}
.film--missing{position:relative}
.film--missing img{display:block;width:100%;height:auto;filter:grayscale(1) brightness(.6)}
.film--missing p{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:#fff;font-size:var(--fs-meta)}
.meta{display:flex;flex-wrap:wrap;gap:6px 32px;margin-top:20px;margin-bottom:0;font-size:var(--fs-meta);color:var(--muted)}
.meta dt{display:inline;font-weight:600;margin-right:.4em}
.meta dd{display:inline;margin:0}
.meta__full{flex:0 0 100%;font-weight:600}

/* ---------- Artículos: listado ---------- */
.acards{width:var(--hero-w);margin:clamp(24px,3vw,40px) auto 0}
@media (max-width:760px){ .acards{width:100%} }
.acard{padding:0 0 1.6em;margin:0 0 1.6em;border-bottom:1px solid var(--rule);max-width:var(--measure)}
.acard__title{margin:0 0 .4em;font-size:1.35rem;line-height:1.25;letter-spacing:var(--ls-article-title)}
.page-title--article{letter-spacing:var(--ls-article-title)}
.acard__title a{color:inherit;text-decoration:none}
.acard__text{margin:0 0 1em;font-size:var(--fs-body);line-height:var(--lh-body)}
.btn{display:inline-block;padding:.45em 1.1em;border-radius:6px;background:var(--btn-bg);color:var(--btn-ink);text-decoration:none;font-size:.9rem;transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--btn-bg-hover);color:var(--btn-ink-hover)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Artículos: texto y notas ---------- */
.prose--article h2{margin:1.8em 0 .6em;font-size:1.25rem}
.prose--article p{text-align:left}
sup.fn{font-size:var(--fs-note-mark);line-height:0;vertical-align:super;margin:0 .1em}
sup.fn a{color:var(--note-mark);text-decoration:none;font-weight:600;cursor:pointer;padding:0 .12em}
.notes{margin-top:2.5em;padding-top:1em;border-top:1px solid var(--rule)}
.notes__title{font-size:1.1rem;margin:0 0 .8em}
.notes__list{padding-left:1.8em;font-size:.92rem;line-height:1.55}
.notes__list li{margin-bottom:.6em;max-width:var(--measure)}
.notes__list li:target{background:rgba(255,102,0,.12)}
.fn-back{margin-left:.4em;color:var(--note-mark);text-decoration:none}
/* Recuadro emergente de una nota (lo crea js/notes.js) */
.note-pop{position:absolute;z-index:50;width:var(--note-w);max-width:calc(100vw - 24px);box-sizing:border-box;padding:9px 14px;
  background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-border);border-radius:var(--note-radius);
  box-shadow:var(--note-shadow);font-size:var(--fs-note);line-height:1.4;text-align:left}
.note-pop a{color:inherit}
.note-pop .fn-back{display:none}

/* ---------- CV ---------- */
.prose--cv .cv__h{margin:1.8em 0 .5em;font-size:1.1rem}
.cv__links{list-style:none;margin:0 0 1em;padding:0}
.cv__links li{margin:.3em 0;font-size:var(--fs-body)}

/* ---------- Contacto ---------- */
.form{max-width:var(--measure);margin-top:1.4em}
.form__row{margin:0 0 1.1em}
.form label{display:block;margin-bottom:.35em;font-size:.92rem}
.form input,.form textarea{width:100%;box-sizing:border-box;padding:.6em .75em;font:inherit;color:#000;background:#fff;border:1px solid rgba(0,0,0,.35);border-radius:6px}
.form input:focus,.form textarea:focus{outline:none}
.form .btn{border:0;cursor:pointer;font:inherit;font-size:.95rem}
.form__trap{position:absolute;left:-9999px}
.form__status{min-height:1.4em;font-size:.95rem}
.form__status.is-error{color:#ffd0d0}

/* ---- Formulario de contacto: consentimiento, widget Altcha y aviso de privacidad ---- */
.form .form__consent label{display:flex;gap:.6em;align-items:flex-start;font-size:.88rem}
.form .form__consent input{width:auto;margin-top:.25em;flex:none}
.form altcha-widget{display:block;max-width:var(--measure);margin:0 0 1.1em;--altcha-max-width:var(--measure);--altcha-border-radius:6px;--altcha-border-width:1px;--altcha-border-color:rgba(0,0,0,.35);--altcha-color-base:#fff;--altcha-color-base-content:#000;--altcha-color-primary:#000;--altcha-color-success:#000}
.form__privacy{max-width:var(--measure);margin-top:1.4em;font-size:.82rem;line-height:1.5;opacity:.85}
.form .btn:disabled{opacity:.5;cursor:default}

/* Envío correcto: se ocultan los campos y queda solo el mensaje de confirmación */
.form.is-sent > :not(.form__status){display:none}
.form.is-sent .form__status{margin:0;padding:1.5em 0;font-size:1.25rem}