/*!
 * carta-sitio.css · header, navegación, pie y WhatsApp de saracosme.com
 * con la identidad "Carta de autor" (25-oct-2026, A3).
 * Se enlaza desde la parte de plantilla "header" (post 7) DESPUÉS de
 * smc-styles.css, smc-publico.css y carta.css. Sube su ?v= al editarla
 * (primeros 8 caracteres de md5 -q). No toca el contenido de las páginas:
 * solo .smc-header, la navegación, .smc-footer y .smc-whatsapp.
 * Paleta: crema #FFFAF3 · lienzo #F8F2E8 · arena #E9DFCC · oliva #866F3B ·
 * oliva-hondo #6B5A2E · café #2E2A24 · tinta-2 #4F4739 · tinta-3 #6F6656.
 */
:root {
  --cs-crema: #FFFAF3;
  --cs-lienzo: #F8F2E8;
  --cs-arena: #E9DFCC;
  --cs-oliva: #866F3B;
  --cs-oliva-hondo: #6B5A2E;
  --cs-cafe: #2E2A24;
  --cs-tinta-2: #4F4739;
  --cs-tinta-3: #6F6656;
  --cs-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --cs-texto: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Header ===== */
html body .smc-header {
  background: var(--cs-crema);
  box-shadow: 0 1px 0 var(--cs-arena);
}

html body .smc-header .wp-block-navigation {
  font-family: var(--cs-texto);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

html body .smc-header .wp-block-navigation a { color: var(--cs-cafe); }
html body .smc-header .wp-block-navigation a:hover { color: var(--cs-oliva-hondo); }
html body .smc-header .wp-block-navigation a:focus-visible { outline: 2px solid var(--cs-oliva); outline-offset: 4px; }

html body .smc-header .wp-block-navigation__responsive-container-open,
html body .smc-header .wp-block-navigation__responsive-container-close { color: var(--cs-cafe); }

/* Menú desplegable */
html body .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--cs-crema);
  color: var(--cs-cafe);
}

html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  font-size: 0.95rem;
  gap: 1.6rem;
}

/* Botón "Agenda" dentro de la navegación (navigation-link .smc-nav-agenda) */
html body .wp-block-navigation .smc-nav-agenda > a,
html body .wp-block-navigation .smc-nav-agenda > a:hover {
  color: #fff;
}

html body .wp-block-navigation .smc-nav-agenda > a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 1.25rem;
  background: var(--cs-oliva-hondo);
  border: 1px solid var(--cs-oliva-hondo);
  border-radius: 2px;
  line-height: 1;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html body .wp-block-navigation .smc-nav-agenda > a:hover,
html body .wp-block-navigation .smc-nav-agenda > a:focus-visible {
  background: var(--cs-cafe);
  border-color: var(--cs-cafe);
}

html body .wp-block-navigation__responsive-container.is-menu-open .smc-nav-agenda > a {
  height: 48px;
  padding: 0 2rem;
  margin-top: 0.4rem;
}

/* Acceso al portal (bloque .smc-portal-acceso del header) */
html body .smc-portal-acceso {
  font-family: var(--cs-texto);
  font-size: 0.66rem;
  color: var(--cs-cafe);
  background: transparent;
  border-color: var(--cs-oliva);
  border-radius: 2px;
}

html body .smc-portal-acceso:hover,
html body .smc-portal-acceso:focus-visible {
  color: var(--cs-cafe);
  background: var(--cs-lienzo);
  border-color: var(--cs-oliva-hondo);
}

html body .smc-portal-acceso:focus-visible { outline-color: var(--cs-oliva); }
html body .smc-portal-acceso__icono { color: var(--cs-oliva-hondo); }

/* Entrada "Portal de pacientes" del menú desplegable */
html body .wp-block-navigation__responsive-container.is-menu-open .smc-nav-portal::before { background: var(--cs-oliva); }
html body .wp-block-navigation__responsive-container.is-menu-open .smc-nav-portal .wp-block-navigation-item__label::before { background: var(--cs-oliva-hondo); }
html body .wp-block-navigation__responsive-container.is-menu-open .smc-nav-portal .wp-block-navigation-item__description { color: var(--cs-tinta-2); }

/* Escritorio justo: la fila lleva 4 enlaces + botón Agenda + Portal */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  html body .smc-header .wp-block-navigation,
  html body .smc-header .wp-block-navigation .wp-block-navigation__container { gap: 1.5rem; }
}

/* Sin hueco blanco entre el contenido y el pie (block gap del tema) */
html body .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
/* …ni entre el header y el contenido */
html body .wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0; }

/* ===== Pie ===== */
html body .smc-footer {
  background: var(--cs-lienzo);
  color: var(--cs-tinta-2);
  border-top: 1px solid var(--cs-arena);
  font-family: var(--cs-texto);
  font-weight: 400;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(20px, 5vw, 2rem) 2rem;
}

html body .smc-footer-content { max-width: 1120px; }

html body .smc-footer-top {
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  border-bottom: 1px solid var(--cs-arena);
}

html body .smc-footer-logo img {
  filter: none;
  opacity: 1;
  height: 56px;
  width: auto;
}

html body .smc-footer-logo p,
html body .smc-footer-nap {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--cs-tinta-2);
}

html body .smc-footer-nap { font-style: normal; margin-top: 0.9rem; }
html body .smc-footer-nap a { color: var(--cs-oliva-hondo); text-decoration: underline; text-decoration-color: var(--cs-arena); text-underline-offset: 0.25em; }
html body .smc-footer-nap a:hover { color: var(--cs-cafe); }

html body .smc-footer h5 {
  font-family: var(--cs-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--cs-cafe);
  letter-spacing: 0.01em;
}

html body .smc-footer-links a {
  font-size: 0.86rem;
  color: var(--cs-tinta-2);
  letter-spacing: 0.01em;
}

html body .smc-footer-links a:hover,
html body .smc-footer-links a:focus-visible { color: var(--cs-oliva-hondo); text-decoration: underline; text-underline-offset: 0.25em; }

html body .smc-footer-cofepris h5 {
  font-family: var(--cs-texto);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--cs-tinta-3);
}

html body .smc-cofepris-item { font-size: 0.78rem; color: var(--cs-tinta-3); }
html body .smc-cofepris-item strong { color: var(--cs-tinta-2); }

html body .smc-footer-bottom {
  border-top: 1px solid var(--cs-arena);
  font-size: 0.76rem;
  color: var(--cs-tinta-3);
}

@media (max-width: 1099.98px) {
  html body .smc-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599.98px) {
  html body .smc-footer-top { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===== WhatsApp: discreto, en oliva (sin la burbuja verde) ===== */
html body .smc-whatsapp {
  width: 48px;
  height: 48px;
  right: 1.25rem;
  bottom: 1.25rem;
  background: var(--cs-oliva-hondo);
  border: 1px solid var(--cs-crema);
  box-shadow: none;
}

html body .smc-whatsapp:hover,
html body .smc-whatsapp:focus-visible {
  transform: none;
  background: var(--cs-cafe);
  box-shadow: none;
}

html body .smc-whatsapp svg { width: 22px; height: 22px; fill: #fff; }

/* Páginas con barra fija de reserva (.c-barra de carta.css): la barra ya
   lleva WhatsApp y se deja espacio para que no tape el pie. */
@media (max-width: 899.98px) {
  html body:has(.carta .c-barra) .smc-whatsapp { display: none; }
  html body:has(.carta .c-barra) .smc-footer { padding-bottom: calc(2rem + 76px); }
}

/* ===== Prioridad sobre los colores del tema =====
   La navegación lleva las clases has-contrast-color y has-base-background-color
   (presets del tema con !important): sin esto el menú abierto sale blanco y el
   texto del botón "Agenda" sale casi negro. */
html body .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--cs-crema) !important; }
html body .smc-header .wp-block-navigation .wp-block-navigation-item:not(.smc-nav-agenda) > a { color: var(--cs-cafe) !important; }
html body .smc-header .wp-block-navigation .wp-block-navigation-item:not(.smc-nav-agenda) > a:hover { color: var(--cs-oliva-hondo) !important; }
html body .smc-header .wp-block-navigation .smc-nav-agenda > a { color: #fff !important; }
html body .wp-block-navigation__responsive-container.is-menu-open .smc-nav-agenda > a.wp-block-navigation-item__content { padding: 0 2rem !important; }

/* Con el menú abierto, la barra fija de reserva no se encima (el header crea su propio contexto de apilado) */
html.has-modal-open body .carta .c-barra { display: none; }

/* =====================================================================
 * LEGIBILIDAD (R4, 26-oct-2026): letra más grande, peso 400+, más contraste.
 * Texto corrido ≥ 17 px en celular y 18 px en escritorio; notas en tinta-2
 * (#4F4739), nada en gris claro. Se hace redefiniendo la escala de carta.css
 * dentro de .carta (las hojas de cada página usan esas variables), más ajustes
 * puntuales. No aplica a /facial-pro/ ni a sus niveles (R3 las rehace):
 * page-id-97 y parent-pageid-97. Para incluirlas, quitar esos :not().
 * ===================================================================== */
body:not(.page-id-97):not(.parent-pageid-97) .carta {
  --t-xs: .875rem;   /* cejas, chips, etiquetas en mayúsculas: 14 px */
  --t-s: 1.0625rem;  /* listas, notas, pasos: 17 px */
  --t-m: 1.0625rem;  /* texto corrido: 17 px */
  --t-l: 1.25rem;    /* entradillas: 20 px */
  --c-tinta-3: #4F4739; /* las notas pasan a tinta-2 */
  font-weight: 400;
}
@media (min-width: 900px) {
  body:not(.page-id-97):not(.parent-pageid-97) .carta {
    --t-xs: .9375rem; --t-s: 1.125rem; --t-m: 1.125rem; --t-l: 1.3125rem;
  }
}
body:not(.page-id-97):not(.parent-pageid-97) .carta .c-lead { font-weight: 400; color: var(--c-tinta-2); line-height: 1.55; }
body:not(.page-id-97):not(.parent-pageid-97) .carta p { max-width: 62ch; }
body:not(.page-id-97):not(.parent-pageid-97) .carta .c-btn { font-size: 1rem; letter-spacing: .08em; line-height: 1.2; text-align: center; }
body:not(.page-id-97):not(.parent-pageid-97) .carta .c-ceja { font-weight: 600; }
body:not(.page-id-97):not(.parent-pageid-97) .carta .c-faq summary { font-size: 1.4rem; }
body:not(.page-id-97):not(.parent-pageid-97) .carta .c-faq details > *:not(summary) { color: var(--c-cafe); }
body:not(.page-id-97):not(.parent-pageid-97) .carta small { font-size: .9375rem; }
body:not(.page-id-97):not(.parent-pageid-97) .carta dt { font-size: .9375rem; }
/* Portada */
body:not(.page-id-97):not(.parent-pageid-97) .carta .pt-heroe__foto figcaption,
body:not(.page-id-97):not(.parent-pageid-97) .carta .pt-contacto__lista span { font-size: .9375rem; }
/* Tratamientos y Sara */
body:not(.page-id-97):not(.parent-pageid-97) .carta .t-nivel-nota,
body:not(.page-id-97):not(.parent-pageid-97) .carta .t-barra-texto { font-size: 1rem; }
body:not(.page-id-97):not(.parent-pageid-97) .carta .t-migas { font-size: .9375rem; }
/* Legales */
body:not(.page-id-97):not(.parent-pageid-97) .carta-legal .l-tabla { font-size: var(--t-s); }
body:not(.page-id-97):not(.parent-pageid-97) .carta-legal .l-proc-cuerpo h4 { font-size: .875rem; color: var(--c-oliva-hondo); }
body:not(.page-id-97):not(.parent-pageid-97) .carta-legal .l-indice ol { font-size: var(--t-m); }
body:not(.page-id-97):not(.parent-pageid-97) .carta-legal .l-cuerpo p,
body:not(.page-id-97):not(.parent-pageid-97) .carta-legal .l-cuerpo li { color: var(--c-cafe); }

/* Landing /cosmetologa-en-cumbres/ (post 62, landing.css) */
body.page-id-62 .lp { font-size: 1.0625rem; }
body.page-id-62 .lp :is(.lp-lead, .lp-metodo-intro) { font-size: 1.1875rem; }
body.page-id-62 .lp :is(.lp-paso p, .lp-capas-cabeza p, .lp-parada p, .lp-parada .lp-sensacion, .lp-capas-cierre > p:first-child, .lp-protocolos li, .lp-sara-texto > p, .lp-datos dd, .lp-zona-nota, .lp-zona-texto > p, .lp-faq details p, .lp-puerta > p, .lp-puerta-wa a) { font-size: 1.0625rem; }
body.page-id-62 .lp :is(.lp-paso p, .lp-capas-cabeza p, .lp-parada p, .lp-capas-cierre > p:first-child, .lp-sara-texto > p, .lp-zona-texto > p, .lp-faq details p) { color: var(--lp-tinta); }
body.page-id-62 .lp :is(.lp-direccion, .lp-mapa figcaption, .lp-datos dt, .lp-diagrama-pie) { font-size: .9375rem; }
body.page-id-62 .lp :is(.lp-h1-lugar, .lp-parada .lp-parada-capa) { font-size: .875rem; }
body.page-id-62 .lp .lp-btn { font-size: .9375rem; }
body.page-id-62 .lp .lp-ilustrativo { font-size: .8125rem; }
body.page-id-62 .lp .lp-puerta > p { color: #F8F2E8; }
@media (min-width: 900px) {
  body.page-id-62 .lp { font-size: 1.125rem; }
  body.page-id-62 .lp :is(.lp-paso p, .lp-capas-cabeza p, .lp-parada p, .lp-parada .lp-sensacion, .lp-capas-cierre > p:first-child, .lp-protocolos li, .lp-sara-texto > p, .lp-datos dd, .lp-zona-nota, .lp-zona-texto > p, .lp-faq details p, .lp-puerta > p, .lp-puerta-wa a) { font-size: 1.125rem; }
}

/* Header y pie, en todas las páginas */
html body .smc-header .wp-block-navigation { font-size: .8125rem; letter-spacing: .12em; }
html body .smc-portal-acceso { font-size: .75rem; }
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-size: 1.0625rem; }
html body .smc-footer-logo p,
html body .smc-footer-nap { font-size: 1.0625rem; color: var(--cs-cafe); }
html body .smc-footer h5 { font-size: 1.35rem; }
html body .smc-footer-links a { font-size: 1.0625rem; color: var(--cs-cafe); }
html body .smc-footer-cofepris h5 { font-size: .8125rem; color: var(--cs-tinta-2); }
html body .smc-cofepris-item { font-size: .9375rem; color: var(--cs-tinta-2); }
html body .smc-cofepris-item strong { color: var(--cs-cafe); }
html body .smc-footer-bottom { font-size: .875rem; color: var(--cs-tinta-2); }
html body .smc-header .wp-block-navigation-item__label { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279.98px) {
  html body .smc-header .wp-block-navigation { font-size: .75rem; letter-spacing: .1em; }
  html body .smc-header .wp-block-navigation,
  html body .smc-header .wp-block-navigation .wp-block-navigation__container { gap: 1.15rem; }
}
/* Portada: la franja Sesión · Te atiende · Desde cabe en una fila en celular */
@media (max-width: 599.98px) {
  body:not(.page-id-97):not(.parent-pageid-97) .carta .pt-datos { flex-wrap: nowrap; }
  body:not(.page-id-97):not(.parent-pageid-97) .carta .pt-datos > div { padding-right: 12px; margin-right: 12px; }
  body:not(.page-id-97):not(.parent-pageid-97) .carta .pt-datos dt { font-size: .8125rem; letter-spacing: .1em; }
  body:not(.page-id-97):not(.parent-pageid-97) .carta .pt-datos dd small { display: block; margin: 4px 0 0; }
}
@media (max-width: 599.98px) {
  body:not(.page-id-97):not(.parent-pageid-97) .carta .rg-datos dt { font-size: .8125rem; letter-spacing: .08em; }
}