/*
Theme Name: Vitalbene (Hello Elementor Child)
Theme URI: http://localhost/web_local/vitalbene
Description: Tema hijo de Hello Elementor para Clínica Dental Vitalbene. Aquí solo vive CSS ESTRUCTURAL: rejillas, posicionamiento, object-fit, desbordamientos y contadores. Todo lo cosmético — color, tipografía, fondo, borde, sombra, radio, espaciado — se define en el Kit de Elementor o en los ajustes del widget. Si te ves añadiendo un color aquí, estás en el sitio equivocado.
Author: Grupo Gente Vital
Author URI: https://grupogentevital.com
Template: hello-elementor
Version: 1.1.0
Requires PHP: 7.4
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
*/

/* ============================================================================
   CSS DE VITALBENE

   Cada bloque de este fichero existe porque Elementor no puede expresar esa
   regla por ajustes, y lleva escrito al lado el porqué. Si un bloque deja de
   ser necesario, se borra: la deuda de CSS en un sitio Elementor se paga en
   páginas que ya no se pueden editar desde el panel.

   Cada regla nueva se documenta con el porqué. Si no puedes explicar por qué
   Elementor no llegaba, no va aquí.
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1. CAJA COMÚN DE LOS LOGOTIPOS DE ASEGURADORAS

   Los cinco ficheros de origen son lienzos CUADRADOS de 400×400 con el dibujo
   centrado y mucho aire alrededor, y cada marca ocupa una fracción distinta de
   su lienzo. Por eso el diseño le pone a cada uno una altura a mano (38 px a
   Ocaso, 34 a Asisa, 32 a Occident): está compensando ese aire, no midiendo el
   logotipo.

   Aquí se usa una caja única de 64 px, que deja la marca visible en torno a los
   38 px del diseño sin necesidad de una regla por logotipo. Si algún día se
   recortan los márgenes blancos de los originales, este bloque sobra y hay que
   borrarlo: con lienzos ajustados, 38 px valdrían tal cual.

   El widget image-carousel no tiene control de altura — solo de ancho de
   diapositiva — así que esto es estructura pura: caja, encaje y centrado. Ni un
   color ni una tipografía.
   -------------------------------------------------------------------------- */
.vb-aseguradoras .swiper-slide img {
	block-size: 64px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	margin-inline: auto;
}


/* ----------------------------------------------------------------------------
   2. SANGRÍA DE LA CITA EN LA LLAMADA A LA ACCIÓN DE LAS ENTRADAS

   El navegador le pone a TODO <blockquote> un `margin: 1em 40px`. En escritorio
   esos 40 px por lado son la sangría de la cita y están bien. En un móvil de
   390 px son 80 px de los 286 que quedan dentro de la caja azul: la frase se
   quedaba en 206 px, se partía casi palabra por palabra y además no alineaba
   con el titular que tiene debajo.

   Por qué no se arregla con ajustes: Elementor no expone el margen de una
   etiqueta que va DENTRO del editor de texto — solo el del widget. Se probó a
   compensarlo con un margen negativo en el widget y no sirve: su ancho está
   fijado al 100 % del contenedor (`--container-widget-width`), así que el
   bloque se desplaza pero no se ensancha y los cortes de línea no cambian.

   El corte es 979 px, no 767, y no es un número arbitrario: es el punto de
   ruptura `mobile_extra` del Kit, justo donde las dos columnas de la caja dejan
   de ir en paralelo y se apilan. Por encima, la cita convive con el bloque de
   la derecha y la sangría se lee como lo que es; por debajo, las dos cosas van
   una encima de otra y la sangría solo descuadra la cita respecto al titular.

   Solo dentro de esta sección: en escritorio la sangría se queda exactamente
   como está. Si algún día la cita deja de ir en un <blockquote>, este bloque
   sobra.
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {
	.vb-cita-cta blockquote {
		margin-inline: 0;
	}
}


/* ----------------------------------------------------------------------------
   3. RESEÑAS DE GOOGLE: CUATRO LÍNEAS Y «LEER MÁS»

   Las seis reseñas son texto real de pacientes y miden lo que miden: la más
   corta son dos líneas y la más larga ocho. En un carrusel todas las
   diapositivas comparten la altura de la más alta, así que una sola reseña
   larga estiraba las seis y la sección se comía media pantalla de scroll.

   El corte a cuatro líneas iguala las tarjetas por arriba, y el botón que
   inyecta assets/vb-resenas.js deja leer entera la que se quede corta. Se
   recorta la ALTURA, no el contenido: ninguna reseña se pierde.

   Por qué el recorte no se arregla con ajustes: el widget text-editor tiene
   altura y desbordamiento, pero no número de líneas. Con una altura fija en
   píxeles el corte cae a mitad de renglón y cambia con el cuerpo de letra;
   `line-clamp` cuenta líneas reales, sea cual sea la tipografía del Kit.
   -------------------------------------------------------------------------- */
.vb-resena .vb-resena-texto p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.vb-resena .vb-resena-texto.vb-abierto p {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/* El botón lo crea JavaScript, así que no hay ningún widget de Elementor al que
   darle ajustes y su aspecto tiene que vivir aquí. Para no forkear el sistema
   de diseño, cada valor sale de una variable del Kit — el mismo azul y la misma
   tipografía que los botones pequeños—, no de un hex ni de un px escritos a
   mano. Si el Kit cambia, esto cambia con él. */
.vb-resena .vb-mas {
	align-self: flex-start;
	/* El relleno hace dos cosas a la vez.
	   En vertical: 19 px de texto + 26 de relleno = 45 de caja pulsable, por
	   encima de los 44 que pide la guía de Apple y que audita responsive.mjs.
	   En horizontal: el Kit le pinta a todo <button> un fondo verde al pasar por
	   encima, y sin relleno lateral ese fondo quedaba pegado a las letras. Los
	   16 px lo convierten en una píldora con aire.
	   Los cuatro lados se descuentan con margen negativo, así que la zona
	   clicable y el fondo del hover crecen, pero el texto no se mueve ni un
	   píxel: sigue alineado con el párrafo de la reseña y la tarjeta no crece.
	   Con un ::before invisible el dedo también acertaba, pero la auditoría mide
	   la caja del propio elemento y lo seguía dando por fallado — y una zona
	   pulsable que solo existe para el dedo y no para las herramientas es la que
	   se pierde en la siguiente refactorización. */
	margin: -21px -16px 3px;
	padding: 13px 16px;
	border: 0;
	background: none;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-vbbtnsm-font-family), sans-serif;
	font-size: var(--e-global-typography-vbbtnsm-font-size);
	font-weight: var(--e-global-typography-vbbtnsm-font-weight);
	line-height: var(--e-global-typography-vbbtnsm-line-height);
}

/* Con el fondo verde puesto, el subrayado sobra: ya no hace falta la señal de
   «esto se pulsa» porque la píldora lo dice sola. En reposo se queda. */
.vb-resena .vb-mas:hover,
.vb-resena .vb-mas:focus-visible {
	text-decoration: none;
}


/* ----------------------------------------------------------------------------
   4. LOS AVATARES DE LAS RESEÑAS SON CÍRCULOS, NO ELIPSES

   El widget de imagen lleva sus 42×42 y un radio de 999 px puestos desde el
   panel, así que sobre el papel ya era un círculo. Lo que rompía la cuenta es la
   fila que lo contiene: va en `nowrap` junto al nombre del paciente, y cuando el
   nombre es largo —«Ma Jose Martinez Zamora»— el flex encoge lo que puede.
   El `<img>` tiene `max-width: 100%`, así que encogía con su caja: 35 px de
   ancho por 42 de alto. Con radio 999 eso no es un círculo, es un huevo.

   Se corrige donde está el fallo, que es el reparto de la fila: la imagen deja
   de ser encogible y el nombre pasa a partirse en dos líneas, que es lo que
   tiene que ceder. El `aspect-ratio` es el cinturón por si otra fila futura
   vuelve a apretar.

   Por qué no se arregla con ajustes: `flex-shrink` del ítem no está entre los
   controles del widget de imagen, solo el ancho.

   El selector es estructural a propósito: el avatar es la imagen del ÚLTIMO
   bloque de la tarjeta —el pie con la foto, el nombre y la fecha—. La otra
   imagen de la tarjeta es la «G» de Google, que vive arriba con las estrellas y
   que no debe volverse redonda ni cuadrada.
   -------------------------------------------------------------------------- */
.vb-resena > .e-con:last-child > .elementor-widget-image {
	flex: 0 0 auto;
}

.vb-resena > .e-con:last-child > .elementor-widget-image img {
	aspect-ratio: 1;
	border-radius: 50%;
}


/* ----------------------------------------------------------------------------
   5. HUECO AL FINAL DE LA PÁGINA PARA LA BARRA FIJA DE MÓVIL

   La barra de «Reserva tu diagnóstico» va en `position: fixed` pegada al borde
   inferior, así que sale del flujo y no empuja nada. Sin reservarle sitio, al
   llegar al final del scroll tapa la última línea del pie —que es justo la
   línea legal— y el usuario no tiene forma de verla: no hay más scroll por
   debajo.

   Por qué no se arregla con ajustes: el relleno hay que ponerlo en el <body>,
   y Elementor solo llega hasta sus propios contenedores. Un margen inferior en
   el contenedor del pie tampoco vale, porque la plantilla de pie se imprime
   dentro del wrapper del tema y el margen colapsaría.

   El valor sale de la propia barra: 12 px de relleno + 53 de botón + 12 = 77,
   más 8 de aire = 85. Si cambia el relleno de la barra en 30-theme-builder.php,
   este número cambia con él.

   El corte es 979 px, no 767: es el `mobile_extra` del Kit y el mismo punto en
   el que la barra deja de ocultarse. Por encima la barra no existe y este
   relleno dejaría un hueco blanco al final de todas las páginas.
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {
	body {
		padding-block-end: 85px;
	}
}




/* --------------------------------------------------------------------------
   Calendario de cita online (/cita-online/)

   Estructural, no cosmético: el iframe de Optimydent no sabe decir cuánto
   mide su contenido —es otro origen, así que no hay forma de medirlo desde
   aquí— y sin un alto explícito el navegador le da 150 px por defecto y el
   calendario sale por una rendija.

   Los valores salen de medir el portal: en escritorio el paso más alto es el
   de selección de hueco, y en móvil el formulario de datos crece porque los
   campos se apilan. Van en la hoja del tema y no en línea en el widget porque
   cambian por breakpoint, y el corte es el mismo 979 del Kit.
   -------------------------------------------------------------------------- */
.vb-cita-embed .vb-iframe iframe {
	width: 100%;
	min-height: 900px;
	border: 0;
	display: block;
}

@media (max-width: 979px) {
	.vb-cita-embed .vb-iframe iframe {
		min-height: 1150px;
	}
}