/* Vitrina editorial: capturas reales, tipografía del sistema y estilos adaptables. */
:root{--papel:#f7f6f2;
  --tinta:#202922;
  --suave:#5b665e;
  --verde:#294c3c;
  --linea:#dcded6;
  --blanco:#fff;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--tinta);
  background:var(--papel);
  font-synthesis:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:100px}
body{margin:0;
  line-height:1.6}
a{color:inherit;
  text-underline-offset:4px}
button{font:inherit;
  color:inherit;
  cursor:pointer}
img{max-width:100%;
  display:block}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #a46b26;
  outline-offset:5px}
[hidden]{display:none!important}
h1,h2,h3,h4,p{margin:0}
h1,h2,h4{font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.13;
  letter-spacing:-.035em}
.cabecera,main,footer{max-width:1240px;
  margin:auto;
  padding-inline:40px}
.cabecera{height:98px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--linea)}
.marca{font-size:28px;
  font-weight:800;
  letter-spacing:-1.5px;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:16px}
.marca span{font-size:9px;
  letter-spacing:1.5px;
  line-height:1.5;
  max-width:100px;
  font-weight:500}
.cabecera nav,footer nav{display:flex;
  gap:30px;
  font-size:13px}
.cabecera nav a,footer nav a{text-decoration:none}
.cabecera nav a:hover,footer nav a:hover{text-decoration:underline}
.ceja{font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.7;
  text-transform:uppercase}
.punto{display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8b9d6d;
  margin-right:7px}
.hero{display:grid;
  grid-template-columns:1.07fr 1fr;
  align-items:center;
  min-height:690px;
  gap:35px;
  padding-block:55px}
.hero h1{font-size:clamp(42px,5.5vw,70px);
  margin:24px 0}
.hero h1 em{color:var(--verde)}
.hero-texto>p:not(.ceja):not(.pie-hero){font-size:17px;
  color:var(--suave);
  max-width:410px;
  line-height:1.8}
.boton{display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding:14px 23px;
  background:var(--verde);
  color:white;
  border-radius:5px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:background .2s,transform .2s}
.boton:hover{background:#163425;
  transform:translateY(-2px)}
.hero .boton{margin-top:28px}
.hero .pie-hero{font-size:11px;
  color:var(--suave);
  margin-top:17px}
.hero-visual{position:relative;
  height:560px;
  isolation:isolate}
.orbita{position:absolute;
  width:95%;
  aspect-ratio:1;
  left:0;
  top:45px;
  border-radius:50%;
  background:#e9ebdf;
  z-index:-1}
.telefono{position:absolute;
  width:43%;
  border:5px solid #26372d;
  border-radius:28px;
  box-shadow:0 24px 45px -18px #273c3655;
  height:auto}
.telefono-uno{left:7%;
  top:25px;
  transform:rotate(-9deg)}
.telefono-dos{right:4%;
  top:65px;
  transform:rotate(9deg)}
.sello{position:absolute;
  bottom:3%;
  left:3%;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:18px;
  line-height:1.35;
  background:var(--papel);
  padding:15px 20px;
  border:1px solid var(--linea);
  transform:rotate(-4deg)}
.indice{display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  border-block:1px solid var(--linea);
  padding:24px 0}
.indice a{display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  padding:8px;
  border-radius:7px}
.indice a:hover{background:#e9ebdf}
.indice img{border-radius:10px;
  flex:none}
.indice span:last-child{margin-left:auto;
  color:var(--suave)}
.titulo-seccion{display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  padding-top:85px}
.titulo-seccion h2,.preguntas h2{font-size:38px;
  margin-top:14px}
.titulo-seccion>p{font-size:13px;
  color:var(--suave)}
.filtros{display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px}
.filtros button{border:1px solid var(--linea);
  border-radius:30px;
  background:transparent;
  padding:10px 17px;
  font-size:12px}
.filtros button[aria-pressed=true]{color:white;
  background:var(--tinta);
  border-color:var(--tinta)}
.filtros span{opacity:.7;
  margin-left:8px}
.app{display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  padding:65px 0;
  border-bottom:1px solid var(--linea);
  scroll-margin-top:15px}
.identidad{display:flex;
  align-items:center;
  gap:15px}
.identidad img{border-radius:16px}
.identidad .ceja{font-size:9px;
  letter-spacing:1px;
  color:var(--suave)}
.identidad h3{font-size:19px;
  font-weight:650;
  letter-spacing:-.5px}
.app h4{font-size:38px;
  margin:27px 0 17px;
  max-width:410px}
.descripcion{color:var(--suave);
  font-size:14px;
  line-height:1.85}
.funciones{list-style:none;
  margin:24px 0;
  padding:0;
  font-size:13px}
.funciones li{padding:7px 0 7px 22px;
  position:relative}
.funciones li:before{content:'↗';
  position:absolute;
  left:0;
  color:var(--verde)}
.nota{font-size:12px;
  line-height:1.75;
  color:var(--suave);
  padding-left:14px;
  border-left:2px solid #bbc6b3}
.disponibilidad{margin-top:25px}
.estado{display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid #ced4c8;
  border-radius:4px;
  padding:7px 11px;
  font-size:11px;
  font-weight:600}
.estado:before{content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7c916d}
.disponibilidad p{font-size:11px;
  color:var(--suave);
  margin-top:10px}
.galeria{display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:30px 27px 18px;
  background:#eceee7;
  border-radius:20px}
.plenitud .galeria{background:#eee9df}
.burbujas .galeria{background:#e5e9f2}
.armonia .galeria{background:#eee6d9}
.aprendizaje .galeria{background:#e7e9df}
figure{margin:0;
  min-width:0}
.captura{display:block;
  border:4px solid #31372f;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 19px -12px #26382b55;
  cursor:zoom-in;
  transition:transform .2s}
.captura:hover{transform:translateY(-5px)}
.captura img{width:100%;
  height:auto}
figcaption{font-size:10px;
  text-align:center;
  color:var(--suave);
  padding-top:12px}
.criterio{margin-top:85px;
  background:var(--verde);
  color:#f6f5ed;
  border-radius:12px;
  padding:50px}
.criterio>.ceja{color:#c4d0b9}
.criterio h2{font-size:43px;
  margin:18px 0 40px}
.principios{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px}
.principios span{font-size:11px;
  color:#c6d1bd}
.principios h3{font-size:15px;
  margin:12px 0 10px}
.principios p{font-size:13px;
  color:#d7dfd2;
  line-height:1.8}
.preguntas{display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  padding:85px 0}
.preguntas>div>p:not(.ceja){color:var(--suave);
  font-size:13px;
  margin-top:22px}
.acordeon details{border-bottom:1px solid var(--linea)}
summary{padding:20px 30px 20px 0;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  position:relative;
  list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';
  position:absolute;
  right:4px;
  font-size:20px;
  font-weight:400;
  top:16px}
details[open] summary:after{content:'−'}
details p{font-size:13px;
  color:var(--suave);
  padding-bottom:22px;
  line-height:1.85}
.contacto{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-block:1px solid var(--linea);
  padding:45px 0;
  margin-bottom:35px}
.contacto h2{font-size:33px;
  margin:13px 0}
.contacto p:not(.ceja){color:var(--suave);
  font-size:13px}
.contacto .boton{flex:none}
footer{display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:30px 40px}
footer .marca{font-size:23px}
footer p{font-size:10px;
  color:var(--suave)}
footer nav{font-size:11px;
  gap:20px}
.solo-lector,.saltar{position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap}
.saltar:focus{position:fixed;
  top:10px;
  left:10px;
  width:auto;
  height:auto;
  padding:12px;
  clip-path:none;
  background:white;
  z-index:10}
dialog{border:0;
  padding:50px 15px 15px;
  border-radius:12px;
  max-width:95vw;
  max-height:95dvh;
  background:var(--papel)}
dialog::backdrop{background:#15201ce6}
dialog img{max-height:calc(95dvh - 80px);
  width:auto;
  margin:auto}
.cerrar{position:absolute;
  right:15px;
  top:10px;
  border:0;
  padding:5px 10px;
  background:transparent;
  font-size:14px}
body:has(dialog[open]){overflow:hidden}

@media(min-width:1100px){.app:nth-of-type(even) .app-texto{order:2}
.app:nth-of-type(even) .galeria{order:1}
}

@media(max-width:1000px){.cabecera,main,footer{padding-inline:26px}
.hero{min-height:590px;
  gap:10px}
.hero-visual{height:460px}
.sello{bottom:0;
  font-size:15px}
.indice{grid-template-columns:repeat(3,1fr)}
.app{gap:30px}
.galeria{gap:12px;
  padding:20px 15px}
.app h4{font-size:32px}
.preguntas{gap:35px}
.titulo-seccion{align-items:start}
.criterio{padding:35px}
.telefono{border-radius:22px}
}

@media(max-width:680px){html{scroll-padding-top:25px}
.cabecera,main,footer{padding-inline:20px}
.cabecera{height:80px}
.marca{font-size:25px;
  gap:10px}
.marca span{font-size:8px;
  max-width:70px}
.cabecera nav{gap:16px;
  font-size:11px}
.cabecera nav a:nth-child(2){display:none}
.hero{grid-template-columns:1fr;
  padding-top:42px;
  gap:28px}
.hero h1{font-size:clamp(42px,10vw,60px)}
.hero-texto>p:not(.ceja):not(.pie-hero){font-size:15px}
.hero-visual{width:100%;
  max-width:410px;
  height:480px;
  margin:auto}
.telefono{width:43%}
.telefono-uno{left:9%;
  top:10px}
.telefono-dos{right:8%;
  top:45px}
.orbita{width:90%;
  left:5%;
  top:45px}
.sello{bottom:0;
  left:5%}
.indice{grid-template-columns:1fr 1fr;
  gap:5px;
  padding-block:18px}
.indice a{font-size:11px}
.indice img{width:32px;
  height:32px;
  border-radius:8px}
.indice a:last-child{grid-column:1/-1;
  max-width:230px}
.titulo-seccion{display:block;
  padding-top:55px}
.titulo-seccion h2,.preguntas h2{font-size:33px}
.titulo-seccion>p{margin-top:15px}
.filtros{gap:7px}
.filtros button{font-size:11px;
  padding:9px 13px}
.app{grid-template-columns:1fr;
  gap:28px;
  padding-block:42px}
.app h4{font-size:34px}
.galeria{padding:24px 20px 16px;
  gap:20px;
  max-width:460px;
  width:100%;
  margin:auto}
.captura{border-radius:19px;
  border-width:3px}
.criterio{margin-top:50px;
  padding:30px 25px}
.criterio h2{font-size:34px}
.principios{grid-template-columns:1fr;
  gap:27px}
.principios h3{margin-top:6px}
.preguntas{grid-template-columns:1fr;
  gap:22px;
  padding-block:55px}
.contacto{display:block;
  padding-block:32px}
.contacto h2{font-size:29px}
.contacto .boton{margin-top:25px}
footer{align-items:start;
  gap:22px}
footer p{flex-basis:100%}
.hero .pie-hero{font-size:10px}
}

@media(max-width:380px){.hero-visual{height:420px}
.galeria{gap:12px;
  padding:18px 12px}
.cabecera nav{gap:10px}
.cabecera .marca span{display:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important}
}
/* Versiones web de las apps (17 y 18/10/2026). */
.disponibilidad .boton{margin-top:14px}

/* Botón de tema en la cabecera (03/11/2026): a la derecha del menú, siempre
   a la vista; en el teléfono queda sólo el ícono (src/lib/boton-tema.js). */
.cabecera nav{margin-left:auto}
.cabecera .nco-tema{margin-left:24px;--ui-borde:var(--linea);--ui-tarjeta:var(--papel);--ui-tinta:var(--tinta);--ui-seleccion:var(--campo-claro,#e9ebdf)}
@media(max-width:680px){.cabecera .nco-tema{margin-left:12px}}

/* Modo oscuro (03/11/2026): la misma vitrina sobre el papel oscuro del
   sistema NCO (TOKENS_NCO_OSCURO); el verde de la casa se aclara para leerse
   sobre negro. Sigue al sistema y obedece al botón de tema (data-theme en
   <html>); sólo en pantalla. Las capturas conservan su marco. */
@media screen and (prefers-color-scheme:dark){:root[data-modo-oscuro]:not([data-theme="claro"]){
  --papel:#0A0C0B;--tinta:#ECEDE7;--suave:#A5AAA4;--verde:#9CC2AC;--linea:#2A2F2C;--blanco:#131614;
  --campo-claro:#161B18;--a-hover:#B9D6C5;--a-sobre-verde:#0A0C0B;--a-criterio:#13201A;--a-criterio-tenue:#9DB3A5;--a-borde:#3A413C;
  --a-galeria:#141815;--a-galeria-plenitud:#18160F;--a-galeria-burbujas:#12151B;--a-galeria-armonia:#191510;--a-galeria-aprendizaje:#141712;color-scheme:dark}}
@media screen{:root[data-modo-oscuro][data-theme="oscuro"]{
  --papel:#0A0C0B;--tinta:#ECEDE7;--suave:#A5AAA4;--verde:#9CC2AC;--linea:#2A2F2C;--blanco:#131614;
  --campo-claro:#161B18;--a-hover:#B9D6C5;--a-sobre-verde:#0A0C0B;--a-criterio:#13201A;--a-criterio-tenue:#9DB3A5;--a-borde:#3A413C;
  --a-galeria:#141815;--a-galeria-plenitud:#18160F;--a-galeria-burbujas:#12151B;--a-galeria-armonia:#191510;--a-galeria-aprendizaje:#141712;color-scheme:dark}}
@media screen{
  :root[data-modo-oscuro]{background:var(--papel)}
  .orbita,.indice a:hover{background:var(--campo-claro,#e9ebdf)}
  .boton{color:var(--a-sobre-verde,white)}
  .boton:hover{background:var(--a-hover,#163425)}
  .sello{border-left-color:var(--a-borde,#bbc6b3)}
  .estado{border-color:var(--a-borde,#ced4c8)}
  .filtros button[aria-pressed=true]{color:var(--papel)}
  .galeria{background:var(--a-galeria,#eceee7)}
  .plenitud .galeria{background:var(--a-galeria-plenitud,#eee9df)}
  .burbujas .galeria{background:var(--a-galeria-burbujas,#e5e9f2)}
  .armonia .galeria{background:var(--a-galeria-armonia,#eee6d9)}
  .aprendizaje .galeria{background:var(--a-galeria-aprendizaje,#e7e9df)}
  .criterio{background:var(--a-criterio,var(--verde))}
  .saltar:focus{background:var(--papel)}
}