/* =========================================================
   PopVerso · Kits Navideños Corporativos
   Estilos base del diseño original + capa responsive / iOS.
   Los valores de diseño viven en los style="" del HTML; aquí
   solo se añaden ajustes de adaptabilidad (con !important
   únicamente donde hay que sobrescribir un estilo en línea).
   ========================================================= */

/* ---------- Base (original) ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#FFFFFF;color:#24123A;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#24123A}a:hover{color:#8027A9}
*{box-sizing:border-box}
img,svg{max-width:100%}
.pv-btn{transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.pv-btn:active{transform:translateY(0) scale(.98)}
.pv-btn:focus-visible,.pv-field:focus-visible,.pv-faq:focus-visible,.pv-arrow:focus-visible{outline:3px solid #8027A9;outline-offset:3px}
.pv-card{transition:transform .2s ease, box-shadow .2s ease}
.pv-field{transition:border-color .15s ease, box-shadow .15s ease}
.pv-field:focus{border-color:#FF207F;box-shadow:0 0 0 4px rgba(255,32,127,.15);outline:none}
.pv-pill input{position:absolute;opacity:0;width:1px;height:1px}
.pv-pill span{transition:all .15s ease}
.pv-pill input:checked + span{background:#24123A;color:#FFFFFF;border-color:#24123A}
.pv-pill input:focus-visible + span{outline:3px solid #8027A9;outline-offset:2px}
.pv-track{scrollbar-width:thin;scrollbar-color:#FF207F #FFD9EA}
.pv-track::-webkit-scrollbar{height:8px}
.pv-track::-webkit-scrollbar-track{background:#FFD9EA;border-radius:8px}
.pv-track::-webkit-scrollbar-thumb{background:#FF207F;border-radius:8px}

/* Hover solo en dispositivos con puntero real: evita estados "pegados" al tocar en iOS/Android */
@media (hover:hover) and (pointer:fine){
  .pv-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(36,18,58,.16)}
  .pv-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,18,58,.12)}
  .pv-arrow:hover{background:#24123A !important;color:#FFFFFF !important}
}

/* ---------- Animaciones (original) ---------- */
@keyframes pvUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pvDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes pvPop{0%{opacity:0;scale:.6}65%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes pvFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes pvWiggle{0%,100%{rotate:0deg}50%{rotate:8deg}}
header{animation:pvDown .6s cubic-bezier(.2,.8,.2,1) both}
#inicio h1{animation:pvUp .75s cubic-bezier(.2,.8,.2,1) .1s both}
#inicio h1 + p{animation:pvUp .75s cubic-bezier(.2,.8,.2,1) .22s both}
#inicio ul{animation:pvUp .75s cubic-bezier(.2,.8,.2,1) .34s both}
#inicio ul + div{animation:pvUp .8s cubic-bezier(.2,.8,.2,1) .46s both}
#cotizar form{animation:pvUp .85s cubic-bezier(.2,.8,.2,1) .3s both}
.pv-sticker-hero{animation:pvPop .7s cubic-bezier(.2,.8,.2,1) .8s both, pvFloat 4s ease-in-out 1.6s infinite}
.pv-star{animation:pvPop .6s cubic-bezier(.2,.8,.2,1) .5s both, pvWiggle 3.2s ease-in-out 1.2s infinite}
.pv-sticker-float{animation:pvFloat 4.5s ease-in-out infinite}
.pv-js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .7s ease var(--d,0s), transform .75s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.pv-js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}.pv-js [data-reveal]{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---------- Correcciones globales ---------- */
/* overflow-x:hidden convertía el contenedor en scroll-container y rompía el header sticky.
   clip recorta igual sin crear scroll-container. */
.pv-page{overflow-x:hidden}
@supports (overflow:clip){.pv-page{overflow-x:clip}}

/* Elementos táctiles: sin retardo de doble toque */
a,button,label,input,select,textarea{touch-action:manipulation}

/* Safe areas (notch / Dynamic Island en horizontal, barra inferior) */
.pv-wrap{padding-left:max(24px, env(safe-area-inset-left)) !important;padding-right:max(24px, env(safe-area-inset-right)) !important}
header{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:env(safe-area-inset-bottom)}

/* Anclas: que el header sticky no tape el destino */
[id]{scroll-margin-top:calc(var(--pv-header-h, 96px) + 12px)}

/* Botones con texto largo: nunca desbordan, centran el texto si saltan de línea */
.pv-btn{max-width:100%;text-align:center}

/* Input de fecha en iOS Safari: altura/ancho/alineación consistentes */
input[type="date"].pv-field{-webkit-appearance:none;appearance:none;width:100%;min-width:0;display:block;line-height:44px}
input[type="date"].pv-field::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"].pv-field::-webkit-calendar-picker-indicator{opacity:.7}
.pv-field{width:100%;min-width:0}

/* Carrusel: inercia nativa y sin "rebote" que arrastre la página */
.pv-track{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-padding-left:4px}

/* FAQ: estados abierto/cerrado (antes los calculaba el runtime de React) */
.pv-faq-item{background:#FFFFFF;border:2px solid #F3E2EA}
.pv-faq-item.is-open{background:#FFF0F6;border-color:#FF207F}
.pv-faq-ic{background:#FFF0F6;color:#24123A}
.pv-faq-item.is-open .pv-faq-ic{background:#FF207F;color:#FFFFFF}
.pv-faq[aria-expanded="true"] .pv-ic-plus,.pv-faq[aria-expanded="false"] .pv-ic-minus{display:none}
.pv-faq-a[hidden]{display:none}

/* Estado del formulario */
.pv-status{margin:0;font-size:15px;line-height:1.45;font-weight:700;text-align:center}
.pv-status:empty{display:none}
.pv-status.is-ok{color:#24123A}
.pv-status.is-error{color:#C4005A}
.pv-btn[disabled]{opacity:.7;cursor:progress}
.pv-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* ---------- Tablet (≤ 900px) ---------- */
@media (max-width:900px){
  .pv-sec-pad{padding-top:80px !important;padding-bottom:88px !important}
  .pv-gap{gap:44px !important}
}

/* ---------- Móvil (≤ 640px) ---------- */
@media (max-width:640px){
  /* Header compacto: logo + CTA en una sola línea (antes se partía y ocupaba ~200px fijos) */
  .pv-header-in{padding-top:10px !important;padding-bottom:10px !important;flex-wrap:nowrap !important;gap:12px !important}
  .pv-logo{height:60px !important}
  .pv-header-cta{min-height:44px !important;padding:0 16px !important;font-size:15px !important;white-space:nowrap}

  /* Ritmo vertical más contenido */
  .pv-sec-pad{padding-top:64px !important;padding-bottom:80px !important}
  .pv-gap{gap:36px !important}
  .pv-hero-in{padding-top:60px !important;padding-bottom:104px !important;gap:56px !important}

  /* Estrellas decorativas: más pequeñas y lejos del texto */
  .pv-star-hero-a{width:46px !important;height:46px !important;top:8px !important;left:3% !important}
  .pv-star-hero-b{display:none}
  .pv-star-why{width:60px !important;height:60px !important;left:-6px !important;top:-14px !important}
  .pv-star-promo{width:40px !important;height:40px !important;top:14px !important;right:16px !important}
  .pv-star-final{width:46px !important;height:46px !important;top:72px !important;left:auto !important;right:5% !important}

  /* Formularios */
  .pv-form{padding:28px 20px 24px !important;border-radius:28px !important}
  .pv-form-title{font-size:26px !important}
  .pv-sticker-hero{width:108px !important;top:-58px !important;right:-6px !important}
  .pv-pills{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}

  /* Bloques de imagen */
  .pv-sol-media{padding:16px 12px 44px 0 !important}
  .pv-why-media{max-width:380px;margin:0 auto;width:100%}

  /* Catálogo */
  .pv-cat-head{margin-bottom:28px !important}
  .pv-card-kit{flex-basis:min(300px, 84%) !important}

  /* Bloque promo */
  .pv-promo{border-radius:32px !important;padding:60px 22px 36px !important}
  .pv-promo-copy p{font-size:18px !important}

  /* FAQ */
  .pv-faq{font-size:18px !important;padding:14px 16px 14px 18px !important}
  .pv-faq-a{padding:0 18px 20px !important;font-size:16px !important}

  /* Aviso de fechas */
  .pv-note{padding:16px 18px !important;align-items:flex-start !important;border-radius:20px !important}
  .pv-note p{font-size:16px !important}

  /* Botones grandes: un poco menos de padding lateral */
  .pv-btn-lg{padding:0 22px !important;font-size:18px !important}

  /* Footer */
  .pv-footer-logo{height:132px !important}
}

/* ---------- Móvil pequeño (≤ 380px: Android compactos) ---------- */
@media (max-width:380px){
  .pv-wrap{padding-left:max(18px, env(safe-area-inset-left)) !important;padding-right:max(18px, env(safe-area-inset-right)) !important}
  .pv-logo{height:52px !important}
  .pv-header-cta{padding:0 14px !important;font-size:14px !important}
  .pv-form{padding:26px 16px 22px !important}
  .pv-hero-chips{grid-template-columns:1fr !important}
}

/* ---------- Horizontal en teléfono (poca altura) ---------- */
@media (max-height:500px) and (orientation:landscape){
  .pv-logo{height:52px !important}
  .pv-header-in{padding-top:6px !important;padding-bottom:6px !important}
}