/* Páginas de sellala.com para buscadores (web/publico/paginas.mjs). Mismo sistema que la landing: paleta clara,
   Unbounded (títulos), Onest (texto), JetBrains Mono (datos). Solo se anima transform y opacity. */
:root{color-scheme:light only;--papel:#F4F5F0;--tinta:#15161C;--gris:#5E626D;--linea:#DCDED6;--woop:#F2561C;--cobalto:#2340E0;--lima:#D6F24B;--blanco:#fff;--tinta-2:#2A2C35;--sombra:0 1px 2px rgba(21,22,28,.06),0 8px 24px -8px rgba(21,22,28,.12);--sombra-alta:0 2px 4px rgba(21,22,28,.06),0 24px 60px -18px rgba(21,22,28,.28);--gutter:clamp(20px,5vw,48px);--max:1200px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.6 'Onest',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.ic{width:20px;height:20px;flex:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.angosto>*{max-width:820px}
.display{font-family:'Unbounded',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0}
.saltar{position:absolute;left:12px;top:-60px;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:999px;z-index:20;text-decoration:none}
.saltar:focus{top:12px}
:focus-visible{outline:2.5px solid var(--cobalto);outline-offset:3px}
/* menú */
.nav{position:sticky;top:0;z-index:10;background:rgba(244,245,240,.97);border-bottom:1px solid var(--linea)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:inline-flex;color:var(--tinta)}
.sl-logo{height:28px;width:auto;aspect-ratio:989.2/170.5;display:block}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--tinta-2)}
.nav-links a{text-decoration:none;padding:6px 0}
.nav-links a:hover{color:var(--woop)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1.2 'Onest',sans-serif;text-decoration:none;transition:transform .15s ease}
.btn:active{transform:scale(.97)}
.btn .ic{width:20px;height:20px}
.btn-woop{background:var(--woop);color:#fff;box-shadow:0 10px 22px -10px rgba(242,86,28,.7)}
.btn-ghost{background:var(--blanco);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn-blanco{background:#fff;color:var(--tinta)}
.btn-nav{min-height:44px;padding:0 18px;font-size:15px}
.solo-chico{display:none}
/* migas */
.migas{padding-top:18px}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:14px;color:var(--gris)}
.migas li+li::before{content:"/";margin-right:6px;color:var(--linea)}
.migas a{text-decoration:none}
.migas a:hover{text-decoration:underline}
/* inicio */
.hero{padding:clamp(28px,5vw,56px) 0 clamp(48px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.eyebrow{display:inline-block;font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--woop);margin-bottom:14px}
.eyebrow.claro{color:var(--lima)}
.hero h1{font-size:clamp(32px,3.5vw,50px)}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--tinta-2);margin:20px 0 0;max-width:58ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.prueba{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:15px;color:var(--tinta-2)}
.prueba i{width:8px;height:8px;border-radius:50%;background:#17804F;box-shadow:0 0 0 4px #E3F4EA;flex:none}
.insignias{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.insignias span{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-right:2px}
.insignias img{height:40px;width:auto}
/* la tarjeta */
.escena-tj{margin:0;justify-self:center;width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
.aviso-tj{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.96);border-radius:18px;padding:12px 14px;box-shadow:var(--sombra);font-size:14px;line-height:1.4;margin:0 12px;transform:rotate(-1deg)}
.aviso-tj small{color:var(--gris);font-size:12px}
.aviso-ic{width:34px;height:34px;border-radius:10px;background:var(--tinta);color:#fff;display:grid;place-items:center;flex:none}
.aviso-ic .ic{width:18px;height:18px}
.tj{background:var(--fondo);color:var(--texto);border-radius:22px;padding:20px;box-shadow:var(--sombra-alta);transform:rotate(1.5deg)}
.tj-cab{display:flex;align-items:center;gap:10px}
.tj-cab b{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tj-logo{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--texto) 14%,transparent);display:grid;place-items:center;flex:none}
.tj-logo .ic{width:18px;height:18px}
.tj-cuenta{text-align:right;font:600 20px/1 'JetBrains Mono',monospace}
.tj-cuenta small,.tj-pie small{display:block;font:500 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.tj-sellos{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;margin:18px 0}
.s{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--texto) 38%,transparent);display:grid;place-items:center}
.s.lleno{background:var(--sello);box-shadow:none;color:var(--sello-tx)}
.s .ic{width:52%;height:52%}
.tj-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.tj-pie b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tj-qr{width:46px;height:46px;border-radius:10px;background:#fff;color:#15161C;display:grid;place-items:center}
.tj-qr .ic{width:30px;height:30px}
/* secciones */
.sec{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--linea)}
.sec h2{font-size:clamp(26px,3.2vw,40px)}
.sec-chica{padding:28px 0}
.sec-chica .nota-demo{margin:0}
.bajada{color:var(--gris);font-size:18px;margin:12px 0 0;max-width:62ch}
.parrafo{font-size:18px;color:var(--tinta-2);max-width:66ch}
.usos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:28px}
.uso{background:var(--blanco);border-radius:20px;padding:22px;box-shadow:var(--sombra)}
.uso-ic{width:42px;height:42px;border-radius:12px;background:#FFF1EA;color:var(--woop);display:grid;place-items:center;margin-bottom:14px}
.uso h3{font-size:18px;line-height:1.3;margin:0 0 6px}
.uso p{margin:0;color:var(--gris);font-size:16px}
.pasos{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:paso}
.pasos li{background:var(--blanco);border-radius:20px;padding:22px;box-shadow:var(--sombra);position:relative}
.pasos li::before{counter-increment:paso;content:counter(paso);position:absolute;top:18px;right:20px;font:600 13px/1 'JetBrains Mono',monospace;color:var(--gris)}
.paso-ic{width:42px;height:42px;border-radius:12px;background:var(--tinta);color:#fff;display:grid;place-items:center;margin-bottom:14px}
.pasos h3{font-size:18px;margin:0 0 6px}
.pasos p{margin:0;color:var(--gris);font-size:16px}
.nota-demo{margin:22px 0 0}
.nota-demo a{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--cobalto)}
.nota-demo a:hover{text-decoration:underline}
.flecha{width:18px;height:18px}
/* comparar y tabla */
.comparar,.tabla{margin-top:28px;background:var(--blanco);border-radius:20px;box-shadow:var(--sombra);overflow:hidden}
.cmp-fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cmp-fila>span{padding:16px 20px;border-top:1px solid var(--linea);font-size:16px}
.cmp-cab>span{border-top:0;font:600 12px/1.3 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);background:#FAFAF7}
.cmp-a{color:var(--gris)}
.cmp-b{display:flex;gap:10px;align-items:flex-start;font-weight:500;background:#FCFCFA}
.cmp-b .ic{width:18px;height:18px;color:#17804F;margin-top:3px}
.tb-fila{display:grid;grid-template-columns:minmax(0,1.2fr) 110px minmax(0,1.4fr)}
.tb-fila>span{padding:15px 20px;border-top:1px solid var(--linea);font-size:16px}
.tb-cab>span{border-top:0;font:600 12px/1.3 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);background:#FAFAF7}
.tb-fila a{font-weight:600;color:var(--cobalto);text-decoration:none}
.tb-fila a:hover{text-decoration:underline}
.num{font-family:'JetBrains Mono',monospace}
/* rubros */
.rubros-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:28px}
.rubro-link{display:flex;align-items:center;gap:14px;background:var(--blanco);border-radius:18px;padding:16px 18px;box-shadow:var(--sombra);text-decoration:none;transition:transform .15s ease}
.rubro-link:hover{transform:translateY(-2px)}
.rubro-link>span:nth-child(2){flex:1;min-width:0}
.rubro-link b{display:block;font-size:16px;line-height:1.3}
.rubro-link small{display:block;color:var(--gris);font-size:14px;margin-top:2px}
.rubro-ic{width:42px;height:42px;border-radius:12px;background:#FFF1EA;color:var(--woop);display:grid;place-items:center;flex:none}
.rubro-link .flecha{color:var(--gris)}
/* receta */
.receta{background:var(--tinta);color:#fff;border-radius:24px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.receta h2{font-size:clamp(24px,2.8vw,34px);color:#fff}
.receta p{color:#B9BCC6;margin:14px 0 0}
.receta dl{margin:0;display:grid;gap:10px}
.receta dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.07)}
.receta dt{color:#B9BCC6;font-size:15px}
.receta dd{margin:0;font-weight:600;text-align:right}
/* preguntas */
.faq{margin-top:24px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:600;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.mas{width:24px;height:24px;flex:none;position:relative}
.mas::before,.mas::after{content:"";position:absolute;left:5px;right:5px;top:11px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease}
.mas::after{transform:rotate(90deg)}
.faq details[open] .mas::after{transform:rotate(0)}
.faq details p{margin:0 0 20px;color:var(--tinta-2);max-width:68ch}
/* cierre y pie */
.cierre{background:var(--tinta);color:#fff;padding:clamp(56px,8vw,96px) 0;text-align:center}
.cierre h2{font-size:clamp(28px,3.6vw,46px);color:#fff;max-width:20ch;margin:0 auto}
.cierre p{color:#B9BCC6;margin:16px auto 28px;max-width:52ch}
.pie{padding:48px 0 40px;font-size:15px}
.pie-arriba{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pie-marca p{color:var(--gris);margin:10px 0 0;max-width:34ch}
.pie-mapa{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:8px 28px;align-content:start}
.pie-mapa b{grid-column:1 / -1;font-size:13px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:500}
.pie-mapa a{text-decoration:none;color:var(--tinta-2)}
.pie-mapa a:hover{color:var(--woop)}
.pie-abajo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid var(--linea);color:var(--gris)}
.pie-legales{display:flex;flex-wrap:wrap;gap:8px 20px}
.pie-legales a{text-decoration:none}
.pie-legales a:hover{text-decoration:underline}
.pie-firma a{font-weight:700;color:var(--tinta-2);text-decoration:none}
@media (max-width:980px){.nav-links{display:none}.btn-nav{margin-left:auto}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .escena-tj{width:min(360px,100%)}
  .pasos{grid-template-columns:minmax(0,1fr)}
  .receta{grid-template-columns:minmax(0,1fr)}
  .tb-fila{grid-template-columns:minmax(0,1fr) 80px minmax(0,1.2fr)}
  .tb-fila>span{padding:13px 14px;font-size:15px}
}
@media (max-width:560px){
  body{font-size:16px}
  .solo-grande{display:none}.solo-chico{display:inline}
  .ctas .btn{width:100%}
  .cmp-fila{grid-template-columns:minmax(0,1fr)}
  .cmp-cab{display:none}
  .cmp-a{border-top:1px solid var(--linea);padding-bottom:4px!important;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--gris) 50%,transparent)}
  .cmp-b{border-top:0!important;padding-top:4px!important;background:none}
  .rubros-grid{grid-template-columns:minmax(0,1fr)}
  .pie-mapa{grid-template-columns:minmax(0,1fr)}
  .receta dl div{flex-direction:column;gap:2px}
  .receta dd{text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.rubro-link,.mas::before,.mas::after{transition:none}}