/* ============ Sobres · inicio y bienvenida (home.js) ============ */
/* v7 "correo del cariño": papelería y correo de verdad.
   Paleta: papel #F7F4EE · tinta #22385A (botones, enlaces, titulares) · lacre #A8322D (detalles y sello)
   kraft #C7A27C (sobres) · estampilla dorada #D7A53B (puntos) · verde sello #2F6B57 (lo que ya tienes).
   Pieza firma: estampillas con borde perforado (.hm-perf, máscara con círculos), matasellos redondo (SVG)
   y franja de correo aéreo (--hm-airmail) en la cabecera y el marco del sobre de la portada.
   Fraunces para titulares, Nunito para el resto y Caveat para lo escrito a mano.
   Un solo momento animado: el sobre de la portada que se abre (heroEnvHTML).
   Modo oscuro: css/dark.css redefine --hm-paper/--hm-ink/…; aquí abajo, al final, los tokens nuevos. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');

.hm{
  /* paleta postal */
  --hm-papel:#F7F4EE;--hm-tinta:#22385A;--hm-lacre:#A8322D;--hm-kraft:#C7A27C;--hm-dorada:#D7A53B;--hm-verde:#2F6B57;
  /* tokens de uso (dark.css redefine paper/ink/ink2/hair/tint/accent/danger/ok/gold-bg/gold-hair) */
  --hm-paper:var(--hm-papel);--hm-ink:#1d2433;--hm-ink2:#5d5850;--hm-hair:#e1d8c8;--hm-tint:#efe8db;--hm-accent:var(--hm-lacre);
  --hm-danger:#b3261e;--hm-ok:var(--hm-verde);
  --hm-gold:#D7A53B;--hm-gold-2:#f3d27a;--hm-gold-3:#c39030;--hm-gold-ink:#33240a;--hm-gold-bg:#fbf1da;--hm-gold-hair:#ead29a;
  --hm-head:var(--hm-tinta);                  /* titulares */
  --hm-card:#fffdf8;                          /* papel de carta (superficies) */
  --hm-kraft-bg:#efe5d4;                      /* sección de precios */
  --hm-btn:var(--hm-tinta);--hm-btn-ink:#fff;--hm-btn-hover:#182a45;
  --hm-lacre-ink:#fff;--hm-verde-ink:#fff;
  --hm-shadow-ink:rgba(34,56,90,.32);
  --hm-pm-fill:rgba(255,253,248,.74);         /* fondo translúcido del matasellos */
  --hm-rule:rgba(34,56,90,.16);               /* renglones de la nota */
  --hm-air-gap:#fffdf8;
  --hm-airmail:repeating-linear-gradient(135deg,var(--hm-lacre) 0 12px,var(--hm-air-gap) 12px 18px,var(--hm-tinta) 18px 30px,var(--hm-air-gap) 30px 36px);
  --hm-serif:"Fraunces",Georgia,serif;--hm-sans:"Nunito",system-ui,sans-serif;--hm-hand:"Caveat","Segoe Script","Bradley Hand",cursive;
  background:var(--hm-paper);color:var(--hm-ink);font-family:var(--hm-sans);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  caret-color:var(--hm-lacre);accent-color:var(--hm-tinta);scrollbar-width:thin;scrollbar-color:var(--hm-kraft) transparent;
}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}
/* lo que no dibujamos también lleva la paleta: la selección es dorada como la estampilla, la barra de scroll kraft */
.hm ::selection{background:rgba(215,165,59,.38);color:var(--hm-ink)}
html:not([data-theme="dark"]):has(#home.show){scrollbar-color:#C7A27C #F7F4EE}
.hm :focus-visible{outline:3px solid var(--hm-tinta);outline-offset:3px}
.hm button{touch-action:manipulation}
.hm h1,.hm h2,.hm h3{font-family:var(--hm-serif);font-weight:500;letter-spacing:-.01em;margin:0;color:var(--hm-head)}
.hm h1,.hm h2{text-wrap:balance}   /* titulares sin una palabra suelta al final */
.hm p{margin:0}
.hm a{color:var(--hm-tinta)}
.hm-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media (max-width:480px){.hm-wrap{padding:0 16px}}
.hm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-hand{font-family:var(--hm-hand);font-weight:700;letter-spacing:0}

/* ===== botones ===== */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:12px;padding:12px 20px;min-height:48px;
  font:inherit;font-size:16px;font-weight:800;line-height:1.1;color:var(--hm-ink);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform .15s,background .15s,border-color .15s,color .15s,filter .15s}
.hm-btn:active{transform:scale(.98)}
.hm-btn-primary{background:var(--hm-btn);color:var(--hm-btn-ink)}
.hm-btn-primary:hover{background:var(--hm-btn-hover)}
.hm-btn-ghost{background:var(--hm-card);border-color:var(--hm-hair);color:var(--hm-tinta)}
.hm-btn-ghost:hover{border-color:var(--hm-tinta)}
.hm-btn-gold{background:linear-gradient(160deg,var(--hm-gold-2),var(--hm-gold) 65%,var(--hm-gold-3));color:var(--hm-gold-ink);border-color:rgba(51,36,10,.12)}
.hm-btn-gold:hover{filter:brightness(1.06)}
.hm-btn-danger{background:var(--hm-danger);color:#fff}
.hm-btn-danger:hover{background:#951c15}
.hm-btn-big{min-height:56px;padding:15px 26px;font-size:17px;border-radius:14px}
.hm-btn-soon,.hm-btn[disabled]{cursor:not-allowed;opacity:.6;background:var(--hm-tint);border-color:transparent;color:var(--hm-ink2)}
.hm-btn-soon:active,.hm-btn[disabled]:active{transform:none}

/* ===== piezas postales ===== */
/* Borde perforado de estampilla: círculos recortados en todo el contorno (técnica de máscara con radial-gradient).
   La sombra va en el padre con filter:drop-shadow para que siga la forma. */
.hm-perf{--r:4px;display:block;
  -webkit-mask:radial-gradient(var(--r),#0000 98%,#000) round calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)),
               linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
          mask:radial-gradient(var(--r),#0000 98%,#000) round calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)),
               linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r))}
/* Matasellos (SVG): anillo punteado + texto en círculo; hereda currentColor */
.hm-pm{display:block;width:100%;height:100%;overflow:visible}
.hm-pm-dash{fill:var(--hm-pm-fill);stroke:currentColor;stroke-width:2.5;stroke-dasharray:4 3}
.hm-pm-in{fill:none;stroke:currentColor;stroke-width:1.6}
.hm-pm-ring{font-family:var(--hm-sans);font-size:10px;font-weight:800;letter-spacing:.13em;fill:currentColor}   /* el texto da la vuelta completa al anillo */
.hm-pm-c{font-family:var(--hm-serif);font-size:14px;font-weight:600;fill:currentColor}
.hm-waves{display:block;overflow:visible}
.hm-waves path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Estampilla pequeña "10" / "20" pts (esquina de las cartas y leyenda) */
.hm-mstamp{display:inline-block;flex:none;filter:drop-shadow(0 3px 4px var(--hm-shadow-ink));transform:rotate(4deg)}
.hm-mstamp .hm-perf{--r:3px;padding:5px;background:#fffaf0}
.hm-mstamp-in{display:flex;flex-direction:column;align-items:center;justify-content:center;width:38px;height:44px;border:1px solid rgba(34,56,90,.35);color:#22385A;line-height:1}
.hm-mstamp-in b{font-family:var(--hm-serif);font-size:20px;font-weight:600}
.hm-mstamp-in small{margin-top:2px;font-size:10px;font-weight:800}
.hm-mstamp-20 .hm-perf{background:linear-gradient(160deg,#f3d27a,#D7A53B 70%,#c39030)}
.hm-mstamp-20 .hm-mstamp-in{border-color:rgba(51,36,10,.4);color:#33240a}

/* ===== cabecera fija (con franja de correo aéreo arriba) ===== */
.hm-head{position:sticky;top:0;z-index:10;background:rgba(247,244,238,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hm-head::before{content:"";display:block;height:6px;background:var(--hm-airmail)}
.hm-head.scrolled{border-bottom-color:var(--hm-hair)}
.hm-head-in{display:flex;align-items:center;gap:14px;min-height:66px}
.hm-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--hm-serif);font-size:25px;font-weight:600;letter-spacing:-.01em;color:var(--hm-head);text-decoration:none}
.hm-brand-seal{display:inline-block;flex:none;width:22px;height:22px;border-radius:47% 53% 50% 50%/52% 46% 54% 48%;
  background:radial-gradient(circle at 34% 30%,#d0635b,var(--hm-lacre) 58%,#76201c);box-shadow:inset 0 0 0 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.25)}
.hm-nav{display:flex;gap:2px;margin-left:12px}
.hm-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;color:var(--hm-ink2);font-weight:800;font-size:15px;text-decoration:none;transition:color .15s,box-shadow .15s}
.hm-nav a:hover{color:var(--hm-tinta)}
.hm-nav a.on{color:var(--hm-tinta);box-shadow:inset 0 -2px 0 var(--hm-lacre)}
.hm-head-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.hm-wallet{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px 6px 10px;border:1.5px solid var(--hm-gold-hair);border-radius:999px;
  background:var(--hm-gold-bg);font:inherit;font-size:15px;font-weight:800;color:var(--hm-ink);cursor:pointer;white-space:nowrap;transition:border-color .15s}
.hm-wallet:hover{border-color:var(--hm-gold)}
.hm-coin{font-size:18px;line-height:1}
.hm-wallet b{font-variant-numeric:tabular-nums}
.hm-wallet-u{font-weight:700;color:var(--hm-ink2)}
.hm-wallet-club{font-size:15px;line-height:1}
.hm-theme{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--hm-hair);background:var(--hm-card);font-size:18px;cursor:pointer}
.hm-theme:hover{background:var(--hm-tint)}
.hm-burger{display:none;width:46px;height:46px;flex:none;padding:0;border:1.5px solid var(--hm-hair);border-radius:12px;background:var(--hm-card);cursor:pointer;place-items:center;align-content:center;gap:5px}
.hm-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--hm-ink);transition:transform .2s,opacity .2s}
.hm-head.open .hm-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hm-head.open .hm-burger span:nth-child(2){opacity:0}
.hm-head.open .hm-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .hm-burger{display:grid}
  .hm-nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 6px);margin:0;flex-direction:column;gap:2px;padding:8px;background:var(--hm-card);border:1.5px solid var(--hm-hair);border-radius:16px;box-shadow:0 22px 44px -26px var(--hm-shadow-ink)}
  .hm-head.open .hm-nav{display:flex}
  .hm-nav a{padding:13px 14px;font-size:16px}
  .hm-nav a.on{box-shadow:inset 3px 0 0 var(--hm-lacre)}
}
@media (max-width:420px){
  .hm-head-in{gap:8px}
  .hm-brand{font-size:20px;gap:8px;white-space:nowrap}
  .hm-wallet{padding:6px 12px 6px 9px}
  .hm-wallet-u{display:none}  /* el aria-label ya dice "N puntos" */
  .hm-head-tools{gap:6px}
}

/* ===== aviso de fecha cercana (sobre el hero) ===== */
#hm-alert:not(:empty)+.hm-hero{padding-top:24px}
.hm-alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding:12px 14px 12px 18px;border:1.5px solid var(--hm-gold-hair);border-radius:16px;background:var(--hm-gold-bg)}
.hm-alert-ico{font-size:26px;line-height:1}
.hm-alert p{flex:1 1 220px;font-size:16px}
.hm-alert .hm-btn{padding:10px 16px;min-height:44px;font-size:15px}
@media (max-width:480px){.hm-alert .hm-btn{flex:1 1 100%}}

/* ===== hero ===== */
.hm-hero{padding:44px 0 60px;overflow-x:clip;scroll-margin-top:80px}
.hm-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.hm-hero-hand{display:inline-block;margin:0 0 6px;font-size:30px;line-height:1;color:var(--hm-lacre);transform:rotate(-3deg);transform-origin:left center}
.hm-hero h1{font-size:clamp(36px,5.4vw,64px);font-weight:500;line-height:1.03;letter-spacing:-.02em;margin:0 0 18px;max-width:15.5ch}
.hm-lead{max-width:44ch;margin:0 0 28px;color:var(--hm-ink2);font-size:clamp(16px,1.6vw,19px);line-height:1.55}
.hm-cta{display:flex;gap:10px;flex-wrap:wrap}
.hm-price-line{margin:16px 0 0;color:var(--hm-ink2);font-size:14px;font-weight:700}
.hm-hero-art{position:relative}
/* marco de sobre de correo aéreo: franja diagonal roja/azul alrededor de una hoja */
.hm-airframe{padding:9px;border-radius:14px;background:var(--hm-airmail);box-shadow:0 34px 60px -40px var(--hm-shadow-ink);transform:rotate(1.2deg)}
.hm-airframe-in{position:relative;padding:31% 8% 18px;border-radius:7px;background:var(--hm-card)}
.hm-hero-stamp{position:absolute;top:14px;right:14px;z-index:0;filter:drop-shadow(0 3px 4px var(--hm-shadow-ink));transform:rotate(4deg)}
.hm-hero-stamp .hm-perf{padding:6px;background:linear-gradient(160deg,#c24a43,#A8322D 60%,#8b2723)}
.hm-hero-stamp-in{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:62px;border:1px dashed rgba(255,253,248,.6);color:#F7F4EE;line-height:1}
.hm-hero-stamp-in b{font-family:var(--hm-serif);font-size:26px;font-weight:600}
.hm-hero-stamp-in small{margin-top:4px;font-size:11px;font-weight:800}
.hm-hero-pm{position:absolute;top:24px;right:58px;z-index:0;width:82px;height:82px;color:var(--hm-tinta);opacity:.78;transform:rotate(-12deg)}
.hm-hero-pm .hm-waves{position:absolute;right:92%;top:24px;width:110px;height:30px}
.hm-float{position:relative;z-index:1;animation:hm-float 6s ease-in-out infinite;will-change:transform}
.hm-shadow{display:block;height:22px;margin:8px 16% 0;border-radius:50%;background:radial-gradient(ellipse at center,var(--hm-shadow-ink),transparent 70%);animation:hm-shadow 6s ease-in-out infinite}
.hm-hero-addr{margin:6px 0 0;font-size:24px;line-height:1.1;color:var(--hm-ink2);transform:rotate(-2deg)}
@keyframes hm-float{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-11px) rotate(.9deg)}}
@keyframes hm-shadow{0%,100%{transform:scaleX(1);opacity:.95}50%{transform:scaleX(.86);opacity:.6}}
@media (max-width:860px){
  .hm-hero{padding:30px 0 44px}
  .hm-hero-in{grid-template-columns:1fr;gap:34px}
  .hm-hero-art{max-width:460px;margin:0 auto;width:100%}
  .hm-airframe{transform:rotate(.8deg)}
}
@media (max-width:480px){
  .hm-cta .hm-btn{flex:1 1 100%}
  .hm-hero-hand{font-size:26px}
  .hm-airframe{padding:7px}
  .hm-hero-pm{width:68px;height:68px;right:50px;top:20px}
  .hm-hero-pm .hm-waves{width:80px}
  .hm-hero-stamp{top:10px;right:10px}
  .hm-hero-stamp-in{width:44px;height:52px}
  .hm-hero-stamp-in b{font-size:22px}
  .hm-hero-addr{font-size:21px}
}

/* ===== sobre decorativo (solo CSS: rectángulo, solapa con clip-path, sello redondo) ===== */
.hm-env{position:relative;aspect-ratio:1.45;border-radius:7%/10%;overflow:hidden;isolation:isolate;--seal-fs:18px}
.hm-env>i,.hm-env>b{position:absolute}
.hm-env-body{inset:0;background:var(--o2)}
.hm-env-pocket{inset:0;background:linear-gradient(180deg,var(--o),var(--o2));clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%)}
.hm-env-pocket::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 49.6%,rgba(0,0,0,.12) 50%),linear-gradient(225deg,transparent 49.6%,rgba(0,0,0,.12) 50%);
  background-size:50% 100%;background-repeat:no-repeat;background-position:left,right}
.hm-env-pat{inset:0;opacity:.18;background-image:var(--pat);background-size:9% 12%}
.hm-env-flap-sh{left:0;right:0;top:0;height:57%;background:rgba(0,0,0,.16);clip-path:polygon(0 0,100% 0,50% 100%)}
.hm-env-flap{left:0;right:0;top:0;height:54%;background:linear-gradient(180deg,var(--f),var(--f2));clip-path:polygon(0 0,100% 0,50% 100%)}
.hm-env-seal{left:50%;top:54%;transform:translate(-50%,-50%);width:15%;aspect-ratio:1;border-radius:50%;background:var(--s);display:grid;place-items:center;font-size:var(--seal-fs);line-height:1;box-shadow:0 5px 14px rgba(0,0,0,.22)}
/* sobre de la portada: kraft con sello de lacre */
.hm-env-hero{--seal-fs:clamp(22px,3.4vw,34px);box-shadow:none;overflow:visible;perspective:900px;isolation:auto}
.hm-env-hero .hm-env-body{border-radius:7%/10%;box-shadow:0 30px 56px -30px rgba(34,56,90,.55)}
.hm-env-hero .hm-env-pocket{z-index:3;border-radius:0 0 7% 7%/0 0 10% 10%}
.hm-env-hero .hm-env-pat{z-index:3;border-radius:7%/10%}
.hm-env-hero .hm-env-flap,.hm-env-hero .hm-env-flap-sh{z-index:1;transform-origin:50% 0;animation:hm-flap 11s ease-in-out infinite;border-radius:7% 7% 0 0/10% 10% 0 0}
.hm-env-hero .hm-env-flap-sh{animation-name:hm-flapsh}
.hm-env-hero .hm-env-seal{z-index:5;width:17%;color:#f6e3cc;font-family:var(--hm-serif);font-weight:600;
  border-radius:47% 53% 50% 50%/52% 46% 54% 48%;background:radial-gradient(circle at 34% 30%,#cf5f57,var(--s) 58%,#76201c);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.1),0 6px 14px rgba(0,0,0,.28);animation:hm-seal 11s ease-in-out infinite}
.hm-letter{position:absolute;left:8%;right:8%;top:10%;bottom:5%;z-index:2;background:#fffdf7;border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:8px;display:flex;flex-direction:column;gap:5px;animation:hm-letter 11s ease-in-out infinite;will-change:transform}
.hm-letter img{width:100%;flex:1 1 0;min-height:0;object-fit:cover;border-radius:4px}
.hm-letter p{margin:0;font-family:var(--hm-hand);font-weight:500;font-size:clamp(14px,1.6vw,19px);line-height:1.05;color:#22385A}
.hm-letter b{align-self:flex-end;font-family:var(--hm-hand);font-size:clamp(14px,1.5vw,18px);font-weight:700;color:#A8322D;line-height:1}
@keyframes hm-flap{0%,14%{transform:rotateX(0);z-index:4}15%,89%{z-index:1}30%,74%{transform:rotateX(180deg);z-index:1}90%,100%{transform:rotateX(0);z-index:4}}
@keyframes hm-flapsh{0%,14%{opacity:1;z-index:4}15%,89%{z-index:1}24%,80%{opacity:0}92%,100%{opacity:1;z-index:4}}
@keyframes hm-seal{0%,15%{opacity:1;transform:translate(-50%,-50%) scale(1)}22%,84%{opacity:0;transform:translate(-50%,-50%) scale(.5)}92%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hm-letter{0%,27%{transform:translateY(0)}42%,72%{transform:translateY(-62%)}86%,100%{transform:translateY(0)}}

/* ===== secciones ===== */
.hm-sec{padding:64px 0;scroll-margin-top:80px}
.hm-sec+.hm-sec{border-top:1.5px dashed var(--hm-hair)}
.hm-sec-head{max-width:60ch;margin:0 0 28px}
.hm-sec-head h2{font-size:clamp(30px,4vw,44px);line-height:1.06;letter-spacing:-.02em;margin:0 0 10px}
.hm-sec-head p{color:var(--hm-ink2);font-size:16px;line-height:1.55}
.hm-empty{display:grid;gap:12px;justify-items:center;padding:22px 18px;border:1.5px dashed var(--hm-hair);border-radius:16px;color:var(--hm-ink2);font-size:16px;text-align:center}
.hm-empty p{max-width:42ch}
.hm-empty .hm-btn{padding:10px 18px;min-height:44px;font-size:15px}
.hm-fine{margin:16px 0 0;color:var(--hm-ink2);font-size:13px}
@media (max-width:640px){.hm-sec{padding:46px 0}}

/* ===== #disenos: leyenda, ocasiones y cartas ===== */
.hm-legend{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px}
.hm-legend li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--hm-ink2)}
.hm-legend li b{color:var(--hm-ink)}
.hm-legend .hm-mstamp{transform:rotate(-3deg) scale(.86)}
.hm-legend-pm{display:block;flex:none;width:50px;height:50px;color:var(--hm-tinta);transform:rotate(-10deg)}
.hm-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.hm-chip{min-height:44px;padding:10px 16px;border:1.5px solid var(--hm-hair);border-radius:999px;background:var(--hm-card);font:inherit;font-size:15px;font-weight:700;color:var(--hm-ink2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.hm-chip:hover{border-color:var(--hm-tinta);color:var(--hm-tinta)}
.hm-chip.on{background:var(--hm-btn);color:var(--hm-btn-ink);border-color:var(--hm-btn)}
@media (max-width:640px){
  /* en celular las ocasiones se deslizan en una sola fila */
  .hm-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:2px 20px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hm-chips::-webkit-scrollbar{display:none}
  .hm-legend{gap:10px 18px}
}
@media (max-width:480px){.hm-chips{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:32px 20px}
@media (max-width:520px){.hm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}}
.hm-grid>.hm-empty{grid-column:1/-1}
.hm-tile{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:0;border-radius:12px;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer}
.hm-tile:focus-visible{outline-offset:6px}
.hm-tile-env{position:relative;display:block}
.hm-tile .hm-env{box-shadow:0 14px 26px -20px var(--hm-shadow-ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.hm-tile:hover .hm-env,.hm-tile:focus-visible .hm-env{transform:translateY(-4px) rotate(-1deg);box-shadow:0 22px 34px -22px var(--hm-shadow-ink)}
.hm-tile-name{display:block;margin:12px 0 2px;font-size:16px;font-weight:800;color:var(--hm-ink)}
.hm-tile-occ{display:block;color:var(--hm-ink2);font-size:14px}
/* esquina: estampilla 10/20 (+ candado) o "Tienes N" */
.hm-tile-mark{position:absolute;top:-12px;right:-8px;z-index:2;pointer-events:none}
.hm-lock{position:absolute;left:-12px;bottom:-6px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--hm-card);font-size:12px;line-height:1;box-shadow:0 2px 6px var(--hm-shadow-ink)}
.hm-own{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--hm-verde);color:var(--hm-verde-ink);font-size:13px;font-weight:800;line-height:1.1;white-space:nowrap;transform:rotate(3deg);box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
@media (max-width:520px){
  .hm-tile-mark{top:-10px;right:-4px}
  .hm-tile-mark .hm-mstamp{transform:rotate(4deg) scale(.86);transform-origin:top right}
}
/* la clásica: primera, más ancha, recortada como cupón y con su matasellos "Gratis" */
.hm-tile.is-free{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:center;padding:18px;border:1.5px dashed var(--hm-kraft);border-radius:16px;background:var(--hm-card);transition:border-color .2s}
.hm-tile.is-free:hover{border-color:var(--hm-tinta)}
.hm-tile-pm{position:absolute;top:-16px;right:-14px;z-index:2;width:74px;height:74px;color:var(--hm-tinta);transform:rotate(-12deg);pointer-events:none}
.hm-tile-body{display:flex;flex-direction:column;min-width:0}
.hm-tile-start{display:block;margin:0 0 2px;font-size:26px;line-height:1;color:var(--hm-lacre);transform:rotate(-3deg);transform-origin:left center}
.hm-tile.is-free .hm-tile-name{margin-top:6px;font-family:var(--hm-serif);font-size:22px;font-weight:600;color:var(--hm-head)}
.hm-tile.is-free .hm-tile-occ{font-weight:800;color:var(--hm-ok)}
.hm-tile-note{display:block;margin-top:6px;color:var(--hm-ink2);font-size:14px;line-height:1.45}
@media (max-width:380px){
  .hm-tile.is-free{grid-template-columns:1fr;gap:12px;padding:16px 14px}
}

/* ===== #como: ruta postal en tres paradas ===== */
.hm-route{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.hm-route::before{content:"";position:absolute;left:28px;right:12%;top:27px;border-top:2px dashed var(--hm-kraft)}
.hm-route-it{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.hm-route-n{position:relative;z-index:1;flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:var(--hm-paper);border:2px dashed var(--hm-tinta);box-shadow:inset 0 0 0 5px var(--hm-paper),inset 0 0 0 6.5px var(--hm-tinta);
  font-family:var(--hm-serif);font-size:23px;font-weight:600;color:var(--hm-tinta);line-height:1}
.hm-route-txt{min-width:0;max-width:36ch}
.hm-route-txt h3{font-size:21px;font-weight:600;line-height:1.2;margin:0 0 8px}
.hm-route-txt p{color:var(--hm-ink2);font-size:15px;line-height:1.55}
@media (max-width:760px){
  .hm-route{grid-template-columns:1fr;gap:26px}
  .hm-route::before{left:27px;right:auto;top:28px;bottom:28px;border-top:0;border-left:2px dashed var(--hm-kraft)}
  .hm-route-it{flex-direction:row;gap:16px;align-items:flex-start}
  .hm-route-txt{padding-top:6px}
}

/* ===== #precios: tres estampillas + comparativa ===== */
.hm-sec-precios{background:var(--hm-kraft-bg)}
.hm-sec+.hm-sec-precios,.hm-sec-precios+.hm-sec{border-top:0}
.hm-pstamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch;padding:6px 0}
.hm-ps{min-width:0;filter:drop-shadow(0 18px 18px rgba(34,56,90,.14)) drop-shadow(0 2px 2px rgba(34,56,90,.14))}
.hm-ps .hm-perf{--r:6px;height:100%;padding:14px;background:var(--face)}
.hm-ps-in{position:relative;display:flex;flex-direction:column;height:100%;padding:22px 20px 20px;border:1.5px solid var(--frame);color:var(--txt)}
.hm-ps h3{font-size:24px;font-weight:600;line-height:1.15;margin:0 0 6px;color:var(--ttl)}
.hm-ps-kind{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--sub)}
.hm-ps-den{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;line-height:.9}
.hm-ps-den b{font-family:var(--hm-serif);font-size:58px;font-weight:600;letter-spacing:-.03em;color:var(--ttl)}
.hm-ps-den span{font-size:15px;font-weight:800;color:var(--sub)}
.hm-ps-price{margin:0 0 16px;color:var(--sub);font-size:14px;font-weight:700}
.hm-ps-price b{font-family:var(--hm-serif);font-size:32px;font-weight:600;letter-spacing:-.01em;color:var(--price);margin-right:4px}
.hm-ps-price small{display:block;margin-top:4px}   /* el «≈ US$» en su línea: no parte en «2,65)» */
.hm-ps-feats{list-style:none;flex:1;margin:0 0 20px;padding:14px 0 0;border-top:1px dashed var(--frame);display:grid;gap:8px;align-content:start}
.hm-ps-feats li{position:relative;padding-left:24px;font-size:15px;line-height:1.4}
.hm-ps-feats li::before{content:"";position:absolute;left:1px;top:.42em;width:12px;height:7px;border-left:2px solid var(--tick);border-bottom:2px solid var(--tick);transform:rotate(-45deg)}
.hm-ps .hm-btn{width:100%;white-space:normal;text-align:center}
/* gratis: hoja de papel con matasellos */
.hm-ps-free{--face:var(--hm-card);--frame:var(--hm-hair);--txt:var(--hm-ink);--ttl:var(--hm-head);--sub:var(--hm-ink2);--price:var(--hm-head);--tick:var(--hm-ok);transform:rotate(-1.2deg)}
.hm-ps-pm{position:absolute;top:-8px;right:-6px;width:80px;height:80px;color:var(--hm-tinta);transform:rotate(-14deg);pointer-events:none}
/* pack de puntos: estampilla dorada */
.hm-ps-pack{--face:linear-gradient(160deg,#f5d887,#D7A53B 62%,#c08d2c);--frame:rgba(51,36,10,.32);--txt:#33240a;--ttl:#2a1d06;--sub:#5a4314;--price:#2a1d06;--tick:#2a1d06;transform:rotate(.9deg)}
/* club: estampilla tinta con detalles dorados */
.hm-ps-club{--face:linear-gradient(160deg,#2e4a74,#22385A 58%,#192a45);--frame:rgba(215,165,59,.55);--txt:#F7F4EE;--ttl:#F7F4EE;--sub:#cdd6e6;--price:#f3d27a;--tick:#f3d27a;transform:rotate(-.5deg)}
.hm-ps-club :focus-visible{outline-color:#f3d27a}
/* las estampillas son objetos: el botón del pack se queda en tinta también en modo oscuro */
.hm .hm-ps-pack .hm-btn-primary,html[data-theme="dark"] .hm .hm-ps-pack .hm-btn-primary{background:#22385A;color:#fff}
.hm .hm-ps-pack .hm-btn-primary:hover,html[data-theme="dark"] .hm .hm-ps-pack .hm-btn-primary:hover{background:#182a45}
.hm-ps-pack :focus-visible{outline-color:#2a1d06}
@media (max-width:900px){
  .hm-pstamps{grid-template-columns:1fr;max-width:440px;margin:0 auto;gap:26px}
  .hm-ps-free{transform:rotate(-.6deg)}.hm-ps-pack{transform:rotate(.6deg)}.hm-ps-club{transform:rotate(-.3deg)}
}
/* comparativa */
.hm-compare{margin:48px 0 0}
.hm-compare h3{font-size:clamp(22px,2.6vw,28px);font-weight:600;margin:0 0 14px}
.hm-cmp-scroll{overflow-x:auto;border:1.5px solid var(--hm-hair);border-radius:14px;background:var(--hm-card)}
.hm-cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
.hm-cmp th,.hm-cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--hm-hair)}
.hm-cmp thead th{border-top:0;background:var(--hm-tint);font-family:var(--hm-serif);font-size:16px;font-weight:600;color:var(--hm-head)}
.hm-cmp tbody th{width:24%;font-weight:800;color:var(--hm-ink)}
.hm-cmp td{color:var(--hm-ink)}
.hm-cmp td:nth-child(2){background:rgba(199,162,124,.08)}
.hm-yes{font-weight:800;color:var(--hm-ok)}
.hm-yes::before{content:"✓ "}
.hm-no{color:var(--hm-ink2)}
.hm-cmp td,.hm-ps-den b,.hm-ps-price b,.hm-date-cal b{font-variant-numeric:tabular-nums}
.hm-cmp-hint{display:none}
@media (max-width:600px){
  .hm-cmp{min-width:540px;font-size:14px}       /* la tabla se desliza de lado dentro de su marco: no parte palabras */
  .hm-cmp th,.hm-cmp td{padding:10px 10px}
  .hm-cmp tbody th{width:auto;min-width:112px}
  .hm-cmp tbody th,.hm-cmp thead th:first-child{position:sticky;left:0;z-index:1;background:var(--hm-card);box-shadow:1px 0 0 var(--hm-hair)}   /* la fila se lee aunque deslices */
  .hm-cmp-scroll{scrollbar-width:thin}
  .hm-cmp-hint{display:block;margin:0 0 8px}
}
/* pronto: regalos con plata */
.hm-soon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:640px;margin:24px 0 0;padding:14px 16px;border:1.5px dashed var(--hm-kraft);border-radius:14px;color:var(--hm-ink2);font-size:15px}
.hm-soon-tag{padding:4px 11px;border-radius:999px;background:var(--hm-lacre);color:var(--hm-lacre-ink);font-size:13px;font-weight:800}
.hm-soon p{flex:1 1 240px}

/* ===== #sin-ideas: texto + nota escrita a mano en hoja con renglones ===== */
.hm-ideas-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hm-ideas-txt h2{font-size:clamp(32px,4.6vw,52px);line-height:1.04;letter-spacing:-.02em;margin:0 0 14px}
.hm-ideas-lead{max-width:46ch;margin:0 0 26px;color:var(--hm-ink2);font-size:clamp(16px,1.6vw,19px);line-height:1.55}
.hm-note{position:relative;padding:34px 26px 24px 58px;border-radius:3px;transform:rotate(1.4deg);
  background:linear-gradient(90deg,transparent 42px,rgba(168,50,45,.4) 42px 43.5px,transparent 43.5px),
             repeating-linear-gradient(180deg,transparent 0 33px,var(--hm-rule) 33px 34px) 0 -6px,var(--hm-card);
  box-shadow:0 26px 40px -30px var(--hm-shadow-ink),0 1px 2px rgba(0,0,0,.06)}
.hm-note::before{content:"";position:absolute;top:-13px;left:50%;width:104px;height:28px;transform:translateX(-50%) rotate(-3deg);background:rgba(215,165,59,.5)}
.hm-note ul{list-style:none;margin:0;padding:0}
.hm-note li{position:relative;font-family:var(--hm-hand);font-size:25px;font-weight:500;line-height:34px;color:var(--hm-tinta)}
.hm-note li+li{margin-top:0}
.hm-note li::before{content:"";position:absolute;left:-20px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--hm-lacre)}
.hm-note-sign{margin:14px 0 0;color:var(--hm-ink2);font-size:14px;font-weight:700}
@media (max-width:860px){
  .hm-ideas-in{grid-template-columns:1fr;gap:38px}
  .hm-note{max-width:520px;transform:rotate(.8deg)}
}
@media (max-width:480px){
  .hm-note{padding:30px 18px 20px 50px;background:linear-gradient(90deg,transparent 36px,rgba(168,50,45,.4) 36px 37.5px,transparent 37.5px),repeating-linear-gradient(180deg,transparent 0 31px,var(--hm-rule) 31px 32px) 0 -4px,var(--hm-card)}
  .hm-note li{font-size:23px;line-height:32px}
  .hm-note li::before{left:-17px;top:13px}
  .hm-ideas-txt .hm-btn{width:100%}
}

/* ===== fechas que importan ===== */
.hm-dates-in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start}
.hm-date-form{display:grid;gap:12px;padding:22px;border:1.5px solid var(--hm-hair);border-radius:16px;background:var(--hm-card)}
.hm-field{display:grid;gap:6px;font-size:14px;font-weight:800;color:var(--hm-ink2)}
.hm-field input,.hm-field select{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--hm-hair);border-radius:12px;background:var(--hm-paper);font:inherit;font-size:16px;font-weight:700;color:var(--hm-ink);-webkit-appearance:none;appearance:none}
.hm-field select{background-image:linear-gradient(45deg,transparent 50%,var(--hm-ink2) 50%),linear-gradient(135deg,var(--hm-ink2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.hm-field input:focus,.hm-field select:focus{border-color:var(--hm-tinta);background-color:var(--hm-card)}
.hm-field input::placeholder{color:#6f665a;font-weight:600}   /* 5,1:1 sobre papel */
.hm-date-form .hm-btn{width:100%;margin-top:4px}
.hm-form-msg{min-height:1.4em;font-size:14px;font-weight:700;color:var(--hm-ok)}
.hm-form-msg.err{color:var(--hm-danger)}
.hm-dates{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hm-date-it{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1.5px solid var(--hm-hair);border-radius:16px;background:var(--hm-card);transition:border-color .2s,background .2s}
.hm-date-it.soon{border-color:var(--hm-gold-hair);background:var(--hm-gold-bg)}
/* hojita de calendario: día grande, mes corto, cabecera de lacre */
.hm-date-cal{position:relative;flex:0 0 52px;width:52px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:9px;overflow:hidden;
  border:1.5px solid var(--hm-hair);border-radius:9px;background:var(--hm-paper);line-height:1}
.hm-date-cal::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--hm-lacre)}
.hm-date-cal b{font-family:var(--hm-serif);font-size:22px;font-weight:600;color:var(--hm-head)}
.hm-date-cal small{margin-top:2px;font-size:12px;font-weight:800;color:var(--hm-ink2)}
.hm-date-txt{flex:1 1 150px;min-width:0}
.hm-date-txt b{display:block;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-date-txt span{display:block;color:var(--hm-ink2);font-size:14px}
.hm-date-days{padding:7px 12px;border-radius:999px;background:var(--hm-tint);font-size:14px;font-weight:800;white-space:nowrap}
.hm-date-it.soon .hm-date-days{background:linear-gradient(135deg,var(--hm-gold-2),var(--hm-gold));color:var(--hm-gold-ink)}
.hm-date-act{display:flex;align-items:center;gap:8px}
.hm-date-act .hm-btn{padding:10px 14px;min-height:44px;font-size:15px}
.hm-x{width:44px;height:44px;flex:0 0 44px;padding:0;border:1.5px solid var(--hm-hair);border-radius:12px;background:var(--hm-card);font:inherit;font-size:24px;line-height:1;color:var(--hm-ink2);cursor:pointer;transition:border-color .15s,color .15s}
.hm-x:hover{border-color:var(--hm-danger);color:var(--hm-danger)}
@media (max-width:820px){.hm-dates-in{grid-template-columns:1fr}.hm-date-form{max-width:520px}}
@media (max-width:560px){.hm-date-act{flex:1 1 100%;justify-content:flex-start;padding-left:66px}}
@media (max-width:400px){.hm-date-act{padding-left:0}}

/* ===== #mis-sobres ===== */
.hm-saved{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hm-saved-it{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px;border:1.5px solid var(--hm-hair);border-radius:16px;background:var(--hm-card);transition:border-color .2s,background .2s}
.hm-saved-it.confirm{border-color:var(--hm-danger);background:#fff6f4}
.hm-thumb{display:block;width:120px;aspect-ratio:1.5;border-radius:10px;object-fit:cover;background:var(--hm-tint)}
.hm-thumb-fb{display:grid;place-items:center;font-size:30px;background:linear-gradient(160deg,var(--b1),var(--b2))}
.hm-saved-txt{min-width:0}
.hm-saved-txt b{display:block;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-saved-txt span{color:var(--hm-ink2);font-size:14px}
.hm-saved-act,.hm-saved-del{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.hm-saved-del span{font-weight:700;margin-right:4px}
.hm-saved .hm-btn{padding:10px 14px;min-height:44px;font-size:15px}
@media (max-width:640px){
  .hm-saved-it{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .hm-thumb{width:96px}
  .hm-saved-act,.hm-saved-del{grid-column:1/-1;justify-content:flex-start}
  .hm-saved-del span{flex:1 1 100%;margin:0}
}
/* cajita de recuerdos (sub-bloque) */
.hm-sub{margin:36px 0 0;padding:28px 0 0;border-top:1.5px dashed var(--hm-hair)}
.hm-sub-head{margin:0 0 16px}
.hm-sub-head h3{font-size:24px;font-weight:600;margin:0 0 4px}
.hm-sub-head p{color:var(--hm-ink2);font-size:15px}
.hm-memo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hm-memo-it{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1.5px solid var(--hm-hair);border-radius:14px;background:var(--hm-card)}
.hm-memo-it .hm-thumb{width:84px;font-size:24px}
.hm-memo-txt{min-width:0}
.hm-memo-txt b{display:block;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-memo-txt span{display:block;color:var(--hm-ink2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-memo-amt{padding:6px 11px;border-radius:999px;background:linear-gradient(135deg,var(--hm-gold-2),var(--hm-gold));color:var(--hm-gold-ink);font-size:14px;font-weight:800;white-space:nowrap}
@media (max-width:360px){.hm-memo{grid-template-columns:1fr}}

/* ===== #subir ===== */
.hm-drops{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
@media (max-width:340px){.hm-drops{grid-template-columns:1fr}}
.hm-drop{position:relative;padding:30px 22px 22px;border:2px dashed var(--hm-hair);border-radius:18px;background:var(--hm-card);text-align:center;transition:border-color .15s,background .15s}
.hm-drop.over{border-color:var(--hm-tinta);background:var(--hm-paper)}
.hm-drop-ico{width:46px;height:46px;margin:0 auto 12px;color:var(--hm-tinta)}
.hm-drop-ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hm-drop.over .hm-drop-ico{color:var(--hm-lacre)}
.hm-drop h3{font-size:22px;font-weight:600;margin:0 0 6px}
.hm-drop p{color:var(--hm-ink2);font-size:15px;margin:0 auto 16px;max-width:38ch}
.hm-drop p b{color:var(--hm-ink)}
/* el <label> es el botón; el input real queda oculto pero accesible */
.hm-file{position:relative;overflow:hidden}
.hm-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hm-file:focus-within{outline:3px solid var(--hm-tinta);outline-offset:3px}
.hm-drop .hm-drop-msg{min-height:1.4em;margin:14px 0 0;font-size:14px;font-weight:700;color:var(--hm-ink2);max-width:none}
.hm-drop .hm-drop-msg.err{color:var(--hm-danger)}
.hm-drop .hm-drop-msg.ok{color:var(--hm-ok)}

/* ===== pie ===== */
.hm-foot{padding:34px 0 44px;border-top:1.5px dashed var(--hm-hair);color:var(--hm-ink2);font-size:13px;text-align:center}
.hm-foot-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px;font-family:var(--hm-serif);font-size:22px;font-weight:600;color:var(--hm-head)}
.hm-foot-brand .hm-hand{font-size:22px;font-weight:500;color:var(--hm-ink2)}
.hm-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:0 0 12px}
.hm-foot-links a,.hm-foot-links span{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:700;color:var(--hm-ink2);text-decoration:none}
.hm-foot-links a{color:var(--hm-tinta);text-decoration:underline;text-decoration-color:var(--hm-hair);text-underline-offset:3px;transition:background .15s,text-decoration-color .15s}
.hm-foot-links a:hover{background:var(--hm-tint);text-decoration-color:var(--hm-tinta)}
.hm-foot-links span{opacity:.75}
/* el aviso de cookies deja sitio para no tapar el pie */
.hm:has(.hm-cookie) .hm-foot{padding-bottom:150px}
@media (max-width:560px){.hm:has(.hm-cookie) .hm-foot{padding-bottom:200px}}

/* ===== aviso de cookies y almacenamiento (franja fija abajo, no es un modal) ===== */
.hm-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px 14px 18px;border:1.5px solid var(--hm-hair);border-radius:16px;background:var(--hm-card);color:var(--hm-ink);box-shadow:0 24px 50px -24px var(--hm-shadow-ink)}
.hm-cookie p{flex:1 1 300px;font-size:14px;line-height:1.45}
.hm-cookie-act{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.hm-cookie .hm-btn{min-height:44px;padding:10px 16px;font-size:15px}
@media (max-width:560px){
  .hm-cookie{left:10px;right:10px;bottom:10px;padding:14px}
  .hm-cookie-act{width:100%;margin:0}
  .hm-cookie .hm-btn{flex:1 1 auto}
}

/* ===== bienvenida del destinatario (overlay, se agrega al body) ===== */
.hm-welcome{position:fixed;inset:0;z-index:40;display:flex;padding:24px;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(160deg,var(--w1),var(--w2));color:#1e1917;font-family:"Nunito",system-ui,sans-serif;line-height:1.4;
  opacity:0;transition:opacity .45s ease}
.hm-welcome.in{opacity:1}
.hm-welcome.out{opacity:0;pointer-events:none}
.hm-welcome.dark{color:#fff}
.hm-welcome *{box-sizing:border-box}
.hm-welcome::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 18% 8%,rgba(255,255,255,.38),transparent 70%),radial-gradient(50% 40% at 86% 92%,rgba(255,255,255,.22),transparent 70%)}
.hm-welcome.dark::before{background:radial-gradient(60% 50% at 18% 8%,rgba(255,255,255,.09),transparent 70%),radial-gradient(50% 40% at 86% 92%,rgba(255,255,255,.06),transparent 70%)}
/* margin:auto centra y, si no cabe, deja hacer scroll sin cortar arriba */
.hm-w-card{position:relative;width:100%;max-width:560px;margin:auto;text-align:center}
.hm-w-card>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hm-welcome.in .hm-w-card>*{opacity:1;transform:none}
.hm-welcome.in .hm-w-card>:nth-child(1){transition-delay:.08s}
.hm-welcome.in .hm-w-card>:nth-child(2){transition-delay:.18s}
.hm-welcome.in .hm-w-card>:nth-child(3){transition-delay:.28s}
.hm-welcome.in .hm-w-card>:nth-child(4){transition-delay:.38s}
.hm-welcome.in .hm-w-card>:nth-child(5){transition-delay:.48s}
.hm-w-seal{width:74px;height:74px;margin:0 auto 22px;display:grid;place-items:center;border-radius:50%;background:var(--seal);font-size:36px;line-height:1;box-shadow:0 12px 30px -12px rgba(0,0,0,.4)}
.hm-w-hi{margin:0 0 10px;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(38px,7vw,64px);line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
.hm-w-from{margin:0 0 26px;font-size:17px;opacity:.82}
.hm-w-q{margin:0 0 26px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(20px,3vw,26px);line-height:1.3}
.hm-w-btns{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto}
.hm-w-yes,.hm-w-later{border:0;border-radius:16px;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;transition:transform .15s,filter .15s}
.hm-w-yes:active,.hm-w-later:active{transform:scale(.98)}
.hm-w-yes{min-height:58px;padding:17px 22px;font-size:17px;background:var(--acc);color:var(--acc-ink);box-shadow:0 16px 32px -16px var(--acc2)}
.hm-w-yes:hover{filter:brightness(1.06)}
.hm-w-later{min-height:50px;padding:14px 22px;font-size:16px;font-weight:700;background:rgba(30,25,23,.09);color:inherit}
.hm-welcome.dark .hm-w-later{background:rgba(255,255,255,.14)}
.hm-w-later:hover{filter:brightness(.96)}
.hm-welcome :focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ===== modo oscuro: tokens nuevos (dark.css ya redefine paper/ink/ink2/hair/tint/ok/danger/gold-bg/gold-hair) ===== */
html[data-theme="dark"] .hm{
  --hm-tinta:#a9c1ea;--hm-lacre:#e2675e;--hm-kraft:#9c7c5c;--hm-dorada:#e3b552;--hm-verde:#5cc39b;
  --hm-head:#e6ecf6;--hm-card:#211c17;--hm-kraft-bg:#1d1813;
  --hm-btn:#a9c1ea;--hm-btn-ink:#0f1a2c;--hm-btn-hover:#c4d5f3;
  --hm-lacre-ink:#1f0b09;--hm-verde-ink:#0c231a;
  --hm-gold-ink:#33240a;
  --hm-shadow-ink:rgba(0,0,0,.6);
  --hm-pm-fill:rgba(33,28,23,.82);
  --hm-rule:rgba(169,193,234,.14);
  --hm-air-gap:#1d1813;
}
/* le gana a dark.css (que pinta el botón principal color crema) para mantener la tinta azul */
html[data-theme="dark"] .hm .hm-btn-primary{background:var(--hm-btn);color:var(--hm-btn-ink)}
html[data-theme="dark"] .hm .hm-btn-primary:hover{background:var(--hm-btn-hover)}
html[data-theme="dark"] .hm .hm-btn-ghost{color:var(--hm-tinta)}
html[data-theme="dark"] .hm .hm-btn-ghost:hover{border-color:var(--hm-tinta)}
html[data-theme="dark"] .hm .hm-btn-big{box-shadow:none}
html[data-theme="dark"] .hm .hm-wallet{color:var(--hm-ink)}
html[data-theme="dark"] .hm .hm-airframe{box-shadow:0 34px 60px -36px rgba(0,0,0,.85)}
html[data-theme="dark"] .hm .hm-hero-pm{opacity:.9}
html[data-theme="dark"] .hm .hm-mstamp-10 .hm-perf{background:#2c2620}
html[data-theme="dark"] .hm .hm-mstamp-10 .hm-mstamp-in{border-color:rgba(169,193,234,.4);color:#c9d8f2}
html[data-theme="dark"] .hm .hm-ps-club{--face:linear-gradient(160deg,#36578a,#2b4570 58%,#213659)}
html[data-theme="dark"] .hm .hm-ps-free{--frame:#3a332b}
html[data-theme="dark"] .hm .hm-ps{filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)) drop-shadow(0 2px 2px rgba(0,0,0,.4))}
html[data-theme="dark"] .hm .hm-cmp td:nth-child(2){background:rgba(199,162,124,.06)}
html[data-theme="dark"] .hm .hm-note{box-shadow:0 26px 40px -28px rgba(0,0,0,.85)}
html[data-theme="dark"] .hm .hm-note::before{background:rgba(215,165,59,.35)}
html[data-theme="dark"] .hm .hm-sec-ideas{background:transparent}
html[data-theme="dark"] .hm .hm-own{box-shadow:0 4px 10px -4px rgba(0,0,0,.7)}
html[data-theme="dark"] .hm .hm-field input::placeholder{color:var(--dk-ph,#8a7f71)}
html[data-theme="dark"] .hm .hm-saved-it.confirm{background:var(--dk-danger-bg,#2e1d1b)}
/* el sobre de la portada y la carta conservan sus colores de papel (son objetos, no "chrome") */

/* ===== menos movimiento ===== */
@media (prefers-reduced-motion:reduce){
  /* pausado (no 'none'): se queda en el primer cuadro, con el sobre cerrado y la solapa por encima de la carta */
  .hm-float,.hm-shadow,.hm-letter,.hm-env-hero .hm-env-flap,.hm-env-hero .hm-env-flap-sh,.hm-env-hero .hm-env-seal{animation-play-state:paused}
  .hm-tile .hm-env,.hm-btn,.hm-drop,.hm-nav a,.hm-head,.hm-burger span,.hm-x,.hm-date-it,.hm-foot-links a,.hm-chip,.hm-wallet,.hm-tile.is-free{transition:none}
  .hm-tile:hover .hm-env,.hm-tile:focus-visible .hm-env{transform:none}
  .hm-btn:active{transform:none}
  .hm-welcome,.hm-w-card>*{transition:none}
  .hm-w-card>*{opacity:1;transform:none}
}

/* ---- v8: estampilla con precio en soles y marcas de Club / regalo ---- */
.hm-mstamp-in{width:auto;min-width:40px;padding:0 5px}
.hm-mstamp-in b{font-size:16px}
.hm-mstamp-in small{margin:0 0 1px;font-size:9.5px}
.hm-own-club{background:#efe8ff;color:#4a3394}
.hm-own-gift{background:#fff3e0;color:#7a4b06}
html[data-theme="dark"] .hm .hm-own-club{background:#2a2340;color:#d9ccff}
html[data-theme="dark"] .hm .hm-own-gift{background:#2e2416;color:#f0c98a}

/* aviso visible del Libro de Reclamaciones (art. 9 del reglamento) */
.hm-foot-links a.hm-libro{border:1.5px solid var(--hm-hair);background:var(--hm-card);color:var(--hm-head)}
.hm-foot-links a.hm-libro:hover{border-color:var(--hm-head)}