/*
Theme Name:   Multiplica Salud (Divi Child)
Theme URI:    https://multiplicasalud.com/
Description:  Tema hijo de Divi 5 para Multiplica Salud. El diseño vive en Divi (colores globales, variables globales y presets); aquí va lo que Divi no puede hacer desde el constructor y las animaciones (GSAP).
Author:       Multiplica Salud
Template:     Divi
Version:      3.0.0
Text Domain:  multiplicasalud
*/

/*
 * Versión 3: monocromo editorial. Los colores y medidas se leen de los globales de Divi 5
 * (var(--gcid-…) y var(--gvid-…)), así que cambiar la paleta o el radio en Divi cambia estas reglas.
 */

/* ---------- Base ---------- */

body,
#page-container,
#main-content { background-color: var(--gcid-ms-blanco); }

/* La cabecera flota por encima del contenido: se deja su hueco arriba. */
#main-content { padding-top: 92px; }

::selection { background: var(--gcid-ms-tinta); color: var(--gcid-ms-blanco); }

a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------- Títulos ---------- */

/* La palabra en cursiva va en gris humo, sobre claro y sobre oscuro. */
.ms-titulo em { font-style: italic; color: var(--gcid-ms-humo); }
.ms-titulo h1,
.ms-titulo h2,
.ms-titulo h3 { padding-bottom: 0; text-wrap: balance; }

/* ---------- Cabecera: cápsula flotante ---------- */

.et-l--header .ms-cabecera {
	position: fixed !important;
	top: 16px;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent !important;
	pointer-events: none;
}
body.admin-bar .et-l--header .ms-cabecera { top: 48px; }
@media (max-width: 782px) { body.admin-bar .et-l--header .ms-cabecera { top: 62px; } }

/* La fila y la columna se ajustan a la cápsula, que mide lo que su contenido. */
.ms-cabecera .et_pb_row,
.ms-cabecera .et_pb_column {
	width: auto !important;
	max-width: calc(100% - 24px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}
.ms-capsula {
	pointer-events: auto;
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 18px 50px rgba(14, 14, 15, 0.18);
	transition: box-shadow 0.4s ease, background-color 0.4s ease;
	will-change: transform;
}
/* El logo: un sello blanco de 48 px. */
.ms-capsula .ms-logo {
	width: 48px !important;
	height: 48px !important;
	flex: 0 0 48px !important;
	overflow: hidden;
	box-sizing: border-box;
}
.ms-capsula .ms-logo .et_pb_image_wrap { display: block; width: 100%; height: 100%; }
.ms-capsula .ms-logo img { width: 100% !important; height: 100% !important; object-fit: contain; }
/* El menú, en una sola línea y del ancho de sus enlaces. */
.ms-capsula .et_pb_menu { flex: 0 0 auto !important; width: auto !important; }
.ms-capsula .et-menu { flex-wrap: nowrap !important; white-space: nowrap; }
.ms-capsula .et_pb_menu,
.ms-capsula .et_pb_menu_inner_container,
.ms-capsula .et_pb_menu__wrap { width: auto; }
.ms-capsula .et_pb_menu__wrap { justify-content: center; }
.ms-capsula .et_pb_button_module_wrapper { margin: 0 !important; }

/* Móvil y tableta: la cápsula ocupa el ancho, con el logo a un lado y el menú al otro. */
@media (max-width: 980px) {
	.ms-cabecera .et_pb_row,
	.ms-cabecera .et_pb_column { width: calc(100% - 24px) !important; }
	.ms-capsula { width: 100%; }
}

/* ---------- Hero ---------- */

/* Etiquetas de «Marketing online»: píldoras de línea fina que se rellenan al pasar. */
.ms-chips p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ms-chips__rotulo {
	width: 100%;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gcid-ms-texto);
}
.ms-chip {
	display: inline-flex;
	padding: 9px 18px;
	border: 1px solid var(--gcid-ms-linea);
	border-radius: 100px;
	color: var(--gcid-ms-tinta) !important;
	font-size: 15px;
	line-height: 1.2;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ms-chip:hover { background: var(--gcid-ms-tinta); border-color: var(--gcid-ms-tinta); color: var(--gcid-ms-blanco) !important; }

/* La foto del hero: en blanco y negro y recortada; con el scroll se abre a todo el ancho (GSAP).
   Sin animación se queda recortada, que también funciona. */
.ms-expande {
	filter: grayscale(1);
	clip-path: inset(0% 3% 0% 3% round var(--gvid-ms-radio-grande));
	will-change: clip-path;
}

/* Entrada del hero en CSS, sin esperar a ningún script: el título solo se desplaza (nunca se oculta)
   para no retrasar el primer pintado. */
@keyframes ms-sube { from { transform: translateY(40px); } to { transform: none; } }
@keyframes ms-aparece { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
html.ms-anim #hero .ms-titulo h1 { animation: ms-sube 1.2s cubic-bezier(.2, .7, .2, 1) both; }
html.ms-anim #hero .ms-chips { animation: ms-aparece 1s 0.2s cubic-bezier(.2, .7, .2, 1) both; }
html.ms-anim #hero .ms-hero__sub { animation: ms-aparece 1s 0.3s cubic-bezier(.2, .7, .2, 1) both; }
html.ms-anim #hero .ms-hero__botones { animation: ms-aparece 1s 0.4s cubic-bezier(.2, .7, .2, 1) both; }

/* ---------- Bloques ---------- */

.ms-foto-llena,
.ms-foto-llena .et_pb_image_wrap,
.ms-foto-llena img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 980px) { .ms-foto-llena img { aspect-ratio: 4 / 3; } }

@media (min-width: 981px) {
	.ms-pegajosa { position: sticky; top: 120px; }
}

/* Lista del Kit Digital: marca de verificación blanca en un círculo negro. */
.ms-lista-check ul { list-style: none; padding: 6px 0 0; margin: 0; }
.ms-lista-check li { position: relative; padding: 6px 0 6px 36px; }
.ms-lista-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gcid-ms-tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ms-lista-check li a { text-decoration: underline; text-decoration-color: var(--gcid-ms-humo); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Ventajas: línea fina encima, que se oscurece al pasar el ratón. */
.ms-ventaja {
	border-top: 1px solid var(--gcid-ms-linea);
	padding-top: 28px;
	transition: border-color 0.4s ease;
}
.ms-ventaja:hover { border-color: var(--gcid-ms-tinta); }

/* Bloque con foto de fondo: la foto se ve en blanco y negro bajo la capa oscura. */
.ms-bn-fondo { background-blend-mode: normal, luminosity !important; }

/* Blog: tarjetas blancas; la foto, en blanco y negro hasta pasar el ratón. */
.ms-blog .et_pb_post {
	background: var(--gcid-ms-blanco);
	border: 1px solid var(--gcid-ms-linea) !important;
	border-radius: var(--gvid-ms-radio);
	overflow: hidden;
	padding: 0 0 30px !important;
	transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), box-shadow 0.5s ease;
}
.ms-blog .et_pb_post:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(14, 14, 15, 0.08); }
.ms-blog .et_pb_post .entry-featured-image-url { margin-bottom: 24px; }
.ms-blog .et_pb_post img { filter: grayscale(1); transition: filter 0.9s ease; }
.ms-blog .et_pb_post:hover img { filter: grayscale(0); }
.ms-blog .et_pb_post > *:not(.entry-featured-image-url) { padding-left: 30px; padding-right: 30px; }
.ms-blog .et_pb_post .post-meta { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gcid-ms-texto); }

/* Pie. */
.ms-pie .et_pb_text p { padding-bottom: 0; }
.ms-marca p { will-change: transform; }

/* ---------- Botones flotantes de llamada y WhatsApp (functions.php) ---------- */

.ms-flotante {
	position: fixed;
	bottom: 20px;
	z-index: 999;
	display: flex;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	box-shadow: 0 14px 34px rgba(14, 14, 15, 0.22);
	transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.ms-flotante img { width: 100%; height: 100%; display: block; filter: grayscale(1); transition: filter 0.4s ease; }
.ms-flotante:hover,
.ms-flotante:focus-visible { transform: translateY(-3px); }
.ms-flotante:hover img,
.ms-flotante:focus-visible img { filter: grayscale(0); }
.ms-flotante--telefono { left: 20px; }
.ms-flotante--whatsapp { right: 20px; }

/* Mientras arranca GSAP, lo que va a animarse queda oculto (máximo 3 s, ver functions.php). */
html.ms-anim:not(.ms-ready) .ms-reveal,
html.ms-anim:not(.ms-ready) .ms-stagger > *,
html.ms-anim:not(.ms-ready) .ms-cortina,
html.ms-anim:not(.ms-ready) #main-content .ms-titulo h2 { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Flecha de los desplegables de la cápsula: a la derecha del texto y centrada en la línea. */
.ms-capsula .et-menu > li.menu-item-has-children > a { padding-right: 18px !important; }
.ms-capsula .et-menu > li.menu-item-has-children > a:first-child::after {
	top: 50% !important;
	right: 0 !important;
	transform: translateY(-50%);
	font-size: 14px;
}
.ms-capsula .et_pb_button { white-space: nowrap; }
/* Divi pone overflow:hidden a los grupos redondeados: cortaría los desplegables. */
.ms-capsula { overflow: visible !important; }
/* El «nowrap» es solo para la línea principal; dentro de los desplegables, un enlace por línea. */
.ms-capsula .et-menu ul.sub-menu { white-space: normal; }
.ms-capsula .et-menu ul.sub-menu li { display: block; }

/* Cápsula invertida sobre bloques oscuros (ms-animaciones.js le pone ms-capsula--clara). */
.ms-capsula { transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.4s ease; }
.ms-capsula .et-menu > li > a,
.ms-capsula .mobile_menu_bar::before { transition: color 0.45s ease; }
.ms-capsula--clara { background-color: rgba(255, 255, 255, 0.94) !important; border-color: rgba(14, 14, 15, 0.08) !important; }
.ms-capsula--clara .et-menu > li > a,
.ms-capsula--clara .mobile_menu_bar::before { color: var(--gcid-ms-tinta) !important; }
.ms-capsula--clara .ms-logo { background-color: var(--gcid-ms-niebla) !important; }
.ms-capsula--clara .et_pb_button {
	background-color: var(--gcid-ms-tinta) !important;
	border-color: var(--gcid-ms-tinta) !important;
	color: var(--gcid-ms-blanco) !important;
}
/* El preset del botón escribe su color con «body #page-container .et_pb_section …» y !important. */
body #page-container .et_pb_section .ms-capsula.ms-capsula--clara .et_pb_button {
	background-color: var(--gcid-ms-tinta) !important;
	border-color: var(--gcid-ms-tinta) !important;
	color: var(--gcid-ms-blanco) !important;
}

/* Móvil: la cápsula es la referencia del panel del menú; el botón oculto no deja hueco. */
@media (max-width: 980px) {
	.ms-capsula { position: relative; }
}
@media (max-width: 767px) {
	.ms-capsula .et_pb_button_module_wrapper { display: none !important; }
}
.ms-capsula .ms-logo { margin: 0 !important; }