/* =====================================================================
   DUALL — Home hero estilo Auteur (SOLO se carga en index.html)
   Marco crema + panel de video redondeado + nav superpuesta
   (logo izq / menú der) + titular abajo-izquierda con píldora.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap');

/* ---- Hero en marco crema (video a todo color, panel redondeado) ---- */
.hero-frame{
  background:var(--paper);
  padding:clamp(10px,1vw,16px);
}
.hero-frame .hero{
  min-height:calc(100svh - clamp(20px,2vw,32px));
  border-radius:clamp(18px,1.8vw,28px);
  overflow:hidden;
  padding:0;
  text-align:left;
  align-items:stretch;
  justify-content:flex-start;
  background:var(--ink);
}
/* De-tintado: video a todo color, sin multiply verde ni desaturación */
.hero-frame .hero-media::before{ display:none; }
.hero-frame .hero-media video,
.hero-frame .hero-media img{ filter:none; }
.hero-frame .hero-media::after{
  /* solo un degradado inferior suave para legibilidad del titular */
  background:linear-gradient(180deg,rgba(10,29,17,0) 45%,rgba(10,29,17,.28) 72%,rgba(10,29,17,.66) 100%);
}

/* ---- Contenido abajo-izquierda ---- */
.hero-frame .hero-inner{
  width:100%; max-width:none; margin:0;
  align-items:flex-start;
  justify-content:flex-end;
  gap:clamp(1rem,2vw,1.5rem);
  padding:clamp(1.8rem,5vw,4rem);
  padding-bottom:clamp(2.2rem,6vh,4.2rem);
}
.hero-frame .hero-kicker{ color:var(--cream-dim); }
.hero-frame .hero h1{
  text-transform:uppercase;
  font-size:clamp(2rem, 1rem + 3.6vw, 4.2rem);
  line-height:1.02; letter-spacing:-.01em;
  max-width:20ch; margin:0;
}
.hero-frame .hero h1 .italic{
  display:inline;              /* al costado, en la misma línea */
  text-transform:none;
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic; font-weight:400;
  color:var(--blush);
  font-size:1.12em; letter-spacing:0;
  margin-left:.12em;
}
.hero-frame .hero .lead{
  text-align:left; margin:0; max-width:42ch; color:var(--cream-dim);
}
.hero-frame .hero-ctas{ justify-content:flex-start; margin-top:.4rem; }
.hero-frame .hero-ctas .btn--ghost{
  border-color:rgba(248,238,213,.5); color:var(--cream);
  padding:.95em 1.6em; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
}
.hero-frame .hero-ctas .btn--ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* (La barra de nav ahora es global; vive en styles.css) */

/* =====================================================================
   BLOQUE DICCIONARIO "duall." (crema, conexión estilo Auteur)
   ===================================================================== */
.dict{
  background:var(--paper); color:var(--ink-2);
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);
}
/* Logo real "duall®" como palabra del diccionario */
.dict-word-img{
  display:block; height:clamp(64px, 11vw, 172px); width:auto;
  margin-bottom:clamp(.2rem, 1vw, .8rem);
}
.dict-pos{ font-family:var(--mono); font-size:var(--step-0); color:var(--ink-2); margin-top:clamp(1rem,2.4vw,1.6rem); }
.dict-pron{ font-family:var(--mono); font-size:var(--step-0); color:rgba(15,46,23,.65); margin-top:.2rem; }
.dict-def{
  font-family:var(--body); font-size:clamp(1.12rem, 1rem + .8vw, 1.55rem); line-height:1.5;
  color:var(--ink-2); max-width:54ch; margin-top:clamp(1.6rem,3.5vw,2.4rem);
}

/* =====================================================================
   MARCAS QUE CONFÍAN EN NOSOTROS (fade-in subiendo, en cascada)
   ===================================================================== */
.brands{
  /* el verde se oscurece hacia abajo para conectar con los videos, con más aire */
  background:linear-gradient(to bottom, var(--ink) 0%, var(--ink) 52%, #060f09 100%);
  text-align:center;
  padding-block:clamp(5.5rem,12vw,10rem) clamp(7.5rem,16vw,14rem);
  overflow:hidden;
}

/* ---- Marquee de logos: scroll lento e infinito ---- */
.brands-marquee{
  margin-top:clamp(5.5rem,11vw,10rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.brands-track{
  display:flex; align-items:center; width:max-content;
  gap:clamp(3.5rem,7vw,8rem);
  animation:brands-scroll 46s linear infinite;
}
.brands-track .brand{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.brands-track .brand img{
  max-height:clamp(42px,5vw,66px);
  max-width:clamp(140px,16vw,210px);
  width:auto; height:auto; object-fit:contain;
  opacity:.92; transition:opacity .3s;
}
.brands-track .brand:hover img{ opacity:1; }
@keyframes brands-scroll{
  from{ transform:translateX(-50%); }   /* se desplaza hacia la derecha (izq → der) */
  to{   transform:translateX(0); }
}

/* ---- Los videos arrancan limpios justo después del verde oscurecido ---- */
.brands + .work-strip{ background:#060f09; }

/* ---- Móvil ---- */
@media (max-width:860px){
  .hero-frame .hero h1{ font-size:clamp(2.4rem,7vw,3.4rem); max-width:14ch; }
  .hero-frame .hero .lead{ font-size:var(--step-0); }
  .brands-track{ gap:clamp(2.4rem,9vw,4rem); animation-duration:32s; }
  .brands-track .brand img{ max-height:34px; max-width:40vw; }
}