/* =====================================================
   FINAL.CSS · TIPOGRAFÍA Y SISTEMA VISUAL GLOBAL
   Este archivo manda sobre todos los módulos
===================================================== */

:root{
  --font-title:"Caveat",cursive;
  --font-ui:"Inter",system-ui,sans-serif;
}

/* HERO */
.hero h1{
  font-family:var(--font-title) !important;
  font-size:clamp(4rem,7vw,6.2rem) !important;
  line-height:.82 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
  text-shadow:none !important;
}

/* TÍTULOS DE MÓDULO */
.section-title h2,
#view-home .section-title h2,
#view-days .section-title h2,
#view-route .section-title h2,
#view-hotels .section-title h2,
#view-food .section-title h2,
#view-expenses .section-title h2,
#view-photos .section-title h2,
#view-chat .section-title h2,
#view-more .section-title h2{
  font-family:var(--font-title) !important;
  font-size:clamp(3.2rem,5vw,4.6rem) !important;
  line-height:.88 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
}

/* TÍTULOS DE TARJETAS */
.today-card h3,
.home-smart-title,
#nextPlanTitle,
.timeline-top h3,
.route-timeline-card h3,
.hotel-title h3,
.note-card h4,
.food-info h3,
.more-card h3,
.info-card h3,
.lock-card h3{
  font-family:var(--font-title) !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
}

/* TEXTO NORMAL */
body,
button,
input,
textarea,
select,
.section-title p,
.hero p,
.subtitle,
.today-card p,
.note-card p,
.note-card li,
.timeline-mood,
.hotel-title p,
.hotel-address,
.hotel-notes,
.food-info small,
.food-description,
.food-type{
  font-family:var(--font-ui) !important;
}

/* ETIQUETAS */
.label,
.day-date,
.timeline-day,
.hotel-dashboard span,
.food-stat span,
.dash-card small,
.note-card small{
  font-family:var(--font-ui) !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
}

/* MÓVIL */
@media(max-width:760px){
  .hero h1{
    font-size:3.35rem !important;
  }

  .section-title h2,
  #view-home .section-title h2,
  #view-days .section-title h2,
  #view-route .section-title h2,
  #view-hotels .section-title h2,
  #view-food .section-title h2,
  #view-expenses .section-title h2,
  #view-photos .section-title h2,
  #view-chat .section-title h2,
  #view-more .section-title h2{
    font-size:2.75rem !important;
  }
}