/* ===========================
   GlowFit® — Estilos principales
   Paleta azul (103954 → 1e4a66)
   =========================== */

:root{
  --primary-blue: #103954;
  --primary-light: #1e4a66;
  --secondary-blue: #4a90b8;
  --accent-gold: #ffd700;
  --bg-light: #f8fafc;
  --text-dark: #1a202c;
  --text-gray: #4a5568;
  --white: #ffffff;
  --shadow: rgba(16, 57, 84, 0.15);
  --shadow-hover: rgba(16, 57, 84, 0.25);
  --gradient: linear-gradient(135deg, #103954 0%, #1e4a66 100%);
  --success: #22c55e;
}

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

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-light);
  min-height: 100vh;
}

.container{
  max-width: 400px;
  margin: 0 auto;
  background: var(--white);
  min-height: 100vh;
  box-shadow: 0 0 30px var(--shadow);
  position: relative;
}

/* Header con imagen de fondo detrás del logo */
.header{
  text-align: center;
  /* padding para que el logo/título respiren sobre la imagen */
  padding: clamp(24px, 5vw, 40px) 2rem 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;

  /* ⬇️ AQUÍ PONES TU IMAGEN
     La primera capa es un velo oscuro para que el texto se lea bien.
     La segunda capa es tu imagen (centrada y recortada correctamente). */
  background:
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('../assets/images/Fondo Comprimido.webp') center/cover no-repeat;

  /* Altura recomendada del bloque */
  min-height: 220px;
}

.header::before{
  content:'';
  position: absolute;
  top:-50%; right:-50%;
  width:200%; height:200%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite;
}

.logo-inline{ display:flex; justify-content:center; margin-bottom:12px; }
.logo-img{
  width:90px; height:90px;
  border-radius:50%;
  border:3px solid var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  object-fit: cover; background:#fff;
}

.brand{ font-size:1.8rem; font-weight:700; margin:0; }
.tagline{ font-size:0.95rem; opacity:0.95; }

/* Social content area */
.social-content{ padding: 1.5rem; padding-top: 0; }

/* Company description styling */
.social-content p {
  font-size: 0.95rem;
}

@media (max-width: 480px) {
  .social-content p {
    font-size: 0.85rem;
    max-width: 95%;
  }
}

/* Navigation */
.nav-tabs{
  display:grid; grid-template-columns: repeat(3,1fr); gap:6px;
  background: var(--white);
  border-radius: 18px; padding: 6px;
  margin: 1rem 0 1.5rem;
  box-shadow: 0 8px 20px var(--shadow);
}

.nav-tab{
  padding: 10px 6px; text-align:center; background:transparent; border:none;
  border-radius: 12px; font-weight:600; cursor:pointer; transition:.25s; color: var(--text-gray);
  font-size: .85rem;
}
.nav-tab i{ display:block; margin-bottom:4px; font-size:1.1rem; }
.nav-tab.active{ background: var(--gradient); color:#fff; transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow); }
.nav-tab:hover:not(.active){ background: rgba(16,57,84,.08); color: var(--primary-blue); }

/* Sections */
.content-section{ display:none; animation: fadeIn .45s ease; }
.content-section.active{ display:block; }

/* Promo Section */
.promo-section{ margin-bottom: 1.25rem; padding: 24px; background: var(--gradient); border-radius: 20px; color: #fff; text-align:center; box-shadow: 0 10px 24px var(--shadow); }
.promo-title{ font-size:1.2rem; font-weight:700; margin-bottom:6px; }
.promo-subtitle{ opacity:.95; margin-bottom:12px; }
.promo-links{ display:grid; gap:10px; }
.promo-btn{
  background: rgba(255,255,255,0.15);
  color:#fff; padding: 12px 18px; border-radius: 14px; text-decoration:none; font-weight:600;
  transition: transform .2s ease, background .2s ease; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
}
.promo-btn:hover{ background: rgba(255,255,255,0.25); transform: translateY(-2px); }

/* Enlaces principales (botones azules con icono SVG + texto) */
.link-item{
  display: flex;                 /* permite alinear icono + texto */
  align-items: center;           /* centra verticalmente */
  justify-content: center;       /* centra horizontalmente */
  gap: 12px;                     /* espacio entre icono y texto */

  padding: 18px 24px;
  margin-bottom: 16px;
  background: var(--gradient);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(19, 78, 94, 0.25);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  font-size: 1rem;
}

.link-item::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: opacity .3s ease;
  opacity: 0;
}

.link-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px var(--shadow-hover);
  color: #fff; /* aseguramos blanco también en hover */
}

.link-item:hover::before{
  opacity: 1;
}

/* Tamaño y comportamiento del SVG dentro del botón */
.link-item .icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;     /* evita que el icono se comprima */
  display: inline-block;
}

.link-item:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px var(--shadow-hover); }

/* Cards generales */
.card{ background: var(--white); padding: 18px; border-radius: 16px; box-shadow: 0 4px 12px var(--shadow); }

/* Points */
.points-card{ background: var(--gradient); color:#fff; padding: 26px; border-radius: 22px; text-align:center; margin-bottom: 18px; position:relative; overflow:hidden; }
.points-card::before{ content:'⭐'; position:absolute; font-size:4.2rem; opacity:.12; top:50%; left:50%; transform: translate(-50%,-50%); animation: pulse 3s infinite; }
.points-value{ font-size: 3rem; font-weight: 700; margin-bottom: 6px; }
.points-label{ font-size:1rem; opacity:.95; }

.points-info h3{ color: var(--primary-blue); margin-bottom: 12px; font-size:1.1rem; }
.points-rule{ display:flex; align-items:center; margin-bottom: 12px; padding: 10px; background: rgba(16,57,84,.08); border-radius: 12px; }
.points-rule i{ color: var(--primary-blue); margin-right: 12px; font-size:1.1rem; width:20px; }

.reward-item{ background: var(--white); padding: 16px; border-radius: 16px; box-shadow: 0 4px 12px var(--shadow); margin-bottom: 12px; }
.reward-cost{ background: var(--accent-gold); color: var(--text-dark); padding: 6px 12px; border-radius: 999px; font-weight:700; display:inline-block; margin-bottom: 8px; }
.reward-name{ font-weight:700; color: var(--primary-blue); margin-bottom: 4px; }
.reward-desc{ color: var(--text-gray); font-size:.92rem; margin-bottom: 8px; }

/* Forms */
.form-group{ margin-bottom: 14px; }
.form-group label{ display:block; margin-bottom: 6px; font-weight:600; color: var(--text-dark); }
.form-control{
  width:100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-size:16px; transition: border-color .25s ease; background: var(--white);
  font-family: inherit;
}
.form-control:focus{ outline:none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(16,57,84,.12); }

.btn{ background: var(--gradient); color:#fff; text-decoration:none; padding: 14px 22px; border:none; border-radius: 14px; font-weight:700; cursor:pointer; transition:.25s; width:100%; font-size:16px; font-family: inherit; }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px var(--shadow); }

/* Reciclaje */
.recycle-types{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom: 12px; }
.recycle-type{ padding:16px; border:2px solid #e2e8f0; border-radius: 14px; text-align:center; cursor:pointer; transition:.25s; background: var(--white); }
.recycle-type:hover, .recycle-type.selected{ border-color: var(--primary-blue); background: rgba(16,57,84,.08); transform: translateY(-2px); }
.recycle-type i{ font-size: 2rem; color: var(--primary-blue); display:block; margin-bottom:8px; }
.type-name{ font-weight:700; }
.points-per-kg{ font-size:.85rem; color: var(--text-gray); }

.estimated-points{ background: var(--accent-gold); color: var(--text-dark); padding: 14px; border-radius: 14px; text-align:center; margin-bottom: 14px; display:none; }

/* Contacto */
.contact-info h4{ color: var(--primary-blue); margin-bottom: 10px; font-size:1.2rem; }
.contact-item{ display:flex; align-items:center; margin-bottom:8px; }
.contact-item i{ color: var(--primary-blue); margin-right:10px; width:20px; }

/* Success messages */
.success-message{
  background: var(--success); color:#fff; padding: 14px 16px; border-radius: 14px; margin: 12px 0;
  text-align:center; display:none;
}

/* Redesigned Promos Section - Responsive & Optimized for Mobile */
.promo-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px;
  padding: 0 8px;
}
.promo-card{
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 18px; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(16,57,84,.1);
  border: 2px solid rgba(16,57,84,.04);
  transition: all .25s ease;
  position:relative; overflow:hidden;
  border-left: 4px solid var(--primary-blue);
}
.promo-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
}

/* Mejor responsividad en móviles */
@media (max-width: 480px) {
  .promo-card{
    padding: 14px;
    margin: 0 -2px;
  }
}

.promo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(16,57,84,.15);
  border-color: rgba(16,57,84,.1);
}

/* Header más compacto */
.promo-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; margin-bottom:12px;
}

.promo-icon{
  font-size: 1.8rem; flex-shrink:0;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* Product image styles - Professional and minimalist */
.promo-product-image{
  position:relative;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(16,57,84,.1);
  box-shadow: 0 4px 12px rgba(16,57,84,.15);
  background: #ffffff;
}

.promo-product-image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  background: #ffffff;
}

@media (max-width: 480px) {
  .promo-product-image{
    width: 70px;
    height: 70px;
  }

  .promo-product-image img{
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .promo-icon{
    font-size: 1.6rem;
    margin-top: 2px;
  }
}

.promo-title-section{
  flex:1;
}

.promo-header h4{
  margin:0 0 2px 0; color: var(--primary-blue); font-size:1rem;
  font-weight:700; line-height:1.2;
}

@media (max-width: 480px) {
  .promo-header h4{
    font-size:0.95rem;
  }
}

.promo-badge{
  display:inline-block; padding:2px 8px; background:linear-gradient(135deg, #ef4444, #dc2626); color:#fff;
  border-radius:12px; font-size:0.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.3px;
  margin-bottom:4px; box-shadow: 0 2px 6px rgba(239,68,68,.3);
}

@media (max-width: 480px) {
  .promo-badge{
    padding:2px 6px;
    font-size:0.55rem;
  }
}

/* Pricing section mejorado */
.promo-pricing{
  text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px;
}

.promo-price-new{
  font-size:1.4rem; font-weight:900; color:#ef4444;
  line-height:1; text-shadow: 0 1px 2px rgba(239,68,68,.2);
}

@media (max-width: 480px) {
  .promo-price-new{
    font-size:1.2rem;
    margin-right: -2px;
  }
}

.promo-price-old{
  font-size:0.85rem; text-decoration:line-through; color:#9ca3af;
  font-weight:600; opacity:0.8;
}

.promo-savings{
  color:#059669; font-size:0.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.3px;
  background: rgba(5,150,105,.1); padding:1px 4px; border-radius:4px;
}

/* Better descriptions */
.promo-desc{
  color: var(--text-dark); font-size:0.9rem; line-height:1.4;
  margin-bottom:14px; font-weight:500;
}

@media (max-width: 480px) {
  .promo-desc{
    font-size:0.85rem;
    margin-bottom:10px;
  }
}

/* Features list mejorado */
.promo-features{
  margin:12px 0; padding:10px 12px; background:linear-gradient(135deg, rgba(18,126,45,.08), rgba(34,197,94,.05));
  border-radius:8px; border-left:3px solid #16a34a; border-top:1px solid rgba(34,197,94,.1);
}

.promo-features ul{
  list-style:none; padding:0; margin:0;
}

.promo-features li{
  font-size:0.8rem; margin-bottom:3px;
  color:#059669; font-weight:600;
}

@media (max-width: 480px) {
  .promo-features{
    margin:10px 0;
    padding:8px 10px;
  }

  .promo-features li{
    font-size:0.75rem;
  }
}

.promo-features li::before{
  content:'✅ '; color:#16a34a; font-weight:800; font-size:0.8rem;
}

/* Urgency indicators mejorados */
.promo-urgency{
  background: linear-gradient(135deg, rgba(251,191,36,.9), rgba(245,158,11,.9));
  color:#92400e; padding:8px 12px; border-radius:6px;
  text-align:center; font-size:0.75rem; font-weight:800;
  margin-bottom:14px; text-transform:uppercase; letter-spacing:0.3px;
  box-shadow: 0 2px 8px rgba(251,191,36,.3);
  border:1px solid rgba(251,191,36,.5);
}

@media (max-width: 480px) {
  .promo-urgency{
    padding:6px 8px;
    font-size:0.7rem;
    margin-bottom:12px;
  }
}

/* Responsive buttons */
.promo-btn{
  width:100%; padding: 14px 20px; border-radius: 10px;
  font-size:0.95rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.3px; position:relative; overflow:hidden;
  transition: all .25s ease;
  box-shadow: 0 4px 12px rgba(16,57,84,.2);
  background: var(--gradient);
  border:2px solid transparent;
  min-height: 50px;
  display:flex; align-items:center; justify-content:center;
}

@media (max-width: 480px) {
  .promo-btn{
    padding: 12px 16px;
    font-size:0.9rem;
    min-height: 45px;
  }
}

.promo-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(16,57,84,.3);
  background: var(--gradient);
}

.promo-btn:active{
  transform:translateY(0);
}

/* Mejor UX en móviles - quitar effects complejos */
@media (max-width: 768px) {
  .promo-btn::before{
    display:none;
  }

  .promo-card:hover{
    transform:none;
    box-shadow: 0 4px 12px rgba(16,57,84,.1);
  }

  .promo-btn:hover{
    transform:none;
    box-shadow: 0 4px 12px rgba(16,57,84,.2);
  }
}

/* Simple promo cards */
.promo-card-simple{
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(16,57,84,.1);
  border: 1px solid rgba(16,57,84,.05);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.promo-card-simple:hover{
  transform:translateY(-3px);
  box-shadow: 0 6px 18px rgba(16,57,84,.15);
}

.promo-image{
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: contain;
  margin: 0 auto 16px;
  border: 2px solid rgba(16,57,84,.12);
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(16,57,84,.1);
}

@media (max-width: 480px) {
  .promo-image{
    width: 100px;
    height: 100px;
  }
  .promo-card-simple{
    padding: 14px;
  }
}

.promo-card-simple h4{
  color: var(--primary-blue);
  font-size: 1rem;
  font-weight: 700;
  margin: 8px 0;
  line-height: 1.3;
}

.promo-card-simple p{
  color: var(--text-dark);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 12px;
}

.btn-simple{
  display: inline-block;
  background: var(--gradient);
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.25s ease;
  border: none;
  cursor: pointer;
}

.btn-simple:hover{
  transform: translateY(-2px);
  color: #fff;
}

/* Urgency elements for promos */
.promo-urgency-small{
  margin: 8px 0;
  padding: 6px 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .3);
}

@media (max-width: 480px) {
  .promo-urgency-small{
    font-size: 0.7rem;
    padding: 4px 8px;
    margin: 6px 0;
  }
}

/* Footer */
.footer{
  padding: 24px 1.5rem; text-align:center; background: var(--gradient); color:#fff;
}
.social-icons{ display:flex; justify-content:center; gap: 18px; margin-bottom: 12px; }
.social-icons a{ color:#fff; font-size: 1.6rem; transition:.25s; }
.social-icons a:hover{ transform: scale(1.15); }
.footer-text{ font-size:.9rem; opacity:.85; }

/* Animations */
@keyframes fadeIn{ from{ opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);} }
@keyframes pulse{ 0%,100%{ transform: translate(-50%,-50%) scale(1);} 50%{ transform: translate(-50%,-50%) scale(1.08);} }
@keyframes float{ 0%,100% { transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* Mejor responsividad para móviles */
@media (max-width: 480px){
  .container{ box-shadow:none; }

  .nav-tabs{
    grid-template-columns: repeat(3,1fr);
    margin: 0.75rem 0 1rem;
    padding: 4px;
  }

  .content{
    padding: 1rem 0.75rem;
  }

  .points-value{ font-size: 2.6rem; }
  .recycle-types{ grid-template-columns: 1fr; }

  /* Mejorar el header mobile */
  .header{
    padding: 20px 1.5rem 20px;
    min-height: 180px;
  }

  .logo-img{
    width:70px; height:70px;
    border:2px solid var(--white);
  }

  .brand{ font-size:1.4rem; }
  .tagline{ font-size:0.85rem; }
}

/* Mejores efectos visuales generales */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sombra más natural */
*{
  box-sizing: border-box;
}

/* Mejorar la navegación */
.nav-tabs{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
}

/* Mejorar elementos de tarjeta general */
.card{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--shadow-hover);
}

/* Mejorar botones generales */
.btn{
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .4s ease;
}

.btn:hover::before{
  left:100%;
}

/* Remover sombras pesadas en móvil */
@media (max-width: 768px){
  .card:hover{
    transform: none;
    box-shadow: 0 4px 12px var(--shadow);
  }

  .btn::before{ display:none; }
  .btn:hover{ transform:none; }
}