@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · PÁGINAS INTERIORES v11.0
   ----------------------------------------------------------------------------
   Se carga después de v11.css. Lleva a las páginas interiores (Qué hacemos,
   Proyectos, Método, Nosotros, Contacto) la lógica visual de la portada v11:
   portadillas de cartel, bloques que conectan cada frente con el propósito y
   con el ecosistema, avances en tarjetas, gobernanza como diagrama.
   Todo respeta el movimiento reducido.
   ========================================================================== */

/* ---------- Portadilla de cartel ---------- */
.portadilla--v11{ min-height:clamp(34rem, 88svh, 54rem); padding-bottom:clamp(3rem,7vw,5.5rem) }
.portadilla--v11.portadilla--corta{ min-height:clamp(30rem, 70svh, 42rem) }
.portadilla--v11::after{ background:
    linear-gradient(to bottom, rgba(10,26,47,.6) 0, rgba(10,26,47,0) 22%),
    radial-gradient(95% 90% at 0% 100%, rgba(10,26,47,.92) 0, rgba(10,26,47,.6) 45%, rgba(10,26,47,.05) 82%),
    linear-gradient(to top, rgba(10,26,47,.82) 0, rgba(10,26,47,0) 52%) }
.portadilla--v11 .portadilla__t{ font-size:var(--t-display); font-weight:650; line-height:1.02; letter-spacing:-.032em; font-stretch:104%;
  max-width:17ch; margin-top:var(--e-md); text-wrap:balance }
.portadilla--v11 .portadilla__lede{ font-family:var(--sans); font-size:clamp(1rem,.93rem + .4vw,1.22rem); line-height:1.6; color:#DCE3E6; max-width:52ch; margin-top:var(--e-md) }
.portadilla--v11 .indice{ margin-top:var(--e-lg) }
.portadilla--v11 .indice a{ background:rgba(244,242,238,.08); box-shadow:inset 0 0 0 1px rgba(244,242,238,.24); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.portadilla--v11 .indice a:hover{ background:var(--piedra); box-shadow:none }
.portadilla__datos{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top:var(--e-lg); font-family:var(--sans); font-size:.86rem; color:#C9D4D7 }
.portadilla__datos b{ color:var(--papel); font-weight:650 }
.portadilla--v11 .entra-sube{ animation:sube .9s var(--salida) both; animation-delay:calc(var(--n,0) * 100ms + 150ms) }
@media (prefers-reduced-motion:reduce){ .portadilla--v11 .entra-sube{ animation:none } }
@media (max-width:40rem){
  .portadilla--v11{ min-height:clamp(32rem, 86svh, 44rem) }
  .portadilla--v11 .portadilla__t{ font-size:clamp(2.1rem, 1.3rem + 4.2vw, 2.6rem); max-width:15ch }
  .portadilla--v11 .indice{ gap:.35rem }
  .portadilla--v11 .indice a{ font-size:.8rem; padding:.45rem .8rem }
}

/* ---------- A qué parte del propósito sirve un frente ---------- */
.sirve{ display:inline-flex; align-items:center; gap:.5rem; margin:0 0 var(--e-sm); font-family:var(--sans); font-size:.78rem; font-weight:650;
  letter-spacing:.02em; padding:.38rem .8rem; border-radius:999px; color:var(--papel);
  background:rgba(244,242,238,.08); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent) }
.sirve i{ width:.45rem; height:.45rem; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) }

/* ---------- Del propósito al trabajo ---------- */
.propmap__lista{ list-style:none; padding:0; margin:0; display:grid; gap:var(--e-sm) }
@media (min-width:56rem){ .propmap__lista{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.propmap__col{ position:relative; display:flex; flex-direction:column; padding:clamp(1.4rem,2.4vw,2rem); border-radius:var(--r-lg);
  background:var(--noche); color:var(--papel); overflow:hidden; isolation:isolate }
.propmap__col::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%) }
.propmap__verbo{ font-family:var(--sans); font-weight:650; font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem); line-height:1.05; letter-spacing:-.026em; color:var(--papel); text-wrap:balance }
.propmap__verbo span{ display:block; font-size:.8rem; letter-spacing:.14em; color:var(--c); margin-bottom:.7rem }
.propmap__frente{ position:relative; display:grid; grid-template-columns:1fr auto; gap:.15rem .8rem; align-items:center; margin-top:var(--e-lg);
  padding:1rem 1.1rem; border-radius:var(--r-md); text-decoration:none; color:var(--papel);
  background:rgba(244,242,238,.06); box-shadow:inset 0 0 0 1px rgba(244,242,238,.14); transition:background .3s ease, box-shadow .3s ease }
.propmap__frente::before{ content:none; display:none; position:absolute; left:1.6rem; top:calc(-1 * var(--e-lg)); height:var(--e-lg); width:1px; background:linear-gradient(var(--c), rgba(244,242,238,.2)) }
.propmap__frente small{ font-family:var(--sans); font-size:.72rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--c) }
.propmap__frente b{ grid-column:1; font-family:var(--sans); font-size:1rem; font-weight:650; line-height:1.3 }
.propmap__frente svg{ grid-row:1 / span 2; grid-column:2; transition:transform .3s var(--salida) }
.propmap__frente:hover{ background:rgba(244,242,238,.12); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent) }
.propmap__frente:hover svg{ transform:translateX(4px) }
.propmap__d{ font-family:var(--sans); font-size:.92rem; line-height:1.55; color:#C9D4D7; margin-top:var(--e-sm) }
.propmap__k{ font-family:var(--sans); font-size:.72rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:#8FA6AA; margin-top:auto; padding-top:var(--e-lg) }
.propmap__eco{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem }
.propmap__eco a{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--papel); text-decoration:none;
  padding:.38rem .75rem; border-radius:999px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); transition:background .25s ease }
.propmap__eco a::before{ content:""; width:.42rem; height:.42rem; border-radius:50%; background:var(--c) }
.propmap__eco a:hover{ background:color-mix(in srgb, var(--c) 20%, transparent) }

/* Tarjetas de definición: la última impar ocupa todo el ancho */
@media (min-width:52rem){ .def > .def__f:last-child:nth-child(odd){ grid-column:1 / -1 } }

/* ---------- Enlace breve al Modelo 5P ---------- */
.enlace5{ position:relative; isolation:isolate; overflow:hidden; background:var(--petroleo-hondo); color:var(--papel); padding-block:clamp(4rem,8vw,6.5rem) }
.enlace5::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 90% 50%, rgba(216,203,179,.12), transparent 70%) }
.enlace5__in{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center }
@media (min-width:62rem){ .enlace5__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) } }
.enlace5 .entrada{ color:#DCE3E6 }
.enlace5 .antetitulo{ color:var(--piedra) }
.enlace5__cadena{ display:block; text-decoration:none; color:inherit }
.enlace5__cadena ol{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; position:relative }
.enlace5__cadena ol::before{ content:""; position:absolute; left:10%; right:10%; top:50%; height:1px; background:rgba(216,203,179,.4) }
.enlace5__cadena li{ position:relative; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; padding:.3rem;
  background:var(--petroleo-hondo); box-shadow:inset 0 0 0 1.5px rgba(216,203,179,.5), var(--sombra-media); transition:background .3s ease, transform .3s var(--salida) }
.enlace5__cadena li b{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--piedra) }
.enlace5__cadena li span{ font-family:var(--sans); font-size:clamp(.66rem,.5rem + .45vw,.9rem); font-weight:650; color:var(--papel); margin-top:.15rem }
.enlace5__cadena li small{ font-family:var(--sans); font-size:.66rem; color:#9FB4B8; margin-top:.1rem }
.enlace5__cadena:hover li{ background:var(--petroleo) }
.enlace5__cadena:hover li:nth-child(1){ transform:translateY(-4px) }
.enlace5__cadena:hover li:nth-child(2){ transform:translateY(-4px); transition-delay:40ms }
.enlace5__cadena:hover li:nth-child(3){ transform:translateY(-4px); transition-delay:80ms }
.enlace5__cadena:hover li:nth-child(4){ transform:translateY(-4px); transition-delay:120ms }
.enlace5__cadena:hover li:nth-child(5){ transform:translateY(-4px); transition-delay:160ms }
.enlace5__pie{ display:block; text-align:center; margin-top:var(--e-md); font-family:var(--sans); font-size:.84rem; color:#C5D3D5 }
@media (max-width:40rem){
  .enlace5__cadena ol{ grid-template-columns:1fr; gap:.5rem }
  .enlace5__cadena ol::before{ left:1.55rem; right:auto; top:1rem; bottom:1rem; width:1px; height:auto }
  .enlace5__cadena li{ aspect-ratio:auto; border-radius:999px; display:grid; grid-template-columns:2.2rem auto 1fr; align-items:baseline; gap:.6rem; text-align:left; padding:.65rem 1.1rem }
  .enlace5__cadena li span{ font-size:.95rem; margin:0 }
  .enlace5__cadena li small{ justify-self:end; margin:0 }
  .enlace5__pie{ text-align:left }
}
@media (prefers-reduced-motion:reduce){ .enlace5__cadena li{ transition:none } .enlace5__cadena:hover li{ transform:none } }

/* ---------- Qué recibe quien nos encarga ---------- */
.encargo__lista{ list-style:none; padding:0; margin:0; display:grid; gap:var(--e-sm) }
@media (min-width:56rem){ .encargo__lista{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.encargo__i{ position:relative; padding:clamp(1.4rem,2.4vw,2rem); border-radius:var(--r-lg); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--filete);
  transition:transform .35s var(--salida), box-shadow .35s ease }
.encargo__i:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--filete-firme), 0 24px 44px -28px rgba(14,23,38,.45) }
.encargo__n{ display:block; font-family:var(--sans); font-weight:650; font-size:clamp(2.6rem,2rem + 2vw,3.6rem); line-height:1; letter-spacing:-.04em; color:var(--petroleo); font-variant-numeric:tabular-nums }
.encargo__k{ font-family:var(--sans); font-size:.74rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--petroleo); margin-top:var(--e-md) }
.encargo__t{ font-family:var(--sans); font-weight:650; font-size:var(--t-h3); line-height:1.18; letter-spacing:-.018em; color:var(--tinta); margin-top:.35rem }
.encargo__d{ font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--tinta-2); margin-top:var(--e-sm) }

/* ---------- Franja de los cinco espacios ---------- */
.espacios{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche-hondo); color:var(--papel); padding-block:clamp(4.5rem,9vw,7rem); --ac:var(--piedra) }
.espacios::before{ content:""; position:absolute; inset:-30% -10% auto; height:90%; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 50% at 20% 30%, rgba(232,194,112,.12), transparent 70%), radial-gradient(40% 50% at 85% 20%, rgba(124,196,190,.12), transparent 70%) }
.espacios__cab{ display:grid; gap:var(--e-md); align-items:end }
@media (min-width:62rem){ .espacios__cab{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--e-2xl) } }
.espacios__cab .entrada{ color:#C9D4D7 }
.espacios__lista{ list-style:none; padding:0; margin:clamp(2rem,4vw,3rem) 0 0; display:grid; gap:.7rem; grid-template-columns:1fr }
@media (min-width:40rem){ .espacios__lista{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:64rem){ .espacios__lista{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.espacios__lista a{ position:relative; height:100%; display:flex; flex-direction:column; gap:.35rem; padding:1.2rem 1.15rem 1.1rem; border-radius:var(--r-md);
  text-decoration:none; color:var(--papel); background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px rgba(244,242,238,.1);
  transition:background .3s ease, box-shadow .3s ease, transform .35s var(--salida) }
.espacios__lista a::after{ content:none; display:none; position:absolute; left:1.15rem; right:1.15rem; top:0; height:2px; border-radius:0 0 2px 2px; background:var(--c); opacity:.85 }
.espacios__lista a:hover{ transform:translateY(-3px); background:color-mix(in srgb, var(--c) 12%, rgba(244,242,238,.04)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent) }
.espacios__iso{ width:2.3rem; height:2.3rem; border-radius:.6rem; display:grid; place-items:center; margin-bottom:.5rem;
  background:color-mix(in srgb, var(--c) 18%, var(--noche)); color:var(--c) }
.espacios__iso svg{ width:1.25rem; height:1.25rem }
.espacios__lista b{ font-family:var(--sans); font-size:1.02rem; font-weight:650; letter-spacing:-.01em }
.espacios__d{ font-family:var(--sans); font-size:.84rem; line-height:1.4; color:#9FB4B8 }
.espacios__ir{ display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.8rem; font-family:var(--sans); font-size:.74rem; font-weight:600; color:var(--c);
  overflow-wrap:anywhere }
.espacios__ir svg{ flex:0 0 auto }
@media (min-width:40rem) and (max-width:63.99rem){ .espacios__lista li:last-child{ grid-column:1 / -1 } }
@media (prefers-reduced-motion:reduce){ .espacios__lista a{ transition:none } .espacios__lista a:hover{ transform:none } }

/* ---------- Proyectos: los tres lugares en la portadilla ---------- */
.lugarcitos{ list-style:none; padding:0; margin:var(--e-lg) 0 0; display:grid; gap:.6rem; max-width:62rem }
@media (min-width:48rem){ .lugarcitos{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.lugarcitos a{ display:grid; gap:.15rem; padding:1rem 1.15rem; border-radius:var(--r-md); text-decoration:none; color:var(--papel);
  background:rgba(10,26,47,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); transition:background .3s ease, transform .35s var(--salida) }
.lugarcitos a:hover{ background:rgba(10,26,47,.62); transform:translateY(-2px) }
.lugarcitos small{ font-family:var(--sans); font-size:.7rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.lugarcitos b{ font-family:var(--sans); font-size:1.08rem; font-weight:650; letter-spacing:-.012em }
.lugarcitos span{ font-family:var(--sans); font-size:.8rem; color:#C9D4D7 }
@media (max-width:47.99rem){ .lugarcitos a{ grid-template-columns:1fr; padding:.75rem 1rem } .lugarcitos span{ display:none } }

/* ---------- Proyectos: siete avances con número grande ---------- */
.avances{ list-style:none; padding:0; margin:var(--e-lg) 0 0; display:grid; gap:.8rem; grid-template-columns:1fr }
@media (min-width:40rem){ .avances{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:64rem){ .avances{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.avance{ position:relative; display:flex; flex-direction:column; padding:clamp(1.25rem,2vw,1.6rem); border-radius:var(--r-lg); background:var(--blanco);
  box-shadow:inset 0 0 0 1px var(--filete); transition:transform .35s var(--salida), box-shadow .35s ease; overflow:hidden }
.avance:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--filete-firme), 0 24px 44px -28px rgba(14,23,38,.45) }
.avance__n{ font-family:var(--sans); font-weight:650; font-size:clamp(2.8rem,2rem + 2.4vw,4rem); line-height:.9; letter-spacing:-.045em; color:var(--petroleo); font-variant-numeric:tabular-nums }
.avance__k{ font-family:var(--sans); font-size:.72rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--petroleo); margin-top:var(--e-md) }
.avance__t{ font-family:var(--sans); font-weight:650; font-size:1.08rem; line-height:1.3; letter-spacing:-.01em; color:var(--tinta); margin-top:.35rem }
.avance__d{ font-family:var(--sans); font-size:.9rem; line-height:1.55; color:var(--tinta-2); margin-top:.45rem }
.avance--cuidado{ background:var(--noche); box-shadow:none; color:var(--papel) }
.avance--cuidado::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 80% at 100% 0%, rgba(124,196,190,.22), transparent 70%); pointer-events:none }
.avance--cuidado:hover{ box-shadow:0 24px 44px -28px rgba(14,23,38,.6) }
.avance__ic{ width:3rem; height:3rem; border-radius:.8rem; display:grid; place-items:center; color:var(--ac-lab); background:rgba(124,196,190,.14) }
.avance__ic svg{ width:1.6rem; height:1.6rem }
.avance--cuidado .avance__k{ color:var(--ac-lab) }
.avance--cuidado .avance__t{ color:var(--papel) }
.avance--cuidado .avance__d{ color:#C9D4D7 }
@media (prefers-reduced-motion:reduce){ .avance,.lugarcitos a{ transition:none } .avance:hover,.lugarcitos a:hover{ transform:none } }

/* ---------- Proyectos: gobernanza como diagrama ---------- */
.gobm{ position:relative; margin-top:var(--e-lg) }
.gobm__lineas{ position:absolute; inset:0; width:100%; height:100%; display:none; pointer-events:none }
.gobm__lineas line{ stroke:var(--petroleo); stroke-opacity:.4; stroke-width:1.5; stroke-dasharray:4 5; vector-effect:non-scaling-stroke }
.gobm__centro{ position:relative; z-index:1; display:grid; gap:.25rem; text-align:center; padding:1.4rem 1.3rem; border-radius:var(--r-lg);
  background:var(--petroleo); color:var(--papel); box-shadow:var(--sombra-media) }
.gobm__centro small{ font-family:var(--sans); font-size:.7rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.gobm__centro b{ font-family:var(--sans); font-size:1.2rem; font-weight:650; letter-spacing:-.015em; line-height:1.2 }
.gobm__centro span{ font-family:var(--sans); font-size:.84rem; line-height:1.45; color:#DCE3E6 }
.gobm .gob{ margin-top:.8rem; position:relative; z-index:1 }
.gobm .gob li{ background:var(--blanco) }
@media (min-width:56rem){
  .gobm{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,15rem) minmax(0,1fr); grid-template-rows:auto auto; gap:2.4rem 3.5rem; align-items:center }
  .gobm__lineas{ display:block }
  .gobm__centro{ grid-column:2; grid-row:1 / span 2; aspect-ratio:1; border-radius:50%; align-content:center; padding:1.6rem }
  .gobm .gob{ display:contents }
  .gobm .gob li:nth-child(1){ grid-column:1; grid-row:1 }
  .gobm .gob li:nth-child(2){ grid-column:3; grid-row:1 }
  .gobm .gob li:nth-child(3){ grid-column:1; grid-row:2 }
  .gobm .gob li:nth-child(4){ grid-column:3; grid-row:2 }
}
@media (max-width:55.99rem){ .gobm .gob{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:30rem){ .gobm .gob{ grid-template-columns:1fr } }

/* ---------- Línea de tiempo ---------- */
.linea{ list-style:none; padding:0; margin:var(--e-2xl) 0 0; display:grid; gap:0; position:relative }
@media (min-width:52rem){ .linea{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.linea__i{ position:relative; padding:2.2rem 1.5rem 0 0; display:grid; gap:.3rem; font-family:var(--sans) }
.linea__i::before{ content:""; position:absolute; left:0; right:0; top:.55rem; height:2px; background:var(--filete-firme) }
.linea__i::after{ content:""; position:absolute; left:0; top:0; width:1.2rem; height:1.2rem; border-radius:50%; background:var(--papel); box-shadow:inset 0 0 0 2px var(--petroleo) }
.linea__i[data-estado="curso"]::after{ background:var(--petroleo); box-shadow:0 0 0 5px rgba(20,80,79,.18) }
.linea__i[data-estado="curso"]::before{ background:linear-gradient(90deg, var(--petroleo), var(--filete-firme)) }
.linea__f{ font-size:.74rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.linea__i b{ font-size:1.15rem; font-weight:650; letter-spacing:-.012em; color:var(--tinta) }
.linea__i > span:last-child{ font-size:.92rem; line-height:1.5; color:var(--tinta-2) }
@media (max-width:51.99rem){
  .linea{ gap:1.4rem }
  .linea__i{ padding:0 0 0 2.2rem }
  .linea__i::before{ left:.55rem; right:auto; top:1.2rem; bottom:-1.4rem; width:2px; height:auto }
  .linea__i:last-child::before{ display:none }
  .linea__i[data-estado="curso"]::before{ background:linear-gradient(180deg, var(--petroleo), var(--filete-firme)) }
}

/* ---------- Ajustes de teléfono ---------- */
@media (max-width:47.99rem){
  .lugarcitos{ display:none }
  .portadilla--v11::after{ background:
    linear-gradient(to bottom, rgba(10,26,47,.6) 0, rgba(10,26,47,.1) 20%),
    linear-gradient(to top, rgba(10,26,47,.94) 0, rgba(10,26,47,.78) 45%, rgba(10,26,47,.25) 80%) }
}
@media (max-width:39.99rem){
  .avance{ display:grid; grid-template-columns:3.6rem 1fr; column-gap:.9rem; align-items:start }
  .avance > *{ grid-column:2 }
  .avance__n,.avance__ic{ grid-column:1; grid-row:1 / span 3; font-size:2.6rem }
  .avance__k{ margin-top:.2rem }
}

/* ---------- Método ---------- */
.etapa{ display:flex; align-items:center; gap:.75rem; margin:0 0 var(--e-sm); font-family:var(--sans); font-size:.8rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.etapa b{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; font-size:.86rem; letter-spacing:0; color:var(--petroleo); box-shadow:inset 0 0 0 1.5px currentColor }
.oscuro .etapa,.oscuro .etapa b{ color:var(--piedra) }
.formula__rej{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center }
@media (min-width:64rem){ .formula__rej{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } }
.formula .form0{ border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.6rem); position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(155deg, var(--petroleo) 0, var(--petroleo-hondo) 75%); box-shadow:var(--sombra-honda) }
.formula .form0::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 60% at 100% 0%, rgba(216,203,179,.16), transparent 70%) }
.formula .form0__eq{ font-weight:650; letter-spacing:-.025em; text-align:left; font-size:clamp(1.2rem,1rem + 1.1vw,1.9rem) }
.formula .form0__res .n{ font-weight:650 }
@media (min-width:64rem) and (max-width:79.99rem){ .formula .form0__mandos{ grid-template-columns:1fr } }
.practica__in{ display:grid; gap:var(--e-lg); align-items:end }
@media (min-width:62rem){ .practica__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-2xl) } }

/* ---------- Nosotros ---------- */
.mitad__foto--retrato{ background:var(--noche) }
@media (max-width:61.99rem){ .mitad__foto--retrato{ min-height:0; aspect-ratio:4/5; max-height:80svh } .mitad__foto--retrato img{ object-position:50% 30% } }
.comp7{ position:relative; isolation:isolate; overflow:hidden }
.comp7__fondo{ position:absolute; inset:0; z-index:-2 }
.comp7__fondo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.comp7::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,26,47,.88) 0, rgba(10,26,47,.94) 40%, rgba(10,26,47,.97) 100%) }
.compromisos--v11{ gap:.8rem }
@media (min-width:40rem){ .compromisos--v11{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:72rem){ .compromisos--v11{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.compromisos--v11 li{ display:flex; flex-direction:column; gap:.5rem; padding:clamp(1.3rem,2vw,1.7rem); border-radius:var(--r-lg);
  background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px rgba(244,242,238,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .3s ease, transform .35s var(--salida) }
.compromisos--v11 li:hover{ background:rgba(244,242,238,.09); transform:translateY(-3px) }
.compromisos--v11 li::before{ font-size:clamp(2.6rem,2rem + 2vw,3.6rem); font-weight:650; line-height:.9; letter-spacing:-.045em; color:var(--piedra); padding:0 0 .6rem; grid-row:auto }
.compromisos--v11 b{ font-size:1.08rem; color:var(--papel) }
.compromisos--v11 span{ color:#C9D4D7; font-size:.92rem }
@media (min-width:72rem){
  .compromisos--v11 li:first-child{ grid-column:span 2; background:color-mix(in srgb, var(--piedra) 14%, rgba(244,242,238,.04)); box-shadow:inset 0 0 0 1px rgba(216,203,179,.4) }
  .compromisos--v11 li:first-child b{ font-size:1.4rem; line-height:1.25; letter-spacing:-.015em }
}
@media (prefers-reduced-motion:reduce){ .compromisos--v11 li{ transition:none } .compromisos--v11 li:hover{ transform:none } }
@media (max-width:39.99rem){
  .compromisos--v11 li{ display:grid; grid-template-columns:3.4rem 1fr; column-gap:.8rem; gap:.3rem .8rem }
  .compromisos--v11 li::before{ grid-row:1 / span 2; font-size:2.4rem; padding:0 }
}
@media (max-width:39.99rem){
  .espacios__lista a{ display:grid; grid-template-columns:2.3rem 1fr; gap:.1rem .9rem; padding:1rem 1rem .9rem }
  .espacios__iso{ grid-row:1 / span 3; margin:0 }
  .espacios__ir{ padding-top:.4rem }
}

/* ============================================================================
   v12 · APERTURAS CON CARÁCTER PROPIO, BRÚJULA 5P Y AJUSTES DE AUDITORÍA
   Cada página interior abre distinto: Proyectos con mosaico (y transición de
   vista desde las tarjetas .lugar de la portada), Método con la fórmula como
   protagonista, Nosotros con retrato en duotono y cita, Qué hacemos con los
   tres frentes en acordeón de fotos, Contacto con el correo a la vista.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){ @view-transition{ navigation:auto } }
.mosaico__i--a{ view-transition-name:lugar-ticumpinia }
.mosaico__i--b{ view-transition-name:lugar-callao }
.mosaico__i--c{ view-transition-name:lugar-proyecto-pais }

/* Escala única de h2 en las interiores */
main h2.titular, main h2.grupo__t, .met-ap__h2{ font-size:var(--t-h2); font-weight:650; line-height:1.05; letter-spacing:-.028em; font-stretch:103%; text-wrap:balance }
main h2.grupo__t{ color:var(--tinta) }
.capa h2.titular, .oscuro h2.titular{ color:var(--papel) }

/* Aperturas partidas (Proyectos, Qué hacemos, Contacto) */
.pro-ap,.qh-ap,.con-ap{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche); color:var(--papel);
  padding:calc(var(--alto-nav) + clamp(2rem,5vw,4rem)) 0 clamp(3rem,6vw,5rem) }
.pro-ap::before,.qh-ap::before,.con-ap::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 60% at 0% 100%, rgba(20,80,79,.55), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(217,164,65,.12), transparent 70%) }
.ap__t{ font-family:var(--sans); font-size:clamp(2.4rem, 1.3rem + 3.4vw, 4.6rem); font-weight:650; line-height:1.02; letter-spacing:-.032em; font-stretch:104%;
  max-width:14ch; margin-top:var(--e-md); text-wrap:balance; color:var(--papel) }
.ap__lede{ font-family:var(--sans); font-size:clamp(1rem,.93rem + .4vw,1.2rem); line-height:1.6; color:#DCE3E6; max-width:46ch; margin-top:var(--e-md) }
.pro-ap .entra-sube,.qh-ap .entra-sube,.con-ap .entra-sube,.met-ap .entra-sube,.nos-ap .entra-sube{ animation:sube .9s var(--salida) both; animation-delay:calc(var(--n,0) * 100ms + 120ms) }
@media (prefers-reduced-motion:reduce){ .pro-ap .entra-sube,.qh-ap .entra-sube,.con-ap .entra-sube,.met-ap .entra-sube,.nos-ap .entra-sube{ animation:none } }
@media (max-width:40rem){ .ap__t{ font-size:clamp(2.1rem, 1.3rem + 4.2vw, 2.6rem) } }

/* Proyectos: mosaico de tres lugares */
.pro-ap__in{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:end }
@media (min-width:64rem){ .pro-ap__in{ grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); align-items:stretch } .pro-ap__texto{ align-self:end; padding-bottom:.5rem } }
.mosaico{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; grid-template-columns:1fr 1fr; grid-template-rows:17rem 12rem }
.mosaico__i--a{ grid-column:1 / -1 }
@media (min-width:64rem){ .mosaico{ grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; min-height:clamp(30rem, calc(100svh - var(--alto-nav) - 8rem), 40rem) } .mosaico__i--a{ grid-column:1; grid-row:1 / span 2 } }
.mosaico__i{ position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate; background:var(--noche-2) }
.mosaico__i a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.2rem; padding:clamp(1rem,2vw,1.5rem); color:var(--papel); text-decoration:none }
.mosaico__foto{ position:absolute; inset:0; z-index:-2 }
.mosaico__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--salida) }
.mosaico__i::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to top, rgba(6,17,31,.92) 0, rgba(6,17,31,.35) 50%, rgba(6,17,31,0) 80%) }
.mosaico__i a:hover img{ transform:scale(1.05) }
.mosaico small{ font-family:var(--sans); font-size:.75rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra); text-shadow:0 1px 2px rgba(6,17,31,.6) }
.mosaico b{ font-family:var(--sans); font-size:clamp(1.15rem,1rem + .5vw,1.4rem); font-weight:650; letter-spacing:-.015em; line-height:1.15 }
.mosaico__i--a b{ font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem) }
.mosaico a > span:last-child{ font-family:var(--sans); font-size:.86rem; color:#DCE3E6; text-shadow:0 1px 2px rgba(6,17,31,.6) }
@media (max-width:40rem){ .mosaico__i:not(.mosaico__i--a) a > span:last-child{ display:none } .mosaico__i a{ padding:.9rem } }
@media (prefers-reduced-motion:reduce){ .mosaico__foto img{ transition:none } .mosaico__i a:hover img{ transform:none } }

/* Qué hacemos: los tres frentes como acordeón de fotos */
.qh-ap__in{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center }
@media (min-width:64rem){ .qh-ap__in{ grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) } }
.qh-ap__ligas{ display:flex; flex-wrap:wrap; gap:0 1.6rem; margin-top:var(--e-md); font-family:var(--sans) }
.qh-ap__ligas a{ display:inline-flex; align-items:center; min-height:var(--toque); color:var(--papel) }
.acordeon{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem }
.acordeon__i{ position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate; background:var(--noche-2); min-height:10rem }
.acordeon__i a{ position:relative; display:flex; align-items:flex-end; gap:1rem; height:100%; min-height:inherit; padding:1.1rem 1.2rem; color:var(--papel); text-decoration:none }
.acordeon__foto{ position:absolute; inset:0; z-index:-2 }
.acordeon__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--salida) }
.acordeon__i::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top, rgba(6,17,31,.92) 0, rgba(6,17,31,.45) 55%, rgba(6,17,31,.1) 100%) }
.acordeon__i::before{ content:none; display:none; position:absolute; left:0; right:0; top:0; height:3px; z-index:1; background:var(--c) }
.acordeon__n{ font-family:var(--sans); font-weight:650; font-size:2.6rem; line-height:.85; letter-spacing:-.04em; color:var(--c); font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(6,17,31,.5) }
.acordeon__cuerpo{ display:block; min-width:0 }
.acordeon__cuerpo small{ display:block; font-family:var(--sans); font-size:.75rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra); text-shadow:0 1px 2px rgba(6,17,31,.6) }
.acordeon__cuerpo b{ display:block; font-family:var(--sans); font-size:clamp(1.2rem,1rem + .6vw,1.55rem); font-weight:650; letter-spacing:-.018em; line-height:1.12; margin-top:.25rem }
.acordeon__d{ display:block; font-family:var(--sans); font-size:.92rem; line-height:1.5; color:#DCE3E6; max-width:34ch; margin-top:.35rem; text-shadow:0 1px 2px rgba(6,17,31,.6) }
.acordeon__i a:focus-visible{ outline:3px solid var(--sol); outline-offset:-3px; border-radius:var(--r-lg) }
@media (min-width:64rem){
  .acordeon{ flex-direction:row; height:clamp(28rem, calc(100svh - var(--alto-nav) - 9rem), 36rem) }
  .acordeon__i{ flex:1 1 0; min-height:0; transition:flex-grow .7s var(--salida) }
  .acordeon__i a{ flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1.4rem 1.1rem }
  .acordeon__cuerpo{ width:100% }
  .acordeon__d{ opacity:0; max-height:0; overflow:hidden; transform:translateY(8px); transition:opacity .35s ease, transform .5s var(--salida), max-height .5s var(--salida) }
  .acordeon:not(:hover):not(:focus-within) .acordeon__i:first-child,.acordeon__i:hover,.acordeon__i:focus-within{ flex-grow:2.6 }
  .acordeon:not(:hover):not(:focus-within) .acordeon__i:first-child .acordeon__d,.acordeon__i:hover .acordeon__d,.acordeon__i:focus-within .acordeon__d{ opacity:1; max-height:8rem; transform:none; transition-delay:.15s }
  .acordeon__i:hover img{ transform:scale(1.04) }
}
@media (prefers-reduced-motion:reduce){ .acordeon__i,.acordeon__d,.acordeon__foto img{ transition:none } .acordeon__i:hover img{ transform:none } }

/* Contacto */
.con-ap__in{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center }
@media (min-width:56rem){ .con-ap__in{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) } }
.con-ap__correo{ display:grid; gap:.15rem; margin-top:var(--e-lg); font-family:var(--sans) }
.con-ap__correo span{ font-size:.75rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--sol-2) }
.con-ap__correo a{ font-size:clamp(1.15rem,.95rem + 1vw,1.7rem); font-weight:600; color:var(--papel); overflow-wrap:anywhere; min-height:var(--toque); display:inline-flex; align-items:center; text-underline-offset:.2em }
.con-ap__foto{ position:relative; margin:0; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/11; background:var(--noche-2) }
@media (min-width:56rem){ .con-ap__foto{ aspect-ratio:4/5; max-height:34rem; justify-self:end; width:100% } }
.con-ap__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.con-ap__foto figcaption,.nos-ap__retrato figcaption{ position:absolute; left:1rem; bottom:.8rem; right:1rem; z-index:2; font-family:var(--sans); font-size:.82rem; color:var(--papel); text-shadow:0 1px 2px rgba(6,17,31,.8) }
.con-ap__foto::after{ content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(to top, rgba(6,17,31,.7), transparent); pointer-events:none }

/* Nosotros: retrato en duotono (petróleo y oro) y cita en display */
.nos-ap{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche); color:var(--papel) }
.nos-ap__retrato{ position:relative; margin:0; isolation:isolate; overflow:hidden; background:var(--noche-2); aspect-ratio:4/5; max-height:74svh; width:100% }
.nos-ap__retrato img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:saturate(.82) contrast(1.04) }
.nos-ap__retrato::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,26,47,0) 55%, rgba(10,26,47,.5) 100%); pointer-events:none }
.nos-ap__in{ position:relative; z-index:1; padding-block:clamp(2rem,6vw,3rem) clamp(3rem,7vw,5rem) }
.nos-ap__t{ font-family:var(--sans); font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem); font-weight:600; line-height:1.25; letter-spacing:-.015em; color:#DCE3E6; max-width:26ch; margin-top:var(--e-md); text-wrap:balance }
.nos-ap__cita{ margin:var(--e-lg) 0 0; padding:0; border:0 }
.nos-ap__cita p{ font-family:var(--sans); font-style:normal; font-weight:650; font-size:clamp(2.2rem, 1.1rem + 3.4vw, 4.6rem); line-height:1.02; letter-spacing:-.032em; font-stretch:104%; color:var(--papel); max-width:15ch; text-wrap:balance }
.nos-ap__cita footer{ margin-top:var(--e-md); font-family:var(--sans); font-size:.95rem; color:var(--sol-2) }
.nos-ap__cita cite{ font-style:italic }
@media (min-width:48rem){
  .nos-ap{ min-height:clamp(36rem, 92svh, 54rem); display:flex; align-items:center }
  .nos-ap__retrato{ position:absolute; top:0; right:0; bottom:0; width:54%; max-height:none; aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26%); mask-image:linear-gradient(to right, transparent 0, #000 26%) }
  .nos-ap__retrato img{ object-position:28% 30% }
  .nos-ap__in{ padding-block:calc(var(--alto-nav) + clamp(2rem,5vw,4rem)) clamp(3rem,6vw,5rem) }
  .nos-ap__retrato figcaption{ left:auto; text-align:right }
  .nos-ap__retrato figcaption{ background:rgba(6,17,31,.62); padding:.3rem .7rem; border-radius:999px; text-shadow:none }
  .nos-ap__texto{ max-width:min(36rem, 52%) }
}
.bio-fund__in{ display:grid; gap:var(--e-xl) }
@media (min-width:62rem){ .bio-fund__in{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--e-2xl); align-items:start } }
.bio-fund .cuerpo{ max-width:60ch }

/* Método: la fórmula como protagonista */
.met-ap{ position:relative; isolation:isolate; overflow:hidden; color:var(--papel);
  background:radial-gradient(70% 60% at 88% 8%, rgba(217,164,65,.16), transparent 70%), linear-gradient(160deg, var(--petroleo) 0, var(--petroleo-hondo) 52%, var(--noche) 100%);
  padding:calc(var(--alto-nav) + clamp(2rem,5vw,4rem)) 0 clamp(3.5rem,7vw,6rem) }
.met-ap__t{ font-family:var(--sans); font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem); font-weight:600; line-height:1.25; color:#DCE3E6; max-width:30ch; margin-top:var(--e-md); text-wrap:balance }
.ecuacion{ font-family:var(--sans); font-weight:650; font-size:clamp(2.3rem, .5rem + 6.2vw, 7.4rem); line-height:1; letter-spacing:-.04em; font-stretch:104%;
  margin-top:var(--e-lg); display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.26em; row-gap:.05em; color:var(--papel) }
.ecuacion em{ font-style:normal; font-weight:400; color:var(--sol) }
.ecuacion__r{ color:var(--sol-2); transition:opacity .4s ease }
.ecuacion span[data-f]{ opacity:calc(.32 + var(--v,10) * .068); transition:opacity .35s ease }
.ecuacion[data-cero="true"] .ecuacion__r{ opacity:.3 }
.met-ap__rej{ display:grid; gap:clamp(2rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,4rem); align-items:start }
@media (min-width:64rem){ .met-ap__rej{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } }
.met-ap .lede{ color:#E3EAEA }
.met-ap .nota{ color:#C5D3D5 }
.met-ap .indice{ margin-top:var(--e-lg) }
.met-ap .form0{ border-radius:var(--r-xl); padding:clamp(1.4rem,3vw,2.4rem); background:rgba(6,17,31,.38); box-shadow:inset 0 0 0 1px rgba(244,242,238,.16), var(--sombra-honda);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.met-ap .form0__res .n{ font-weight:650 }
@media (min-width:64rem) and (max-width:79.99rem){ .met-ap .form0__mandos{ grid-template-columns:1fr } }

/* Método: Modelo 5P como brújula */
.cinco__rej{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center }
@media (min-width:62rem){ .cinco__rej{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) } }
.brujula{ display:none }
.cinco--js .brujula{ display:block }
.brujula__dial{ position:relative; width:100%; max-width:31rem; margin-inline:auto; aspect-ratio:1 }
.brujula__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.brujula__aro{ fill:none; stroke:rgba(244,242,238,.22); stroke-width:.3; stroke-dasharray:.6 1.4 }
.brujula__aro--in{ stroke-dasharray:none; stroke:rgba(244,242,238,.12) }
.brujula__radios line{ stroke:rgba(244,242,238,.18); stroke-width:.25 }
.brujula__pent{ fill:rgba(6,17,31,.45); stroke:var(--piedra); stroke-width:.45; stroke-linejoin:round }
.brujula__v{ fill:var(--petroleo-hondo); stroke:var(--piedra); stroke-width:.5; transition:fill .4s ease }
.brujula__v[data-on="true"]{ fill:var(--sol); stroke:var(--sol-2) }
.brujula__aguja{ transform-box:view-box; transform-origin:50% 50%; transform:rotate(var(--ang,0deg)); transition:transform .8s cubic-bezier(.3,1.4,.5,1) }
.brujula__aguja path{ fill:var(--sol) }
.brujula__aguja .brujula__cola{ fill:rgba(244,242,238,.55) }
.brujula__eje{ fill:var(--papel) }
.brujula .cinco__tabs{ position:absolute; inset:0; display:block; overflow:visible; margin:0; padding:0; grid-template-columns:none }
.brujula .cinco__tabs[hidden]{ display:none }
.brujula .cinco__tab{ --R:30%; position:absolute; left:calc(50% + var(--R) * cos(var(--a))); top:calc(50% + var(--R) * sin(var(--a))); transform:translate(-50%,-50%);
  display:grid; justify-items:center; text-align:center; gap:0; min-width:var(--toque); min-height:var(--toque); padding:.45rem .8rem; border-radius:999px;
  background:rgba(6,17,31,.72); box-shadow:inset 0 0 0 1px rgba(244,242,238,.28); scroll-snap-align:none; white-space:nowrap }
.brujula .cinco__tab:nth-child(1){ --a:-90deg } .brujula .cinco__tab:nth-child(2){ --a:-18deg } .brujula .cinco__tab:nth-child(3){ --a:54deg }
.brujula .cinco__tab:nth-child(4){ --a:126deg } .brujula .cinco__tab:nth-child(5){ --a:198deg }
.brujula .cinco__tab:hover{ background:rgba(20,80,79,.9) }
.brujula .cinco__tab[aria-selected="true"]{ background:var(--papel); color:var(--tinta); box-shadow:0 0 0 4px rgba(217,164,65,.45) }
.brujula .cinco__i{ font-size:.875rem; letter-spacing:.06em; line-height:1.1 }
.brujula .cinco__n{ font-size:1rem; line-height:1.2 }
.brujula .cinco__tv{ display:none }
@media (min-width:36rem){ .brujula .cinco__tab{ --R:42% } }
.cinco__paso{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:var(--e-md) }
.cinco__paso[hidden]{ display:none }
.cinco__cuenta{ font-family:var(--sans); font-size:1rem; color:#DCE3E6 }
.cinco__cuenta b{ font-size:2.2rem; font-weight:650; letter-spacing:-.03em; color:var(--sol-2); margin-right:.15em; font-variant-numeric:tabular-nums }
.cinco__flechas{ display:flex; gap:.5rem }
.cinco__flecha{ appearance:none; border:0; cursor:pointer; width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; color:var(--papel);
  background:rgba(244,242,238,.08); box-shadow:inset 0 0 0 1px rgba(244,242,238,.3); transition:background .25s ease }
.cinco__flecha svg{ width:1.1rem; height:1.1rem }
.cinco__flecha:hover{ background:var(--sol); color:var(--tinta); box-shadow:none }
.cinco__lado .cinco__panel{ grid-template-columns:1fr; gap:var(--e-md) }
.cinco__i{ font-size:.875rem }
.cinco__q span{ font-size:.875rem }
@media (prefers-reduced-motion:reduce){ .brujula__aguja,.brujula__v{ transition:none } }

/* Aviso de estado del ICT‑5 */
.aviso-propuesta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.3rem .7rem; align-items:baseline; margin:0; padding:.8rem 1.1rem; border-radius:var(--r-md);
  background:rgba(217,164,65,.14); box-shadow:inset 0 0 0 1px rgba(217,164,65,.5); font-family:var(--sans); font-size:.95rem; line-height:1.5; color:var(--papel); max-width:68ch }
.aviso-propuesta b{ font-size:.78rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--sol-2) }

/* 404: tipografía de la casa, sin trazo fino */
.e404__folio{ font-weight:650; font-stretch:100%; letter-spacing:-.05em; font-size:clamp(5rem,14vw,9.5rem); color:var(--sol-2) }
.e404__t{ font-size:var(--t-h2); font-weight:650; font-stretch:100%; line-height:1.05; letter-spacing:-.028em; max-width:18ch }
.e404__foto img{ object-position:50% 60% }
.e404__nav a{ display:inline-flex; align-items:center; min-height:var(--toque) }

/* Objetivos táctiles */
.indice a{ min-height:var(--toque); display:inline-flex; align-items:center }
.subnav a{ min-height:var(--toque); display:inline-flex; align-items:center }
.propmap__eco a{ min-height:36px }
.enlace5__cadena li b{ font-size:.8rem }
.enlace5__cadena li small{ font-size:.75rem }

/* ============================================================================
   v13 · QUÉ HACEMOS Y MÉTODO (agente QUEHACEMOS-METODO)
   Cabeceras centradas, apertura con paisaje, mapa de frentes simétrico,
   líneas desplegables, ciclo de acuerdos vivos, escalera 5P, encargos por
   actor; método en cuatro pasos. Todo con prefijos propios (q*, m*).
   ========================================================================== */
.qcab{ text-align:center; max-width:48rem; margin:0 auto clamp(2.25rem,4.5vw,3.5rem); display:grid; justify-items:center; gap:var(--e-sm) }
.qcab .antetitulo,.qcab .etapa{ margin:0 }
.qcab .etapa{ justify-content:center }
.qcab .h2{ margin:0; text-wrap:balance; max-width:22ch }
.qcab .entrada{ margin:0 auto; max-width:58ch; text-wrap:pretty }
.qcab--oscuro .h2{ color:var(--papel) }
.qcab--oscuro .entrada{ color:#DCE3E6 }
.qcab--oscuro .antetitulo{ color:var(--piedra) }
.qcab--oscuro .entrada strong{ color:var(--papel) }
.qcentro{ justify-content:center; text-align:center }
.acciones.qcentro{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(2rem,4vw,3rem) }

/* ---------- Apertura con paisaje ---------- */
.qap{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche); color:var(--papel);
  min-height:clamp(36rem, 92svh, 54rem); display:grid; align-items:center; text-align:center;
  padding:calc(var(--alto-nav) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(4rem,8vw,6rem) }
.qap__foto{ position:absolute; inset:0; z-index:-2 }
.qap__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transform:scale(1.04); animation:qap-acerca 18s var(--curva) both }
@keyframes qap-acerca{ from{ transform:scale(1.1) } to{ transform:scale(1.02) } }
.qap::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,26,47,.72) 0, rgba(10,26,47,.42) 38%, rgba(10,26,47,.5) 62%, rgba(10,26,47,.9) 100%),
             radial-gradient(60% 55% at 50% 50%, rgba(10,26,47,.35), transparent 75%) }
.qap__in{ display:grid; justify-items:center; gap:var(--e-md) }
.qap__t{ font-family:var(--sans); font-size:var(--t-display); font-weight:650; line-height:1.04; letter-spacing:-.03em; font-stretch:103%;
  max-width:16ch; margin:0; text-wrap:balance; color:var(--papel); text-shadow:0 2px 28px rgba(6,17,31,.45) }
.qap__lede{ font-family:var(--sans); font-size:clamp(1.02rem,.95rem + .35vw,1.22rem); line-height:1.6; color:#E3EAEA; max-width:54ch; margin:0; text-wrap:pretty }
.qap__frentes{ list-style:none; margin:var(--e-sm) 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; max-width:56rem }
.qap__frentes a{ display:inline-flex; align-items:center; gap:.6rem; min-height:var(--toque,44px); padding:.55rem 1.1rem .55rem .6rem; border-radius:999px;
  font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--papel); text-decoration:none;
  background:rgba(6,17,31,.42); box-shadow:inset 0 0 0 1px rgba(244,242,238,.26); transition:background .25s ease, box-shadow .25s ease }
.qap__frentes a span{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-size:.78rem; font-weight:700; color:var(--tinta); background:var(--c,var(--piedra)) }
.qap__frentes a:hover{ background:rgba(244,242,238,.16); box-shadow:inset 0 0 0 1px var(--c,var(--piedra)) }
.qap__pie{ position:absolute; left:0; right:0; bottom:1rem; margin:0 auto; text-align:center; font-family:var(--sans); font-size:.78rem; color:rgba(244,242,238,.72) }
@media (prefers-reduced-motion:reduce){ .qap__foto img{ animation:none; transform:none } }

/* (v14: Qué hacemos se reescribió al final del archivo) */

/* ---------- Método: apertura y recorrido ---------- */
.map{ position:relative; isolation:isolate; overflow:hidden; color:var(--papel); text-align:center;
  background:radial-gradient(60% 60% at 50% 0%, rgba(217,164,65,.16), transparent 70%), linear-gradient(165deg, var(--petroleo) 0, var(--petroleo-hondo) 55%, var(--noche) 100%);
  padding:calc(var(--alto-nav) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(3.5rem,7vw,5.5rem) }
.map__in{ display:grid; justify-items:center; gap:var(--e-md) }
.map__t{ font-family:var(--sans); font-size:var(--t-display); font-weight:650; line-height:1.04; letter-spacing:-.03em; font-stretch:103%; max-width:17ch; margin:0; text-wrap:balance; color:var(--papel) }
.map__lede{ font-family:var(--sans); font-size:clamp(1.02rem,.95rem + .35vw,1.2rem); line-height:1.6; color:#DCE3E6; max-width:56ch; margin:0 }
.map .entra-sube{ animation:sube .9s var(--salida) both; animation-delay:calc(var(--n,0) * 100ms + 120ms) }
@media (prefers-reduced-motion:reduce){ .map .entra-sube{ animation:none } }
.mrec{ width:100%; max-width:68rem; margin-top:var(--e-md) }
.mrec ol{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; counter-reset:none }
@media (min-width:40rem){ .mrec ol{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:64rem){ .mrec ol{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.mrec a{ display:grid; justify-items:center; gap:.2rem; height:100%; min-height:var(--toque,44px); padding:1rem .9rem 1.1rem; border-radius:12px; text-decoration:none; color:var(--papel);
  background:rgba(6,17,31,.34); box-shadow:inset 0 0 0 1px rgba(216,203,179,.26); transition:background .25s ease, transform .25s var(--curva) }
.mrec a:hover{ background:rgba(244,242,238,.12); transform:translateY(-2px) }
.mrec__n{ display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--tinta); background:var(--sol) }
.mrec b{ font-family:var(--sans); font-size:1rem; font-weight:650 }
.mrec small{ font-family:var(--sans); font-size:.84rem; color:var(--suave-claro); line-height:1.4 }

/* ---------- Método 01: la lógica ---------- */
.mlog{ position:relative; isolation:isolate; overflow:hidden; color:var(--papel); padding-block:var(--banda); background:linear-gradient(180deg, var(--noche) 0, #0C2236 100%) }
.mlog .ecuacion{ justify-content:center; text-align:center; font-size:clamp(2rem, .9rem + 4.2vw, 4.8rem); margin:0 auto clamp(2rem,4vw,3rem) }
.mfac{ list-style:none; margin:0 auto; padding:0; max-width:70rem; display:grid; gap:1rem }
@media (min-width:52rem){ .mfac{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.mfac__i{ display:grid; justify-items:center; gap:.4rem; text-align:center; padding:1.4rem 1.2rem 1.5rem; border-radius:14px; background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px rgba(216,203,179,.2); transition:box-shadow .3s ease, opacity .3s ease }
.mfac__x{ margin:0; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; font-family:var(--sans); font-weight:700; color:var(--tinta); background:var(--sol-2) }
.mfac__t{ margin:.2rem 0 0; font-family:var(--sans); font-size:1.2rem; font-weight:650; color:var(--papel) }
.mfac__q{ margin:0; font-family:var(--lee); font-style:italic; color:var(--sol-2) }
.mfac__d{ margin:0; font-family:var(--sans); font-size:.93rem; line-height:1.55; color:#DCE3E6 }
.mfac__i[data-nivel="bajo"]{ box-shadow:inset 0 0 0 1.5px rgba(232,140,100,.75) }
.mfac__i[data-nivel="cero"]{ box-shadow:inset 0 0 0 2px #E88C64; opacity:.75 }
.mlog__prueba{ max-width:62rem; margin:clamp(2rem,4vw,3rem) auto 0; display:grid; gap:1rem }
.mlog__casos[hidden],.mict__casos[hidden]{ display:none }
.mlog__casos,.mict__casos{ text-align:center }
.mlog__ck{ margin:0 0 .6rem; font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.mlog__cb{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem }
.mcaso{ appearance:none; border:0; cursor:pointer; display:grid; gap:.05rem; min-height:var(--toque,44px); padding:.55rem 1rem; border-radius:12px; text-align:center;
  color:var(--papel); background:rgba(244,242,238,.07); box-shadow:inset 0 0 0 1px rgba(244,242,238,.26); transition:background .25s ease }
.mcaso b{ font-family:var(--sans); font-size:.92rem; font-weight:650 }
.mcaso small{ font-family:var(--sans); font-size:.75rem; color:var(--suave-claro) }
.mcaso:hover{ background:rgba(244,242,238,.14) }
.mcaso[aria-pressed="true"]{ background:var(--papel); color:var(--tinta) }
.mcaso[aria-pressed="true"] small{ color:var(--mudo) }
.mlog .form0{ border-radius:16px; padding:clamp(1.4rem,3vw,2.4rem); background:rgba(20,80,79,.35); box-shadow:inset 0 0 0 1px rgba(244,242,238,.16) }
.mlog .form0__res{ justify-content:center; text-align:center }
.mlog .form0__res .n{ font-weight:650 }
.mlog .form0__ilustrativo{ text-align:center }
.mlog__por{ max-width:52rem; margin:clamp(2rem,4vw,3rem) auto 0; text-align:center; padding:1.3rem 1.5rem; border-radius:14px; background:rgba(217,164,65,.1); box-shadow:inset 0 0 0 1px rgba(217,164,65,.4) }
.mlog__por p{ margin:0; font-size:1rem; line-height:1.65; color:#E3EAEA }
.mlog__por .mlog__pk{ font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--sol-2); margin-bottom:.4rem }

/* ---------- Método 02: Modelo 5P ---------- */
.cinco .qcab{ margin-bottom:0 }
.m5__dep{ margin:.8rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem }
.m5__dep span{ font-family:var(--sans); font-size:.78rem; font-weight:600; padding:.25rem .65rem; border-radius:999px; color:var(--piedra); box-shadow:inset 0 0 0 1px rgba(216,203,179,.4) }
.m5__dl{ margin:var(--e-md) 0 0; display:grid; gap:.75rem }
.m5__dl div{ padding-top:.6rem; border-top:1px solid rgba(216,203,179,.2) }
.m5__dl dt{ font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.m5__dl dd{ margin:.15rem 0 0; font-family:var(--sans); font-size:.98rem; line-height:1.55; color:#E3EAEA }
.brujula__v[data-base="true"]{ fill:rgba(217,164,65,.45) }
.m5c{ text-align:center }
.m5c[hidden]{ display:none }
.m5c__k{ margin:0 0 .75rem; font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.m5c__l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem }
.m5c__l li{ display:flex; align-items:center; gap:.4rem }
.m5c__l li + li::before{ content:""; width:1rem; height:2px; background:rgba(216,203,179,.5) }
.m5c__b{ appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; min-height:var(--toque,44px); padding:0 .95rem; border-radius:999px;
  font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--papel); background:rgba(6,17,31,.5); box-shadow:inset 0 0 0 1px rgba(244,242,238,.26); transition:background .25s ease }
.m5c__b b{ font-size:.76rem; color:var(--piedra) }
.m5c__b:hover{ background:rgba(20,80,79,.9) }
.m5c__b[data-base="true"]{ box-shadow:inset 0 0 0 1px rgba(217,164,65,.7) }
.m5c__b[aria-current="true"]{ background:var(--papel); color:var(--tinta) }
.m5c__b[aria-current="true"] b{ color:var(--petroleo) }
@media (max-width:40rem){ .m5c__l li + li::before{ display:none } }

/* ---------- Método 03: ICT‑5 ---------- */
.instrumento .qcab .aviso-propuesta{ justify-content:center; text-align:center; margin-top:.5rem }
.mict{ list-style:none; margin:0 auto; padding:0; max-width:76rem; display:grid; gap:1rem }
@media (min-width:60rem){ .mict{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.mict__i{ display:grid; justify-items:center; align-content:start; gap:.5rem; text-align:center; padding:1.5rem 1.3rem 1.6rem; border-radius:14px;
  background:rgba(244,242,238,.05); box-shadow:inset 0 0 0 1px rgba(216,203,179,.2) }
.mict__i--regla{ background:rgba(217,164,65,.1); box-shadow:inset 0 0 0 1px rgba(217,164,65,.45) }
.mict__n{ margin:0; font-family:var(--sans); font-size:2.6rem; font-weight:650; line-height:1; color:var(--sol-2) }
.mict__t{ margin:0; font-family:var(--sans); font-size:1.15rem; font-weight:650; color:var(--papel) }
.mict__d{ margin:0; font-family:var(--sans); font-size:.93rem; line-height:1.55; color:#DCE3E6 }
.mict__esc{ list-style:none; margin:.4rem 0 0; padding:0; width:100%; max-width:16rem; display:grid; gap:.25rem }
.mict__esc li{ display:flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.82rem; color:var(--papel); padding:.25rem .6rem; border-radius:6px;
  background:rgba(20,80,79,calc(.25 + var(--k) * .15)); width:calc(55% + var(--k) * 11.25%); margin-inline:auto }
.mict__esc b{ color:var(--sol-2) }
.mict__casos{ margin-top:var(--e-xl) }
@media (min-width:64rem){ .instrumento .def{ grid-template-columns:repeat(3,minmax(0,1fr)) } .instrumento .def > .def__f:last-child:nth-child(odd){ grid-column:auto } }

/* ---------- Método 04: en la práctica ---------- */
.mpra__l{ list-style:none; margin:0 auto; padding:0; max-width:76rem; display:grid; gap:1rem; position:relative }
@media (min-width:60rem){ .mpra__l{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .mpra__l::before{ content:""; position:absolute; top:1.3rem; left:12.5%; right:12.5%; height:2px; background:var(--filete-firme) } }
.mpra__l li{ position:relative; display:grid; justify-items:center; align-content:start; gap:.5rem; text-align:center; padding:0 .5rem }
.mpra__n{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; font-family:var(--sans); font-weight:700; color:var(--papel); background:var(--petroleo); box-shadow:0 0 0 6px var(--papel) }
.mpra__l h3{ margin:.3rem 0 0; font-family:var(--sans); font-size:1.1rem; font-weight:650; color:var(--tinta) }
.mpra__l p{ margin:0; font-family:var(--sans); font-size:.95rem; line-height:1.55; color:var(--tinta-2); max-width:30ch }
.mpra__cierre{ max-width:52rem; margin:clamp(2.5rem,5vw,3.5rem) auto 0; text-align:center }
.mpra__cierre .entrada{ margin-inline:auto }
.mpra .etapa{ color:var(--petroleo) }
/* v13 · ajustes tras revisión visual */
.mlog .ecuacion{ font-size:clamp(1.9rem, .6rem + 3.5vw, 4rem) }
.mict__esc li{ justify-content:center }
.instrumento .mx__reset,.instrumento .mx__chip{ min-height:var(--toque,44px) }

/* ============================================================================
   v14 · QUÉ HACEMOS (agente QUEHACEMOS-METODO)
   Mapa en tarjetas con cabecera de color, líneas como pestañas, mesa del
   ciclo de acuerdos en SVG, 5P en acordeón con escalera, tres pasos del
   diagnóstico y encargos por actor con foto. Sin barras verticales de acento.
   ========================================================================== */

/* ---------- Mapa: tres verbos, cuatro frentes, cinco espacios ---------- */
.qmap{ position:relative; isolation:isolate;
  background:
    radial-gradient(42rem 26rem at 8% 6%, rgba(244,162,97,.12), transparent 70%),
    radial-gradient(38rem 26rem at 50% 0%, rgba(235,163,175,.10), transparent 70%),
    radial-gradient(42rem 26rem at 92% 8%, rgba(124,196,190,.14), transparent 70%),
    var(--papel) }
.qmap__marco{ max-width:74rem; margin-inline:auto; display:grid; gap:1.1rem }
.qmap__cols{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem }
@media (min-width:52rem){ .qmap__cols{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.qmap__col{ display:grid; grid-template-rows:auto 1fr; border-radius:20px; overflow:hidden; background:var(--blanco);
  box-shadow:0 1px 0 rgba(14,23,38,.05), 0 0 0 1px rgba(14,23,38,.06), 0 28px 50px -38px rgba(14,23,38,.45);
  transition:transform .35s var(--curva), box-shadow .35s ease, opacity .3s ease }
.qmap__cab{ position:relative; display:grid; justify-items:center; gap:.55rem; padding:1.6rem 1.2rem 1.4rem; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 34%, white), color-mix(in srgb, var(--c) 14%, white)) }
.qmap__num{ position:absolute; top:.9rem; left:1.1rem; font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.08em; color:color-mix(in srgb, var(--c) 30%, var(--tinta)) }
.qmap__ico{ display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; background:var(--blanco); color:var(--tinta); box-shadow:0 10px 22px -14px rgba(14,23,38,.5) }
.qmap__ico svg{ width:1.6rem; height:1.6rem }
.qmap__verbo{ margin:0; font-family:var(--sans); font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem); font-weight:650; letter-spacing:-.015em; color:var(--tinta) }
.qmap__cuerpo{ display:grid; align-content:start; justify-items:center; gap:.95rem; padding:1.3rem 1.3rem 1.5rem; text-align:center }
.qmap__frente{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; min-height:var(--toque,44px); padding:.8rem 1rem .8rem 1.15rem; border-radius:12px; text-decoration:none; text-align:left;
  background:var(--noche); color:var(--papel); transition:background .25s ease }
.qmap__frente > span{ display:grid; gap:.1rem }
.qmap__frente small{ font-family:var(--sans); font-size:.7rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.qmap__frente b{ font-family:var(--sans); font-size:1.04rem; font-weight:600 }
.qmap__frente svg{ flex:none; color:var(--c); transition:transform .25s var(--curva) }
.qmap__frente:hover{ background:var(--petroleo) }
.qmap__frente:hover svg{ transform:translateX(4px) }
.qmap__d{ margin:0; font-family:var(--sans); font-size:.96rem; line-height:1.55; color:var(--tinta-2); max-width:30ch }
.qmap__ext{ margin:auto 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; padding-top:.9rem; width:100%; border-top:1px dashed var(--filete) }
.qmap__ek{ flex-basis:100%; font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--mudo) }
.qmap__chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--tinta); background:color-mix(in srgb, var(--c) 18%, white) }
.qmap__chip::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--c) }
.qmap__chip--hueco{ background:transparent; box-shadow:inset 0 0 0 1px var(--filete-firme); color:var(--tinta-2) }
.qmap__chip--hueco::before{ background:var(--ac-lab) }
.qmap__base{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1.1rem; padding:1.3rem 1.6rem; border-radius:20px; text-decoration:none; text-align:left;
  color:var(--papel); background:radial-gradient(80% 140% at 0% 0%, rgba(216,203,179,.18), transparent 60%), linear-gradient(120deg, var(--petroleo), var(--noche));
  box-shadow:0 28px 50px -36px rgba(14,23,38,.6); transition:transform .3s var(--curva), opacity .3s ease }
.qmap__bico{ display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:50%; background:var(--piedra); color:var(--tinta) }
.qmap__bico svg{ width:1.5rem; height:1.5rem }
.qmap__btx{ display:grid; gap:.2rem }
.qmap__btx small{ font-family:var(--sans); font-size:.72rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.qmap__btx b{ font-family:var(--sans); font-size:1.2rem; font-weight:650 }
.qmap__btx > span{ font-family:var(--sans); font-size:.95rem; line-height:1.5; color:#DCE3E6 }
.qmap__bfl{ color:var(--piedra); transition:transform .25s var(--curva) }
.qmap__base:hover{ transform:translateY(-2px) }
.qmap__base:hover .qmap__bfl{ transform:translateX(4px) }
@media (max-width:40rem){ .qmap__base{ grid-template-columns:1fr; justify-items:center; text-align:center } }
.qmap__marco:has(.qmap__col:is(:hover,:focus-within)) .qmap__col:not(:is(:hover,:focus-within)),
.qmap__marco:has(.qmap__col:is(:hover,:focus-within)) .qmap__base{ opacity:.55 }
.qmap__marco:has(.qmap__col:is(:hover,:focus-within)) .qmap__col:is(:hover,:focus-within){ transform:translateY(-4px); box-shadow:0 0 0 1.5px var(--c), 0 30px 54px -34px rgba(14,23,38,.55) }

/* ---------- Dinámica social: cinco líneas como tarjetas con panel ---------- */
.qlineas{ background:linear-gradient(180deg, var(--papel), var(--niebla)) }
.qlin{ max-width:74rem; margin-inline:auto; display:grid; gap:1rem }
.qlin__tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem }
.qlin__tabs[hidden]{ display:none }
.qlin__tab:last-child:nth-child(odd){ grid-column:1 / -1 }
@media (min-width:60rem){ .qlin__tabs{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem } .qlin__tab:last-child:nth-child(odd){ grid-column:auto } }
.qlin__tab{ appearance:none; border:0; cursor:pointer; position:relative; display:grid; justify-items:center; align-content:start; gap:.4rem; min-height:var(--toque,44px); padding:1.2rem .8rem 1.1rem; border-radius:16px; text-align:center;
  background:var(--blanco); color:var(--tinta); box-shadow:0 0 0 1px rgba(14,23,38,.08), 0 16px 30px -26px rgba(14,23,38,.45);
  transition:background .25s ease, color .25s ease, transform .25s var(--curva), box-shadow .25s ease }
.qlin__tab:hover{ transform:translateY(-2px); box-shadow:0 0 0 1.5px var(--petroleo), 0 20px 36px -26px rgba(14,23,38,.5) }
.qlin__n{ position:absolute; top:.6rem; left:.8rem; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--mudo) }
.qlin__ic{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; color:var(--petroleo); background:rgba(20,80,79,.1); transition:background .25s ease, color .25s ease }
.qlin__ic svg{ width:1.5rem; height:1.5rem }
.qlin__tab b{ font-family:var(--sans); font-size:.98rem; font-weight:650; line-height:1.25 }
.qlin__tab small{ font-family:var(--sans); font-size:.78rem; line-height:1.35; color:var(--mudo) }
.qlin__tab[aria-selected="true"]{ background:var(--noche); color:var(--papel); box-shadow:0 22px 40px -24px rgba(10,26,47,.7) }
.qlin__tab[aria-selected="true"] .qlin__ic{ background:var(--sol); color:var(--tinta) }
.qlin__tab[aria-selected="true"] small,.qlin__tab[aria-selected="true"] .qlin__n{ color:var(--suave-claro) }
@media (min-width:60rem){ .qlin__tab[aria-selected="true"]::after{ content:""; position:absolute; left:50%; bottom:-.55rem; width:1rem; height:1rem; background:var(--noche); transform:translateX(-50%) rotate(45deg); border-radius:2px } }
.qlin__panel{ border-radius:20px; padding:clamp(1.4rem,3vw,2.6rem); background:var(--blanco); box-shadow:0 0 0 1px rgba(14,23,38,.07), 0 30px 60px -40px rgba(14,23,38,.5) }
.qlin__panel[hidden]{ display:none }
.qlin--js .qlin__panel{ animation:qlin-abre .45s var(--curva) both }
@keyframes qlin-abre{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.qlin__pcab{ text-align:center; max-width:44rem; margin:0 auto 1.6rem; display:grid; gap:.35rem; justify-items:center }
.qlin__pk{ margin:0; font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.qlin__pt{ margin:0; font-family:var(--sans); font-size:clamp(1.35rem,1.15rem + .7vw,1.8rem); font-weight:650; letter-spacing:-.018em; color:var(--tinta) }
.qlin__pl{ margin:0; font-size:1.02rem; line-height:1.6; color:var(--tinta-2); text-wrap:pretty }
.qlin__tres{ display:grid; gap:.9rem }
@media (min-width:52rem){ .qlin__tres{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.qlin__b{ border-radius:14px; padding:1.2rem 1.25rem 1.3rem; background:var(--papel) }
.qlin__k{ margin:0 0 .6rem; display:flex; align-items:center; gap:.55rem; font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.qlin__bn{ display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; font-size:.74rem; letter-spacing:0; color:var(--papel); background:var(--petroleo) }
.qlin__b p:not(.qlin__k){ margin:0; font-family:var(--sans); font-size:.96rem; line-height:1.6; color:var(--tinta-2) }
.qlin__ent{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem }
.qlin__ent li{ display:flex; gap:.55rem; align-items:flex-start; font-family:var(--sans); font-size:.95rem; line-height:1.5; color:var(--tinta) }
.qlin__ent li::before{ content:""; flex:none; width:1.1rem; height:1.1rem; margin-top:.15rem; border-radius:50%;
  background:var(--petroleo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat }
.qlin__quien{ display:flex; flex-wrap:wrap; gap:.4rem }
.qlin__quien span{ padding:.35rem .75rem; border-radius:999px; font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--tinta); background:var(--blanco); box-shadow:inset 0 0 0 1px var(--filete) }
.qlin__mas{ margin:1.4rem 0 0; text-align:center }
.qlin__mas .liga{ min-height:var(--toque,44px); display:inline-flex; align-items:center }

/* ---------- Acuerdos vivos: la mesa y el ciclo ---------- */
.ciclo{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche); color:var(--papel); padding-block:var(--banda) }
.ciclo__fondo{ position:absolute; inset:0; z-index:-2 }
.ciclo__fondo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
.ciclo::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,26,47,.92), rgba(10,26,47,.86) 45%, rgba(10,26,47,.95)) }
/* v15 · Acuerdos vivos: anillo que gira y se conecta con la mesa ----------
   El anillo exterior (fases) rota con --giro hasta dejar arriba la fase
   elegida; cada fase contrarrota para que su texto quede siempre derecho.
   La mesa del centro y el radio que la une con la fase activa no giran. */
.giro{ max-width:76rem; margin-inline:auto; display:grid; gap:clamp(1.5rem,3vw,2.75rem); align-items:center }
@media (min-width:62rem){ .giro{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) } }
.giro__fig{ margin:0; display:grid; gap:.9rem; justify-items:center }
.giro__svg{ --giro:0deg; width:100%; max-width:38rem; height:auto; display:block; overflow:visible; font-family:var(--sans) }
.giro__guia{ fill:none; stroke:rgba(216,203,179,.12); stroke-width:1.5 }
.giro__marca{ fill:var(--sol-2) }
.giro__radio{ fill:none; stroke:var(--sol-2); stroke-width:2.5; stroke-linecap:round }
.giro__radio-flujo{ fill:none; stroke:var(--noche); stroke-width:3; stroke-dasharray:3 9; animation:giro-flujo-r 1.2s linear infinite }
.giro__anillo{ transform:rotate(var(--giro)); transform-origin:340px 340px; transition:transform 1.1s cubic-bezier(.65,0,.35,1) }
.giro__in{ transform:rotate(calc(var(--giro) * -1)); transition:transform 1.1s cubic-bezier(.65,0,.35,1) }
.giro__arco{ fill:none; stroke:#8E8676; stroke-width:3; stroke-linecap:round; marker-end:url(#giro-fl); transition:stroke .45s ease }
.giro__arco[data-on="true"]{ stroke:var(--sol-2); marker-end:url(#giro-fla) }
.giro__flujo{ fill:none; stroke:rgba(244,242,238,.7); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:0 15; animation:giro-flujo 1.5s linear infinite; pointer-events:none }
@keyframes giro-flujo{ to{ stroke-dashoffset:-15 } }
@keyframes giro-flujo-r{ to{ stroke-dashoffset:-12 } }
.giro__reneg{ fill:none; stroke:rgba(240,162,126,.4); stroke-width:2; stroke-dasharray:5 7; marker-end:url(#giro-flr); transition:stroke .45s ease }
.giro__fig[data-fase="3"] .giro__reneg{ stroke:#F0A27E; stroke-width:2.5 }
.giro__halo{ fill:none; stroke:var(--sol-2); stroke-width:1.5; opacity:0; transition:opacity .45s ease }
.giro__disco{ fill:var(--noche); stroke:var(--piedra); stroke-width:2; transition:fill .45s ease, stroke .45s ease }
.giro__num{ font-size:23px; font-weight:700; fill:var(--piedra); text-anchor:middle; transition:fill .45s ease }
.giro__pal{ font-size:12.5px; font-weight:600; fill:var(--suave-claro); text-anchor:middle; transition:fill .45s ease }
.giro__fase[data-on="true"] .giro__disco{ fill:var(--sol); stroke:var(--sol-2) }
.giro__fase[data-on="true"] .giro__num,.giro__fase[data-on="true"] .giro__pal{ fill:var(--tinta) }
.giro__fase[data-on="true"] .giro__halo{ opacity:.55 }
.giro--js .giro__fase{ cursor:pointer }
.giro--js .giro__fase:hover .giro__disco{ stroke:var(--sol-2) }
.giro__mesa{ fill:url(#giro-gr); stroke:rgba(216,203,179,.5); stroke-width:1.5 }
.giro__mesa-in{ fill:none; stroke:rgba(216,203,179,.22); stroke-width:1; stroke-dasharray:2 5 }
.giro__mk{ font-size:10.5px; font-weight:700; letter-spacing:.16em; fill:var(--piedra) }
.giro__mv{ font-size:16px; font-weight:650; fill:var(--papel) }
.giro__act{ transition:opacity .45s ease }
.giro__act rect{ fill:#16314A; stroke:rgba(244,242,238,.4); stroke-width:1.2; transition:fill .45s ease, stroke .45s ease }
.giro__act text{ font-size:15px; font-weight:650; fill:var(--papel); transition:fill .45s ease }
.giro__act[data-on="true"] rect{ fill:#3A3A2E; stroke:var(--sol-2) }
.giro__act[data-on="false"]{ opacity:.4 }
.giro__act[data-primero="true"] rect{ fill:var(--sol); stroke:var(--sol-2) }
.giro__act[data-primero="true"] text{ fill:var(--tinta) }
.giro__ayuda{ margin:0; text-align:center; font-family:var(--sans); font-size:.88rem; line-height:1.5; color:var(--suave-claro); max-width:32rem }
.giro[data-pausa="true"] .giro__flujo,.giro[data-pausa="true"] .giro__radio-flujo{ animation-play-state:paused }
@media (max-width:40rem){
  .giro__pal,.giro__halo{ display:none }
  .giro__num{ font-size:32px; transform:translateY(13px) }
  .giro__fase[data-fase="3"] .giro__num{ transform:translateY(20px) }
  .giro__act text{ font-size:19px }
  .giro__mk{ font-size:13px } .giro__mv{ font-size:20px }
}
/* lado: fases, explicación y mandos */
.giro__lado{ display:grid; gap:1rem; min-width:0 }
.giro__fases{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem }
.giro__fases[hidden]{ display:none }
.giro__tab{ appearance:none; border:0; cursor:pointer; display:flex; align-items:center; gap:.7rem; width:100%; min-height:3.5rem; padding:.55rem .85rem; border-radius:12px; text-align:left;
  color:var(--papel); background:rgba(244,242,238,.07); box-shadow:inset 0 0 0 1px rgba(244,242,238,.2); transition:background .25s ease, color .25s ease, box-shadow .25s ease }
.giro__tab:hover{ background:rgba(244,242,238,.14) }
.giro__tn{ flex:none; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-family:var(--sans); font-size:.86rem; font-weight:700; color:var(--piedra); box-shadow:inset 0 0 0 1.5px var(--piedra) }
.giro__tt{ display:grid; gap:.05rem; min-width:0 }
.giro__tt b{ font-family:var(--sans); font-size:.98rem; font-weight:650 }
.giro__tt small{ font-family:var(--sans); font-size:.78rem; line-height:1.3; color:var(--suave-claro) }
.giro__tab[aria-selected="true"]{ background:var(--papel); color:var(--tinta); box-shadow:0 0 0 3px rgba(217,164,65,.5) }
.giro__tab[aria-selected="true"] .giro__tn{ background:var(--sol); color:var(--tinta); box-shadow:none }
.giro__tab[aria-selected="true"] small{ color:var(--mudo) }
.giro__paneles{ display:grid; gap:.9rem }
.giro__panel{ padding:clamp(1.3rem,2.6vw,1.9rem); border-radius:16px; background:rgba(6,17,31,.62); box-shadow:inset 0 0 0 1px rgba(244,242,238,.14) }
.giro__panel[hidden]{ display:none }
.giro--js .giro__panel{ animation:qlin-abre .45s var(--curva) both }
.giro__pk{ margin:0; font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--sol-2) }
.giro__pt{ margin:.35rem 0 0; font-family:var(--sans); font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem); font-weight:650; line-height:1.2; letter-spacing:-.02em; color:var(--papel); text-wrap:balance }
.giro__pd{ margin:.7rem 0 0; font-size:1rem; line-height:1.65; color:#DCE3E6 }
.giro__quien{ margin:.9rem 0 0; padding:.7rem .9rem; border-radius:10px; background:rgba(217,164,65,.13); font-family:var(--sans); font-size:.92rem; line-height:1.5; color:var(--papel) }
.giro__quien b,.giro__ej b{ display:block; font-size:.7rem; letter-spacing:.01em; text-transform:none; margin-bottom:.15rem }
.giro__quien b{ color:var(--sol-2) }
.giro__ej{ margin:.9rem 0 0; padding-top:.8rem; border-top:1px dashed rgba(216,203,179,.3); font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--suave-claro) }
.giro__ej b{ color:var(--piedra) }
.giro__mandos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem }
.giro__mandos[hidden]{ display:none }
.giro__m{ appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-width:var(--toque,44px); min-height:var(--toque,44px); padding:0 .95rem; border-radius:999px;
  font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--papel); background:rgba(244,242,238,.08); box-shadow:inset 0 0 0 1px rgba(244,242,238,.32); transition:background .25s ease }
.giro__m:hover{ background:rgba(244,242,238,.18) }
.giro__m svg{ width:16px; height:16px; flex:none }
.giro__m .ic-play{ display:none }
.giro[data-pausa="true"] .giro__m .ic-play{ display:block }
.giro[data-pausa="true"] .giro__m .ic-pausa{ display:none }
@media (prefers-reduced-motion:reduce){
  .giro__anillo,.giro__in,.giro__act,.giro__arco{ transition:none }
  .giro__flujo{ display:none } .giro__radio-flujo{ animation:none; display:none }
  .giro--js .giro__panel{ animation:none }
}

/* v15 · Cinco preguntas: cinco peldaños que suben ------------------------- */
.q5{ position:relative; isolation:isolate; overflow:hidden; color:var(--papel); padding-block:var(--banda);
  background:radial-gradient(60% 70% at 50% 0%, rgba(217,164,65,.12), transparent 70%), linear-gradient(170deg, var(--petroleo) 0, var(--petroleo-hondo) 55%, var(--noche) 100%) }
.q5p{ list-style:none; margin:0 auto; padding:0; max-width:76rem; display:grid; gap:.75rem }
.q5p__i{ position:relative; display:flex; flex-direction:column; gap:.55rem; padding:1.35rem 1.3rem 1.45rem; border-radius:18px;
  background:rgba(244,242,238,calc(.05 + var(--k) * .028)); box-shadow:inset 0 2px 0 rgba(232,194,112,.6); transition:background .3s ease }
.q5p__i:hover{ background:rgba(244,242,238,calc(.09 + var(--k) * .028)) }
.q5p__cab{ margin:0; display:flex; align-items:center; gap:.8rem }
.q5p__n{ font-family:var(--lee); font-size:clamp(2.5rem,2rem + 1.4vw,3.2rem); line-height:.9; color:var(--sol-2) }
.q5p__dim{ font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.q5p__dim b{ color:var(--sol-2); margin-right:.15rem }
.q5p__esc{ position:absolute; top:1.5rem; right:1.3rem; display:flex; align-items:flex-end; gap:3px; height:1.15rem }
.q5p__esc i{ display:block; width:5px; border-radius:2px; background:rgba(216,203,179,.22) }
.q5p__esc i:nth-child(1){ height:28% } .q5p__esc i:nth-child(2){ height:46% } .q5p__esc i:nth-child(3){ height:64% } .q5p__esc i:nth-child(4){ height:82% } .q5p__esc i:nth-child(5){ height:100% }
.q5p__i[style*="--k:0"] .q5p__esc i:nth-child(-n+1),.q5p__i[style*="--k:1"] .q5p__esc i:nth-child(-n+2),.q5p__i[style*="--k:2"] .q5p__esc i:nth-child(-n+3),
.q5p__i[style*="--k:3"] .q5p__esc i:nth-child(-n+4),.q5p__i[style*="--k:4"] .q5p__esc i:nth-child(-n+5){ background:var(--sol-2) }
.q5p__q{ margin:.15rem 0 0; font-family:var(--lee); font-size:clamp(1.3rem,1.12rem + .55vw,1.55rem); font-weight:500; line-height:1.22; color:var(--papel); text-wrap:balance }
.q5p__d{ margin:0; font-family:var(--sans); font-size:.92rem; line-height:1.55; color:#DCE3E6 }
.q5p__k{ margin:0 0 .25rem; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--sol-2) }
@media (min-width:44rem) and (max-width:61.99rem){ .q5p{ grid-template-columns:repeat(2,minmax(0,1fr)) } .q5p__i:last-child{ grid-column:1 / -1 } }
@media (min-width:62rem){
  .q5p{ grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; padding-bottom:0; border-bottom:1px solid rgba(216,203,179,.3) }
  .q5p__i{ margin-top:calc((4 - var(--k)) * 2.1rem); border-radius:18px 18px 0 0; padding-bottom:1.6rem }
  .q5p__esc{ display:none }
}
.q5p__regla{ margin:1.4rem auto 0; text-align:center; font-family:var(--lee); font-style:italic; font-size:1.05rem; color:var(--sol-2) }
@media (prefers-reduced-motion:reduce){ .q5p__i{ transition:none } }

/* ---------- Productivos: tres criterios ---------- */
.qpro__pasos{ list-style:none; margin:0 auto; padding:0; max-width:74rem; display:grid; gap:1rem }
@media (min-width:56rem){ .qpro__pasos{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.qpro__pasos li{ display:grid; justify-items:center; align-content:start; gap:.55rem; text-align:center; padding:1.6rem 1.4rem 1.7rem; background:var(--blanco); border-radius:18px; box-shadow:0 0 0 1px rgba(14,23,38,.07), 0 20px 40px -34px rgba(14,23,38,.5) }
.qpro__n{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; font-family:var(--sans); font-weight:700; color:var(--papel); background:var(--petroleo) }
.qpro__pasos h4{ margin:0; font-family:var(--sans); font-size:1.12rem; font-weight:650; color:var(--tinta) }
.qpro__pasos p{ margin:0; font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--tinta-2) }
.qpro__regla{ max-width:52rem; margin:clamp(1.75rem,3.5vw,2.5rem) auto 0; text-align:center; display:grid; gap:.35rem; padding:1.2rem 1.5rem; border-radius:14px;
  background:var(--noche); color:var(--papel); font-family:var(--sans); font-size:1rem; line-height:1.55 }
.qpro__regla b{ font-size:.74rem; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
#diagnostico .franja__in,#dinamica .franja__in{ text-align:center; display:grid; justify-items:center }
#diagnostico .franja__t{ font-size:var(--t-h2); font-weight:650 }

/* v15 · Escuchar, medir y devolver: un flujo de tres pasos ---------------- */
.qdiag{ background:linear-gradient(180deg, var(--papel), var(--blanco)) }
.qflujo{ list-style:none; margin:0 auto; padding:0; max-width:74rem; display:grid; gap:2.9rem }
@media (min-width:58rem){ .qflujo{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(6,auto); gap:0 2.5rem }
  .qflujo .qflujo__i{ display:grid; grid-row:span 6; grid-template-rows:subgrid; justify-items:center; align-content:start; row-gap:.4rem }
  .qflujo .qflujo__ej{ align-self:stretch; margin-top:0 } }
.qflujo__i{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center }
.qflujo__nodo{ display:grid; place-items:center; width:5rem; height:5rem; border-radius:50%; color:var(--tinta);
  background:color-mix(in srgb, var(--c) 26%, white); box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 60%, white), 0 14px 28px -18px rgba(14,23,38,.45) }
.qflujo__nodo svg{ width:2rem; height:2rem; display:block }
.qflujo__n{ margin:.65rem 0 0; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.qflujo__t{ margin:0; font-family:var(--sans); font-size:clamp(1.4rem,1.2rem + .6vw,1.75rem); font-weight:650; letter-spacing:-.02em; color:var(--tinta) }
.qflujo__lema{ margin:0; font-family:var(--lee); font-style:italic; font-size:1.02rem; color:var(--petroleo) }
.qflujo__d{ margin:.2rem 0 1.1rem; font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--tinta-2); max-width:34ch }
.qflujo__ej{ margin-top:auto; width:100%; display:grid; justify-items:center; gap:.3rem; padding:1rem 1rem .4rem; border-radius:14px; background:color-mix(in srgb, var(--c) 11%, var(--papel)) }
.qflujo__k{ margin:0; font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--mudo) }
.qflujo__ej p:not(.qflujo__k){ margin:0; font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--tinta) }
.qflujo__ej .liga{ min-height:var(--toque,44px); display:inline-flex; align-items:center }
/* conector: en pantalla ancha, flecha horizontal de nodo a nodo; en teléfono, vertical */
.qflujo__fl{ position:absolute; left:50%; bottom:-2.45rem; width:2px; height:1.95rem; transform:translateX(-50%); background:rgba(20,80,79,.45) }
.qflujo__fl::after{ content:""; position:absolute; left:50%; bottom:1px; width:.55rem; height:.55rem; border-top:2px solid var(--petroleo); border-right:2px solid var(--petroleo); transform:translateX(-50%) rotate(135deg) }
.qflujo__fl i{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--lee); font-size:.9rem; color:var(--petroleo) }
@media (min-width:58rem){
  .qflujo__fl{ left:calc(50% + 3.4rem); top:2.5rem; bottom:auto; width:calc(100% + 2.5rem - 6.8rem); height:2px; transform:translateY(-50%) }
  .qflujo__fl::after{ left:auto; right:1px; bottom:auto; top:50%; transform:translateY(-50%) rotate(45deg) }
  .qflujo__fl i{ left:0; right:0; top:auto; bottom:.5rem; transform:none; text-align:center }
}
.qflujo__vuelta{ margin:clamp(1.6rem,3vw,2.2rem) auto 0; display:flex; align-items:center; justify-content:center; gap:.55rem; text-align:center; font-family:var(--lee); font-style:italic; font-size:1rem; color:var(--petroleo) }
.qflujo__vuelta svg{ flex:none; width:1.35rem; height:1.35rem }

/* ---------- Qué recibe quien nos encarga ---------- */
.encargo{ background:radial-gradient(60rem 30rem at 50% 0%, rgba(20,80,79,.10), transparent 70%), var(--niebla) }
.qenc{ max-width:74rem; margin-inline:auto; display:grid; gap:1rem }
.qenc__tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem }
.qenc__tabs[hidden]{ display:none }
@media (min-width:52rem){ .qenc__tabs{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem } }
.qenc__tab{ appearance:none; border:0; cursor:pointer; position:relative; display:flex; align-items:center; gap:.75rem; min-height:4.4rem; padding:.8rem 1rem; border-radius:16px; text-align:left;
  background:var(--blanco); color:var(--tinta); box-shadow:0 0 0 1px rgba(14,23,38,.08), 0 16px 30px -26px rgba(14,23,38,.45); transition:background .25s ease, color .25s ease, transform .25s var(--curva), box-shadow .25s ease }
.qenc__tab:hover{ transform:translateY(-2px); box-shadow:0 0 0 1.5px var(--petroleo), 0 20px 36px -26px rgba(14,23,38,.5) }
.qenc__ic{ flex:none; display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; color:var(--petroleo); background:rgba(20,80,79,.1) }
.qenc__ic svg{ width:1.45rem; height:1.45rem }
.qenc__tt{ display:grid; gap:.05rem }
.qenc__tab b{ font-family:var(--sans); font-size:1rem; font-weight:650 }
.qenc__tab small{ font-family:var(--sans); font-size:.78rem; line-height:1.3; color:var(--mudo) }
.qenc__tab[aria-selected="true"]{ background:var(--noche); color:var(--papel); box-shadow:0 22px 40px -24px rgba(10,26,47,.7) }
.qenc__tab[aria-selected="true"] small{ color:var(--suave-claro) }
.qenc__tab[aria-selected="true"] .qenc__ic{ background:var(--sol); color:var(--tinta) }
@media (max-width:30rem){ .qenc__tab{ flex-direction:column; text-align:center; justify-content:center } }
.qenc__panel{ display:grid; overflow:hidden; border-radius:22px; background:var(--blanco); box-shadow:0 0 0 1px rgba(14,23,38,.07), 0 34px 70px -44px rgba(14,23,38,.55) }
.qenc__panel[hidden]{ display:none }
.qenc--js .qenc__panel{ animation:qlin-abre .4s var(--curva) both }
@media (min-width:60rem){ .qenc__panel{ grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) } }
.qenc__foto{ position:relative; min-height:13rem; background:var(--noche) }
.qenc__foto picture,.qenc__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.qenc__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,26,47,.78), rgba(10,26,47,0) 55%) }
.qenc__para{ position:absolute; z-index:1; left:0; right:0; bottom:1.1rem; text-align:center; font-family:var(--sans); font-size:1.15rem; font-weight:650; color:var(--papel) }
.qenc__cuerpo{ padding:clamp(1.4rem,3vw,2.4rem); display:grid; gap:1.1rem; align-content:start }
.qenc__k{ margin:0; font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.qenc__t{ margin:-.5rem 0 0; font-family:var(--sans); font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem); font-weight:650; line-height:1.25; letter-spacing:-.018em; color:var(--tinta); text-wrap:balance }
.qenc__ent{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem }
@media (min-width:44rem){ .qenc__ent{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.qenc__ent li{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.75rem; row-gap:.15rem; padding:.9rem 1rem; border-radius:14px; background:var(--papel) }
.qenc__en{ grid-row:1 / span 2; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--papel); background:var(--petroleo) }
.qenc__ent b{ font-family:var(--sans); font-size:.98rem; font-weight:650; color:var(--tinta) }
.qenc__ent li > span:last-child{ font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--tinta-2) }
.qenc__datos{ margin:0; display:grid; gap:.6rem }
@media (min-width:44rem){ .qenc__datos{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.qenc__datos div{ padding-top:.7rem; border-top:1px solid var(--filete) }
.qenc__datos dt{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--mudo) }
.qenc__datos dd{ margin:.25rem 0 0; font-family:var(--sans); font-size:.93rem; line-height:1.5; color:var(--tinta-2) }
.qenc__fr{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem }
.qenc__fr > span{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--mudo); margin-right:.2rem }
.qenc__fr a{ display:inline-flex; align-items:center; min-height:var(--toque,44px); padding:0 .9rem; border-radius:999px; font-family:var(--sans); font-size:.86rem; font-weight:600; text-decoration:none; color:var(--petroleo); box-shadow:inset 0 0 0 1px rgba(20,80,79,.35) }
.qenc__fr a:hover{ background:var(--petroleo); color:var(--papel) }

/* ---------- v14 · Método: instrucciones, cuenta y escala de la fórmula; diferencial ---------- */
.mlog__inst{ margin:0 0 1.4rem; padding:.85rem 1rem; border-radius:12px; background:rgba(6,17,31,.35); font-family:var(--sans); font-size:.92rem; line-height:1.55; color:#DCE3E6; text-align:center }
.mlog__inst b{ display:block; font-size:.72rem; letter-spacing:.01em; text-transform:none; color:var(--sol-2); margin-bottom:.2rem }
.mlog__cuenta{ margin:var(--e-lg) 0 0; text-align:center; font-family:var(--sans); font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem); font-weight:600; color:var(--papel); font-variant-numeric:tabular-nums }
.mlog__cuenta b{ color:var(--sol-2) }
.mlog__cuenta b[data-cero="true"]{ color:#F0A27E }
.mlog .form0__barra{ height:.7rem; margin-top:.8rem; background:linear-gradient(90deg, rgba(240,162,126,.25) 0 15%, rgba(217,164,65,.22) 15% 45%, rgba(124,196,190,.22) 45% 100%) }
.mlog .form0__barra i{ background:var(--sol-2) }
.mlog__escala{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; grid-template-columns:15fr 30fr 55fr; gap:0 }
.mlog__escala li{ display:grid; gap:.05rem; justify-items:center; text-align:center; font-family:var(--sans); font-size:.78rem; color:var(--suave-claro); line-height:1.3; min-width:0 }
.mlog__escala b{ font-size:.72rem; font-weight:700; color:var(--piedra); font-variant-numeric:tabular-nums }
.mlog__escala li::before{ content:""; width:.6rem; height:.6rem; border-radius:50%; justify-self:center; background:#F0A27E }
.mlog__escala li:nth-child(2)::before{ background:var(--sol) } .mlog__escala li:nth-child(3)::before{ background:var(--ac-lab) }
@media (max-width:40rem){ .mlog__escala{ grid-template-columns:1fr; gap:.35rem; justify-items:start; width:max-content; max-width:100%; margin-inline:auto }
  .mlog__escala li{ grid-template-columns:auto auto auto; align-items:center; gap:.45rem } }


/* v16 · ICT-5: la regla, ilustrada (sin texto de ejemplo) */
.mict__barras{ list-style:none; margin:auto 0 0; padding:.8rem 0 0; display:flex; align-items:flex-end; justify-content:center; gap:.5rem; height:6.3rem }
.mict__barras li{ display:grid; justify-items:center; gap:.2rem; align-content:end; height:100% }
.mict__barras i{ display:block; width:1.6rem; height:calc(var(--v) * 1rem); border-radius:4px 4px 0 0; background:var(--suave) }
.mict__barras li[data-baja] i{ background:var(--sol) }
.mict__barras span{ font-family:var(--sans); font-size:.72rem; color:var(--suave-claro) }

/* v16 · Método: preguntas de detalle en desplegables */
.mdet{ max-width:52rem; margin:clamp(2rem,4vw,3rem) auto 0 }
.mdet__k{ margin:0 0 .6rem; text-align:center; font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--sol-2) }
.mdet__i{ border-top:1px solid rgba(216,203,179,.25) }
.mdet__i:last-child{ border-bottom:1px solid rgba(216,203,179,.25) }
.mdet__i summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.1rem; padding:.55rem .2rem;
  font-family:var(--sans); font-size:1.02rem; font-weight:600; color:var(--papel) }
.mdet__i summary::-webkit-details-marker{ display:none }
.mdet__i summary::after{ content:""; flex:none; width:.5rem; height:.5rem; border-right:1.6px solid var(--sol-2); border-bottom:1.6px solid var(--sol-2); transform:translateY(-2px) rotate(45deg); transition:transform .25s var(--curva) }
.mdet__i[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.mdet__i summary:hover{ color:var(--sol-2) }
.mdet__i summary:focus-visible{ outline:2px solid var(--sol-2); outline-offset:2px; border-radius:6px }
.mdet__i p{ margin:0 0 1rem; padding:0 .2rem; font-family:var(--sans); font-size:.95rem; line-height:1.6; color:#DCE3E6 }
@media (prefers-reduced-motion:reduce){ .mdet__i summary::after{ transition:none } }
/* v17 · QUEHACEMOS-METODO: ajustes finos */
/* Qué hacemos: los cuatro frentes en 2×2 (una columna en móvil) */
.qap__frentes{ display:grid; grid-template-columns:minmax(0,1fr); justify-content:center }
@media (min-width:36rem){ .qap__frentes{ grid-template-columns:repeat(2,auto) } }
.qap__frentes a{ display:flex; height:100% }
/* Método: la ecuación no deja «Carácter» ni «Tiempo» sin su signo */
.ecuacion__g{ display:inline-flex; align-items:baseline; column-gap:.26em; white-space:nowrap }
@media (min-width:40rem) and (max-width:63.99rem){ .mlog .ecuacion{ font-size:clamp(1.9rem, .4rem + 3.3vw, 4rem) } }
/* Método: casos del simulador e ICT-5 en 2×2 cuando no caben en una fila */
@media (max-width:55.99rem){ .mlog__cb{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:34rem; margin-inline:auto } }
/* Método: la fila P1–P5 sin conectores cuando se parte */
@media (max-width:55.99rem){ .m5c__l li + li::before{ display:none } }

/* v18 · Método · Dos instrumentos (ICT-5 e IDT-5) */
.mdos__par{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--filete-firme); border:1px solid var(--filete-firme); max-width:64rem; margin:0 auto }
.mdos__i{ background:var(--blanco); padding:clamp(1.25rem,3vw,2.25rem); display:grid; gap:.6rem; align-content:start }
.mdos__i--nuevo{ background:var(--noche); color:#DCE3E6 }
.mdos__i--nuevo .liga{ color:var(--papel); background-image:linear-gradient(var(--piedra),var(--piedra)) }
.mdos__k{ font-family:var(--sans); font-size:.8rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--petroleo) }
.mdos__i--nuevo .mdos__k{ color:var(--piedra) }
.mdos__q{ font-family:var(--sans); font-weight:650; font-size:var(--t-seccion); letter-spacing:-.02em; color:var(--tinta) }
.mdos__i--nuevo .mdos__q{ color:var(--papel) }
.mdos .liga{ justify-self:start; margin-top:.4rem }
@media (max-width:47.99rem){ .mdos__par{ grid-template-columns:1fr } }
.mdos .nota{ margin-inline:auto }