/* Solar Women sobre la plantilla Calmind (Designesia).
   Esta capa va después de los CSS de la plantilla y es la única que se edita: los archivos de la
   plantilla quedan tal cual (salvo los @import de Google Fonts, que se quitaron de style.css).
   Identidad de Heidi: el dorado #f6b538 de su logo y su paleta, el malva #aa667e de su paleta (Óscar descartó
   el ciruela el 27-oct: no quiere morado), un gris tinta casi negro para el texto, el amarillo #fcdf81 que eligió Óscar. Letra: Jost (el clon libre de Futura, la que
   ella eligió) en todo el sitio, como en palabrasdeltodo.com, que usa Futura PT Book en el texto y
   Futura PT Heavy en menú y títulos. Futura PT es de pago (Paratype); Jost es la libre. Contrastes medidos. */

@font-face { font-family: 'Jost'; src: url('/estatico/fuentes/jost-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/estatico/fuentes/jost-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --primary-color: #f6b538;            /* su dorado */
  --primary-color-rgb: 246, 181, 56;
  --secondary-color: #aa677e;          /* su malva */
  --secondary-color-rgb: 170, 103, 126;
}

/* La plantilla define sus variables en «*», así que se pisan ahí mismo. */
* {
  --heading-font: "Jost", Helvetica, Arial, sans-serif;
  --heading-font-weight: 500;
  --heading-font-color: #33292b;       /* tinta · 14,07 sobre blanco */
  --alt-font: "Jost", Helvetica, Arial, sans-serif;
  --title-font: "Jost", Helvetica, Arial, sans-serif;
  --body-font: "Jost", Helvetica, Arial, sans-serif;
  --body-font-size: 17px;
  --mainmenu-font: "Jost", Helvetica, Arial, sans-serif;
  --mainmenu-font-size: 16px;
  --mainmenu-letter-spacing: 0.02em;
  --body-font-color: #4d4447;          /* 9,4 sobre blanco */
  --bg-dark-1: #aa667e;                /* su malva · blanco encima 4,28 (solo texto grande o en negrita) */
  --bg-dark-1-rgb: 170, 102, 126;
  --bg-dark-2: #8f5368;                /* malva oscuro · blanco encima 5,83 */
  --bg-dark-3: #b8798f;
  --btn-color: #33292b;                /* letra tinta sobre el dorado · 7,76 */
  --btn-hover-color: #ffffff;
  --btn-hover-bg: #8f5368;
  --subtitle-color: #8a5a12;           /* dorado oscuro · 5,9 sobre blanco (el dorado puro da 1,8) */
  --h1-letter-spacing: -0.01em;
  --h2-letter-spacing: -0.01em;
  --logo-width: auto;
}

/* Botones: el dorado con letra tinta; en hover, malva oscuro con letra blanca. */
.btn-main, a.btn-main { color: #33292b; }
.btn-main:hover, a.btn-main:hover { color: #fff; }
.btn-main.btn-line { color: #33292b; border-color: rgba(51, 41, 43, .45); background: transparent; }
.btn-main.btn-line:hover { color: #fff; background: #8f5368; border-color: #8f5368; }
.text-light .btn-main.btn-line, header.transparent.dark .btn-main.btn-line { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* En fondo claro, el dorado puro no se lee como texto: los «id-color» de texto pasan a dorado oscuro. */
.subtitle, .subtitle.id-color { color: #8a5a12; }
/* Sobre las fotos oscuras el subtítulo va amarillo; sobre la banda malva, blanco (el amarillo da 3,3). */
.text-light .subtitle, .jarallax .subtitle, #subheader .subtitle { color: #fcdf81; }
.bg-dark-1 .subtitle, .bg-dark-1 .id-color, .bg-dark-1 .id-color-2 { color: #fff !important; }
.text-light .id-color { color: #f6b538; }

/* Fondos: el claro es su amarillo #fcdf81, suave. */
.bg-color-op-1 { background: #fef6dc !important; }
.bg-amarillo { background: #fcdf81 !important; }

/* Logo: su círculo de acuarela + el nombre. */
#logo a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
#logo img { width: 52px !important; height: 52px; border-radius: 50%; }
#logo .logo-texto { font-family: "Jost", sans-serif; font-size: 26px; line-height: 1; color: #33292b; white-space: nowrap; }
header.smaller #logo img { width: 44px !important; height: 44px; }
footer .logo-pie { display: inline-flex; align-items: center; gap: 12px; }
footer .logo-pie img { width: 52px; height: 52px; border-radius: 50%; }
footer .logo-pie span { font-family: "Jost", sans-serif; font-size: 28px; color: #fff; }

/* Las hojas y los íconos de la plantilla vienen en durazno: se llevan al dorado de Heidi. */
.deco-dorada, img[src*="/images/misc/d"], img[src*="/images/icons-color/"] { filter: hue-rotate(24deg) saturate(1.45) brightness(1.02); }

/* Selector de idioma en la barra superior. */
.idiomas-top { display: flex; gap: 14px; margin-right: 22px; font-size: 13px; font-weight: 600; }
.idiomas-top a { color: rgba(255, 255, 255, .65); text-decoration: none; }
.idiomas-top a[aria-current] { color: #fcdf81; }
#topbar { background: #8f5368; }
.topbar-widget a, .topbar-widget { color: rgba(255, 255, 255, .85); }


/* Foto de la portada: vertical, que se vea la cara. */
.foto-portada { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.foto-redonda { aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; }
.foto-sobre { aspect-ratio: 4 / 5; object-fit: cover; }

/* Carrusel de sesiones: el precio bajo el nombre. */
.sesion-precio { font-weight: 600; color: #33292b; margin-bottom: 6px; }
.sesion-modalidad { font-style: italic; color: #8c5266; font-size: 15px; }

/* Formación en vez de los contadores de la plantilla */
.formacion-item { font-family: "Jost", sans-serif; font-size: 20px; line-height: 1.3; color: #33292b; }
.formacion-item i { display: block; font-size: 28px; color: #8a5a12; margin-bottom: 10px; }

/* Reseñas en la banda malva */
.resena-texto { font-family: "Jost", sans-serif; font-weight: 300; font-size: 24px; line-height: 1.45; color: #fff; }

/* Página de sesiones */
.sesion-bloque { scroll-margin-top: 140px; }
.sesion-bloque + .sesion-bloque { border-top: 1px solid rgba(51, 41, 43, .12); }
.sesion-bloque .foto-sesion { border-radius: var(--rounded-1); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.tarifa { font-family: "Jost", sans-serif; font-size: 26px; color: #33292b; }
.tarifa small { font-size: 16px; color: #8c5266; }

/* Reservar */
.pasos-reserva { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; padding: 0; margin: 0 0 30px; font-weight: 600; color: #8c5266; }
.pasos-reserva span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; margin-right: 8px; font-size: 13px; }
.pasos-reserva li[aria-current] { color: #33292b; }
.pasos-reserva li[aria-current] span { background: #f6b538; border-color: #f6b538; color: #33292b; }
.elegido { background: #fef6dc; border-radius: var(--rounded-1); padding: 18px 22px; margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; }
.elegido strong { font-family: "Jost", sans-serif; font-weight: 400; font-size: 22px; color: #33292b; }
.elegido em { color: #8c5266; }
.elegido a { margin-left: auto; font-weight: 600; color: #33292b; }
.opcion-hora { display: inline-block; border: 1px solid rgba(51, 41, 43, .25); border-radius: 30px; padding: 8px 18px; margin: 0 8px 8px 0; color: #33292b; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.opcion-hora:hover { background: #8f5368; border-color: #8f5368; color: #fff; }
.opcion-hora small { font-weight: 400; opacity: .75; }
.dia-reserva { border-top: 1px solid rgba(51, 41, 43, .1); padding: 14px 0; }
.dia-reserva:first-child { border-top: 0; }
.tarjeta-sesion { display: block; height: 100%; background: #fff; border: 1px solid rgba(51, 41, 43, .12); border-radius: var(--rounded-1); padding: 26px; text-decoration: none; transition: border-color .2s, transform .2s; }
.tarjeta-sesion:hover { border-color: #f6b538; transform: translateY(-2px); }
.tarjeta-sesion h3 { margin-bottom: 4px; }
.aviso-sitio { background: #fef6dc; border-left: 4px solid #f6b538; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; color: #33292b; }
.aviso-sitio.error { background: #fbeaea; border-left-color: #a12a1a; }
.oculto { position: absolute; left: -9999px; }

/* Suscripción */
.form-suscripcion { display: flex; flex-wrap: wrap; gap: 10px; }
.form-suscripcion input[type=email] { flex: 1 1 260px; }
.form-suscripcion .casilla { flex-basis: 100%; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.form-suscripcion .casilla input { margin-top: 6px; accent-color: #33292b; }

/* Firma de ISIKOM: logo mono, en blanco sobre el pie malva, al 72 %. */
.firma { display: inline-flex; align-items: center; gap: 8px; opacity: .72; text-decoration: none; color: inherit; }
.firma:hover { opacity: 1; color: inherit; }
.firma img { height: 20px; width: auto; filter: brightness(0) invert(1); }

/* Texto largo de blog */
.texto-entrada h2 { margin-top: 1.4em; }
.texto-entrada p, .texto-entrada li { font-size: 18px; line-height: 1.75; }

/* Menú: la página actual y el hover en dorado oscuro (el dorado puro no se lee sobre el crema). */
#mainmenu > li > a.menu-item.active, #mainmenu > li > a.menu-item:hover { color: #8a5a12 !important; }
/* En las páginas interiores la cabecera es foto oscura y, al bajar, malva: ahí ni el dorado oscuro (1,5)
   ni el amarillo (3,3) se leen, así que la página actual va en blanco subrayada en amarillo. */
header:not(.header-light) #mainmenu > li > a.menu-item.active, header:not(.header-light) #mainmenu > li > a.menu-item:hover { color: #fff !important; text-decoration: underline; text-decoration-color: #fcdf81; text-decoration-thickness: 2px; text-underline-offset: 8px; }


/* El campo de correo, blanco sobre la banda amarilla */
.bg-amarillo .form-control { background: #fff; border-color: rgba(51, 41, 43, .25); color: #33292b; }
.bg-amarillo .form-control::placeholder { color: #8c5266; }

/* En las páginas interiores la cabecera va sobre la foto oscura (y al bajar, sobre malva): nombre en blanco. */
header:not(.header-light) #logo .logo-texto { color: #fff; }


/* Celular: las hojas no se montan sobre los títulos */
@media (max-width: 767px) {
  img[src*="/images/misc/d"] { display: none; }
}

/* Calendario de reservas: el mes con los días libres; las horas del día elegido, al lado. */
.calendario { background: #fff; border: 1px solid rgba(51, 41, 43, .12); border-radius: var(--rounded-1); padding: 22px; }
.cal-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-mes { font-family: "Jost", sans-serif; font-size: 22px; color: #33292b; text-transform: capitalize; }
.cal-flecha { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; background: #f6b538; color: #33292b; text-decoration: none; }
.cal-flecha:hover { background: #8f5368; color: #fff; }
.cal-apagada { background: rgba(51, 41, 43, .08); color: rgba(51, 41, 43, .3); }
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dsem { text-align: center; font-size: 13px; font-weight: 600; color: #8c5266; padding-bottom: 4px; }
.cal-dia { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.cal-sin { color: rgba(51, 41, 43, .28); }
.cal-libre { background: #fef6dc; color: #33292b; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(246, 181, 56, .55); }
.cal-libre:hover { background: #fcdf81; color: #33292b; }
.cal-libre.cal-elegido { background: #8f5368; color: #fff; box-shadow: none; }
.cal-horas { padding: 6px 0; }
.cal-horas h3 { font-size: 22px; }
@media (max-width: 991px) { .cal-horas { padding-top: 0; } }

/* Botón flotante de WhatsApp, abajo a la derecha en todas las páginas. */
.wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; font-size: 30px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); text-decoration: none; transition: transform .2s; }
.wa-flotante:hover { color: #fff; transform: scale(1.06); }
@media (max-width: 767px) { .wa-flotante { right: 16px; bottom: 16px; width: 54px; height: 54px; font-size: 28px; } }
/* El «volver arriba» de la plantilla pasa a la izquierda para no chocar con WhatsApp. */
#back-to-top { right: auto; left: 20px; }