:root{--azul:#192584;--azul2:#26339A;--celeste:#4FD2E9;--amarillo:#FFCA1F;--violeta:#8A1FC9;--plomo:#5B6478;--fondo:#EDFAFD;--suave:#FFF6D9;--linea:#D5E6EC;--wa:#0E7A41}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--azul);background:#fff;font-size:16px;line-height:1.6}
h1,h2,h3,b,strong,.btn,.chip,.menu button,.precio,.tag,.lab,header,footer b,.adminbar,.toast,.fabtip b{font-family:Montserrat,Arial,sans-serif}
b,strong{font-weight:600}h3{font-weight:700}.btn,.chip,.menu button{font-weight:600!important}
.ic{color:var(--azul);flex:none;vertical-align:-.18em}
.btn .ic,.chip .ic,.tag .ic,footer .ic,.titic .ic{color:inherit}
.titic{display:flex;gap:8px;align-items:center}.icf{color:#192584!important}body.oscuro .ic:not(.icf){color:#7FE0F0}body.oscuro .btn .ic,body.oscuro .chip .ic,body.oscuro .tag .ic,body.oscuro footer .ic{color:inherit}
a{color:var(--azul)}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{font-family:inherit;font-size:14px;font-weight:700;padding:10px 18px;min-height:44px;border-radius:999px;cursor:pointer;border:2px solid var(--azul);background:#fff;color:var(--azul);display:inline-flex;align-items:center;gap:8px;text-decoration:none;justify-content:center}
.btn.az{background:var(--azul);color:#fff}.btn.am{background:var(--amarillo);border-color:var(--amarillo)}.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn.sm{min-height:34px;padding:6px 12px;font-size:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sec{padding:56px 0}
.sec h2{font-size:30px;margin:0 0 6px;font-weight:800}
.sub{color:var(--plomo);margin:0 0 26px}
.barra{width:70px;height:5px;background:var(--amarillo);border-radius:3px;margin:8px 0 18px}
.card{background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}

.card .cu{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:44px;color:#fff;position:relative;overflow:hidden;background-size:cover;background-position:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--linea);background:#fff;font-weight:700;font-size:13px;cursor:pointer;color:var(--azul);font-family:inherit;min-height:40px}
.chip.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.campo{width:100%;font-family:inherit;font-size:15px;color:var(--azul);border:1.5px solid #B9D3DC;border-radius:14px;padding:11px 12px;background:#fff}
.lab{display:block;font-size:12px;font-weight:700;color:var(--plomo);margin-bottom:5px;letter-spacing:.3px}
.nota{font-size:12px;color:var(--plomo)}
.estrellas{color:#F5A623;font-size:14px;letter-spacing:1px}
.precio{font-size:20px;font-weight:800}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--fondo);color:var(--azul)}
/* botones: animación y color al pasar y al presionar */
.btn{transition:transform .18s ease,background-color .18s,color .18s,border-color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px) scale(1.04);background:var(--azul)!important;color:#fff!important;border-color:var(--azul)!important;box-shadow:0 8px 18px rgba(25,37,132,.25)}
.btn.az:hover{background:var(--celeste)!important;border-color:var(--celeste)!important;color:var(--azul)!important}
.btn.am:hover{background:var(--azul)!important;border-color:var(--azul)!important;color:#fff!important}
.btn.wa:hover{background:#0B6B39!important;border-color:#0B6B39!important;color:#fff!important;box-shadow:0 8px 18px rgba(14,122,65,.4)}
.btn:active,.btn.az:active,.btn.am:active{transform:scale(.96);background:var(--amarillo)!important;border-color:var(--amarillo)!important;color:var(--azul)!important;box-shadow:none}
.btn.wa:active{background:#09582F!important;border-color:#09582F!important;color:#fff!important}
.btn:focus-visible,.chip:focus-visible,.menu button:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}
.chip{transition:transform .18s,background-color .18s,border-color .18s,color .18s}
.chip:hover{transform:scale(1.05);border-color:var(--celeste);background:var(--fondo)}
.chip.on:hover{background:var(--azul2);color:#fff}
.chip:active{transform:scale(.95);background:var(--amarillo);border-color:var(--amarillo);color:var(--azul)}
.menu button{position:relative;transition:background-color .18s,color .18s}
.menu button::after{content:'';position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:2px;background:var(--celeste);transform:scaleX(0);transition:transform .2s}
.menu button:hover::after,.menu button.on::after{transform:scaleX(1)}
.menu button.on::after{background:var(--amarillo)}
.menu button:active{background:var(--suave)}
.fab{transition:transform .2s}.fab:hover{transform:scale(1.12)}.fab:active{transform:scale(.94);background:#128C4B}
.fab::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:pulso 2.2s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.6);opacity:0}}
footer a{transition:color .15s}footer a:hover{color:var(--amarillo)}
.engranaje{position:fixed;left:18px;bottom:18px;z-index:50;width:50px;height:50px;border-radius:50%;border:2px solid var(--azul);background:#fff;color:var(--azul);font-size:24px;cursor:pointer;box-shadow:0 6px 16px rgba(25,37,132,.25);transition:transform .3s,background-color .2s}
.engranaje:hover{transform:rotate(90deg) scale(1.08);background:var(--azul);color:#fff}.engranaje:active{background:var(--amarillo);color:var(--azul)}
@media (prefers-reduced-motion:reduce){.btn:hover,.chip:hover,.fab:hover{transform:none}.fab::before{animation:none}}
#emo{position:fixed;right:16px;top:70px;bottom:16px;width:300px;max-width:calc(100vw - 32px);z-index:65;background:#fff;border:1px solid var(--linea);border-top:5px solid var(--celeste);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);padding:14px;display:none;flex-direction:column;gap:4px;overflow:auto}
.emogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.emogrid button{font-size:20px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:4px 0;min-height:34px;transition:transform .12s,background-color .12s}.emogrid button:hover{background:var(--fondo);transform:scale(1.25)}.emogrid button:active{background:var(--amarillo)}
.icobtn{font-family:inherit;font-size:inherit;border:2px dashed var(--celeste);background:#fff;border-radius:14px;padding:2px 6px;cursor:pointer;color:var(--azul);line-height:1.2}.icobtn:hover{background:var(--fondo);border-style:solid}
#emobub{position:fixed;z-index:64;display:none;font-family:inherit;font-weight:700;font-size:13px;border:none;border-radius:999px;padding:6px 12px;background:var(--amarillo);color:var(--azul);box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer}
#emobub:hover{background:var(--azul);color:#fff}
/* modo oscuro */
.tema{font-family:inherit;border:1.5px solid var(--linea);background:transparent;color:inherit;border-radius:999px;width:40px;height:40px;font-size:18px;cursor:pointer;flex:none;transition:transform .25s,background-color .2s}.tema:hover{transform:rotate(20deg) scale(1.1);background:var(--fondo)}.tema:active{background:var(--amarillo)}
body.oscuro{--fondo:#16204A;--linea:#2A3670;--suave:#1C2550;--plomo:#AEB6D6;background:#0D1330;color:#E6EBFF;color-scheme:dark}
body.oscuro a{color:#7FE0F0}
body.oscuro header,body.oscuro .menu.abierto,body.oscuro .card,body.oscuro .campo,body.oscuro .modal .box,body.oscuro .cookies,body.oscuro #emo,body.oscuro .chip,body.oscuro [style*="background:#fff"]:not(.badge),body.oscuro [style*="background:#F7FCFE"],body.oscuro [style*="background:#EFFBF3"]{background:#141B3D!important;color:#E6EBFF}
body.oscuro [style*="45%),#fff"]{background:radial-gradient(circle at 85% 30%,rgba(79,210,233,.16),transparent 45%),#0D1330!important}
body.oscuro [style*="rgba(255,255,255,.97) 0%"]{filter:brightness(.92)}
body.oscuro [style*="color:var(--azul)"],body.oscuro .menu button,body.oscuro .tag,body.oscuro .chip,body.oscuro .campo,body.oscuro .icobtn,body.oscuro h1,body.oscuro h2,body.oscuro h3{color:#E6EBFF!important}
body.oscuro .btn:not(.az):not(.am):not(.wa){background:transparent;color:#E6EBFF;border-color:#4FD2E9}
body.oscuro .btn.az,body.oscuro a.btn.az{background:#4FD2E9;border-color:#4FD2E9;color:#0D1330}
body.oscuro .btn.am,body.oscuro a.btn.am{color:#192584}body.oscuro a.btn.wa{color:#fff}body.oscuro .btn.am:hover{color:#fff!important}
body.oscuro .btn.az:hover{background:#FFCA1F!important;border-color:#FFCA1F!important}
body.oscuro .chip.on{background:#4FD2E9!important;color:#0D1330!important;border-color:#4FD2E9}
body.oscuro .tag{background:#1E2A5E}
body.oscuro .campo{border-color:#3A4A8A}
body.oscuro .engranaje{background:#141B3D;color:#E6EBFF;border-color:#4FD2E9}
body.oscuro .badge{box-shadow:0 0 0 1px rgba(255,255,255,.2)}
body.oscuro .icobtn{background:#141B3D}
body.oscuro [style*="background:#E7F9EE"]{background:#12301F!important}
body.oscuro footer{background:#080C22;border-top:3px solid #4FD2E9;color:#C9D2FF}
body.oscuro footer a{color:#E6EBFF}body.oscuro footer a:hover{color:#FFCA1F}
body.oscuro footer [style*="border-top:3px solid var(--amarillo)"]{border-top-color:#22306A!important}
body.oscuro [style*="background:var(--azul)"]{background:linear-gradient(135deg,#121A45 0%,#1A2763 100%)!important;border:1px solid #2A3670}
body.oscuro section[style*="background:var(--azul)"]{border-left:0;border-right:0;border-top:1px solid #2A3670;border-bottom:1px solid #2A3670}
body.oscuro [style*="var(--azul),#2B49B8"]{background:linear-gradient(135deg,#121A45 0%,#1D2D73 100%)!important}
body.oscuro .adminbar{background:#05081A;border-bottom:1px solid #22306A}
body.oscuro .fab{box-shadow:0 8px 20px rgba(0,0,0,.6)}
.fabtip{position:fixed;right:88px;bottom:24px;z-index:50;background:#fff;color:var(--azul);border:1px solid var(--linea);border-radius:14px 16px 4px 16px;box-shadow:0 10px 26px rgba(25,37,132,.2);padding:10px 34px 10px 14px;font-size:13px;line-height:1.35;max-width:240px}
.fabtip b{font-size:14px}.fabtip span{color:var(--plomo)}
.fabtip::after{content:'';position:absolute;right:-7px;bottom:12px;width:12px;height:12px;background:#fff;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);transform:rotate(-45deg)}
.fabtip button{position:absolute;top:4px;right:6px;border:none;background:transparent;color:var(--plomo);font-size:13px;cursor:pointer;width:24px;height:24px;border-radius:50%}.fabtip button:hover{background:var(--fondo)}
.fabtip.entra{animation:fabin .5s cubic-bezier(.2,1.4,.4,1) both}@keyframes fabin{from{opacity:0;transform:translateX(16px) scale(.9)}to{opacity:1;transform:none}}
.fabtip:hover{box-shadow:0 12px 30px rgba(25,37,132,.3)}
body.oscuro .fabtip,body.oscuro .fabtip::after{background:#141B3D;color:#E6EBFF;border-color:#2A3670}
@media (max-width:600px){.fabtip{max-width:190px;right:84px;bottom:22px}}
/* animaciones */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease,box-shadow .2s}
.rev.vis{opacity:1;transform:none}
.grid>.rev:nth-child(2),.pas .pitem:nth-child(2) .rev{transition-delay:.08s}.grid>.rev:nth-child(3),.pas .pitem:nth-child(3) .rev{transition-delay:.16s}.grid>.rev:nth-child(4),.pas .pitem:nth-child(4) .rev{transition-delay:.24s}
.card:hover,.card.rev.vis:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(25,37,132,.13);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.pas{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 16px;scrollbar-width:thin}
.pitem{flex:0 0 calc((100% - 54px)/4);scroll-snap-align:start}
@media (max-width:900px){.pitem{flex-basis:calc((100% - 18px)/2)}.hero{grid-template-columns:1fr!important}}
@media (max-width:600px){.pitem{flex-basis:82%}}
/* header */
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--linea)}
.hd{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:1180px;margin:0 auto}
.badge{width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,#fff,#EEF4FB);box-shadow:0 2px 8px rgba(25,37,132,.25),inset 0 0 0 1px rgba(25,37,132,.12);display:flex;align-items:center;justify-content:center;flex:none}
.badge img{width:38px;height:38px;object-fit:contain}
.menu{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.menu button{font-family:inherit;font-weight:700;font-size:14px;border:none;background:transparent;color:var(--azul);padding:10px 11px;border-radius:8px;cursor:pointer;min-height:42px}
.menu button.on,.menu button:hover{background:var(--fondo)}
.hamb{display:none;margin-left:auto}
/* admin */
.adminbar{position:sticky;top:0;z-index:40;background:#111A5E;color:#fff;font-size:13px}
.adminbar .in{max-width:1180px;margin:0 auto;padding:8px 20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adminbar .btn{border-color:#fff;background:transparent;color:#fff;min-height:34px;padding:5px 12px;font-size:12px}
.adminbar .btn.on{background:var(--amarillo);color:var(--azul);border-color:var(--amarillo)}
[data-edit].ed{outline:2px dashed var(--celeste);outline-offset:3px;border-radius:4px;cursor:text;min-width:20px;display:inline-block}
[data-edit].ed:focus{outline:2px solid var(--amarillo);background:rgba(255,202,31,.08)}
.edbtn{position:absolute;top:8px;right:8px;z-index:3;display:flex;gap:6px}
.edbtn button{font-family:inherit;font-size:12px;font-weight:700;border:none;border-radius:999px;padding:6px 10px;background:#fff;color:var(--azul);box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer}
.agregar{border:2px dashed var(--celeste);border-radius:14px;display:flex;align-items:center;justify-content:center;min-height:220px;font-weight:800;color:var(--azul);background:var(--fondo);cursor:pointer;font-family:inherit;font-size:15px}
.modal{position:fixed;inset:0;background:rgba(10,15,60,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:#fff;border-radius:14px;max-width:620px;width:100%;max-height:90vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--azul);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;z-index:70;box-shadow:0 8px 20px rgba(0,0,0,.25);max-width:92vw;text-align:center}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:55;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.2);padding:16px;display:flex;flex-direction:column;gap:10px}
.fab{position:fixed;right:18px;bottom:18px;z-index:50;width:58px;height:58px;border-radius:50%;background:#128C4B;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 8px 20px rgba(0,0,0,.25);text-decoration:none}
footer{background:var(--azul);color:#C9D2FF;margin-top:40px}
footer a{color:#fff;text-decoration:none}
footer .grid{padding:40px 0}
.bloque{position:relative;border-radius:14px}
.bloque.ed-on{outline:2px dashed var(--celeste);outline-offset:6px;margin:6px 0}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.menu{display:none}.menu.abierto{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:66px;background:#fff;padding:10px;border-bottom:1px solid var(--linea)}.hamb{display:inline-flex}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}.sec{padding:36px 0}.sec h2{font-size:24px}}

@media (max-width:900px){.det{grid-template-columns:1fr!important}header .hd{position:relative}}