/* Yang Li — consultor SEO. Paleta tinta / teal / oro + Fraunces + Inter.
   Fuente de verdad: _ia/SISTEMA-VISUAL.md
   Carga DESPUÉS de GeneratePress y pisa --accent/--contrast/--base. */

/* ===== Fuentes autoalojadas (woff2 en css/fonts/) ===== */
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Inter-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Fraunces-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:900;font-style:normal;font-display:swap;src:url(fonts/Fraunces-900.woff2) format('woff2')}

:root:root {
  /* ===================== Paleta Yang Li ===================== */
  --mr2-color1:      #0F4C5C;   /* teal profundo: botones, enlaces */
  --mr2-color2:      #C9A227;   /* oro: acento (NO texto largo) */
  --mr2-verde:       #0F4C5C;
  --mr2-verde-deep:  #0A3340;
  --mr2-turquesa:    #C9A227;

  --mr2-ember:       #C9A227;
  --mr2-caramel:     #C9A227;
  --mr2-sunburst:    #F3E6C0;
  --mr2-clay-deep:   #8A6E12;
  --mr2-clay-tint:   #F3E6C0;

  --mr2-teal-050:    #F6F1E8;
  --mr2-teal-100:    #EBE4D6;
  --mr2-teal-200:    #E0D7C6;
  --mr2-teal-300:    #F3E6C0;

  --mr2-beige:       #F6F1E8;
  --mr2-beige-deep:  #E0D7C6;

  --mr2-neutro1:     #ffffff;
  --mr2-neutro2:     #1A2B32;
  --mr2-gris:        #F6F1E8;

  --mr2-tinta:       #1A2B32;
  --mr2-texto:       #3D5158;
  --mr2-texto-suave: #5A6E75;
  --mr2-borde:       #E0D7C6;
  --mr2-error:       #C9392D;
  --mr2-error-deep:  #AE2F25;

  /* ===================== Tipografía ===================== */
  --mr2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;
  --mr2-font-head: 'Fraunces', Georgia, 'Times New Roman', 'Times', serif;

  /* ===================== Layout ===================== */
  --mr2-container: 1200px;
  --mr2-gutter:    1.25rem;
  --mr2-seccion:   4rem;
  --mr2-nav-h:     80px;
  --mr2-nav-h-m:   72px;

  --sp-0: 0;      --sp-1: 2px;   --sp-2: 4px;   --sp-3: 8px;
  --sp-4: 16px;   --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;
  --sp-8: 64px;   --sp-9: 80px;  --sp-10: 104px;

  --radius-0: 0;    --radius-1: 4px;   --radius-2: 8px;   --radius-3: 16px;
  --radius-4: 24px; --radius-5: 32px;  --radius-6: 48px;  --radius-circle: 50%;

  --mr2-shadow-sm: 0 1px 2px rgba(14, 43, 49, 0.05),
                  0 2px 6px rgba(14, 43, 49, 0.06);
  --mr2-shadow:    0 1px 2px rgba(14, 43, 49, 0.05),
                  0 4px 12px rgba(14, 43, 49, 0.07),
                  0 12px 28px rgba(14, 43, 49, 0.09);
  --mr2-shadow-lg: 0 2px 6px rgba(14, 43, 49, 0.06),
                  0 10px 24px rgba(14, 43, 49, 0.09),
                  0 24px 60px rgba(14, 43, 49, 0.13);

  /* Override GeneratePress */
  --accent:      #0F4C5C;
  --accent-2:    #C9A227;
  --accent-deep: #0A3340;
  --contrast:    #1A2B32;
  --contrast-2:  #45565A;
  --contrast-3:  #5C6E72;
  --base:        #ffffff;
  --base-2:      #FAF6F0;
  --base-3:      #ffffff;
}

html body,
html button,
html input,
html select,
html optgroup,
html textarea {
  font-family: var(--mr2-font);
  color: var(--mr2-tinta);
  font-size: 16px;
  line-height: 1.5;
}

html body {
  background-color: #ffffff;
}

html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: var(--mr2-font-head);
  color: var(--mr2-tinta);
  letter-spacing: -0.01em;
}

html h1 {
  font-size: clamp(2rem, 5vw, 56px);
  font-weight: 700;
  line-height: 1.14;
}

html h2 {
  font-size: clamp(1.75rem, 4vw, 48px);
  font-weight: 700;
  line-height: 1.17;
}

html h3 {
  font-size: clamp(1.5rem, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.2;
}

html p {
  line-height: 1.5;
}

.wp-block-button__link,
.gb-button,
button.button,
.button:not(.wpforms-submit) {
  border-radius: var(--radius-3);
  box-shadow: 0 6px 18px rgba(15, 76, 92, 0.22);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.gb-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.gen-sidebar-nav-mobile {
  display: none !important;
}

.mr2-comp {
  box-sizing: border-box;
}

.mr2-comp *,
.mr2-comp *::before,
.mr2-comp *::after {
  box-sizing: inherit;
}

/* Full-bleed para TODOS los componentes del kit.
   Antes solo lo tenían mr2-cabecera2 / apm-mapa-zona / apm-relacionadas, así que
   los cc-* se quedaban encajonados en el contenedor de 1200px de GeneratePress
   y convivían bandas de 1120 px con bandas a ancho completo. */
.entry-content .mr2-comp,
.entry-content .cc-comp {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* `clip` (no `hidden`) evita el desbordamiento horizontal que introduce 100vw al
   contar la barra de scroll, y no crea contenedor de scroll: position:sticky sigue vivo. */
html {
  overflow-x: clip;
}

/* Los cc_* NO necesitan que les fijemos el ancho: cada __inner ya declara su
   max-width y su `margin: 0 auto`. Lo único que les faltaba era sitio, y eso ya
   se lo da el full-bleed de arriba. Una regla genérica aquí sería además dañina,
   porque pisaría los anchos de lectura que algunos usan a propósito (860 px el
   título de sección, 760 px el hero sin imagen).

   Estos dos mr2-* se limitaban con su propio `width`/`max-width` en la SECCIÓN,
   que es justo lo que el full-bleed les pisa. Como no tienen fondo propio, en vez
   de sacarlos del full-bleed les damos el ancho en el __inner: así su contenido
   queda alineado en la misma columna de 1240 que el resto de secciones. */
.entry-content .mr2-comp.mr2-cinfo > .mr2-cinfo__inner,
.entry-content .mr2-comp.mr2-cta2 > .mr2-cta2__inner {
  max-width: var(--cc-container, 1240px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 32px;
  padding-left: 32px;
}

.site-content,
#content {
  padding-top: 0;
  padding-bottom: 0;
}

.entry-content > section:last-child,
.entry-content > *:last-child {
  margin-bottom: 0;
}
.entry-content > section:first-child,
.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content > .mr2-cta1:last-child {
  margin-bottom: 3rem;
}