/* =========================
   GLOBAL TYPOGRAPHY RULES
   ========================= */

body{
  font-size: var(--text-xs);
  line-height: 1.65;
}

/* Header */
.brand-name{ font-size: var(--text-xl); }
.main-nav a{ font-size: var(--text-xs) !important; font-weight: var(--weight-medium); }
.language-selector, .lang-option{ font-size: var(--text-2xs) !important; }

/* Hero */
.hero-tagline{ font-size: var(--text-xs) !important; font-weight: var(--weight-medium); }
.hero-title{ font-size: var(--text-4xl) !important; line-height: 1.05; }
.hero-subtitle{ font-size: var(--text-sm) !important; }

/* Section titles (consistencia total) */
.section-title{
  font-size: var(--text-3xl) !important;
  line-height: 1.15;
}
.section-subtitle{
  font-size: var(--text-sm) !important;
  line-height: 1.6;
}

/* “Why ElevateOne” block */
.problem-heading{ font-size: var(--text-3xl) !important; line-height: 1.15; }
.problem-intro{ font-size: var(--text-sm) !important; line-height: 1.65; }
.solution-heading{ font-size: var(--text-lg) !important; font-weight: var(--weight-semibold); }

/* Benefits list */
.benefit-item h3{ font-size: var(--text-md) !important; font-weight: var(--weight-semibold); }
.benefit-item p{ font-size: var(--text-xs) !important; }

/* Cards / category slider */
.card-title{ font-size: var(--text-md) !important; font-weight: var(--weight-semibold); }
.card-content p{ font-size: var(--text-xs) !important; }
.learn-more{ font-size: var(--text-2xs) !important; font-weight: var(--weight-medium); }

/* Testimonials */
.card-testimonial-text{ font-size: var(--text-sm) !important; line-height: 1.7; }
.card-testimonial-author-name{ font-size: var(--text-2xs) !important; }

/* =========================
   TYPOGRAPHY PATCH – HOME
   (sin tocar botones/layout)
   ========================= */

/* 0) Arregla variable que estás usando y no existe */
:root{
  --text-dark: var(--text-dark-gray);
}

/* 1) Títulos de sección: consistentes */
.section-title{
  font-size: clamp(32px, 2.6vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: var(--weight-bold);
}

.section-subtitle{
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.6 !important;
}

/* 2) Bloque "Why ElevateOne" */
.problem-heading{
  font-size: clamp(32px, 2.5vw, 42px) !important;
  line-height: 1.15 !important;
}

.problem-intro,
.problem-description{
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.65 !important;
}

/* “ElevateOne changes that.” */
.solution-heading{
  font-size: clamp(20px, 1.6vw, 26px) !important;
  line-height: 1.25 !important;
  font-weight: var(--weight-semibold);
}

/* 3) Audit card text (que sea legible) */
.audit-text{
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.7 !important;
}

/* 4) Benefits: subir legibilidad (sin cambiar layout) */
.benefit-item h3{
  font-size: clamp(16px, 1vw, 18px) !important;
  line-height: 1.3 !important;
  font-weight: var(--weight-semibold);
}

.benefit-item p{
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.6 !important;
}

/* 5) Cards del slider: el gran problema (12px) */
.card-title{
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.3 !important;
  font-weight: var(--weight-semibold);
}

.card-content,
.card-content p{
  font-size: clamp(13px, 0.9vw, 15px) !important; /* sube de 12px */
  line-height: 1.55 !important;
}

/* Link "Learn more" como microcopy (no enorme) */
.learn-more{
  font-size: clamp(13px, 0.9vw, 14px) !important;
  font-weight: var(--weight-semibold);
}

/* 6) Testimonials: lectura cómoda */
.card-testimonial-text{
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.7 !important;
}

.card-testimonial-author-name{
  font-size: clamp(14px, 0.95vw, 15px) !important;
}


:root{ --text-dark: var(--text-dark-gray); }

/* Subtítulos de sección (más legible, sin cambiar diseño) */
.section-subtitle{
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.6 !important;
}

/* Cards del slider: aquí está el problema real (12px) */
.card-title{
  font-size: clamp(15px, 0.95vw, 16px) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important; /* más “premium” que 700 en Poppins */
}

.card-content,
.card-content p{
  font-size: clamp(14px, 0.95vw, 15px) !important; /* sube de 12px */
  line-height: 1.6 !important;
}

/* Learn more como microcopy */
.learn-more{
  font-size: clamp(13px, 0.9vw, 14px) !important;
  font-weight: 600 !important;
}

/* Benefits: un poco más legible */
.benefit-item h3{
  font-size: clamp(16px, 1vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.benefit-item p{
  font-size: clamp(14px, 0.95vw, 16px) !important;
  line-height: 1.6 !important;
}

/* =========================================
   ONE SIZE FOR ALL SECTION HEADINGS (Home)
   Why / Start now / Stories / Built for
   ========================================= */

:root{
  --fs-section-title: clamp(32px, 2.3vw, 42px);
  --lh-section-title: 1.15;
}

/* Mismo tamaño para TODOS los títulos de sección */
.section-title,
.problem-heading{
  font-size: var(--fs-section-title) !important;
  line-height: var(--lh-section-title) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0 !important;
}

/* Evita que contextos especiales lo cambien */
.start-now-section .section-title,
.testimonials-section .section-title,
.business-categories .section-title{
  font-size: var(--fs-section-title) !important;
  line-height: var(--lh-section-title) !important;
}

/* =========================================================
   PRODUCT — Typography aligned with HOME
   Pegar al FINAL de typography.css
   ========================================================= */

body.product-page{
  font-size: 16px;
  line-height: 1.65;
}

/* Hero (igual que Home) */
body.product-page .hero-tagline{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-gray);
  margin: 0 0 12px;
  line-height: 1.2;
  
  
}

body.product-page .hero-title{
  font-size: clamp(36px, 3.6vw, 47px) !important;
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
}

body.product-page .hero-subtitle{
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: clamp(28px, 2.4vw, 42px) !important;
  letter-spacing: 0.04px !important;
}

/* Todos los H2 principales del Product = mismo tamaño que Home */
body.product-page .helps-panel-header h2,
body.product-page .ask-elev-content h2,
body.product-page .whats-included-section .section-title,
body.product-page .audit-text h2,
body.product-page .cta-card h2{
  font-size: clamp(32px, 3.2vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04px !important;
}

/* Textos grandes/subtítulos consistentes */
body.product-page .helps-lede,
body.product-page .ask-elev-lede,
body.product-page .audit-text p{
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.65 !important;
}

/* Títulos internos (cards/steps) */
body.product-page .helps-step-title,
body.product-page .help-card-text h3,
body.product-page .card-header h3{
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Texto normal */
body.product-page .helps-step-body p,
body.product-page .help-card-text p,
body.product-page .card-features li,
body.product-page .ask-elev-highlights li{
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* =========================================
   PRODUCT HERO — Match Home typography
   (Pegar AL FINAL de typography.css)
   ========================================= */

body.restaurant-hero .hero-tagline{
  font-size: clamp(13px, 1.4vw, 20px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04px !important;
  margin-bottom: 10px !important;
  color: var(--text-dark) !important; /* igual jerarquía que Home */
  text-transform: none !important;
}

body.restaurant-hero .hero-title{
  font-size: clamp(34px, 3.6vw, 47px) !important;
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 20px !important;
  color: var(--text-dark) !important;
}

body.restaurant-hero .hero-subtitle{
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin-bottom: clamp(24px, 3vw, 50px) !important;
  color: var(--text-dark) !important;
}

/* Opcional: botones del hero con la misma “sensación” que Home */
body.restaurant-hero .hero-actions .btn{
  height: 56px !important;
  padding: 16px 28px !important;
  font-size: 18px !important;
}

/* Opcional: chips igual tono/tamaño (si quieres consistencia) */
body.restaurant-hero .trust-chip{
  font-size: 13px !important;
  line-height: 1.2 !important;
  padding: 10px 14px !important;
}

/* =========================================================
   PRODUCT HERO — FORCE same feel as HOME
   (pegar al FINAL de typography.css)
   ========================================================= */

:root{
  /* Ajusta aquí UNA SOLA VEZ si lo quieres aún más pequeño/grande */
  --home-hero-tagline: clamp(13px, 1.4vw, 20px);
  --home-hero-title:   clamp(34px, 2.7vw, 44px);
  --home-hero-sub:     clamp(16px, 1.05vw, 18px);
}

/* Tagline (azul y más “ligero” como Home) */
body.restaurant-hero .hero-tagline,
body.restaurant-hero .hero-tagline--product{
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(17, 24, 39, 0.75) !important; /* gris oscuro suave */
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}

/* H1 */
body.restaurant-hero h1.hero-title{
  font-size: var(--home-hero-title) !important;
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 18px !important;
}

/* Subtitle */
body.restaurant-hero p.hero-subtitle{
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text-dark) !important;
  margin-bottom: 26px !important;
}



/* =========================================================
   SOLUTIONS — Typography aligned with HOME
   Pegar AL FINAL de typography.css (recomendado)
   ========================================================= */

body.solutions-page{
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dark);
}

body.solutions-page .hero-tagline{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-gray);
  margin: 0 0 12px;
  line-height: 1.2;
  
  
}

body.solutions-page .solutions-hero-section .hero-copy h1{
  font-size: clamp(34px, 3.6vw, 47px) !important;
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 20px !important;
  color: var(--text-dark) !important;
}

body.solutions-page .solutions-hero-section .hero-copy .hero-sub{
  font-size: clamp(16px, 1.6vw, 22px) !important;
  line-height: clamp(28px, 2.4vw, 42px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04px !important;
  color: var(--text-dark) !important;
  margin-bottom: clamp(24px, 3vw, 50px) !important;
}

/* ---------- SECTION TITLES (H2) ---------- */
body.solutions-page .solutions-industries h2,
body.solutions-page .audit-text h2{
  font-size: clamp(32px, 2.3vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0 !important;
}

/* ---------- SECTION LEADS / PARAGRAPHS (los “rectángulos rojos”) ---------- */
/* Esto iguala los textos tipo descripción para que no haya unos a 14px y otros a 18px */
body.solutions-page .solutions-industries p,
body.solutions-page .industry-card p,
body.solutions-page .industry-align-left,
body.solutions-page .audit-text p,
body.solutions-page .audit-details p,
body.solutions-page .audit-features li{
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.65 !important;
  color: var(--text-gray) !important;
}

/* ---------- SUBTÍTULOS / TITULITOS (h3) ---------- */
body.solutions-page .audit-details h3{
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

/* ---------- “Learn more” consistente ---------- */
body.solutions-page .industry-cta{
  font-size: clamp(13px, 0.9vw, 14px) !important;
  font-weight: 600 !important;
}

/* ---------- Inputs: texto consistente (sin tocar layout) ---------- */
body.solutions-page .hero-actions .input,
body.solutions-page .audit-input{
  font-size: 16px !important;
}


/* =========================================================
   RESTAURANTS — Typography aligned with HOME
   Pegar al FINAL de typography.css (o restaurant.css)
   ========================================================= */

body:has(.restaurant-page),
body.restaurant-page{
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- HERO (kicker + H1 + subtitle) ---------- */
/* Kicker / eyebrow */
main.restaurant-page .hero-tagline,
main.restaurant-page .eyebrow,
main.restaurant-page .hero-copy .eyebrow{
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--text-dark) !important;
}

/* H1 */
main.restaurant-page .hero-title,
main.restaurant-page .hero-copy h1,
main.restaurant-page h1{
  font-size: clamp(34px, 3.6vw, 47px) !important; /* = Home */
  line-height: 1.12 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0.1px !important;
  color: var(--text-dark) !important;
}

/* Hero subtitle */
main.restaurant-page .hero-subtitle,
main.restaurant-page .hero-sub,
main.restaurant-page .hero-copy p{
  font-size: clamp(16px, 1.6vw, 18px) !important; /* = Home feel */
  line-height: 1.65 !important;
  color: var(--text-dark) !important;
  letter-spacing: 0.02em !important;
}

/* ---------- SECTION TITLES (H2) + subtitles ---------- */
main.restaurant-page .section-title,
main.restaurant-page .section-header h2,
main.restaurant-page h2{
  font-size: clamp(32px, 2.3vw, 42px) !important; /* = Home sections */
  line-height: 1.15 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0 !important;
  color: var(--text-dark) !important;
}

main.restaurant-page .section-subtitle,
main.restaurant-page .section-header p,
main.restaurant-page .lede,
main.restaurant-page .subhead{
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.6 !important;
  color: var(--text-gray) !important;
}

/* ---------- CARD TITLES (H3) + body text ---------- */
main.restaurant-page .card-title,
main.restaurant-page .pillar-card h3,
main.restaurant-page .step-card h3,
main.restaurant-page .feature-card h3,
main.restaurant-page h3{
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

/* Descripciones dentro de cards / bloques */
main.restaurant-page .card-content,
main.restaurant-page .card-content p,
main.restaurant-page .pillar-card p,
main.restaurant-page .step-card p,
main.restaurant-page .feature-card p,
main.restaurant-page p{
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--text-gray) !important;
}

/* ---------- Bullets / lists ---------- */
main.restaurant-page li,
main.restaurant-page .list li{
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--text-gray) !important;
}

/* ---------- Testimonial / quote blocks ---------- */
main.restaurant-page .testimonial-quote,
main.restaurant-page blockquote,
main.restaurant-page .quote{
  font-size: clamp(18px, 1.4vw, 22px) !important;
  line-height: 1.5 !important;
  color: var(--text-dark) !important;
}

main.restaurant-page .testimonial-author,
main.restaurant-page .quote-author{
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

/* ---------- Small UI text (chips / microcopy) ---------- */
main.restaurant-page .trust-chip,
main.restaurant-page .chip,
main.restaurant-page .microcopy{
  font-size: 13px !important;
  line-height: 1.2 !important;
}
/* =========================================
   CHECK BULLETS (reutilizable, independiente)
   Usa: <ul class="list-check">...</ul>
   ========================================= */

.list-check{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.list-check li{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0 !important;
  margin: 10px 0;
  color: var(--text-gray);
  line-height: 1.6;
}

.list-check li::before{
  content: "✓";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: var(--primary-orange);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}