/* Modos para iPhone Duo (regla de Nexo), versión Concientizando Vidas.
   data-duo = cerrado | abierto · data-postura = libro | laptop (los pone el script del <head>).
   Probar en cualquier compu: ?duo=cerrado · ?duo=abierto · ?postura=libro · ?postura=laptop */

/* ───── 1. Cerrado · pantalla exterior (382×580): riel vertical al costado, portada compacta ───── */
html[data-duo="cerrado"] .dock{left:auto;right:calc(env(safe-area-inset-right,0px) + 6px);top:50%;bottom:auto;transform:translateY(-50%);width:auto;flex-direction:column;gap:4px;padding:6px}
html[data-duo="cerrado"] .dock a{padding:10px 9px;min-width:0}
html[data-duo="cerrado"] .dock a span{display:none}
html[data-duo="cerrado"] main,html[data-duo="cerrado"] .site-footer{padding-right:calc(env(safe-area-inset-right,0px) + 56px)}
html[data-duo="cerrado"] .site-header{margin-right:calc(env(safe-area-inset-right,0px) + 58px)}
html[data-duo="cerrado"] .footer-bottom{padding-bottom:32px}
html[data-duo="cerrado"] .wa-float{display:none}
html[data-duo="cerrado"] .header-cta{display:none}
html[data-duo="cerrado"] .brand img{height:48px}
html[data-duo="cerrado"] .hero{gap:18px;padding-block:22px 28px}
html[data-duo="cerrado"] h1{font-size:2rem;margin-top:14px}
html[data-duo="cerrado"] .hero-description{font-size:.95rem;margin-top:14px}
html[data-duo="cerrado"] .hero-actions{margin-top:20px;gap:12px}
html[data-duo="cerrado"] .hero-note{margin-top:20px;font-size:.8rem}
html[data-duo="cerrado"] .art-frame{height:240px;border-radius:120px 120px 14px 14px}
html[data-duo="cerrado"] .image-caption{display:none}
html[data-duo="cerrado"] .pillars p{font-size:.9rem}
html[data-duo="cerrado"] h2{font-size:1.6rem}
html[data-duo="cerrado"] .page-intro h1{font-size:2rem}
html[data-duo="cerrado"] .youth-section{padding:24px 18px}
html[data-duo="cerrado"] .about-art{height:260px}
html[data-duo="cerrado"] .contact-phone{font-size:1.6rem}

/* ───── 2. Abierto plano · pantalla interior (951×620 / 669×867): aprovecha el ancho con dos columnas ───── */
@media (min-width:640px){
  html[data-duo="abierto"] .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-duo="abierto"] .contact-layout{grid-template-columns:.9fr 1.1fr;gap:28px}
  html[data-duo="abierto"] .contact-info{order:1}
  html[data-duo="abierto"] .contact-form-wrap{order:2}
  html[data-duo="abierto"] .process-grid,html[data-duo="abierto"] .values-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  html[data-duo="abierto"] .service-detail{grid-template-columns:.6fr 1.4fr;gap:24px}
  html[data-duo="abierto"] .footer-main{grid-template-columns:1.2fr .7fr 1.2fr 1fr;gap:24px}
}
html[data-duo="abierto"] .hero{padding-block:40px 36px}
html[data-duo="abierto"] .art-frame{height:min(44vw,460px)}

/* ───── 3. Doblado como libro: página izquierda = títulos y datos, página derecha = contenido ───── */
html[data-postura="libro"]{
  --seg0:env(viewport-segment-width 0 0, calc(50vw - 14px));
  --seg1:env(viewport-segment-width 1 0, calc(50vw - 14px));
  --paginas:var(--seg0) minmax(0,1fr) var(--seg1);
}
html[data-postura="libro"] .container{width:100%}
html[data-postura="libro"] .site-header{margin:0}
html[data-postura="libro"] .header-inner{display:grid;grid-template-columns:var(--paginas);gap:0;min-height:72px}
html[data-postura="libro"] .brand{grid-column:1;grid-row:1;padding-left:var(--gutter)}
html[data-postura="libro"] .menu-toggle{display:none}
html[data-postura="libro"] .header-inner nav{display:flex;flex-direction:row;grid-column:3;grid-row:1;justify-self:start;gap:16px;padding:0 var(--gutter);width:auto;order:0}
html[data-postura="libro"] .header-inner nav a{border:0;font-size:.9rem;padding:8px 0}
html[data-postura="libro"] .header-inner nav a::after{display:block}
html[data-postura="libro"] .header-cta{display:none}

html[data-postura="libro"] .hero{grid-template-columns:var(--paginas);gap:0;padding:40px 0 28px}
html[data-postura="libro"] .hero-copy{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] h1{font-size:clamp(2rem,4.6vw,2.9rem)}
html[data-postura="libro"] .hero-visual{grid-column:3;max-width:none;width:auto;margin:0 var(--gutter);align-self:center}
html[data-postura="libro"] .art-frame{height:min(44vw,420px)}
html[data-postura="libro"] .hero-aurora{inset:-80px 0 auto}
html[data-postura="libro"] .pillars{display:grid;grid-template-columns:var(--paginas);gap:0;text-align:left;padding:14px 0}
html[data-postura="libro"] .pillars>span{grid-column:1;width:auto;padding:0 var(--gutter);text-align:left}
html[data-postura="libro"] .pillars p{grid-column:3;padding:0 var(--gutter);font-size:1rem}
html[data-postura="libro"] .pillars i{display:none}

html[data-postura="libro"] .section-heading{display:grid;grid-template-columns:var(--paginas);gap:0;align-items:end;margin-bottom:24px}
html[data-postura="libro"] .section-heading>div,html[data-postura="libro"] .section-heading>h2{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .section-heading>p,html[data-postura="libro"] .section-heading>div+div{grid-column:3;padding:0 var(--gutter);margin:0;max-width:none}
html[data-postura="libro"] .service-grid{display:grid;grid-template-columns:var(--paginas);gap:0}
html[data-postura="libro"] .service-card{grid-column:3;margin:0 var(--gutter) 12px}
html[data-postura="libro"] .service-grid .service-card:first-child{grid-column:1;grid-row:1 / span 2;margin-bottom:0}
html[data-postura="libro"] .mission-layout{grid-template-columns:var(--paginas);gap:0}
html[data-postura="libro"] .mission-layout>div{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .mission-layout>.mission-copy{grid-column:3}
html[data-postura="libro"] .youth-section{grid-template-columns:var(--paginas);gap:0;border-radius:0;padding:40px 0;margin-inline:0;width:100%}
html[data-postura="libro"] .youth-heading{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .youth-topics{grid-column:3;padding:0 var(--gutter)}
html[data-postura="libro"] .contact-banner{display:grid;grid-template-columns:var(--paginas);gap:0;border-radius:0;padding:36px 0;margin-inline:0;width:100%;align-items:center}
html[data-postura="libro"] .contact-banner>div{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .contact-banner .button{grid-column:3;justify-self:start;margin-left:var(--gutter)}

html[data-postura="libro"] .footer-main{grid-template-columns:var(--paginas);gap:0;padding-block:40px 28px}
html[data-postura="libro"] .footer-identity{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .footer-main>div:not(.footer-identity){grid-column:3;padding:0 var(--gutter);margin-bottom:22px}
html[data-postura="libro"] .footer-bottom{display:grid;grid-template-columns:var(--paginas);gap:4px 0;padding-bottom:110px}
html[data-postura="libro"] .footer-bottom span{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .footer-bottom span:last-child{grid-column:3}

html[data-postura="libro"] .page-intro{display:grid;grid-template-columns:var(--paginas);gap:0;align-items:end;padding-block:28px 36px}
html[data-postura="libro"] .page-intro>*{grid-column:1;padding:0 var(--gutter)}
html[data-postura="libro"] .page-intro .intro-description{grid-column:3;grid-row:2 / span 2;margin:0;align-self:end}
html[data-postura="libro"] .page-intro h1{font-size:clamp(2rem,4.6vw,2.9rem)}
html[data-postura="libro"] .page-intro .hero-actions{grid-column:3;grid-row:4}
html[data-postura="libro"] .service-detail{grid-template-columns:var(--paginas);gap:0;padding-block:36px}
html[data-postura="libro"] .detail-index{grid-column:1;padding:0 var(--gutter);flex-direction:column;gap:6px}
html[data-postura="libro"] .detail-index span{padding-top:0}
html[data-postura="libro"] .service-detail>div:last-child{grid-column:3;padding:0 var(--gutter)}
html[data-postura="libro"] .process-grid{grid-template-columns:var(--paginas);gap:0}
html[data-postura="libro"] .process-grid>div{grid-column:3;padding:0 var(--gutter);margin-bottom:22px}
html[data-postura="libro"] .about-layout{grid-template-columns:var(--paginas);gap:0}
html[data-postura="libro"] .about-art{grid-column:1;margin:0 var(--gutter);max-width:none;height:min(44vw,400px)}
html[data-postura="libro"] .about-copy{grid-column:3;padding:0 var(--gutter)}
html[data-postura="libro"] .values-grid{grid-template-columns:var(--paginas);gap:0}
html[data-postura="libro"] .values-grid article{grid-column:3;margin:0 var(--gutter) 18px}
html[data-postura="libro"] .values-grid article:first-child{grid-column:1}
html[data-postura="libro"] .team-section>.eyebrow{padding:0 var(--gutter)}
html[data-postura="libro"] .contact-layout{grid-template-columns:var(--paginas);gap:0}
html[data-postura="libro"] .contact-info{grid-column:1;order:0;padding:0 var(--gutter)}
html[data-postura="libro"] .contact-form-wrap{grid-column:3;order:0;margin:0 var(--gutter)}

/* La barra flotante vive en la página derecha, nunca sobre el pliegue. */
html[data-postura="libro"] .dock{left:calc(env(viewport-segment-left 1 0, calc(50vw + 14px)) + var(--gutter));right:auto;transform:none;width:calc(var(--seg1) - var(--gutter) * 2)}

/* ───── 4. Doblado como laptop: arriba el logotipo y el mensaje principal, abajo se lee el contenido ───── */
html[data-postura="laptop"]{
  --seg-alto:env(viewport-segment-height 0 0, 50vh);
  --mesa-top:env(viewport-segment-top 0 1, 50vh);
}
html[data-postura="laptop"] body{padding-top:var(--mesa-top)}
html[data-postura="laptop"] :is(.demo,.site-header,.hero,.pillars-band,.page-intro .breadcrumb){display:none}
html[data-postura="laptop"] .panel-duo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;position:fixed;inset:0 0 auto 0;height:var(--seg-alto);z-index:35;padding:0 var(--gutter);
  background:linear-gradient(135deg,#eaf3fb 0%,var(--papel) 55%,var(--verde-suave) 100%);border-bottom:1px solid var(--linea)}
.panel-duo-logo{width:min(34vw,220px);height:auto}
.panel-duo-kicker{margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-osc)}
.panel-duo-titulo{margin:0;font-family:var(--display);font-size:clamp(1.5rem,4.2vw,2.2rem);line-height:1.1;color:var(--tinta);letter-spacing:-.015em}
.panel-duo-titulo em{font-style:italic;color:var(--azul)}
.panel-duo .button{margin-top:16px}
html[data-postura="laptop"] .section,html[data-postura="laptop"] .page-intro{padding-top:28px}
html[data-postura="laptop"] .page-intro{padding-top:24px}
html[data-postura="laptop"] :is(section[id],article[id]){scroll-margin-top:calc(var(--mesa-top) + 8px)}
html[data-postura="laptop"] .footer-bottom{padding-bottom:110px}

@media (prefers-reduced-motion:reduce){
  html[data-postura="laptop"] .panel-duo{transition:none}
}