/* ============================================================
   Luca Castello - hoja de estilo
   Calcada del sitio original de IM Creator (medidas tomadas a 1440px).
   ============================================================ */
:root{
  --ancho:1000px;          /* ancho de la columna central del original */
  --panel-ficcion:#0f0f0f; /* fondo del panel de texto en Ficcion */
  --panel-publicidad:#101010;
  --gris-pie:#cacaca;
  --titulo:"Raleway",Arial,sans-serif;
  --cuerpo:"Arimo",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#fff;font-family:var(--cuerpo);font-size:12px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0;font-weight:400}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto}

/* ---------- menu superior (paginas internas) ---------- */
.nav{background:#000;height:60px;position:relative;z-index:10}
.nav .contenedor{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:4px}
.nav ul{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  display:block;padding:10px 20px;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:11px;
  letter-spacing:1.65px;text-transform:uppercase;color:#fff;transition:opacity .25s ease;
}
.nav a:hover{opacity:.6}

/* ---------- franja con el titulo de la seccion ---------- */
.titulo-seccion{background:#000;height:109px;display:flex;align-items:center}
.titulo-seccion h1{
  font-family:var(--titulo);font-weight:100;font-size:28px;line-height:28px;padding-left:4px;
  text-transform:uppercase;
}
.titulo-seccion--doble{height:119px}
.titulo-seccion--doble h1{font-size:31px;line-height:31px}

/* ---------- franja de contenido con imagen fija de fondo ---------- */
.franja{position:relative;padding:30px 0;isolation:isolate}
.franja__fondo{
  position:absolute;inset:0;z-index:-1;
  background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;opacity:.1;
}
.franja--publicidad{padding:24px 0}
.franja--sobre .franja__fondo{opacity:.2}

/* ---------- obra: panel de texto + video ---------- */
.obra{display:grid;margin:0 auto 30px}
.obra:last-child{margin-bottom:0}
.obra__panel{display:flex;align-items:center}
.obra__texto{display:inline-block;max-width:100%}
.obra__titulo{font-family:var(--titulo);font-size:22px;line-height:24.2px;letter-spacing:1.1px}
.obra__rol{font-family:var(--titulo);font-size:13px;line-height:20.8px;letter-spacing:3.25px;margin-top:10px}
.obra__linea{border-top:1px solid #fff;margin:10px 0 20px}
.obra__cuerpo{font-family:var(--cuerpo);font-size:10px;line-height:17px}
.obra__cuerpo p{margin:0}

/* Ficcion: texto a la izquierda (250) + video (750) */
.obra--ficcion{grid-template-columns:25% 75%}
.obra--ficcion .obra__panel{background:var(--panel-ficcion);padding:28px}
.obra--ficcion .obra__texto{width:100%}
.obra--ficcion .video{aspect-ratio:750/378}

/* Publicidad: video a la izquierda (500) + ficha (500) */
.obra--publicidad{grid-template-columns:50% 50%;margin-bottom:24px;min-height:300px}
.obra--publicidad .obra__media{display:flex;align-items:center}
.obra--publicidad .video{width:100%;aspect-ratio:16/9}
.obra--publicidad .obra__panel{background:var(--panel-publicidad);padding:30px 23px}
.obra--publicidad .obra__rol{font-size:14px;letter-spacing:3.5px;line-height:22.4px}
.obra--publicidad .obra__cuerpo{font-size:11px;line-height:18.7px}

/* Reel: video de 1000 x 562 + texto de Gelido debajo */
.reel .video{aspect-ratio:16/9}
.reel__info{display:grid;grid-template-columns:250px 1fr;gap:0;margin-top:30px;background:var(--panel-ficcion)}
.reel__cabeza{padding:34px 28px}
.reel__cabeza .obra__rol{font-size:11px;line-height:18px;letter-spacing:2.2px}
.reel__cabeza .obra__linea{margin-bottom:0}
.reel__texto{padding:34px 40px 34px 12px;font-family:"Cairo",Arial,sans-serif;font-size:12px;line-height:19.2px;letter-spacing:.6px;max-width:640px}
.reel__texto p{margin:0 0 19.2px}
.reel__link{margin-bottom:0!important}
.reel__link a{font-family:var(--titulo);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;transition:border-color .25s ease}
.reel__link a:hover{border-color:#fff}

/* ---------- reproductor: caratula que se cambia por el video al hacer click ---------- */
.video{position:relative;background:#000;overflow:hidden;cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease}
.video:hover img{filter:brightness(1.08)}
.video__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video__play svg{width:68px;height:48px}
.video__play .fondo{fill:#212121;fill-opacity:.8;transition:fill .2s ease,fill-opacity .2s ease}
.video:hover .video__play .fondo{fill:#f00;fill-opacity:1}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video.activo{cursor:default}
.video.activo img,.video.activo .video__play{display:none}

/* ---------- sobre mi ---------- */
.sobre{display:grid;grid-template-columns:385px 460px;justify-content:space-between;align-items:center;
  padding:43px 20px 43px 58px}
.sobre__foto{width:385px;height:auto;filter:grayscale(1)}
.sobre__texto{font-family:"Cairo",Arial,sans-serif;font-size:12px;line-height:19.2px;letter-spacing:.6px}
.sobre__texto p{margin:0 0 19.2px}
.sobre__texto p:last-child{margin-bottom:0}

/* ---------- pie de contacto ---------- */
.pie{background:#000;padding:90px 0 100px}
.pie__grilla{max-width:1032px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.pie__item{display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .25s ease}
a.pie__item:hover{opacity:.7}
.pie__item img{width:70px;height:70px}
.pie__item span{
  margin-top:12px;font-family:var(--titulo);font-size:10px;line-height:16px;letter-spacing:2.5px;
  color:var(--gris-pie);text-transform:uppercase;
}

/* ---------- portada ---------- */
.portada{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#000}
.portada__pista{position:absolute;inset:0;display:flex;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.portada__pista img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;opacity:.2}
.portada__centro{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 20px;
}
.portada__nombre{font-family:var(--titulo);font-weight:100;font-size:31px;line-height:55.8px;letter-spacing:1.55px}
.portada__rol{font-family:var(--titulo);font-weight:100;font-size:16px;line-height:22.4px;letter-spacing:4px;margin-top:15px}
.portada__links{display:flex;flex-wrap:wrap;justify-content:center;margin-top:45px}
.portada__links a{
  display:block;padding:10px 30px;background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--titulo);font-weight:400;font-size:12px;line-height:15.6px;letter-spacing:3.4px;
  text-transform:uppercase;transition:background .3s ease;
}
.portada__links a:hover{background:rgba(255,255,255,.12)}
.portada__puntos{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:6px}
.portada__puntos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#fff;opacity:.4;cursor:pointer}
.portada__puntos button.activo{opacity:1}

/* ---------- aparicion al scrollear ---------- */
.js .revela{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js .revela.visible{opacity:1;transform:none}

/* ---------- pantallas chicas ---------- */
@media (max-width:1040px){
  .nav .contenedor,.titulo-seccion .contenedor,.franja .contenedor,.pie__grilla{padding-left:20px;padding-right:20px}
  .sobre{grid-template-columns:1fr 1.2fr;gap:40px;padding:43px 0}
  .sobre__foto{width:100%}
}
@media (max-width:760px){
  .nav{height:auto;padding:10px 0}
  .nav .contenedor{justify-content:center;padding:0}
  .nav ul{justify-content:center}
  .nav a{padding:10px 12px}
  .titulo-seccion,.titulo-seccion--doble{height:auto;padding:26px 0}
  .obra--ficcion,.obra--publicidad{grid-template-columns:1fr;min-height:0}
  .obra--ficcion .obra__media{order:-1}
  .obra--ficcion .video{aspect-ratio:16/9}
  .obra .obra__panel{padding:24px 22px}
  .sobre{grid-template-columns:1fr}
  .sobre__foto{max-width:385px}
  .pie{padding:60px 0}
  .pie__grilla{grid-template-columns:1fr;gap:40px}
  .reel__info{grid-template-columns:1fr}
  .reel__cabeza{padding:26px 22px 0}
  .reel__texto{padding:22px}
  .franja__fondo{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){
  /* si el telefono pide menos movimiento: nada se desliza, todo aparece con fundidos */
  .portada__pista{transform:none!important;transition:none}
  .portada__pista img{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
  .portada__pista img.activo{opacity:.2}
  .js .revela{transform:none;transition:opacity .9s ease}
}

/* ---------- selector de idioma (ES / EN) ---------- */
.idioma{display:flex;align-items:center;gap:8px;margin-right:auto;padding-left:4px;
  font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:11px;letter-spacing:1.65px;color:#fff}
.idioma a{opacity:.45;transition:opacity .25s ease}
.idioma a:hover,.idioma a.activo{opacity:1}
.idioma span{opacity:.3}
.portada .idioma{position:absolute;top:24px;right:30px;z-index:3;margin:0;padding:0}

/* ---------- texto corto arriba del reel ---------- */
.reel__intro{margin:0 0 30px;padding:28px 40px;background:var(--panel-ficcion);text-align:center;font-family:"Cairo",Arial,sans-serif;
  font-size:13px;line-height:21px;letter-spacing:.6px;color:rgba(255,255,255,.85)}
.reel__intro p{margin:0}

@media (max-width:760px){
  .nav .contenedor{flex-direction:column;gap:6px}
  .idioma{margin:0;padding:6px 0 0}
  .portada .idioma{top:16px;right:18px}
  .reel__intro{padding:22px}
}
.nav .idioma a{padding:10px 4px}

/* ---------- celular: lectura y botones mas comodos ---------- */
.portada .idioma a{padding:10px 5px}
@media (max-width:760px){
  .obra__cuerpo,.obra--publicidad .obra__cuerpo{font-size:13px;line-height:21px}
  .sobre__texto{font-size:14px;line-height:23px}
  .sobre__texto p{margin-bottom:18px}
  .reel__texto{font-size:13px;line-height:21px}
  .portada__links{display:grid;grid-template-columns:max-content;justify-content:center;gap:6px}
  .portada__links a{padding:13px 28px;text-align:center}
}

/* ---------- menu en celular: tres arriba y dos abajo ---------- */
.nav .salto{display:none}
@media (max-width:760px){
  .nav .salto{display:block;flex-basis:100%;height:0;margin:0;padding:0}
}

/* ---------- Ficción: en celular las obras también aparecen al scrollear ---------- */
@media (max-width:760px){
  .js .revela-movil{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
  .js .revela-movil.visible{opacity:1;transform:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .js .revela-movil{transform:none;transition:opacity .9s ease}
}