/**
 * Base compartida — COMPARTIDO, NO EDITAR EN LOS TEMAS
 * ════════════════════════════════════════════════════
 *
 * Aplica la paleta a lo que Divi pinta por defecto: cuerpo, titulares,
 * enlaces, botones, formularios, tarjetas y footer. Va igual en las dos webs
 * porque no es identidad de cada sitio, es la paleta puesta en su sitio.
 *
 * Lo propio de cada web va en su `tema.css`, que se carga después y manda.
 *
 * Se copia a los dos temas con `node copiar-comun.js`. Editar la copia no
 * sirve de nada: se pisa en la siguiente sincronización.
 *
 * Todo sale de las variables de paleta.css; aquí no debería haber ni un solo
 * valor hexadecimal. Si alguien escribe un color literal, ese punto deja de
 * seguir a la marca y nadie se entera hasta que cambia la paleta.
 */

/* ═══ Base ═══════════════════════════════════════════════════════════════ */

body,
body.et-db #et-boc .et-l {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Divi pone el fondo en #page-container; sin esto quedan franjas blancas
   arriba y abajo cuando la página es más corta que la ventana. */
#page-container {
	background-color: var(--color-bg);
}

/* ═══ Tipografía ═════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
	color: var(--color-heading);
}

p, li, dd, td, th, figcaption, label {
	color: var(--color-text);
}

/* Texto secundario en el tono medio del carbón, nunca en gris frío: un gris
   azulado rompe la calidez de toda la paleta. 5.09:1 sobre marfil. */
.esther-texto-suave,
.et_pb_text .esther-texto-suave {
	color: var(--color-text-suave);
}

/* Letra pequeña: fechas, pies de foto, notas al pie. 4.52:1. */
.esther-texto-sutil,
small,
figcaption {
	color: var(--color-text-sutil);
}

/* Antetítulo. Va en el tono medio del carbón: la paleta reducida ya no tiene
   verde intermedio, y el petróleo a este tamaño pesa demasiado. */
.esther-antetitulo {
	color: var(--color-text-suave);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .8125rem;
}

/* ═══ Enlaces ════════════════════════════════════════════════════════════ */

a {
	color: var(--color-link);
	text-decoration-color: rgba(var(--esther-oscuro-rgb), .35);
	text-underline-offset: .18em;
	transition: color .18s ease, text-decoration-color .18s ease;
}

/* El hover va en el acento, que es el terracota funcional. El de marca
   (#DD6048) se queda en 3.22:1 sobre marfil, y el hover de un enlace de
   cuerpo es texto normal: es el uso más frecuente de toda la web. */
a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration-color: currentColor;
}

/* Foco visible siempre. Divi lo quita en varios sitios y un teclado se queda
   sin saber dónde está. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* ═══ Botones ════════════════════════════════════════════════════════════ */

/* Divi marca sus botones con !important desde los ajustes del tema. Sin
   !important aquí, estas reglas se ven en el inspector pero no en pantalla. */
.et_pb_button,
.et_pb_button:hover,
a.et_pb_button {
	border-radius: var(--radio) !important;
	border-width: 2px !important;
	font-weight: 600 !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* CTA principal — acento con blanco encima: 5.30:1 */
.et_pb_button.esther-cta,
a.et_pb_button.esther-cta {
	background-color: var(--color-cta-bg) !important;
	border-color: var(--color-cta-bg) !important;
	color: var(--color-cta-texto) !important;
}

.et_pb_button.esther-cta:hover,
a.et_pb_button.esther-cta:hover {
	background-color: var(--color-cta-bg-hover) !important;
	border-color: var(--color-cta-bg-hover) !important;
	color: var(--color-cta-texto) !important;
}

/* Botón corporativo */
.et_pb_button.esther-boton-corp,
a.et_pb_button.esther-boton-corp {
	background-color: var(--esther-oscuro) !important;
	border-color: var(--esther-oscuro) !important;
	color: var(--color-text-inverso) !important;
}

.et_pb_button.esther-boton-corp:hover,
a.et_pb_button.esther-boton-corp:hover {
	background-color: var(--color-cta-bg) !important;
	border-color: var(--color-cta-bg) !important;
}

/* Secundario / outline */
.et_pb_button.esther-boton-outline,
a.et_pb_button.esther-boton-outline {
	background-color: transparent !important;
	border-color: var(--esther-oscuro) !important;
	color: var(--esther-oscuro) !important;
}

.et_pb_button.esther-boton-outline:hover,
a.et_pb_button.esther-boton-outline:hover {
	background-color: var(--esther-oscuro) !important;
	color: var(--color-text-inverso) !important;
}

/* ═══ Formularios ════════════════════════════════════════════════════════ */

/* El borde tiene que llegar a 3:1: es lo único que dice dónde está el campo.
   Por debajo, el formulario se ve como una hoja en blanco y la gente no sabe
   dónde escribir. La guía original pedía champagne, que daba 1.59:1. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.nf-form-content input:not([type="button"]):not([type="submit"]),
.nf-form-content select,
.nf-form-content textarea {
	background-color: var(--color-bg-blanco);
	border: 1px solid var(--color-borde-campo);
	border-radius: var(--radio);
	color: var(--color-text);
	padding: .7em .9em;
}

input:focus,
select:focus,
textarea:focus,
.nf-form-content input:focus,
.nf-form-content textarea:focus {
	border-color: var(--color-focus);
	box-shadow: 0 0 0 3px var(--color-focus-ring);
	outline: none;
}

::placeholder {
	color: var(--color-text-sutil);
	opacity: 1;   /* Firefox lo baja a .54 y el aviso se vuelve ilegible */
}

/* ═══ Fondos de sección ══════════════════════════════════════════════════ */

/* Utilidades para la alternancia de secciones. Se ponen como clase CSS del
   módulo en el builder, para no tener que elegir el color a mano en cada
   sección — y para que un cambio de paleta las alcance a todas.
   Los dos fondos alternativos son los que derivan los plugins del fondo, así
   que una sección del tema y una landing quedan del mismo color. */

.esther-fondo-marfil  { background-color: var(--color-bg) !important; }
.esther-fondo-blanco  { background-color: var(--color-bg-blanco) !important; }
.esther-fondo-alt     { background-color: var(--color-bg-alt) !important; }
.esther-fondo-calido  { background-color: var(--color-bg-calido) !important; }

.esther-fondo-oscuro {
	background-color: var(--color-bg-oscuro) !important;
}

.esther-fondo-oscuro,
.esther-fondo-oscuro p,
.esther-fondo-oscuro li,
.esther-fondo-oscuro h1,
.esther-fondo-oscuro h2,
.esther-fondo-oscuro h3,
.esther-fondo-oscuro h4 {
	color: var(--color-text-inverso);
}

.esther-fondo-oscuro a {
	color: var(--color-bg-calido);   /* 8.08:1 sobre petróleo */
}

.esther-fondo-oscuro a:hover {
	color: var(--color-text-inverso);
}

/* ═══ Tarjetas ═══════════════════════════════════════════════════════════ */

/* Sobre marfil, una tarjeta blanca da 1.12:1: no se ve el borde, se ve la
   sombra. Por eso la sombra no es opcional aquí. */
.esther-tarjeta {
	background-color: var(--color-bg-blanco);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 1.75rem;
}

.esther-tarjeta-calida {
	background-color: var(--color-bg-calido);
	border: none;
	border-radius: var(--radio);
	box-shadow: var(--sombra-suave);
	padding: 1.75rem;
}

/* ═══ Badges ═════════════════════════════════════════════════════════════ */

.esther-badge {
	display: inline-block;
	padding: .28em .7em;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.esther-badge-neutro {
	background-color: var(--color-bg-calido);
	color: var(--esther-texto);       /* 11.79:1 */
}

.esther-badge-corp {
	background-color: var(--esther-oscuro);
	color: var(--color-text-inverso); /* 10.12:1 */
}

/* La guía pedía carbón sobre terracota de marca: 4.11:1, y un badge es texto
   pequeño. Va en acento con blanco: 5.30:1. */
.esther-badge-oferta {
	background-color: var(--color-cta-bg);
	color: var(--color-text-inverso);
}

/* ═══ Iconos y detalles ══════════════════════════════════════════════════ */

.esther-icono         { color: var(--color-icono); }
.esther-icono-acento  { color: var(--color-icono-acento); }

hr,
.esther-separador {
	border: none;
	border-top: 1px solid var(--color-borde);
	margin: 2.5rem 0;
}

/* ═══ Footer ═════════════════════════════════════════════════════════════ */

#main-footer,
#footer-bottom {
	background-color: var(--color-bg-oscuro);
	color: var(--color-text-inverso);
}

#main-footer h1, #main-footer h2, #main-footer h3,
#main-footer h4, #main-footer p, #main-footer li,
#footer-info {
	color: var(--color-text-inverso);
}

#main-footer a,
#footer-bottom a {
	color: var(--color-bg-calido);
}

#main-footer a:hover,
#footer-bottom a:hover {
	color: var(--color-text-inverso);
}

/* ═══ Accesibilidad ══════════════════════════════════════════════════════ */

/* Quien tenga activado "reducir movimiento" no debería ver transiciones. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ═══ Barra de menú de Divi ══════════════════════════════════════════════
 *
 * Las reglas viven aquí, en común, y **cada web elige su verde** con dos
 * variables que declara en su `tema.css`:
 *
 *   --barra-bg           fondo de la barra y del menú móvil
 *   --barra-submenu-bg   fondo de los desplegables
 *
 * Sin declararlas, salen los valores de la profesional. Se hizo así porque lo
 * difícil de esta barra no es el color: son las tres rarezas de Divi que hay
 * debajo, y tenerlas duplicadas en los dos temas era garantizar que un día se
 * arreglara una y no la otra.
 */

/*
 * Petróleo de fondo, marfil los enlaces, blanco al pasar por encima.
 *
 * ── Por qué `!important` aquí ────────────────────────────────────────────
 *
 * Divi imprime los colores de la cabecera en `et-divi-customizer-global.css`,
 * que sale del Personalizador y no de un fichero: no se puede ganar por orden
 * de carga ni por especificidad razonable. Es el mismo motivo por el que
 * base.css ya lo usa en otros treinta sitios.
 *
 * ── El estado fijo va aparte ─────────────────────────────────────────────
 *
 * Al bajar, Divi añade `.et-fixed-header` y **cambia los colores otra vez**,
 * con sus propios valores. Sin repetir las reglas para ese estado, el menú se
 * ve bien arriba del todo y recupera los colores de Divi en cuanto se hace
 * scroll — que es justo cuando más se mira.
 */

#main-header,
#main-header.et-fixed-header,
.et-fixed-header #main-header {
	background-color: var(--barra-bg, var(--esther-oscuro)) !important;
}

#top-menu li a,
.et-fixed-header #top-menu li a {
	color: var(--esther-fondo) !important;
}

/*
 * El elemento de la página actual, en blanco.
 *
 * No es un extra: sin esta regla Divi lo pinta con SU color de activo, que no
 * tiene nada que ver con esta paleta. Y en blanco coincide con el hover, así
 * que «dónde estoy» y «dónde voy» se leen igual.
 */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
	color: var(--color-text-inverso) !important;
}

/*
 * ⚠️ Divi no cambia el color al pasar por encima: **baja la opacidad**. Sobre
 * petróleo eso apaga el marfil en vez de encenderlo, o sea lo contrario de lo
 * que se pide. De ahí el `opacity: 1` junto al color.
 */
#top-menu li a:hover,
.et-fixed-header #top-menu li a:hover,
#top-menu li.current-menu-item > a:hover {
	color: var(--color-text-inverso) !important;
	opacity: 1 !important;
}

/* Submenús: el oscuro alterno, para que se despeguen de la barra. */
#top-menu li ul.sub-menu {
	background-color: var(--barra-submenu-bg, var(--esther-oscuro-alt)) !important;
	border-top-color: var(--esther-acento) !important;
}

#top-menu li ul.sub-menu a {
	color: var(--esther-fondo) !important;
	width: auto;
}

#top-menu li ul.sub-menu a:hover {
	color: var(--color-text-inverso) !important;
	background-color: rgba(255, 255, 255, .08) !important;
	opacity: 1 !important;
}

/* La lupa vive en la misma barra y por defecto es oscura. */
#et_top_search #et_search_icon:before,
.et-fixed-header #et_top_search #et_search_icon:before {
	color: var(--esther-fondo) !important;
}

/* ── Móvil ──────────────────────────────────────────────────────────────
 * El menú desplegable es otro elemento, con su propio fondo. Sin esto, en el
 * teléfono sale marfil sobre blanco: ilegible. Y el icono de las tres rayas
 * también es oscuro por defecto. */

#et_mobile_nav_menu .mobile_menu_bar:before,
.et-fixed-header #et_mobile_nav_menu .mobile_menu_bar:before,
#et_mobile_nav_menu .select_page {
	color: var(--esther-fondo) !important;
}

#main-header .et_mobile_menu,
#main-header .et_mobile_menu li a {
	background-color: var(--barra-bg, var(--esther-oscuro)) !important;
	color: var(--esther-fondo) !important;
}

#main-header .et_mobile_menu {
	border-top-color: var(--esther-acento) !important;
}

#main-header .et_mobile_menu li a:hover {
	color: var(--color-text-inverso) !important;
	background-color: rgba(255, 255, 255, .08) !important;
	opacity: 1 !important;
}

/* ═══ Las páginas, a todo el ancho ═══════════════════════════════════════
 *
 * Divi reserva la columna del sidebar **aunque no haya ni un widget dentro**:
 * la clase `et_right_sidebar` del `<body>` deja `#left-area` al 79 % y el resto
 * en blanco. Se nota sobre todo en las páginas del molde KPS, que están
 * pensadas para ocupar el ancho entero.
 *
 * ⚠️ **Solo en páginas, no en entradas.** El blog sí quiere su barra lateral, y
 * `body.page` es lo que separa una cosa de otra. Las landings de KLS también
 * son páginas, así que entran aquí y les viene bien.
 *
 * Se hace por CSS y no por el ajuste de Divi porque ese ajuste vive en un meta
 * protegido (`_et_pb_page_layout`) que **no está expuesto por REST**: se puede
 * enviar, responde 200 y no cambia nada.
 */
body.page.et_right_sidebar #left-area,
body.page.et_left_sidebar #left-area {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

body.page #sidebar {
	display: none;
}

/* El título de la página, fuera cuando manda el molde ────────────────────
 *
 * Divi imprime el `<h1>` de la página encima del contenido. En una página KPS
 * eso deja dos títulos seguidos —«Inicio» y luego el titular del hero— y el
 * primero no aporta nada.
 *
 * Se detecta por `:has()` y no por una clase del `<body>`, porque KPS pinta
 * dentro del contenido y no marca el cuerpo de la página. Un navegador sin
 * `:has()` simplemente sigue viendo el título: se degrada a lo de antes.
 */
body.page:has(.kps-hero) .entry-title {
	display: none;
}