/* ===== Paleta + base moderna ===== */
:root{
  --bg: #0b0f1f;
  --bg-2: #0d1326;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.04);
  --stroke: #263056;
  --fg: #e7ebf5;
  --muted: #9aa7c7;
  --indigo: #8ea0ff;
  --accent: #5b8cff;
  --accent-2: #6ef3ff;
  --danger: #ff6b6b;
  --ok: #36d399;
  --shadow: 0 30px 90px rgba(0, 0, 0, .45);

  --r: 18px;
  --sp-1: clamp(8px, 1.8vw, 12px);
  --sp-2: clamp(12px, 2.8vw, 16px);
  --sp-3: clamp(16px, 4vw, 22px);
  --sp-4: clamp(22px, 6vw, 32px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(124, 140, 255, .14), transparent),
    radial-gradient(900px 600px at 90% -20%, rgba(79, 139, 255, .10), transparent),
    linear-gradient(180deg, #0b0f1f, #0a0e1e 55%, #0a1124);
}

/* Utils */
.container { width: min(1080px, 100%); margin-inline: auto; padding: 0 var(--sp-3); }
.muted { color: var(--muted); }
.tiny { color: var(--muted); font-size: 12px; }
.w-full { width: 100%; }
.sr-only {
  position: absolute;
  inline-size:1px; block-size:1px; /* lógicas */
  width:1px; height:1px;           /* fallback */
  clip:rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.mt-16{ margin-top:16px; } .mb-8{ margin-bottom:8px; } .mb-10{ margin-bottom:10px; }
.center { text-align: center; }

/* Hero */
.hero { padding: var(--sp-4) 0; }
.hero-title {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height:1.15; margin:0 0 8px; font-weight:900;
  letter-spacing: .2px;
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* Fallback + mejora progresiva para color-mix */
.hero-sub {
  margin:0 0 20px;
  font-size: clamp(14px, 2.6vw, 16px);
  color: var(--muted);
}
@supports (color: color-mix(in srgb, white, black)) {
  .hero-sub { color: color-mix(in srgb, var(--muted) 90%, #fff 10%); }
}

.hero-grid { display:grid; gap: var(--sp-3); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }

/* Tarjetas (glass) */
.tile, .price-card {
  border:1px solid color-mix(in srgb, var(--stroke) 88%, transparent);
  border-radius: calc(var(--r) + 2px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari */
}
.tile { padding: var(--sp-3); display:flex; flex-direction:column; }
.tile h2, .tile h3 { margin:0 0 10px; }

/* Scroll interno para info */
.tile.scroll{
  max-block-size: min(78vh, 760px);
  max-height: min(78vh, 760px); /* fallback */
}
.tile-head{ padding-bottom: 8px; }
.tile-body{
  overflow:auto; overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  padding-right: 6px; /* un poco más para scrollbars anchas */
}

/* Listas */
.bullets { margin:0 0 var(--sp-2); padding-left:20px; }
.bullets li{ margin:10px 0; line-height:1.6; }

/* Price card */
.price-card { padding: var(--sp-3); display:flex; flex-direction:column; gap: var(--sp-2); }
.price-head { display:flex; align-items:center; justify-content:center; }
.stock { font-size:13px; color: var(--muted); display:block; }

/* Precio */
.price-row{
  display:flex; align-items: baseline; justify-content:center;
  gap:8px; margin:10px 0; flex-wrap: wrap;
}
.price-label{ font-size:13px; color: var(--muted); font-weight:600; }
.price-big{
  font-size: clamp(34px, 9.5vw, 30px); font-weight:900; color: var(--indigo);
  line-height:1; text-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.price-currency{ color:#c9cfe0; font-size:14px; }

/* Inputs base */
.field{ display:grid; gap:6px; }
.label{ font-size:13px; color: var(--muted); }
.input{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25); color: var(--fg);
  font-size:16px;
}
.error{ color: var(--danger); font-size:14px; margin:4px 0 0; }

/* Botones */
.btn{
  appearance:none; border:1px solid var(--stroke);
  background: var(--surface-2);
  padding:12px 14px; color: var(--fg);
  border-radius:14px; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s, background .2s, border-color .2s;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity:.6; cursor: not-allowed; }
.btn-primary{
  position:relative; background: linear-gradient(180deg, #8ea0ff, #5b8cff);
  border-color:#5b8cff; color:#0b1022; font-weight:800;
}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  /* Shine */
  -webkit-mask: linear-gradient(110deg, transparent 40%, #fff 50%, transparent 60%) 0 0/250% 100% no-repeat;
          mask: linear-gradient(110deg, transparent 40%, #fff 50%, transparent 60%) 0 0/250% 100% no-repeat;
  mix-blend-mode: overlay;
}
.btn-primary:hover::after{ animation: shine 1.2s linear; }
@keyframes shine { from{ mask-position:0 0; } to{ mask-position:250% 0; } }
.btn-ghost{ background: transparent; }

/* ==== Control de cantidad (centrado, compacto, sin flechas) ==== */
.field-qty{ align-items:center; justify-items:center; }
.qty{
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.btn-qty{
  width: 42px; height: 42px; padding: 0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px; font-size: 22px; line-height: 1;
}
.qty .qty-input{
  text-align: center;
  width: 76px;
  padding: 10px 8px;
  font-weight: 700;
}

/* Ocultar flechas del input number */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.no-spinners{ -moz-appearance: textfield; }
input[type="number"]{ appearance: textfield; } /* Safari/iOS */

/* FAQ / details */
.faq{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden; /* mejor soporte que clip */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  margin: 10px 0;
}
.faq > summary{
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: var(--sp-2); cursor: pointer; background: transparent; user-select: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before{
  content:"";
  inline-size: 12px; block-size: 12px;
  background: currentColor;
  transition: transform .18s ease; margin-right: 2px;
  /* Icono con máscara + prefijo Safari */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 6l6 6-6 6"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 6l6 6-6 6"/></svg>') center/contain no-repeat;
}
.faq[open] > summary::before{ transform: rotate(90deg); }
.faq[open] > summary{ border-bottom: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent); }
.faq > *:not(summary){ padding: 0 var(--sp-2) var(--sp-2); }
.faq > *:not(summary) > :first-child{ margin-top: 0; }
.faq > *:not(summary) > :last-child { margin-bottom: 0; }
.faq[open] > *:not(summary){ animation: faqFade .22s ease; }
@keyframes faqFade{ from{ opacity: 0; transform: translateY(-2px); } to{ opacity: 1; transform: translateY(0); } }

/* Caja informativa */
.box{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: calc(var(--r) - 2px);
  padding: var(--sp-2);
}

/* Paneles y avisos usados por el HTML */
.panel{ margin-top: var(--sp-2); }
.alert{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: var(--sp-2);
}
.note{
  background: rgba(110, 243, 255, .08);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: calc(var(--r) - 4px);
  padding: 8px 10px;
}

/* intl-tel-input tweaks */
.iti{ width:100%; }
.iti--separate-dial-code input[type="tel"]{ padding-left:98px !important; }
.iti__country-list{ max-height:240px; }

/* Focus */
:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Responsive */
@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .price-card{ order:-1; }
  .hero-title{ font-size: clamp(24px, 7vw, 34px); }
  .tile.scroll{ max-block-size: 65vh; max-height: 65vh; }
}
@media (max-width: 420px){
  body{ font-size:15.5px; }
  .tile, .price-card{ padding:14px; }
  .btn{ min-height:50px; }
}

/* Tap highlight */
* { -webkit-tap-highlight-color: transparent; }

/* ===== Alineación y refinado del total ===== */
.price-row{ gap: 8px; }
.price-big{ line-height:1; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ===== Compactar SOLO el lado derecho (price-card) ===== */
/* Reduce interlineado y espacios verticales sin afectar el resto del sitio */
.price-card{
  --sp-2: 10px;     /* menos separación entre bloques dentro de la tarjeta */
  line-height: 1.4; /* interlineado más compacto que el global (1.6) */
}

/* Reducir márgenes por defecto de tipografía dentro del card */
.price-card :is(p, ul, ol){ margin: 6px 0; }
.price-card li{ margin: 4px 0; }

/* Ajustes finos específicos */
.price-card .field{ gap: 4px; }          /* antes 6px */
.price-card .price-row{ margin: 6px 0; } /* antes 10px */
.price-card .panel{ margin-top: 10px; }  /* antes 16px */

/* (Opcional) aún más compacto en móviles pequeños */
@media (max-width: 420px){
  .price-card{ --sp-2: 8px; line-height: 1.35; }
  .price-card :is(p, ul, ol){ margin: 4px 0; }
}