/* Hoja de estilos del diseño "revista": la usan tanto las páginas reales de
   modelo (arkana.html, captur.html... vía modelo-shared.html) como el
   escaparate interno de previsualización (revista.html). */

/* Fuente NouvelR servida en local: la del sitio real está en otro dominio y
   los navegadores bloquean por CORS cargar una fuente @font-face de otro
   origen cuando esta página se abre suelta (doble clic o servidor local). */
@font-face{font-family:'NouvelR';src:url('/MEDIOS/nouvel-r/NouvelRBook.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NouvelR';src:url('/MEDIOS/nouvel-r/NouvelRRegular.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'NouvelR';src:url('/MEDIOS/nouvel-r/NouvelRSemibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'NouvelR';src:url('/MEDIOS/nouvel-r/NouvelRBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'NouvelR';src:url('/MEDIOS/nouvel-r/NouvelRExtrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{ --rv-yellow:#EFDF00; }
.rv-wrap{font-family:'NouvelR',sans-serif;}
html{scroll-behavior:smooth;}
.rv-wrap{background:#0d0d0c;color:#fff;font-family:inherit;}

/* SELECTOR DE MODELO (nuevo: antes cada modelo era un archivo, ahora es un
   desplegable dentro del mismo revista.html) */
.rv-switch{display:flex;align-items:center;gap:8px;margin-right:14px;}
.rv-switch label{font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.04em;white-space:nowrap;}
.rv-switch select{background:#1a1a19;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:2px;font-family:inherit;font-size:13px;padding:6px 8px;max-width:150px;}

/* SECCIONES CON FOTO
   Cada foto viene en dos versiones del banco oficial de renault.es:
   horizontal (ordenador/tablet) y vertical (móvil), elegidas con <picture>.
   revista-loader.js añade a cada sección las clases que la colocan:
     d-full : ordenador/tablet -> foto horizontal a todo el ancho, con su
              proporción (como mucho el alto de la pantalla), texto encima.
     d-side : ordenador/tablet -> solo hay vertical: foto a un lado, texto al otro.
     m-full : móvil -> vertical a pantalla completa, texto encima.
     m-nat  : móvil -> no hay vertical: la horizontal entera y el texto debajo.
   Nunca se deforma la foto y el coche queda siempre centrado. */
.rv-wrap{--hdr:78px;}
.rv-sec{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#0d0d0c;}
.rv-media{position:absolute;inset:0;z-index:0;display:block;background:#0d0d0c;}
.rv-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.rv-sec::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.85) 100%);pointer-events:none;}
.rv-sec-in{position:relative;z-index:2;padding:0 32px 48px;max-width:1280px;margin:0 auto;width:100%;box-sizing:border-box;}

/* HERO */
.rv-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%);}
.rv-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--rv-yellow);font-weight:700;margin:0 0 10px;}
.rv-h1{font-size:clamp(34px,6.5vw,84px);line-height:.95;font-weight:800;margin:0 0 14px;text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:break-word;}
.rv-sub{font-size:clamp(14px,1.6vw,18px);line-height:1.5;color:rgba(255,255,255,.85);max-width:560px;margin:0 0 24px;}
.rv-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);animation:rvBounce 2s infinite;}
@keyframes rvBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media (min-width:761px){.rv-scroll{display:none;}}

/* Ordenador y tablet: horizontal a todo el ancho con su proporción natural.
   Si la pantalla es más baja que la foto, se recorta un poco por arriba y
   por abajo (el coche está centrado en todas las fotos elegidas). */
@media (min-width:761px){
  .rv-sec.d-full{height:min(calc(100vh - var(--hdr)),calc(100vw / var(--ar)));min-height:420px;}
  .d-side{--side-h:min(calc(100vh - var(--hdr)),calc(50vw / var(--ar)),960px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;height:var(--side-h);}
  .d-side .rv-media{position:relative;inset:auto;order:2;}
  .d-side .rv-media img{width:auto;height:var(--side-h);aspect-ratio:var(--ar);}
  .d-side::after{display:none;}
  .d-side .rv-sec-in{order:1;padding:40px 56px;max-width:640px;margin:0 0 0 auto;}
}
/* Tablet: un poco menos de margen */
@media (min-width:761px) and (max-width:1024px){
  .rv-sec-in{padding:0 24px 36px;}
  .d-side .rv-sec-in{padding:32px;}
}

/* Móvil */
@media (max-width:760px){
  .rv-wrap{--hdr:64px;}
  .rv-sec-in{padding:0 20px 36px;}
  .rv-sec.m-full{height:min(calc(100vw / var(--ar-m)),calc(100svh - var(--hdr) - 56px));min-height:520px;}
  .rv-sec.m-nat{display:block;}
  .m-nat .rv-media{position:relative;inset:auto;}
  .m-nat .rv-media img{height:auto;aspect-ratio:var(--ar-m);}
  .m-nat::after{display:none;}
  .m-nat .rv-sec-in{padding:20px 20px 40px;}
  .rv-close{padding:70px 0;}
  /* Portada con el texto arriba (ver heroTextoMovil en revista-data.js) */
  .rv-hero.m-top.m-full{justify-content:flex-start;}
  .rv-hero.m-top.m-full .rv-sec-in{padding-top:28px;}
  .rv-hero.m-top.m-full::after{background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 50%);}
}

/* FOTO A PANTALLA COMPLETA + TITULAR (una foto, una idea — como renault.es) */
.rv-feature h3{position:relative;z-index:2;font-size:clamp(22px,4vw,38px);font-weight:800;text-transform:uppercase;margin:0 0 10px;}
.rv-feature p{position:relative;z-index:2;font-size:16px;color:rgba(255,255,255,.85);max-width:480px;margin:0;}

/* PANEL NEGRO CON CIFRAS GRANDES (estilo renault.es) */
.rv-black{background:#000;padding:clamp(64px,10vw,110px) 24px;}
.rv-black-in{max-width:820px;margin:0 auto;}
.rv-black-head{font-size:clamp(24px,4.2vw,40px);font-weight:800;line-height:1.15;margin:0 0 48px;}
.rv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-bottom:48px;}
@media (max-width:560px){.rv-stats{grid-template-columns:1fr 1fr;gap:28px 20px;}}
.rv-stat-val{font-size:clamp(36px,6vw,56px);font-weight:800;line-height:1;}
.rv-stat-val small{font-size:.45em;font-weight:700;margin-left:2px;}
.rv-stat-lbl{font-size:13px;color:rgba(255,255,255,.55);margin-top:8px;max-width:180px;}
.rv-versions{border-top:1px solid rgba(255,255,255,.18);margin-bottom:36px;}
.rv-versions-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rv-yellow);font-weight:700;margin:0 0 14px;}
.rv-version-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:15px;}
.rv-version-name{font-weight:700;min-width:0;}
.rv-version-mid{display:block;font-weight:400;font-size:13px;color:rgba(255,255,255,.55);margin-top:3px;}
.rv-version-price{font-weight:800;font-size:18px;text-align:right;white-space:nowrap;}
.rv-version-price small{display:block;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.rv-versions-note{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5);margin:-20px 0 32px;}
.rv-version-monthly{display:block;font-weight:400;font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.rv-black-btn{display:inline-block;background:#fff;color:#111;font-weight:700;font-size:13px;letter-spacing:.02em;padding:15px 28px;border-radius:2px;text-decoration:none;}
.rv-black-btn:hover{background:var(--rv-yellow);}

/* FICHA TÉCNICA (sustituye al panel de color: más datos, sin foto) */
.rv-specs{background:#141312;padding:clamp(56px,8vw,80px) 20px clamp(60px,9vw,90px);}
.rv-specs-in{max-width:900px;margin:0 auto;}
.rv-specs-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rv-yellow);font-weight:700;margin:0 0 28px;text-align:center;}
.rv-specs-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18);}
.rv-spec-tile{padding:26px 16px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);text-align:center;}
.rv-spec-tile-val{font-size:clamp(18px,2.6vw,26px);font-weight:800;line-height:1.15;}
.rv-spec-tile-lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:8px;}
@media (max-width:640px){.rv-specs-grid{grid-template-columns:repeat(2,1fr);}}

/* BLOQUES DE CONTENIDO (diseño / tecnología / seguridad / equipamiento —
   texto real de renault.es, sin fotos: así es como lo hace su propia web,
   alternando con las fotos a pantalla completa en vez de meter una rejilla
   de tarjetas). */
.rv-info{background:#141312;padding:clamp(56px,9vw,90px) 24px;}
.rv-info-in{max-width:760px;margin:0 auto;}
.rv-info-block{padding:32px 0;border-bottom:1px solid rgba(255,255,255,.15);}
.rv-info-block:first-child{padding-top:0;}
.rv-info-block:last-child{border-bottom:none;}
.rv-info-head{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rv-yellow);font-weight:700;margin:0 0 12px;}
.rv-info-text{font-size:17px;line-height:1.65;color:rgba(255,255,255,.82);margin:0;}

.rv-btn{display:inline-block;background:var(--rv-yellow);color:#111;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:14px 30px;border-radius:2px;text-decoration:none;}
.rv-btn:hover{background:#fff;}

/* FORMULARIO DE CONTACTO (contact-section/contact-card ya definidos en
   modelo-renault.css, que las páginas de modelo siguen cargando; aquí solo
   se ajusta el espaciado para que combine con el resto de secciones rv-*). */
.rv-contact{background:#0d0d0c;padding:90px 24px;}

/* CIERRE */
.rv-close{background:#0d0d0c;justify-content:center;text-align:center;min-height:60vh;}
.rv-close::after{display:none;}
.rv-close-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rv-yellow);margin:0 0 14px;}
.rv-close h2{font-size:clamp(22px,4vw,32px);font-weight:800;margin:0 0 18px;}
.rv-close p{color:rgba(255,255,255,.65);font-size:14px;max-width:460px;margin:0 auto 30px;}
.rv-close-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:36px;}
.rv-close-btn{border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px;padding:12px 22px;border-radius:2px;text-decoration:none;}
.rv-close-btn.solid{background:var(--rv-yellow);color:#111;border-color:var(--rv-yellow);font-weight:700;}
.rv-close-meta{font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.04em;}

/* BARRA FIJA INFERIOR (estilo renault.es: siempre visible mientras haces scroll) */
.rv-wrap{padding-bottom:64px;}
.rv-sticky{position:fixed;left:0;right:0;bottom:0;z-index:500;display:flex;background:#0d0d0c;border-top:1px solid rgba(255,255,255,.15);}
.rv-sticky a{flex:1;min-width:0;text-align:center;padding:18px 10px;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.02em;}
.rv-sticky a.outline{color:#fff;border-right:1px solid rgba(255,255,255,.15);padding-left:60px;}
.rv-sticky a.solid{background:var(--rv-yellow);color:#111;}