/* Editorial rhythm, responsive media and paired digital devices. */
html { scroll-padding-top: 92px; }
body { overflow-x: clip; }
section, section * { box-sizing: border-box; }
section:not(#portada):not(#cierre) { padding: clamp(52px,6vw,88px) clamp(24px,6vw,96px) !important; }
section > div { max-width: 1180px !important; gap: clamp(24px,3vw,38px) !important; }
section div.content-grid { gap: clamp(22px,3vw,40px) !important; }
section div.content-grid > * { min-width: 0; }
section h2 { gap: .2em .35em !important; text-wrap: balance; line-height: 1.16 !important; max-width: 1050px; }
section h2 span { font-size: clamp(28px,3.6vw,50px) !important; line-height: 1.18 !important; }
section h2 span.display-font { font-size: clamp(32px,4.5vw,64px) !important; }
section h3 { line-height: 1.25 !important; }
section p { max-width: 64ch; }
section p:not(.editorial-font) { font-size: clamp(17px,1.38vw,20px) !important; line-height: 1.6 !important; }
section p.editorial-font { font-size: clamp(22px,2.2vw,32px) !important; line-height: 1.35 !important; }
section ul { gap: 20px !important; }
section li > span:empty { width: 12px !important; height: 12px !important; border-width: 2px !important; margin-top: 8px !important; }
section div.content-card { padding: clamp(20px,2.2vw,30px) !important; border-width: 2px !important; border-radius: 20px !important; }
section div.stat-font { font-size: clamp(32px,3.8vw,52px) !important; line-height: 1.12 !important; overflow-wrap: anywhere; }
section img.media-border { border-width: 5px !important; border-radius: 18px !important; }
section > svg { opacity: .45; width: clamp(90px,13vw,170px) !important; z-index: -1; }
#reto h2 { max-width: 970px; display:block !important; }
#reto h2 span:first-child { display:block; margin-bottom:16px; font-size: clamp(24px,2.7vw,36px) !important; }
#reto h2 span:last-child { display:block; font-size: clamp(30px,4.2vw,56px) !important; max-width: 24ch; }
#insight > div > p { max-width: 32ch; font-size: clamp(28px,3.6vw,48px) !important; }
#insight h2.insight-heading { display:block !important; max-width:1000px; }
#insight h2.insight-heading span { display:block; font-size:clamp(28px,3.2vw,44px) !important; }
#insight h2.insight-heading span.display-font { margin-top:16px; font-size:clamp(30px,3.8vw,52px) !important; }
#idea .concept-origin { color:#ffffffb3; }
#sabado h2 span.display-font { font-size:clamp(30px,3.5vw,48px) !important; }
#sabado div.stat-font { font-size:clamp(22px,2vw,28px) !important; overflow-wrap:normal; }
@media (min-width:1024px) {
  section:not(#portada):not(#cierre):is(#insight,#idea,#sabado,#recorrido-1,#recorrido-2) { padding-block:24px !important; }
  :is(#idea,#sabado,#recorrido-1,#recorrido-2) > div { gap:20px !important; }
  :is(#idea,#sabado,#recorrido-1,#recorrido-2) p:not(.editorial-font) { font-size:18px !important; line-height:1.45 !important; }
  #idea > div > .content-grid > div { gap:18px !important; }
  :is(#recorrido-1,#recorrido-2) img { max-height:clamp(180px,calc(100svh - 400px),360px); object-fit:contain; transform:none !important; }
  :is(#recorrido-1,#recorrido-2) h2 span { font-size:32px !important; }
  :is(#recorrido-1,#recorrido-2) h2 span.display-font { font-size:44px !important; }
}
:is(#idea,#espacio,#personal) > div > div.content-grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr) !important; align-items: center !important; }
#bolsa > div > div.content-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important; align-items:center !important; }
#decoracion > div > div.content-grid { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr) !important; }
#decoracion > div > div.content-grid > div { grid-column: auto !important; }
#digital > div > div.content-grid { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr) !important; align-items:center !important; gap: clamp(28px,4vw,64px) !important; }
#digital ul li { display: block !important; padding: 22px 0; border-bottom: 1px solid #ffffff25; }
#digital ul li > span { display:none !important; }
#digital ul li p { max-width: 35ch; }
#digital ul li p strong { display: block; color: #fedd70; font-size: 14px; letter-spacing:.09em; text-transform:uppercase; margin-bottom: 10px; }
#digital div:has(> div.digital-phone) { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(16px,2.6vw,36px) !important; align-items:center !important; padding:18px 10px 26px; width:100%; max-width:600px; margin:auto; }
#digital div.digital-phone { width:100% !important; min-width:0; border-width:clamp(5px,.7vw,9px) !important; border-radius:clamp(22px,3vw,36px) !important; box-shadow:5px 7px 0 #fedd70 !important; transform:rotate(-2deg) !important; position:relative; }
#digital div.digital-phone:last-child { transform:rotate(2deg) !important; }
#digital div.digital-phone::after { content:''; position:absolute; top:8px; left:36%; width:28%; height:6px; background:#ffffff38; border-radius:20px; }
#digital.is-in-view div.digital-phone { animation:phone-float 3.8s ease-in-out infinite alternate; }
#digital.is-in-view div.digital-phone:last-child { animation-delay:-2s; }
#pantalla > div > div.content-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:24px !important; }
#pantalla video { grid-column:span 2; aspect-ratio:1600 / 905; object-fit:contain; }
#pantalla img { grid-column:span 3; }
#timeline ol { min-width:0 !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px !important; }
#timeline ol li { padding-top:32px !important; }
.motion-ready .motion-section, .motion-ready .motion-section:not(.is-visible), .motion-ready .motion-section.is-visible { opacity:1; transform:none; filter:none; transition:none; }
.motion-card { will-change:auto; transform-style:flat; }
.motion-decoration { will-change:auto; }
.motion-hero,.motion-hero > img { min-height:0; }
#portada > img { aspect-ratio:1600 / 905; max-height:calc(100svh - 73px); object-fit:contain; animation:none; }
.motion-hero::after { display:none; }
.scroll-cue { bottom:24px; }
.chapter-nav { right:10px; gap:4px; padding:10px 4px; border-radius:24px; background:#0b0b0d9c; }
.chapter-dots { gap:0; }
.chapter-dot { width:18px; height:18px; border:0; background:radial-gradient(circle,#aaa 2px,transparent 3px); }
.chapter-dot.is-active { background:radial-gradient(circle,#fedd70 4px,transparent 5px); transform:none; box-shadow:none; }
.chapter-dot:hover,.chapter-dot:focus-visible { background:radial-gradient(circle,#fff 4px,transparent 5px); transform:none; }
.chapter-current { right:40px; font-size:14px; }
.motion-toggle { border:1px solid #ffffff50; background:#0b0b0d; color:#fedd70; border-radius:50%; width:30px; height:30px; cursor:pointer; font-size:14px; }
button:focus-visible { outline:2px solid #fedd70 !important; outline-offset:4px; }
.motion-disabled *, .motion-disabled *::before, .motion-disabled *::after { animation-play-state:paused !important; transition:none !important; }
.motion-disabled .motion-decoration { transform:none !important; }
@keyframes phone-float { from { translate:0 -5px; } to { translate:0 5px; } }
@media (max-width:1000px) {
  #digital > div > div.content-grid { grid-template-columns:1fr !important; }
  #digital ul { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px !important; }
  #pantalla > div > div.content-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #pantalla video,#pantalla img { grid-column:auto; }
}
@media (max-width:760px) {
  section:not(#portada):not(#cierre) { padding:48px 24px !important; }
  section h2 { display:block !important; }
  section h2 span { display:block; margin-bottom:6px; }
  :is(#idea,#espacio,#personal,#bolsa,#decoracion) > div > div.content-grid { grid-template-columns:1fr !important; }
  #digital ul { grid-template-columns:1fr; gap:0 !important; }
  #digital div:has(> div.digital-phone) { gap:20px !important; padding:12px 7px 20px; }
  #digital ul li { padding:12px 0 18px; }
  #timeline ol { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #bolsa div.bar-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) !important; gap:14px !important; }
  .motion-hero,.motion-hero > img { min-height:0; }
  .scroll-cue { bottom:10px; width:36px; height:36px; }
  .chapter-nav { right:50%; padding:7px 9px; grid-template-columns:34px minmax(0,1fr) 34px 30px; gap:4px; width:min(90vw,430px); bottom:max(10px,env(safe-area-inset-bottom)); }
  .chapter-step { width:34px; height:34px; }
  .motion-toggle { order:3; }
  .chapter-current { font-size:14px; }
  footer { padding-bottom:100px !important; }
}
@media (max-width:440px) {
  #pantalla > div > div.content-grid { grid-template-columns:1fr !important; }
  section h2 span.display-font { font-size:clamp(26px,7.8vw,34px) !important; overflow-wrap:normal; }
}
@media (prefers-reduced-motion:reduce) {
  #digital.is-in-view div.digital-phone { animation:none; translate:none; }
}

/* Fit the reported chapters as complete desktop compositions, without clipping
   content or scaling the page. Narrow screens retain a readable document flow. */
html.motion-ready { scroll-padding-top:73px; }
#estrategia div.stat-font { font-size:clamp(20px,1.6vw,24px) !important; overflow-wrap:normal; }
#elenco > div > img { object-fit:contain; transform:none !important; }
#cierre { background:#0b0b0d; }
#cierre > img { max-height:calc(100svh - 73px); object-fit:contain; }
#pantalla img { object-fit:contain; }

@media (min-width:1024px) {
  .chapter-nav { top:calc(50% + 36.5px); }
  section:not(#portada):not(#cierre):is(#datos-usa,#elenco,#estrategia,#pantalla,#sonido,#necesitamos) {
    min-height:calc(100svh - 73px);
    padding:clamp(16px,2.5vh,28px) clamp(48px,5vw,80px) !important;
    display:flex;
    align-items:center;
    overflow:visible !important;
  }
  :is(#datos-usa,#elenco,#estrategia,#pantalla,#sonido,#necesitamos) > div {
    width:100%;
    gap:clamp(12px,1.8vh,20px) !important;
  }
  :is(#datos-usa,#elenco,#estrategia,#pantalla,#sonido,#necesitamos) h2 { max-width:none; }
  :is(#datos-usa,#elenco,#estrategia,#pantalla,#sonido,#necesitamos) h2 span {
    font-size:clamp(28px,3.4vh,38px) !important;
  }
  :is(#datos-usa,#elenco,#estrategia,#pantalla,#sonido,#necesitamos) h2 span.display-font {
    font-size:clamp(34px,4.8vh,48px) !important;
  }
  :is(#datos-usa,#elenco,#estrategia,#pantalla,#sonido,#necesitamos) div.content-grid {
    gap:clamp(16px,2vh,24px) !important;
  }
  :is(#datos-usa,#estrategia,#sonido,#necesitamos) div.content-card {
    padding:clamp(16px,2vh,22px) !important;
    gap:8px !important;
    transform:none !important;
  }
  :is(#datos-usa,#estrategia,#necesitamos) p {
    font-size:clamp(16px,2.05vh,18px) !important;
    line-height:1.45 !important;
  }
  :is(#elenco,#pantalla,#sonido) > div > p.editorial-font {
    font-size:clamp(22px,2.8vh,28px) !important;
  }
  #datos-usa > div > div.content-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #datos-usa > div > div.content-grid > div { gap:16px !important; }
  #datos-usa div.stat-font { font-size:clamp(28px,4vh,40px) !important; overflow-wrap:normal; }
  #datos-usa .content-card > div:last-child:not(.stat-font) { font-size:14px !important; padding-top:6px !important; }

  #estrategia h3 { font-size:20px !important; }
  #estrategia > div > div.content-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #estrategia > div > div.content-grid:last-child { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  #elenco > div { display:grid !important; grid-template-columns:minmax(0,.45fr) minmax(0,1fr); align-items:start; }
  #elenco h2 { grid-column:1; grid-row:1; }
  #elenco > div > p { grid-column:1; grid-row:2; }
  #elenco > div > img { grid-column:2; grid-row:1 / span 3; align-self:center; max-height:calc(100svh - 150px); }
  #elenco > div > div { grid-column:1; grid-row:3; gap:12px 10px !important; }
  #elenco > div > div > span { padding:7px 12px !important; font-size:16px !important; }

  #pantalla > div > div.content-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  #pantalla :is(video,img) {
    grid-column:span 2;
    height:clamp(140px,calc((100svh - 265px) / 2),230px) !important;
    object-fit:contain;
    background:#000;
    border-width:4px !important;
  }
  #pantalla img:nth-child(4) { grid-column:2 / span 2; }
  #pantalla img:nth-child(5) { grid-column:4 / span 2; }

  #sonido > div > div.content-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #sonido .content-card p.editorial-font { font-size:clamp(20px,2.65vh,26px) !important; line-height:1.4 !important; }
  #sonido > div > div > span.stat-font { font-size:clamp(22px,2.8vh,28px) !important; }
  #sonido > div > div > span.display-font { font-size:clamp(26px,3.4vh,36px) !important; }
  #necesitamos > div > div.content-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}