/**
 * Esther Perarnau — web profesional
 * ══════════════════════════════════
 *
 * Solo lo propio de esta web. La paleta y su aplicación básica vienen de
 * paleta.css y base.css, comunes con cursos.estherperarnau.com.
 *
 * Aquí van KBS (el blog) y KPS (las páginas). No hay KLS: si algún día se
 * instala, revisar antes que sus cuatro campos de identidad estén puestos.
 *
 * Con la paleta reducida, la calidez ya no la dan arena ni champagne sino los
 * dos fondos derivados del marfil. Es un rango más estrecho, así que aquí se
 * trabaja más con el espacio y la fotografía que con el color.
 */

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */

.esther-hero {
	background-color: var(--color-bg);
	padding-block: clamp(3rem, 8vw, 6rem);
}

.esther-hero h1 {
	color: var(--color-heading);
	line-height: 1.15;
	max-width: 18ch;
}

.esther-hero .esther-entradilla {
	color: var(--color-text-suave);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	max-width: 55ch;
}

/* ═══ Bloque biográfico ══════════════════════════════════════════════════ */

/* El fondo cálido derivado es lo que queda de la arena de la paleta original,
   y sigue siendo el sitio natural para la parte personal. */
.esther-bio {
	background-color: var(--color-bg-calido);
	border-radius: var(--radio);
	padding: clamp(1.5rem, 4vw, 3rem);
}

.esther-bio h2 {
	color: var(--color-heading);
}

/* Marco cálido para el retrato. */
.esther-retrato img {
	border-radius: var(--radio);
	border: 6px solid var(--color-bg-blanco);
	box-shadow: var(--sombra);
}

/* ═══ Credenciales y trayectoria ═════════════════════════════════════════ */

/* Lo institucional —titulación, años de ejercicio, sociedades— sobre el fondo
   alternativo, con un filete en petróleo que le da el peso que antes daba el
   champagne. */
.esther-credenciales {
	background-color: var(--color-bg-alt);
	border-left: 3px solid var(--esther-oscuro);
	border-radius: var(--radio);
	padding: 1.5rem;
}

.esther-credenciales li {
	color: var(--color-text);
}

/* ═══ Cifras ═════════════════════════════════════════════════════════════ */

.esther-cifra {
	color: var(--esther-oscuro);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
}

.esther-cifra + .esther-cifra-etiqueta {
	color: var(--color-text-suave);
	font-size: .9375rem;
}

/* ═══ Testimonios ════════════════════════════════════════════════════════ */

.esther-testimonio {
	background-color: var(--color-bg-blanco);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 1.75rem;
}

/* La comilla es adorno, no texto: puede ir al tono suave sin problema. */
.esther-testimonio::before {
	content: "\201C";
	color: var(--color-text-sutil);
	font-size: 3.5rem;
	line-height: .6;
	display: block;
}

.esther-testimonio cite {
	color: var(--color-text-suave);
	font-style: normal;
	font-weight: 600;
}

/* ═══ Blog (KBS) ═════════════════════════════════════════════════════════ */

/* KBS trae su propio CSS y ya sigue a los cuatro ejes. Aquí solo se ajusta lo
   que envuelve al blog dentro del tema, para que la transición entre una
   página de Divi y una entrada de KBS no se note. */
.esther-blog-cabecera {
	background-color: var(--color-bg-alt);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.esther-blog-cabecera h1 {
	color: var(--color-heading);
}

/* ═══ Consulta y contacto ════════════════════════════════════════════════ */

/* Bloque de cierre en petróleo: es donde se pide cita. El base ya deja el
   texto en blanco y los enlaces en el tono cálido sobre este fondo. */
.esther-cierre {
	background-color: var(--color-bg-oscuro);
	border-radius: var(--radio);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

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

/* Sobre petróleo, el hover del CTA no puede ser petróleo: desaparecería el
   botón. Se aclara a blanco con texto oscuro. */
.esther-cierre .et_pb_button:hover {
	background-color: var(--color-text-inverso) !important;
	border-color: var(--color-text-inverso) !important;
	color: var(--esther-oscuro) !important;
}

/* ═══ El hero de la portada ══════════════════════════════════════════════

   Aquí vivía un apaño: la foto de la portada la tiene centrada y con los
   brazos abiertos, así que el título —que KPS centra— le caía en la cara. Se
   arreglaba agrandando la foto un 28 % con `transform: scale()`, corriéndola
   con `translateX()` y alineando el texto a la izquierda.

   Funcionaba, y traía tres cosas detrás: obligaba a `overflow:hidden` porque
   la foto agrandada se salía por debajo del velo, estaba **calculado para esa
   foto concreta** —cambiarla lo rompía, y el propio comentario lo avisaba—, y
   descentraba el texto de la portada respecto al resto de la página.

   Desde **KPS 0.2.39** eso son dos campos del editor: *Encuadre de la foto*
   (`image_focus`) y *Dónde va el texto* (`content_position: abajo`). El texto
   vuelve al centro, la cara se ve entera encima y **el tema no sabe nada de
   qué foto hay puesta**, que es como tiene que ser.

   ⚠️ Si alguna vez el hero vuelve a salir descuadrado, mirar los campos de la
   página antes que este fichero. */