/*
Theme Name: Pipoppers Chispazo
Theme URI: https://pipoppers.com/
Author: Pipoppers
Description: Theme ligero y personalizado para Pipoppers, sin Elementor. Integra Delivery Booking, Clip y páginas de pago.
Version: 1.0.4
Text Domain: pipoppers
*/
:root{
  --ink:#150017;
  --pink:#ff1493;
  --hot:#ff55bc;
  --lime:#91ff72;
  --white:#fff4fb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.site-shell{width:100%;overflow-x:hidden}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

.site-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  height:86px;display:flex;align-items:center;border-bottom:1px solid #ffffff24;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.1em}
.brand svg{width:34px;height:44px;fill:var(--lime);filter:drop-shadow(0 0 8px var(--lime))}
.cta{
  display:inline-flex;justify-content:center;align-items:center;text-align:center;
  background:var(--lime);color:var(--ink);padding:16px 26px;border-radius:999px;
  font-weight:900;box-shadow:0 0 28px #91ff7244;transition:.2s;border:0;cursor:pointer
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 34px #91ff7266}
.cta.alt{background:var(--ink);color:var(--lime)}
.cta.ghost{background:#ffffff12;color:white;border:1px solid #ffffff22}

.hero{
  min-height:760px;padding:145px 7vw 70px;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 75% 45%,#a00062 0,#5b003c99 25%,transparent 56%),
    linear-gradient(135deg,#170018,#450032)
}
.hero:before{
  content:"";position:absolute;width:700px;height:700px;right:-80px;top:-150px;
  border:5px solid #ff149344;border-radius:48%;
  box-shadow:0 0 0 55px #ff149322,0 0 0 110px #ff149322,0 0 0 165px #ff149311;
  transform:rotate(45deg)
}
.hero-copy,.hero-visual{position:relative;z-index:2}
.tag{color:var(--lime);font-size:.8rem;font-weight:900;letter-spacing:.18em}
.hero h1,.section-title{
  font-size:clamp(3.2rem,7vw,7rem);line-height:.86;letter-spacing:-.065em;
  margin:22px 0;font-weight:950
}
.hero h1 em,.section-title em{display:block;color:var(--hot);font-style:italic;text-shadow:0 0 28px #ff149344}
.lead{font-size:1.1rem;line-height:1.7;color:#efd0e4;max-width:620px}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:32px}
.hero-visual{display:grid;place-items:center;min-height:520px}
.bottle-stage{position:relative;width:min(440px,100%);height:500px;display:grid;place-items:center}
.orbit{position:absolute;width:470px;height:220px;border:4px solid var(--lime);border-radius:50%;filter:drop-shadow(0 0 10px var(--lime));transform:rotate(-12deg)}
.bottle{position:relative;z-index:3;width:275px;filter:drop-shadow(0 28px 32px #090006aa) drop-shadow(0 0 28px #ff149355)}
.bottle svg{display:block;width:100%;height:auto}
.bottle .body{fill:#ff1493;stroke:#090509;stroke-width:11;stroke-linejoin:round;stroke-linecap:round}
.bottle .label-bolt{fill:#91ff72;stroke:#090509;stroke-width:2.5}
.bottle .label-title{fill:#090509;font-weight:950;font-size:18px;text-anchor:middle;letter-spacing:1.8px}
.bottle .label-sub{fill:#090509;font-weight:900;font-size:8px;text-anchor:middle;letter-spacing:1.2px}

.ticker{padding:18px;background:var(--lime);color:var(--ink);font-weight:950;letter-spacing:.1em;text-align:center}

.offers{padding:100px 0;background:radial-gradient(circle at 20% 30%,#ff149329,transparent 42%),#160017}
.section-head{text-align:center;max-width:880px;margin:0 auto 44px}
.section-head .lead{margin-inline:auto}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.offer-card{
  background:linear-gradient(145deg,#5b0043,#290022);border:1px solid #ff55bc66;border-radius:26px;
  padding:28px;display:flex;flex-direction:column;min-height:380px;box-shadow:10px 10px 0 #0bff7b
}
.offer-card.featured{transform:translateY(-10px);border-color:var(--lime)}
.eyebrow{color:var(--lime);font-size:.75rem;font-weight:900;letter-spacing:.14em}
.offer-card h3{font-size:2.5rem;margin:12px 0 8px}
.offer-card .price{font-size:3rem;font-weight:950;margin:10px 0}
.offer-card p{color:#e7c8da;line-height:1.6}
.offer-card ul{padding-left:18px;color:#efd9e6;line-height:1.9}
.offer-card .cta{margin-top:auto;width:100%}

.booking{padding:105px 0;background:#23001f}
.booking-box{
  background:#fff;color:#181018;border-radius:28px;padding:28px;box-shadow:0 25px 70px #0005;overflow:hidden
}
.booking .section-head{margin-bottom:38px}

.steps{padding:100px 0;background:#2b0023}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:45px}
.steps-grid article{border-top:2px solid var(--pink);padding:25px 10px}
.steps-grid article>b{display:block;color:var(--lime);font-size:2.2rem;margin:24px 0}
.steps-grid p{color:#d5afc8;line-height:1.6}

.final{text-align:center;padding:90px 20px;background:var(--pink);color:var(--ink)}
.final .section-title{margin:18px 0 30px}
.final .section-title em{color:white;text-shadow:none}

.site-footer{padding:45px 0;background:#150017}
.site-footer .container{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.site-footer p{color:#c89bb8;text-align:right}
.site-footer small{grid-column:1/-1;padding-top:20px;border-top:1px solid #ffffff22;color:#805b73}

.payment-page{
  min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:radial-gradient(circle at 75% 25%,#a00062 0,#5b003c99 24%,transparent 52%),
  linear-gradient(135deg,#170018,#450032)
}
.payment-card{
  width:min(760px,100%);padding:48px;border:1px solid #ff55bc66;border-radius:30px;
  background:linear-gradient(145deg,#5b0043,#290022);box-shadow:16px 16px 0 #0bff7b;text-align:center
}
.payment-icon{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;margin:32px auto 20px;
  background:var(--lime);color:var(--ink);font-size:3rem;font-weight:950;box-shadow:0 0 30px #91ff7255
}
.payment-card h1{font-size:clamp(2.8rem,8vw,5.5rem);line-height:.9;letter-spacing:-.05em}
.payment-card h1 em{display:block;color:var(--hot);font-style:italic}
.payment-card p{color:#efd0e4;line-height:1.7;font-size:1.05rem;max-width:600px;margin:0 auto 28px}
.payment-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.content-page{padding:130px 0 70px;min-height:70vh;background:#190019}
.content-page article{max-width:900px;margin:auto}
.content-page h1{font-size:clamp(2.5rem,6vw,4.5rem)}
.content-page .entry-content{color:#ead5e3;line-height:1.8}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center}
  .lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .offer-grid,.steps-grid{grid-template-columns:1fr}
  .offer-card.featured{transform:none}
}
@media(max-width:520px){
  .site-header{height:72px}
  .site-header .container{width:calc(100% - 28px)}
  .brand svg{width:27px;height:36px}
  .brand span{font-size:.76rem}
  .site-header .cta{font-size:.72rem;padding:10px 13px}
  .hero{padding:105px 16px 34px;min-height:auto}
  .hero h1{font-size:clamp(2.65rem,13vw,4rem)}
  .hero-visual{min-height:400px;overflow:hidden}
  .bottle-stage{height:390px;max-width:340px}
  .bottle{width:205px}
  .orbit{width:310px;height:145px}
  .offers,.booking,.steps{padding:70px 0}
  .container{width:calc(100% - 28px)}
  .offer-card{padding:22px}
  .booking-box{padding:14px;border-radius:20px}
  .site-footer .container{grid-template-columns:1fr;text-align:center}
  .site-footer p{text-align:center}
  .payment-card{padding:30px 20px;box-shadow:8px 8px 0 #0bff7b}
}

/* =========================================================
   DELIVERY BOOKING — integración visual Pipoppers
   ========================================================= */
.booking-box{
  background:radial-gradient(circle at 100% 0%,#ff14931c,transparent 34%),linear-gradient(145deg,#310027,#1b0018);
  color:var(--white);border:1px solid #ff55bc55;
  box-shadow:0 25px 70px #0007,inset 0 0 0 1px #ffffff08;
}
.booking-box form,.booking-box .dbp-wrap,.booking-box .dbp-form,.booking-box .delivery-booking,.booking-box [class*="dbp-"]{color:var(--white)}
.booking-box label,.booking-box .dbp-label,.booking-box legend,.booking-box strong,.booking-box b{color:#fff4fb}
.booking-box p,.booking-box small,.booking-box .description,.booking-box .dbp-help,.booking-box .dbp-muted{color:#d9b7ce}
.booking-box input[type="text"],.booking-box input[type="email"],.booking-box input[type="tel"],.booking-box input[type="number"],
.booking-box input[type="date"],.booking-box input[type="time"],.booking-box textarea,.booking-box select{
  width:100%;background:#120010;color:#fff4fb;border:1px solid #ff55bc55;border-radius:14px;
  padding:13px 14px;min-height:48px;outline:none;box-shadow:none;
}
.booking-box textarea{min-height:100px;resize:vertical}
.booking-box input::placeholder,.booking-box textarea::placeholder{color:#9f7993}
.booking-box input:focus,.booking-box textarea:focus,.booking-box select:focus{
  border-color:var(--lime);box-shadow:0 0 0 3px #91ff7220,0 0 22px #91ff7214;
}
.booking-box input[type="radio"],.booking-box input[type="checkbox"]{accent-color:var(--lime)}
.booking-box button,.booking-box input[type="submit"],.booking-box .button,.booking-box .btn{
  background:var(--lime);color:var(--ink);border:0;border-radius:999px;min-height:46px;
  padding:12px 20px;font-weight:900;cursor:pointer;transition:.2s;box-shadow:0 0 24px #91ff7233;
}
.booking-box button:hover,.booking-box input[type="submit"]:hover,.booking-box .button:hover,.booking-box .btn:hover{
  transform:translateY(-1px);box-shadow:0 8px 28px #91ff7244;
}
.booking-box fieldset,.booking-box .dbp-card,.booking-box .dbp-section,.booking-box .dbp-panel{
  background:#ffffff08;border:1px solid #ffffff14;border-radius:18px;
}
.booking-box hr{border:0;border-top:1px solid #ffffff18}
.booking-box table{width:100%;border-collapse:collapse;color:var(--white)}
.booking-box th,.booking-box td{border-bottom:1px solid #ffffff14;padding:10px}
.booking-box th{color:var(--lime);text-align:left}
.booking-box select option{background:#190016;color:#fff4fb}
.booking-box .leaflet-container{border-radius:18px;border:1px solid #ff55bc44;overflow:hidden;box-shadow:0 16px 35px #0005}
.booking-box .leaflet-control-zoom a{background:#21001d !important;color:var(--lime) !important;border-color:#ffffff1a !important}
.booking-box .leaflet-popup-content-wrapper,.booking-box .leaflet-popup-tip{background:#21001d;color:#fff4fb}
.booking-box [class*="total"],.booking-box .total{color:var(--lime);font-weight:900}
@media(max-width:520px){
  .booking-box{padding:16px;border-radius:20px}
  .booking-box input,.booking-box textarea,.booking-box select,.booking-box button{font-size:16px}
}


/* =========================================================
   ESTADO DE PEDIDO — integrado al theme
   ========================================================= */
.order-status-page{
  min-height:100vh;
  padding:130px 20px 70px;
  background:
    radial-gradient(circle at 78% 18%,#a0006255 0,transparent 38%),
    linear-gradient(135deg,#170018,#35002d);
  color:var(--white);
}
.order-status-card{
  width:min(820px,100%);
  margin:0 auto;
  background:linear-gradient(145deg,#430037,#260020);
  border:1px solid #ff55bc55;
  border-radius:28px;
  padding:34px;
  box-shadow:16px 16px 0 #0bff7b;
}
.order-status-kicker{
  color:var(--lime);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.order-status-card h1{
  margin:10px 0 6px;
  font-size:clamp(2.5rem,7vw,4.8rem);
  line-height:.95;
  letter-spacing:-.05em;
}
.order-status-sub{
  color:#d8b7cd;
  line-height:1.6;
  margin:0 0 24px;
}
.order-status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  background:var(--lime);
  color:var(--ink);
  font-weight:900;
  margin-bottom:24px;
}
.order-status-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.order-status-item{
  background:#150017;
  border:1px solid #ffffff12;
  border-radius:16px;
  padding:16px;
}
.order-status-item.full{grid-column:1/-1}
.order-status-item span{
  display:block;
  color:#b996ad;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.order-status-item strong{
  color:#fff4fb;
  line-height:1.45;
}
.order-status-progress{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:26px 0;
}
.order-status-step{
  text-align:center;
  position:relative;
}
.order-status-step:before{
  content:"";
  display:block;
  height:5px;
  border-radius:999px;
  background:#ffffff18;
  margin-bottom:10px;
}
.order-status-step.is-done:before,
.order-status-step.is-current:before{background:var(--lime)}
.order-status-step span{
  color:#9e7c92;
  font-size:11px;
  font-weight:800;
}
.order-status-step.is-done span,
.order-status-step.is-current span{color:#fff4fb}
.order-status-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.order-status-error{
  text-align:center;
}
@media(max-width:620px){
  .order-status-page{padding:105px 14px 50px}
  .order-status-card{padding:24px 18px;box-shadow:8px 8px 0 #0bff7b}
  .order-status-grid{grid-template-columns:1fr}
  .order-status-item.full{grid-column:auto}

  /* Progreso horizontal también en móvil */
  .order-status-progress{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    align-items:start;
    margin:22px 0 24px;
    overflow:visible;
  }
  .order-status-step{
    text-align:center;
    min-width:0;
  }
  .order-status-step:before{
    width:100%;
    height:5px;
    margin:0 0 7px;
  }
  .order-status-step span{
    display:block;
    font-size:9px;
    line-height:1.15;
    white-space:normal;
    word-break:normal;
  }
}