/**
 * Deroode Orthodontics - estilos personalizados por área.
 * Colores y tipografías base viven en el Kit global de Elementor;
 * aquí solo van los detalles que los controles de los widgets no cubren.
 *
 * ÍNDICE DE CLASES
 * ----------------
 * Encabezado   .dr-header .dr-header__brand .dr-header__right .dr-header__tagline
 *              .dr-header__nav .dr-menu-highlight .dr-menu-nolink
 * Home         .dr-home-hero .dr-home-slider
 *              .dr-home-plan .dr-home-plan__title .dr-home-plan__btn
 *              .dr-home-testimonials .dr-testimonials-carousel
 *              .dr-testimonial .dr-testimonial__sign .dr-testimonial__text
 *              .dr-testimonial__more
 *              .dr-home-doctor .dr-doctor__icon .dr-doctor__title .dr-doctor__sub
 *              .dr-doctor__bio .dr-doctor__photo .dr-doctor-carousel
 * Internas     .dr-banner__img .dr-banner__title .dr-content--narrow
 *              .dr-content--float .dr-float-img .dr-page-title .dr-page-title--left
 *              .dr-content-text .dr-legal .dr-oscuro .dr-lead .dr-content-heading
 *              .dr-content-heading--sub .dr-content-logo .dr-content-img
 *              .dr-circle-img .dr-waze .dr-map .dr-video .dr-text-center
 *              .dr-especialidad__sub .dr-testimonial-page__text
 *              .dr-testimonial-page__sign .dr-back .dr-faq .dr-section-title
 * Formularios  .dr-form .dr-form--page .dr-form--newsletter .dr-form--medical
 *              .dr-form--blog .dr-form-box .dr-form-box--wide .dr-form-intro
 *              .dr-form-intro__text .dr-form-note .dr-med-section .dr-med-legal
 * Pie          .dr-footer__band-title .dr-footer__band-text .dr-footer__follow
 *              .dr-footer__social
 *              .dr-footer__info .dr-footer__copy .dr-footer__bottom .dr-footer__power
 * Blog         .dr-blog-grid .dr-post__title .dr-post__image .dr-post__content
 *              .dr-post__sidebar .dr-post__more .dr-sidebar__title
 * Varios       .dr-404__code .dr-404__text .dr-thanks .dr-thanks__icon
 *              .dr-btn--red .dr-sr-only
 *
 * Animaciones propias: dr-layer-up, dr-layer-fade (ver HOME - Slider).
 */

:root {
	--dr-red: var(--e-global-color-primary, #E51937);
	--dr-blue: var(--e-global-color-secondary, #54BFD9);
	--dr-cyan: var(--e-global-color-accent, #00BFEF);
	--dr-gray: var(--e-global-color-text, #959595);
	--dr-dark: #212529;
	--dr-light: #F3F3F3;

	/* Alto del héroe. El original lo calcula proporcional al ancho (700 px para
	   1600) y lo congela a partir de 1600. Vive aquí y no en el slider porque la
	   banda "Plan Your Visit Now" es hermana suya y necesita el mismo número. */
	--dr-hero-h: 700px;
}

@media (min-width: 1025px) {
	:root {
		--dr-hero-h: min(700px, 43.75vw);
	}
}

/* =========================================================
   TIPOGRAFÍA BASE
   ========================================================= */
/* Montserrat ya NO se pone aquí: la emite el Kit (body, h1..h6, botones,
   etiquetas y campos), que es donde debe vivir. Hasta el 2026-10-21 hubo que
   reponerla en esta hoja porque las claves del Kit estaban guardadas como
   body_typography_typography_font_family en vez de body_typography_font_family
   -- un "typography" de más -- y Elementor no las reconocía, así que no emitía
   ninguna font-family y ganaba la pila del sistema de hello-elementor/reset.css.
   Corregidas las claves, la muleta se retiró. Si algún día vuelve a verse la
   fuente del sistema, el sospechoso es el Kit, no esta hoja. */

/* Lo único que queda aquí: <select> no siempre lleva la clase de campo de
   Elementor, así que la regla del Kit no lo alcanza, y los controles de
   formulario no heredan la fuente del documento por omisión. */
input,
select,
textarea,
button {
	font-family: inherit;
}

/* =========================================================
   HEADER (plantillas Header EN / Header ES)
   ========================================================= */
/* El original encierra el encabezado en 1376 px centrados; el fondo blanco
   sigue a todo lo ancho para que la barra fija no se corte. */
.dr-header {
	--content-width: 1376px;
	transition: box-shadow 0.25s ease, padding 0.25s ease;
}

/* Filete gris bajo el encabezado. En el original lo lleva la caja de 1376, no
   todo el ancho, y la portada no lo tiene:
   .header{border-bottom:1px solid #c3c3c3} + .front header{border:none}.

   DESVIACIÓN PEDIDA POR EL CLIENTE (2026-10-23): el original deja 10 px de aire
   bajo la línea antes del banner —su .header lleva margin:10px auto— y al
   cliente no le gusta ese hueco. En las internas la línea pasa a ser el borde
   mismo del encabezado: fuera el margen inferior, y el encabezado queda 10 px
   más corto en vez de bajar la línea, que era la otra forma de pegarla. La
   portada sí conserva esos 10 px: allí no hay línea, así que el hueco no se ve
   y no hay motivo para separarse del original. */
.dr-header > .e-con-inner {
	border-bottom: 1px solid #c3c3c3;
}

body.home .dr-header > .e-con-inner {
	border-bottom: 0;
	margin-bottom: 10px;
}

.dr-header.elementor-sticky--effects {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.dr-header__brand {
	flex-shrink: 0;
}

/* El logotipo mide 287 x 100 en el original. Sin fijarlo, la fila estira la
   imagen a la altura del bloque de la derecha y se queda en 227 px. */
.dr-header__brand img {
	width: 287px;
	max-width: 287px;
	height: auto;
	align-self: center;
}

.dr-header__right {
	min-width: 0;
}

.dr-header__tagline .elementor-heading-title {
	font-size: 10.67px;
	color: var(--dr-dark);
	line-height: 1.3;
}

/* ítem destacado "Free Consult" */
.dr-header__nav .dr-menu-highlight > a {
	color: #000 !important;
	font-weight: 700 !important;
}

/* ítems padre sin enlace (Forms / Treatment) */
.dr-header__nav .dr-menu-nolink > a {
	cursor: default;
}

/* menú principal: hover y página activa con paralelogramo azul (igual al original) */
.dr-header__nav .elementor-nav-menu--main .elementor-item {
	position: relative;
	z-index: 0;
}

.dr-header__nav .elementor-nav-menu--main .elementor-item::before,
.dr-header__nav .elementor-nav-menu--main .elementor-sub-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--dr-blue);
	transform: skewX(-20deg);
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* El original distingue los dos estados y aquí los teníamos igualados: bajo el
   cursor la letra se vuelve BLANCA, pero en la página activa se queda NEGRA. El
   paralelogramo azul lo llevan los dos. Comprobado a mano en /en/about-us con el
   ratón encima: "About Us" (activo) en negro y "Contact Us" (hover) en blanco,
   ambos con el mismo skewX(-20deg) y el mismo #54BFD9 detrás. El negro del
   activo lo pone el widget (color_menu_item_active), así que aquí solo hay que
   NO pisarlo. */
.dr-header__nav .elementor-nav-menu--main .menu-item:hover > .elementor-item,
.dr-header__nav .elementor-nav-menu--main .elementor-item.highlighted,
.dr-header__nav .elementor-nav-menu--main .elementor-sub-item:hover {
	color: #fff !important;
}

/* El paralelogramo lo llevan también los PADRES con desplegable cuando estás en
   una de sus hijas: en el original, estando en una página de tratamiento,
   "Treatment" aparece marcado. "Treatment" y "Forms" son enlaces personalizados
   a # con hijos, y WordPress les pone igualmente `current-menu-ancestor` en el
   <li>, así que basta con nombrarlo aquí. La letra se queda negra, como en el
   activo normal. */
.dr-header__nav .elementor-nav-menu--main .menu-item:hover > .elementor-item::before,
.dr-header__nav .elementor-nav-menu--main .elementor-item.elementor-item-active::before,
.dr-header__nav .elementor-nav-menu--main .menu-item.current-menu-ancestor > .elementor-item::before,
.dr-header__nav .elementor-nav-menu--main .elementor-item.highlighted::before,
.dr-header__nav .elementor-nav-menu--main .elementor-sub-item:hover::before,
.dr-header__nav .elementor-nav-menu--main .elementor-sub-item.elementor-item-active::before {
	opacity: 1;
}

/* ítems con submenú: triángulo rojo en lugar de flecha.
   El triángulo va DENTRO de la caja del <li>, pegado a su borde derecho, que es
   donde lo tiene el original. Lo teníamos 4 px más a la derecha y por eso se
   montaba sobre el filo inclinado del paralelogramo azul: el azul es el <a> con
   skewX(-20deg), así que su borde derecho se retranquea hacia dentro conforme se
   baja. Con el triángulo a ras del <li> no hace falta el margen que lo separaba
   del ítem siguiente, y el menú vuelve a medir lo mismo que el original. */
.dr-header__nav .elementor-nav-menu--main .sub-arrow {
	display: none;
}

.dr-header__nav .elementor-nav-menu--main > .elementor-nav-menu > .menu-item-has-children {
	position: relative;
}

.dr-header__nav .elementor-nav-menu--main > .elementor-nav-menu > .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: calc(50% - 4px);
	right: 0;
	z-index: 1;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--dr-red);
	pointer-events: none;
}

/* menú móvil: triángulo rojo en los ítems con submenú.
   Ojo con la especificidad: PRO Elements apaga los pseudoelementos del enlace
   con su maquinaria de «pointers» —`.elementor-item:not(:hover):not(:focus)
   :not(.elementor-item-active):not(.highlighted)::after { opacity: 0 }`—, que
   suma cinco clases. Por eso este triángulo nunca llegó a verse: estaba
   dibujado y en opacidad 0. En escritorio no pasa porque allí el triángulo
   cuelga del <li> y no del enlace. Aquí hacen falta cinco clases y dos
   elementos, y el `opacity: 1` explícito. */
.dr-header__nav .elementor-nav-menu--dropdown .menu-item-has-children > a {
	position: relative;
}

.dr-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu li.menu-item-has-children > a.elementor-item::after {
	content: "";
	position: absolute;
	right: 20px;
	top: calc(50% - 4px);
	opacity: 1;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--dr-red);
	transition: transform 0.2s ease;
}

/* Sobre la barra azul del padre marcado el rojo no se lee: blanco. */
.dr-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu li.current-menu-ancestor.menu-item-has-children > a.elementor-item::after {
	border-top-color: #fff;
}

.dr-header__nav .elementor-nav-menu--dropdown .elementor-nav-menu li.menu-item-has-children > a.elementor-item.highlighted::after {
	transform: rotate(180deg);
	border-top-color: #fff;
}

.dr-header__nav .elementor-nav-menu--dropdown .sub-arrow {
	display: none;
}

/* El activo del menú móvil lo marca Elementor —blanco sobre #54BFD9— pero solo
   en el enlace de la página. Estando en una hija de «Treatment» o de «Forms»,
   el padre se queda sin marcar, y como el submenú va plegado, al abrir el menú
   no se ve nada marcado: lo mismo que pasaba en escritorio. WordPress pone
   `current-menu-ancestor` en el <li> del padre aunque su enlace sea un # (igual
   que arriba), así que basta con nombrarlo. Cinco clases porque Elementor emite
   su color con cuatro desde el CSS de la plantilla.
   dr-movil-activo-padre */
.dr-header__nav .elementor-nav-menu--dropdown .menu-item.current-menu-ancestor > a.elementor-item,
.dr-header__nav .elementor-nav-menu--dropdown .menu-item.current-menu-ancestor > a.elementor-item:focus {
	color: #fff;
	background-color: var(--dr-blue);
}


/* submenú horizontal alineado a la derecha, separado con barras */
.dr-header__nav .elementor-nav-menu--main .sub-menu {
	left: auto !important;
	right: 0 !important;
	top: 100% !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	/* El relleno inferior hacía que la caja blanca del desplegable bajase 2 px
	   por debajo del filete del encabezado y lo tapase. Sin él, y con 6 px
	   arriba, el desplegable termina 4 px antes de la línea. */
	padding: 6px 0 0;
	white-space: nowrap;
	text-align: right;
	background: #fff !important;
	box-shadow: none;
	border: 0;
}

.dr-header__nav .elementor-nav-menu--main .sub-menu li {
	display: inline-block;
	position: relative;
	margin: 0 10px;
	background: transparent;
}

.dr-header__nav .elementor-nav-menu--main .sub-menu li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -12px;
	width: 2px;
	height: 15px;
	background: #000;
	border-radius: 1px;
	transform: translateY(-50%) rotate(20deg);
}

.dr-header__nav .elementor-nav-menu--main .elementor-sub-item {
	position: relative;
	z-index: 0;
	padding: 4px 6px !important;
	background: transparent !important;
	color: #000;
	font-size: 15px;
	line-height: 1.3;
	border: 0 !important;
}

/* "Free Consult" sigue el mismo hover azul */
.dr-header__nav .elementor-nav-menu--main .dr-menu-highlight > a:hover {
	color: #fff !important;
}

/* bandera del selector de idioma de Polylang */
.dr-header__nav .lang-item img {
	display: inline-block;
	margin-right: 6px;
	vertical-align: middle;
}

/* el botón hamburguesa nunca se monta sobre el logo */
.dr-header__nav .elementor-menu-toggle {
	margin-left: auto;
	flex-shrink: 0;
}

/* Entre 1025 y 1400 px el logotipo a 287 px y el menú a tamaño completo suman
   más que la caja y el menú se partía en dos filas. El original resuelve esto
   dejando que el menú se monte sobre el logotipo; aquí se encogen los dos. */
@media (max-width: 1400px) {
	.dr-header__brand img {
		width: 240px;
		max-width: 240px;
	}

	.elementor.elementor .dr-header__nav .elementor-nav-menu--main .elementor-item {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* los dos ítems con triángulo conservan el relleno derecho: el triángulo ocupa
	   esos 10 px y, si se los quitamos, queda pegado a la última letra. */
	.elementor.elementor .dr-header__nav .elementor-nav-menu--main .menu-item-has-children > .elementor-item {
		padding-right: 15px;
	}
}

@media (max-width: 1024px) {
	.dr-doctor__photo img {
		margin-right: 0;
	}

	.dr-header__tagline {
		display: none;
	}

	.dr-header__nav .elementor-nav-menu--dropdown {
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	}
}

/* =========================================================
   HOME - Slider
   ========================================================= */
.dr-home-slider .elementor-slide-heading,
.dr-home-slider .elementor-slide-description {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.dr-home-slider .elementor-slide-heading {
	margin-bottom: 10px;
}

/* diapositivas "misión": la línea pequeña va encima del texto grande */
.dr-home-slider .elementor-repeater-item-drslide1top .swiper-slide-contents,
.dr-home-slider .elementor-repeater-item-drslide3top .swiper-slide-contents {
	display: flex;
	flex-direction: column-reverse;
}

.dr-home-slider .elementor-repeater-item-drslide1top .elementor-slide-heading,
.dr-home-slider .elementor-repeater-item-drslide3top .elementor-slide-heading {
	margin-bottom: 0;
}

.dr-home-slider .elementor-repeater-item-drslide1top .elementor-slide-description,
.dr-home-slider .elementor-repeater-item-drslide3top .elementor-slide-description {
	margin-bottom: 8px;
}

/* Velo translúcido tras el texto. En el original es una capa con un PNG de
   1587x700 que solo contiene un degradado horizontal de #00C0DB con alfa
   0 -> 0,40 -> 0. Aquí se dibuja con CSS: pesa cero y escala a cualquier ancho.
   Va en un pseudoelemento porque ningún ajuste del widget pone un fondo
   detrás del texto sin pintar también la diapositiva entera. */
/* content_max_width del widget es un max-width sobre una caja que si no se
   encoge hasta el texto, y el bloque quedaba pegado a la derecha en vez de
   ocupar los 800 px del original. El ajuste del widget pone el tope (53,34 %)
   y aquí se fuerza que además lo ocupe. */
.dr-home-slider .swiper-slide-contents {
	position: relative;
	z-index: 0;
	width: 53.34%;
}

.dr-home-slider .swiper-slide-contents::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -28px 20px -28px -200px;
	opacity: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 192, 219, 0) 0%,
		rgba(0, 192, 219, 0.24) 25%,
		rgba(0, 192, 219, 0.4) 50%,
		rgba(0, 192, 219, 0.24) 75%,
		rgba(0, 192, 219, 0) 100%
	);
}

/* =========================================================
   HOME - Slider: el compás de entrada de las capas

   Medido en el original con un observador en vivo: el crossfade dura 3000 ms y
   durante esos 3 s NO hay texto; al terminar entra el velo (data-start 0) y
   400 ms después el titular y la descripción (data-easein fadeInUp). Luego
   11 s de reposo: el ciclo completo es de 14 s.

   Esto no lo hace Elementor. Su `content_animation` no llega a emitir ninguna
   animación aquí, y aunque lo hiciera no sabe esperar al final de la
   transición: arrancaría a la vez que el crossfade, que es justo lo que hacía
   que el banner pareciera lento.

   En la PRIMERA diapositiva no hay crossfade que esperar, así que los retardos
   cortos son el valor por defecto y el JS añade .dr-hero--encadenado tras el
   primer cambio. Si el JS fallara, el peor caso es que el texto entre un poco
   pronto; nunca que no se vea.
   ========================================================= */
.dr-home-slider .swiper-slide .elementor-slide-heading,
.dr-home-slider .swiper-slide .elementor-slide-description {
	opacity: 0;
	transform: translateY(-18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.dr-home-slider .swiper-slide-active .elementor-slide-heading,
.dr-home-slider .swiper-slide-active .elementor-slide-description {
	opacity: 1;
	transform: none;
	transition: none;
	animation: dr-layer-up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s backwards;
}

.dr-home-slider .swiper-slide-active .swiper-slide-contents::before {
	opacity: 1;
	animation: dr-layer-fade 0.9s ease 0s backwards;
}

/* Tras el primer cambio hay 3 s de crossfade que esperar. */
.dr-home-slider.dr-hero--encadenado .swiper-slide-active .elementor-slide-heading,
.dr-home-slider.dr-hero--encadenado .swiper-slide-active .elementor-slide-description {
	animation-delay: 3.4s;
}

.dr-home-slider.dr-hero--encadenado .swiper-slide-active .swiper-slide-contents::before {
	animation-delay: 3s;
}

@keyframes dr-layer-fade {
	from {
		opacity: 0;
	}
}

@keyframes dr-layer-up {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
}

/* El original escala el héroe con el ancho —700 px de alto para 1600 de
   ancho— y solo lo congela a partir de 1600. Elementor guarda una sola altura
   por corte y la emite con tres clases desde el CSS de la página, así que aquí
   hace falta !important. Por debajo de 1024 mandan los valores del widget, que
   dan más alto que el proporcional a propósito: 171 px de héroe en un móvil no
   se sostienen. */
@media (min-width: 1025px) {
	.dr-home-slider .swiper-slide {
		height: var(--dr-hero-h) !important;
	}

	/* El original escala TODO el texto del héroe con el ancho (su md-slider fija
	   el tamaño base en ancho/1600) y lo congela a partir de 1600. El nuestro lo
	   tenía fijo en 59 px a cualquier ancho, así que por debajo de 1600 el texto
	   se amontonaba contra la banda. 3,6875vw son los 59 px a 1600.
	   Los selectores suben de especificidad a propósito: Elementor emite
	   `.elementor-<id-pagina> .elementor-element.elementor-element-<id> .elementor-slide-heading`,
	   que son cuatro clases, y con menos no se le gana. */
	.elementor.elementor .dr-home-slider .swiper-slide-inner .elementor-slide-heading {
		font-size: min(59px, 3.6875vw);
	}

	.elementor.elementor .dr-home-slider .swiper-slide-inner .elementor-slide-description {
		font-size: min(25px, 1.5625vw);
	}

	/* Las diapositivas 2 y 4 llevan un titular largo. El original les baja el
	   cuerpo a 49,5 px en vez de dejar que ocupe una línea más; con el texto en
	   español, que es más largo, sin esto se monta sobre la banda. */
	.elementor.elementor .dr-home-slider .elementor-repeater-item-drslide2 .swiper-slide-inner .elementor-slide-heading,
	.elementor.elementor .dr-home-slider .elementor-repeater-item-drslide4 .swiper-slide-inner .elementor-slide-heading {
		font-size: min(49.5px, 3.09375vw);
	}

	/* El original ensancha la caja de esas dos diapositivas a 850 px (contra 800
	   del resto) para que el titular largo entre en dos líneas y no en tres. Hay
	   que subir también el max-width porque el ajuste content_max_width del
	   widget lo tiene en 53,34 % y recortaría la anchura. */
	.elementor.elementor .dr-home-slider .elementor-repeater-item-drslide2 .swiper-slide-contents,
	.elementor.elementor .dr-home-slider .elementor-repeater-item-drslide4 .swiper-slide-contents {
		width: 56.67%;
		max-width: 56.67%;
	}

	/* El bloque de texto sube 20 px sobre el centro para despegarlo de la banda:
	   el original deja 59 px en las diapositivas cortas y 49 en las largas, y a
	   petición del cliente aquí se da un poco más de aire. El margen inferior
	   desplaza el centrado de flex sin tocar las animaciones de entrada, que
	   actúan sobre los hijos. */
	.dr-home-slider .swiper-slide-contents {
		margin-bottom: 40px;
	}
}

/* El original pone la diapositiva como <img> a ancho completo y alto
   automatico, asi que en movil se ve entera y no recorta nada. Aqui el alto
   se deja en los 380 px del widget a proposito (ver el bloque de arriba), y
   con eso `cover` recorta 462 px de ancho. Centrado, ese recorte parte a la
   doctora por la izquierda, que es justo lo que se ve en la primera
   diapositiva. El 18 % deja la ventana sobre la mitad izquierda de la foto,
   que es donde esta ella, y la muestra completa. Solo afecta a esta
   diapositiva: las otras tres estan bien centradas.
   dr-banner-slide1-encuadre */
@media (max-width: 767px) {
	.dr-home-slider .elementor-repeater-item-drslide1top .swiper-slide-bg {
		background-position: 18% 50%;
	}
}

/* Las flechas solo aparecen al pasar el ratón sobre el slider, como en el
   original (.md-arrow{opacity:0} + .active al hacer hover). El estilo también
   es el suyo: círculo de 50 px con fondo negro al 30 % y la punta blanca al
   57 % del círculo. Elementor las deja en un chevron gris de 25 px sin fondo,
   que sobre una foto clara no se ve ni al pasar el ratón. */
.dr-home-slider .elementor-swiper-button {
	opacity: 0;
	visibility: hidden;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease, visibility 0.25s ease,
		background-color 0.2s ease;
}

.dr-home-slider .elementor-swiper-button svg,
.dr-home-slider .elementor-swiper-button i {
	width: 28px;
	height: 28px;
	font-size: 28px;
	fill: #fff;
	color: #fff;
}

.dr-home-slider .elementor-swiper-button:hover {
	background-color: rgba(0, 0, 0, 0.45);
}

.dr-home-slider .elementor-swiper-button-prev {
	left: 10px;
}

.dr-home-slider .elementor-swiper-button-next {
	right: 10px;
}

.dr-home-slider:hover .elementor-swiper-button,
.dr-home-slider .elementor-swiper-button:focus-visible {
	opacity: 1;
	visibility: visible;
}

/* En pantallas táctiles no hay hover: las flechas se quedan visibles. */
@media (hover: none) {
	.dr-home-slider .elementor-swiper-button {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 1024px) {
	.dr-home-slider .swiper-slide-contents {
		width: 100%;
	}

	.dr-home-slider .swiper-slide-contents::before {
		inset: -20px -24px;
	}
}

/* =========================================================
   HOME - Banda "Plan Your Visit Now" (superpuesta al slider)
   ========================================================= */
/* La banda replica el bloque del original: 60 % del ancho pegado a la derecha,
   montado sobre el slider y anclado a un 22 % de su alto (700 px -> 231 px
   contando los 77 px de la propia banda). Elementor no tiene control de anchura
   para un contenedor de primer nivel, de ahí la variable. */
.dr-home-plan {
	--width: 60%;
	--dr-plan-fs: clamp(27px, 2.7vw, 43px);
	--dr-plan-h: calc(var(--dr-plan-fs) * 1.1 + 30px);
	margin: calc(var(--dr-hero-h) * -0.22 - var(--dr-plan-h)) 0 0 auto;
	position: relative;
	z-index: 5;
	justify-content: flex-start;
	pointer-events: none;
}

/* El título ocupa el 80 % del bloque y asoma 60 px por la izquierda. */
.dr-home-plan__title {
	width: 80%;
	margin-left: -60px;
}

.dr-home-plan > .e-con-inner > *,
.dr-home-plan > * {
	pointer-events: auto;
}

.dr-home-plan__title .elementor-heading-title {
	position: relative;
	z-index: 0;
	display: block;
	color: #fff;
	font-size: var(--dr-plan-fs);
	font-weight: 600;
	line-height: 1.1;
	padding: 15px 0 15px 20px;
}

.dr-home-plan__title .elementor-heading-title::before,
.dr-home-plan__btn .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: skewX(-20deg);
}

.dr-home-plan__title .elementor-heading-title::before {
	background: var(--dr-blue);
}

/* El botón va anclado al 9 % derecho del bloque, no pegado al título. */
.dr-home-plan__btn {
	position: absolute;
	top: 15px;
	right: 9%;
	margin: 0;
	z-index: 1;
}

.dr-home-plan__btn .elementor-button {
	position: relative;
	z-index: 0;
	background: transparent !important;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	padding: 12px 25px;
	border-radius: 0;
}

.dr-home-plan__btn .elementor-button::before {
	background: #000;
	transition: background-color 0.2s ease;
}

.dr-home-plan__btn .elementor-button:hover::before {
	background: var(--dr-red);
}

.dr-home-plan__btn .elementor-button-icon {
	color: var(--dr-blue);
	font-size: 20px;
}

@media (max-width: 1024px) {
	.dr-home-plan {
		--width: 100%;
		margin: 0;
		pointer-events: auto;
	}

	.dr-home-plan__title {
		width: 100%;
		margin-left: 0;
	}

	.dr-home-plan__title .elementor-heading-title {
		display: block;
		padding: 14px 20px;
		font-size: 28px;
		line-height: 1.2;
		text-align: center;
	}

	.dr-home-plan__title .elementor-heading-title::before,
	.dr-home-plan__btn .elementor-button::before {
		transform: none;
	}

	.dr-home-plan__btn {
		position: static;
		margin-top: 10px;
	}

	.dr-home-plan__btn .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================
   SALVAGUARDAS DE LAS ANIMACIONES DE ENTRADA
   Elementor marca los bloques animados con .elementor-invisible
   (visibility:hidden) y se la quita por JavaScript al entrar en pantalla.
   Eso deja dos agujeros que Elementor no tapa por su cuenta.
   ========================================================= */

/* 1 · Sin JavaScript el contenido quedaría oculto para siempre. */
@media (scripting: none) {
	.elementor-invisible {
		visibility: visible !important;
	}
}

/* 2 · Elementor ignora prefers-reduced-motion. No hay ajuste para esto. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}

	.animated,
	.dr-home-slider .swiper-slide-active .elementor-slide-heading,
	.dr-home-slider .swiper-slide-active .elementor-slide-description,
	.dr-home-slider .swiper-slide-active .swiper-slide-contents::before {
		animation-name: none !important;
		animation-duration: 0.01ms !important;
	}

	.dr-home-slider .swiper-slide .elementor-slide-heading,
	.dr-home-slider .swiper-slide .elementor-slide-description {
		transition: none !important;
	}
}

/* Las animaciones laterales (fadeInRight/Left) parten del elemento desplazado
   fuera de la caja y abren barra horizontal. clip, no hidden: con hidden el
   cuerpo se vuelve contenedor de desplazamiento y rompe position:sticky. */
body {
	overflow-x: clip;
}

/* texto solo para lectores de pantalla / SEO */
.dr-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}
/* =========================================================
   HOME - Testimonios (tarjetas superpuestas al slider)
   ========================================================= */
.dr-home-testimonials {
	position: relative;
	z-index: 4;
}

/* 1230 px de caja y 71,5 px de respiro a cada lado dejan las tres tarjetas en
   349 px, que es la medida del original. El selector sube de especificidad a
   propósito: Elementor emite
   `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`, que son
   cuatro clases, y con menos el carrusel se iba a 1560 px. */
.elementor.elementor .dr-home-testimonials > .dr-testimonials-carousel.elementor-widget {
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 71.5px;
	width: 100%;
}

.dr-testimonial {
	height: 100%;
	background: #fff;
}

/* La firma va en una caja de alto fijo, recortada y con filete gris, como en el
   original. Sin el alto fijo la firma flota sobre el fondo y queda un hueco
   visible antes del texto; ni el recorte ni el filete se pueden pedir desde los
   ajustes del widget de imagen. */
.dr-testimonial__sign {
	height: 227px;
	overflow: hidden;
	border: 1px solid #ccc;
	display: flex;
}

.dr-testimonial__sign .elementor-widget-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dr-testimonial__sign img {
	width: 107.5%;
	max-width: none;
	flex-shrink: 0;
	height: auto;
	display: block;
}

.dr-testimonial__text {
	background: rgba(84, 191, 217, 0.8);
	color: #fff;
	padding: 10px 5% 0;
	flex-grow: 1;
	font-size: 16px;
	line-height: 21px;
	min-height: 140px;
}

.dr-testimonial__text p {
	margin-bottom: 16px;
}

.dr-testimonial__more {
	background: var(--dr-blue);
	text-align: right;
	padding: 5px 5%;
}

.dr-testimonial__more .elementor-heading-title,
.dr-testimonial__more a {
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
}

/* Círculo de 53 px en cian al 60 %, con la punta blanca: es el SVG del
   original (ArrowIzq/ArrowDer), redibujado con los ajustes que hay. */
.dr-testimonials-carousel .elementor-swiper-button {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: rgba(0, 191, 239, 0.6);
	color: #fff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.dr-testimonials-carousel .elementor-swiper-button:hover {
	background: rgba(0, 191, 239, 0.85);
}

.dr-testimonials-carousel .elementor-swiper-button svg {
	fill: #fff;
	width: 20px;
	height: 20px;
}

.dr-testimonials-carousel .elementor-swiper-button-prev {
	left: 0;
}

.dr-testimonials-carousel .elementor-swiper-button-next {
	right: 0;
}

/* En tableta y móvil el respiro de 71,5 px se come la tarjeta; se reduce.
   El selector repite la especificidad de la regla de arriba a propósito: con
   menos clases no le ganaría. */
@media (max-width: 1024px) {
	.elementor.elementor .dr-home-testimonials > .dr-testimonials-carousel.elementor-widget {
		padding: 0 60px;
	}
}

@media (max-width: 767px) {
	.elementor.elementor .dr-home-testimonials > .dr-testimonials-carousel.elementor-widget {
		padding: 0 40px;
	}

	.dr-testimonials-carousel .elementor-swiper-button {
		width: 36px;
		height: 36px;
	}
}
/* =========================================================
   HOME - Ortodoncista certificada
   ========================================================= */
/* El original encierra esta sección en 1230 px, no en el ancho del Kit. */
.dr-home-doctor {
	--content-width: 1230px;
}

.dr-doctor__icon img {
	width: 56px;
	max-width: 56px;
	border-radius: 50%;
}

/* El color y la tipografía del título y del subtítulo viven en los ajustes de
   sus widgets (38,67 px / 700 y 26,67 px / 500, medidos del original); aquí
   solo queda la colocación, que ningún ajuste resuelve. */

/* el subtítulo queda alineado bajo el título, a la derecha del ícono */
.dr-doctor__sub {
	margin-top: -16px;
	padding-left: 70px;
}

.dr-doctor__bio {
	text-align: left;
	color: var(--dr-gray);
}

/* Foto de la doctora: 270 x 270 recortada y a 60 px del borde derecho de la
   sección, medido del original (col-md-4 con margin 0 55px más el canal de la
   rejilla). Lleva regla propia y no la clase genérica .dr-circle-img, que la
   dejaba en 320 px. */
.dr-doctor__photo img {
	margin-right: 60px;
	width: 270px;
	max-width: 270px;
	height: 270px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* La misma elipse del original (220x25), que en la portada también la lleva.
   Aquí hay que descontar los 60 px de margen derecho de la foto para que quede
   centrada bajo ella y no bajo la caja. */
.dr-doctor__photo {
	position: relative;
}

.dr-doctor__photo::after {
	content: "";
	position: absolute;
	left: calc(50% - 30px);
	/* Mismo -12 que en .dr-float-img: el 8 del original cuenta sobre un contenedor
	   20 px más alto que la foto. */
	bottom: -12px;
	z-index: -1;
	width: 220px;
	height: 25px;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse 50% 50% at 50% 50%,
		rgba(0, 0, 0, 0.5) 20%,
		transparent 90%
	);
	pointer-events: none;
}

.dr-doctor-carousel .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: var(--dr-red);
	opacity: 1;
}

.dr-doctor-carousel .swiper-pagination-bullet-active {
	background: #000;
}

@media (max-width: 767px) {
	.dr-doctor__sub {
		margin-top: 0;
		padding-left: 0;
	}

	.dr-doctor__sub .elementor-heading-title {
		line-height: 1.3;
	}

	.dr-doctor__photo img {
		margin-right: 0;
		width: 240px;
		max-width: 240px;
		height: 240px;
	}

	/* Sin el margen derecho la caja del widget mide ya lo mismo que la foto,
	   asi que el desplazamiento de 30 px que compensa ese margen en escritorio
	   deja la elipse torcida hacia la izquierda. Aqui va centrada, y el ancho
	   mantiene la proporcion del original (220 de 270 = 81,5 %). */
	.dr-doctor__photo::after {
		left: 50%;
		width: 196px;
	}

	.dr-section-title .elementor-heading-title {
		font-size: 28px;
	}
}

/* =========================================================
   PÁGINAS INTERNAS - banner, contenido e imágenes
   ========================================================= */
/* El original encierra el contenido de las internas en 1140 px (el contenedor
   de Bootstrap a este ancho): su texto empieza en x=230 sobre 1600. El Kit está
   en 1170 y se queda así a propósito — cambiarlo obligaría a regenerar el CSS
   de todo el sitio y arrastraría también al pie y al blog, que no lo piden.
   Estas dos clases ya estaban en los contenedores de las 75 internas. */
.dr-content,
.dr-post {
	--content-width: 1140px;
}

/* El original muestra el banner a su proporción natural (1600 x 597 en las
   cuatro páginas que lo llevan). El tope de 520 px con object-fit lo recortaba
   77 px por abajo. */
.dr-banner__img img {
	width: 100%;
	height: auto;
	display: block;
}

/* El original usa tres anchos de contenido, medidos a 1600 px:
   1140 general (x=230), 912 en las páginas de tratamiento (x=344) y 800 en
   legales, formularios y suscripción (x=400). El general vive en .dr-content;
   estos dos son las excepciones. */
/* El original NO usa un ancho fijo aquí: es una columna de Bootstrap, o sea un
   PORCENTAJE del ancho de ventana. Medido en /en/contact-us a tres anchos:
   496 px a 992 (50 %), 640 a 1280 (50 %) y 864 a 1728 (50 %). Nuestro 800 px
   fijo salía de medir a 1600, donde el 50 % da exactamente 800: coincidía en ese
   ancho y en ninguno más. Es el mismo error que teníamos en el alto del banner.
   Por debajo de 992 px el original ensancha la columna (81 % a 768), así que
   aquí se suelta y manda el relleno del contenedor. */
.dr-content--narrow > .e-con-inner {
	max-width: 50vw;
}

@media (max-width: 991px) {
	.dr-content--narrow > .e-con-inner {
		max-width: 100%;
	}
}

.dr-content--tratamiento > .e-con-inner {
	max-width: 912px;
}

/* El peso ya NO se fija aquí: el original pone los títulos de página en 500, no
   en 700 (medido el 2026-10-21 en /en/about-us y /en/privacy-policy, 40 px / 500
   / interlínea 48 en las dos), y eso es exactamente lo que da el Kit para h1. */
.dr-page-title .elementor-heading-title {
	margin-bottom: 10px;
}

.dr-page-title--left .elementor-heading-title {
	text-align: left;
}

/* El original pone TODO el texto de contenido en #212529, nunca en gris.
   Comprobado en cuatro páginas de tipos distintos --skeletal-anchorage,
   dental-treatment-children-miami, we-speak-spanish e invisalign-treatment--,
   las cuatro con rgb(33,37,41). El gris del Kit es el color del CUERPO del
   documento, no el del contenido: lo teníamos al revés, y por eso en rondas
   anteriores se fue parcheando página a página con .dr-oscuro en vez de corregir
   el valor por omisión. */
.dr-content-text,
.dr-content-text li {
	color: var(--dr-dark);
	text-align: left;
}

/* La alineación varía por página en el original, y la teníamos al revés. El
   original la guarda como estilo en línea en el contenido: donde no hay nada,
   manda el valor por omisión del navegador, que es a la izquierda. Contadas las
   73 páginas con equivalente: **59 a la izquierda y 14 justificadas**, y las 14
   son las mismas siete en cada idioma (niños, About Us, adultos, adolescentes,
   política de privacidad, Invisalign y FAQ). Así que el valor por omisión es a la
   izquierda y la excepción lleva clase. */
/* OJO al contarlas: Drupal guarda la alineación de dos maneras, en línea
   (`style="text-align:justify"`) y por CLASE (`rtejustify`). La primera pasada
   contó solo las de línea y dejó fuera ocho páginas, entre ellas el aviso de
   privacidad, que tiene 28 párrafos con `rtejustify`. Contando las dos: **22
   justificadas y 51 a la izquierda**. La clase va suelta, y no pegada a
   .dr-content-text, para que sirva en cualquier bloque de texto. */
.dr-justificado,
.dr-justificado p,
.dr-justificado li,
.dr-content-text.dr-justificado,
.dr-content-text.dr-justificado li {
	text-align: justify;
}

/* .dr-oscuro y .dr-legal ya no necesitan regla: el negro y la alineación a la
   izquierda son el valor por omisión desde que se corrigió la regla de arriba.
   Las clases siguen puestas en algunos widgets y no estorban. */

/* Entradilla en cian sobre el formulario de Free Consult: 20 px / 500,
   justificada, medida del original. */
.dr-lead {
	color: var(--dr-cyan);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	text-align: justify;
}

/* 40 px de sangría, medidos del original (texto en x=230, viñetas en x=270). */
.dr-content-text ul,
.dr-content-text ol {
	padding-left: 40px;
	margin-bottom: 1em;
}

.dr-content-text li p {
	margin: 0;
}

.dr-content-heading .elementor-heading-title {
	color: var(--dr-cyan);
}

.dr-content-logo img {
	max-width: 400px;
	width: 100%;
}

.dr-content-img img {
	max-width: 100%;
	height: auto;
}

/* Board Certified: el original muestra la foto TAL CUAL --rectangular, a su
   tamaño natural (elaine_deroode_6.jpg, 400x350), sin recorte redondo y sin
   sombra--. Es el mismo archivo que usamos nosotros, pero aquí lo recortábamos a
   un círculo de 320 con object-fit: cover, que además se comía parte de la foto.
   Comprobado en /en/board-certified-orthodontist. */
.dr-circle-img img {
	max-width: 400px;
	width: 100%;
	height: auto;
}

/* LA SOMBRA DE LAS FOTOS REDONDAS.
   El original NO usa box-shadow ni filter: drop-shadow. Comprobado a fondo: ni
   la imagen ni ninguno de sus ancestros llevan sombra, y el PNG tiene los bordes
   transparentes limpios (muestreados a 0 de alfa). Lo que hace es pintar un div
   aparte, debajo, con un degradado radial. Su estilo, literal:

       background: radial-gradient(50% 50%, rgba(0,0,0,0.5) 20%, transparent 90%);
       width: 220px; height: 25px; position: absolute; bottom: 8px; left: 40px;

   sobre un contenedor de 300 px de ancho. O sea: una ELIPSE PLANA del 73,3 % del
   ancho, centrada, que asoma 12 px por debajo de la foto. Un drop-shadow no vale
   para esto: sigue el contorno del círculo y se ve como un halo alrededor, no
   como una sombra apoyada en el suelo. Era lo que teníamos y por eso no
   coincidía. El degradado va en sintaxis moderna; la del original es la antigua
   y Chrome la acepta, pero no todos los navegadores. */
/* Solo .dr-float-img: la elipse es de las fotos REDONDAS de tratamientos y About
   Us. Board Certified no la lleva, porque su foto en el original es rectangular
   y sin sombra. */
.dr-float-img {
	position: relative;
}

.dr-float-img::after {
	content: "";
	position: absolute;
	/* OJO con el desplazamiento vertical: en el original la elipse va a
	   `bottom: 8px`, pero su contenedor (.about-circle) mide 283 px y la foto 263,
	   o sea que es 20 px MÁS ALTO que la imagen. Esos 8 px cuentan desde el fondo
	   del contenedor, así que la elipse acaba 12 px POR DEBAJO de la foto. Nuestro
	   envoltorio mide lo mismo que la imagen, de modo que copiar el 8 tal cual la
	   suba 20 px y la pinta encima de la cara. De ahí el -12. */
	bottom: -12px;
	/* Y detrás de la foto, no delante. */
	z-index: -1;
	left: 50%;
	width: 73.3%;
	height: 25px;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse 50% 50% at 50% 50%,
		rgba(0, 0, 0, 0.6) 20%,
		transparent 90%
	);
	pointer-events: none;
}

.dr-waze img {
	width: 48px;
}

.dr-map iframe {
	display: block;
	height: 450px !important; /* el widget solo acepta proporción, no altura */
}

/* El original sirve el vídeo con height="700px" FIJO y ancho al 100 %, no en
   16:9. Medido en /en/video-0 a dos anchos: 960x700 a 992 y 1140x700 a 1280 --el
   ancho cambia y el alto no--. El widget de Elementor lo pinta en proporción
   16:9, que a 1280 daba 641 px de alto en vez de 700, y la proporción vive en el
   envoltorio, no en el <video>. Por debajo de 992 se vuelve a 16:9, porque
   700 px fijos se comen la pantalla de un móvil. */
.dr-video .elementor-wrapper {
	aspect-ratio: auto;
	height: 700px;
}

.dr-video video,
.dr-video iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 991px) {
	.dr-video .elementor-wrapper {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

.dr-text-center {
	text-align: center;
}

.dr-especialidad__sub .elementor-heading-title {
	color: #B3B3B3;
	font-weight: 500;
}

/* Las páginas de testimonio usan 1280 px, no los 1140 del resto de internas:
   el original las monta en dos columnas de 640. Va con :has() porque la clase
   que las distingue está en un hijo, no en el contenedor de contenido. La fila
   se nombra aparte porque Elementor fija --content-width en CADA contenedor
   con caja, así que el hijo no hereda la del padre. */
/* 80 % del ancho de ventana, no 1280 px. En el original la ficha del testimonio
   es una caja al 80 % con dos columnas del 40 % -- texto a la izquierda, firma a
   la derecha desde el 50 % --. Medido a 1280: caja x128 w1024, texto x128 w512,
   firma x640 w512. A 1600 el 80 % da exactamente 1280 y el 40 % da 640, que son
   los píxeles fijos que había aquí: coincidían a ese ancho y a ninguno más. */
.dr-content:has(.dr-testimonial-page),
.dr-testimonial-page {
	--content-width: 80vw;
}

.dr-testimonial-page__text {
	color: var(--dr-dark);
	text-align: center;
}

.dr-testimonial-page__sign img {
	width: 250px;
	height: 250px;
	object-fit: cover;
}

/* Botón regresar (shortcode [back]) */
.dr-back {
	margin-top: 10px;
}

/* FAQ (toggle): barras azules redondeadas y respuesta gris, como el original */
/* Misma historia que la columna de los formularios, con otro porcentaje: las
   barras del original miden 744 px a 992 de ancho, o sea el 75 %. Nuestro
   1080 px fijo coincidía a 1440 y en ningún otro ancho. */
/* Cinco clases porque Elementor emite
   `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`, que lleva
   cuatro y gana a un `.dr-faq` pelado. */
.elementor.elementor .dr-content .dr-faq.elementor-widget {
	max-width: 75vw;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.elementor.elementor .dr-content .dr-faq.elementor-widget {
		max-width: 100%;
	}
}

/* La barra azul ES el propio elemento de encabezado: Elementor pinta la etiqueta
   de `title_html_tag` con la clase .elementor-tab-title, y su alto sale del
   relleno más la interlínea de esa etiqueta, no del enlace de dentro (al que va
   la tipografía del widget, 17,6 px). Por eso, al subir el título de h3 a h2 para
   no saltar un nivel, la barra crecía de 46 a 50 px. Se fija aquí para que la
   etiqueta no decida el alto. El original mide 40 px: 8,8 de relleno arriba y
   abajo más 22,88 de interlínea. */
.dr-faq .elementor-tab-title {
	border-radius: 10px;
	font-size: 17.6px;
	font-weight: 400;
	line-height: 22.88px;
}

.dr-faq .elementor-tab-title a {
	color: #fff !important;
}

.dr-faq .elementor-tab-content {
	border-radius: 10px;
	margin-top: 2px;
}

.dr-faq .elementor-tab-content ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* =========================================================
   FORMULARIOS (clase formsw + estados de error)
   ========================================================= */
/* caja azul de introducción, superpuesta al banner como en el original */
.dr-form-intro {
	position: relative;
	z-index: 2;
}

.dr-form-intro__text {
	max-width: 937px;
	margin: -51px auto 0;
	background: var(--dr-blue);
	border-radius: 5px;
	color: #fff;
	padding: 17px 30px;
	font-size: 20px;
	line-height: 24px;
}

.dr-form-intro__text p {
	margin: 0;
}

@media (max-width: 767px) {
	.dr-form-intro__text {
		margin-top: -30px;
		font-size: 16px;
		padding: 14px 18px;
	}
}

/* Banner con título (Request / Free Consult / Contact).
   El original NO lo centra: lo mete en un bloque colocado a left:41 % con
   ancho 42 % y el texto centrado dentro, así que su centro cae al 62 % del
   ancho, no al 50 %. Medido igual en /en/contact-us y /en/free-consult.

   Tipografía y sombra medidas en el original a 1024 y a 1600 px (idénticas en
   ambos, no escalan): Montserrat 700, 47 px, interlineado 70 px fijo y
   text-shadow 1px 1px 0 #000 -- negro opaco y con desplazamiento también en
   horizontal. La sombra NO es la del héroe de la portada, que sí es la suave
   rgba(0,0,0,.5) 0 1px 0 (comprobado: ahí coincidíamos ya). Con la sombra al
   50 % y sin desplazar el texto se perdía sobre las fotos claras. */
.dr-banner__title .elementor-heading-title {
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 47px;
	font-weight: 700;
	line-height: 70px;
	text-shadow: 1px 1px 0 #000;
}

/* ALTO DEL BANNER. El original no fija ningún alto: el banner es un <img> de
   1600x597 servido al 100 % de ancho, así que su alto es PROPORCIONAL al de la
   ventana -- ancho x 597/1600 -- y no cambia de imagen en ningún corte.
   Comprobado al centésimo a 390 px (145,52), 1024 (382,08), 1280 (477,59) y
   1600 (597). Nosotros lo teníamos clavado en 597 px, con cortes de 360 y 240,
   así que coincidía SOLO a 1600 px exactos: a 1280 sobraban 119 px de alto y a
   1920 faltaban otros tantos. Con la proporción aquí coincide a cualquier ancho,
   y el fondo en cover no recorta nada porque la caja tiene ya la razón de la
   imagen. */
.dr-banner {
	aspect-ratio: 1600 / 597;
	position: relative;
	min-height: 0;
}

/* POSICIÓN DEL TÍTULO. El original lo saca del flujo: position absolute con
   top 30 %, left 41 % y width 42 %, y el texto centrado dentro de ese bloque.
   De ahí que su centro caiga al 62 % horizontal, y también que el centro
   vertical NO sea un porcentaje fijo (35,86 % a 1600 px y 37,33 % a 1280): el
   30 % cuenta desde el borde superior y el bloque mide 70 px, que no escalan.
   Por eso un relleno inferior fijo no podía replicarlo a dos anchos a la vez,
   que es lo que se intentó en las rondas anteriores. */
.dr-banner .dr-banner__title {
	position: absolute;
	top: 30%;
	left: 41%;
	width: 42%;
	margin: 0;
}

/* En móvil el original mueve el bloque a 5 % de borde y 90 % de ancho, y baja el
   título a 20 px con interlineado 20: el banner solo mide 145 px de alto a 390 px
   de ancho, donde 47 px no cabrían. */
@media (max-width: 767px) {
	.dr-banner .dr-banner__title {
		left: 5%;
		width: 90%;
	}

	.dr-banner__title .elementor-heading-title {
		font-size: 20px;
		line-height: 20px;
	}
}
/* La caja del formulario llena la columna; quien fija el ancho es la columna
   (.dr-content--narrow, al 50 % del ancho de ventana). Antes tenía 760 px fijos,
   que la estrechaban por dentro y la descuadraban a cualquier ancho que no fuera
   1600. */
.dr-form-box > .e-con-inner,
.dr-form-box {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* El historial médico va en 800 px, igual que el resto de formularios del
   original: una sola columna, no la caja ancha que tenía. */
/* El historial médico no va dentro de una columna estrecha, así que el
   porcentaje lo pone la propia caja. El original lo tiene igual que los demás
   formularios: 496 px a 992 de ancho, el 50 %. */
.dr-form-box--wide,
.dr-form-box--wide > .e-con-inner {
	max-width: 50vw;
}

@media (max-width: 991px) {
	.dr-form-box--wide,
	.dr-form-box--wide > .e-con-inner {
		max-width: 100%;
	}
}

.dr-form .elementor-field-group .elementor-select-wrapper select {
	color: var(--dr-dark);
}

/* flecha roja de los desplegables, como el triángulo del original */
.dr-form .elementor-select-wrapper .select-caret-down-wrapper {
	display: none;
}

.dr-form .elementor-select-wrapper::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -3px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--dr-red);
	pointer-events: none;
}

.dr-form .elementor-field-group select.elementor-field {
	padding-left: 20px;
	padding-right: 34px;
}

.dr-form--page .elementor-field-textual {
	min-height: 45px;
	padding-left: 20px;
	padding-right: 20px;
}

.dr-form--page textarea.elementor-field-textual {
	min-height: 131px;
}

.dr-form--page .sw-floating-label {
	left: 20px;
}

/* boletín del footer: sobre en el campo email como en el original */
.dr-form--newsletter .elementor-field-type-email input {
	padding-left: 48px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='1'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 24px;
}

.dr-form--newsletter .elementor-field-type-email .sw-floating-label {
	left: 48px;
}

/* Nombre y apellido con icono, al mismo trazo que el sobre del correo: 24 px,
   sin relleno y 1,6 de grosor, para que no se note que son de familias
   distintas. Va la MISMA silueta de persona en los dos campos a propósito:
   nombre y apellido son el mismo dato, y dos iconos distintos harían pensar
   que piden cosas distintas. */
.dr-form--newsletter .elementor-field-group-name input,
.dr-form--newsletter .elementor-field-group-last_name input {
	padding-left: 48px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 24px;
}

.dr-form--newsletter .elementor-field-group-name .sw-floating-label,
.dr-form--newsletter .elementor-field-group-last_name .sw-floating-label {
	left: 48px;
}

.dr-form--newsletter .elementor-field-group {
	margin-bottom: 0;
}

/* El botón del boletín pasa de negro a rojo al pasar el ratón, igual que el
   del original (input.form-submit:hover{background:#E51937}). */
.dr-form--newsletter .elementor-button {
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.dr-form--newsletter .elementor-button:hover,
.dr-form--newsletter .elementor-button:focus-visible {
	background-color: var(--dr-red);
	opacity: 0.9;
}

.dr-form .elementor-field-textual:focus {
	box-shadow: 0 0 0 2px rgba(84, 191, 217, 0.35);
}

/* etiqueta flotante (formsw) ajustada a la altura de los campos de Elementor */
.dr-form .sw-floating-label {
	color: #6b6b6b;
}

/* teléfono internacional: el selector de país no tapa la etiqueta flotante */
.dr-form .iti {
	width: 100%;
}

/* teléfono internacional: el prefijo (+1, +502...) cambia de ancho, la etiqueta queda siempre arriba */
.dr-form .sw-floating-field:has(.iti) > .sw-floating-label {
	top: 0.3rem;
	left: 12px;
	font-size: 0.72em;
	opacity: 0.82;
	transform: none;
}

/* fecha y hora: la máscara nativa siempre está visible, la etiqueta queda arriba */
.dr-form .sw-floating-field:has(input[type="date"]) .sw-floating-label,
.dr-form .sw-floating-field:has(input[type="time"]) .sw-floating-label {
	top: 0.46rem;
	font-size: 0.72em;
	opacity: 0.82;
	transform: translateY(0);
}

/* estados de error */
.dr-form .elementor-field-group.elementor-error .elementor-field,
.dr-form .elementor-field-group.elementor-error select,
.dr-form .elementor-field-textual:user-invalid {
	border-color: var(--dr-red) !important;
	background-color: #fff5f6 !important;
}

.dr-form .elementor-field-group .elementor-message,
.dr-form .elementor-field-group span.elementor-message-danger {
	color: var(--dr-red);
	font-size: 13px;
	margin-top: 4px;
}

.dr-form .elementor-message.elementor-message-danger {
	color: var(--dr-red);
	background: #fff5f6;
	border-left: 3px solid var(--dr-red);
	padding: 10px 14px;
}

.dr-form .elementor-message.elementor-message-success {
	color: #1e7e34;
	background: #effaf1;
	border-left: 3px solid #1e7e34;
	padding: 10px 14px;
}

.dr-form-note {
	text-align: center;
	margin-top: 20px;
}

/* Historial médico: etiquetas visibles, sin placeholder. En el original son
   16 px en negrita y del color del texto, y los encabezados de apartado no van
   en cian sino en el mismo negro y peso normal. */
.dr-form--medical .elementor-field-label {
	color: var(--dr-dark);
	font-weight: 700;
	font-size: 16px;
}

.dr-form--medical .dr-med-section {
	color: var(--dr-dark);
	font-size: 16px;
	font-weight: 400;
	margin: 26px 0 0;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--dr-light);
	width: 100%;
}

.dr-form--medical .dr-med-legal {
	font-size: 13px;
	line-height: 1.5;
	text-align: justify;
	background: var(--dr-light);
	padding: 16px 18px;
}

.dr-form--medical .elementor-field-type-radio .elementor-field-subgroup {
	gap: 4px 14px;
}

/* =========================================================
   FOOTER (plantillas Footer EN / Footer ES)
   ========================================================= */
/* Aquí solo el color. El tamaño y la interlínea que había (35 px / 42) estaban
   muertos: el widget usa la tipografía global "band" del Kit, cuyo CSS lleva
   cuatro clases y gana a este selector, que lleva dos. De ahí que se viera 36 px
   y no 35, y que la nota del pendiente 4 dijera "un píxel" durante días. El valor
   real vive en el Kit: 32 px / 500 / 1.2 em, medido en el original. */
.dr-footer__band-title .elementor-heading-title {
	color: #000;
}

.dr-footer__band-text {
	color: #6D6B6B;
	font-size: 17.33px;
	line-height: 26px;
}

.dr-footer__band-text p {
	margin: 0;
}

.dr-footer__follow .elementor-heading-title {
	color: #5F5F5E;
	font-size: 26px;
	font-weight: 600;
	white-space: nowrap;
}

.dr-footer__social a {
	transition: background-color 0.2s ease;
}

.dr-footer__social a:hover i,
.dr-footer__social a:hover svg {
	color: var(--dr-red) !important;
	fill: var(--dr-red) !important;
}

.dr-footer__info,
.dr-footer__copy {
	font-size: 15px;
	line-height: 22.5px;
	color: var(--dr-gray);
}

.dr-footer__bottom {
	margin-top: 30px;
}

.dr-footer__info p,
.dr-footer__copy p {
	margin: 0;
}

.dr-footer__info a {
	color: var(--dr-gray);
}

.dr-footer__info a:hover {
	color: var(--dr-red);
}

.dr-footer__power {
	text-align: center;
}

.dr-footer__power .sw-powered-by {
	font-size: 12px;
}

/* =========================================================
   BLOG - listado, entrada y barra lateral
   ========================================================= */
/* El listado del blog va al 90 % del ancho de ventana, no a 1440 px: medido en
   el original a 1280, donde la fila mide 1152 (90 %) con tres tarjetas de ~30 %.
   A 1600 el 90 % da exactamente 1440, que es el valor fijo que había aquí --la
   misma coincidencia de un solo ancho que teníamos en el banner, los formularios
   y los testimonios--. Igual que en testimonios hay que nombrar también al hijo,
   porque Elementor fija --content-width en cada contenedor con caja. */
.dr-content:has(.dr-blog-grid),
.dr-blog-grid {
	--content-width: 90vw;
}

/* Tarjeta del listado: borde fino y relleno de 20 px. La imagen va dentro de
   ese relleno, sin banda gris ni filete bajo ella: medido del original, que no
   los lleva. */
.dr-blog-grid .elementor-post {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 4px;
	overflow: hidden;
}

.dr-blog-grid .elementor-post__thumbnail__link {
	padding: 20px 20px 0;
	margin-bottom: 0 !important;
}

.dr-blog-grid .elementor-post__text {
	padding: 20px;
}

.dr-blog-grid .elementor-post__title {
	margin-bottom: 12px;
}

.dr-blog-grid .elementor-post__excerpt p {
	line-height: 24px;
}

.dr-blog-grid .elementor-post__read-more {
	font-size: 16px;
	font-weight: 400;
	margin-top: 20px;
}
.dr-post__title .elementor-heading-title {
	color: var(--dr-dark);
}

.dr-post__image,
.dr-post__image .elementor-widget-container {
	text-align: center !important;
}

.dr-post__image img {
	width: 462px;
	max-width: 100%;
	height: auto;
}

.dr-post__content,
.dr-post__content .dr-content-text {
	color: var(--dr-dark);
	text-align: left;
}

.dr-post__sidebar {
	align-self: flex-start;
	position: sticky;
	top: 110px;
}

.dr-sidebar__title .elementor-heading-title {
	color: var(--dr-dark);
	font-size: 28px;
	font-weight: 500;
}

.dr-form--blog .elementor-field-textual {
	background: #fff !important;
	border: 1px solid #C2C2C2 !important;
	border-radius: 5px !important;
	min-height: 52px;
	font-size: 18px;
}

.dr-post__more .elementor-post__title a {
	color: var(--dr-dark);
	font-size: 14px;
	font-weight: 500;
}

.dr-post__more .elementor-post__title a:hover {
	color: var(--dr-red);
}

@media (max-width: 1024px) {
	.dr-post__sidebar {
		position: static;
	}
}

/* =========================================================
   404 y PÁGINA DE GRACIAS
   ========================================================= */
.dr-404__code .elementor-heading-title {
	font-size: 120px;
	font-weight: 900;
	line-height: 1;
}

.dr-404__text,
.dr-thanks .dr-content-text {
	max-width: 620px;
	margin: 0 auto;
}

.dr-thanks__icon img {
	width: 90px;
	border-radius: 50%;
}

.dr-btn--red .elementor-button {
	background: var(--dr-red);
}

.dr-btn--red .elementor-button:hover {
	background: #000;
}

/* =========================================================
   PÁGINAS INTERNAS - ajustes medidos sobre el sitio original
   ========================================================= */
/* Solo el tamaño. El peso lo pone el Kit (500, el del original); hace falta
   nombrar el tamaño porque el Kit da 28 px al h3 pero 32 al h2, y aquí los dos
   van a 28 -- es el valor del original para "Dr. Elaine deRoode". */
.dr-content-heading h3.elementor-heading-title,
.dr-content-heading h2.elementor-heading-title {
	font-size: 28px;
}

/* Subapartados: las tres de About Us y las cinco de la política de cookies. El
   original los pone en 24 px y peso 500. Llevaban h4, que saltaba un nivel desde
   el h1 de la página, así que ahora van en su nivel correcto -- h3 en About Us,
   h2 en la política -- y el tamaño lo fija esta clase y no la etiqueta: Retainer
   Elite Care usa h3 al tamaño grande, de modo que la misma etiqueta tendría que
   verse de dos formas. La clase va doblada porque el selector de arriba lleva un
   elemento y, a igualdad de clases, ganaría. */
.dr-content-heading.dr-content-heading--sub .elementor-heading-title,
.dr-content-heading h4.elementor-heading-title {
	font-weight: 500;
	font-size: 24px;
}

/* El color de los <li> lo pone ya la regla base de .dr-content-text, que los
   nombra. Aquí estaba el gris que contradecía al original. */

/* imagen circular flotando a la derecha y el texto alrededor (About, tratamientos) */
.dr-content--float > .e-con-inner {
	display: block;
}

.dr-content--float > .e-con-inner::after {
	content: "";
	display: table;
	clear: both;
}

/* Cuatro clases: Elementor emite `.e-con .elementor-widget.elementor-widget
   {margin:0}`, que lleva tres y anula cualquier margen puesto con dos. */
.elementor .dr-content--float .dr-float-img.elementor-widget {
	float: right;
	width: 300px;
	margin: 0 10px 20px 20px;
}

/* Solo el ancho. La sombra la pone el ::after de .dr-float-img, que replica la
   elipse del original (ver la regla de .dr-float-img::after). Aquí hubo un
   drop-shadow que seguía el contorno del círculo y no era lo que hace el
   original. */
.dr-content--float .dr-float-img img {
	max-width: 300px;
}

/* Más aire entre el título de la página y el texto en las páginas que llevan
   foto flotando (tratamientos y About). El original deja solo 8 px y queda
   apretado; a petición del cliente se sube. */
.dr-content:has(.dr-float-img) .dr-page-title .elementor-heading-title {
	margin-bottom: 28px;
}

.dr-content--float > .e-con-inner > .elementor-element:not(.dr-float-img) {
	margin-bottom: 16px;
}

.dr-content--float .dr-waze,
.dr-content--float .dr-map,
.dr-content--float .dr-video {
	clear: both;
}

.dr-map .elementor-custom-embed {
	max-width: 600px;
	margin: 0 auto;
}


@media (max-width: 767px) {
	/* Sin flotar, la foto queda encima del texto y 20 px no bastan: además la
	   elipse de la sombra asoma 12 px por debajo, así que el hueco real se
	   quedaba en 8. Con 48 el texto respira. */
	.elementor .dr-content--float .dr-float-img.elementor-widget {
		float: none;
		margin: 0 auto 48px;
	}
}

/* botón regresar ([back]) con el estilo "Go Back" del original */
.dr-back .sw-back-button {
	background: #000;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-size: 17px;
	font-weight: 400;
	padding: 10px 14px;
	box-shadow: none;
}

.dr-back .sw-back-button:hover,
.dr-back .sw-back-button:focus {
	background: var(--dr-red);
	color: #fff;
	transform: none;
}

.dr-post__content + .dr-back,
.dr-post .dr-back {
	text-align: right;
}

/* En la página de gracias ese botón va al lado de uno de Elementor, y la pareja
   venía descuadrada: distinto tamaño de letra, relleno, radio y peso, y además
   el margen superior de `.dr-back` lo bajaba 6 px respecto al otro, porque el
   centrado de flex cuenta la caja con su margen. Aquí se iguala al botón de
   Elementor, que es el que manda en esa pareja; el estilo propio del [back] se
   queda para las páginas donde va solo. Tres clases para ganarle a las dos de
   `.dr-back .sw-back-button`. */
.dr-thanks .dr-back {
	margin-top: 0;
}

.dr-thanks .dr-back .sw-back-button {
	min-height: 0;
	padding: 12px 28px;
	border-radius: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 19.2px;
}
/* =========================================================
   POPUP DE ORTHOSCREENING
   ========================================================= */
/* Su modal se coloca a `top: 0` con 15 px de relleno, y la cruz de cerrar va
   20 px por encima de ese relleno. Con la barra de administración de WordPress
   por delante —32 px, o 46 en pantallas pequeñas— la cruz y el borde superior
   del marco quedan debajo de la barra. Solo lo ve quien tiene la sesión
   iniciada; el visitante no tiene barra y lo ve como en el original. Aun así,
   aquí se baja el modal lo que mide la barra y se le da aire a la cruz.
   Su hoja no lleva !important en estas reglas, así que basta con una clase más.
   dr-oscrpup-admin-bar */
body.admin-bar #oscrpup {
	top: 32px;
	height: calc(100% - 32px);
	padding-top: 30px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #oscrpup {
		top: 46px;
		height: calc(100% - 46px);
	}
}

/* =========================================================
   FIRMA DE LOS FORMULARIOS
   Medido del original: franja de pestañas de 40 px con borde negro de 1 px y
   las dos mitades al 50 %, lienzo de 190 px con el mismo borde, y el botón de
   borrar en negro sobre blanco. El lienzo lleva `touch-action: none` o el móvil
   se lleva el dedo a desplazar la página en vez de dibujar.
   ========================================================= */
.dr-firma {
	width: 100%;
}

.dr-firma__intro {
	margin: 0 0 15px;
	font-weight: 600;
	color: var(--dr-dark);
}

.dr-firma__tabs {
	display: flex;
	border: 1px solid #000;
}

/* Dos clases a propósito: el Kit emite su estilo de botón con `.elementor-kit-N
   button`, que es una clase y un elemento, y con una sola clase aquí la
   pestaña inactiva salía también en negro. */
.dr-firma .dr-firma__tab {
	flex: 1 1 50%;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	color: #000;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
}

.dr-firma .dr-firma__tab.is-active {
	background: #000;
	color: #fff;
}

.dr-firma__panel {
	display: none;
	padding-top: 16px;
}

.dr-firma__panel.is-active {
	display: block;
}

.dr-firma__label {
	display: block;
	margin-bottom: 6px;
	color: var(--dr-dark);
	font-size: 16px;
	font-weight: 700;
}

.dr-firma__marco {
	border: 1px solid #000;
	line-height: 0;
}

.dr-firma__canvas {
	display: block;
	width: 100%;
	height: 190px;
	touch-action: none;
	cursor: crosshair;
}

.dr-firma .dr-firma__limpiar {
	margin-top: 16px;
	padding: 10px 7px;
	border: 0;
	background: #000;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
}

.dr-firma .dr-firma__limpiar:hover,
.dr-firma .dr-firma__limpiar:focus-visible {
	background: var(--dr-red);
}

/* El campo del nombre legal lo mueve el JS dentro de la segunda pestaña; aquí
   solo se le quita el margen que Elementor le da como campo suelto. */
.dr-firma__panel .elementor-field-group {
	padding: 0;
	width: 100%;
}

/* Aviso cuando se envía sin firmar ni escribir el nombre. */
.dr-firma--error .dr-firma__marco,
.dr-firma--error .dr-firma__tabs {
	border-color: var(--dr-red);
}

.dr-firma--error .dr-firma__intro {
	color: var(--dr-red);
}

@media (max-width: 767px) {
	.dr-firma .dr-firma__tab {
		font-size: 14px;
	}

	.dr-firma__canvas {
		height: 160px;
	}
}

/* =========================================================
   PROPUESTA DE ESTILO DE FORMULARIOS  (ronda 33)
   ---------------------------------------------------------
   TODO el rediseño de los formularios vive dentro de este
   bloque. Para dejarlos como estaban basta con BORRAR EL
   BLOQUE ENTERO: no se ha tocado nada en Elementor ni en el
   HTML de las páginas, así que no hay nada más que deshacer.

   Por qué hay !important: Elementor escribe el estilo de cada
   formulario en el CSS de SU página, con selectores de cinco
   clases del tipo
     .elementor-146 .elementor-element.elementor-element-ae929c6
       .elementor-field-group .elementor-field
   que ganan a cualquier selector razonable de esta hoja. El
   !important se limita a las propiedades que ese CSS fija
   (fondo, borde, radio, color, tipografía y relleno del botón);
   el resto va sin él.
   ========================================================= */

/* ---- 1. Campos: caja blanca, borde suave y esquinas redondeadas ---- */
.dr-form .elementor-field-group .elementor-field-textual {
	background-color: #fff !important;
	border: 1px solid #dde1e4 !important;
	border-radius: 8px !important;
	color: var(--dr-dark) !important;
	min-height: 52px;
	padding-left: 18px;
	padding-right: 18px;
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dr-form .elementor-field-group textarea.elementor-field-textual {
	min-height: 132px;
	padding-top: 16px;
}

.dr-form .elementor-field-group .elementor-field-textual:hover {
	border-color: #bcc3c8 !important;
}

.dr-form .elementor-field-group .elementor-field-textual:focus {
	border-color: var(--dr-blue) !important;
	box-shadow: 0 0 0 3px rgba(84, 191, 217, 0.25);
	outline: none;
}

/* la flecha del desplegable se recoloca al nuevo relleno */
.dr-form .elementor-select-wrapper::after {
	right: 18px;
}

.dr-form .elementor-field-group select.elementor-field {
	padding-right: 38px;
}

/* etiqueta flotante (formsw): gris legible, no negro */
.dr-form .sw-floating-label {
	color: #878d93;
}

/* casillas y radios con el cian de la marca */
.dr-form .elementor-field-subgroup input[type="radio"],
.dr-form .elementor-field-subgroup input[type="checkbox"] {
	accent-color: var(--dr-blue);
	width: 16px;
	height: 16px;
	margin-right: 2px;
}

.dr-form .elementor-field-subgroup label {
	cursor: pointer;
}

/* ---- 2. Aire entre campos ---- */
.elementor .dr-form .elementor-form-fields-wrapper .elementor-field-group {
	padding-bottom: 18px !important;
}

.elementor .dr-form .elementor-form-fields-wrapper .elementor-field-group.e-form__buttons {
	padding-bottom: 0 !important;
}

/* ---- 3. Botón de enviar ---- */
.elementor .dr-form .elementor-field-type-submit.e-form__buttons .elementor-button[type="submit"] {
	background-color: var(--dr-dark) !important;
	border-radius: 8px !important;
	padding: 14px 42px !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.elementor .dr-form .elementor-field-type-submit.e-form__buttons .elementor-button[type="submit"]:hover,
.elementor .dr-form .elementor-field-type-submit.e-form__buttons .elementor-button[type="submit"]:focus-visible {
	background-color: var(--dr-red) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(229, 25, 55, 0.25);
}

/* ---- 4. El formulario como tarjeta ---- */
.dr-form--page.elementor-widget-form,
.dr-form--medical.elementor-widget-form {
	background: #fff;
	border: 1px solid #eceef0;
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(33, 37, 41, 0.07);
	padding: 36px 40px;
}

@media (max-width: 767px) {
	.dr-form--page.elementor-widget-form,
	.dr-form--medical.elementor-widget-form {
		border-radius: 12px;
		box-shadow: 0 8px 22px rgba(33, 37, 41, 0.06);
		padding: 24px 18px;
	}
}

/* ---- 5. Dos columnas a partir de tableta ----
   El historial médico tiene 107 campos: en una sola columna es
   una tira interminable, que es justo lo que se veía feo. Los
   campos cortos pasan a media caja; los textos largos, los
   desplegables (cuya primera opción es una pregunta entera que a
   media caja se cortaba), los encabezados de apartado, el aviso
   legal, la firma y el botón siguen a ancho completo. */
@media (min-width: 768px) {
	.dr-form--page .elementor-field-group.elementor-col-100:not(.elementor-field-type-textarea):not(.elementor-field-type-select):not(.elementor-field-type-html):not(.elementor-field-type-acceptance):not(.elementor-field-type-hidden):not(.e-form__buttons),
	.dr-form--medical .elementor-field-group.elementor-col-100:not(.elementor-field-type-textarea):not(.elementor-field-type-select):not(.elementor-field-type-html):not(.elementor-field-type-acceptance):not(.elementor-field-type-hidden):not(.e-form__buttons) {
		width: 50%;
	}

	/* Dos campos de la misma fila pueden tener etiquetas de una y
	   de dos líneas. Alineando el contenido al pie del grupo, las
	   cajas quedan a la misma altura en vez de escalonadas. */
	.dr-form--page .elementor-field-group:not(.e-form__buttons),
	.dr-form--medical .elementor-field-group:not(.e-form__buttons) {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-end;
	}
}

/* El grupo del campo oculto (la firma viaja en él) no pinta nada,
   pero como grupo ocupaba media fila y empujaba al campo siguiente
   a la columna de la derecha él solo. */
.dr-form .elementor-field-group.elementor-field-type-hidden {
	width: 0;
	padding: 0 !important;
}

/* ---- 6. Historial médico: jerarquía de apartados ----
   Sin tocar la tipografía: solo color, separación y el filete. */
.elementor .dr-form--medical .elementor-field-group > label.elementor-field-label {
	margin-bottom: 7px;
}

.dr-form--medical .dr-med-section {
	color: var(--dr-red);
	margin: 34px 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(229, 25, 55, 0.18);
}

.dr-form--medical .elementor-field-type-html:first-child .dr-med-section {
	margin-top: 0;
}

.dr-form--medical .dr-med-legal {
	background: #fafbfc;
	border: 1px solid #eceef0;
	border-radius: 10px;
	padding: 18px 20px;
}

.dr-form--medical .elementor-field-type-radio .elementor-field-subgroup {
	gap: 6px 20px;
}


/* La caja del historial se ensancha para que las dos columnas
   respiren; en el original era del 50 % del ancho de ventana, que
   con dos columnas deja los campos en 330 px. */
@media (min-width: 992px) {
	.dr-form-box--wide,
	.dr-form-box--wide > .e-con-inner {
		max-width: min(1060px, 78vw);
	}
}

/* ---- 7. Boletín del pie ----
   El pie queda como estaba (sin tarjeta y sin extender la banda
   gris); el único cambio es la disposición: el formulario ocupa una
   sola línea a todo el ancho -- nombre, apellido, correo y botón,
   uno junto a otro -- y "Follow Us" pasa debajo, en vez de ir en una
   segunda columna a la derecha. */
.dr-footer__main > .e-con-inner {
	flex-wrap: wrap !important;
}

.dr-footer__main > .e-con-inner > .elementor-element {
	width: 100% !important;
	flex: 0 0 100% !important;
}

/* "Follow Us" y sus iconos van en fila dentro de su columna; al
   pasar esa columna a ancho completo se quedaban pegados a la
   izquierda. Centrados quedan como el resto del pie. */
.dr-footer__main > .e-con-inner > .elementor-element:last-child {
	justify-content: center;
}

.dr-form--newsletter .elementor-form-fields-wrapper {
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 12px;
}

.elementor .dr-form--newsletter .elementor-form-fields-wrapper .elementor-field-group {
	width: auto;
	flex: 1 1 0;
	padding: 0 !important;
	margin-bottom: 0;
}

.elementor .dr-form--newsletter .elementor-form-fields-wrapper .elementor-field-group.e-form__buttons {
	flex: 0 0 auto;
	width: auto;
}

.elementor .dr-form--newsletter .elementor-field-type-submit.e-form__buttons .elementor-button[type="submit"] {
	border-radius: 8px !important;
	padding: 13px 34px !important;
	white-space: nowrap;
}

/* En móvil no caben cuatro cosas en una línea: vuelven a apilarse. */
@media (max-width: 767px) {
	.dr-form--newsletter .elementor-form-fields-wrapper {
		flex-wrap: wrap;
	}

	.elementor .dr-form--newsletter .elementor-form-fields-wrapper .elementor-field-group {
		flex: 1 1 100%;
	}
}

/* ---- 8. Firma: el marco acompaña a la nueva caja ---- */
.dr-firma__marco,
.dr-firma__tabs {
	border-radius: 8px;
	overflow: hidden;
}

.dr-firma .dr-firma__limpiar {
	border-radius: 8px;
	padding: 10px 18px;
}

/* ---- fin de la propuesta de estilo de formularios ---- */