/* Render · estilos de la landing
   Paleta, tipografías y formas del Kit de marca de Render. */

:root {
  --negro: #000000;
  --blanco: #ffffff;
  --azul: #008cd4;
  --gris: #1a1a1a;
  --azul-profundo: #00466a;
  --suave: #b3b3b3;
  --suave-claro: #4d4d4d;
  --titulo: 'Bungee', 'Arial Black', Impact, sans-serif;
  --texto: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--blanco); font-family: var(--texto); font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blanco); }
p { margin: 0; }
::selection { background: var(--blanco); color: var(--negro); }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
.claro :focus-visible { outline-color: var(--negro); }
section { scroll-margin-top: 96px; }

/* ---------- Base ---------- */
.contenedor { box-sizing: content-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.titulo { margin: 0; font-family: var(--titulo); font-weight: 400; font-size: clamp(40px, 4.4vw, 56px); line-height: 1.07; text-transform: uppercase; }
.subtitulo { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; }
.suave { color: var(--suave); }
.chico { font-size: 14px; line-height: 20px; }
.rotulo { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.etiqueta { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.etiqueta--gris { background: var(--gris); color: var(--blanco); }
.etiqueta--negra { background: var(--negro); color: var(--blanco); }
.escudo { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px)); }
.contorno { color: var(--blanco); }
@supports (-webkit-text-stroke: 1px #ffffff) {
  .contorno { color: transparent; -webkit-text-stroke: 1.5px var(--blanco); transition: color .5s var(--ease); }
  .paso:hover .contorno { color: var(--blanco); }
}

/* ---------- Botones y enlaces ---------- */
.boton { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border: 0; border-radius: 4px; font-family: inherit; font-size: 15px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .35s var(--ease); }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .55s var(--ease); }
.boton:hover::before { transform: none; }
.boton--principal { background: var(--azul); color: var(--negro); }
.boton--principal::before { background: var(--blanco); }
.boton--secundario { background: transparent; color: var(--blanco); border: 2px solid var(--blanco); }
.boton--secundario::before { background: var(--blanco); }
.boton--secundario:hover { color: var(--negro); }
.boton--claro { background: var(--azul); color: var(--negro); }
.boton--claro::before { background: var(--negro); }
.boton--claro:hover { color: var(--blanco); }
.boton--chico { height: 44px; padding: 0 20px; font-size: 13px; letter-spacing: .08em; }

.enlace { position: relative; color: var(--suave); font-weight: 700; text-decoration: none; transition: color .35s var(--ease); }
.enlace::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--blanco); transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease); }
.enlace:hover { color: var(--blanco); }
.enlace:hover::after { transform: scaleX(1); transform-origin: left center; }
.enlace--texto { color: var(--blanco); }
.enlace--texto::after { bottom: -2px; }

/* ---------- Entrada ---------- */
.intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); animation: intro-fin 1.9s linear forwards; }
.intro span { display: block; background: var(--negro); animation: cortina-sube .75s cubic-bezier(.77, 0, .18, 1) forwards; }
.intro span:nth-child(even) { animation-name: cortina-baja; }
.intro span:nth-child(1) { animation-delay: .8s; }
.intro span:nth-child(2) { animation-delay: .86s; }
.intro span:nth-child(3) { animation-delay: .92s; }
.intro span:nth-child(4) { animation-delay: .98s; }
.intro span:nth-child(5) { animation-delay: 1.04s; }
.intro span:nth-child(6) { animation-delay: 1.1s; }
.intro-logo { position: fixed; inset: 0; z-index: 101; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: intro-logo 1.05s var(--ease) forwards; }
.intro-logo img { width: 160px; }

/* ---------- Cabecera ---------- */
.barra { position: sticky; top: 0; z-index: 20; background: var(--negro); }
.cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-top: 8px; padding-bottom: 8px; }
.cabecera__logo { display: block; padding: 12px 0; }
.logo-header { width: 72px; }
.cabecera__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.cabecera__nav .enlace { padding: 12px 0; font-size: 15px; line-height: 20px; }
.progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blanco); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(72px, 9vw, 120px); }
.hero__columna { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__bajada { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 16px 24px; padding-top: 8px; }
.hero__foto { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--gris); }
.hero__foto .zoom { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.fichas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fichas span { background: var(--negro); border-radius: 4px; animation: encender .45s ease-out forwards; }
.fichas span:nth-child(1) { animation-delay: 1.6s; }
.fichas span:nth-child(2) { animation-delay: 1.72s; }
.fichas span:nth-child(3) { animation-delay: 1.84s; }
.fichas span:nth-child(4) { animation-delay: 1.96s; }
.fichas span:nth-child(5) { animation-delay: 2.08s; }
.fichas span:nth-child(6) { animation-delay: 2.2s; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blanco); animation: scan 4.5s cubic-bezier(.65, 0, .35, 1) 2.6s infinite both; }
.visor { position: absolute; inset: 16px; pointer-events: none; }
.visor__esquina { position: absolute; width: 28px; height: 28px; border: 0 solid var(--blanco); }
.visor__esquina--1 { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.visor__esquina--2 { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.visor__esquina--3 { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.visor__esquina--4 { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.visor__rec { position: absolute; top: 12px; left: 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; }
.rec { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--blanco); animation: rec 1.4s linear infinite; }
.zoom { animation: zoom 14s ease-in-out infinite alternate; }
.entra { animation: entra 1s var(--ease) both; animation-delay: var(--retraso, 0s); }
.entra-foto { animation: foto 1.4s var(--ease) 1.25s both; }

/* ---------- Títulos que se decodifican ---------- */
.mix { display: grid; }
.mix--linea { display: inline-grid; }
.mix-base, .mix-capa { grid-area: 1 / 1; }
.js .mix-base { color: transparent; }

/* ---------- Marquesinas ---------- */
.marquesinas { overflow: hidden; }
.marquesina__grupo { display: flex; align-items: center; gap: 40px; padding-right: 40px; font-family: var(--titulo); font-size: clamp(32px, 4vw, 56px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.marquesina__grupo i { display: block; flex: none; width: 16px; height: 16px; border-radius: 4px; background: currentColor; }
.marquesina-blanca { background: var(--blanco); color: var(--negro); padding: 22px 0; overflow: hidden; }
.marquesina { display: flex; width: max-content; animation: marquesina 36s linear infinite; }
.marquesina-calada { padding: 24px 0; overflow: hidden; }
.marquesina-scroll { width: max-content; }

/* ---------- Propósito ---------- */
.manifiesto { padding-top: clamp(80px, 11vw, 160px); padding-bottom: clamp(40px, 6vw, 80px); }
.manifiesto__frase { max-width: 1100px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.14; }

/* ---------- El estudio ---------- */
.estudio { display: flex; flex-direction: column; gap: 40px; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(16px, 3vw, 32px); }
.estudio__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.estudio__cabecera p { max-width: 420px; }
.galeria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.foto { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: var(--gris); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.foto:hover img { transform: scale(1.05); }
.g-a { grid-column: span 8; aspect-ratio: 16 / 9; }
.g-b { grid-column: span 4; }
.g-c, .g-d { grid-column: span 6; aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .galeria > * { grid-column: 1 / -1; }
  .g-b { aspect-ratio: 3 / 4; }
}

/* ---------- Formulario ---------- */
.formulario { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.formulario__intro { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.formulario__intro .chico { margin-top: 8px; }
@media (min-width: 960px) { .pegado { position: sticky; top: 128px; } }
.formulario__tarjeta { flex: 999 1 560px; min-width: 0; }
.tarjeta { background: var(--gris); padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(40px, 5vw, 64px); display: flex; flex-direction: column; gap: 28px; }
.progreso-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-bottom: 4px; }
.progreso-form__fichas { display: flex; gap: 8px; }
.progreso-form__fichas span { display: block; width: 28px; height: 12px; border: 2px solid var(--blanco); border-radius: 2px; transition: background-color .5s var(--ease); }
.progreso-form__fichas span.llena { background: var(--blanco); }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo.aparece { animation: desplegar .45s var(--ease) both; }
.campo--datos { gap: 12px; }
.campo__pie { display: flex; justify-content: space-between; gap: 16px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.etiqueta-campo { font-size: 14px; line-height: 20px; color: var(--suave); }
.entrada { width: 100%; height: 56px; padding: 0 16px; border: 2px solid var(--suave); border-radius: 4px; background: var(--negro); color: var(--blanco); font-family: inherit; font-size: 17px; transition: border-color .25s ease; }
textarea.entrada { height: auto; padding: 14px 16px; line-height: 26px; resize: vertical; }
.entrada::placeholder { color: var(--suave); opacity: 1; }
.entrada:hover, .entrada:focus { border-color: var(--blanco); }

.desplegable { display: flex; flex-direction: column; gap: 8px; }
.desplegable__boton { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 12px 16px; border: 2px solid var(--suave); border-radius: 4px; background: var(--negro); color: var(--suave); font-family: inherit; font-size: 17px; line-height: 24px; text-align: left; cursor: pointer; transition: border-color .25s ease; }
.desplegable__boton:hover, .desplegable.abierto .desplegable__boton { border-color: var(--blanco); }
.desplegable__valor.lleno { color: var(--blanco); }
.desplegable__flecha { flex: none; transition: transform .45s var(--ease); }
.desplegable.abierto .desplegable__flecha { transform: rotate(180deg); }
.desplegable__panel { display: flex; flex-direction: column; padding: 8px; border: 2px solid var(--blanco); border-radius: 4px; background: var(--negro); animation: desplegar .45s var(--ease) both; }
.desplegable__ayuda { padding: 8px 12px; }
.desplegable__pie { display: flex; justify-content: flex-end; padding: 8px 4px 4px; }
.opcion { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--blanco); font-family: inherit; font-size: 15px; line-height: 20px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.opcion:hover { background: var(--gris); }
.opcion__marca { flex: none; width: 16px; height: 16px; border: 2px solid var(--blanco); border-radius: 2px; transition: background-color .25s ease; }
.opcion[aria-pressed="true"] .opcion__marca { background: var(--blanco); }

.envio { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
.aviso { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 16px 24px; border-radius: 4px; background: var(--azul-profundo); color: var(--blanco); animation: desplegar .45s var(--ease) both; }
.aviso__ficha { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 2px; background: var(--azul); }
.aviso__texto { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; }

/* ---------- Así funciona ---------- */
.pasos { display: flex; flex-direction: column; gap: 40px; padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(72px, 9vw, 128px); }
.pasos__lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.paso { height: 100%; background: var(--gris); padding: 32px 32px 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; transition: transform .6s var(--ease); }
.paso:hover { transform: translateY(-10px); }
.paso__arriba { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 16px; }
.paso__ficha { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 4px; background: var(--negro); }
.paso__ficha--azul { background: var(--azul); }
.paso__ficha img { width: 32px; height: 32px; }
.paso__numero { font-family: var(--titulo); font-size: 64px; line-height: 1; }
.paso h3 { margin-top: 16px; }

/* ---------- Cierre ---------- */
.final { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(72px, 9vw, 120px); }
.final__bloque { background: var(--blanco); color: var(--negro); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 72px 100%, 0 calc(100% - 72px)); }
.final__contenido { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(104px, 12vw, 168px); }
.final__titulo { max-width: 900px; color: var(--negro); }
.final__texto { max-width: 560px; color: var(--suave-claro); }

/* ---------- Pie ---------- */
.pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; padding-top: 16px; padding-bottom: 64px; font-size: 14px; line-height: 20px; color: var(--suave); }
.pie__col { display: flex; flex-direction: column; align-items: flex-start; }
.pie__col--marca { gap: 16px; }
.pie__col--marca img { width: 96px; }
.pie__titulo { padding-bottom: 4px; color: var(--blanco); }
.pie .enlace { padding: 12px 0; font-weight: 400; }
.pie__dato { padding: 12px 0; }

/* ---------- Puntero ---------- */
.puntero { position: fixed; left: 0; top: 0; z-index: 90; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--negro); border-radius: 3px; background: var(--blanco); pointer-events: none; opacity: 0; transition: transform .16s var(--ease), opacity .3s ease, background-color .25s ease, border-color .25s ease; }
@media (hover: none) { .puntero { display: none; } }

/* ---------- Animaciones ---------- */
@keyframes intro-fin { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes cortina-sube { to { transform: translateY(-101%); } }
@keyframes cortina-baja { to { transform: translateY(101%); } }
@keyframes intro-logo { 0% { opacity: 0; transform: scale(.88); } 40%, 62% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.06); visibility: hidden; } }
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes foto { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes encender { from { opacity: 1; } to { opacity: 0; } }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes rec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: .6; } 90% { opacity: .6; } 100% { top: 100%; opacity: 0; } }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquesina-scroll { from { transform: translateX(-30%); } to { transform: translateX(0); } }
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(72px); } to { opacity: 1; transform: none; } }
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes logo-chico { to { transform: scale(.89); } }
@keyframes sale-texto { to { transform: translateY(-110px); opacity: .15; } }
@keyframes sale-foto { to { transform: translateY(-56px) scale(.94); } }
@keyframes palabra { from { color: var(--suave-claro); } to { color: var(--blanco); } }
@keyframes foto-abre { from { clip-path: inset(100% 0 0 0 round 4px); } to { clip-path: inset(0 0 0 0 round 4px); } }
@keyframes foto-zoom { from { scale: 1.3; } to { scale: 1; } }
@keyframes expande {
  from { clip-path: polygon(10% 0, 90% 0, 90% calc(100% - 72px), calc(90% - 72px) 100%, calc(10% + 72px) 100%, 10% calc(100% - 72px)); }
  to { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 72px 100%, 0 calc(100% - 72px)); }
}

/* Efectos que siguen al scroll (Chrome, Edge y Safari actualizados) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revela { animation: subir linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    .revela.revela-2 { animation-range: entry 15% cover 36%; }
    .revela.revela-3 { animation-range: entry 25% cover 42%; }
    .progreso { animation: progreso linear both; animation-timeline: scroll(); }
    .logo-header { transform-origin: left center; animation: logo-chico linear both; animation-timeline: scroll(); animation-range: 0px 240px; }
    .sale-texto { animation: sale-texto linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .sale-foto { animation: sale-foto linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .marquesina-scroll { animation: marquesina-scroll linear both; animation-timeline: scroll(); }
    .manifiesto { view-timeline-name: --manifiesto; }
    .palabra { animation: palabra linear both; animation-timeline: --manifiesto; }
    .p1 { animation-range: cover 18% cover 26%; }
    .p2 { animation-range: cover 22% cover 30%; }
    .p3 { animation-range: cover 26% cover 34%; }
    .p4 { animation-range: cover 30% cover 38%; }
    .p5 { animation-range: cover 34% cover 42%; }
    .p6 { animation-range: cover 38% cover 46%; }
    .p7 { animation-range: cover 42% cover 50%; }
    .p8 { animation-range: cover 46% cover 54%; }
    .p9 { animation-range: cover 50% cover 58%; }
    .foto { animation: foto-abre linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .foto.g-b, .foto.g-d { animation-range: entry 10% cover 44%; }
    .foto img { animation: foto-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 70%; }
    .expande { animation: expande linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}

/* Quien tiene activado "reducir movimiento" ve la página quieta */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro, .intro-logo, .puntero, .fichas, .scan { display: none; }
}