/* Estilos globales y paleta de marca de shortcodes_personalizados.es.
   Sistema de diseño inspirado en clinic-cloud.com: teal/turquesa sobre blanco y
   beige cálido, tipografía Figtree, esquinas redondeadas y sombras suaves.
   Esta hoja se encola en todo el sitio y carga DESPUÉS del CSS de GeneratePress,
   así que sus :root y su tipografía ganan la cascada: deja de marca tanto los
   componentes (--mr-*) como el propio tema (sobrescribe --accent/--contrast/--base). */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* ===================== Paleta de marca (teal / clinic-cloud) ===================== */
  --mr-color1:      #007c68;   /* teal oscuro: botones, enlaces, acentos fuertes */
  --mr-color2:      #1cc9ab;   /* turquesa vivo: acentos claros, spans, decoración */
  --mr-verde:       #007c68;   /* teal: checks, badge, WhatsApp, éxito (texto blanco legible) */
  --mr-verde-deep:  #006a59;   /* teal enlace/hover */
  --mr-turquesa:    #1cc9ab;   /* alias turquesa vivo */

  /* Teales claros (fondos suaves de secciones y chips) */
  --mr-teal-050:    #f2faf7;
  --mr-teal-100:    #dff9f2;
  --mr-teal-200:    #c1f5e7;
  --mr-teal-300:    #8febd5;

  /* Secundario cálido (beige) */
  --mr-beige:       #f7f2ed;   /* beige claro: fondos de sección alternos */
  --mr-beige-deep:  #e8e1d9;   /* beige oscuro: bordes/hover cálidos */

  /* Neutros */
  --mr-neutro1:     #ffffff;
  --mr-neutro2:     #242727;   /* casi negro: titulares / texto fuerte */
  --mr-gris:        #f7f2ed;   /* fondo suave de sección (beige claro) */

  /* Alias que consumen los componentes */
  --mr-tinta:       #242727;   /* titulares / texto fuerte (nunca negro puro) */
  --mr-texto:       #565f5f;   /* texto de cuerpo (gris oscuro) */
  --mr-texto-suave: #667070;   /* texto secundario (gris medio) */
  --mr-borde:       #e6ebe9;   /* bordes suaves */
  --mr-error:       #c9392d;   /* estado error */
  --mr-error-deep:  #ae2f25;

  /* ===================== Tipografía ===================== */
  --mr-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;

  /* ===================== Layout ===================== */
  --mr-container: 1200px;
  --mr-gutter:    1.25rem;
  --mr-seccion:   4rem;
  --mr-nav-h:     80px;   /* altura barra navegación (escritorio) */
  --mr-nav-h-m:   72px;   /* móvil */

  /* ===================== Escala de espaciado (px) ===================== */
  --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;

  /* ===================== Radios de borde ===================== */
  --radius-0: 0;    --radius-1: 4px;   --radius-2: 8px;   --radius-3: 16px;
  --radius-4: 24px; --radius-5: 32px;  --radius-6: 48px;  --radius-circle: 50%;

  /* ===================== Sombras (3 capas suaves en negro, baja opacidad) ===================== */
  --mr-shadow-sm: 0 1px 2px rgba(36, 39, 39, 0.04),
                  0 2px 6px rgba(36, 39, 39, 0.05);
  --mr-shadow:    0 1px 2px rgba(36, 39, 39, 0.04),
                  0 4px 12px rgba(36, 39, 39, 0.06),
                  0 12px 28px rgba(36, 39, 39, 0.08);
  --mr-shadow-lg: 0 2px 6px rgba(36, 39, 39, 0.05),
                  0 10px 24px rgba(36, 39, 39, 0.08),
                  0 24px 60px rgba(36, 39, 39, 0.12);

  /* ===================== Override de las variables globales de GeneratePress ===================== */
  --accent:      #007c68;   /* teal: enlaces, botones y acentos del tema */
  --accent-2:    #1cc9ab;   /* turquesa: acento secundario */
  --accent-deep: #006a59;   /* teal oscuro: hover/enlaces */
  --contrast:    #242727;   /* texto principal (casi negro) */
  --contrast-2:  #565f5f;
  --contrast-3:  #667070;
  --base:        #ffffff;   /* fondo de página blanco */
  --base-2:      #f7f2ed;   /* beige claro para bloques suaves */
  --base-3:      #ffffff;
}

/* Tipografía de marca en todo el sitio (Figtree) */
body,
button,
input,
select,
optgroup,
textarea {
  font-family: var(--mr-font);
  color: var(--mr-tinta);
  font-size: 16px;      /* texto base 16 / interlineado 24 */
  line-height: 1.5;
}

body {
  background-color: var(--base);
}

/* Jerarquía de titulares (Figtree 600, como clinic-cloud) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mr-font);
  color: var(--mr-tinta);
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2rem, 5vw, 56px);   /* hero 56 / interlineado 64 */
  font-weight: 600;
  line-height: 1.14;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 48px); /* sección 48 / interlineado 56 */
  font-weight: 600;
  line-height: 1.17;
}

p {
  line-height: 1.5;
}

/* Botones de marca por defecto (teal sólido, esquinas redondeadas, sombra suave).
   No usa !important: los estilos intencionados por bloque siguen mandando. */
.wp-block-button__link,
.gb-button,
button.button,
.button:not(.wpforms-submit) {
  border-radius: var(--radius-3);
  box-shadow: 0 6px 18px rgba(0, 124, 104, 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);
}

/* El menú de navegación SÍ se muestra: hay un menú "Principal" propio
   asignado a la ubicación primary (Influencers, Servicio 360º, Asesoramiento,
   Contacto). Su diseño vive en css/menu.css. Se mantiene oculta solo la
   sidebar-nav móvil heredada, que no se usa. */
.gen-sidebar-nav-mobile {
  display: none !important;
}

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

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

/* Elimina la franja blanca que dejaba GeneratePress entre la última sección de
   color (bloques cc-*, que ya traen su propio padding) y el footer. El contenedor
   #content añadía 40px de padding vertical que asomaban en blanco (fondo del body)
   en todas las URLs. Los bloques gestionan su propio espaciado, así que lo anulamos. */
.site-content,
#content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Además, algunos bloques cc-* (p. ej. cc-cta) llevan su propio margin vertical
   para separarse de la sección siguiente. Cuando son el ÚLTIMO bloque de la página,
   ese margin asoma en blanco antes del footer. Anulamos el margen del último
   (y del primero, para que no deje aire bajo la cabecera). */
.entry-content > section:last-child,
.entry-content > *:last-child {
  margin-bottom: 0;
}
.entry-content > section:first-child,
.entry-content > *:first-child {
  margin-top: 0;
}