@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Alexandria:wght@400;500;600;700&family=Satisfy&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.82;
  color: var(--color-text);
  background-color: var(--color-body-bg);
  /* El header original es absolute (desktop) / fixed (mobile); el contenido arranca debajo */
  padding-top: var(--header-height-desktop);
}

@media (max-width: 1199px) {
  body {
    padding-top: var(--header-height-mobile);
  }
}

/* El theme original usa Nunito también en los headings por defecto;
   Alexandria sólo aparece en headings puntuales (corporativo / franquicias). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-navy);
  font-weight: 700;
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

/* Título script naranja (Satisfy 54px) usado en "Destacados" / "Imperdibles" */
.script-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  color: var(--color-accent);
  text-align: center;
  margin: 0;
}

@media (max-width: 767px) {
  .script-title {
    font-size: 36px;
  }
}

.text-accent {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-accent);
}

/* Título de sección estilo Alexandria (corporativo / franquicias) */
.alexandria-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 30px;
  line-height: 35px;
  font-weight: 400;
}

.btn-brand {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: bold;
  border-radius: var(--radius-base);
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.badge-category {
  background-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-base);
}

img {
  max-width: 100%;
  height: auto;
}

/* Sección full-bleed que sobresale como las secciones "stretched" de Elementor
   (usa 100vw, que incluye el ancho del scrollbar, igual que el original) */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* El container del theme original mide 1250px en desktop
   (Bootstrap 5 usa 1320px a partir de 1400px de viewport) */
@media (min-width: 1200px) {
  .container {
    max-width: 1250px;
  }
}

.py-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (max-width: 767px) {
  .py-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}