body{overflow-x:hidden}
main{padding-bottom:var(--e-16)}
.cabecera nav{display:flex;flex-wrap:wrap;gap:0 var(--e-4);font-size:var(--t-sm);font-weight:700}
.cabecera nav a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
@media (max-width:480px){.cabecera nav .solo-ancho{display:none}}
h1{font-size:clamp(2rem,7vw,3.25rem);line-height:1.1;margin:var(--e-8) 0 var(--e-4);max-width:15ch}
.intro{font-size:var(--t-md);color:var(--suave);max-width:58ch}
.saltos{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:var(--e-6) 0 0}
.saltos a{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;padding:0 var(--e-4);border-radius:var(--r-pildora);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);font-size:var(--t-sm);font-weight:700;text-decoration:none}
.saltos a:hover{box-shadow:inset 0 0 0 1.5px var(--acento)}
.seccion{padding-top:var(--e-12);scroll-margin-top:var(--e-4)}
.seccion>h2{font-size:var(--t-2xl);line-height:1.15;margin:var(--e-2) 0 var(--e-3)}
.seccion>p{color:var(--suave);max-width:60ch}
.necesidad{margin-top:var(--e-6)}
.necesidad p{font-weight:800;font-size:var(--t-sm);margin:0 0 var(--e-3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.chip{font:inherit;font-size:var(--t-sm);font-weight:700;min-height:44px;padding:0 var(--e-4);border:0;border-radius:var(--r-pildora);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);color:var(--tinta);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--fondo);box-shadow:none}
.cuenta{font-size:var(--t-sm);color:var(--suave);margin:var(--e-3) 0 0;min-height:1.5em}
.fichas{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-top:var(--e-5)}
.ficha{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-5);border-radius:var(--r-lg);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);scroll-margin-top:var(--e-6)}
.ficha:target{box-shadow:inset 0 0 0 2px var(--miel),var(--s-media)}
.ficha.ancha{grid-column:1/-1}
.ficha .texto{display:flex;flex-direction:column;gap:var(--e-3)}
.cabeza{display:flex;gap:var(--e-4);align-items:center}
.cabeza h3{font-size:var(--t-md);line-height:1.25;margin:0}
.lema{color:var(--suave);font-size:var(--t-sm);margin:var(--e-1) 0 0}
.arco{display:grid;place-items:center;flex:none;width:56px;height:68px;border-radius:var(--r-pildora) var(--r-pildora) var(--r-sm) var(--r-sm);background:color-mix(in srgb,var(--arena) 30%,transparent);box-shadow:inset 0 0 0 1.75px var(--acento);color:var(--acento)}
.arco .ico{width:28px;height:28px;margin-top:var(--e-2)}
.ficha>p{margin:0}
.ficha dl{display:grid;gap:var(--e-2);margin:0;font-size:var(--t-sm)}
.ficha dt{font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.ficha dd{margin:0}
.ficha ul.tipos{display:grid;gap:var(--e-2);margin:0;padding:0;list-style:none;font-size:var(--t-sm)}
.ficha ul.tipos b{display:block}
.ojo{display:flex;gap:var(--e-2);align-items:flex-start;margin:0;padding:var(--e-3);border-radius:var(--r-md);background:var(--fondo);font-size:var(--t-sm)}
.ojo .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--acento)}
.pie-ficha{margin-top:auto;padding-top:var(--e-2);display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);align-items:center;justify-content:space-between}
.estado{display:inline-flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.estado .ico{width:16px;height:16px}
.foto{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--borde)}
.foto img{display:block;width:100%;height:auto}
.ia{position:absolute;right:var(--e-2);bottom:var(--e-2);z-index:2;display:inline-block;font-size:var(--t-xs);line-height:1.3;padding:var(--e-1) var(--e-2);border-radius:var(--r-pildora);background:rgba(42,40,34,.65);color:var(--sal)}
.vidrio-demo .pelicula{position:absolute;z-index:1;background:rgba(247,242,234,.84);-webkit-backdrop-filter:blur(14px) saturate(.6);backdrop-filter:blur(14px) saturate(.6);transition:opacity .7s ease-out}
.vidrio-demo .p1{left:28.85%;top:17.3%;width:20.65%;height:67.5%}
.vidrio-demo .p2{left:50.85%;top:17.3%;width:20.65%;height:67.5%}
.vidrio-demo:not(.cargada) .pelicula{opacity:0;transition:none}
.vidrio-demo.encendido .pelicula{opacity:0}
.demo-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);font-size:var(--t-sm);color:var(--suave)}
.arma{margin-top:var(--e-5);padding:var(--e-5);border-radius:var(--r-lg);background:var(--superficie);box-shadow:inset 0 0 0 1px var(--borde);display:grid;gap:var(--e-4)}
.campos{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.campo{display:grid;gap:var(--e-1)}
.campo label{font-size:var(--t-sm);font-weight:800}
.campo select,.campo input{font:inherit;font-size:var(--t-base);min-height:48px;padding:0 var(--e-3);border-radius:var(--r-md);border:1px solid var(--borde);background:var(--fondo);color:var(--tinta);width:100%}
.campo .ayuda{font-size:var(--t-xs);color:var(--suave)}
.mensaje{margin:0;padding:var(--e-4);border-radius:var(--r-md);background:var(--fondo);font-size:var(--t-sm);border-left:3px solid var(--miel)}
.mensaje b{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:var(--e-1)}
.letra{font-size:var(--t-sm);color:var(--suave);margin:0}
@media (min-width:900px){
  .fichas{grid-template-columns:repeat(3,1fr)}
  .ficha.media-lado{flex-direction:row;align-items:stretch;gap:var(--e-6)}
  .ficha.media-lado>.texto{flex:1 1 55%}
  .ficha.media-lado>.foto,.ficha.media-lado>.demo{flex:1 1 45%;align-self:center}
}
@media (prefers-reduced-motion:reduce){.vidrio-demo .pelicula{transition:none}}