/* ==========================================================================
   PORTADA · estilo cómic vibrante — "El Rey de las Llaves"
   Se carga DESPUÉS de styles.css y solo actúa con <body class="home">.
   Paleta de la mascota: turquesa, amarillo sol, terracota, morado y marino.
   ========================================================================== */
.home{
  --sun:#2FBFAC; --sun-deep:#1E9788; --purple:#17243E; --ink:#17243E;
  --pop:3px solid var(--ink); --pop-shadow:7px 7px 0 var(--ink);
}
.home h1,.home h2,.home h3{ font-family:var(--font-display); }
.home h2{ font-weight:800; letter-spacing:-.01em; }

/* Etiquetas de sección tipo pegatina */
.home .eyebrow{ display:inline-flex; align-items:center; background:var(--sun); color:var(--ink); border:2px solid var(--ink); border-radius:99px; padding:.28rem .9rem; font-weight:800; letter-spacing:.06em; transform:rotate(-2deg); box-shadow:3px 3px 0 var(--ink); }
.home .eyebrow::before{ display:none; }
.home .section--navy .eyebrow,.home .section--teal .eyebrow{ color:var(--ink); }
.home .center .eyebrow,.home .eyebrow.center{ display:flex; width:max-content; margin-inline:auto; }

/* ---------- HERO ---------- */
.home .hero{
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(47,191,172,.32) 1.6px, transparent 2px) 0 0/20px 20px,
    linear-gradient(180deg,#FAF3E3 0%,#F1E4C4 100%);
  padding-block:clamp(2rem,5vw,4.5rem) clamp(3rem,7vw,6rem);
}
.home .hero::before{ content:""; position:absolute; right:-14%; top:-30%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(47,191,172,.5),rgba(47,191,172,0) 68%); pointer-events:none; }
.home .hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:26px; background:var(--ink); clip-path:polygon(0 100%,3% 20%,6% 100%,9% 20%,12% 100%,15% 20%,18% 100%,21% 20%,24% 100%,27% 20%,30% 100%,33% 20%,36% 100%,39% 20%,42% 100%,45% 20%,48% 100%,51% 20%,54% 100%,57% 20%,60% 100%,63% 20%,66% 100%,69% 20%,72% 100%,75% 20%,78% 100%,81% 20%,84% 100%,87% 20%,90% 100%,93% 20%,96% 100%,99% 20%,100% 100%); opacity:.0; }
.home .hero .container{ position:relative; z-index:1; }
.home .hero-badges .stamp{ background:var(--purple); color:#fff; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); }
.home .hero h1{ text-shadow:3px 3px 0 rgba(23,36,62,.14); position:relative; display:block; padding-bottom:.35em; }
.home .hero h1::after{ content:""; position:absolute; left:0; bottom:0; width:min(72%,420px); height:14px; background:var(--sun); border-radius:99px; transform:rotate(-1.2deg); z-index:-1; }
.home .hero .lede{ font-size:1.12rem; color:#2B3550; max-width:52ch; }
.home .hero .btn--primary{ border:var(--pop); box-shadow:5px 5px 0 var(--ink); }
.home .hero .btn--outline-navy{ background:#fff; border:var(--pop); box-shadow:5px 5px 0 var(--ink); color:var(--ink); }
.home .hero .btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.home .hero-trust{ gap:1rem 1.6rem; }
.home .hero-trust-item .num{ font-size:2.1rem; color:var(--purple); text-shadow:2px 2px 0 var(--sun); }
.home .hero-trust-item .lbl{ color:#2B3550; font-weight:700; }

/* Mascota: círculo cómic con explosión amarilla detrás */
.home .hero-art-ring{ display:none; }
.home .hero-art{ max-width:520px; }
.home .hero-burst{ position:absolute; inset:-9%; background:var(--terracotta); z-index:0; clip-path:polygon(50% 0,58% 9%,69% 3%,73% 14%,85% 12%,85% 24%,96% 28%,91% 39%,100% 47%,92% 56%,98% 67%,87% 71%,88% 83%,76% 84%,72% 95%,61% 91%,50% 100%,42% 91%,31% 96%,27% 85%,15% 87%,15% 75%,4% 71%,9% 60%,0 52%,8% 43%,2% 33%,13% 29%,14% 17%,26% 16%,29% 5%,40% 9%); }
.home .hero-burst::after{ content:""; position:absolute; inset:7%; background:var(--terracotta-solid); clip-path:inherit; opacity:.55; }
.home .hero-art-photo{ inset:4%; padding:0; border:0; background:transparent; border-radius:0; overflow:visible; z-index:1; filter:drop-shadow(9px 9px 0 var(--ink)); }
.home .hero-art-photo img{ clip-path:circle(47.6% at 50% 50%); transform:scale(1.01); }
.home .hero-sticker{ position:absolute; z-index:3; font-family:var(--font-display); font-weight:800; color:var(--ink); background:#fff; border:var(--pop); box-shadow:4px 4px 0 var(--ink); }
.home .hero-sticker--bubble{ top:2%; left:-4%; padding:.55rem 1rem; border-radius:20px; font-size:clamp(.85rem,1.6vw,1.05rem); transform:rotate(-5deg); max-width:12ch; line-height:1.1; text-align:center; }
.home .hero-sticker--bubble::after{ content:""; position:absolute; left:26px; bottom:-15px; width:20px; height:20px; background:#fff; border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:skewX(-20deg) rotate(45deg); }
.home .hero-sticker--badge{ right:-2%; bottom:20%; width:clamp(78px,15vw,104px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--purple); color:#fff; font-size:clamp(.75rem,1.5vw,.95rem); line-height:1.05; text-align:center; transform:rotate(9deg); }
.home .hero-sticker--badge b{ display:block; font-size:1.55em; color:var(--sun); }
.home .hero-art-cta{ z-index:4; border:var(--pop); background:var(--terracotta); box-shadow:5px 5px 0 var(--ink); }

/* ---------- TRUSTBAR ---------- */
.home .trustbar{ background:var(--sun); border-block:var(--pop); padding-block:.9rem; }
.home .trustbar-item{ color:var(--ink); font-weight:800; font-size:1rem; }
.home .trustbar-item svg{ color:var(--ink); background:#fff; border:2px solid var(--ink); border-radius:50%; padding:2px; }

/* ---------- SERVICIOS: pósters de cómic ---------- */
.home #servicios{ background:radial-gradient(circle at 1.5px 1.5px, rgba(23,36,62,.09) 1.4px, transparent 1.8px) 0 0/18px 18px, var(--cream); }
.home .svc-card{ border:var(--pop); border-radius:26px; box-shadow:var(--pop-shadow); padding:var(--space-6); background:#fff; }
.home .svc-card:nth-child(1){ --tilt:-1.1deg; } .home .svc-card:nth-child(2){ --tilt:.6deg; } .home .svc-card:nth-child(3){ --tilt:-.6deg; }
@media(min-width:720px){ .home .svc-card{ transform:rotate(var(--tilt,0deg)); } }
.home .svc-card:hover{ transform:translate(-4px,-6px) rotate(0deg); box-shadow:11px 11px 0 var(--ink); }
.home .svc-card-media{ aspect-ratio:1105/1423; border-bottom:var(--pop); border-radius:22px 22px 0 0; background:var(--teal); }
.home .svc-card-media img{ transition:transform .5s var(--ease); }
.home .svc-card:hover .svc-card-media img{ transform:scale(1.05); }
.home .svc-card h3{ font-size:1.5rem; font-weight:800; }
.home .svc-card .card-link{ align-self:flex-start; background:var(--sun); color:var(--ink); border:2px solid var(--ink); border-radius:99px; padding:.45rem 1rem; box-shadow:3px 3px 0 var(--ink); transition:transform .2s,box-shadow .2s; }
.home .svc-card .card-link:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.home .coverage-list .chip{ border:2px solid var(--ink); font-weight:800; box-shadow:2px 2px 0 var(--ink); }

/* ---------- ASÍ DE FÁCIL (nuevo) ---------- */
.home .hm-steps{ background:linear-gradient(160deg,#2FBFAC 0%,#1E9788 100%); color:#fff; position:relative; overflow:hidden; }
.home .hm-steps::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.2) 1.4px, transparent 1.8px) 0 0/22px 22px; pointer-events:none; }
.home .hm-steps .container{ position:relative; }
.home .hm-steps h2{ color:#fff; }
.home .hm-steps-grid{ display:grid; gap:1.4rem; margin-top:2rem; }
@media(min-width:800px){ .home .hm-steps-grid{ grid-template-columns:repeat(3,1fr); gap:1.8rem; } }
.home .hm-step{ position:relative; background:#fff; color:var(--ink); border:var(--pop); border-radius:24px; padding:2.2rem 1.4rem 1.4rem; box-shadow:7px 7px 0 var(--ink); }
.home .hm-step h3{ color:var(--ink); font-size:1.25rem; margin:.2rem 0 .4rem; }
.home .hm-step p{ color:#3A4661; margin:0; font-size:.98rem; }
.home .hm-step .n{ position:absolute; top:-22px; left:1.2rem; width:48px; height:48px; border-radius:50%; background:var(--terracotta); color:#fff; border:var(--pop); font-family:var(--font-display); font-weight:800; font-size:1.5rem; display:grid; place-items:center; transform:rotate(-8deg); box-shadow:3px 3px 0 var(--ink); }
.home .hm-step:nth-child(2) .n{ background:var(--teal); } .home .hm-step:nth-child(3) .n{ background:var(--purple); }

/* ---------- POR QUÉ ELEGIRNOS ---------- */
.home .section--navy{ background:var(--purple); position:relative; overflow:hidden; }
.home .section--navy::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.14) 1.4px, transparent 1.8px) 0 0/20px 20px; pointer-events:none; }
.home .section--navy .container{ position:relative; }
.home .section--navy p{ color:#B9C3D6; }
.home [data-porque-media]{ border:4px solid var(--sun)!important; border-radius:24px!important; box-shadow:9px 9px 0 var(--ink); transform:rotate(-.8deg); overflow:hidden; position:relative; }
.home [data-porque-media]::after{ content:"¡Pásate por la tienda!"; position:absolute; left:14px; bottom:14px; background:var(--sun); color:var(--ink); border:2px solid var(--ink); border-radius:99px; padding:.3rem .9rem; font-family:var(--font-display); font-weight:800; box-shadow:3px 3px 0 var(--ink); }
.home .section--navy .svc-card-icon{ background:var(--sun)!important; color:var(--ink)!important; border:2px solid var(--ink); border-radius:16px; box-shadow:3px 3px 0 var(--ink); }
.home .porque-king{ position:absolute; right:clamp(.5rem,4vw,4rem); top:1.2rem; width:clamp(90px,13vw,150px); filter:drop-shadow(5px 5px 0 var(--ink)); animation:hmBob 4.5s ease-in-out infinite; z-index:2; }
@media(max-width:640px){ .home .porque-king{ display:none; } }

/* ---------- COBERTURA ---------- */
.home .coverage-map{ border:var(--pop); border-radius:26px; box-shadow:var(--pop-shadow); overflow:hidden; }

/* ---------- TIENDA TEASER ---------- */
.home .section--teal{ position:relative; overflow:hidden; background:linear-gradient(160deg,#2FBFAC 0%,#1E9788 100%); }
.home .section--teal::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.2) 1.4px, transparent 1.8px) 0 0/20px 20px; pointer-events:none; }
.home .section--teal .container{ position:relative; }
.home .section--teal .btn--navy{ border:var(--pop); box-shadow:5px 5px 0 var(--ink); }
.home .section--teal .eyebrow,.home .hm-steps .eyebrow{ background:var(--cream); }
.home .tienda-carousel-card{ background:#fff; color:var(--ink); border:var(--pop); border-radius:20px; box-shadow:5px 5px 0 var(--ink); }
.home .tienda-carousel-card .nombre,.home .tienda-carousel-card .precio{ color:var(--ink); }

/* ---------- TESTIMONIOS: bocadillos ---------- */
.home .testimonial{ position:relative; background:#fff; border:var(--pop); border-radius:26px; box-shadow:var(--pop-shadow); padding:1.6rem; }
.home .testimonial::after{ content:""; position:absolute; left:34px; bottom:-17px; width:26px; height:26px; background:#fff; border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:skewX(-18deg) rotate(45deg); }
.home .testimonial .stars{ color:var(--terracotta); text-shadow:1px 1px 0 var(--ink); font-size:1.3rem; letter-spacing:.1em; }
.home .testimonial-author{ margin-top:1.2rem; }
.home .testimonial .avatar{ background:var(--sun); color:var(--ink); border:2px solid var(--ink); font-weight:800; }
@media(min-width:720px){ .home .testimonial:nth-child(odd){ transform:rotate(-.7deg); } .home .testimonial:nth-child(even){ transform:rotate(.7deg); } }

/* ---------- FAQ (nuevo) ---------- */
.home .hm-faq .faq{ max-width:860px; }
.home .hm-faq .faq-item{ border:var(--pop); border-radius:18px; background:#fff; box-shadow:4px 4px 0 var(--ink); margin-bottom:.9rem; overflow:hidden; }
.home .hm-faq .faq-q{ font-family:var(--font-display); font-weight:800; }

/* ---------- CONTACTO ---------- */
.home .cta-band{ position:relative; background:var(--terracotta); border:var(--pop); box-shadow:var(--pop-shadow); border-radius:26px; overflow:hidden; }
.home .cta-band h2,.home .cta-band p{ color:#fff; }
.home .cta-band .btn--primary{ background:var(--sun); color:var(--ink); border:var(--pop); box-shadow:4px 4px 0 var(--ink); }
.home .cta-king{ position:absolute; right:-14px; bottom:-18px; width:clamp(120px,22vw,190px); filter:drop-shadow(-4px 4px 0 rgba(23,36,62,.55)); animation:hmBob 4.5s ease-in-out infinite; pointer-events:none; }
.home .contact-form{ border:var(--pop); border-radius:26px; box-shadow:var(--pop-shadow); }

/* ---------- Animación ---------- */
@keyframes hmBob{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-9px) rotate(1.5deg) } }
@keyframes hmSpin{ to{ transform:rotate(360deg) } }
@keyframes hmPop{ 0%,100%{ transform:rotate(-5deg) scale(1) } 50%{ transform:rotate(-3deg) scale(1.05) } }
@media(prefers-reduced-motion:no-preference){
  .home .hero-art-photo{ animation:hmBob 5s ease-in-out infinite; }
  .home .hero-burst{ animation:hmSpin 60s linear infinite; }
  .home .hero-sticker--bubble{ animation:hmPop 3.2s ease-in-out infinite; }
}
@media(max-width:640px){
  .home .hero-sticker--bubble{ left:0; } .home .hero-sticker--badge{ right:0; }
  .home .svc-card,.home .testimonial{ box-shadow:5px 5px 0 var(--ink); }
}