/* ==========================================================================
   OralDental Group: responsividad y animaciones
   Se carga desde el tema hijo (functions.php). Los IDs .stk-xxxxxxx son los
   bloques de Stackable de la portada; "body" delante sirve para ganarle a los
   estilos !important que Stackable escribe dentro de cada bloque.

   Puntos de corte (los mismos de Stackable):
     móvil   ≤ 767px
     tablet  768px – 1023px
     laptop  1024px – 1279px   ← aquí se partían títulos y precios
   ========================================================================== */

:root {
	--od-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--od-dur: 0.75s;
	--od-dist: 28px;
}

/* Nada debe provocar scroll horizontal (animaciones laterales, separadores...) */
html,
body {
	overflow-x: clip;
}


/* ==========================================================================
   0. ESCALA TIPOGRÁFICA UNIFORME (móvil y tablet)
      Antes cada página tenía tamaños distintos: títulos principales de 31 a 48px,
      subtítulos (h3, 30px) más grandes que los títulos de sección (h2, 27px) y
      párrafos de 16 a 25px. Aquí todas las páginas usan la misma escala.
      ":is(hX, #od)" sube la especificidad para ganarle a los estilos por bloque de
      Stackable y Greenshift. Se excluyen los números grandes a propósito (92 %,
      precios) y el título de la portada, que tienen su propia regla.
   ========================================================================== */

@media (max-width: 1023px) {
	body main :is(h1, #od):not(.stk-572946e *) {
		font-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem) !important;
		line-height: 1.12 !important;
	}
	body main :is(h2, #od):not(.animate-counter, .stk-7556c36 *, .stk-cf9bc53 *, .stk-2b3453b *, .stk-a70eac2 *, .stk-f05e36f *) {
		font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem) !important;
		line-height: 1.2 !important;
	}
	body main :is(h3, #od):not(.stk-f05e36f *) {
		font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem) !important;
		line-height: 1.25 !important;
	}
	body main :is(h4, #od) {
		font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem) !important;
		line-height: 1.35 !important;
	}
	body main :is(h5, #od):not(.stk-f05e36f *) {
		font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem) !important;
		line-height: 1.35 !important;
	}
	body main :is(h6, #od) {
		font-size: 1rem !important;
		line-height: 1.45 !important;
	}
	body main :is(p, #od):not(.stk-f05e36f *, .stk-58e8cbf *) {
		font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem) !important;
		line-height: 1.65 !important;
	}
	/* Títulos dentro de las tarjetas del carrusel de blogs: tamaño de subtítulo */
	body main .stk-a2ef083 :is(h2, h3, #od) {
		font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem) !important;
		line-height: 1.25 !important;
		overflow-wrap: normal;
		hyphens: none;
	}
	/* Títulos de las tarjetas de precios (Servicios): como subtítulo grande */
	body main .stk-f05e36f :is(h3, #od) {
		font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem) !important;
		line-height: 1.2 !important;
	}
	/* El dato de la tarjeta "¿Sabías que?" es un destacado: un poco mayor */
	body main .stk-58e8cbf :is(p, #od) {
		font-size: 1.125rem !important;
		line-height: 1.55 !important;
	}
}


/* ==========================================================================
   1. PORTADA (hero)
   ========================================================================== */

/* El título no se parte a mitad de palabra ("OralDenta-l") y escala con la pantalla */
body .stk-572946e .stk-block-heading__text {
	font-size: clamp(2.5rem, 1.1rem + 3.6vw, 4.375rem) !important;
	line-height: 1.05 !important;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* El texto de la portada nunca justificado: deja huecos enormes en móvil */
@media (max-width: 1023px) {
	body .stk-block .has-text-align-justify-mobile,
	body .stk-block .has-text-align-justify-tablet {
		--stk-alignment-text-align: left;
		text-align: left;
	}
}

@media (max-width: 1023px) {
	/* 140vh es demasiado alto en pantallas pequeñas */
	body .stk-1d584cb {
		min-height: 0 !important;
		padding-bottom: 3rem !important;
	}
	/* background-attachment: fixed no funciona en iPhone y da tirones al hacer scroll */
	body .stk-1d584cb {
		background-attachment: scroll !important;
	}
	body .stk-1d584cb > .stk-separator__bottom .stk-separator__wrapper {
		height: 120px !important;
	}
}

@media (max-width: 767px) {
	/* "Transforma Tu Sonrisa" y "Blanqueamiento Profesional" quedaban pegados */
	body .stk-e26b9ef {
		margin-top: 12px !important;
	}
	body .stk-bebfe4c .stk-block-text__text {
		font-size: 1rem !important;
		line-height: 1.65 !important;
	}
	body .stk-bebfe4c {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}


/* (Los tamaños de títulos en móvil y tablet están en la sección 0.) */


/* ==========================================================================
   2. CORRECCIÓN GENERAL DEL CSS ADICIONAL ANTIGUO
      Entre 601 y 900px pone al 50 % TODAS las columnas de filas "stk--flex"
      (era para dos doctores de la página Equipo). Cuando la columna es la única de
      su fila quedaba a medio ancho: tarjetas de servicios estrechas, blanqueamiento,
      etc. Una columna sola en su fila ocupa todo el ancho.
   ========================================================================== */

@media (min-width: 601px) and (max-width: 900px) {
	body .stk-row.stk--flex > .stk-block-column:only-child {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

/* Contacto: "Información útil" tenía solo texto de relleno (Lorem ipsum). Se oculta en
   todos los tamaños; si algún día tiene contenido real, basta con borrar esta regla. */
body .stk-b9c9c39 :is(.stk-551d683, .stk-69ff5eb, .stk-70536fb) {
	display: none !important;
}

/* Servicios, sección final: el rectángulo morado animado va DETRÁS de la foto, pegado
   abajo a la izquierda (así lo define Greenshift). El CSS adicional antiguo pone
   position: static a todos los contenedores de Greenshift en móvil y el rectángulo
   se convertía en un bloque suelto que bajaba hasta el footer. */
@media (max-width: 1023px) {
	body #gspb_container-id-gsbp-9bdae999-9eed.gspb_container {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 60% !important;
		max-width: none !important;
		height: 30% !important;
		min-width: 0 !important;
	}
	body [id^="gspb_col-id-gsbp-9d96cd10"] {
		position: relative !important;
	}
	/* Texto arriba y foto abajo (entre 690 y 1023px Greenshift mantenía dos columnas
	   y los datos de horario/dirección quedaban aplastados) */
	body [id^="gspb_row-id-gsbp-94097ab1"] > .gspb_row__content {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	body [id^="gspb_row-id-gsbp-94097ab1"] > .gspb_row__content > [id^="gspb_col-id"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}
	body [id^="gspb_col-id-gsbp-399abef9"] { order: 1 !important; }   /* texto */
	body [id^="gspb_col-id-gsbp-378bb122"] { order: 2 !important; }   /* foto */
}

/* Servicios: con la tarjeta a todo el ancho, la ilustración quedaba gigante */
@media (max-width: 1023px) {
	body .stk-ff21114 .stk-block-image {
		max-width: 400px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* ==========================================================================
   3. PRECIOS: "300.000" y "$700.000" no se parten en dos líneas
   ========================================================================== */

body .stk-cf9bc53 .stk-block-heading__text,
body .stk-2b3453b .stk-block-heading__text,
body .stk-a70eac2 .stk-block-heading__text {
	white-space: nowrap;
	font-size: clamp(2rem, 0.6rem + 3vw, 3.75rem) !important;
	line-height: 1.15 !important;
}


/* ==========================================================================
   3a. ¿SABÍAS QUE?: en escritorio la tarjeta se monta sobre la foto con un
       desplazamiento (left: 50px / 200px). Apilado, eso la saca de la pantalla.
   ========================================================================== */

@media (max-width: 1023px) {
	/* La sección entera estaba corrida 15px a la izquierda */
	body .entry-content > .stk-8ee001e {
		left: 0 !important;
		top: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: 48px !important;
	}
	body .stk-8ee001e .stk-block-column.stk-f2bd8ee,
	body .stk-8ee001e .stk-block-column.stk-58e8cbf {
		left: 0 !important;
		right: auto !important;
	}
	body .stk-8ee001e > .stk-row {
		row-gap: 0;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
	/* Apilado de arriba hacia abajo: primero la foto completa y debajo la tarjeta
	   morada, sin taparse (antes salía la tarjeta arriba y la foto suelta debajo). */
	body .stk-8ee001e .stk-block-column.stk-f2bd8ee {
		order: 1 !important;
	}
	body .stk-8ee001e .stk-block-column.stk-58e8cbf {
		order: 2 !important;
		width: 90% !important;
		max-width: 560px !important;
		margin: -36px auto 0 !important;   /* un poco montada sobre la foto */
		z-index: 2;
	}
	/* Foto con el mismo encuadre que en escritorio: antes la imagen medía el doble
	   que su marco y solo se veía la parte de arriba (la lámpara). */
	body .stk-dc6bddf .stk-img-wrapper {
		aspect-ratio: 4 / 3 !important;
		height: auto !important;
		overflow: hidden;
	}
	body .stk-dc6bddf .stk-img-wrapper img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: 50% 50% !important;
	}

	/* "Oral Dental Te Lo Cuenta": margen izquierdo de ~80px + ancho 100 % = se sale */
	body .stk-2e9b576 .stk-block-column.stk-e670a93 {
		margin-left: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}
}


/* ==========================================================================
   3b. SERVICIOS, PRECIOS Y BLANQUEAMIENTO en laptop y tablet
   ========================================================================== */

@media (max-width: 1279px) {
	/* Servicios: 50px de relleno por lado dejaban ~120px para el texto ("ORTODONCI-A") */
	body .stk-aba24fe > .stk-row > .stk-block-column {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
	body .stk-aba24fe .stk-block-heading__text {
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}

@media (max-width: 1279px) {
	/* Precios: las tarjetas iban pegadas a los bordes de la pantalla */
	body .stk-a4dc2a8 > .stk-row {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}

	/* Blanqueamiento: tres columnas (25 % / 50 % / 25 %) eran demasiado estrechas.
	   Se apila: título, comparador antes/después centrado, y texto. */
	body .stk-1ed0c1a-column {
		flex-wrap: wrap !important;
		row-gap: 28px;
	}
	body .stk-a754ce9,
	body .stk-3d1b954 {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body .stk-a754ce9 > .stk-column-wrapper,
	body .stk-3d1b954 > .stk-column-wrapper {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body .stk-814492b {
		flex: 1 1 100% !important;
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* El CSS adicional antiguo pone al 50 % todas las columnas de filas "stk--flex"
	   entre 601 y 900px (era para los doctores); la tarjeta de blanqueamiento va completa. */
	body .stk-row .stk-block-column.stk-8ded129 {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	/* Contacto: 54px de relleno dejaban ~170px de texto ("Contáctan-os") */
	body .stk-16ea136 > .stk-row > .stk-block-column {
		padding: 28px 20px !important;
	}
}

/* Blanqueamiento en escritorio (3 columnas): las laterales son estrechas y
   "Blanqueamiento" a 35px no cabía. */
@media (min-width: 1280px) {
	body .stk-4f120f5 .stk-block-heading__text,
	body .stk-e26b9ef .stk-block-heading__text {
		font-size: clamp(1.5rem, 0.4rem + 1.45vw, 2.19rem) !important;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
	body .stk-a754ce9 > .stk-column-wrapper,
	body .stk-3d1b954 > .stk-column-wrapper {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}
}

/* Carrusel de blogs: tarjetas de 750 × 1000px fijos cortaban el contenido en
   tablet. Altura automática y ancho que deja asomar la siguiente tarjeta. */
@media (max-width: 1023px) {
	body .stk-a2ef083 .stk-a2ef083-horizontal-scroller {
		--stk-column-width: min(78vw, 460px) !important;
		--stk-column-height: auto !important;
		--stk-column-gap: 20px !important;
		align-items: stretch !important;
		/* El CSS adicional antiguo pone todas las filas en columna bajo 900px,
		   lo que convertía el carrusel en una lista vertical con scroll interno. */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}
	body .stk-a2ef083 .stk-a2ef083-horizontal-scroller > .stk-block-column {
		flex: 0 0 var(--stk-column-width) !important;
		width: var(--stk-column-width) !important;
		max-width: none !important;
	}
	/* Dentro de cada tarjeta: foto arriba y texto abajo (entre 601 y 900px el CSS
	   antiguo las ponía lado a lado y el texto quedaba en ~166px) */
	body .stk-a2ef083 .stk-block-columns > .stk-row.stk-row {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	body .stk-a2ef083 .stk-block-columns > .stk-row > .stk-block-column.stk-block-column {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Las fotos de los blogs son verticales: apiladas medían ~800px de alto */
	body .stk-a2ef083 .stk-block-image .stk-img-wrapper {
		height: 240px !important;
		aspect-ratio: auto !important;
	}
	body .stk-a2ef083 .stk-block-image .stk-img-wrapper img {
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* Equipo: apiladas, las tarjetas de doctores ocupaban todo el ancho (~1200px de alto
   cada una). En tablet se limitan y centran. */
@media (min-width: 601px) and (max-width: 1023px) {
	body .stk-88a9081 .stk-block-column.stk-6c9c17c,
	body .stk-88a9081 .stk-block-column.stk-eebd7be,
	body .stk-88a9081 .stk-block-column.stk-8552e87 {
		max-width: 460px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Equipo (portada): las tres fotos con la misma proporción. En móvil la del
   Dr. Ronald tenía marco 1:1 (360px) y las otras sin proporción (541px). */
@media (max-width: 1023px) {
	body .stk-88a9081 .stk-block-image .stk-img-wrapper {
		aspect-ratio: 4 / 5 !important;
		height: auto !important;
		overflow: hidden;
	}
	body .stk-88a9081 .stk-block-image .stk-img-wrapper img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* Pie de página: el CSS adicional antiguo dejaba cada columna al 50 % entre 601 y
   900px, y el horario se partía ("6:00 / p.m"). */
@media (max-width: 1023px) {
	body #footer .stk-row .stk-block-column {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
}

/* Contáctanos (final de la portada) en tablet y móvil.
   En escritorio es foto | texto en una tarjeta montada sobre la sección de arriba.
   Apilado se rompía: el separador decorativo blanco formaba una segunda "tarjeta"
   desfasada y la foto quedaba recortada. Aquí se mantiene la tarjeta montada sobre la
   sección anterior, con la foto COMPLETA arriba y el texto debajo. */
@media (max-width: 1023px) {
	body .entry-content > .stk-16ea136 {
		top: 0 !important;
		max-width: 680px;
		margin: -80px auto 0 !important;
		width: calc(100% - 32px);
		background: #ffffff;
		border-radius: 24px !important;
		box-shadow: 0 18px 50px rgba(72, 73, 121, 0.22) !important;
		overflow: hidden !important;
	}
	body .stk-16ea136 > .stk-separator__top,
	body .stk-16ea136 > .stk-separator__bottom {
		display: none !important;
	}
	/* (selector largo para ganarle a ".wp-block-stackable-columns.alignfull > .stk-row") */
	body .entry-content > .stk-16ea136.alignfull > .stk-row:not(.alignfull) {
		margin: 0 !important;
		width: 100% !important;
		max-width: none !important;
		flex-direction: column !important;
	}
	body .stk-16ea136 > .stk-row > .stk-block-column {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Foto del equipo completa: el bloque toma la proporción de la foto (2560 × 1707 = 3:2) */
	body .stk-16ea136 .stk-block-column.stk-e79c2d3 {
		aspect-ratio: 3 / 2;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}
	body .stk-16ea136 .stk-block-column.stk-22a1c24 {
		padding: 28px 24px 32px !important;
	}
	body .stk-16ea136 .stk-22a1c24 > .stk-column-wrapper {
		margin: 0 !important;
	}
	/* Íconos sociales en fila (el CSS adicional antiguo los ponía en columna) */
	body .stk-16ea136 .stk-bcf20d4 {
		margin-top: 20px !important;
		margin-bottom: 0 !important;
	}
	body .stk-16ea136 .stk-bcf20d4 > .stk-row.stk-button-group {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 12px;
	}
	/* Íconos sociales en fila, no uno debajo de otro */
	body .stk-16ea136 .stk-bcf20d4,
	body .stk-16ea136 .stk-bcf20d4 .stk--block-horizontal-flex,
	body .stk-16ea136 .stk-bcf20d4.stk--block-horizontal-flex {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px;
		margin-top: 20px !important;
		margin-bottom: 0 !important;
	}
}

/* Grupos de botones e íconos: el CSS adicional antiguo pone en columna TODAS las
   filas (.stk-row) en móvil. En los grupos con flex-basis 0 eso dejaba la caja con
   0px de alto y el ícono caía encima del texto (página Contacto, calendario y reloj). */
@media (max-width: 1023px) {
	body .stk-block-button-group > .stk-row.stk-button-group {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
	}
	body .stk-block-button-group > .stk-row.stk-button-group > .stk-block {
		flex: 0 0 auto !important;
	}
}

/* Contacto: íconos de calendario y reloj alineados a la izquierda y algo más pequeños */
@media (max-width: 767px) {
	body :is(.stk-f182744, .stk-06dd2f3) {
		margin-top: 8px !important;
		margin-bottom: 12px !important;
	}
	body :is(.stk-f182744, .stk-06dd2f3) > .stk-row {
		justify-content: flex-start !important;
	}
	body :is(.stk-1d36045, .stk-fcb4835) .stk-button {
		padding: 12px !important;
	}
	body :is(.stk-1d36045, .stk-fcb4835) .stk-button .stk--inner-svg svg:last-child {
		width: 32px !important;
		height: 32px !important;
	}
}

/* Contacto: los dos bloques (días con calendario y horarios con reloj) uno al lado
   del otro, también en móvil (antes quedaban uno debajo del otro). */
@media (max-width: 1023px) {
	body .stk-ea12fc2 > .stk-row.stk-row {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 16px;
	}
	body .stk-ea12fc2 > .stk-row > .stk-block-column.stk-block-column {
		flex: 1 1 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		min-width: 0 !important;
	}
	body .stk-ea12fc2 > .stk-row > .stk-block-column > .stk-column-wrapper {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}
@media (max-width: 479px) {
	/* En celulares pequeños los dos bloques usan parte del margen lateral de la
	   portada para que los horarios quepan en una línea */
	body .stk-ea12fc2 {
		margin-left: -36px !important;
		margin-right: -36px !important;
	}
	body .stk-ea12fc2 h6 {
		font-size: 0.9375rem !important;
	}
	body :is(.stk-3d17571, .stk-139602d, .stk-5c8a849, .stk-b772fed) h6 {
		white-space: nowrap;
	}
}

/* Contacto: la tarjeta del formulario sube 350px sobre una portada de alto fijo
   (100vh). En pantallas pequeñas el texto de la portada es más alto y quedaba tapado
   ("8:30 a.m – 1:00 p.m"). La portada toma el alto de su contenido y la tarjeta
   sigue montada, pero solo 100px, que siempre caen en el margen inferior. */
@media (max-width: 1023px) {
	body .entry-content > .stk-2dd8cfd {
		min-height: 0 !important;
		padding-bottom: 60px !important;
	}
	/* Foto de los doctores (PNG sin fondo): en escritorio va desplazada a la izquierda
	   (right: 250px, ancho 800–1000px). En pantallas pequeñas eso la dejaba encima de
	   los íconos. Aquí va centrada bajo el texto y el formulario se monta sobre ella. */
	/* Siempre texto arriba e imagen abajo (el CSS adicional antiguo dejaba esta fila
	   en dos columnas lado a lado entre 601 y 900px). */
	body .stk-2dd8cfd > .stk-row.stk-row {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}
	body .stk-2dd8cfd > .stk-row > .stk-block-column.stk-block-column {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	body .stk-2dd8cfd .stk-block-column.stk-0255cb3 {
		right: auto !important;
		left: 0 !important;
		margin: 16px 0 0 !important;
	}
	body .stk-2dd8cfd .stk-4626a90 {
		right: auto !important;
		left: 0 !important;
		margin: 0 auto -40px !important;
	}
	/* Foto grande: casi todo el ancho de la pantalla (hasta 600px), centrada */
	body .stk-2dd8cfd .stk-4626a90 .stk-img-wrapper {
		width: min(calc(100vw - 24px), 600px) !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 0 0 calc(50% - min(50vw - 12px, 300px)) !important;
	}
	body .stk-2dd8cfd .stk-4626a90 .stk-img-wrapper img {
		width: 100% !important;
		height: auto !important;
	}
	body .entry-content > .stk-d5bda58 {
		min-height: 0 !important;
		padding-bottom: 48px !important;
	}
	body .stk-d5bda58 .stk-block-column.stk-bd4e243 {
		top: 0 !important;
		margin-top: -100px !important;
		margin-bottom: 32px !important;
	}
	/* La franja decorativa del final y el mapa de Google subían 460px y tapaban
	   la dirección, el email y el número de contacto */
	body .entry-content > .stk-ec058a2 {
		top: 0 !important;
		margin-top: 24px !important;
	}
	body .stk-block-column.stk-dddeff8 {
		top: 0 !important;
		margin-top: 32px !important;
		margin-bottom: 0 !important;   /* tenía -468px para compensar la subida */
	}
	/* La columna de dirección/email también subía 350px y quedaba sobre el formulario */
	body .stk-d5bda58 .stk-block-column.stk-b9c9c39 {
		top: 0 !important;
		margin-left: 0 !important;
	}
}

/* Título de contacto: fluido y sin cortar palabras */
body .stk-5dca3a6 .stk-block-heading__text {
	font-size: clamp(1.75rem, 1rem + 1.6vw, 2.2rem) !important;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}


/* ==========================================================================
   3c. PÁGINA SERVICIOS (/about/)
   ========================================================================== */

/* Título "Tu sonrisa es nuestra Mayor Inspiración": 50px en móvil partía la última palabra */
body .stk-818b6e8 .stk-block-heading__text {
	font-size: clamp(2.1rem, 1rem + 4.2vw, 3.75rem) !important;
	line-height: 1.1 !important;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Precios (Servicios): el CSS adicional antiguo dejaba las 3 tarjetas en una fila al
   50 % entre 601 y 900px (~150px cada una, todas las palabras partidas). */
@media (max-width: 1023px) {
	body .stk-f05e36f > .stk-row {
		flex-wrap: wrap !important;
		flex-direction: row !important;
		justify-content: center !important;
		gap: 24px;
	}
	body .stk-f05e36f > .stk-row > .stk-block-column {
		flex: 1 1 100% !important;
		max-width: 440px !important;
		padding: 28px 24px !important;
	}
	body .stk-f05e36f > .stk-row > .stk-block-column > .stk-column-wrapper {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* En laptop (1024–1439) las 3 tarjetas siguen en fila: menos relleno para que
   "Ortodoncia" o "Blanqueamiento" quepan sin partirse. */
@media (min-width: 1024px) and (max-width: 1439px) {
	body .stk-f05e36f > .stk-row > .stk-block-column {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
	body .stk-f05e36f .stk-block-heading__text {
		font-size: clamp(1.4rem, 0.5rem + 1.5vw, 1.875rem) !important;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}

/* Textos justificados de escritorio: en pantallas pequeñas se alinean a la izquierda */
@media (max-width: 1023px) {
	body .stk-block .has-text-align-justify {
		--stk-alignment-text-align: left;
		text-align: left;
	}
}

/* Carrusel de fotos junto a las preguntas frecuentes: en móvil cada foto medía
   ~960px de alto y se veía pequeña en medio de un bloque morado vacío. */
@media (max-width: 1023px) {
	body [id^="gspb_col-id-gsbp-0aa510f"] .swiper,
	body [id^="gspb_col-id-gsbp-0aa510f"] .swiper-wrapper,
	body [id^="gspb_col-id-gsbp-0aa510f"] .swiper-slide {
		height: auto !important;
	}
	body [id^="gspb_col-id-gsbp-0aa510f"] .swiper [id^="gspb_image-id"],
	body [id^="gspb_col-id-gsbp-0aa510f"] .swiper img {
		height: clamp(280px, 70vw, 420px) !important;
		width: 100% !important;
		object-fit: cover !important;
		border-radius: 20px;
	}
}


/* ==========================================================================
   4. ESPACIADORES Y SEPARADORES: menos aire vacío en tablet y móvil
   ========================================================================== */

@media (max-width: 1023px) {
	body .entry-content > .stk-block-spacer {
		height: 40px !important;
	}
}

@media (max-width: 767px) {
	body .entry-content > .stk-block-spacer {
		height: 24px !important;
	}
	body .entry-content > .stk-block-divider {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}


/* ==========================================================================
   5. ANIMACIONES ANTIGUAS (.animate-*): eran de 2 a 2,8 s, demasiado lentas.
      Se dejan las mismas clases pero con duración y retrasos normales.
   ========================================================================== */

html body .animate-fade-up,
html body .animate-fade-down,
html body .animate-fade-left,
html body .animate-fade-right,
html body .animate-zoom,
html body .animate-bounce,
html body .animate-counter {
	transition-duration: 0.8s !important;
	transition-timing-function: var(--od-ease) !important;
}
html body .animate-delay-1 { transition-delay: 0.1s !important; }
html body .animate-delay-2 { transition-delay: 0.2s !important; }
html body .animate-delay-3 { transition-delay: 0.3s !important; }
html body .animate-delay-4 { transition-delay: 0.4s !important; }
html body .animate-delay-5 { transition-delay: 0.5s !important; }


/* ==========================================================================
   6. ANIMACIONES NUEVAS
   ========================================================================== */

/* 6.1 Entrada de la portada al cargar la página (solo CSS, sin esperar al JS).
       La clase od-js la pone un script en <head> antes de pintar la página. */
@keyframes od-hero-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
@keyframes od-hero-img {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: none; }
}

.od-js .stk-2398322 .stk-block-heading,
.od-js .stk-2398322 .wp-block-ttb-text-typing,
.od-js .stk-2398322 .stk-block-text,
.od-js .stk-2398322 .stk-block-button-group {
	animation: od-hero-in 0.9s var(--od-ease) both;
}
.od-js .stk-2398322 .wp-block-ttb-text-typing { animation-delay: 0.12s; }
.od-js .stk-2398322 .stk-block-text           { animation-delay: 0.24s; }
.od-js .stk-2398322 .stk-block-button-group   { animation-delay: 0.36s; }
.od-js .stk-097a4db .stk-block-image {
	animation: od-hero-img 1.1s var(--od-ease) 0.2s both;
}

/* 6.2 Salida de la portada: al bajar, el contenido se desvanece y sube un poco.
       --od-exit va de 0 a 1 según el scroll (lo calcula oraldental.js). */
.stk-1d584cb > .stk-row > .stk-block-column > .stk-column-wrapper {
	opacity: calc(1 - var(--od-exit, 0) * 0.7);
	transform: translateY(calc(var(--od-exit, 0) * -40px));
	will-change: opacity, transform;
}

/* 6.3 Entrada al hacer scroll (clases que pone oraldental.js) */
.od-reveal {
	opacity: 0;
	transition:
		opacity var(--od-dur) var(--od-ease),
		transform var(--od-dur) var(--od-ease);
	transition-delay: var(--od-delay, 0ms);
}
.od-reveal.od-up    { transform: translateY(var(--od-dist)); }
.od-reveal.od-left  { transform: translateX(calc(var(--od-dist) * -1.5)); }
.od-reveal.od-right { transform: translateX(calc(var(--od-dist) * 1.5)); }
.od-reveal.od-zoom  { transform: scale(0.94); }
.od-reveal.od-in {
	opacity: 1;
	transform: none;
}

/* 6.4 Pequeños detalles al pasar el ratón (solo en dispositivos con ratón) */
/*     Va sobre el contenedor interno para no pisar la animación de entrada. */
@media (hover: hover) {
	.stk-aba24fe > .stk-row > .stk-block-column > .stk-column-wrapper,
	.stk-a4dc2a8 > .stk-row > .stk-block-column > .stk-column-wrapper {
		transition: transform 0.35s var(--od-ease), box-shadow 0.35s var(--od-ease);
	}
	.stk-aba24fe > .stk-row > .stk-block-column:hover > .stk-column-wrapper,
	.stk-a4dc2a8 > .stk-row > .stk-block-column:hover > .stk-column-wrapper {
		transform: translateY(-6px);
	}
	.stk-a4dc2a8 > .stk-row > .stk-block-column:hover > .stk-column-wrapper {
		box-shadow: 0 18px 40px rgba(183, 58, 185, 0.25);
	}
}

/* 6.5 Quien tenga activado "reducir movimiento" ve todo sin animar */
@media (prefers-reduced-motion: reduce) {
	.od-js *,
	.od-reveal {
		animation: none !important;
		transition: none !important;
	}
	.od-reveal,
	.stk-1d584cb > .stk-row > .stk-block-column > .stk-column-wrapper {
		opacity: 1 !important;
		transform: none !important;
	}
}