/* ═══════════════════════════════════════════════════════════
   nicolasgpp v11 — sólo componentes nuevos de la home de dos portfolios
   (v5.css queda igual; esto se carga después y no pisa estilos existentes)
   ═══════════════════════════════════════════════════════════ */

/* ── menú: los dos portfolios también en celular (segunda línea del encabezado) ── */
.nav a[aria-current="page"]{opacity:1;color:var(--acc)}
.pfnav{display:none}
@media(max-width:860px){
  .pfnav{display:flex;gap:6px;padding:0 var(--pad) 12px;margin-top:-6px}
  .pfnav a{flex:1;text-align:center;font:600 10.5px/1 var(--disp);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;color:var(--tx);opacity:.85;padding:10px 6px;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,11,.55)}
  .pfnav a[aria-current="page"]{opacity:1;color:var(--acc);border-color:rgba(79,188,234,.45)}
}

/* ── dos accesos a los portfolios ── */
.entries{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.entry{position:relative;display:block;text-decoration:none;color:var(--tx);background:var(--bg2);overflow:hidden}
.entry .ph{aspect-ratio:16/10;overflow:hidden;background:#000}
.entry .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.entry:hover .ph img{transform:scale(1.035)}
.entry .tx{padding:clamp(22px,2.4vw,40px) var(--pad) clamp(26px,2.8vw,44px)}
.entry .n{font:500 11px/1 var(--disp);font-stretch:112%;letter-spacing:.2em;color:var(--acc)}
.entry h3{margin:14px 0 12px;font:800 clamp(1.8rem,3.4vw,3.6rem)/.92 var(--disp);font-stretch:118%;text-transform:uppercase;letter-spacing:-.02em}
.entry p{margin:0 0 22px;max-width:560px;color:rgba(241,238,232,.78);font-size:clamp(14.5px,1vw,16.5px);line-height:1.6}
.entry .go{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font:600 12px/1 var(--disp);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase}
.entry .go i{font-style:normal;color:var(--mut);letter-spacing:.12em}
.entry .go b{white-space:nowrap;font-weight:600;border-bottom:1px solid var(--acc);padding-bottom:4px}
.entry:hover .go b{color:var(--acc)}
@media(max-width:760px){.entries{grid-template-columns:1fr}}

/* ── trabajo seleccionado: cuatro piezas ── */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.pick{display:block;text-decoration:none;color:var(--tx);background:var(--bg2)}
.pick .ph{aspect-ratio:4/5;overflow:hidden;background:#000}
.pick .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pick:hover .ph img{transform:scale(1.04)}
.pick .tx{padding:16px 18px 20px}
.pick .k{display:block;font:500 10.5px/1.3 var(--disp);font-stretch:112%;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:9px}
.pick b{display:block;font:800 clamp(1.05rem,1.3vw,1.4rem)/1.05 var(--disp);font-stretch:115%;text-transform:uppercase}
.pick span.t{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--mut)}
@media(max-width:1000px){.picks{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.pick .tx{padding:12px 12px 16px}.pick span.t{font-size:12.5px}}

/* ═══════════ v11 · build 4C — legibilidad (sin cambiar tipografías ni identidad) ═══════════ */
/* home: títulos de sección secundarios menos dominantes que el hero */
.home .sec .h2{font-size:clamp(2.1rem,5vw,4.6rem)}
.home .sec-head{margin-bottom:clamp(26px,3.4vw,46px)}
.home .hero-sub .disc{font-size:12.5px;letter-spacing:.2em;line-height:1.35}
.home .hero-sub p{line-height:1.6}
.entry p{color:rgba(241,238,232,.86);font-size:clamp(15px,1.05vw,17px);line-height:1.62}
.entry .go i{color:#B3AEA6}
.pick .k{font-size:11.5px;letter-spacing:.16em}
.pick span.t{font-size:14.5px;line-height:1.5;color:#B3AEA6}
.home .quote figcaption{font-size:12px;color:#B3AEA6}
.home .about p{color:#B9B4AC}
.home .about p:first-of-type{color:var(--tx)}
.home .contact-note{color:#B9B4AC}
/* menú: etiquetas un poco más legibles */
.nav a{opacity:.86}
/* visualización: rótulos y descripciones de categoría */
.viz .wsec-head p{color:#B3AEA6}
.viz .wsec.t2 .wsec-head p{font-size:15px}
.viz .cats a{font-size:12px}
.viz .mv figcaption span{color:#B3AEA6}
.home #selected{padding-top:clamp(56px,6vw,96px)}
.viz #interactive + .wsec{padding-top:clamp(36px,4vw,64px)}

/* ═══════════ v11 · auditoría tipográfica (02-11-2026) — sólo tamaño y contraste de textos chicos ═══════════ */
.nav a{font-size:12.5px}
.eyebrow{font-size:12px}
.pfnav a{font-size:11px;letter-spacing:.08em;white-space:nowrap;padding-left:4px;padding-right:4px}
.pick .k{font-size:12px}
.ft-in{color:#A8A39B;font-size:13.5px}
.ft-in a{color:#C9C4BC}
.wsec-head p,.viz .wsec.t1 .wsec-head p{font-size:15px}
.mi figcaption span{font-size:12px;line-height:1.35}
.mv figcaption b{font-size:13.5px}
.mv figcaption span{font-size:11.5px}
@media(hover:none){.mi figcaption span{font-size:11px}}
@media(max-width:600px){.wsec-head p{font-size:14.5px}}
/* menú en anchos intermedios: los enlaces de dos palabras no se parten en dos líneas */
.nav a{white-space:nowrap}
@media(min-width:861px) and (max-width:1180px){
  .nav{gap:18px}
  .nav a:not(.btn){font-size:12px;letter-spacing:.1em}
  .brand span{display:none}
}

/* ═══════════ v11 · auditoría móvil (03-11-2026) — sólo celulares y tablets; escritorio sin cambios ═══════════ */
@media(max-width:860px){
  /* encabezado: logo y "Let's talk" siempre enteros */
  .hd-in{height:62px;gap:12px}
  .brand{min-width:0;flex:1 1 auto}
  .brand b{overflow:hidden;text-overflow:ellipsis}
  .pfnav{padding-bottom:10px;margin-top:-4px}
  /* tamaños de toque */
  .sbtn{height:40px;min-width:40px}
  .hd .btn-sm{font-size:11px}
  .brand span{font-size:11px}
  .mv figcaption{flex-wrap:wrap;gap:4px 10px;align-items:flex-end}
}
@media(max-width:400px){
  :root{--pad:16px}
  .brand{gap:8px}
  .brand svg{width:24px;height:24px}
  .brand b{font-size:12px;letter-spacing:.02em;font-stretch:104%}
  .hd .btn-sm{padding:10px 11px;font-size:11px;letter-spacing:.08em}
  .pfnav{gap:5px}
  .pfnav a{font-stretch:100%;letter-spacing:.05em;padding:11px 2px}
}

/* home · hero en celular vertical: el video se ve en una franja propia (menos recorte) y el texto
   va debajo sobre fondo oscuro, en lugar de quedar encima de una imagen muy ampliada */
@media(max-width:600px) and (orientation:portrait){
  .hero{height:auto;min-height:0;display:flex;flex-direction:column;background:var(--bg);padding-top:104px}
  .hero video,.hero .poster{position:relative;inset:auto;height:auto;aspect-ratio:4/3;width:100%;object-fit:cover}
  .hero .poster{position:absolute;top:104px;left:0}
  .hero::after{display:none}
  .hero-in{position:relative;inset:auto;padding:26px var(--pad) 40px}
  .hero h1{font-size:clamp(2.6rem,13.4vw,3.6rem)}
  .hero-row{margin-top:18px;gap:22px}
  .hero-sub p{font-size:15px}
  .hero-cta .btn{padding:14px 20px}
}
/* celular apaisado: el hero entra en la pantalla */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:0;height:auto}
  .hero::after{background:linear-gradient(180deg,rgba(10,10,11,.75) 0%,rgba(10,10,11,.55) 35%,rgba(10,10,11,.93) 100%)}
  .hero-in{position:relative;padding-top:130px}
  .hero h1{font-size:clamp(2.4rem,7vw,3.6rem)}
  .hero-sub p{font-size:14px}
}

/* home · secciones más compactas en celular */
@media(max-width:600px){
  .home .sec{padding:56px 0}
  .home #selected{padding-top:52px}
  .home .sec-head{margin-bottom:22px}
  .home .sec .h2{font-size:clamp(1.7rem,8.2vw,2.6rem)!important}
  .entry .tx{padding:20px var(--pad) 24px}
  .entry h3{font-size:clamp(1.6rem,8vw,2.2rem)}
  .pick .ph{aspect-ratio:1/1}
  .pick .tx{padding:12px 12px 16px}
  .pick b{font-size:15px}
  .pick .k{font-size:11px;letter-spacing:.12em}
  .pick span.t{font-size:13.5px;line-height:1.45}
  .track .logo{padding:0 26px}
  .track .logo img{max-height:38px}
  .quote blockquote{font-size:17px;line-height:1.4}
  .ac-contact .big-mail{font-size:min(5.6vw,1.7rem);overflow-wrap:anywhere}
  .about .photo{max-width:280px}
  .contact-row .btn{padding:14px 18px}
}

/* visualización · celular */
@media(max-width:600px){
  .viz .sec-head{margin-bottom:22px}
  .viz .h2{font-size:clamp(2rem,10vw,2.8rem)}
  .viz .cats a{padding:12px 14px}
}

/* pantallas táctiles: enlaces del menú con área de toque cómoda; apaisado sin la marca vertical "Scroll" */
@media(hover:none){.nav a:not(.btn){padding:14px 0}}
@media(max-height:500px) and (orientation:landscape){.scroll-cue{display:none}}

/* ═══════════ v11 · corrección crítica móvil (03-11-2026) ═══════════
   Causa: en Android el texto se agranda con el tamaño de fuente del sistema. Varias piezas no tenían margen
   para eso: nombre con "nowrap" + puntos suspensivos, botones de portfolio sin poder encogerse,
   líneas del título del hero con overflow:hidden (recortaban el apellido), y grillas con columnas 1fr
   que se ensanchaban con palabras largas ("RAMOSCELLO") y empujaban el documento. */
.picks{grid-template-columns:repeat(4,minmax(0,1fr))}
.entries{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.entries{grid-template-columns:minmax(0,1fr)}}

@media(max-width:860px){
  /* encabezado móvil: marca en dos líneas (nunca cortada) + "Let's talk"; debajo, los portfolios en una fila
     que se desliza sola dentro de su ancho si el texto del sistema es grande */
  .hd-in{height:auto;min-height:62px;padding-top:10px;padding-bottom:10px}
  .brand b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.02;max-width:9.5em}
  .brand span{display:none}
  .hd .btn-sm{flex:none;white-space:nowrap}
  .pfnav{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;
    max-width:100%;padding-bottom:12px;margin-top:0}
  .pfnav::-webkit-scrollbar{display:none}
  .pfnav a{flex:1 0 auto;min-width:max-content;white-space:nowrap;scroll-snap-align:start;padding-left:14px;padding-right:14px}
  /* títulos: pueden partirse antes que salirse de la pantalla */
  h1,h2,h3,h4,.pick b,.idc h2,.entry h3{overflow-wrap:break-word}
}
@media(max-width:400px){
  .brand b{font-size:12.5px;letter-spacing:.03em;font-stretch:108%}
  .pfnav a{padding-left:12px;padding-right:12px;letter-spacing:.06em}
}

@media(max-width:600px){
  /* hero: nombre completo siempre visible — tamaño relativo al ancho real y sin recorte de líneas */
  .hero{padding-top:118px}
  .hero .poster{top:118px}
  .hero h1{font-size:min(10.6vw,3.4rem);line-height:.9}
  .hero h1 .ln{overflow:visible}
  .hero h1 .ln>span{transform:none;animation:none}
  .entry h3{font-size:min(6.6vw,2.2rem)}
  /* Selected Work: una columna en celulares */
  .picks{grid-template-columns:minmax(0,1fr);gap:14px;padding:0 var(--pad)}
  .pick .ph{aspect-ratio:4/3}
  .pick .tx{padding:16px 18px 20px}
  .pick .k{font-size:11.5px;letter-spacing:.14em}
  .pick b{font-size:19px;line-height:1.1}
  .pick span.t{font-size:15px;line-height:1.5}
}
@media(max-width:860px){
  /* los bloques de título dentro de filas flex pueden encogerse (antes se ensanchaban al ancho de la palabra más larga) */
  .sec-head > *,.hero-row > *,.wsec-head > *,.ac-body,.ac-body > *{min-width:0;max-width:100%}
}
@media(max-width:600px){
  .viz .h2{font-size:min(7vw,2.8rem)!important}
}
@media(max-width:400px){
  .pfnav a{padding-left:8px;padding-right:8px;letter-spacing:.05em;font-stretch:100%}
}
@media(max-width:600px){.pfnav a{padding-left:9px;padding-right:9px}}
/* Chrome para Android agranda por su cuenta algunos bloques de texto ("font boosting"): se desactiva para que
   los tamaños medidos sean los reales. El tamaño de letra del sistema (accesibilidad) sigue funcionando. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ═══ v11.4 · botones de portfolio en celular: siempre los dos enteros dentro del ancho ═══
   Dos columnas iguales; si el texto del sistema es grande, la etiqueta pasa a dos líneas en vez de cortarse. */
@media(max-width:860px){
  .pfnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;scroll-snap-type:none}
  .pfnav a{min-width:0;flex:none;white-space:normal;overflow-wrap:anywhere;line-height:1.15;
    display:flex;align-items:center;justify-content:center;text-align:center;min-height:38px;padding:8px 6px;letter-spacing:.06em}
}
@media(max-width:400px){.pfnav a{font-size:11px;letter-spacing:.04em;font-stretch:100%;padding:8px 4px}}
@media(max-width:600px) and (orientation:portrait){
  .hero{padding-top:calc(var(--hdh,108px) + 10px)}
  .hero .poster{top:calc(var(--hdh,108px) + 10px)}
}