/* ===============================================================================
   TIENDA DIGITAL EXCLUSIVA - ESTÉTICA OBSIDIAN DE ALTA CONVERSIÓN
   OPTIMIZACIÓN MILIMÉTRICA PARA MÓVILES (CERO DESBORDES, TIPOGRAFÍA FLUIDA)
=============================================================================== */

:root {
  --bg-primary: #06080d; --bg-secondary: #0b0f19;
  --accent-orange: #ff6b35; --accent-glow: rgba(255, 107, 53, 0.45);
  --success-green: #10b981; --success-glow: rgba(16, 185, 129, 0.4);
  --stripe: #635bff; --text-main: #ffffff; --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.12); --radius: 18px;
  --font: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { 
  font-family: var(--font); background-color: var(--bg-primary); color: var(--text-main); 
  line-height: 1.5; width: 100%; max-width: 100%; overflow-x: hidden; 
  background-image: radial-gradient(at 15% 10%, rgba(255, 107, 53, 0.08) 0px, transparent 70%); 
  padding-bottom: 70px;
}

/* MARQUESINA AJUSTADA PARA PANTALLAS CHICAS */
.top-marquee { background: linear-gradient(90deg, #ff3d00, #ff6b35, #e75a22, #ff3d00); background-size: 300% 100%; animation: grad 8s ease infinite; color: #fff; font-weight: 800; font-size: clamp(0.72rem, 2.5vw, 0.86rem); padding: 8px 0; overflow: hidden; white-space: nowrap; box-shadow: 0 4px 15px var(--accent-glow); width: 100%; position: relative; z-index: 1000; }
.top-marquee-track { display: inline-block; animation: scroll 28s linear infinite; }
@keyframes scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
@keyframes grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

header { position: sticky; top: 0; background: rgba(6, 8, 13, 0.93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); z-index: 900; padding: 12px 0; width: 100%; }
.container { width: 92%; max-width: 1150px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.logo { font-size: clamp(1.2rem, 4vw, 1.55rem); font-weight: 900; color: #fff; display: flex; align-items: center; gap: 8px; }
.logo span { color: var(--accent-orange); text-shadow: 0 0 15px rgba(255, 107, 53, 0.5); }

/* HERO SECCIÓN CON TIPOGRAFÍA FLUIDA CLAMP() PROPORCIONAL AL TELEFONO */
.hero { text-align: center; padding: 40px 0 30px; width: 92%; max-width: 880px; margin: 0 auto; }
.hero h1 { 
  font-size: clamp(1.7rem, 6.5vw, 3.1rem); 
  font-weight: 900; line-height: 1.18; margin-bottom: 16px; letter-spacing: -0.5px; 
  word-wrap: break-word; overflow-wrap: break-word;
}
.hero h1 span { color: var(--accent-orange); text-shadow: 0 0 20px rgba(255, 107, 53, 0.4); }
.hero p.sub { 
  font-size: clamp(0.98rem, 3.5vw, 1.25rem); color: var(--text-muted); 
  max-width: 720px; margin: 0 auto 25px; line-height: 1.5; 
}

.section-title { text-align: center; font-size: clamp(1.4rem, 5.5vw, 2.2rem); font-weight: 900; margin: 35px auto 10px; width: 92%; max-width: 900px; line-height: 1.2; word-wrap: break-word; }
.section-sub { text-align: center; font-size: clamp(0.92rem, 3.2vw, 1.12rem); color: var(--text-muted); width: 92%; max-width: 680px; margin: 0 auto 35px; line-height: 1.5; }

/* CATÁLOGO DIGITAL GRID - AJUSTADO PARA PANTALLAS ANGOSTAS (<340px) */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-bottom: 50px; width: 92%; max-width: 1150px; margin-left: auto; margin-right: auto; }
.prod-card { background: #0f1523; border: 1px solid rgba(255, 107, 53, 0.25); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, border-color 0.3s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
.prod-card:hover { transform: translateY(-5px); border-color: var(--accent-orange); box-shadow: 0 20px 45px rgba(255, 107, 53, 0.25); }
.prod-card img { width: 100%; height: 230px; object-fit: cover; border-bottom: 1px solid var(--border); display: block; }
.prod-body { padding: 22px 20px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.badge { display: inline-block; background: rgba(255, 107, 53, 0.18); color: var(--accent-orange); font-size: 0.75rem; font-weight: 800; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; align-self: flex-start; letter-spacing: 0.3px; }

.prod-body h3 { 
  font-size: clamp(1.2rem, 4vw, 1.4rem); font-weight: 900; color: #fff; 
  margin-bottom: 10px; line-height: 1.25; word-wrap: break-word; overflow-wrap: break-word; 
}
.prod-body p.concept { font-size: clamp(0.9rem, 3vw, 0.98rem); color: var(--text-muted); margin-bottom: 22px; flex: 1; line-height: 1.55; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; border-top: 1px dashed rgba(255,255,255,0.15); padding-top: 16px; flex-wrap: wrap; gap: 10px; }
.price-main { font-size: clamp(1.8rem, 6vw, 2.2rem); font-weight: 900; color: var(--accent-orange); text-shadow: 0 0 15px rgba(255, 107, 53, 0.3); }
.price-orig { font-size: clamp(1rem, 3.5vw, 1.15rem); color: var(--text-muted); text-decoration: line-through; font-weight: 700; }

/* BOTONES VENDEDORES INQUEBRANTABLES (CERO SALIDAS DE PANTALLA, WHITE-SPACE NORMAL) */
.btn-buy {
  width: 100%; background: linear-gradient(135deg, #ff6b35, #ff3d00); color: #fff; border: none; 
  padding: 16px 14px; border-radius: 35px; font-weight: 900; 
  font-size: clamp(0.92rem, 3.8vw, 1.05rem); cursor: pointer; transition: all 0.25s ease; 
  text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; 
  box-shadow: 0 8px 22px var(--accent-glow); white-space: normal; text-align: center; word-wrap: break-word;
  line-height: 1.3; min-height: 55px;
}
.btn-buy:hover, .btn-buy:active { transform: scale(1.02); box-shadow: 0 10px 30px rgba(255, 107, 53, 0.6); background: linear-gradient(135deg, #ff7e50, #ff521a); }

/* MODAL STRIPE RESPONSIVO PARA PANTALLAS CHICAS */
.stripe-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5000; display: none; justify-content: center; align-items: center; padding: 12px; }
.stripe-modal { background: #0f1523; border: 1px solid var(--stripe); border-radius: 22px; max-width: 520px; width: 100%; max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 25px 80px rgba(0,0,0,0.9); }
.modal-hdr { background: #161c2b; padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; }
.modal-hdr h3 { font-size: clamp(1rem, 4vw, 1.15rem); font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.stripe-tag { background: var(--stripe); color: #fff; font-size: 0.7rem; padding: 4px 8px; border-radius: 6px; font-weight: 900; }
.btn-close { background: none; border: none; color: var(--text-muted); font-size: 1.8rem; cursor: pointer; padding: 0 5px; line-height: 1; }
.btn-close:hover { color: #fff; }
.modal-bdy { padding: 22px 20px; }

.summary { background: rgba(99, 91, 255, 0.12); border: 1px dashed rgba(99, 91, 255, 0.4); padding: 14px 16px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.s-title { font-weight: 800; font-size: clamp(0.95rem, 3.8vw, 1.1rem); color: #fff; word-break: break-word; }
.s-id { font-size: 0.78rem; color: #818cf8; font-family: monospace; font-weight: 700; margin-top: 3px; }
.s-price { font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 900; color: var(--accent-orange); }

.grp { margin-bottom: 16px; }
.grp label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.inp-wrap { position: relative; }
.inp-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; }
.inp { width: 100%; background: #1b2436; border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 13px 14px 13px 40px; border-radius: 10px; font-size: 0.96rem; font-family: var(--font); font-weight: 600; box-sizing: border-box; }
.inp:focus { outline: none; border-color: var(--stripe); box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.25); }

.flex-fields { display: flex; gap: 12px; margin-bottom: 18px; }
@media(max-width: 400px) { .flex-fields { flex-direction: column; gap: 14px; } }

.btn-pay { width: 100%; background: var(--stripe); color: #fff; font-weight: 900; font-size: clamp(0.95rem, 4vw, 1.1rem); padding: 16px 14px; border: none; border-radius: 35px; cursor: pointer; transition: 0.3s; box-shadow: 0 6px 20px rgba(99, 91, 255, 0.4); margin-top: 8px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; white-space: normal; text-align: center; line-height: 1.3; min-height: 54px; }
.btn-pay:hover { background: #4f46e5; transform: translateY(-2px); }

/* ESTADO VICTORIOSO Y DESPACHO DRIVE OPTIMIZADO PARA CELULAR */
.success-state { display: none; text-align: center; padding: 10px 0; }
.success-state.active { display: block; }
.giant-icn { font-size: clamp(4rem, 12vw, 5rem); color: var(--success-green); margin-bottom: 12px; filter: drop-shadow(0 0 20px var(--success-glow)); }

.btn-accepted-badge {
  display: inline-block; background: rgba(16, 185, 129, 0.15); color: var(--success-green); border: 2px solid var(--success-green); font-weight: 900; 
  font-size: clamp(1.1rem, 5vw, 1.4rem); padding: 12px 20px; border-radius: 40px; box-shadow: 0 0 20px var(--success-glow); margin-bottom: 18px;
  width: 100%; white-space: normal; word-wrap: break-word; line-height: 1.3;
}

.redirect-box { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); padding: 14px 16px; border-radius: 12px; margin-bottom: 22px; font-size: clamp(0.92rem, 3.5vw, 1.02rem); color: #e2e8f0; text-align: center; line-height: 1.4; }
.countdown { font-weight: 900; font-size: 1.35rem; color: #f7c548; }

.btn-go-drive { width: 100%; background: var(--success-green); color: #fff; border: none; padding: 16px 14px; border-radius: 35px; font-weight: 900; font-size: clamp(0.95rem, 4vw, 1.1rem); cursor: pointer; transition: 0.3s; box-shadow: 0 8px 22px var(--success-glow); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; white-space: normal; text-align: center; line-height: 1.3; min-height: 54px; }
.btn-go-drive:hover { background: #0d9668; transform: scale(1.02); }

@media(max-width: 640px) {
  .catalog-grid { grid-template-columns: 1fr; width: 94%; gap: 24px; }
  .container { width: 94%; }
  .hero { width: 94%; padding: 30px 0 20px; }
  .modal-bdy { padding: 18px 15px; }
}