/* ============================================================
   order-form.css — embedded COD order form (#pedido), the unified
   sticky CTA (.lt-sticky), and the exit-recovery popup.
   Shared by index.html + oferta(-2/-3).html so the checkout looks and
   behaves the same everywhere. Self-contained brand tokens.
   ============================================================ */
/* ============================================================
   CHECKOUT MODAL OVERLAY — #pedido is the overlay; .pedido (the sheet)
   keeps the brand tokens + .pg-* scoping. Hidden by default.
   ============================================================ */
.lt-modal {
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(0,0,0,0.55);
}
.lt-modal.open { display:flex; align-items:flex-start; justify-content:center; }
/* The SHEET is the scroll container — capped to the viewport so the long
   form scrolls internally while the body stays locked. */
.lt-modal-sheet {
  position:relative; width:100%;
  min-height:100vh; min-height:100dvh;
  max-height:100vh; max-height:100dvh;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.lt-modal-close {
  position:fixed; top:10px; right:12px; z-index:5;
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--ink); background:#fff; color:var(--ink);
  font-size:24px; line-height:1; cursor:pointer; box-shadow:2px 2px 0 var(--ink);
}
.lt-modal-close:active { transform:translate(2px,2px); box-shadow:none; }
/* lock background scroll while the modal is open (iOS-safe) */
body.lt-modal-lock { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
@media (min-width:760px) {
  .lt-modal.open { align-items:center; padding:24px; }
  .lt-modal-sheet { width:auto; max-width:600px; min-height:0; max-height:90vh; border:3px solid var(--ink); border-radius:14px; box-shadow:6px 6px 0 var(--ink); }
  .lt-modal-close { position:absolute; }
}

.pedido {
  --crema:#F5EFE0; --bg-warm:#E8E0CF; --ink:#1A1A1A; --ink-soft:#2A2A28;
  --muted:#8A867E; --yellow:#FFD300; --blue:#0033A0; --red:#E63946;
  --red-deep:#A8141C; --green:#1f8a3b; --wa:#25D366;
  background:var(--crema); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
}
.pedido * { box-sizing:border-box; }
.pedido .pedido-wrap { width:100%; max-width:560px; margin:0 auto; padding:46px 16px calc(32px + env(safe-area-inset-bottom)); }
.pedido .pedido-kicker { text-align:center; font-family:'Bebas Neue',sans-serif; letter-spacing:1px; color:var(--red-deep); font-size:18px; }
.pedido .pedido-title { text-align:center; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(28px,8vw,40px); line-height:0.98; margin:2px 0 18px; }
.pedido .pedido-title em { color:var(--blue); font-style:normal; }
.pedido .pg-step { font-family:'Bebas Neue',sans-serif; letter-spacing:0.6px; font-size:15px; color:var(--ink-soft); margin:18px 0 8px; }

/* ---- Offer radio cards ---- */
.pg-offers { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.pg-offer { position:relative; display:block; cursor:pointer; }
.pg-offer input { position:absolute; opacity:0; pointer-events:none; }
.pg-offer .pg-card {
  height:100%; background:#fff; border:2px solid var(--ink); border-radius:9px;
  box-shadow:2px 2px 0 var(--ink); padding:10px 6px; text-align:center;
  transition:transform .08s ease;
}
/* real product thumbnails — single shot (1 body) or overlapping cluster (2/3) */
.pg-o-thumb { display:flex; justify-content:center; align-items:center; height:44px; margin-bottom:5px; }
.pg-o-thumb img { width:42px; height:42px; object-fit:cover; object-position:center 20%; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); background:#fff; }
.pg-o-thumb img + img { margin-left:-15px; }
.pg-offer .pg-o-name { font-family:'Anton',sans-serif; font-size:14px; text-transform:uppercase; line-height:1; }
.pg-offer .pg-o-price { font-family:'Anton',sans-serif; font-size:21px; color:var(--blue); line-height:1; margin:5px 0 3px; }
.pg-offer .pg-o-note { font-size:10px; font-weight:700; color:var(--red-deep); line-height:1.15; min-height:1.1em; }
.pg-offer .pg-o-badge { display:inline-block; margin-top:6px; background:var(--ink); color:#fff; font-family:'Bebas Neue',sans-serif; font-size:10px; letter-spacing:0.4px; padding:2px 6px; border-radius:10px; }
.pg-offer input:checked + .pg-card { border-color:var(--blue); box-shadow:3px 3px 0 var(--blue); background:#fff; }
.pg-offer input:checked + .pg-card .pg-check { display:block; }
.pg-offer .pg-check { display:none; position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; line-height:22px; border:2px solid #fff; z-index:2; }
/* dominant 3rd card */
.pg-offer.pg-hot .pg-card { border:3px solid var(--yellow); box-shadow:3px 3px 0 var(--ink); }
.pg-offer.pg-hot input:checked + .pg-card { border-color:var(--red); box-shadow:3px 3px 0 var(--red); }
.pg-offer.pg-hot .pg-o-badge { background:var(--red); }
.pg-offer.pg-hot .pg-o-price { color:var(--red-deep); }

/* ---- Variant rows ---- */
.pg-variants { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.pg-vrow { background:#fff; border:2px solid var(--ink); border-radius:9px; padding:10px 12px; }
.pg-vrow .pg-vrow-h { font-family:'Bebas Neue',sans-serif; letter-spacing:0.5px; font-size:14px; margin-bottom:6px; }
.pg-gorra-h { color:var(--red-deep); }
/* talla-única reassurance under the color selectors */
.pg-talla-note { font-size:12px; color:var(--ink-soft); font-weight:600; margin:8px 0 2px; text-align:center; }

/* ---- Fields ---- */
.pg-field { margin-bottom:11px; }
.pg-field label { display:block; font-family:'Bebas Neue',sans-serif; letter-spacing:0.5px; font-size:14px; margin-bottom:4px; }
.pg-field .pg-req { color:var(--red); }
.pg-field .pg-help { font-size:11px; color:var(--muted); font-weight:600; margin-top:3px; }
.pedido select, .pedido input[type=text], .pedido input[type=email], .pedido input[type=tel] {
  width:100%; padding:12px 12px; font-size:16px; font-family:inherit; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:7px; appearance:none;
}
.pedido select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231A1A1A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.pedido .pg-field.pg-invalid input, .pedido .pg-field.pg-invalid select { border-color:var(--red); }
.pedido .pg-err { display:none; color:var(--red-deep); font-size:11px; font-weight:700; margin-top:3px; }
.pedido .pg-field.pg-invalid .pg-err { display:block; }
.pg-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ---- Order bump (one continuous SVG marching-dash outline) ---- */
.pg-bump {
  position:relative;
  display:flex; gap:10px; align-items:flex-start; background-color:#fff;
  border:none; border-radius:9px; padding:11px 12px; margin-top:14px; cursor:pointer;
}
/* Single rounded-rect stroke = dashes travel seamlessly around all four
   corners with no desync/gaps (vs. the old 4 separate gradient edges). */
.pg-bump-outline {
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden; pointer-events:none;
}
/* rect inset by half the stroke so the full 3px sits INSIDE the box (no
   bleed); CSS geometry props (calc) keep it pinned to the .pg-bump size. */
.pg-bump-outline rect {
  x:1.5px; y:1.5px; width:calc(100% - 3px); height:calc(100% - 3px); rx:7px; ry:7px;
  fill:none; stroke:var(--red); stroke-width:3;
  stroke-dasharray:9 5; vector-effect:non-scaling-stroke;
  animation:lt-dash 1.5s linear infinite;
}
.pg-bump input { width:20px; height:20px; flex:0 0 auto; margin-top:1px; accent-color:var(--blue); animation:lt-nudge 2.5s ease-in-out infinite; }
.pg-bump .pg-bump-txt { font-size:13px; line-height:1.35; }
.pg-bump .pg-bump-txt strong { color:var(--red-deep); }

/* ---- Summary ---- */
.pg-summary { background:var(--ink); color:#fff; border-radius:10px; padding:14px 16px; margin-top:16px; }
.pg-sum-row { display:flex; justify-content:space-between; font-size:14px; padding:3px 0; }
.pg-sum-row.pg-sum-disc { color:var(--yellow); }
.pg-sum-row .pg-free { color:var(--yellow); font-weight:700; }
.pg-sum-total { display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid #ffffff33; margin-top:8px; padding-top:8px; }
.pg-sum-total .pg-t-label { font-family:'Bebas Neue',sans-serif; letter-spacing:0.5px; font-size:16px; }
.pg-sum-total .pg-t-val { font-family:'Anton',sans-serif; font-size:28px; color:var(--yellow); }

/* ---- Trust strip ---- */
.pg-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin:18px 0 6px; }
.pg-trust span { font-size:12px; font-weight:700; color:var(--ink-soft); }
.pg-trust-note { text-align:center; font-size:12px; color:var(--muted); margin-bottom:14px; }

/* ---- Submit CTA ---- */
.pg-submit {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--wa); color:#fff; border:3px solid var(--ink); border-radius:10px;
  box-shadow:4px 4px 0 var(--ink); padding:15px 14px; cursor:pointer;
  font-family:'Anton',sans-serif; text-transform:uppercase; line-height:1.05; text-align:center;
}
.pg-submit .pg-submit-main { font-size:clamp(15px,4.4vw,19px); }
.pg-submit .pg-submit-sub { font-family:'Inter',sans-serif; text-transform:none; font-size:12px; font-weight:600; opacity:0.95; }
.pg-submit:not(:disabled) { animation:lt-pulse-cod 2s ease-in-out infinite, lt-wiggle-cod 4s ease-in-out infinite; }
.pg-submit:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.pg-submit:disabled { background:#9fb0a6; cursor:not-allowed; box-shadow:4px 4px 0 #6f7a73; border-color:#6f7a73; animation:none; }
.pg-submit-status { text-align:center; font-size:13px; font-weight:700; margin-top:10px; min-height:1.1em; }
.pg-submit-status.err { color:var(--red-deep); }
.pg-secondary { text-align:center; margin-top:14px; }
.pg-secondary a { font-size:13px; color:var(--blue); font-weight:700; text-decoration:underline; }

/* Phase 2 placeholder (prepaid −5%) lives here — see order-form.js note. */

/* ============================================================
   UNIFIED STICKY CTA (.lt-sticky) — replaces the native sticky CTAs.
   Hide the page-native ones so there's a single consistent button.
   ============================================================ */
.sticky-cta, #stickyBuy, #waFloat, .wa-float, .sticky-buy { display:none !important; }
/* room for the detached floating pill so it never covers footer/content */
@media (max-width:759px) { body { padding-bottom:96px; } }
/* DETACHED FLOATING PILL — looks like a button, not a footer banner:
   margins off the edges, rounded, drop shadow, leading cart icon. The
   whole pill is one tappable button that opens the modal. Brand red for
   max contrast against the crema/blue/yellow bands. */
.lt-sticky {
  position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:150;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:11px;
  min-height:60px; padding:10px 18px;
  text-decoration:none; cursor:pointer;
  background:#25D366; color:#fff;  /* = --wa, matches the in-modal COD button (green = pedir) */
  border:2px solid #1A1A1A; border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,0.28);
  font-family:'Anton',sans-serif; text-transform:uppercase; line-height:1.05;
  animation:lt-pulse-sticky 2s ease-in-out infinite;
}
.lt-sticky .lt-s-icon { font-size:26px; line-height:1; flex:0 0 auto; }
.lt-sticky .lt-s-text { display:flex; flex-direction:column; align-items:flex-start; }
.lt-sticky .lt-s-main { font-size:19px; letter-spacing:0.5px; }
.lt-sticky .lt-s-sub { font-family:'Inter',sans-serif; text-transform:none; font-size:11px; font-weight:600; opacity:0.95; }
.lt-sticky:active { transform:translateY(1px); box-shadow:0 4px 13px rgba(0,0,0,0.3); }
/* never cover the checkout modal while it is open */
body.lt-modal-lock .lt-sticky { display:none !important; }
@media (min-width:760px) {
  .lt-sticky { left:auto; right:24px; bottom:24px; min-height:0; padding:12px 22px; }
  .lt-sticky .lt-s-main { font-size:17px; }
}

/* ============================================================
   EXIT-RECOVERY POPUP (-$10.000, honest persistent countdown)
   ============================================================ */
.lt-recovery { position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,0.62); }
.lt-recovery.open { display:flex; }
.lt-rec-box { position:relative; max-width:420px; width:100%; background:#F5EFE0; color:#1A1A1A; border:3px solid #1A1A1A; box-shadow:6px 6px 0 #1A1A1A; border-radius:14px; padding:26px 22px 22px; text-align:center; }
.lt-rec-close { position:absolute; top:8px; right:12px; background:none; border:none; font-size:24px; cursor:pointer; color:#2A2A28; line-height:1; }
.lt-rec-flag { font-size:34px; }
.lt-rec-title { font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(24px,7vw,32px); line-height:1; margin:4px 0 8px; }
.lt-rec-body { font-size:15px; color:#2A2A28; margin-bottom:12px; }
.lt-rec-body strong { color:#A8141C; }
.lt-rec-timer { font-family:'Anton',sans-serif; font-size:40px; color:#E63946; letter-spacing:2px; margin-bottom:14px; }
.lt-rec-primary { display:block; width:100%; background:#1f8a3b; color:#fff; border:3px solid #1A1A1A; box-shadow:4px 4px 0 #1A1A1A; border-radius:9px; padding:14px 12px; font-family:'Anton',sans-serif; text-transform:uppercase; font-size:15px; line-height:1.1; cursor:pointer; }
.lt-rec-primary:active { transform:translate(2px,2px); box-shadow:2px 2px 0 #1A1A1A; }
.lt-rec-dismiss { display:inline-block; margin-top:12px; background:none; border:none; color:#8A867E; font-size:13px; font-weight:600; text-decoration:underline; cursor:pointer; }

/* ============================================================
   ATTENTION MICRO-ANIMATIONS — punchy: ~0.5s pulse + ~1.5s rest (2s loop),
   scale 1→1.06 with shadow bloom, plus a ~4s wiggle on the COD button.
   Pulse uses the independent `scale` property and wiggle uses `translate`
   so the two compose on the same element without conflict. All disabled
   under reduced-motion; transform/background-position only (no layout shift).
   ============================================================ */
@keyframes lt-pulse-cod {
  0%, 25%, 100% { scale: 1;    box-shadow: 4px 4px 0 #1A1A1A; }
  12%           { scale: 1.06; box-shadow: 6px 6px 0 #1A1A1A, 0 12px 30px rgba(0,0,0,0.32); }
}
@keyframes lt-wiggle-cod {
  0%, 86%, 100% { translate: 0 0; }
  89% { translate: -4px 0; }
  92% { translate: 4px 0; }
  95% { translate: -3px 0; }
  98% { translate: 2px 0; }
}
@keyframes lt-pulse-sticky {
  0%, 25%, 100% { transform: scale(1);    box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
  12%           { transform: scale(1.06); box-shadow: 0 14px 36px rgba(0,0,0,0.45); }
}
/* marching dashes around the order-bump — one continuous SVG rect stroke,
   travels via stroke-dashoffset (shift 2 full 14px periods = 28 per 1.5s
   loop → fast + seamless, no corner desync) */
@keyframes lt-dash {
  to { stroke-dashoffset: -28; }
}
/* "tap me" nudge on the bump checkbox — pronounced scale + little tilt */
@keyframes lt-nudge {
  0%, 82%, 100% { transform: scale(1) rotate(0); }
  88% { transform: scale(1.28) rotate(-8deg); }
  94% { transform: scale(1.28) rotate(8deg); }
}
/* sticky doesn't pulse while the modal is open (it's hidden then anyway) */
body.lt-modal-lock .lt-sticky { animation: none !important; }

/* Compatible fallback — older engines (Chrome < 104, old Android System
   WebView) lack the independent `scale`/`translate` properties used by
   lt-pulse-cod + lt-wiggle-cod. There they degrade to no animation, which is
   harmless (the button stays fully visible + tappable). This restores a
   transform-based pulse so the COD CTA still draws the eye. The wiggle is
   dropped on those engines (transform can't run two competing animations);
   the pulse is the primary cue. Nothing about layout or interaction depends
   on any of this. */
@supports not (translate: 0px) {
  @keyframes lt-pulse-cod-fb {
    0%, 25%, 100% { transform: scale(1);    box-shadow: 4px 4px 0 #1A1A1A; }
    12%           { transform: scale(1.06); box-shadow: 6px 6px 0 #1A1A1A, 0 12px 30px rgba(0,0,0,0.32); }
  }
  .pg-submit:not(:disabled) { animation: lt-pulse-cod-fb 2s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-submit, .pg-submit:not(:disabled), .lt-sticky, .pg-bump, .pg-bump input, .pg-bump-outline rect { animation: none !important; }
}