/* tipografia.css */

/* ── 1. VARIABLES  ──────────────────── */
:root {
  /* ───── TÍTULOS ───── */
  --title-h1: clamp(2.8rem, 1.8rem + 2.5vw, 3.5rem);
  --title-h2: clamp(1.85rem, 1.5rem + 1.6vw, 3.0rem);
  --title-h3: clamp(1.45rem, 1.25rem + 1vw, 2.1rem);
  --title-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --title-h5: clamp(1.1rem, 1.05rem + 0.25vw, 1.3rem);
  --title-h6: clamp(1rem, 0.95rem + 0.15vw, 1.15rem);

  /* ───── TEXTOS ───── */
  --text-base: clamp(1rem, 0.96rem + 0.15vw, 1.08rem);
  --text-small: clamp(0.88rem, 0.85rem + 0.1vw, 0.95rem);
  --text-button: clamp(0.95rem, 0.92rem + 0.1vw, 1.05rem);

  /* ───── STATS ───── */
  --text-stat-number: clamp(2.2rem, 1.8rem + 1.8vw, 3.6rem);
  --text-stat-label: clamp(0.9rem, 0.85rem + 0.15vw, 1rem);

  /* ───── LINE HEIGHT ───── */
  --lh-title: 1.2;
  --lh-text: 1.65;
}

/* ── 2. BASE TIPOGRÁFICA ────────────────────────────────────── */
body {
  font-size: var(--text-base);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. TÍTULOS SEMÁNTICOS ──────────────────────────────────── */
h1 {
  font-size: var(--title-h1);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--title-h2);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  text-align: center; /* Regresa el centrado aquí de forma correcta */
}

h3 {
  font-size: var(--title-h3);
  font-weight: 700;
  line-height: var(--lh-title);
}

h4 {
  font-size: var(--title-h4);
  font-weight: 600;
  line-height: var(--lh-title);
}

h5 { font-size: var(--title-h5); font-weight: 600; line-height: var(--lh-title); }
h6 { font-size: var(--title-h6); font-weight: 500; line-height: var(--lh-title); }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* ── 4. TEXTOS GENERALES ────────────────────────────────────── */
p {
  font-size: var(--text-base);
  margin-top: 0;
  margin-bottom: 1rem;
}

li, span, ul {
  line-height: var(--lh-text);
}

small {
  font-size: var(--text-small);
  line-height: 1.4;
}

a {
  line-height: inherit;
  text-decoration: none;
}

/* ── 5. BOTONES ─────────────────────────────────────────────── */
button,
.btn,
a.btn,
.hero-btn,
.tiktok-btn,
.btn-ver-todos,
.btn-comprar,
.btn-ubicacion,
.btn-ver-mas,
.btn-buscar,
.boton-correo,
.btn-read,
.btn-secondary {
  font-size: var(--text-button);
  font-weight: 600;
  font-family: inherit;
}

/* ── 6. FORMULARIOS ─────────────────────────────────────────── */
input,
select,
textarea {
  font-size: clamp(1px, 16px, 1rem); /* Previene el zoom automático en móviles */
  font-family: inherit;
}

label {
  font-size: var(--text-small);
  font-weight: 500;
}

/* ── 7. FAQ & DETALLES ──────────────────────────────────────── */
.faq-question {
  font-size: var(--text-base);
  font-weight: 600;
}

/* ── 8. ESTILOS PARA BLOG (sin sobrescritura) ───────────────── */
.blog-hero__title {
  font-size: var(--title-h1);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -0.02em;
}

.blog-hero__title span {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 400;
}

.blog-hero__desc {
  font-size: var(--text-base);
  line-height: var(--lh-text);
}

.blog-hero__meta {
  font-size: var(--text-small);
  font-weight: 500;
}

/* ── 9. ESTILOS PARA TERRENOS (sin sobrescritura) ───────────────── */

/* Badge del hero – no existe en la tipografía global */
.hero-badge {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 1px;
}

/* Botón de búsqueda – queremos un peso mayor que el de botones normales */
.btn-buscar {
  font-weight: 700;
}

/* Span dentro del título – hereda todo del h1, solo aseguramos consistencia */
.hero-title span {
  font-weight: inherit;
}

/* ── 10. ESTILOS PARA INDEX (HOME) sin sobrescritura ─────────── */

/* Hero título (h1) – hereda de h1, solo aseguramos consistencia */
.hero-title {
  line-height: var(--lh-title);   
  font-weight: 800;            
}

/* Hero descripción (p) */
.hero-description {
  font-size: var(--text-base);
  line-height: var(--lh-text);
}

/* Estadísticas - números */
.stat-number {
  font-size: var(--text-stat-number);
  font-weight: 700;
  line-height: 1.2;
}

/* Estadísticas - etiquetas (ya usa var(--text-stat-label), solo aseguramos) */
.stat-label {
  line-height: 1.3;
}

/* Anuncio flotante (hero-announcement) */
.announcement-text {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;
}

/* Badge "NUEVO" */
.badge {
  font-size: var(--text-small);
  font-weight: 700;
}

/* Botón CTA del anuncio */
.cta {
  font-weight: 700;
}

/* ── 11. ESTILOS PARA SERVICIOS (sin sobrescritura) ─────────── */

/* Título principal (h1) – hereda de h1 global */
.hero-title {
  font-weight: 800;        
  line-height: var(--lh-title);
  letter-spacing: -0.02em;    
}

/* Descripción (p) */
.hero-description {
  font-size: var(--text-base);
  line-height: var(--lh-text);
}

/* Los strong dentro de la descripción heredan de strong global */
.hero-description strong,
.banner-content strong {
  font-weight: 700;       
}

/* Estadísticas - números (info-stat span) */
.info-stat span {
  font-size: var(--text-stat-number);
  font-weight: 700;
  line-height: 1.2;     
}

/* Párrafos dentro de las tarjetas info-card */
.info-card p {
  line-height: var(--lh-text); 
}