/* === Variables === */

:root {
  /* Colores */
  --bep-color-titulo: #3870A8;
  --bep-color-cuerpo: #6F6F6E;
  --bep-color-acento: #6BA9DD;
  --bep-color-fondo-cards: #CFDFEF;
  --bep-color-footer-bg: #C1D9F4;
  --bep-color-footer-texto: #FFFFFF;
  --bep-color-nav-default: #A3C2DF;
  --bep-color-nav-hover: #4482C1;
  --bep-color-feature-text: #4281C0;
  /* Both added during the 7-section audit cleanup: each was already showing
     up as a hardcoded hex, independently, across 4 of those sections
     (Breaker/Beneficios/Contexto/Dermociencia for -titulo-azul;
     Beneficios/Cómo Actúa/Contexto/Dermociencia for -texto-suave) — this
     just gives that repetition a name instead of leaving it as
     coincidentally-matching literals. --bep-color-titulo-azul is a near
     duplicate of --bep-color-titulo (#3870A8) but kept separate rather than
     merged into it, since --bep-color-titulo may still be relied on
     elsewhere in the site outside this audit's 7 sections. */
  --bep-color-titulo-azul: #3875a6;
  --bep-color-texto-suave: #5e7a85;

  /* Tipografía */
  --bep-font-bold: 'Lato-Bold', sans-serif;
  --bep-font-body: 'Lato-Regular', sans-serif;
  --bep-font-hangul: 'Bepantol Rutina Hangul', sans-serif;
  --bep-font-qanelas: 'Qanelas Soft', sans-serif;
  --bep-font-tt-chocolates: 'TT Chocolates', sans-serif;
  --bep-font-pt-serif: 'PT Serif', serif;

  /* Jerarquía tipográfica compartida (títulos de sección / de card / texto de card) */
  --bep-font-section-title-size: 2.5rem;
  --bep-font-card-title-size: 1.5rem;
  --bep-font-card-title-weight: normal;
  /* Was 1.125rem — raised to 1.25rem during the 7-section audit cleanup:
     that was the value most sections using "card/caption body text" had
     already converged on independently (Beneficios, Cómo Actúa,
     Presentación), while only Contexto/Dermociencia were actually reading
     this token at its old value. Raising it here brings all 5 onto the same
     variable instead of 3 of them matching it by coincidence. */
  --bep-font-card-text-size: 1.25rem;

  /* Layout */
  --bep-container-max-width: 1280px;
  --bep-container-padding: 40px;
  --bep-navbar-height: 80px;
  --bep-section-padding-y: 60px;
}

/* Responsive token overrides: since every section reads these shared
   tokens via var(), scaling them once here cascades to all of them
   automatically instead of needing a font-size/padding override in every
   section file. Breakpoints: tablet 1024px, mobile 768px (desktop-first,
   max-width — see CLAUDE.md "Convenciones de trabajo"). */
@media (max-width: 1024px) {
  :root {
    --bep-container-padding: 24px;
    --bep-section-padding-y: 40px;
    --bep-font-section-title-size: 2rem;
    --bep-font-card-title-size: 1.375rem;
    --bep-font-card-text-size: 1rem;
  }
}

@media (max-width: 768px) {
  :root {
    --bep-container-padding: 24px;
    --bep-section-padding-y: 32px;
    --bep-font-section-title-size: 1.625rem;
    --bep-font-card-title-size: 1.25rem;
  }
}

/* === Fonts === */

@font-face {
  font-family: 'Qanelas Soft';
  src: url('../../assets/fonts/QanelasSoft-Bold.woff2') format('woff2'),
    url('../../assets/fonts/QanelasSoft-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Qanelas Soft';
  src: url('../../assets/fonts/QanelasSoft-Regular.woff2') format('woff2'),
    url('../../assets/fonts/QanelasSoft-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Serif';
  src: url('../../assets/fonts/PTSerif-Italic.woff2') format('woff2'),
    url('../../assets/fonts/PTSerif-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PT Serif';
  src: url('../../assets/fonts/PTSerif-BoldItalic.woff2') format('woff2'),
    url('../../assets/fonts/PTSerif-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TT Chocolates';
  src: url('../../assets/fonts/TTChocolates-DemiBold.woff2') format('woff2'),
    url('../../assets/fonts/TTChocolates-DemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Chocolates';
  src: url('../../assets/fonts/TTChocolates-Italic.woff2') format('woff2'),
    url('../../assets/fonts/TTChocolates-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TT Chocolates';
  src: url('../../assets/fonts/TTChocolates-Medium.woff2') format('woff2'),
    url('../../assets/fonts/TTChocolates-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Chocolates';
  src: url('../../assets/fonts/TTChocolates-Regular.woff2') format('woff2'),
    url('../../assets/fonts/TTChocolates-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato-Bold';
  src: url('../../assets/fonts/Lato-Bold.woff2') format('woff2'),
    url('../../assets/fonts/Lato-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato-Regular';
  src: url('../../assets/fonts/Lato-Regular.woff2') format('woff2'),
    url('../../assets/fonts/Lato-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bepantol Rutina Hangul';
  src: url('../../assets/fonts/bepantol-rutina-hangul.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === Reset === */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* overflow-x:clip (not hidden) needs to live on BOTH html and body: in a
   standards-mode document (this one has a <!DOCTYPE html>), the element
   that actually controls page-level horizontal scrolling is <html>, not
   <body> — overflow-x on body alone doesn't reliably stop the page itself
   from scrolling sideways if something overflows (confirmed live: a stray
   transform on .bep-contexto-image was doing exactly that before its own
   fix, and only having it on body let the whole page pan right instead of
   clipping the overflow).
   clip instead of hidden is deliberate, confirmed live with Playwright in
   both Chromium and WebKit: any overflow-x/y value other than visible on
   an ancestor turns that ancestor into a CSS "scroll container", and
   position:sticky computes its stuck range relative to the nearest scroll
   container ancestor — with hidden here, that was html/body themselves,
   which broke .bep-hero-sticky's sticky positioning (it silently stopped
   sticking and just scrolled away, exposing .bep-hero's own black
   background as a growing gap). clip clips the same as hidden but is
   spec'd to NOT create a scroll container, so it contains horizontal
   overflow without touching sticky elsewhere in the document. Second layer
   of containment for the original .bep-contexto-image bug now lives at its
   actual source too (see .bep-contexto in contexto.css), so this global
   rule is a sitewide backstop, not the only thing containing that bug. */
html {
  min-height: 100%;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  background-color: #ffffff;
  font-family: var(--bep-font-body);
  color: var(--bep-color-cuerpo);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* === Utilities === */

/* Conditional <br> pair, reusable in any section: .bep-break-desktop shows
   the line break on desktop/tablet and hides it on mobile; .bep-break-mobile
   is the inverse (hidden by default, shown only on mobile). Same 768px
   mobile breakpoint as the rest of the theme (see "Convenciones de
   trabajo" en CLAUDE.md). */
.bep-break-desktop {
  display: block;
}

.bep-break-mobile {
  display: none;
}

@media (max-width: 768px) {
  .bep-break-desktop {
    display: none;
  }

  .bep-break-mobile {
    display: block;
  }
}

/* Shared background wrapper for Cómo Actúa + Beneficios (front-page.php /
   index.php) — a continuous gradient behind both sections, which stay
   without any background of their own so it shows through. Lives here
   rather than in either section's own CSS file since it belongs to neither
   individually. */
.bep-como-actua-beneficios-bg {
  background: linear-gradient(to top right, #eef3f8 17.784%, #e6ecf1 52.7933%, #ffffff 100%);
}