/* ===== BASE ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  color: #f5f5f5;
  font-family: "Montserrat", system-ui, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===== HEADER ===== */

.tsf-header {
  border-bottom: 1px solid #111;
  background: #000;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tsf-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo compuesto */

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  height: 40px;
  border-radius: 6px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-title {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.logo-subtitle {
  font-weight: 700;
  font-size: 0.85rem;
  color: #00cfff;
}

/* NAV */

.nav a {
  margin-left: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.nav a:hover {
  opacity: 1;
}

/* Botón carrito */

.btn-cart {
  margin-left: 1.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #00cfff;
  font-size: 0.8rem;
  background: transparent;
  color: #00cfff;
}

/* ===== HERO ===== */

.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  background: radial-gradient(circle at top, #00bfff22, #000 55%);
}

.hero-content {
  max-width: 600px;
  padding: 3rem 1.5rem 4rem;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #d0d0d0;
}

/* ===== BOTONES GENERALES ===== */

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.btn-primary {
  background: #00cfff;
  color: #000;
}

.btn-secondary {
  background: transparent;
  border: 1px solid #00cfff;
  color: #00cfff;
}

.btn-secondary:hover {
  background: #00cfff;
  color: #000;
}

/* ===== SECCIONES GENERALES ===== */

.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.section-title-center {
  text-align: center;
}

.section-subtitle {
  font-size: 0.95rem;
  color: #c3c3c3;
  max-width: 720px;
}

.section-subtitle-center {
  margin: 0 auto 2rem;
  text-align: center;
}

/* ===== COLECCIONES ===== */

.grid-colecciones {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid-colecciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.coleccion-card {
  background: radial-gradient(circle at top left, #00cfff11, #050505 70%);
  border-radius: 0.9rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(0, 207, 255, 0.25);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.coleccion-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.coleccion-card p {
  font-size: 0.9rem;
  color: #c3c3c3;
}

.coleccion-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 207, 255, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

/* ===== CARDS DE PRODUCTO ===== */

.grid-productos {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid-productos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.producto {
  background: #050505;
  border-radius: 0.9rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid #111;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.producto-img {
  width: 100%;
  border-radius: 0.7rem;
  margin-bottom: 0.4rem;
  object-fit: cover;
  max-height: 200px;
}

.producto h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.producto-texto {
  font-size: 0.85rem;
  color: #c3c3c3;
  margin-bottom: 0.6rem;
}

.precio {
  margin: 0.3rem 0 0.6rem;
  font-weight: 600;
  color: #00cfff;
}

/* Mensaje “Próximamente…” en catálogo */
.cat-empty {
  font-size: 0.9rem;
  color: #c3c3c3;
  opacity: 0.8;
}

/* ===== CATÁLOGO COMPLETO ===== */

.section-catalogo {
  padding-top: 4rem;
}

.catalog-category {
  margin-top: 2.5rem;
}

.catalog-category-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #00cfff;
}

/* ===== FOOTER ===== */

.tsf-footer {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: #777;
}

/* ===== CARRITO (cart.html) – estilos que ya tenías ===== */

.cart-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px 96px;
}

.cart-title {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 32px;
}

#cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.cart-empty {
  opacity: 0.7;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  border-radius: 18px;
  background: radial-gradient(
    circle at top left,
    rgba(0, 188, 255, 0.12),
    rgba(0, 0, 0, 0.9)
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}

.cart-item-info {
  max-width: 60%;
}

.cart-item-name {
  font-size: 1rem;
  margin-bottom: 6px;
}

.cart-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cart-item-price {
  font-weight: 700;
}

.cart-item-remove {
  border: none;
  background: transparent;
  color: #ff6b6b;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.cart-item-remove:hover {
  text-decoration: underline;
}

/* Controles de cantidad (premium) */
.qty-controls{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
}

.qty-label{
  font-size: 0.9rem;
  opacity: .8;
  margin-right: 2px;
}

.qty-btn{
  border: none;
  background: transparent;
  color: #00cfff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.qty-btn:hover{
  opacity: .9;
  transform: translateY(-1px);
}

.qty-btn:active{
  transform: translateY(0px) scale(0.98);
}

.qty-value{
  min-width: 28px;
  text-align:center;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,207,255,.25);
  background: rgba(0,207,255,.06);
}


.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-size: 1rem;
}

.cart-summary-amount {
  font-weight: 700;
}

.cart-actions {
  display: flex;
  justify-content: center;
}

.cart-pay-btn {
  min-width: 260px;
}

/* Responsive carrito */
@media (max-width: 768px) {
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item-meta {
    align-items: flex-start;
  }

  .cart-item-info {
    max-width: 100%;
  }

  .cart-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .cart-actions {
    justify-content: flex-start;
  }
}

/* ===== FORMULARIO CONTACTO EN CARRITO ===== */

.cart-contact {
  margin-top: 40px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #05060a 0%, #050c14 100%);
  border-radius: 16px;
  border: 1px solid #14171f;
}

.cart-contact-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.cart-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.cart-contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-contact-field label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
}

.cart-contact-field input {
  background: #05060a;
  border-radius: 999px;
  border: 1px solid #272b35;
  padding: 10px 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cart-contact-field input::placeholder {
  opacity: 0.5;
}

.cart-contact-field input:focus {
  border-color: #00c2ff;
  box-shadow: 0 0 0 1px rgba(0, 194, 255, 0.35);
}

#contact-whatsapp {
  grid-column: 1 / 3;
}

.cart-contact-actions {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-pay {
  width: 100%;
  max-width: 340px;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}

/* Estado deshabilitado */
.btn-pay--disabled {
  background: #3a3f4a;
  color: #9fa5b3;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Estado habilitado */
.btn-pay--enabled {
  background: #00c2ff;
  color: #000814;
}

.btn-pay--enabled:hover {
  transform: translateY(-1px);
}

.cart-pay-note {
  font-size: 0.78rem;
  text-align: center;
  opacity: 0.65;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .cart-contact {
    padding: 20px 16px;
  }

  .cart-contact-form {
    grid-template-columns: 1fr;
  }

  #contact-whatsapp,
  .cart-contact-actions {
    grid-column: 1 / 2;
  }
}

/* fila ARS opcional */
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary-row + .cart-summary-row {
  margin-top: 4px;
}

/* ✅ OCULTAR equivalente ARS */
.cart-summary-row-ars {
  display: none !important;
}


/* ==========================
   SPLASH (intro 2–3s)
   ========================== */

#tsf-splash{
  position: fixed;
  inset: 0;
  background: #000;
  display: grid;
  place-items: center;
  z-index: 20000;
  opacity: 1;
  transition: opacity .35s ease;
}

#tsf-splash img{
  width: 260px;          /* tamaño grande */
  max-width: 80vw;       /* responsive */
  height: auto;          /* 👈 CLAVE: mantiene proporción */
  transform: scale(0.85);
  opacity: 0.9;
  animation: tsfSplashZoom 2.3s ease-in-out forwards;
  filter: drop-shadow(0 18px 60px rgba(0,0,0,.85));
}

/* Animación suave, elegante */
@keyframes tsfSplashZoom{
  0% {
    transform: scale(0.75);
    opacity: 0.5;
  }
  45% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.95;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  #tsf-splash img{
    animation: none;
    transform: none;
  }
}
/* ==========================
   FADE + BLUR POST SPLASH (FIX)
   ========================== */

#tsf-app.tsf-blur {
  filter: blur(6px);
  transition: filter 0.35s ease;
}

#tsf-app.tsf-blur-off {
  filter: blur(0);
}
/* ==========================
   MOBILE FIXES (Carrito + Header)
   ========================== */

@media (max-width: 768px) {
  /* Header: que todo respire y no se pise */
  .tsf-header-inner{
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .logo-link{
    gap: 10px;
    flex: 1 1 auto;
    min-width: 200px;
  }

  .logo-img{
    height: 34px;
    border-radius: 10px;
  }

  .logo-title{
    font-size: 0.85rem;
    letter-spacing: 0.6px;
  }

  .logo-subtitle{
    font-size: 0.8rem;
  }

  /* Nav: baja a segunda línea y se ordena */
  .nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .nav a{
    margin-left: 0;
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /* Botón carrito: alineado, no gigante */
  .btn-cart{
    margin-left: 0;
    padding: 8px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* Página carrito: márgenes y tamaños */
  .cart-page{
    padding: 72px 14px 84px;
  }

  .cart-title{
    font-size: 2.05rem;
    margin-bottom: 18px;
  }

  .cart-item{
    padding: 16px 16px;
    border-radius: 16px;
  }

  /* Formulario: 1 columna real y prolija */
  .cart-contact{
    padding: 18px 16px;
    border-radius: 16px;
  }

  .cart-contact-title{
    font-size: 1.2rem;
    margin-bottom: 14px;
  }

  .cart-contact-form{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* OJO: tu CSS tenía #contact-whatsapp pero tu input real es buyer-whatsapp */
  #contact-whatsapp,
  #buyer-whatsapp,
  .cart-contact-actions{
    grid-column: 1 / 2 !important;
  }

  .cart-contact-field input{
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  .btn-pay{
    max-width: 100%;
  }

  /* Texto de nota: que no parezca “bloque gigante” */
  .cart-pay-note{
    font-size: 0.72rem;
    line-height: 1.3;
    opacity: 0.6;
    padding: 0 6px;
  }
}
 <!-- Datos de contacto y botón de pago -->
      <section class="cart-contact">
        <h2 class="cart-contact-title">Datos de contacto</h2>

        <div class="cart-contact-form">
          <!-- Nombre -->
          <div class="cart-contact-field">
            <label for="buyer-name">Nombre y apellido</label>
            <input
              id="buyer-name"
              type="text"
              placeholder="Ej: Rodrigo Pérez"
              autocomplete="name"
            />
          </div>

          <!-- Email -->
          <div class="cart-contact-field">
            <label for="buyer-email">Correo electrónico</label>
            <input
              id="buyer-email"
              type="email"
              placeholder="Ej: tucorreo@email.com"
              autocomplete="email"
            />
          </div>

          <!-- WhatsApp (ocupa las dos columnas en desktop) -->
          <div class="cart-contact-field" style="grid-column: 1 / 3;">
            <label for="buyer-whatsapp">WhatsApp (con código de país)</label>
            <input
              id="buyer-whatsapp"
              type="tel"
              placeholder="Ej: +54 9 11 1234 5678"
              autocomplete="tel"
            />
          </div>

          <!-- Botón + leyenda (también 1 / 3) -->
          <div class="cart-contact-actions" style="grid-column: 1 / 3;">
            <button
              id="pay-button"
              data-role="pay-button"
              class="btn-pay btn-pay--disabled"
              type="button"
              onclick="payWithStripe()"
              disabled
            >
              PAGAR (ARS o USD)
            </button>

            <p class="cart-pay-note">
              PODÉS PAGAR EN PESOS ARGENTINOS O EN USD. EL MONTO SE CALCULA SEGÚN EL
              VALOR DEL PEDIDO EN DÓLARES.
            </p>
          </div>
        </div>
      </section>
    </main>

    <footer class="tsf-footer">
      © <span id="year"></span> TRADING SIN FRONTERAS SHOP
    </footer>

    <script src="script.js"></script>
  </body>
</html>
.stripe-badge{
  margin-top: 8px;
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: center;
}
.instant-access{
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.75;
  text-align: center;
}