/* ====================================================================
   PROPUESTA G · EL CUADERNO + RANKING K
   Hereda TODO el tema D (cuaderno: papel, marcador, polaroids) y cambia
   solo la portada: la lámina "RANKING K · Expertos del Cuidado" pegada
   con cinta en la página y los productos orbitando alrededor (se pausan
   con el mouse). Nada del tema D se modifica: se importa tal cual.
==================================================================== */
@import url("tema-d.css");

/* ---------- PORTADA · rejilla más ancha a la derecha para la lámina + órbita ---------- */
.tema-g .h-grid{grid-template-columns:.92fr 1.08fr;gap:30px}
.tema-g .hero h1{font-size:clamp(24px,2.9vw,36px);max-width:520px}
.tema-g .h-logo{width:min(430px,100%)}

/* laboratorio = lámina al centro + productos orbitando (posiciones las calcula tema-g.js) */
.h-lab{position:relative;width:100%;min-height:600px;display:flex;align-items:center;justify-content:center}
.h-lab.pausa .h-orb{filter:saturate(1.1)}
.h-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;pointer-events:none;overflow:visible}
.h-ring ellipse{fill:none;stroke:var(--tinta);stroke-width:1.5;stroke-dasharray:6 9;opacity:.28}
.h-orb{position:absolute;left:50%;top:50%;width:96px;margin:0;will-change:transform;filter:drop-shadow(0 16px 22px rgba(43,36,32,.28));transition:filter .3s;pointer-events:none}
.h-orb.frente{pointer-events:auto;cursor:default}
.h-orb:hover{filter:drop-shadow(0 22px 28px rgba(43,36,32,.35)) brightness(1.04)}

/* la lámina: réplica de la referencia (degradado azul→verde, cristal) pegada con cinta */
.h-glass{position:relative;z-index:5;width:380px;border-radius:22px;padding:26px 18px 40px; /* margen inferior amplio: por ahí pasan los productos del frente */text-align:center;color:#fff;
 background:radial-gradient(140% 120% at 14% -20%,rgba(255,255,255,.28),rgba(255,255,255,0) 52%),linear-gradient(160deg,#0b47b8 0%,#1266cf 45%,#22b07f 100%);
 box-shadow:0 30px 60px rgba(43,36,32,.28),inset 0 1px 0 rgba(255,255,255,.6);transform:rotate(-1.6deg);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;overflow:visible}
.h-glass::before{content:"";position:absolute;inset:0;border-radius:22px;background:radial-gradient(rgba(255,255,255,.2) 1.2px,transparent 1.7px) 0 0/20px 20px;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 50% 50% at 100% 0%,#000,transparent 70%);pointer-events:none}
.h-glass::after{content:"";position:absolute;inset:0;border-radius:22px;border:1px solid rgba(255,255,255,.45);pointer-events:none}
.h-lab:hover .h-glass{transform:rotate(0) scale(1.02);box-shadow:0 40px 80px rgba(43,36,32,.32),inset 0 1px 0 rgba(255,255,255,.6)}
.h-glass .tape{top:-13px;z-index:6}
.hg-t{font-family:var(--f-d);font-weight:900;font-size:19px;letter-spacing:.2px;position:relative}
.hg-t span{color:#ffd166}
/* AJUSTE: la lámina lleva solo el título y un chip mínimo con el periodo (acumulado / mes) */
.hg-per{display:inline-block;margin-top:8px;font-size:9.5px;letter-spacing:2px;font-weight:800;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:3px 10px;position:relative}

/* mini podio dentro de la lámina: look de la referencia (medallas con trofeo, tarjetas blancas, bases degradadas) */
.h-glass .podio{gap:8px;padding-top:34px;max-width:none;position:relative}
.h-glass .pd-med{width:50px;height:50px;font-size:22px;margin-bottom:-16px;border:none;box-shadow:0 12px 28px rgba(6,30,90,.4),inset 0 -6px 12px rgba(0,0,0,.18),inset 0 6px 12px rgba(255,255,255,.4)}
.h-glass .pd1 .pd-med{width:60px;height:60px;font-size:28px}
.h-glass .pd-med i{display:none}
.h-glass .pd-med::after{content:"";position:absolute;top:-19px;left:50%;width:24px;height:26px;transform:translateX(-50%);background:url('../img/iconos3d/trofeo.webp') center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.h-glass .pd1 .pd-med::after{width:28px;height:30px;top:-22px}
.h-glass .pd-card{background:linear-gradient(180deg,rgba(255,255,255,.97),#eef6ff);color:#0f2a5c;border:none;box-shadow:0 16px 36px rgba(6,30,90,.3);border-radius:14px;padding:22px 6px 9px}
.h-glass .pd-card::before{display:none}
.h-glass .pd-nom{font-size:11.5px;color:#0f2a5c;margin:8px 0 2px}
.h-glass .pd-card small{font-size:9.5px;color:#5b6b85}
.h-glass .pd-card em{font-size:9.5px;margin-top:6px;color:#0f2a5c}
.h-glass .pd-card em strong{color:#0b3ea8}
.h-glass .pd-pts{display:none}
.h-glass .pd-lbl{font-family:var(--f-d);font-size:9.5px;padding:4px 8px;background:#2f7bff;letter-spacing:1.2px}
.h-glass .pd1 .pd-lbl{background:linear-gradient(90deg,#1e56d6,#2f7bff)}
.h-glass .pd-base{background:linear-gradient(180deg,#2f7bff,#1ea08a);border:none;border-radius:12px 12px 0 0;background-image:none;box-shadow:0 -10px 40px rgba(6,30,90,.25),inset 0 6px 12px rgba(255,255,255,.3)}
.h-glass .pd1 .pd-base{background:linear-gradient(180deg,#1e56d6,#22b07f);background-image:none}
.h-glass .pd-base i{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)}
.h-glass .pd1 .pd-base{--h:58px}.h-glass .pd2 .pd-base{--h:40px}.h-glass .pd3 .pd-base{--h:28px}

@media(max-width:1180px){.h-glass{width:350px}.h-orb{width:84px}}
@media(max-width:960px){.tema-g .h-grid{grid-template-columns:1fr}.h-lab{max-width:600px;margin:0 auto}}
@media(max-width:640px){
 .h-lab{min-height:0;padding:10px 0}
 .h-glass{width:min(340px,86vw);padding:20px 12px 20px;transform:rotate(-1deg)}
 /* en celular no cabe la órbita alrededor de la lámina: se muestra solo la lámina (los productos siguen en la banda de marcas) */
 .h-orb,.h-ring{display:none}
 /* a esta anchura base.css apila el podio en filas: se ajusta el mini podio */
 .h-glass .podio{gap:8px;padding-top:12px}
 .h-glass .pd{gap:8px}
 .h-glass .pd-med{width:44px!important;height:44px!important;font-size:20px!important}
 .h-glass .pd-med::after{display:none}
 .h-glass .pd-card{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){.h-glass{transform:none}.h-lab:hover .h-glass{transform:none}}