/* Apply only on wide viewports to avoid mobile scaling issues. */
    @media (min-width: 800px) {
      /* zoom + tamaño letra (ligeramente reducido para texto un poco más pequeño) */
      html { zoom: 1.3; font-size: 94%; }
    }


/* Tipografía global (migrada desde style.css) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --app-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --app-font-size: 16px; /* base un poco más pequeña */
  --app-line-height: 1.6; /* más respiración para legibilidad */
}




html{ font-size: var(--app-font-size); }
body, button, input, select, textarea{ font-family: var(--app-font-family); line-height: var(--app-line-height); color:#0f172a; }
/* Remove default browser gaps and ensure header can go full-bleed */
body{ background:#ffe6f3; margin:0; padding:0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6{ font-family: var(--app-font-family); line-height: 1.3; color:#0f172a; }
h1{ font-weight: 700; }
h2,h3{ font-weight: 600; }
input, select, textarea, button{ font-size: 1rem; }



/* ===== HOME / INDEX ===== */
main.home{ max-width: 1200px; margin: 0 auto; padding: 16px; }

.hero{ height: 260px; background:#ececf1; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; color:#6b6b6b; margin: 8px 0 16px; }
.info-strip{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; text-align:center; color:#6b6b6b; margin: 8px 0 18px; }
.info-strip .card{ padding:12px; }

.section-title{ display:flex; align-items:center; justify-content:center; gap:12px; margin: 10px 0 14px; }
.section-title h2{ margin:0; font-size:22px; color:#333; }
.section-title .line{ flex:1; height:1px; background:var(--border); }

.offers{ display:grid; grid-template-columns: 1.2fr 1.2fr; gap:16px; }
.offers .big{ height:180px; }
.offers .small-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.offer-card{ background:#eee; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#585858; border:1px dashed #ddd; }

.home-highlight{
  max-width: 1200px;
  margin: 32px auto 12px;
  padding: 0 24px;
}
.home-highlight__inner{
  background: #1b181f;
  border-radius: 32px;
  padding: 48px 60px;
  color: #fff;
  text-align: center;
  box-shadow: 0 40px 120px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
}
.home-highlight__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 45%),
              radial-gradient(circle at 80% 0%, rgba(204,0,102,0.25), transparent 55%);
}
.home-highlight__inner > *{
  position: relative;
}
.home-highlight__eyebrow{
  margin:0 0 8px;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .78rem;
  color: #f7cee2;
}
.home-highlight__title{
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color:#fff;
}
.home-highlight__subtitle{
  margin:0 auto 18px;
  max-width: 680px;
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
}
.home-highlight__actions{
  display:flex;
  justify-content:center;
}
.home-highlight__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(120deg,#f061a4,#c21655);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  box-shadow:0 18px 40px rgba(192,22,85,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-highlight__btn:hover{
  transform: translateY(-2px);
  box-shadow:0 20px 50px rgba(192,22,85,0.45);
}

@media (max-width: 900px){
  .header-main{ grid-template-columns: 1fr; gap:12px; }
  .header-actions{ justify-content:flex-start; }
  .offers{ grid-template-columns: 1fr; }
  .offers .small-grid{ grid-template-columns: 1fr; }
  .home-highlight{
    padding: 0 16px;
  }
  .home-highlight__inner{
    padding: 36px 24px;
  }
}