/* Nueva Dermo · sitio en HTML puro. Estética: noche de estudio, neón rosa y dorado (como las portadas). */
:root{
  --negro:#0a0709; --panel:#140f12; --panel2:#1c1519; --linea:#2c2228;
  --texto:#f6efe9; --suave:#b9aaa3; --rosa:#ff3d8f; --rosa2:#ff79b0; --oro:#ffd23f; --oro2:#ffb800;
  --ok:#5fe0a0; --alerta:#ff8a3d; --rojo:#ff5a6a;
  --radio:18px; --sombra:0 30px 80px -20px #000c;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--negro);color:var(--texto);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.anton{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.3px;line-height:1;text-wrap:balance;margin:0}
.oro{color:var(--oro)} .rosa{color:var(--rosa)}
.envoltura{max-width:1200px;margin:0 auto;padding-inline:max(18px,env(safe-area-inset-left,0px))}
.etiqueta{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 Inter;letter-spacing:2px;text-transform:uppercase;color:var(--rosa)}
.etiqueta::before{content:"";width:22px;height:2px;background:currentColor}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:800 15px/1 Inter;border-radius:999px;padding:16px 26px;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}
.boton:active{transform:scale(.97)}
.boton.oro{background:linear-gradient(180deg,#ffe07a,var(--oro) 40%,var(--oro2));color:#1a1206;box-shadow:0 10px 30px -8px #ffd23f88}
.boton.oro:hover{box-shadow:0 14px 40px -6px #ffd23faa}
.boton.rosa{background:var(--rosa);color:#fff;box-shadow:0 10px 30px -8px #ff3d8f99}
.boton.borde{background:transparent;color:var(--texto);border:1.5px solid #ffffff33}
.boton.borde:hover{border-color:var(--oro);color:var(--oro)}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:#0a0709cc;border-bottom:1px solid #ffffff10}
.barra .envoltura{display:flex;align-items:center;gap:20px;height:66px}
.logo{font-family:Anton;font-size:24px;letter-spacing:.5px;text-decoration:none}
.logo b{color:var(--rosa);font-weight:400}
.barra nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:14px;color:var(--suave)}
.barra nav a{text-decoration:none} .barra nav a:hover{color:var(--texto)}
.btn-carrito{position:relative;background:#ffffff10;border:1px solid #ffffff1c;color:var(--texto);border-radius:999px;padding:10px 16px;font:700 14px Inter;cursor:pointer;display:flex;gap:8px;align-items:center}
.btn-carrito .n{background:var(--rosa);color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;padding:0 6px}
.btn-carrito.salta{animation:salta .5s}
@keyframes salta{30%{transform:scale(1.15)}60%{transform:scale(.95)}}
@media (max-width:720px){.barra nav{display:none}.btn-carrito{margin-left:auto}}

/* ---------- carrito ---------- */
.velo{position:fixed;inset:0;background:#000a;z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
.velo.abierto{opacity:1;pointer-events:auto}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--panel);z-index:61;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;border-left:1px solid var(--linea)}
.cajon.abierto{transform:none}
.cajon header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px}
.cajon header h3{font-size:30px}
.cerrar{background:#ffffff12;border:0;color:var(--texto);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:18px}
.cajon .items{flex:1;overflow:auto;padding:0 22px;display:flex;flex-direction:column;gap:12px}
.item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--panel2);border-radius:14px;padding:10px}
.item img{width:64px;height:64px;object-fit:cover;border-radius:10px;background:#fff1}
.item .n{font-size:14px;font-weight:600;line-height:1.3}
.item .p{color:var(--oro);font-weight:800;font-size:14px}
.cant{display:flex;align-items:center;gap:6px}
.cant button{width:28px;height:28px;border-radius:50%;border:1px solid #ffffff25;background:transparent;color:var(--texto);cursor:pointer;font-weight:800}
.cant span{min-width:18px;text-align:center;font-weight:700}
.vacio{color:var(--suave);text-align:center;padding:40px 10px}
.cajon footer{padding:18px 22px 24px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:12px}
.total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.total b{font-family:Anton;font-size:30px;color:var(--oro);font-weight:400}
.cajon form{display:flex;flex-direction:column;gap:10px}
.cajon input,.cajon select,.cajon textarea{background:var(--negro);border:1px solid var(--linea);border-radius:12px;color:var(--texto);padding:12px 14px;font:15px Inter;width:100%}
.cajon textarea{resize:vertical;min-height:56px}
.nota-chica{font-size:12.5px;color:var(--suave);line-height:1.45}
.aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--texto);color:#111;font-weight:700;padding:12px 20px;border-radius:999px;z-index:70;transition:transform .3s;box-shadow:var(--sombra);font-size:14px}
.aviso.ver{transform:translate(-50%,0)}

/* ---------- producto ---------- */
.producto{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.producto:hover{transform:translateY(-4px);border-color:#ff3d8f55}
.producto .foto{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#3a1f2c,#140f12);overflow:hidden}
.producto .foto img{width:100%;height:100%;object-fit:cover}
.producto .info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.producto .nom{font-weight:700;font-size:14.5px;line-height:1.3}
.producto .pre{font-family:Anton;font-size:24px;color:var(--oro);margin-top:auto}
.producto .agregar{background:#ffffff10;border:1px solid #ffffff22;color:var(--texto);border-radius:999px;padding:10px;font:700 13.5px Inter;cursor:pointer;transition:background .2s}
.producto .agregar:hover{background:var(--rosa);border-color:var(--rosa)}
.producto .agregar.listo{background:var(--ok);color:#06150e;border-color:var(--ok)}
.chip-prod{display:inline-flex;align-items:center;gap:10px;background:#ffffff0c;border:1px solid #ffffff1a;border-radius:999px;padding:6px 8px 6px 6px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--texto);transition:border-color .2s}
.chip-prod img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff2}
.chip-prod .mas{background:var(--rosa);color:#fff;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800}
.chip-prod:hover{border-color:var(--rosa)}
.chip-prod.listo .mas{background:var(--ok);color:#06150e}

/* ---------- burbuja «Preguntale a Maxi» ---------- */
.maxi-burbuja{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:50;width:68px;height:68px;border-radius:50%;border:3px solid var(--oro);padding:0;cursor:pointer;background:var(--rosa);box-shadow:0 12px 34px -6px #ff3d8faa;transition:transform .2s}
.maxi-burbuja:hover{transform:scale(1.07)}
.maxi-burbuja img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.maxi-burbuja::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid #ff3d8f88;animation:latido 2.2s infinite}
@keyframes latido{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.maxi-burbuja .punto{position:absolute;right:2px;bottom:4px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:2px solid var(--negro)}
.maxi-burbuja .globito{position:absolute;right:82px;top:50%;transform:translate(10px,-50%);opacity:0;pointer-events:none;white-space:nowrap;background:var(--texto);color:#111;font:600 14px Inter;padding:10px 14px;border-radius:14px 14px 4px 14px;box-shadow:var(--sombra);transition:.35s}
.maxi-burbuja.saluda .globito{opacity:1;transform:translate(0,-50%)}
.maxi-burbuja.oculta{transform:scale(0);pointer-events:none}
.maxi-chat{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:55;width:min(380px,calc(100vw - 32px));height:min(580px,calc(100vh - 32px));background:var(--panel);border:1px solid var(--linea);border-radius:22px;box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:.25s;transform-origin:bottom right}
.maxi-chat.abierto{transform:none;opacity:1;pointer-events:auto}
.maxi-chat header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(120deg,#ff3d8f,#b8236a)}
.maxi-chat header img{width:44px;height:44px;border-radius:50%;border:2px solid var(--oro)}
.maxi-chat header b{display:block;font-size:15px}
.maxi-chat header small{font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px}
.maxi-chat header small i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.maxi-chat header .cerrar{margin-left:auto;background:#0003}
.maxi-chat .cuerpo{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.maxi-chat .msj{background:var(--panel2);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:14.5px;max-width:88%;line-height:1.45}
.maxi-chat .msj.yo{align-self:flex-end;background:var(--rosa);border-radius:16px 16px 4px 16px}
.maxi-chat .faq{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.maxi-chat .faq button{text-align:left;background:transparent;border:1px solid #ffffff22;color:var(--texto);border-radius:12px;padding:9px 12px;font:600 13.5px Inter;cursor:pointer}
.maxi-chat .faq button:hover{border-color:var(--oro);color:var(--oro)}
.maxi-chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--linea)}
.maxi-chat input{flex:1;background:var(--negro);border:1px solid var(--linea);border-radius:999px;color:var(--texto);padding:12px 16px;font:15px Inter;min-width:0}
.maxi-chat form button{width:46px;height:46px;border-radius:50%;border:0;background:var(--oro);color:#1a1206;font-size:18px;cursor:pointer}
@media (max-width:520px){.maxi-burbuja .globito{display:none}}

/* ---------- envío gratis en el carrito ---------- */
.envio{background:var(--panel2);border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600}
.envio .barrita{height:6px;background:#ffffff14;border-radius:99px;margin-top:8px;overflow:hidden}
.envio .barrita i{display:block;height:100%;background:linear-gradient(90deg,var(--rosa),var(--oro));transition:width .4s}
.envio.listo{color:var(--ok)}

/* ---------- grilla de productos (todas las páginas) ---------- */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
@media (max-width:560px){.grilla{grid-template-columns:1fr 1fr;gap:12px}.producto .info{padding:12px}.producto .nom{font-size:13.5px}.producto .pre{font-size:21px}}
.producto .foto{position:relative}
.producto .foto.sinfoto::after{content:attr(data-letra);position:absolute;inset:0;display:grid;place-items:center;font-family:Anton;font-size:64px;color:#ff3d8f55}
.producto .cat{font:700 11px Inter;letter-spacing:1.5px;text-transform:uppercase;color:var(--rosa2)}

/* ---------- testimonios ---------- */
.testis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.testi{margin:0;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.testi:hover{transform:translateY(-4px);border-color:#ff3d8f66}
.testi-video{position:relative;aspect-ratio:9/14;background:#000;cursor:pointer;overflow:hidden}
.testi-video video{width:100%;height:100%;object-fit:cover;display:block}
.testi-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:#ffd23fee;color:#1a1206;display:grid;place-items:center;font-size:22px;box-shadow:0 0 0 10px #ffd23f33;transition:.2s}
.testi-video.sonando .testi-play{opacity:0}
.testi figcaption{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.testi blockquote{margin:0;font-weight:700;font-size:16px;line-height:1.4}
.testi figcaption span{color:var(--rosa2);font:700 12px Inter;letter-spacing:1px;text-transform:uppercase}
.estrellas{color:var(--oro);letter-spacing:3px}
@media (max-width:560px){.testis{grid-template-columns:1fr 1fr;gap:12px}.testi blockquote{font-size:14px}}

/* Carrito: vaciar, quién pide y dirección (9/11/2026) */
.cajon .cab-der{display:flex;align-items:center;gap:8px}
.cajon .vaciar{background:none;border:1px solid var(--linea);color:var(--suave);border-radius:99px;padding:8px 12px;font:600 12.5px Inter;cursor:pointer}
.cajon .vaciar:hover{color:var(--texto);border-color:#ffffff44}
.cajon .vaciar.seguro{border-color:var(--rosa);color:#fff;background:#ff3d8f22}
.cajon .quien{margin:0;font-size:14px;color:var(--suave)}.cajon .quien b{color:var(--texto)}
.cajon .dir,.cajon .dir-campos,.cajon .dir-buscar{display:flex;flex-direction:column;gap:10px;position:relative}
.cajon .dir[hidden],.cajon .dir-campos[hidden],.cajon .dir-buscar[hidden]{display:none}
.cajon .dir-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cajon .dir-mano{font-size:12.5px;color:var(--suave);align-self:flex-start}
.cajon .dir-buscar.mano .dir-mano{display:none}
.cajon .lugares{position:absolute;left:0;right:0;top:48px;z-index:3;list-style:none;margin:0;padding:6px;background:var(--panel2);border:1px solid var(--linea);border-radius:12px;max-height:240px;overflow:auto}
.cajon .lugares li{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.cajon .lugares li:hover{background:#ffffff12}.cajon .lugares li small{color:var(--suave)}
.cajon .lugares li.estado{cursor:default;color:var(--suave)}.cajon .lugares li.estado:hover{background:none}
.cajon form :disabled{opacity:.45}
.cajon [hidden]{display:none!important}
.cajon{overflow-y:auto}.cajon .items{min-height:190px}

/* Íconos, sede y ficha del pedido (9/11/2026) */
.ico{width:1.1em;height:1.1em;vertical-align:-.17em;flex:none}
.agregar .ico,.boton .ico{margin-right:2px}
.cajon .item .ver{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cajon .item .ver.txt{min-width:0}.cajon .item .ver:hover .n{color:var(--oro)}
.ficha-pedido{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:#0a0709d9;backdrop-filter:blur(6px)}
.ficha-pedido[hidden]{display:none}
.ficha-pedido .caja{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:760px;background:#150b11;border:1px solid #ffffff1a;border-radius:22px;overflow:hidden}
.ficha-pedido .cerrar{position:absolute;right:12px;top:12px;z-index:2}
.fp-img{background:#0a0709;min-height:300px}.fp-img img{width:100%;height:100%;object-fit:cover;display:block}
.fp-info{padding:26px 22px;display:flex;flex-direction:column;gap:12px;justify-content:center;min-width:0}
.fp-info h3{font-size:clamp(24px,3vw,32px);line-height:1.05;padding-right:36px}
.fp-precio{font:400 34px Anton,Impact,sans-serif;color:var(--oro)}
.fp-cant{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--suave);font-size:14px}
.fp-sub{margin:0;color:var(--suave);font-size:14px}.fp-sub b{color:var(--texto)}
.fp-quitar{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:none;border:1px solid var(--linea);color:var(--suave);border-radius:99px;padding:9px 14px;font:600 13px Inter;cursor:pointer}
.fp-quitar:hover{color:#fff;border-color:var(--rosa)}
.fp-preg{display:inline-flex;align-items:center;gap:6px;color:var(--oro);font-weight:700;font-size:13.5px;text-decoration:none}
@media (max-width:640px){.ficha-pedido .caja{grid-template-columns:1fr}.fp-img{min-height:0;aspect-ratio:4/3}}
/* Instagram de cada alumna en su testimonio (9/11/2026) */
.testi-ig{align-self:flex-start;color:var(--oro);font:700 13px Inter;text-decoration:none;border:1px solid #ffd23f44;border-radius:99px;padding:4px 10px}
.testi-ig:hover{background:#ffd23f18}