/* =============================================================================
   REVISTA.CSS — hoja maestra de la revista (nuvi.es) · «Mis archivos» de m3solaris
   -----------------------------------------------------------------------------
   La REJILLA es Bootstrap 5 (row / col / offset / row-cols / g*, ratio, utilidades).
   Aquí solo va lo que Bootstrap no trae: tokens, letra, color, proporciones de foto,
   los tres efectos de movimiento y el pie que se descubre.
   Sumario
     01 Tokens           05 Billboard (foto fija, el texto sube por encima — como V Magazine)
     02 Base             06 Columnas pegadas (como Massimo Dutti Paper)
     03 Recursos         07 Parallax (CSS ligado al scroll; Baseline: Chrome 115, Safari 26, Firefox 159)
     04 Bandas           08 Pie que se descubre (footer reveal) · 09 Móvil · 10 Menos movimiento
   ========================================================================== */

/* 01 · Tokens */
:root{
  --rv-paper:#f8f7f4; --rv-ink:#121212; --rv-ink-2:#5e5b56;
  --rv-marca:#5c1f24; --rv-marca-ink:#f3e9e2;
  --rv-sans:"tb-body","Inter",system-ui,sans-serif;
  --rv-cab:65px;                /* alto de la cabecera fija de m3solaris (medido en nuvi.es, 11-nov-2026) */
  --rv-pegado:calc(var(--rv-cab) + 60px); /* las columnas se pegan bajo el rótulo */
}

/* 02 · Base dentro de la revista */
body{background-color:var(--rv-paper)}
.rv-pagina{font:500 15px/1.32 var(--rv-sans);letter-spacing:-.012em;color:var(--rv-ink)}
.rv-pagina h1,.rv-pagina h2,.rv-pagina h3,.rv-pagina p,.rv-pagina figure{margin:0}
.rv-pagina h1,.rv-pagina h2,.rv-pagina h3{font-family:var(--rv-sans);font-stretch:100%;text-transform:none}   /* m3solaris da a los titulares su fuente display: aquí manda la de la revista */
.rv-pagina a{color:inherit;text-decoration:none}

/* 03 · Recursos: proporciones para .ratio de Bootstrap, blanco y negro, paréntesis, textos */
.rv-r-3x4{--bs-aspect-ratio:133.333%} .rv-r-4x5{--bs-aspect-ratio:125%} .rv-r-2x3{--bs-aspect-ratio:150%}
.rv-bn img{filter:grayscale(1)}
.rv-p{white-space:nowrap}
.rv-intro,.rv-intro p{font-size:clamp(18px,1.45vw,22px);line-height:1.14;letter-spacing:-.02em;max-width:15em}
.rv-mas{display:inline-flex;gap:10px;align-items:center;font-size:13px}
.rv-mas::after{content:"→"}
.rv-meta{font-size:13px}
.rv-rotulo{padding:22px 0 12px;border-bottom:1px solid var(--rv-ink);font-size:17px;background-color:var(--rv-paper)}
.rv-creditos{margin-top:28px!important;font-size:13px;line-height:1.5;color:var(--rv-ink-2)}
.rv-creditos b{color:var(--rv-ink);font-weight:500}
.rv-item-tit{font-size:16px;line-height:1.08;letter-spacing:-.02em;font-weight:600}
.rv-item-txt{font-size:13px;color:var(--rv-ink-2)}

/* 04 · Bandas */
.rv-portada{color:var(--rv-paper)}
.rv-portada-img{object-position:50% 28%}
.rv-portada-cab h1{font-size:clamp(140px,30vw,560px);line-height:.78;font-weight:600;letter-spacing:-.075em;color:inherit;margin-bottom:-.06em}
.rv-portada-num,.rv-portada-lin{font-size:15px;line-height:1.35}
.rv-semana{background-color:var(--rv-marca);color:var(--rv-marca-ink)}
.rv-semana-tit{font-size:clamp(26px,2.2vw,34px);line-height:1.02;letter-spacing:-.03em;font-weight:600;color:inherit}
.rv-semana small{font-size:13px;opacity:.75}
.rv-historia{color:#fff}
.rv-historia-img{object-position:50% 40%}
.rv-historia-tit h2{font-size:clamp(40px,5.6vw,96px);line-height:.98;letter-spacing:-.04em;font-weight:600;color:inherit}
.rv-historia-x{font-size:14px}
.rv-gente-lista{font-size:clamp(40px,6.4vw,112px);line-height:.98;letter-spacing:-.05em;font-weight:500;text-transform:uppercase}
.rv-gente-lista a:hover{color:var(--rv-marca)}
.rv-gente-lista a:not(:last-child)::after{content:", ";color:var(--rv-ink)}
.rv-gente-lista a:last-child::after{content:".";color:var(--rv-ink)}
.rv-gente-lista sup{font-size:.22em;letter-spacing:0;vertical-align:top;margin-left:.15em;position:relative;top:.5em}

/* 05 · Billboard: dos pantallas de alto; la foto (position-sticky) se queda y el texto sube encima */
.rv-billboard{min-height:200vh}
.rv-billboard-capa{min-height:200vh}

/* 06 · Columnas pegadas: el rótulo arriba y la columna de texto debajo de él */
.rv-rotulo-pegado{position:sticky;top:var(--rv-cab);z-index:3}
.rv-col-pegada{position:sticky;top:var(--rv-pegado)}

/* 07 · Parallax en fotos medianas */
@supports (animation-timeline: view()){
  .rv-parallax{overflow:hidden}
  .rv-parallax img{scale:1.18;animation:rv-parallax linear both;animation-timeline:view();animation-range:cover}
  @keyframes rv-parallax{from{translate:0 -7%}to{translate:0 7%}}
}

/* 08 · Pie que se descubre: la página tapa al pie de m3solaris y lo destapa al final */
.tb-main{position:relative;z-index:1;background-color:var(--rv-paper)}
.tb-footer{position:sticky;bottom:0;z-index:0}

/* 09 · Móvil (corte de m3solaris: 768 px) */
@media (max-width:768px){
  .rv-col-pegada{position:static}
  .rv-billboard,.rv-billboard-capa{min-height:160vh}
}

/* 10 · Quien pide menos movimiento no tiene parallax ni pie que se descubre */
@media (prefers-reduced-motion:reduce){
  .rv-parallax img{animation:none;scale:1}
  .tb-footer{position:static}
}

/* 05b · Legibilidad del texto que sube sobre la foto */
.rv-historia .rv-billboard-capa,.rv-portada .rv-billboard-capa{text-shadow:0 1px 28px rgba(0,0,0,.28)}

/* 06 · Pie de la revista (layouts/footer.php de m3solaris + módulos 115-117).
   Se descubre al final (footer reveal, 04). Arriba el menú del idioma como lista con comas;
   abajo la cabecera NUVI a todo el ancho; al pie, el copyright del theme. */
.tb-footer.tb-footer{display:flex;flex-direction:column;gap:clamp(40px,8vh,96px);padding:clamp(48px,8vh,88px) 22px 0;
  background-color:var(--rv-marca);color:var(--rv-marca-ink);font:500 clamp(15px,1.25vw,19px)/1.2 var(--rv-sans);letter-spacing:-.01em}
.tb-footer a{color:inherit;text-decoration:none}
.tb-footer a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tb-footer__area{margin:0;padding:0}
.tb-footer__area--footer2{order:1}
.tb-footer__area--footer1{order:2;overflow:hidden}
.tb-footer__legal{order:3}
.tb-footer__area--footer2 ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;text-transform:uppercase}
.tb-footer__area--footer2 li{margin:0}
.tb-footer__area--footer2 li:not(:last-child)::after{content:",\00a0"}
.tb-footer__area--footer2 li:last-child::after{content:"."}
.rv-pie-cab{margin:0;font-weight:600;font-size:calc((100vw - 44px) * .455);line-height:.74;letter-spacing:-.075em;text-align:center;white-space:nowrap;transform:translateX(-.035em)}
.tb-footer .tb-footer__legal{color:inherit;background:none;border-top:1px solid color-mix(in srgb,var(--rv-marca-ink) 30%,transparent)}
.tb-footer__legal-in.tb-footer__legal-in{max-width:none;padding:14px 0 18px;display:flex;justify-content:space-between}
.tb-footer__copy.tb-footer__copy{margin:0;color:inherit;font:500 12px/1 var(--rv-sans);letter-spacing:0;text-transform:uppercase;opacity:.8}

/* 07 · Página de sección (blog de categoría de Joomla) — estilo Paper.
   Solo en las secciones de la revista: sus elementos de menú (120-131) ponen la clase «rv-sec» en <body>.
   La rejilla es Bootstrap de verdad: blog_class = «row row-cols-1 row-cols-md-2 row-cols-xl-3 gx-4 gy-5».
   Fecha «Noviembre ( 26 )»: sustitución de idioma DATE_FORMAT_LC3 (revista/idioma/). */
.rv-sec .tb-main{font:500 15px/1.32 var(--rv-sans);letter-spacing:-.012em;color:var(--rv-ink)}
.rv-sec .com-content-category-blog{padding:0 16px clamp(80px,12vh,140px)}
.rv-sec .com-content-category-blog > h1{margin:clamp(28px,5vh,56px) 0 clamp(36px,7vh,80px);text-align:center;font:600 clamp(64px,15vw,230px)/.8 var(--rv-sans);letter-spacing:-.06em;text-transform:uppercase}
.rv-sec .category-desc{max-width:44ch;margin:-24px auto 56px;text-align:center;color:var(--rv-ink-2)}
.rv-sec .category-desc:empty{display:none}
.rv-sec .blog-item{border:0;padding-bottom:0;margin-bottom:0;background:none}
.rv-sec .blog-item .item-image{margin:0;float:none;overflow:hidden}
.rv-sec .blog-item .item-image img{display:block;width:100%;height:100%;object-fit:cover}
.rv-sec .blog-item .page-header{margin:0;padding:0;border:0}
.rv-sec .blog-item h2{margin:0 0 8px;font:600 17px/1.12 var(--rv-sans);letter-spacing:-.02em}
.rv-sec .blog-item h2 a,.rv-sec .blog-item a{color:var(--rv-ink);text-decoration:none}
.rv-sec .blog-item:hover h2 a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rv-sec .article-info,.rv-sec .article-info time{display:block;margin:0;padding:0;font:500 12.5px/1.2 var(--rv-sans);letter-spacing:-.005em;text-transform:none;color:var(--rv-ink)!important;background:none;border:0}
.rv-sec .article-info dd{margin:0;padding:0} .rv-sec .article-info .icon-calendar,.rv-sec .article-info-term{display:none}
.rv-sec .article-info time{display:block}
.rv-sec .rv-entradilla{margin:0;font-size:13px;line-height:1.3;color:var(--rv-ink-2)}
/* ficha de la rejilla: foto a la izquierda (3:4), a la derecha fecha arriba y titular + entradilla abajo */
.rv-sec .blog-items.row .blog-item{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.rv-sec .blog-items.row .item-image{aspect-ratio:3/4}
.rv-sec .blog-items.row .item-content{display:flex;flex-direction:column}
.rv-sec .blog-items.row .article-info{order:-1;margin-bottom:auto;padding-bottom:16px}
/* destacada: foto grande y el texto abajo a la derecha */
.rv-sec .rv-destacado{margin-bottom:clamp(56px,9vh,110px)}
.rv-sec .rv-destacado .blog-item{display:grid;grid-template-columns:1fr;gap:16px}
.rv-sec .rv-destacado .item-image{aspect-ratio:3/2}
.rv-sec .rv-destacado h2{font-size:clamp(28px,3.2vw,48px);line-height:1;letter-spacing:-.04em}
.rv-sec .rv-destacado .rv-entradilla{font-size:16px;max-width:34ch}
.rv-sec .rv-destacado .article-info{order:-1;margin-bottom:14px}
@media (min-width:992px){
  .rv-sec .com-content-category-blog{padding-inline:24px}
  .rv-sec .rv-destacado .blog-item{grid-template-columns:7fr 5fr;column-gap:24px}
  .rv-sec .rv-destacado .item-content{display:flex;flex-direction:column;justify-content:flex-end}
}
.rv-sec .com-content-category-blog__navigation{margin-top:64px;text-align:center}

/* 08 · Artículo de la revista (vista de artículo de Joomla) — estilo Paper.
   Mismo alcance «rv-sec»: los artículos que se abren desde una sección. Las homes del usuario no cambian. */
.rv-sec .com-content-article{padding:clamp(32px,6vh,72px) 16px clamp(80px,12vh,140px)}
.rv-sec .com-content-article > .page-header{margin:0 auto;padding:0;border:0;text-align:center;max-width:min(1100px,100%)}
.rv-sec .com-content-article > .page-header h1{margin:0;text-align:center;text-wrap:balance;font:600 clamp(40px,6vw,96px)/.92 var(--rv-sans);letter-spacing:-.055em}
.rv-sec .com-content-article > .article-info{order:-1;text-align:center;margin:0 0 18px}
.rv-sec .com-content-article{display:flex;flex-direction:column}
.rv-sec .com-content-article > .item-image{position:relative;float:none;margin:clamp(36px,6vh,72px) auto;width:min(560px,100%)}
.rv-sec .com-content-article > .item-image img{display:block;width:100%;height:auto}
.rv-sec .com-content-article > .item-image figcaption{position:absolute;right:-22px;bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);font:500 11px/1.2 var(--rv-sans);letter-spacing:0;text-transform:none;color:var(--rv-ink-2);margin:0;padding:0}
.rv-sec .com-content-article__body > p{max-width:36ch;margin:0 auto 1.1em;font-size:16px;line-height:1.38}
.rv-sec .com-content-article__body > .rv-entradilla{max-width:26ch;margin:0 auto clamp(40px,7vh,80px);text-align:center;font-size:clamp(20px,2vw,28px);line-height:1.15;letter-spacing:-.025em;color:var(--rv-ink)}
.rv-sec .com-content-article__body > .row{margin-block:clamp(48px,9vh,120px)}
.rv-sec .com-content-article__body img{max-width:100%;height:auto}
@media (min-width:992px){.rv-sec .com-content-article{padding-inline:24px}}
@media (max-width:767.98px){.rv-sec .com-content-article > .item-image figcaption{position:static;writing-mode:horizontal-tb;transform:none;margin-top:8px}}