/*
 * Sistema de diseño de Grupo Gente Vital.
 *
 * Vive en el tema hijo, no en un mu-plugin: es la piel del sitio, no una
 * funcionalidad, y aquí se puede editar, versionar y desactivar cambiando de
 * tema. Lo encola functions.php con una versión basada en la fecha del
 * archivo, así que un cambio se ve sin vaciar cachés.
 *
 * Lo que sigue está ordenado por bloques: tokens, tipografía, utilidades de
 * columna, cabecera, contenido, y por último cada pantalla con nombre propio.
 */
:root {
  --gv-brand: #864A94;
  --gv-brand-mid: #5D3169;
  --gv-brand-deep: #4A2854;
  --gv-ink-dark: #3B2545;
  --gv-ink-card: #4A3157;
  --gv-ink-line: #58406A;
  --gv-lilac: #CFA6D9;
  --gv-text: #2E2333;
  --gv-text-2: #4B4152;
  --gv-text-3: #675C73;
  --gv-text-4: #7A6A86;
  --gv-text-45: #5B5166;
  --gv-on-dark: #E7DCEC;
  --gv-on-dark-2: #D8C9DF;
  --gv-on-dark-4: #A493AD;
  --gv-bg: #FBF8FC;
  --gv-surface: #FFFFFF;
  --gv-border: #F0E8F3;
  --gv-border-2: #E7DAEC;
  --gv-panel: #F4ECF7;
  --gv-band: #EFE5F4;
  --gv-pill: #F6EFF9;
  --gv-hero: #EBC9F2;
  --gv-line-2: #E0CFE7;
  --gv-r-card: 22px;
  --gv-r-img: 26px;
  --gv-r-photo: 24px;
  --gv-r-field: 16px;
  --gv-r-pill: 999px;
  --gv-sans: Poppins, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Contenedor de referencia para las unidades cqw */
body.gv-shell {
  background: var(--gv-bg);
  color: var(--gv-text);
  font-family: var(--gv-sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body.gv-shell .gv-shell-inner,
body.gv-shell #page,
body.gv-shell .site-main,
/* Solo cuando dentro hay contenido nuestro: asi una pagina hecha a mano
   conserva el comportamiento por defecto de Elementor. */
body.gv-shell .elementor:has(.gv-c) {
  container-type: inline-size;
}

/* Cada titular mide contra SU PROPIA caja, no contra la pagina.
   Sin esto, cqw se resuelve contra el ancho de la pagina —el unico contenedor
   de consulta que habia— y un titular conserva su tamano de portada aunque
   este metido en una tarjeta de 207px: la palabra no cabe, se sale por el lado
   e invade la tarjeta vecina. Marcando cada contenedor como contenedor de
   consulta, cqw pasa a ser el ancho de la caja que rodea al titular y la
   escala de abajo hace su trabajo.

   Va en el CONTENEDOR y no en el propio widget del titular. Puesto en el
   widget, el navegador tiene que averiguar el alto de la caja antes de saber
   su ancho, asi que resuelve cqw como cero, escoge el minimo del clamp y
   reserva el alto de ese minimo; luego pinta el texto a su tamano real y el
   titular se sale por debajo. Medido: 13 titulares con la caja mas baja que su
   contenido. En el contenedor no pasa: su ancho lo decide su propio padre, sin
   depender de lo que lleve dentro.

   Se dejan fuera dos: el envoltorio del boton de menu y la caja del logo de
   clinica. Son los dos unicos contenedores de todo el sitio cuyo ancho lo pone
   su contenido —comprobado uno a uno en las tres anchuras— y la contencion,
   que existe justamente para que el ancho no dependa del contenido, los deja
   en cero. Ninguno lleva titulares dentro. */
body.gv-shell .gv-c:not(.gv-burger-wrap):not(.gv-cl-logo-box) {
  container-type: inline-size;
}

/* Escala tipografica fluida.
   Acotada a los widgets de titular: aplicada a todo h1-h3 arrastra tambien los
   titulos de las tarjetas del widget de entradas, que salen con tamano de
   portada. */
body.gv-shell .gv-w.elementor-widget-heading h1.elementor-heading-title,
body.gv-shell .gv-w.elementor-widget-theme-post-title h1.elementor-heading-title,
body.gv-shell .gv-w.elementor-widget-theme-archive-title h1.elementor-heading-title {
  font-family: var(--gv-sans);
  font-weight: 600;
  /* 1.1 y no 0.95: con 0.95 el interlineado (62,7px) queda por debajo del
     cuerpo de la letra (66px) y en un titular de dos lineas la "p" de la
     primera se mete dentro de la "d" de la segunda. Medido: 7,3px de tinta
     encima de tinta. Poppins necesita 1,06 solo para no tocarse.
     Se queda en 1,14 y no en 1,1: con 1,1 el titular mas ajustado del sitio
     dejaba 0,6px entre una "p" y una "e" acentuada. Las mayusculas acentuadas
     del castellano suben mas que aquellas para las que se calibro la fuente. */
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-size: clamp(38px, 6.8cqw, 66px);
}

body.gv-shell .gv-w.elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--gv-sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  /* Rampa, no escalon. El clamp anterior tenia un suelo plano de 26px: por
     debajo de 1050px de caja todos los titulares median igual, y en una
     tarjeta de 207px "Odontopediatria" no cabia y se salia sobre la tarjeta
     de al lado. La recta pasa por (294px de caja -> 26px) y
     (1080px -> 40px), que son los dos tamanos que ya funcionaban. */
  font-size: clamp(21px, calc(20px + 1.85cqw), 40px);
}

body.gv-shell .gv-w.elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--gv-sans);
  font-weight: 600;
  /* 1.38: a este cuerpo los titulares llevan mas descendentes por linea
     ("Tecnologia Radiografica") y 1.2 los dejaba tocandose. */
  line-height: 1.38;
  letter-spacing: -0.015em;
  font-size: clamp(19px, 2.2cqw, 24px);
}

body.gv-shell .gv-w.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--gv-sans);
  font-weight: 600;
  line-height: 1.42;
  font-size: 15.5px;
  letter-spacing: 0;
}

body.gv-shell p,
body.gv-shell li {
  font-family: var(--gv-sans);
}

/* Titular con una cifra grande (estadisticas, hitos, numeros de paso) */
body.gv-shell .gv-num .elementor-heading-title {
  font-family: var(--gv-sans) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.015em;
}

/* Una cifra es corta y no se puede partir en dos lineas: si su columna se
   estrecha, el numero se sale de la caja y se le corta el ultimo digito
   ("+700" pedia 103px y tenia 97 en tableta). No basta con que el widget no
   encoja: quien encogia era la columna que lo contiene, que no es nuestra.
   Se le pide su medida a traves del propio numero, para no tocar ningun
   contenedor que no lleve dentro algo del proyecto. */
body.gv-shell .gv-w.gv-num {
  flex-shrink: 0;
}

body.gv-shell :has(> .gv-w.gv-num) {
  min-width: fit-content;
}

/* Acento en italica del hero */
body.gv-shell .gv-italic .elementor-heading-title em,
body.gv-shell .gv-italic em {
  font-style: italic;
  color: var(--gv-hero);
}

body.gv-shell .gv-col[class*='gv-b'] {
  width: auto !important;
  max-width: 100%;
}

body.gv-shell .gv-b180 {
  flex: 1 1 180px;
  min-width: min(100%, 200px);
}

body.gv-shell .gv-b200 {
  flex: 1 1 200px;
  min-width: min(100%, 200px);
}

body.gv-shell .gv-b220 {
  flex: 1 1 220px;
  min-width: min(100%, 200px);
}

body.gv-shell .gv-b230 {
  flex: 1 1 230px;
  min-width: min(100%, 200px);
}

body.gv-shell .gv-b240 {
  flex: 1 1 240px;
  min-width: min(100%, 200px);
}

body.gv-shell .gv-b260 {
  flex: 1 1 260px;
  min-width: min(100%, 220px);
}

body.gv-shell .gv-b270 {
  flex: 1 1 270px;
  min-width: min(100%, 230px);
}

body.gv-shell .gv-b280 {
  flex: 1 1 280px;
  min-width: min(100%, 240px);
}

body.gv-shell .gv-b290 {
  flex: 1 1 290px;
  min-width: min(100%, 250px);
}

body.gv-shell .gv-b300 {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
}

body.gv-shell .gv-b320 {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
}

body.gv-shell .gv-b340 {
  flex: 1 1 340px;
  min-width: min(100%, 300px);
}

body.gv-shell .gv-b360 {
  flex: 1 1 360px;
  min-width: min(100%, 320px);
}

body.gv-shell .gv-b380 {
  flex: 1 1 380px;
  min-width: min(100%, 340px);
}

body.gv-shell .gv-b420 {
  flex: 1 1 420px;
  min-width: min(100%, 380px);
}

body.gv-shell .gv-b460 {
  flex: 1 1 460px;
  min-width: min(100%, 420px);
}

body.gv-shell .gv-b520 {
  flex: 1 1 520px;
  min-width: min(100%, 480px);
}

body.gv-shell .gv-b560 {
  flex: 1 1 560px;
  min-width: min(100%, 520px);
}

body.gv-shell .gv-b620 {
  flex: 1 1 620px;
  min-width: min(100%, 580px);
}

/* Columnas de medida fija: el numero del paso y su fotografia en /metodo/,
   que en el prototipo van con flex:0 0 120px y flex:0 0 220px. */
body.gv-shell .gv-f120 {
  flex: 0 0 120px;
  width: 120px !important;
}

body.gv-shell .gv-f220 {
  flex: 0 0 220px;
  min-width: min(100%, 200px);
  width: auto !important;
}

body.gv-shell .gv-max620 {
  max-width: 620px;
}

/* En movil todas las columnas ocupan el ancho completo */
@media (max-width:767px) {

  /* Se nombra tambien la variante con ancho base (.gv-b320 y companeras)
     porque su regla lleva width:auto !important y, sin repetirla aqui, ganaba.
     Ademas se apila en columna: en ese eje flex-basis manda sobre el alto, no
     sobre el ancho, asi que hace falta decir el ancho aparte. Sin esto una
     columna se encogia al ancho de su contenido —100px medidos— y el titular
     de dentro se salia por los lados. */
  body.gv-shell .gv-col,
  body.gv-shell .gv-col[class*='gv-b'] {
    width: 100% !important;
    flex-basis: 100% !important;
    align-self: stretch;
  }

  body.gv-shell .gv-f120,
  body.gv-shell .gv-f220 {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

/* Un elemento flex arranca con min-width:auto y no baja de su ancho de
   contenido: una imagen o un titular largo ensanchaba la fila mas alla de la
   pantalla y la pagina entera se iba a la derecha. */
body.gv-shell .gv-c,
body.gv-shell .gv-c>.e-con-inner,
body.gv-shell .gv-w.elementor-widget {
  min-width: 0;
}

@media (max-width:767px) {

  body.gv-shell .gv-c,
  body.gv-shell .gv-w {
    max-width: 100%;
  }
}

/* Ninguna pagina debe poder desplazarse en horizontal */
/* El overflow del contenedor raiz rompia el position:sticky de la cabecera:
   con overflow distinto de visible, la cabecera se pega a ese contenedor y no
   al viewport, asi que se iba con el scroll. Se acota al contenido, que es
   donde de verdad hacen falta los cortes laterales, y la cabecera pasa a
   position:fixed, que es lo que se pedia. */
body.gv-shell .page-content,
body.gv-shell .site-main,
body.gv-shell .elementor:has(.gv-c) {
  overflow-x: clip;
}

/* Cadenas que no rompen (correos, URL largas, referencias legales) ensanchaban
   su parrafo por dentro y con el toda la pagina. overflow-wrap:anywhere solo
   parte cuando no queda sitio, asi que no afecta al texto normal. */
body.gv-shell .gv-w.elementor-widget-text-editor,
body.gv-shell .gv-w.elementor-widget-theme-post-content,
body.gv-shell .gv-w .elementor-tab-content {
  overflow-wrap: anywhere;
}

/* Las tablas del contenido original se desplazan dentro de su caja */
body.gv-shell .gv-w.elementor-widget-text-editor table,
body.gv-shell .gv-w.elementor-widget-theme-post-content table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* El margen lateral lo pone Elementor en el propio contenedor: 10 % a cada
   lado en escritorio, que es el 80 % de contenido acordado. Aqui habia un
   5cqw con !important que se lo comia y dejaba el contenido al 90 %; era la
   razon de que los bloques se vieran casi a sangre. Solo se fija el ancho.
   El valor no esta aqui sino en la maqueta de cada contenedor .gv-pad: para
   cambiarlo hay que tocar el padding en la base de datos, no este archivo. */
body.gv-shell .gv-pad {
  width: 100%;
}

/* Sin tope de ancho: el 80 % se cumple a cualquier anchura de pantalla.
   Aqui hubo un max-width de 1560 px pensado para que la linea de texto no se
   volviera ilegible en un monitor de 2560 px. Con el contenido al 80 % ese
   tope empezaba a mandar ya a partir de 1950 px, y en un monitor de 2560 px
   dejaba el contenido en 1560 px —un 61 %—, que es justo lo contrario de lo
   que se pedia. Quien acota la lectura es --gv-medida, y lo hace sobre la
   columna del articulo, que es donde importa, en vez de sobre la caja entera:
   asi las secciones ocupan la pagina y el texto sigue teniendo su medida.
   Los margenes automaticos se quedan: sin tope no hacen nada, pero valen si
   alguna pantalla vuelve a fijar un ancho a mano. */
body.gv-shell .gv-pad {
  margin-left: auto;
  margin-right: auto;
}

/* .gv-medido queda sin efecto propio: el ancho lo decide .gv-pad y tener dos
   limites compitiendo solo servia para descuadrar unas secciones respecto de
   otras. Se conserva la clase porque la usan varias pantallas. */
body.gv-shell .gv-medido {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------ BALDOSA CUADRADA */
/* El gesto que se repite: el sitio original ya usaba iconos cuadrados de
   48x48 en el menu de tratamientos. Aqui es el sistema, y de paso ningun
   logotipo puede salirse de su caja sea cual sea su proporcion. */
body.gv-shell .gv-baldosa {
  flex: 0 0 auto;
  overflow: hidden;
  transition: background-color .22s ease, transform .3s cubic-bezier(.22, .7, .18, 1);
}

/* El icono va suelto, sin pastilla de color detras: la caja solo reserva el
   sitio y mantiene la proporcion. */
body.gv-shell .gv-baldosa {
  background: transparent !important;
  padding: 0 !important;
}

/* Los iconos del original son JPG y PNG con el fondo blanco quemado dentro
   del archivo: quitar el color de la caja no bastaba, el recuadro blanco
   seguia estando en la imagen.
   Sobre fondo claro, multiply descarta el blanco y deja solo el trazo.
   Sobre fondo oscuro se invierte primero (el blanco pasa a negro), se aclara
   el trazo y con lighten el negro desaparece: icono blanco sobre morado, que
   es 12:1. Los logotipos en color van siempre sobre fondo claro, y multiply
   les respeta el color. */
body.gv-shell .gv-baldosa img,
body.gv-shell .gv-icon img,
body.gv-shell .gv-menu-icono {
  mix-blend-mode: multiply;
}

body.gv-shell .gv-dark .gv-baldosa img,
body.gv-shell .gv-dark .gv-icon img,
body.gv-shell .gv-card-dark .gv-icon img,
body.gv-shell .gv-banda-oscura .gv-baldosa img {
  filter: invert(1) grayscale(1) brightness(1.75);
  mix-blend-mode: lighten;
}

body.gv-shell .gv-clickable:hover .gv-baldosa {
  transform: translateY(-2px);
}

body.gv-shell .gv-baldosa .gv-w.elementor-widget-image,
body.gv-shell .gv-baldosa .gv-w.elementor-widget-container {
  width: 100%;
  height: 100%;
}

body.gv-shell .gv-baldosa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Tarjeta de tratamiento: la baldosa arriba y el texto pegado al pie, para que
   las doce tarjetas alineen etiqueta y accion aunque el titulo ocupe una o dos
   lineas. */
body.gv-shell .gv-tratamiento {
  justify-content: flex-start;
}

body.gv-shell .gv-tratamiento>.gv-c:last-child {
  margin-top: auto;
}

body.gv-shell .gv-tratamiento .elementor-heading-title a {
  color: inherit;
}

/* El titulo pasa al color de marca al pasar por encima de la tarjeta:
   es lo que delata que la tarjeta lleva a alguna parte. */
body.gv-shell a.gv-clickable:hover .elementor-heading-title {
  color: var(--gv-brand) !important;
}

body.gv-shell a.gv-clickable:focus-visible {
  outline: 3px solid var(--gv-brand-mid);
  outline-offset: 3px;
}

/* Filo vertical entre las dos cifras de la portada */
body.gv-shell .gv-filo {
  flex: 0 0 1px;
  align-self: center;
}

@media (max-width:767px) {
  body.gv-shell .gv-filo {
    display: none;
  }
}

/* La franja de compromiso es una regla, no un titular */
body.gv-shell .gv-franja .elementor-heading-title {
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Imagen de opiniones: dentro de su tarjeta, sin sobresalir */
body.gv-shell .gv-opiniones img {
  width: 100%;
  height: auto;
  display: block;
}

/* Rejillas auto-fit */
body.gv-shell .gv-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body.gv-shell .gv-grid-170 {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

body.gv-shell .gv-grid-190 {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

body.gv-shell .gv-grid-230 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

body.gv-shell .gv-grid-240 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body.gv-shell .gv-grid-260 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

body.gv-shell .gv-grid-280 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

body.gv-shell .gv-grid-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

body.gv-shell .gv-grid-320 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

body.gv-shell .gv-grid-340 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

body.gv-shell .gv-grid-380 {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

body.gv-shell .gv-grid-420 {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

body.gv-shell .gv-grid-460 {
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
}

/* Una base sin regla propia caia al auto-fit de 240 px por defecto, que es
   como la rejilla de casos acabo a cuatro columnas pidiendo dos. */
body.gv-shell .gv-grid>.gv-c {
  width: auto !important;
  max-width: none !important;
}

/* Seis o nueve tarjetas caben en cuatro columnas, pero dejan una fila coja de
   dos. Con tres columnas la rejilla cierra completa. Si el navegador no
   entiende :has(), sigue mandando el auto-fit de arriba. */
@media (min-width:1025px) {

  body.gv-shell .gv-grid:has(> :nth-child(6):last-child),
  body.gv-shell .gv-grid:has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------- CABECERA */
/* Clara y translucida, con el filo degradado del prototipo. */
body.gv-shell .gv-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gv-border);
}

/* Hueco del mismo alto que la cabecera, para que no tape el principio de la
   pagina. La medida la escribe el propio navegador en --gv-header-h. */
body.gv-shell {
  padding-top: var(--gv-header-h, 75px);
}

/* Con la barra de administracion, WordPress empuja todo 32 px (46 en movil)
   con un margin-top en el <html>. La cabecera es position:fixed, asi que no
   se entera y se queda debajo: aparecia una franja entre la cabecera y el
   contenido, y arriba la barra tapaba el logotipo.
   Se baja la cabecera esos mismos pixeles y el hueco del body los descuenta. */
body.admin-bar.gv-shell .gv-header {
  top: 32px;
}

@media screen and (max-width:782px) {
  body.admin-bar.gv-shell .gv-header {
    top: 46px;
  }
}

/* El hueco del body NO se toca: WordPress ya desplaza toda la pagina con el
   margin-top del <html>, asi que sumarle aqui los 32 px de la barra los
   contaba dos veces y dejaba una franja del color del fondo entre la cabecera
   y el primer bloque. Es justo lo que se veia. */

/* El ancla si tiene que contar con la barra, porque el desplazamiento se mide
   sobre el viewport y ahi la barra si tapa. */
body.admin-bar.gv-shell {
  scroll-padding-top: calc(var(--gv-header-h, 75px) + 44px);
}

/* El anclaje a un titular tiene que dejar sitio a la cabecera */
body.gv-shell {
  scroll-padding-top: calc(var(--gv-header-h, 75px) + 12px);
}

/* La PRIMERA seccion de cada pagina no necesita su aire completo: la cabecera
   fija ya la separa de lo de arriba. Sumando los dos, quedaban 145 px muertos
   antes del primer titular. El hueco propio se reduce a un tercio. */
/* La cabecera, el pie y el popup quedan fuera: su contenedor raiz tambien es
   el primer hijo de su propio .elementor, y sin excluirlos la cabecera crecia
   26 px, que es justo lo que se queria quitar. */
body.gv-shell .elementor>.gv-c:first-child:not(.gv-header):not(.gv-pie):not(.gv-menu-popup) {
  padding-top: 26px !important;
}

@media (max-width:767px) {
  body.gv-shell .elementor>.e-con:first-child:not(.gv-header):not(.gv-pie):not(.gv-menu-popup) {
    padding-top: 18px !important;
  }
}

/* Salvo cuando la primera seccion es una banda a sangre con fondo propio
   (hero de portada, banda lila de las clinicas, portada del articulo): ahi el
   aire es parte del bloque, no un margen suelto. */
body.gv-shell .elementor>.gv-c:first-child.gv-hero,
body.gv-shell .elementor>.gv-c:first-child.gv-clinica-hero,
body.gv-shell .elementor>.gv-c:first-child.gv-portada {
  padding-top: 56px !important;
}

@media (max-width:767px) {

  body.gv-shell .elementor>.e-con:first-child.gv-hero,
  body.gv-shell .elementor>.e-con:first-child.gv-clinica-hero,
  body.gv-shell .elementor>.e-con:first-child.gv-portada {
    padding-top: 36px !important;
  }
}

body.gv-shell .gv-topline {
  height: 3px;
  background: linear-gradient(90deg, #864A94 0%, #CFA6D9 50%, #864A94 100%);
  opacity: .9;
  position: relative;
  z-index: 0;
}

/* El filo degradado va detras: al pintarse despues en el DOM cruzaba por
   encima del panel del desplegable y lo partia con una raya morada. */
body.gv-shell .gv-header .gv-pad {
  position: relative;
  z-index: 2;
}

body.gv-shell .gv-nav .elementor-nav-menu--dropdown {
  z-index: 3;
}

/* La cabecera se condensa al bajar: menos alto, sombra mas marcada y el filo
   casi apagado. Es el unico movimiento que hace, y solo al desplazarse. */
body.gv-shell .gv-header {
  transition: box-shadow .3s ease, background-color .3s ease;
}

body.gv-shell .gv-header .gv-pad {
  transition: padding-top .28s cubic-bezier(.22, .7, .18, 1), padding-bottom .28s cubic-bezier(.22, .7, .18, 1);
}

body.gv-shell.gv-scrolled .gv-header {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 10px 30px rgba(59, 37, 69, .10);
}

body.gv-shell.gv-scrolled .gv-header .gv-pad {
  padding-top: .45% !important;
  padding-bottom: .45% !important;
}

body.gv-shell.gv-scrolled .gv-topline {
  opacity: .35;
}

@media (prefers-reduced-motion: reduce) {

  body.gv-shell .gv-header,
  body.gv-shell .gv-header .gv-pad {
    transition: none;
  }
}

/* La cabecera va en una sola linea: logotipo, navegacion y boton.
   La navegacion crece con el hueco disponible en vez de llevar un ancho fijo:
   con width:62% mas el logotipo y el boton, la fila pasaba de 100 y la
   cabecera se partia en tres pisos. */
body.gv-shell .gv-header .gv-pad {
  max-width: none;
  flex-wrap: nowrap !important;
}

body.gv-shell .gv-header .gv-pad>.gv-c {
  width: auto !important;
}

body.gv-shell .gv-logo {
  width: auto !important;
  flex: 0 0 auto;
}

body.gv-shell .gv-cta-header {
  width: auto !important;
  flex: 0 0 auto;
}

body.gv-shell .gv-navwrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* La cabecera no se rige por la caja del 75 %: esa regla es para los bloques
   de contenido. Aqui el aire lateral es menor para que los ocho destinos
   quepan en una linea. */
body.gv-shell .gv-header .gv-pad {
  padding-left: 2.5% !important;
  padding-right: 2.5% !important;
}

/* El corte entre navegacion y hamburguesa se hace aqui y no con los ajustes
   responsive del contenedor: hide_tablet/hide_mobile emitian la clase
   elementor-hidden repetida y sin sufijo de dispositivo, o sea sin efecto.
   1280 y no 980: con etiquetas como "Tecnicas de vanguardia" o "Nuestras
   clinicas" los ocho destinos necesitan ~930 px, y por debajo de ahi la fila
   se desborda. Mejor hamburguesa que menu partido. */
@media (min-width:1281px) {
  body.gv-shell .gv-burger-wrap {
    display: none !important;
  }
}

@media (max-width:1280px) {
  body.gv-shell .gv-navwrap {
    display: none !important;
  }
}

/* Tablet y movil: solo logotipo y hamburguesa, como pide el diseno.
   El corte es 980 px, que es el viewport_tablet del kit. */
@media (max-width:980px) {
  body.gv-shell .gv-header .gv-pad {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  body.gv-shell .gv-cta-header {
    display: none !important;
  }

  body.gv-shell .gv-burger-wrap {
    width: auto !important;
    flex: 0 0 auto;
  }
}

/* En movil se aprieta ademas el logotipo */
@media (max-width:767px) {
  body.gv-shell .gv-logo .elementor-heading-title {
    font-size: 15px;
    gap: 8px;
  }

  body.gv-shell .gv-logo .elementor-heading-title::before {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  body.gv-shell .gv-abrir-menu .elementor-button {
    width: 38px;
    height: 38px;
  }
}

/* Logotipo en imagen: manda la altura, el ancho sale de la proporcion. */
body.gv-shell .gv-logo-img img {
  height: 34px;
  width: auto;
  max-width: none;
  display: block;
}

body.gv-shell .gv-logo-img .gv-w.elementor-widget-container {
  line-height: 0;
}

body.gv-shell .gv-logo-img a {
  display: inline-flex;
  align-items: center;
}

/* En movil el logotipo crece: es la unica marca visible cuando la navegacion
   se pliega en la hamburguesa. */
@media (max-width:767px) {
  body.gv-shell .gv-logo-img img {
    height: 34px;
  }
}

/* En el pie va sobre morado oscuro. El archivo ya tiene fondo transparente,
   asi que se pasa a blanco solido: es como se usa una marca en positivo sobre
   fondo oscuro, y da 12:1 de contraste. Sin pastilla ni recuadro. */
body.gv-shell .gv-logo-pie .gv-w.elementor-widget-container {
  background: none;
  padding: 0;
}

body.gv-shell .gv-logo-pie img {
  height: 32px;
  filter: brightness(0) invert(1);
}

@media (max-width:767px) {
  body.gv-shell .gv-logo-pie img {
    height: 34px;
  }
}

/* Logotipo tipografico: solo entra si el archivo no estuviera dado de alta */
body.gv-shell .gv-logo .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gv-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--gv-brand-mid);
}

body.gv-shell .gv-logo .elementor-heading-title::before {
  content: 'g';
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gv-brand);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gv-sans);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
}

body.gv-shell .gv-logo a {
  color: var(--gv-brand-mid);
}

/* Navegacion en pildoras */
/* Ocho destinos con sus flechas tienen que caber en una linea junto al
   logotipo y el boton: por eso la pildora va apretada. */
body.gv-shell .gv-nav .elementor-nav-menu {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0;
}

body.gv-shell .gv-nav .elementor-nav-menu>li>a.elementor-item {
  white-space: nowrap;
}

body.gv-shell .gv-nav .elementor-nav-menu a.elementor-item {
  padding: 9px 10px !important;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gv-text-45) !important;
  font-family: var(--gv-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .28s cubic-bezier(.22, .7, .18, 1);
}

/* Justo por encima del corte se aprieta un poco mas */
@media (max-width:1440px) {
  body.gv-shell .gv-nav .elementor-nav-menu a.elementor-item {
    padding: 8px 8px !important;
    font-size: 11.5px;
  }

  body.gv-shell .gv-cta-header .elementor-button {
    padding: 12px 18px !important;
    font-size: 11.5px;
  }
}

body.gv-shell .gv-nav .elementor-nav-menu a.elementor-item:hover {
  transform: translateY(-2px);
  background: var(--gv-pill);
  border-color: var(--gv-border-2);
  color: var(--gv-brand-mid) !important;
}

body.gv-shell .gv-nav .elementor-nav-menu a.elementor-item.elementor-item-active {
  background: var(--gv-brand);
  color: #FFFFFF !important;
  border-color: var(--gv-brand);
  font-weight: 600;
}

/* Desplegables de escritorio: panel flotante con la linea de las tarjetas.
   La jerarquia sale del menu de WordPress, asi que se edita desde el panel. */
body.gv-shell .gv-nav .elementor-nav-menu--dropdown {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-card);
  overflow: hidden;
  padding: 8px;
  box-shadow: 0 18px 44px rgba(74, 40, 84, .14);
  min-width: 264px;
}

body.gv-shell .gv-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
  border-radius: 14px;
  padding: 11px 14px !important;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--gv-text-45) !important;
  transition: background-color .18s ease, color .18s ease;
}

body.gv-shell .gv-nav .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
  background: var(--gv-pill);
  color: var(--gv-brand-mid) !important;
}

body.gv-shell .gv-nav .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
  background: var(--gv-brand);
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Icono del tratamiento dentro del desplegable */
body.gv-shell .gv-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
  display: flex !important;
  align-items: center;
  gap: 11px;
}

body.gv-shell .gv-menu-icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 7px;
  opacity: .9;
  transition: opacity .18s ease, transform .18s ease;
}

body.gv-shell .gv-nav .elementor-nav-menu--dropdown a:hover .gv-menu-icono {
  opacity: 1;
  transform: scale(1.06);
}

/* En el nivel superior no hay icono; si algun dia lo hubiera, no debe empujar
   la fila de ocho destinos. */
body.gv-shell .gv-nav .elementor-nav-menu>li>a .gv-menu-icono {
  display: none;
}

/* La flecha del desplegable, discreta */
body.gv-shell .gv-nav .elementor-item .sub-arrow {
  margin-left: 5px;
  font-size: 9px;
  opacity: .6;
}

body.gv-shell .gv-nav .elementor-item:hover .sub-arrow {
  opacity: 1;
}

/* ------------------------------------------- HAMBURGUESA Y POPUP DEL MENU */
body.gv-shell .gv-abrir-menu .elementor-button {
  width: 42px;
  height: 42px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.gv-shell .gv-abrir-menu .elementor-button-icon {
  margin: 0 !important;
  font-size: 17px;
}

body.gv-shell .gv-abrir-menu .elementor-button-content-wrapper {
  gap: 0;
}

body.gv-shell .gv-abrir-menu .elementor-button-text {
  display: none;
}

/* El panel entra desde la izquierda y ocupa el alto completo.
   El ANCHO ya no se fija aqui: lo pone Elementor desde los ajustes del popup
   (380 px, 360 en tablet, 320 en movil). Este bloque llegaba a 343 px por su
   cuenta y dejaba 23 px de desajuste con el interior. La caja se ajusta a su
   contenido. */
.gv-popup-menu .dialog-widget-content {
  width: auto !important;
  max-width: 100vw !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  inset: 0 auto 0 0 !important;
  overflow: hidden;
}

.gv-popup-menu .dialog-close-button {
  color: #E7DCEC;
  font-size: 22px;
  top: 18px;
  right: 18px;
}

.gv-popup-menu .dialog-close-button:hover {
  color: #FFFFFF;
}

body.gv-shell .gv-menu-popup {
  min-height: 100%;
}

/* El control 'align' del boton centra el envoltorio: hay que alinear tambien
   el wrapper, o la lista entera sale centrada y se lee como un cartel. */
body.gv-shell .gv-menu-popup .gv-w.elementor-widget-button {
  width: 100%;
}

body.gv-shell .gv-menu-popup .elementor-button-wrapper {
  text-align: left;
}

body.gv-shell .gv-menu-popup .elementor-button-content-wrapper {
  justify-content: flex-start;
}

body.gv-shell .gv-menu-nivel1 .elementor-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 600;
}

body.gv-shell .gv-menu-nivel2 .elementor-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 400;
}

/* El rotulo de grupo y el bloque de cierre, con el mismo margen izquierdo */
body.gv-shell .gv-menu-popup .gv-kicker {
  padding: 14px 16px 6px;
}

/* Las acciones del final si van a ancho completo y centradas */
body.gv-shell .gv-menu-popup .gv-pill .elementor-button {
  justify-content: center;
  text-align: center;
}

/* -------------------------------------------------------------------- PIE */
/* Las reglas .gv-footer se retiran: ningun archivo asigna esa clase, asi
   que nunca llegaron a aplicarse. Lo que pinta el pie es .gv-dark. */


/* ------------------------------------------------------------ HERO CON FOTO */
/* El degradado de tres paradas no lo puede emitir Elementor desde la interfaz.
   El prototipo baja hasta 0.18 de opacidad por la derecha; sobre una fotografia
   clara el texto blanco no llegaria a AA, asi que el tramo final sube a 0.42 y
   se anade un velo lateral bajo la columna de texto. */
body.gv-shell .gv-hero-foto {
  position: relative;
  isolation: isolate;
}

body.gv-shell .gv-hero-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(59, 37, 69, .88) 0%, rgba(93, 49, 105, .74) 45%, rgba(134, 74, 148, .42) 100%);
}

body.gv-shell .gv-hero-foto>* {
  position: relative;
  z-index: 1;
}

body.gv-shell .gv-hero-foto .elementor-heading-title,
body.gv-shell .gv-hero-foto p {
  text-shadow: 0 2px 24px rgba(30, 10, 40, .35);
}

/* Todo el texto del hero va en claro, pase lo que pase con el color del kit */
body.gv-shell .gv-hero-foto .elementor-heading-title {
  color: #FFFFFF;
}

body.gv-shell .gv-hero-foto p {
  color: #EDDDF2;
}

body.gv-shell .gv-hero-foto .gv-italic em {
  color: var(--gv-hero);
}

/* Pildora del hero: translucida sobre la fotografia */
body.gv-shell .gv-hero-pildora p {
  background: rgba(255, 255, 255, .16);
  color: #FFFFFF;
  text-shadow: none;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* Secciones oscuras: todo el texto en claro */
body.gv-shell .gv-dark,
body.gv-shell .gv-dark p,
body.gv-shell .gv-dark li,
body.gv-shell .gv-dark h1,
body.gv-shell .gv-dark h2,
body.gv-shell .gv-dark h3,
body.gv-shell .gv-dark h4 {
  color: #FBF8FC;
}

body.gv-shell .gv-dark .gv-kicker {
  color: var(--gv-lilac);
}

/* Micro-etiqueta en versalitas */
body.gv-shell .gv-kicker {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gv-text-4);
  font-family: var(--gv-sans);
  font-weight: 400;
}

body.gv-shell .gv-kicker .elementor-heading-title {
  font-size: 11.5px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400 !important;
}

/* Linea destacada que no encabeza seccion (Antetitulo).
   Es un widget de titular con header_size=p, asi que fuera de la jerarquia:
   por debajo del H2 que la acompana y por encima del parrafo. */
body.gv-shell .gv-antetitulo .elementor-heading-title {
  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: var(--gv-text-2);
}

body.gv-shell .gv-antetitulo+.gv-w.elementor-widget-heading {
  margin-top: 2px;
}

@media (max-width:767px) {
  body.gv-shell .gv-antetitulo .elementor-heading-title {
    font-size: 17px !important;
  }
}

/* La marca dibujandose sola.
   El archivo lleva fondo blanco quemado: multiply lo descarta y deja el trazo
   sobre el fondo de la pagina, igual que con los iconos. */
body.gv-shell .gv-marca-anim {
  width: 200px;
  max-width: 56vw;
}

/* El envoltorio no pinta nada: si lleva fondo propio, la mezcla del video se
   aplica contra ese blanco y el recuadro sigue viendose. */
body.gv-shell .gv-marca-anim .elementor-wrapper,
body.gv-shell .gv-marca-anim .gv-w.elementor-widget-container {
  background: transparent !important;
}

/* Sin mezcla: el widget de video crea su propio contexto de apilado y el
   multiply solo llegaba hasta el, no hasta el fondo de la seccion. La marca
   va sobre blanco, que es el fondo con el que esta hecha. */
body.gv-shell .gv-marca-anim video {
  object-fit: contain;
  background: #FFFFFF;
}

body.gv-shell .gv-marca-anim .elementor-custom-embed-play {
  display: none !important;
}

/* Con movimiento reducido no se reproduce: queda el fotograma final, que dice
   exactamente lo mismo sin moverse. */
@media (prefers-reduced-motion: reduce) {
  body.gv-shell .gv-marca-anim video {
    display: none;
  }
}

/* Tarjeta de articulo en las paginas de categoria: imagen arriba, titular
   contenido a dos lineas y resumen corto, para que la rejilla no se descuadre
   con un titulo largo. */
body.gv-shell .gv-card-entrada .gv-entrada-img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

body.gv-shell .gv-card-entrada .gv-w.elementor-widget-heading .elementor-heading-title {
  font-size: 19px !important;
  line-height: 1.3 !important;
}

body.gv-shell .gv-card-entrada .gv-w.elementor-widget-text-editor {
  font-size: 14px;
  line-height: 1.6;
}

body.gv-shell .gv-card-entrada .gv-w.elementor-widget-text-editor p {
  margin: 0 0 6px;
}

/* Mapa: mismo radio que las tarjetas y sin borde propio del iframe */
body.gv-shell .gv-mapa iframe {
  border: 0;
  border-radius: var(--gv-r-card);
  display: block;
  width: 100%;
}

body.gv-shell .gv-mapa .elementor-custom-embed {
  border-radius: var(--gv-r-card);
  overflow: hidden;
  border: 1px solid var(--gv-border);
}

/* Tira de marcas y aseguradoras: cada logotipo en una caja del mismo tamano,
   en gris hasta que se pasa por encima. Los archivos originales mezclan
   apaisados y cuadrados, y en crudo la fila iba a saltos. */
body.gv-shell .gv-marcas .gv-marca {
  flex: 0 0 auto;
  width: 132px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--gv-border);
  border-radius: 16px;
  background: var(--gv-surface);
  transition: border-color .2s ease, filter .25s ease, opacity .25s ease;
  filter: grayscale(1);
  opacity: .72;
}

body.gv-shell .gv-marcas .gv-marca:hover {
  filter: none;
  opacity: 1;
  border-color: var(--gv-border-2);
}

body.gv-shell .gv-marcas .gv-marca .gv-w.elementor-widget-container {
  width: 100%;
  height: 100%;
}

body.gv-shell .gv-marcas .gv-marca img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width:479px) {
  body.gv-shell .gv-marcas .gv-marca {
    width: 104px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.gv-shell .gv-marcas .gv-marca {
    transition: none;
  }
}

/* ------------------------------------------------------ CASOS DE EXITO
   Las fotografias van en una tira que se desliza, no apretadas en una
   rejilla. Con doce casos y hasta cuatro fotos cada uno, la unica forma de
   que se puedan comparar es darles tamano; y la unica forma de darles tamano
   sin hacer la pagina interminable es que la tira se desplace.

   Es un carrusel de scroll nativo: se arrastra con el dedo, con la rueda y
   con el teclado, y no carga ni una linea de JavaScript. */
body.gv-shell .gv-caso-tira {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow-x: auto;
  /* proximity y no mandatory: con el pase automatico, un snap obligatorio
     peleaba con el reposicionamiento del bucle y daba tirones. */
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--gv-line-2) transparent;
}

body.gv-shell .gv-caso-tira::-webkit-scrollbar {
  height: 6px;
}

body.gv-shell .gv-caso-tira::-webkit-scrollbar-track {
  background: var(--gv-pill);
  border-radius: 99px;
}

body.gv-shell .gv-caso-tira::-webkit-scrollbar-thumb {
  background: var(--gv-line-2);
  border-radius: 99px;
}

body.gv-shell .gv-caso-tira:focus-visible {
  outline: 2px solid var(--gv-brand);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Dos fotografias visibles en escritorio, una en movil. El resto se alcanzan
   deslizando, con parada en cada una. */
body.gv-shell .gv-caso-foto {
  flex: 0 0 calc(50% - 5px);
  width: auto !important;
  min-width: 0;
  scroll-snap-align: start;
}

body.gv-shell .gv-caso-foto .gv-kicker {
  margin-bottom: 2px;
}

body.gv-shell .gv-caso-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

@media (max-width:767px) {
  body.gv-shell .gv-caso-foto {
    flex: 0 0 82%;
  }

  body.gv-shell .gv-caso-img img {
    height: 200px;
  }
}

/* Aviso de que hay mas fotos a la derecha: la ultima se desvanece contra el
   borde. Va como mascara sobre la propia tira y no como un degradado encima
   de la tarjeta: puesto sobre la tarjeta tapaba tambien el titulo. */
body.gv-shell .gv-caso-tira[data-desborda="si"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}

body.gv-shell .gv-caso-tira[data-desborda="si"][data-final="si"] {
  -webkit-mask-image: none;
  mask-image: none;
}

/* El desplazamiento del pase automatico no debe competir con el del usuario:
   si toca la tira, manda el dedo. */
body.gv-shell .gv-caso-tira {
  overscroll-behavior-x: contain;
}

/* ================================================================ MOVIL
   Una escala corta y un solo ritmo.

   Antes convivian once tamanos de letra distintos en la misma pantalla (11,
   12, 13, 14, 15, 18, 21, 22, 28, 34 y 42 px): cada widget traia el suyo y el
   resultado era que nada parecia jerarquia, solo desorden. Aqui se reduce a
   seis pasos y se aplican a todo, venga de donde venga.
   ==================================================================== */
@media (max-width:767px) {

  /* Titulares.
     Los tamanos siguen siendo los mismos —32, 24, 18, 16— pero como techo de
     un clamp y no como valor fijo. Puestos fijos, un titular metido en una
     caja estrecha conservaba su tamano de pantalla completa y se salia: en
     "Con que te tratamos" la caja media 100px y el texto 112px. Ahora ese
     techo se alcanza a partir de una caja de 312px, que es el ancho normal de
     una columna en movil, y por debajo el titular baja. */
  body.gv-shell .gv-w.elementor-widget-heading h1.elementor-heading-title,
  body.gv-shell .gv-w.elementor-widget-theme-post-title h1.elementor-heading-title,
  body.gv-shell .gv-w.elementor-widget-theme-archive-title h1.elementor-heading-title {
    font-size: clamp(24px, calc(6px + 7.4cqw), 32px) !important;
    /* 1.25: en movil un H1 largo parte en mas lineas, y con 1.15 la "p" de
       "Temporomandibular" caia sobre el ")" de "(ATM)". Medido letra a letra:
       2,3px de trazo encima de trazo. Con 1.25 quedaba en 0,9px, que es
       tocarse por poco; 1.3 deja 2,5px. */
    line-height: 1.3 !important;
  }

  body.gv-shell .gv-w.elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(18px, calc(13px + 3.5cqw), 24px) !important;
    line-height: 1.3 !important;
  }

  body.gv-shell .gv-w.elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(14px, calc(11px + 2.25cqw), 18px) !important;
    line-height: 1.38 !important;
  }

  body.gv-shell .gv-w.elementor-widget-heading h4.elementor-heading-title,
  body.gv-shell .gv-antetitulo .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  /* Cuerpo: un solo tamano para todo el texto corrido */
  body.gv-shell .gv-w.elementor-widget-text-editor,
  body.gv-shell .gv-w.elementor-widget-text-editor p,
  body.gv-shell .gv-w.elementor-widget-text-editor li,
  body.gv-shell .gv-w.elementor-widget-theme-post-content,
  body.gv-shell .gv-w.elementor-widget-theme-post-content p,
  body.gv-shell .gv-w.elementor-widget-theme-post-content li,
  body.gv-shell .gv-w .elementor-tab-content,
  body.gv-shell .gv-w .elementor-tab-content p,
  body.gv-shell .gv-w .elementor-tab-content li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* Letra pequena: pies, notas legales y datos de ficha */
  body.gv-shell .gv-card-entrada .gv-w.elementor-widget-text-editor,
  body.gv-shell .gv-card-entrada .gv-w.elementor-widget-text-editor p,
  body.gv-shell .gv-posts .elementor-post__excerpt p,
  body.gv-shell .gv-caso .gv-w.elementor-widget-text-editor p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  body.gv-shell .gv-kicker,
  body.gv-shell .gv-kicker .elementor-heading-title,
  body.gv-shell .gv-w.elementor-widget-post-info {
    font-size: 11.5px !important;
  }

  /* Titulos de tarjeta de entrada y de acordeon, al paso de h4 */
  body.gv-shell .gv-card-entrada .gv-w.elementor-widget-heading .elementor-heading-title,
  body.gv-shell .gv-posts .elementor-post__title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  body.gv-shell .gv-w.elementor-widget-accordion .elementor-accordion-title {
    font-size: 14.5px !important;
  }

  /* ---- Botones a ancho completo -------------------------------------
     Un boton de 144 px en una pantalla de 390 es un blanco pequeno y deja la
     fila descuadrada. En movil ocupan el ancho y se apilan, que es como se
     pulsan con el pulgar. La hamburguesa queda fuera: es un icono cuadrado. */
  body.gv-shell .gv-w.elementor-widget-button:not(.gv-abrir-menu):not(.gv-menu-toggle) {
    width: 100% !important;
  }

  body.gv-shell .gv-w.elementor-widget-button:not(.gv-abrir-menu):not(.gv-menu-toggle) .elementor-button {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 13px !important;
  }

  body.gv-shell .gv-w.elementor-widget-button:not(.gv-abrir-menu):not(.gv-menu-toggle) .elementor-button-wrapper {
    width: 100%;
  }

  /* Las tiras de botones y pildoras se apilan.
     Se apunta por contenido y no solo por clase: los grupos de botones del
     original no siempre llevan la clase de tira, y quedaba uno a ancho
     completo y el de al lado a media pantalla. Fuera la hamburguesa, que es
     un icono cuadrado y debe seguir siendolo. */
  body.gv-shell .gv-tira,
  body.gv-shell .gv-pildoras,
  body.gv-shell .gv-c:not(.gv-burger-wrap):not(.gv-pad):not(.gv-menu-cabeza):has(> .gv-w.elementor-widget-button) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.gv-shell .gv-tira>*,
  body.gv-shell .gv-pildoras>*,
  body.gv-shell .gv-c:not(.gv-burger-wrap):not(.gv-pad):not(.gv-menu-cabeza):has(> .gv-w.elementor-widget-button)>* {
    width: 100% !important;
  }

  /* La cabecera queda fuera de todo esto: lleva su propio boton y al apilarse
     partia el logotipo y la hamburguesa en dos filas. */
  /* La cabecera de cada grupo del menu tampoco: el rotulo y su flecha van en
     la misma linea. */
  body.gv-shell .gv-menu-cabeza {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* El rotulo no puede ir al 100 % aqui: empujaba la flecha a la linea de
     abajo. Ocupa lo que sobre y la flecha conserva su cuadrado. */
  body.gv-shell .gv-menu-cabeza>.gv-menu-nivel1 {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.gv-shell .gv-menu-cabeza>.gv-menu-nivel1 .elementor-button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  body.gv-shell .gv-menu-cabeza>.gv-menu-toggle {
    width: auto !important;
    flex: 0 0 auto;
  }

  body.gv-shell .gv-menu-cabeza>.gv-menu-toggle .elementor-button {
    width: 44px;
  }

  body.gv-shell .gv-header .gv-c {
    flex-direction: row !important;
    align-items: center !important;
  }

  body.gv-shell .gv-header .gv-c>* {
    width: auto !important;
  }

  body.gv-shell .gv-header .gv-w.elementor-widget-button {
    width: auto !important;
  }

  /* La hamburguesa conserva su cuadrado de 42 px (ver mas arriba). */

  /* ---- Contenedores: un solo margen lateral -------------------------
     El 5 % dejaba 19,5 px en un movil de 390 y 32 px en uno de 640: el mismo
     bloque se veia con aire distinto segun el telefono. Se fija en 20 px. */
  body.gv-shell .gv-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.gv-shell .gv-sec>.e-con-inner,
  body.gv-shell .gv-sec {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Tarjetas: menos aire por dentro, que en 350 px de ancho util cada pixel
     de padding es un caracter menos por linea. */
  body.gv-shell .gv-card,
  body.gv-shell .gv-card-entrada,
  body.gv-shell .gv-caso {
    padding: 18px !important;
  }

  /* Rejillas a una columna, sin excepciones */
  body.gv-shell .gv-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Tarjetas de tratamiento centradas ---------------------------
     En una sola columna, un icono de 96 px pegado a la izquierda con el
     rotulo debajo deja la tarjeta descompensada: mucho aire muerto a la
     derecha. Centradas leen como lo que son, una ficha por especialidad.
     Se reconocen por llevar baldosa: son justamente las de tratamiento,
     tecnica y compromiso. */
  body.gv-shell .gv-card:has(.gv-baldosa),
  body.gv-shell .gv-c.gv-clickable:has(.gv-baldosa) {
    align-items: center !important;
    text-align: center !important;
  }

  body.gv-shell .gv-card:has(.gv-baldosa) .gv-baldosa,
  body.gv-shell .gv-c.gv-clickable:has(.gv-baldosa) .gv-baldosa {
    margin-left: auto;
    margin-right: auto;
  }

  body.gv-shell .gv-card:has(.gv-baldosa) .elementor-heading-title,
  body.gv-shell .gv-card:has(.gv-baldosa) .gv-w.elementor-widget-text-editor,
  body.gv-shell .gv-card:has(.gv-baldosa) .gv-w.elementor-widget-text-editor p,
  body.gv-shell .gv-c.gv-clickable:has(.gv-baldosa) .elementor-heading-title {
    text-align: center !important;
  }

  /* El hero del tratamiento tambien: titulo arriba, imagen centrada debajo. */
  body.gv-shell .gv-tr-img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Formularios: campos a ancho completo aunque el widget pida 50 % */
  body.gv-shell .gv-form .elementor-field-group {
    width: 100% !important;
  }
}

/* Tablet: dos columnas y el mismo margen lateral en todas las bandas */
@media (min-width:768px) and (max-width:1024px) {
  body.gv-shell .gv-pad {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  body.gv-shell .gv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.gv-shell .gv-w.elementor-widget-heading h1.elementor-heading-title,
  body.gv-shell .gv-w.elementor-widget-theme-post-title h1.elementor-heading-title {
    font-size: 42px !important;
  }
}

/* Imagen suelta dentro del cuerpo de una pagina derivada.
   A tamano natural, una foto de 1500 px de alto convertia la ficha de clinica
   en veintiun mil pixeles de pagina. Se acota el alto y se recorta al centro,
   que es donde esta el motivo en todas ellas. */
body.gv-shell .gv-sec>.e-con-inner>.gv-w.elementor-widget-image>.gv-w.elementor-widget-container>img,
body.gv-shell .gv-sec>.e-con-inner>.gv-col>.gv-w.elementor-widget-image>.gv-w.elementor-widget-container>img {
  max-height: 460px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width:767px) {

  body.gv-shell .gv-sec>.e-con-inner>.elementor-widget-image>.elementor-widget-container>img,
  body.gv-shell .gv-sec>.e-con-inner>.gv-col>.elementor-widget-image>.elementor-widget-container>img {
    max-height: 300px;
  }
}

/* OJO: aqui va 'body.gv-shell.gv-clinica' SIN espacio. Con espacio se pide
   un descendiente con esa clase, y la clase esta EN el body: el bloque
   entero no casaba con nada y el calco no se aplicaba. */
/* ================================================ FICHA DE CLINICA
   Calco del original. Todo lo de aqui vive bajo .gv-clinica, que envuelve solo
   estas dos paginas: los colores y la tipografia del original no se filtran al
   resto del sitio y el calco se revierte borrando este bloque.

   Lo que se copia del original: banda lila a sangre, titulares en morado y
   centrados, cuerpo centrado, boton principal verde y las tarjetas de resena.
   ================================================================== */

/* Hero sobre banda lila, a sangre */
body.gv-shell .gv-clinica-hero {
  background: #E7D5F0 !important;
}

body.gv-shell .gv-clinica-hero .gv-italic-marca .elementor-heading-title {
  color: #2E2333;
}

body.gv-shell .gv-clinica-hero .gv-italic-marca .elementor-heading-title em {
  font-style: italic;
  color: var(--gv-brand);
}

body.gv-shell .gv-clinica-foto img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--gv-r-img);
  display: block;
}

/* Titulares en morado y cuerpo centrado, como el original.
   Se aplica por descendencia y se exceptua lo que el original tampoco centra:
   el hero, el cuerpo del articulo, las resenas y la tarjeta de la directora.
   Apuntar solo a los hijos directos de la seccion no bastaba: casi todo el
   contenido cuelga de un envoltorio intermedio (Medido, Row, Card). */
/* body.gv-shell.gv-clinica .gv-w.elementor-widget-heading .elementor-heading-title {
  color: var(--gv-brand-mid);
  text-align: center;
} */

body.gv-shell.gv-clinica .gv-w.elementor-widget-text-editor {
  text-align: center;
}

/* Excepciones */
body.gv-shell.gv-clinica .gv-clinica-hero .gv-w .elementor-heading-title {
  text-align: left;
  color: #2E2333;
}

body.gv-shell.gv-clinica .gv-articulo .elementor-heading-title,
body.gv-shell.gv-clinica .gv-articulo .gv-w.elementor-widget-text-editor {
  text-align: left;
}

body.gv-shell.gv-clinica .gv-articulo .elementor-heading-title {
  color: var(--gv-ink-dark);
}

body.gv-shell.gv-clinica .gv-resena .gv-w.elementor-widget-text-editor,
body.gv-shell.gv-clinica .gv-directora .gv-w.elementor-widget-text-editor {
  text-align: left !important;
}

body.gv-shell.gv-clinica .gv-num .elementor-heading-title,
body.gv-shell.gv-clinica .gv-estrellas .elementor-heading-title,
body.gv-shell.gv-clinica .gv-kicker .elementor-heading-title {
  text-align: left;
}

body.gv-shell.gv-clinica .gv-num .elementor-heading-title {
  color: var(--gv-brand) !important;
}

body.gv-shell.gv-clinica .gv-estrellas .elementor-heading-title {
  color: #F4B400 !important;
}

/* Las tarjetas del cuerpo (equipo, pasos) conservan su alineacion */
body.gv-shell.gv-clinica .gv-card .elementor-heading-title {
  color: var(--gv-ink-dark);
}

/* Una imagen suelta dentro de la ficha no puede comerse la pantalla.
   Se apunta a la estructura real: el <img> cuelga directo del widget, sin el
   .gv-w.elementor-widget-container intermedio que si aparece en otras plantillas.
   Quedan fuera las baldosas, los logotipos, los avatares y la foto de la
   directora, que tienen medida propia. */
body.gv-shell.gv-clinica .gv-col>.gv-w.elementor-widget-image img {
  max-height: 420px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

body.gv-shell.gv-clinica .gv-marca img,
body.gv-shell.gv-clinica .gv-baldosa img,
body.gv-shell.gv-clinica .gv-directora-foto img,
body.gv-shell.gv-clinica .gv-avatar img {
  max-height: none;
  object-fit: contain;
}

body.gv-shell.gv-clinica .gv-directora-foto img {
  object-fit: cover;
}

/* Valoracion en una linea, con su filo */
body.gv-shell .gv-valoracion {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center;
}

body.gv-shell .gv-valoracion>.gv-c {
  width: auto !important;
  flex: 0 0 auto;
}

body.gv-shell .gv-valoracion>.gv-c+.gv-c {
  border-left: 1px solid var(--gv-line-2);
  padding-left: 24px;
}

body.gv-shell .gv-valoracion .gv-num .elementor-heading-title {
  font-size: 44px !important;
  line-height: 1 !important;
}

body.gv-shell .gv-estrellas .elementor-heading-title {
  font-size: 20px;
  letter-spacing: .08em;
  line-height: 1.2;
}

/* Resenas: tira que se desplaza, con la misma mecanica que los casos */
body.gv-shell .gv-resenas {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--gv-line-2) transparent;
}

body.gv-shell .gv-resenas::-webkit-scrollbar {
  height: 6px;
}

body.gv-shell .gv-resenas::-webkit-scrollbar-thumb {
  background: var(--gv-line-2);
  border-radius: 99px;
}

body.gv-shell .gv-resena {
  flex: 0 0 clamp(240px, 30%, 320px);
  width: auto !important;
  scroll-snap-align: start;
  text-align: left;
}

body.gv-shell .gv-resena .gv-w.elementor-widget-text-editor {
  text-align: left !important;
  font-size: 14px;
  line-height: 1.6;
}

/* La directora: tarjeta clara con la foto en circulo y su chapa */
body.gv-shell .gv-directora {
  background: #EEF2FB !important;
  border-color: #DCE4F5 !important;
}

body.gv-shell .gv-directora .gv-w.elementor-widget-text-editor {
  text-align: left !important;
  color: var(--gv-text-3);
}

body.gv-shell .gv-directora .elementor-heading-title {
  text-align: left !important;
  color: var(--gv-text) !important;
}

body.gv-shell .gv-directora-col {
  position: relative;
  align-items: center;
}

body.gv-shell .gv-directora-foto img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  background: #E7D5F0;
  display: block;
  margin-inline: auto;
}

body.gv-shell .gv-directora-chapa {
  background: #FFFFFF !important;
  border-radius: 999px !important;
  margin-top: -22px;
  position: relative;
  z-index: 2;
  text-align: center;
  box-shadow: 0 6px 20px rgba(46, 35, 51, .10);
}

body.gv-shell .gv-directora-chapa .elementor-heading-title {
  text-align: center !important;
}

@media (max-width:767px) {
  body.gv-shell .gv-directora-foto img {
    width: 160px;
    height: 160px;
  }
}

/* Boton de WhatsApp: el verde es del original y no se hereda del kit */
body.gv-shell .gv-wa .elementor-button {
  background: #22A45D !important;
  color: #FFFFFF !important;
}

body.gv-shell .gv-wa .elementor-button:hover {
  background: #1B8449 !important;
}

/* ---- Cabecera propia de cada clinica --------------------------------
   Vitalbene y Vitalcoy no llevan la cabecera del grupo: llevan la suya, con
   su logotipo, el reclamo y el sello. Una sola plantilla para las dos; lo que
   cambia lo pone gv-clinicas.php al renderizar. */
body.gv-shell .gv-header-clinica {
  background: #FFFFFF !important;
}

/* El logotipo es un widget de imagen dentro de un contenedor enlazado; sin
   altura fija ocupaba media cabecera, porque el SVG no trae medida propia. */
body.gv-shell .gv-cl-logo-box {
  width: auto !important;
  flex: 0 0 auto;
}

body.gv-shell .gv-cl-logo-w {
  width: auto !important;
}

body.gv-shell .gv-cl-logo-w img {
  height: 46px;
  width: auto;
  max-width: none;
  display: block;
}

body.gv-shell .gv-cl-sello-w {
  width: auto !important;
  flex: 0 0 auto;
}

body.gv-shell .gv-cl-sello-w img {
  height: 50px;
  width: auto;
  max-width: none;
  display: block;
}

body.gv-shell .gv-cl-lema {
  flex: 1 1 auto;
  min-width: 0;
}

body.gv-shell .gv-cl-lema .elementor-heading-title {
  font-family: var(--gv-sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--gv-brand-mid);
  text-align: center;
  line-height: 1.3;
}

/* La hamburguesa de la ficha de clinica se ve SIEMPRE, tambien en
   escritorio: esta cabecera no lleva menu desplegado, igual que el
   original. La regla general la esconde por encima de 1280. */
body.gv-shell .gv-header-clinica .gv-burger-wrap {
  flex: 0 0 auto;
  display: flex !important;
}

/* El reclamo del centro es lo primero que sobra cuando falta sitio */
@media (max-width:900px) {
  body.gv-shell .gv-cl-lema {
    display: none !important;
  }
}

@media (max-width:767px) {
  body.gv-shell .gv-cl-logo-w img {
    height: 32px;
  }

  body.gv-shell .gv-cl-sello-w img {
    height: 34px;
  }
}

@media (max-width:479px) {
  body.gv-shell .gv-cl-sello-w {
    display: none !important;
  }
}

/* Miniaturas del widget de entradas: el recorte lo hace el contenedor con
   padding-bottom y la imagen va posicionada dentro. Sin object-fit y sin
   ancho, la imagen salia a su tamano natural (hasta 926 px) y se derramaba
   fuera de la tarjeta. */
body.gv-shell .gv-w.elementor-widget-posts .elementor-post__thumbnail {
  overflow: hidden;
}

body.gv-shell .gv-w.elementor-widget-posts .elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  max-width: 100%;
}

/* ---- Indice del blog ------------------------------------------------
   Buscador, temas con icono y tarjetas de entrada. La pagina alterna bloques
   en vez de repetir una rejilla, que es lo que la hacia parecer un archivo. */
body.gv-shell .gv-buscador {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}

body.gv-shell .gv-buscador input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--gv-border-2);
  border-radius: var(--gv-r-pill);
  background: var(--gv-surface);
  font-family: var(--gv-sans);
  font-size: 15px;
  color: var(--gv-text);
}

body.gv-shell .gv-buscador input[type="search"]::placeholder {
  color: var(--gv-text-4);
}

body.gv-shell .gv-buscador input[type="search"]:focus {
  outline: 3px solid var(--gv-brand-mid);
  outline-offset: 2px;
  border-color: var(--gv-brand);
}

body.gv-shell .gv-buscador button {
  flex: 0 0 auto;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--gv-r-pill);
  background: var(--gv-brand);
  color: #FFFFFF;
  cursor: pointer;
  font-family: var(--gv-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}

body.gv-shell .gv-buscador button:hover {
  background: var(--gv-brand-deep);
}

@media (max-width:479px) {
  body.gv-shell .gv-buscador {
    flex-direction: column;
  }

  body.gv-shell .gv-buscador button {
    width: 100%;
  }
}

/* Tarjeta de tema: icono arriba y el pie de accion siempre al fondo, para que
   las seis alineen aunque el texto ocupe una linea mas. */
body.gv-shell .gv-tema {
  display: flex;
  flex-direction: column;
}

body.gv-shell .gv-tema>.gv-w.elementor-widget-text-editor:last-child {
  margin-top: auto;
}

body.gv-shell a.gv-tema {
  text-decoration: none;
}

/* Destacados: tres tarjetas con imagen, mas grandes que las del archivo */
body.gv-shell .gv-posts-destacado .elementor-post__thumbnail {
  padding-bottom: 62% !important;
}

body.gv-shell .gv-w.elementor-widget-posts.gv-posts-destacado .elementor-post__title,
body.gv-shell .gv-w.elementor-widget-posts.gv-posts-destacado .elementor-post__title a {
  font-size: 20px !important;
  line-height: 1.3 !important;
}

@media (max-width:767px) {

  body.gv-shell .elementor-widget-posts.gv-posts-destacado .elementor-post__title,
  body.gv-shell .elementor-widget-posts.gv-posts-destacado .elementor-post__title a {
    font-size: 17px !important;
  }
}

/* ---- Portada del articulo -------------------------------------------
   Foto a sangre con el titulo encima, como en el original. El velo lo pone
   Elementor; aqui solo se asegura que el texto quede por delante y que el
   titular no se coma la pantalla en un movil. */
body.gv-shell .gv-portada {
  position: relative;
}

body.gv-shell .gv-portada .e-con-inner {
  position: relative;
  z-index: 2;
}

body.gv-shell .gv-portada .elementor-heading-title {
  text-shadow: 0 2px 18px rgba(28, 18, 33, .35);
}

@media (max-width:767px) {
  body.gv-shell .gv-portada .elementor-heading-title {
    font-size: 28px !important;
  }
}

/* ---- Barra lateral del blog -----------------------------------------
   Las categorias como lista de fichas, igual que en el original, pero con las
   formas del sistema. En movil cae debajo del articulo. */
body.gv-shell .gv-barra-col {
  flex: 0 0 280px;
}

body.gv-shell .gv-barra>.gv-w.elementor-widget-heading .elementor-heading-title,
body.gv-shell .gv-barra-ultimas>.gv-w.elementor-widget-heading .elementor-heading-title {
  font-size: 20px !important;
  margin-bottom: 6px;
}

body.gv-shell .gv-barra-item {
  margin: 0 !important;
}

body.gv-shell .gv-barra-item p {
  margin: 0;
}

body.gv-shell .gv-barra-item a {
  display: block;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--gv-pill);
  color: var(--gv-text-45) !important;
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.gv-shell .gv-barra-item a:hover {
  background: var(--gv-surface);
  border-color: var(--gv-border-2);
  color: var(--gv-brand-mid) !important;
}

/* Las ultimas entradas de la barra son un apoyo, no el contenido: miniatura
   contenida y titulo al tamano del texto secundario. Con la clase del widget
   delante para ganar a la escala del kit. */
body.gv-shell .gv-posts-barra .elementor-post {
  border: 0;
  padding: 0;
  margin-bottom: 14px;
}

body.gv-shell .gv-posts-barra .elementor-post__card {
  border: 1px solid var(--gv-border);
  border-radius: 16px;
  overflow: hidden;
}

body.gv-shell .gv-w.elementor-widget-posts.gv-posts-barra .elementor-post__title,
body.gv-shell .gv-w.elementor-widget-posts.gv-posts-barra .elementor-post__title a {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

body.gv-shell .gv-posts-barra .elementor-post__thumbnail {
  padding-bottom: 56% !important;
}

body.gv-shell .gv-posts-barra .elementor-post__thumbnail__link {
  margin-bottom: 8px;
}

body.gv-shell .gv-posts-barra .elementor-post__text {
  padding: 0 12px 12px;
}

@media (max-width:1024px) {
  body.gv-shell .gv-barra-col {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

/* ==================================================== ARTICULO DEL BLOG
   Un articulo se lee, no se hojea. Tres cosas cambian aqui:

   1. La medida. La columna iba apoyada a la izquierda y dejaba media pantalla
      vacia a la derecha; ahora va centrada y acotada a unos 70 caracteres,
      que es donde el ojo encuentra el principio de la linea siguiente sin
      perderse.
   2. El aire entre secciones. Un H2 arrancaba a 24 px del parrafo anterior:
      exactamente el mismo hueco que hay entre dos parrafos, asi que no se veia
      donde acababa un asunto y empezaba el siguiente. Ahora respira.
   3. El corte. Cada seccion abre con una linea fina sobre el titular: marca el
      cambio sin anadir un color ni un icono mas.
   ==================================================================== */
/* La medida de lectura la da el reparto de la fila: el ancho del contenido
   menos los 280 px de la barra y los 44 del hueco. A 1440 de pantalla son
   816 px, unos 68 caracteres. Cuando estaba fijada a 760 px centrados, la
   columna del articulo no dejaba sitio a la barra lateral y esta caia al
   final de la pagina. */
body.gv-shell .gv-col.gv-articulo {
  width: 100%;
  min-width: 0;
}

/* EL TECHO VA EN LA COLUMNA, NO EN EL TEXTO.
   Antes lo llevaban los parrafos, y en cuanto la fila daba mas de 1.144 px
   —a partir de 1.835 px de pantalla— el texto se paraba ahi mientras las
   fotos, las rejillas y los videos seguian hasta el borde: en un monitor de
   2.560 la imagen sobresalia 568 px por la derecha del parrafo de al lado.
   Puesto en la columna, todo lo que va dentro comparte ancho por definicion y
   ya no hay dos anchos que cuadrar.

   Solo la columna del cuerpo: se pide gv-b560 ademas de gv-articulo porque la
   portada de la entrada usa .gv-articulo tambien, para el titular, y ahi el
   techo no pinta nada. */
body.gv-shell .gv-col.gv-b560.gv-articulo {
  max-width: var(--gv-medida);
}

/* Con la columna topada sobra sitio en la fila, y hay que decidir donde cae.
   Repartido a los extremos: el articulo queda alineado con el borde izquierdo
   de todas las demas secciones de la pagina y la barra con el derecho, asi que
   los margenes del sitio siguen siendo los mismos de arriba abajo y lo que
   crece es el hueco de en medio. Centrarlo metia el bloque hacia dentro y se
   veia desalineado respecto del resto. Por debajo de 1.835 px no sobra nada y
   esto no hace nada. */
body.gv-shell .gv-c:has(>.gv-col.gv-b560.gv-articulo) {
  justify-content: space-between;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--gv-text-2);
}

body.gv-shell .gv-w.elementor-widget-theme-post-content p {
  margin: 0 0 1.15em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content ul,
body.gv-shell .gv-w.elementor-widget-theme-post-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.35em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content li {
  margin-bottom: .55em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content li::marker {
  color: var(--gv-brand);
}

/* Separacion entre secciones */
body.gv-shell .gv-w.elementor-widget-theme-post-content h2 {
  margin: 3.1em 0 .7em;
  padding-top: 1.5em;
  border-top: 1px solid var(--gv-border);
  line-height: 1.2;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content h3 {
  margin: 2.1em 0 .55em;
  line-height: 1.3;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content h4 {
  margin: 1.7em 0 .45em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content img {
  border-radius: var(--gv-r-img);
  margin: 1.6em 0;
  height: auto;
  /* Sin el tope, una imagen de 926 px se salia de una columna de 527 en
     tablet y movil: el ancho lo trae el propio atributo del <img>. */
  max-width: 100%;
}

/* Y lo mismo para cualquier imagen incrustada en un texto del contenido */
body.gv-shell .gv-w.elementor-widget-text-editor img,
body.gv-shell .gv-w .elementor-tab-content img {
  max-width: 100%;
  height: auto;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--gv-lilac);
  color: var(--gv-text);
  font-size: 1.06em;
}

/* La primera frase entra un punto mas grande: da pie a la lectura */
body.gv-shell .gv-w.elementor-widget-theme-post-content>p:first-child {
  font-size: 1.08em;
  color: var(--gv-text);
}

@media (max-width:767px) {
  body.gv-shell .gv-w.elementor-widget-theme-post-content {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  body.gv-shell .gv-w.elementor-widget-theme-post-content h2 {
    margin: 2.2em 0 .6em;
    padding-top: 1.1em;
  }

  body.gv-shell .gv-w.elementor-widget-theme-post-content h3 {
    margin: 1.6em 0 .5em;
  }
}

/* ---- El contenido del panel se ajusta al panel --------------------
   Elementor dimensiona el interior del popup contra el ancho de la VENTANA
   (390 px), no contra el de la caja del panel (343 px). El resultado: los
   ultimos 23 px de cada fila caian fuera de la caja y se veian cortados la
   flecha de cada submenu y los tres botones del pie.

   Basta con atar el interior a su contenedor real. */
/* El ancho del panel lo fija ahora Elementor (ver popup-menu.php); aqui solo
   se impide que el interior lo sobrepase, que era lo que recortaba las flechas
   de los submenus y los botones del pie. Imponer width:100% volveria a pelear
   con la medida del popup. */
body.gv-shell .dialog-widget-content .dialog-message>.elementor:has(.gv-menu-popup),
body.gv-shell .dialog-widget-content .dialog-message>.elementor:has(.gv-menu-popup)>.gv-c {
  width: 100% !important;
  max-width: 100% !important;
}

body.gv-shell .dialog-widget-content:has(.gv-menu-popup) .dialog-message {
  max-width: 100% !important;
}

/* Panel de altura completa: el contenido se desplaza dentro, no la pagina. */
body.gv-shell .dialog-widget-content:has(.gv-menu-popup) .dialog-message {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.gv-shell .gv-menu-popup {
  min-height: 100%;
}

/* Y que nada de dentro pueda volver a sobresalir */
body.gv-shell .gv-menu-popup,
body.gv-shell .gv-menu-popup * {
  max-width: 100%;
}

/* ---- Submenus del panel movil, plegados -----------------------------
   Con los cuatro abiertos el panel medía mas de tres pantallas. Ahora cada
   grupo se abre por separado; el rotulo sigue siendo enlace y la flecha es lo
   unico que pliega. */
body.gv-shell .gv-menu-grupo .gv-menu-sub {
  display: none !important;
}

body.gv-shell .gv-menu-grupo[data-abierto="si"] .gv-menu-sub {
  display: flex !important;
}

body.gv-shell .gv-menu-cabeza {
  width: 100%;
}

body.gv-shell .gv-menu-cabeza .gv-menu-nivel1 {
  flex: 1 1 auto;
  min-width: 0;
}

body.gv-shell .gv-menu-toggle {
  flex: 0 0 auto;
  width: auto !important;
}

body.gv-shell .gv-menu-toggle .elementor-button {
  width: 44px;
  height: 44px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.gv-shell .gv-menu-toggle .elementor-button-text {
  display: none;
}

body.gv-shell .gv-menu-toggle .elementor-button-content-wrapper {
  gap: 0;
}

body.gv-shell .gv-menu-toggle .elementor-button-icon {
  margin: 0 !important;
  font-size: 13px;
  display: inline-flex;
  transition: transform .22s cubic-bezier(.22, .7, .18, 1);
}

body.gv-shell .gv-menu-grupo[data-abierto="si"] .gv-menu-toggle .elementor-button-icon {
  transform: rotate(180deg);
}

body.gv-shell .gv-menu-toggle .elementor-button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.gv-shell .gv-menu-toggle .elementor-button-icon {
    transition: none;
  }
}

/* Pildora con enlace: el <a> ocupa toda la pildora, no solo el texto. */
body.gv-shell .gv-pildora-enlace {
  padding: 0 !important;
}

body.gv-shell .gv-pildora-enlace p {
  margin: 0;
}

body.gv-shell .gv-pildora-enlace a {
  display: block;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--gv-brand-mid) !important;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

body.gv-shell .gv-pildora-enlace a:hover {
  background: var(--gv-brand);
  color: #FFFFFF !important;
}

/* Fila de tecnica enlazada en la ficha de implantes */
body.gv-shell a.gv-fila-tecnica {
  text-decoration: none;
}

body.gv-shell a.gv-fila-tecnica:hover .elementor-heading-title {
  color: var(--gv-brand) !important;
}

/* ---- Desplegables: una sola caja ------------------------------------
   La clase .gv-w .elementor-field la lleva el ENVOLTORIO del desplegable, no el
   <select>. Como la regla del borde apunta a .gv-w .elementor-field, el envoltorio
   se llevaba el borde y el <select> de dentro recibia ademas el suyo propio
   de Elementor: dos cajas, una dentro de otra, y 70 px de alto frente a los
   55 px de un campo de texto.

   El envoltorio hace de caja y el <select> va sin borde ni fondo. */
/* Con .gv-w .elementor-field delante: la regla del relleno apunta a .elementor-field
   y va despues en la hoja, asi que sin igualar especificidad ganaba ella y el
   desplegable quedaba 28 px mas alto que un campo de texto. */
body.gv-shell .gv-w .elementor-field-group .elementor-field.elementor-select-wrapper {
  padding: 0 !important;
  position: relative;
  display: block;
}

body.gv-shell .gv-w .elementor-field-group .elementor-select-wrapper select {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 100%;
  height: auto;
  padding: 14px 38px 14px 14px !important;
  font-family: var(--gv-sans);
  font-size: 14.5px;
  color: var(--gv-text);
  appearance: none;
  -webkit-appearance: none;
}

body.gv-shell .gv-w .elementor-field-group .elementor-select-wrapper select:focus {
  outline: none;
}

/* La flecha, centrada y sin robar sitio al texto */
body.gv-shell .gv-w .elementor-field-group .select-caret-down-wrapper {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

body.gv-shell .gv-w .elementor-field-group .select-caret-down-wrapper svg {
  width: 11px;
  height: auto;
}

/* Enlaces del pie en blanco puro: sobre el morado oscuro del pie, el lila de
   marca se quedaba en 4,9:1 y competia con el texto corrido. En blanco son
   14:1 y se distinguen del parrafo por el subrayado, no por el color. */
body.gv-shell .gv-dark a:not(.elementor-button),
body.gv-shell .gv-footer a:not(.elementor-button) {
  color: #FFFFFF !important;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: rgba(255, 255, 255, .45);
  transition: text-decoration-color .18s ease;
}

body.gv-shell .gv-dark a:not(.elementor-button):hover,
body.gv-shell .gv-footer a:not(.elementor-button):hover {
  color: #FFFFFF !important;
  text-decoration-color: #FFFFFF;
}

/* Los destinos del menu son botones: van sin subrayado, que ya se distinguen
   por el fondo al pasar por encima. */
body.gv-shell .gv-menu-popup a.elementor-button {
  text-decoration: none !important;
}

/* Enlaces */
body.gv-shell a {
  color: var(--gv-brand);
  text-decoration: none;
}

body.gv-shell a:hover {
  color: var(--gv-text);
}

body.gv-shell .gv-w.elementor-widget-theme-post-content a,
body.gv-shell .gv-w.elementor-widget-text-editor a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

body.gv-shell ::selection {
  background: var(--gv-lilac);
  color: var(--gv-text);
}

/* Foco visible: el prototipo no lo define y es requisito de accesibilidad */
body.gv-shell a:focus-visible,
body.gv-shell button:focus-visible,
body.gv-shell input:focus-visible,
body.gv-shell select:focus-visible,
body.gv-shell textarea:focus-visible,
body.gv-shell [tabindex]:focus-visible {
  outline: 3px solid var(--gv-brand-mid);
  outline-offset: 2px;
  border-radius: var(--gv-r-field);
}

/* El techo de lectura ya no se pone aqui. Estaba sobre los parrafos y las
   listas, y topar solo el texto era justo lo que descuadraba la columna: las
   fotos y las rejillas no lo llevaban y se salian por la derecha. Ahora lo
   lleva la propia columna (.gv-col.gv-b560.gv-articulo, mas arriba), asi que
   el texto y todo lo demas miden lo mismo sin tener que enumerarlos. */

/* Escala propia para los encabezados DENTRO de un articulo.
   Heredaban la del kit (H2 a 40 px), que esta pensada para titulares de
   seccion: junto a un cuerpo de 15,5 px el salto era enorme y la lectura se
   rompia en cada subtitulo. Aqui la jerarquia es de articulo, no de portada. */
body.gv-shell .gv-w.elementor-widget-theme-post-content h2,
body.gv-shell .gv-w.elementor-widget-text-editor h2 {
  font-size: 27px;
  line-height: 1.32;
  margin: 1.6em 0 .5em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content h3,
body.gv-shell .gv-w.elementor-widget-text-editor h3 {
  font-size: 21px;
  line-height: 1.3;
  margin: 1.4em 0 .4em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content h4,
body.gv-shell .gv-w.elementor-widget-text-editor h4 {
  font-size: 17px;
  line-height: 1.35;
  margin: 1.2em 0 .4em;
}

body.gv-shell .gv-w.elementor-widget-theme-post-content h2 strong,
body.gv-shell .gv-w.elementor-widget-theme-post-content h3 strong,
body.gv-shell .gv-w.elementor-widget-text-editor h2 strong,
body.gv-shell .gv-w.elementor-widget-text-editor h3 strong {
  font-size: inherit;
  font-weight: 600;
}

/* Botones */
body.gv-shell .gv-w .elementor-button {
  border-radius: var(--gv-r-pill);
  font-family: var(--gv-sans);
}

body.gv-shell .gv-btn-blanco .elementor-button {
  background: #FFFFFF;
  color: var(--gv-brand-mid);
  box-shadow: 0 14px 30px rgba(30, 10, 40, .30);
}

body.gv-shell .gv-btn-blanco .elementor-button:hover {
  background: var(--gv-pill);
  transform: translateY(-2px);
}

body.gv-shell .gv-btn-linea .elementor-button {
  background: transparent;
  color: var(--gv-text);
  border: 1px solid var(--gv-text);
}

body.gv-shell .gv-btn-linea .elementor-button:hover {
  background: var(--gv-ink-dark);
  color: #FBF8FC;
}

body.gv-shell .gv-btn-linea-clara .elementor-button {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .6);
}

body.gv-shell .gv-btn-linea-clara .elementor-button:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}

body.gv-shell .gv-btn-lila .elementor-button {
  background: var(--gv-lilac);
  color: var(--gv-ink-dark);
}

body.gv-shell .gv-btn-lila .elementor-button:hover {
  background: #FFFFFF;
  color: var(--gv-ink-dark);
}

/* Tarjetas */
body.gv-shell .gv-card {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-card);
}

body.gv-shell .gv-card-hover {
  transition: border-color .22s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, .7, .18, 1);
}

body.gv-shell .gv-card-hover:hover {
  border-color: var(--gv-lilac) !important;
  box-shadow: 0 14px 32px rgba(74, 40, 84, .08);
}

/* La tarjeta entera es un enlace: tiene que decirlo el cursor y tiene que
   poder alcanzarse con el teclado. */
body.gv-shell a.gv-clickable {
  text-decoration: none;
  display: flex;
}

/* cursor:pointer SOLO en enlaces reales. Aplicado a .gv-clickable a secas
   disimulaba las tarjetas que se habian quedado como <div>: parecian
   pulsables y no lo eran. Asi, si vuelve a faltar el html_tag, se nota.*/
body.gv-shell a.gv-clickable {
  cursor: pointer;
}

body.gv-shell .gv-clickable {
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, .7, .18, 1), box-shadow .3s ease, border-color .25s ease;
}

body.gv-shell .gv-clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(74, 40, 84, .10);
  border-color: var(--gv-brand) !important;
}

/* Pildora de texto (tecnicas en portada, categorias del blog) */
body.gv-shell .gv-pildora p {
  margin: 0;
  display: inline-block;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--gv-pill);
  color: var(--gv-brand-mid);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  width: 100%;
}

body.gv-shell .gv-pildora-borde p {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border-2);
  color: var(--gv-text-45);
  font-size: 12.5px;
  font-weight: 400;
}

body.gv-shell .gv-tira {
  flex-wrap: wrap !important;
}

body.gv-shell .gv-tira>.gv-w.elementor-widget {
  width: auto !important;
  flex: 0 0 auto;
}

/* Imagenes */
body.gv-shell .gv-avatar img,
body.gv-shell .gv-avatar-lg img {
  border-radius: 50% !important;
  object-fit: cover;
}

body.gv-shell .gv-thumb img {
  object-fit: cover;
}

body.gv-shell .gv-icon img {
  object-fit: contain;
}

/* Retratos del equipo en 4/3, no en 3/4.
   El prototipo pedia 3/4, pero las fotos reales son apaisadas (1200x852,
   1439x809...) y el recorte vertical dejaba a media plantilla fuera de cuadro:
   se veia el rotulo de la clinica y la persona cortada por el borde. */
body.gv-shell .gv-photo img {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--gv-r-photo);
}

body.gv-shell .gv-photo-43 img {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--gv-r-photo);
}

body.gv-shell .gv-card-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0;
}

body.gv-shell .gv-card-img-16 img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 0;
}

body.gv-shell .gv-img-alta img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--gv-r-img);
}

/* Imagenes en linea del contenido original.
   El scrapeado trae <img> dentro de los parrafos con el width/height del tema
   antiguo: sin acotarlas desbordan la columna y reservan huecos verticales
   enormes mientras cargan. */
body.gv-shell .gv-w.elementor-widget-text-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gv-r-img);
  display: block;
  margin: 14px 0;
}

/* Tira de logotipos (aseguradoras, marcas).
   Cada uno en su baldosa cuadrada: antes iban a max-height libre, cada uno con
   una altura distinta y ninguno alineado con el de al lado. */
body.gv-shell .gv-logos {
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

body.gv-shell .gv-logos .gv-w.elementor-widget-image {
  width: 120px !important;
  height: 120px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-card);
  padding: 18px;
  transition: border-color .22s ease;
}

body.gv-shell .gv-logos .gv-w.elementor-widget-image:hover {
  border-color: var(--gv-lilac);
}

body.gv-shell .gv-logos .gv-w.elementor-widget-container {
  width: 100%;
  height: 100%;
}

body.gv-shell .gv-logos img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ------------------------------------------------------------- ACORDEON FAQ */
body.gv-shell .gv-faq .elementor-accordion-item {
  border: 1px solid var(--gv-border) !important;
  border-radius: var(--gv-r-card);
  background: var(--gv-surface);
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color .22s ease;
}

body.gv-shell .gv-faq .elementor-accordion-item:has(.elementor-active) {
  border-color: var(--gv-lilac) !important;
}

/* El texto de la pregunta NO esta en el h3: esta en el <a> de dentro, y
   Elementor lo ata a la tipografia "Titular" del kit:
     .gv-w.elementor-widget-accordion .elementor-accordion-title{
       font-size: var(--e-global-typography-primary-font-size) }
   Con el titular a 62 px, cada pregunta salia a 62 px. Fijar solo el h3 no
   sirve de nada porque el hijo lo pisa. */
body.gv-shell .gv-w.elementor-widget-accordion .elementor-accordion-title {
  font-family: var(--gv-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: var(--gv-text);
}

body.gv-shell .gv-faq .elementor-tab-title a {
  color: var(--gv-text);
}

body.gv-shell .gv-faq .elementor-tab-content {
  padding: 0 24px 22px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gv-text-2);
}

body.gv-shell .gv-faq .elementor-accordion-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gv-pill);
  color: var(--gv-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .22s ease, color .22s ease;
}

body.gv-shell .gv-faq .elementor-active .elementor-accordion-icon {
  background: var(--gv-brand);
  color: #FFFFFF;
}

/* ---------------------------------------------------- BARRAS DE VALORACION */
body.gv-shell .gv-barra .elementor-progress-wrapper {
  height: 6px;
  background: var(--gv-ink-line);
  border-radius: 999px;
  overflow: hidden;
}

body.gv-shell .gv-barra .elementor-progress-bar {
  background: var(--gv-lilac);
  height: 6px;
  border-radius: 999px;
}

body.gv-shell .gv-barra .elementor-title {
  font-family: var(--gv-sans);
  font-size: 13px;
  color: var(--gv-on-dark);
  margin-bottom: 8px;
  display: inline-block;
}

body.gv-shell .gv-barra .elementor-progress-percentage {
  font-family: var(--gv-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--gv-lilac);
}

/* Aqui habia un position:sticky con top:104px sobre .gv-ficha, escrito para
   que una ficha de clinica acompanara la lectura. Nunca alcanzo a esa ficha:
   .gv-ficha no aparece en ninguna maqueta de Elementor ni en ningun contenido
   —comprobado en toda la base de datos—, la pone SOLO el troceador, y es la
   tarjeta de las rejillas del cuerpo de las entradas. El efecto real era que
   cada una de las 28 tarjetas de una entrada se quedaba pegada arriba al
   bajar: las de la primera fila no se iban, la fila siguiente les pasaba por
   encima y el texto de la de debajo quedaba cortado a media frase.
   Si algun dia hace falta una tarjeta que acompane la lectura, se le pone su
   propia clase; .gv-ficha ya tiene dueno. */

/* Tarjetas del widget de entradas, con la linea del prototipo */
body.gv-shell .gv-w .elementor-posts article.elementor-post {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-card);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, .7, .18, 1), box-shadow .3s ease, border-color .25s ease;
}

body.gv-shell .gv-w .elementor-posts article.elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(74, 40, 84, .10);
  border-color: var(--gv-lilac);
}

body.gv-shell .gv-w .elementor-posts .elementor-post__text {
  padding: 22px;
}

body.gv-shell .gv-w .elementor-posts .elementor-post__title,
body.gv-shell .gv-w .elementor-posts .elementor-post__title a {
  font-family: var(--gv-sans) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.22 !important;
  color: var(--gv-text) !important;
  letter-spacing: -0.015em;
}

body.gv-shell .gv-w .elementor-posts .elementor-post__meta-data {
  font-family: var(--gv-sans) !important;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gv-text-4) !important;
}

body.gv-shell .gv-w .elementor-posts .elementor-post__excerpt p {
  font-family: var(--gv-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--gv-text-3) !important;
}

body.gv-shell .gv-w .elementor-posts .elementor-post__read-more {
  font-family: var(--gv-sans) !important;
  font-size: 12px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gv-brand) !important;
  font-weight: 600;
}

body.gv-shell .gv-w .elementor-posts .elementor-post__thumbnail {
  border-radius: 0;
}

/* ---- Partes de widget atadas a la tipografia del kit --------------------
   Elementor enlaza varias partes internas a --e-global-typography-primary-*,
   que aqui es el titular de 62 px. Si no se fijan explicitamente, cualquiera
   de ellas puede salir a tamano de portada. Se dejan todas nombradas para que
   el fallo no vuelva por una regla que gane por casualidad. */
body.gv-shell .gv-w.elementor-widget-nav-menu .elementor-nav-menu .elementor-item {
  font-size: 12px;
}

body.gv-shell .gv-w.elementor-widget-table-of-contents .elementor-toc__header {
  font-size: 13px;
}

body.gv-shell .gv-w.elementor-widget-posts .elementor-post__title,
body.gv-shell .gv-w.elementor-widget-posts .elementor-post__title a {
  font-size: 22px;
}

body.gv-shell .gv-w.elementor-widget-progress .elementor-title {
  font-size: 13px;
}

/* Indice de contenidos: hereda el tamano de titular del tema si no se acota */
body.gv-shell .gv-w .elementor-toc__header-title {
  font-family: var(--gv-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gv-text-4) !important;
  line-height: 1.4 !important;
}

body.gv-shell .gv-w .elementor-toc__toggle-button i,
body.gv-shell .gv-w .elementor-toc__toggle-button svg {
  width: 16px;
  height: 16px;
}

body.gv-shell .gv-w .elementor-toc__list-item-text {
  font-family: var(--gv-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.55;
}

body.gv-shell .gv-w .elementor-toc__header {
  padding: 14px 18px;
}

body.gv-shell .gv-w .elementor-toc__body {
  padding: 6px 18px 16px;
}

/* Metadatos de entrada */
body.gv-shell .gv-w.elementor-widget-post-info .elementor-icon-list-text {
  font-family: var(--gv-sans) !important;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gv-text-4) !important;
}

/* Cita de testimonio */
body.gv-shell .gv-quote p {
  font-family: var(--gv-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gv-text-2);
  margin: 0;
}

body.gv-shell .gv-quote-grande p {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gv-text);
}

/* Panel lila de cita */
body.gv-shell .gv-panel {
  background: var(--gv-panel);
  border-radius: var(--gv-r-card);
  padding: 28px 26px;
}

body.gv-shell .gv-panel p {
  font-family: var(--gv-sans);
  font-weight: 600;
  font-size: clamp(20px, 2.4cqw, 25px);
  line-height: 1.3;
  color: var(--gv-brand-deep);
  margin: 0;
}

/* Formulario de contacto */
body.gv-shell .gv-w .elementor-field-group .elementor-field {
  border: 1px solid var(--gv-border-2) !important;
  border-radius: var(--gv-r-field) !important;
  background: var(--gv-bg) !important;
  padding: 14px !important;
  font-family: var(--gv-sans) !important;
  font-size: 14.5px !important;
  color: var(--gv-text) !important;
}

body.gv-shell .gv-w .elementor-field-group>label {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #786C82;
  margin-bottom: 7px;
}

/* Animacion de entrada */
body.gv-anim [data-gv-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22, .7, .18, 1), transform .8s cubic-bezier(.22, .7, .18, 1);
}

body.gv-anim [data-gv-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:reduce) {
  body.gv-anim [data-gv-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Acotado al arbol del sitio. El selector universal alcanzaba tambien al
     panel de Elementor y a cualquier widget que alguien montara a mano. */
  body.gv-shell *,
  body.gv-shell *::before,
  body.gv-shell *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
}

/* ==========================================================================
   CUERPO TROCEADO DE LAS ENTRADAS
   ==========================================================================
   Lo pinta gv-contenido-visual.php, que parte el HTML original de las 137
   entradas en bloques. Aqui solo esta la piel de esos bloques.

   El problema que resuelve: 87 de las 137 entradas no tienen una sola imagen
   y arrastran de 2.000 a 4.700 palabras de parrafos seguidos. En movil eso
   son veinte pantallas identicas. Lo que sigue no quita texto: le da ritmo,
   para que se vea DONDE esta uno y cuanto queda.
*/

:root {
  /* Ancho maximo de la columna del articulo. Son 1.144 px con el cuerpo a
     16,5 px, y no entra hasta los 1.835 px de pantalla: por debajo la columna
     ya mide menos que esto y manda el reparto de la fila.

     Se topa la COLUMNA y no el texto. Cuando topaba el texto, en cuanto la
     fila daba de si el parrafo se paraba en este numero y la foto de al lado
     seguia hasta el borde: dos anchos distintos dentro de la misma columna.
     Aqui arriba solo esta el numero; quien lo usa es la regla de
     .gv-col.gv-b560.gv-articulo. */
  --gv-medida: 1144px;
  /* Aire entre bloques. Crece con la pantalla porque en movil el mismo hueco
     en pixeles se come media pantalla. */
  --gv-aire: clamp(34px, 7vw, 64px);
}

body.gv-shell .gv-cuerpo {
  display: flow-root;
}

/* ------------------------------------------------------------- BLOQUE */
/* Cada <h2> del original abre uno. Es el corte principal: 106 de las 137
   entradas traen tres o mas, asi que la estructura ya estaba escrita en el
   texto; solo que no se veia. */
body.gv-shell .gv-cuerpo .gv-bloque {
  margin: 0 0 var(--gv-aire);
}

body.gv-shell .gv-cuerpo .gv-bloque:last-child {
  margin-bottom: 0;
}

/* El titular del bloque lleva un filo de marca en vez de la linea completa
   de antes: marca el principio sin cortar la pagina en dos. */
body.gv-shell .gv-cuerpo .gv-bloque>h2 {
  position: relative;
  margin: 0 0 .7em;
  padding: 0 0 0 18px;
  border-top: 0;
  line-height: 1.22;
  text-wrap: balance;
}

body.gv-shell .gv-cuerpo .gv-bloque>h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--gv-brand), var(--gv-lilac));
}

/* Un bloque que ya trae rejilla de tarjetas o un dato destacado se apoya
   sobre panel: son los que cortan de verdad la lectura, y el fondo refuerza
   que ahi cambia el registro. Se elige por contenido y no alternando pares e
   impares, que quedaba arbitrario. */
body.gv-shell .gv-cuerpo .gv-bloque:has(.gv-fichas),
body.gv-shell .gv-cuerpo .gv-bloque:has(.gv-dato) {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-r-card);
  padding: clamp(20px, 4vw, 34px);
}

/* Aqui habia un segundo tope, el mismo, sobre los parrafos y las listas de
   dentro de los bloques. Se va por el mismo motivo que el otro: el ancho lo
   decide la columna, y tener el numero repartido en tres sitios era como se
   llego a que el texto y las fotos midieran distinto. Las rejillas, las
   imagenes y los acordeones siguen usando el ancho completo de la columna,
   que es lo que da el respiro; solo que ahora el texto tambien. */

body.gv-shell .gv-cuerpo p {
  text-wrap: pretty;
}

/* --------------------------------------------------------- ENTRADILLA */
/* El primer parrafo entra un punto por encima del cuerpo: da pie a la
   lectura y rompe la uniformidad justo donde mas se nota, que es la primera
   pantalla. */
body.gv-shell .gv-cuerpo .gv-lead {
  font-size: clamp(17px, 1.15em, 20px);
  line-height: 1.6;
  color: var(--gv-text);
  margin-bottom: 1.3em;
}

/* -------------------------------------------------- REJILLA DE TARJETAS */
/* Una lista de cuatro o mas items que empiezan en negrita es una tabla de
   conceptos escrita como lista. En rejilla se lee de un vistazo; en columna
   es otro muro. 520 tarjetas en 40 entradas salen de aqui. */
body.gv-shell .gv-cuerpo .gv-grid.gv-fichas {
  /* Se repite el auto-fit a proposito, con mas peso que la regla general de
     .gv-grid. Aquella fuerza tres columnas cuando hay seis o nueve tarjetas,
     que es lo correcto en una seccion a pagina completa; dentro de la columna
     del articulo (700 px) dejaba tarjetas de 233 px con el titulo partido en
     cuatro lineas. El min(100%, ...) evita que en movil la base de 260 px sea
     mayor que la propia columna y provoque desbordamiento horizontal. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin: 1.6em 0 1.8em;
  padding: 0;
  list-style: none;
}

body.gv-shell .gv-cuerpo .gv-ficha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--gv-bg);
  border: 1px solid var(--gv-border);
  border-radius: 18px;
  transition: border-color .22s ease, transform .3s cubic-bezier(.22, .7, .18, 1);
}

/* Dentro de un bloque que ya va sobre panel blanco, la tarjeta se invierte:
   si no, blanco sobre blanco y la rejilla desaparece. */
body.gv-shell .gv-cuerpo .gv-bloque:has(.gv-fichas) .gv-ficha {
  background: var(--gv-pill);
  border-color: transparent;
}

body.gv-shell .gv-cuerpo .gv-ficha:hover {
  border-color: var(--gv-lilac);
  transform: translateY(-2px);
}

body.gv-shell .gv-cuerpo .gv-ficha-t {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gv-ink-dark);
  text-wrap: balance;
}

body.gv-shell .gv-cuerpo .gv-ficha-c {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gv-text-2);
}

/* El original escribe estos items como "Termino: definicion", asi que al
   subir el termino a titulo de la tarjeta el cuerpo arranca en minuscula.
   Se corrige por CSS y no reescribiendo el texto: en el DOM sigue estando lo
   que escribio el autor, asi que al copiar y pegar sale su frase, y el dia
   que se retire esta maqueta el contenido no ha cambiado. */
body.gv-shell .gv-cuerpo .gv-ficha-c::first-letter {
  text-transform: capitalize;
}

body.gv-shell .gv-cuerpo .gv-ficha-c>*:last-child {
  margin-bottom: 0;
}

/* Una tarjeta sin cuerpo (el <li> era solo el titulo en negrita) no debe
   dejar el hueco del cuerpo vacio debajo. */
body.gv-shell .gv-cuerpo .gv-ficha-c:empty {
  display: none;
}

/* ------------------------------------------------------ DATO DESTACADO */
/* Un parrafo corto con una cifra es un dato, no prosa. El parrafo entero se
   conserva: lo unico que cambia es que el numero se lee a distancia. */
body.gv-shell .gv-cuerpo .gv-dato {
  margin: 1.6em 0;
  padding: 18px 22px;
  background: var(--gv-pill);
  border-left: 3px solid var(--gv-brand);
  border-radius: 0 16px 16px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gv-text);
}

body.gv-shell .gv-cuerpo .gv-bloque:has(.gv-dato)>.gv-dato {
  background: var(--gv-bg);
}

body.gv-shell .gv-cuerpo .gv-dato-n {
  display: inline-block;
  font-size: 1.7em;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gv-brand);
  /* La cifra sube un poco respecto a la linea base del texto que la rodea:
     sin esto, al ser mas alta, empujaba el interlineado del parrafo. */
  vertical-align: -.08em;
  margin: 0 .06em;
}

/* ------------------------------------------------------------ ACORDEON */
/* Dos o mas titulares seguidos que son preguntas forman un acordeon. Es el
   patron de las entradas tipo FAQ: preguntas y respuestas encadenadas que
   ocupan pantallas enteras.

   Van con el atributo open puesto desde el servidor y es un JS quien lo
   retira en movil. Al reves -plegarlas por CSS- la maqueta daria un salto en
   cuanto cargara el JS, y quien navegue sin JS se quedaria con un acordeon
   que no abre. */
body.gv-shell .gv-cuerpo .gv-faq-nativo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 var(--gv-aire);
}

body.gv-shell .gv-cuerpo .gv-faq-item {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .22s ease;
}

body.gv-shell .gv-cuerpo .gv-faq-item[open] {
  border-color: var(--gv-line-2);
}

body.gv-shell .gv-cuerpo .gv-faq-p {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  transition: background-color .2s ease;
}

/* El triangulo por defecto, fuera: se sustituye por el signo de la derecha.
   Hacen falta las dos reglas, Safari solo entiende la de -webkit. */
body.gv-shell .gv-cuerpo .gv-faq-p::-webkit-details-marker {
  display: none;
}

body.gv-shell .gv-cuerpo .gv-faq-p::marker {
  content: "";
}

body.gv-shell .gv-cuerpo .gv-faq-p:hover {
  background: var(--gv-pill);
}

body.gv-shell .gv-cuerpo .gv-faq-p:focus-visible {
  outline: 2px solid var(--gv-brand);
  outline-offset: -2px;
}

body.gv-shell .gv-cuerpo .gv-faq-p>h2 {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(16px, 1.05em, 19px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gv-ink-dark);
  text-wrap: balance;
}

body.gv-shell .gv-cuerpo .gv-faq-p>h2::before {
  content: none;
}

/* El signo de abrir y cerrar. Va despues del titulo en el DOM, asi que el
   lector de pantalla anuncia primero la pregunta; el estado lo da el propio
   <details>, que ya expone aria-expanded de serie. */
body.gv-shell .gv-cuerpo .gv-faq-p::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: .35em;
  background: var(--gv-brand);
  -webkit-mask: no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .25s cubic-bezier(.22, .7, .18, 1);
}

/* Abierto, la cruz gira 45 grados y se lee como aspa. Una sola forma para
   los dos estados: no hay salto de tamano al cambiar. */
body.gv-shell .gv-cuerpo .gv-faq-item[open]>.gv-faq-p::after {
  transform: rotate(45deg);
}

body.gv-shell .gv-cuerpo .gv-faq-r {
  padding: 0 20px 18px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gv-text-2);
}

body.gv-shell .gv-cuerpo .gv-faq-r>*:first-child {
  margin-top: 0;
}

body.gv-shell .gv-cuerpo .gv-faq-r>*:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- CORTE */
/* Cuatro o mas parrafos seguidos son un muro aunque esten dentro de un
   bloque. El corte no separa dos temas: solo da respiro, y por eso es un
   punto y no una linea de lado a lado. */
body.gv-shell .gv-cuerpo .gv-corte {
  width: 100%;
  height: 0;
  margin: 2.2em 0;
  border: 0;
  text-align: center;
}

/* El corte no necesita tope propio: va a width:100% y el techo lo pone la
   columna, asi que acompana al texto por si solo. */

body.gv-shell .gv-cuerpo .gv-corte::after {
  content: "· · ·";
  display: block;
  margin-top: -.75em;
  letter-spacing: .5em;
  font-size: 15px;
  color: var(--gv-lilac);
}

/* ------------------------------------------------------- IMAGEN LATERAL */
/* Texto e imagen a dos columnas dentro del bloque. En movil se apila y la
   imagen va primero: es lo que da el descanso. */
body.gv-shell .gv-cuerpo .gv-media-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  margin: 1.8em 0;
}

body.gv-shell .gv-cuerpo .gv-media-side>figure,
body.gv-shell .gv-cuerpo .gv-media-side>.gv-media {
  margin: 0;
}

/* La columna de texto no necesita techo propio: ya viene estrechada por la
   propia rejilla. Cuando el techo estaba sobre los parrafos, aquella regla
   —selector de descendencia, sin '>'— alcanzaba hasta aqui y la dejaba en un
   hilo. Ahora el techo lo lleva la columna del articulo y esto queda limpio. */
body.gv-shell .gv-cuerpo .gv-media-texto>*:first-child {
  margin-top: 0;
}

body.gv-shell .gv-cuerpo .gv-media-texto>*:last-child {
  margin-bottom: 0;
}

/* La foto de apoyo se recorta a un formato fijo. Con las proporciones que
   trae cada archivo, dos bloques seguidos daban imagenes de alto muy distinto
   y la pagina perdia el ritmo que se buscaba. */
body.gv-shell .gv-cuerpo .gv-media-side .gv-media img {
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ------------------------------------------------- TIRA DE IMAGENES PROPIAS */
/* Cuando la entrada ya traia dos o mas imagenes seguidas, se agrupan en la
   tira que ya existe para los casos: bucle continuo, parada al pasar el raton
   o al enfocar, y quieta con prefers-reduced-motion. La unica diferencia con
   la de casos es el alto, que aqui va contra la columna del articulo. */
body.gv-shell .gv-cuerpo .gv-tira-cuerpo {
  gap: 10px;
  margin: 1.8em 0;
}

body.gv-shell .gv-cuerpo .gv-tira-cuerpo .gv-caso-foto>* {
  margin: 0;
}

body.gv-shell .gv-cuerpo .gv-tira-cuerpo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--gv-r-img);
  margin: 0;
}

body.gv-shell .gv-cuerpo .gv-media img,
body.gv-shell .gv-cuerpo .gv-media-side img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--gv-r-img);
}

/* Imagen a todo el ancho de la columna, con proporcion fija para que no haya
   salto de maqueta mientras carga. */
body.gv-shell .gv-cuerpo .gv-media {
  margin: 1.8em 0;
}

body.gv-shell .gv-cuerpo .gv-media.gv-media-ancha img {
  aspect-ratio: 16/7;
  object-fit: cover;
}

body.gv-shell .gv-cuerpo .gv-media figcaption,
body.gv-shell .gv-cuerpo .gv-media-side figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gv-text-4);
}

/* ------------------------------------------------------------- EMBEBIDOS */
/* Videos, tarjetas de entrada relacionada y un flipbook: 25 de las 137
   entradas traen un <iframe> del volcado original, con su ancho y su alto
   fijos escritos en el HTML. En todo este archivo no habia una sola regla
   para iframe —si la hay para <table>, mas arriba— asi que conservaban su
   medida: el video de "ortodoncia invisible" mide 860 px de ancho dentro de
   una columna de 828 y se salia. Y no se veia como un desbordamiento, porque
   el overflow-x: clip del contenido lo RECORTABA por la derecha en vez de
   dejar que la pagina se desplazara. En movil se perdia mas de la mitad.

   La proporcion no se pone aqui sino en linea, contenedor a contenedor: la
   calcula el troceador con el width y el height que trae cada iframe, que es
   la unica manera de acertar con los tres formatos a la vez (16/9 los videos,
   600x338 las tarjetas, 1100x800 el flipbook). El 16/9 de abajo es solo el
   respaldo para un iframe que no trajera medidas.

   Va con <span> ademas de con <div> porque un iframe suele venir dentro de un
   <p>, y un <div> ahi dentro parte el parrafo en dos. */
body.gv-shell .gv-cuerpo .gv-embed {
  display: block;
  position: relative;
  width: 100%;
  margin: 1.8em 0;
  aspect-ratio: 16/9;
  border-radius: var(--gv-r-img);
  overflow: hidden;
  background: var(--gv-panel);
}

body.gv-shell .gv-cuerpo .gv-embed>iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------- DENSIDAD EN TABLET Y MOVIL */
/* Aqui es donde se juega el encargo: menos texto por pantalla. No se quita
   ni una palabra; se le da mas aire y mas separacion, de modo que cada
   pantalla contenga menos y se vea donde empieza y acaba cada cosa. */
@media (max-width:1024px) {
  body.gv-shell .gv-cuerpo .gv-media-side {
    grid-template-columns: 1fr;
  }

  /* Apilada, la imagen va delante del texto: asi el bloque abre en visual y
     no con otro parrafo mas. */
  body.gv-shell .gv-cuerpo .gv-media-side>figure,
  body.gv-shell .gv-cuerpo .gv-media-side>.gv-media {
    order: -1;
  }
}

@media (max-width:767px) {
  body.gv-shell .gv-cuerpo .gv-bloque>h2 {
    padding-left: 14px;
    font-size: 21px;
  }

  body.gv-shell .gv-cuerpo .gv-bloque>p,
  body.gv-shell .gv-cuerpo .gv-faq-r>p {
    margin-bottom: 1.25em;
    line-height: 1.75;
  }

  body.gv-shell .gv-cuerpo .gv-lead {
    font-size: 16.5px;
  }

  body.gv-shell .gv-cuerpo .gv-fichas {
    gap: 12px;
  }

  body.gv-shell .gv-cuerpo .gv-ficha {
    padding: 16px 18px;
  }

  body.gv-shell .gv-cuerpo .gv-dato {
    padding: 16px 18px;
    font-size: 15.5px;
  }

  body.gv-shell .gv-cuerpo .gv-dato-n {
    font-size: 1.55em;
  }

  body.gv-shell .gv-cuerpo .gv-faq-p {
    padding: 14px 16px;
    gap: 12px;
  }

  body.gv-shell .gv-cuerpo .gv-faq-r {
    padding: 0 16px 16px;
    font-size: 15px;
  }

  /* La imagen a sangre se sale de la caja de lectura: en movil, una foto que
     ocupa el ancho completo de la pantalla es el descanso mas eficaz que hay,
     y el margen lateral del texto la estaba encogiendo. */
  body.gv-shell .gv-cuerpo .gv-media.gv-media-ancha {
    margin-left: -20px;
    margin-right: -20px;
  }

  body.gv-shell .gv-cuerpo .gv-media.gv-media-ancha img {
    border-radius: 0;
    aspect-ratio: 4/3;
  }
}

/* La regla antigua ponia una linea de lado a lado sobre cada h2 del
   articulo. Con los bloques, esa linea y el filo de marca se sumaban, y
   ademas la linea cortaba la pagina justo donde el bloque ya la separa. */
body.gv-shell .gv-cuerpo h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0;
}

/* ==========================================================================
   SOBRE NOSOTROS
   ==========================================================================
   Las clases las pone _rediseno/_data/scripts/patch-sobre-nosotros.php sobre
   los contenedores que ya existian. No se ha reconstruido la pagina: quien la
   abra en Elementor sigue viendo su estructura.

   El problema: 14 pantallas de movil, las tres primeras de texto seguido y
   veinte fichas de equipo en una sola columna.
*/

/* --------------------------------------------------- HISTORIA CON FOTO */
body.gv-shell .gv-historia-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--gv-r-img);
}

body.gv-shell .gv-historia-img {
  margin-bottom: 4px;
}

/* ------------------------------------------------------------- EQUIPO */
/* En escritorio no cambia nada: la rejilla de fichas ya funciona. Lo que se
   arregla es el movil, donde veinte fichas apiladas son veinte pantallas de
   scroll para ver una plantilla. En tira se recorren de un gesto. */
@media (max-width:767px) {

  body.gv-shell .gv-equipo-tira {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--gv-line-2) transparent;
  }

  /* Se ve una ficha entera y el filo de la siguiente: es lo que avisa de que
     la tira sigue. Sin ese filo, mucha gente no descubre que hay mas. */
  body.gv-shell .gv-equipo-tira>.gv-equipo-ficha {
    flex: 0 0 78%;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    scroll-snap-align: start;
  }

  body.gv-shell .gv-equipo-tira::-webkit-scrollbar {
    height: 6px;
  }

  body.gv-shell .gv-equipo-tira::-webkit-scrollbar-track {
    background: var(--gv-pill);
    border-radius: 99px;
  }

  body.gv-shell .gv-equipo-tira::-webkit-scrollbar-thumb {
    background: var(--gv-line-2);
    border-radius: 99px;
  }

  body.gv-shell .gv-equipo-tira:focus-visible {
    outline: 2px solid var(--gv-brand);
    outline-offset: 4px;
    border-radius: 16px;
  }
}

/* --------------------------------------------------------- TITULACIONES */
/* Seis tarjetas blancas con una linea de texto cada una ocupaban media
   pantalla sin decir mas que seis pildoras. */
/* La pildora la pinta .gv-pildora, que ya existia en el sistema de diseno
   (tecnicas de la portada, categorias del blog): convierte el <p> del widget
   en un inline-block con fondo y borde redondeado, y por eso mide siempre lo
   que mide su texto. Aqui solo hay que quitar de en medio la tarjeta blanca
   que envolvia cada linea, que era lo que ocupaba media pantalla.

   Este camino se eligio despues de intentar el otro: dar la forma de pildora
   al CONTENEDOR. No funciona. Los contenedores de Elementor son flex column
   con el ancho atado a una variable propia, asi que la caja se encogia al
   ancho de una letra; y ademas .gv-pildora ya estaba cogida por el componente
   de verdad, con lo que se estaban forkeando dos pildoras distintas. */
body.gv-shell .gv-pildora-caja {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------- TIRA DE TESTIMONIOS */
/* Cuatro opiniones apiladas son cuatro pantallas; en tira se leen pasando. El
   pase automatico, la parada al pasar el raton, el foco por teclado y el
   respeto a prefers-reduced-motion los pone el JS de gv-diseno.php, que ya
   atiende a .gv-caso-tira. */
body.gv-shell .gv-tira-testi {
  gap: 18px;
}

body.gv-shell .gv-tira-testi>.gv-caso-foto {
  flex: 0 0 clamp(280px, 32%, 380px);
  display: flex;
}

body.gv-shell .gv-tira-testi>.gv-caso-foto>* {
  width: 100%;
  height: 100%;
}

@media (max-width:767px) {
  body.gv-shell .gv-tira-testi>.gv-caso-foto {
    flex: 0 0 86%;
  }
}

/* ------------------------------------------------------ LINEA DE TIEMPO */
/* Los cinco hitos van sobre el fondo morado oscuro de su seccion. En vertical
   ocupaban tres pantallas; en horizontal se leen como lo que son, una
   sucesion de anos. */
/* El !important sobre flex-direction no es un capricho. Los contenedores de
   Elementor leen la direccion de una variable propia (--flex-direction), asi
   que una regla normal pierde siempre contra ella. Este contenedor estaba en
   columna, y sin forzarlo los cinco hitos seguian apilados: la tira decia
   display:flex y flex-wrap:nowrap, pero en el eje vertical, con lo que el
   flex-basis del 80% se aplicaba al ALTO y cada tarjeta ocupaba el ancho
   completo. Se ponen los tres casos por igual para que no dependa de como
   estuviera configurado cada contenedor en el editor. */
body.gv-shell .gv-hitos-tira,
body.gv-shell .gv-tira-testi,
body.gv-shell .gv-equipo-tira {
  flex-direction: row !important;
}

body.gv-shell .gv-hitos-tira {
  gap: 16px;
  scroll-snap-type: x proximity;
  position: relative;
}

body.gv-shell .gv-hitos-tira>.gv-caso-foto {
  flex: 0 0 clamp(230px, 24%, 300px);
  scroll-snap-align: start;
  position: relative;
  /* Margen, no relleno: la linea y el punto van FUERA de la tarjeta. Con
     padding quedaban dentro, pintados sobre el fondo morado de la propia
     ficha y pegados a la esquina, que es lo que se veia raro. */
  margin-top: 26px;
}

/* El hilo que une los anos. Pasa por encima de las tarjetas, no por dentro:
   es lo que convierte cinco fichas sueltas en una linea de tiempo. */
body.gv-shell .gv-hitos-tira>.gv-caso-foto::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: -16px;
  height: 2px;
  background: var(--gv-ink-line);
}

body.gv-shell .gv-hitos-tira>.gv-caso-foto:last-child::before {
  right: 0;
}

body.gv-shell .gv-hitos-tira>.gv-caso-foto::after {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gv-lilac);
  /* El aro es del color de la seccion, no del de la tarjeta: el punto tiene
     que leerse sobre la banda, que es donde esta. */
  border: 2px solid var(--gv-ink-dark);
  box-shadow: 0 0 0 3px var(--gv-ink-dark);
}

/* La barra de desplazamiento de la tira, sobre fondo oscuro, necesita su
   propio color: la clara de las demas tiras no se ve. */
body.gv-shell .gv-hitos-tira {
  scrollbar-color: var(--gv-ink-line) transparent;
}

body.gv-shell .gv-hitos-tira::-webkit-scrollbar-track {
  background: transparent;
}

body.gv-shell .gv-hitos-tira::-webkit-scrollbar-thumb {
  background: var(--gv-ink-line);
}

@media (max-width:767px) {
  body.gv-shell .gv-hitos-tira>.gv-caso-foto {
    flex: 0 0 80%;
  }

  /* EL ARREGLO DEL DESCUADRE.
     Mas arriba hay una regla general para movil:

       body.gv-shell .gv-col { width:100% !important; flex-basis:100% !important }

     que es correcta para columnas que van en fila y se apilan al estrecharse.
     Pero dentro de una tarjeta de hito el contenedor YA es una columna, y en
     ese eje flex-basis gobierna el ALTO: el bloque del ano reclamaba el 100%
     del alto de la tarjeta y empujaba el texto fuera de la caja (medido: ano
     y texto declarando ambos 314 px dentro de un contenedor de 314).

     Se acota a la tira de hitos y no se toca la regla general, que en el
     resto del sitio hace lo que debe. */
  body.gv-shell .gv-hitos-tira .gv-col {
    flex-basis: auto !important;
    width: 100% !important;
    align-self: auto !important;
  }
}

/* ------------------------------------------------------------ CONTADORES */
/* El numero de cada barra de valoracion sube desde cero al entrar en
   pantalla. Reserva su ancho por JS antes de arrancar, asi que aqui solo hace
   falta que no lo parta en dos lineas mientras cuenta. */
body.gv-shell .gv-contar .elementor-progress-percentage {
  white-space: nowrap;
}


/* ------------------------------------------------------ INDICE DE CONTENIDOS */
/* El indice lista los h2 y los h3, y en las entradas largas eso son cincuenta
   entradas: una pantalla entera de enlaces antes de empezar a leer, que es
   otro muro. En movil ya se pliega solo (minimize_box del widget); en
   escritorio se le pone tope de alto y se desplaza por dentro.

   Se acota en vez de recortarlo a los h2 a proposito: asi no se pierde
   ninguna entrada del indice, solo deja de ocupar toda la pantalla. */
@media (min-width:768px) {

  body.gv-shell .gv-toc .elementor-toc__body {
    max-height: 42vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gv-line-2) transparent;
    /* Aviso de que hay mas debajo: el ultimo renglon se desvanece mientras
       queda recorrido, y se ve entero al llegar al final. */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  }

  body.gv-shell .gv-toc .elementor-toc__body::-webkit-scrollbar {
    width: 6px;
  }

  body.gv-shell .gv-toc .elementor-toc__body::-webkit-scrollbar-thumb {
    background: var(--gv-line-2);
    border-radius: 99px;
  }
}


/* ==========================================================================
   HERO DE LAS PAGINAS INTERIORES
   ==========================================================================
   Lo aplica _rediseno/_data/scripts/patch-heros.php sobre el PRIMER
   contenedor que ya existia en cada pagina. De 17 paginas solo la portada
   tenia hero; las otras 16 abrian con #FBF8FC liso y un titular flotando.

   Casi todo el trabajo lo hacen dos componentes que ya estaban:
     .gv-hero       da el aire correcto bajo la cabecera fija (56 px)
     .gv-hero-foto  pone el velo morado, el texto en claro y su sombra
   Aqui solo esta lo que difiere de la portada.
*/

/* El velo de .gv-hero-foto esta calculado para la portada, donde el texto va
   en una columna a la IZQUIERDA: por eso se abre hasta 0.42 de opacidad por
   la derecha. En estas paginas los titulares van centrados y ocupan todo el
   ancho, asi que ese tramo claro dejaba el final de las lineas por debajo de
   AA. Se cierra el degradado manteniendo el mismo gesto de marca. */
body.gv-shell .gv-hero-pag::before {
  background: linear-gradient(100deg,
      rgba(59, 37, 69, .93) 0%,
      rgba(74, 40, 84, .87) 50%,
      rgba(93, 49, 105, .80) 100%);
}

/* La micro-etiqueta del hero (el "QUIENES SOMOS" de encima del titular) sobre
   fotografia necesita mas peso que sobre el fondo claro para el que se
   diseno. */
/* Va DESPUES y con un selector mas largo que la regla de titulares de abajo,
   que pone todo en blanco: la micro-etiqueta es un rotulo secundario y en
   lila se distingue del titular en vez de competir con el. */
body.gv-shell .gv-hero-pag .gv-kicker,
body.gv-shell .gv-hero-pag .gv-kicker p,
body.gv-shell .gv-hero-pag .gv-kicker .elementor-heading-title {
  color: var(--gv-hero) !important;
  opacity: 1;
}

/* El texto de apoyo que hubiera en el bloque pasa a claro. No se reescribe
   nada: solo cambia el color, porque el que traia era para fondo blanco. */
body.gv-shell .gv-hero-pag .gv-w.elementor-widget-text-editor,
body.gv-shell .gv-hero-pag .gv-w.elementor-widget-text-editor p,
body.gv-shell .gv-hero-pag li {
  color: #EDDDF2 !important;
}

/* Los titulares van en blanco SI O SI.
   El !important no es pereza: Elementor genera una hoja por pagina con una
   regla por widget (.elementor-205 .elementor-element-abc .elementor-heading-
   title) que gana a cualquier selector razonable. Sin esto, el H1 se quedaba
   con el color de texto del kit -#2E2333- sobre el velo morado, es decir,
   ilegible. Es el mismo motivo por el que el resto del archivo usa !important
   contra los ajustes de widget. */
body.gv-shell .gv-hero-pag h1,
body.gv-shell .gv-hero-pag h2,
body.gv-shell .gv-hero-pag h3,
body.gv-shell .gv-hero-pag .elementor-heading-title {
  color: #FFFFFF !important;
  text-wrap: balance;
}

/* La cursiva de acento del titular conserva su lila, que sobre el velo llega
   de sobra a AA. */
body.gv-shell .gv-hero-pag .gv-italic em,
body.gv-shell .gv-hero-pag em {
  color: var(--gv-hero) !important;
}

/* Los enlaces del hero, subrayados: sobre fotografia el color solo no basta
   para distinguirlos (criterio 1.4.1 de WCAG). */
body.gv-shell .gv-hero-pag a:not(.elementor-button) {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Las tarjetas y pildoras claras que alguna pagina ya tuviera en su primer
   bloque perderian el contraste sobre la fotografia: se vuelven translucidas
   en vez de blancas. */
body.gv-shell .gv-hero-pag .gv-card,
body.gv-shell .gv-hero-pag .gv-pildora p {
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #FFFFFF;
}

body.gv-shell .gv-hero-pag .gv-card .elementor-heading-title,
body.gv-shell .gv-hero-pag .gv-card p {
  color: #FFFFFF;
}

/* En movil el hero no debe comerse la pantalla: 320 px de alto minimo los
   pone el propio contenedor, y aqui se aprieta el titular para que quepa con
   su entradilla sin necesidad de mas alto. */
@media (max-width:767px) {
  body.gv-shell .gv-hero-pag .elementor-heading-title {
    font-size: clamp(26px, 7.5vw, 34px);
    line-height: 1.15;
  }
}

/* ------------------------------------------------- ANIMACION DE ENTRADA */
/* Lo unico que se mueve al cargar: los elementos del hero entran escalonados.
   Solo CSS, sin JS y sin librerias.

   Va sobre los NIETOS (el contenedor interior de Elementor envuelve todo el
   bloque, y animarlo entero seria un solo movimiento en lugar de una entrada
   escalonada).

   Se limita a los cuatro primeros: a partir de ahi el retardo se nota como
   lentitud, no como ritmo. */
body.gv-shell .gv-hero-pag>*>* {
  animation: gv-hero-in .55s cubic-bezier(.22, .7, .18, 1) both;
}

body.gv-shell .gv-hero-pag>*>*:nth-child(1) {
  animation-delay: 0ms;
}

body.gv-shell .gv-hero-pag>*>*:nth-child(2) {
  animation-delay: 90ms;
}

body.gv-shell .gv-hero-pag>*>*:nth-child(3) {
  animation-delay: 180ms;
}

body.gv-shell .gv-hero-pag>*>*:nth-child(n+4) {
  animation-delay: 270ms;
}

@keyframes gv-hero-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Con movimiento reducido el hero aparece puesto, sin salto de maqueta: el
   both del shorthand deja el estado final aplicado desde el primer fotograma. */
@media (prefers-reduced-motion:reduce) {
  body.gv-shell .gv-hero-pag>*>* {
    animation: none;
  }
}

/* A proposito NO se ata a la clase gv-anim del body. Esa clase la pone el JS
   del reveal despues de cargar, y la animacion del hero es CSS puro que
   arranca en el primer fotograma: condicionarla a una clase que llega tarde
   haria que el hero se quedase quieto y luego rearrancase de golpe. Dura 0,85
   s como mucho, asi que en las capturas headless ya ha terminado. */


/* ------------------------------------------- AIRE DEBAJO DE CADA HERO */
/* El contenedor que sigue al hero arrancaba pegado a la banda: medido, cuatro
   de las paginas con hero tenian padding-top 0 en escritorio, la portada 36 px
   y el resto 60. Es decir, el contenido empezaba justo donde acababa la
   fotografia y no habia respiro entre una cosa y otra.

   Se ancla en .gv-hero-foto y no en .gv-hero-pag para que alcance TAMBIEN al
   hero de la portada, que lleva la primera clase pero no la segunda.

   Se usa el hermano adyacente en vez de tocar el padding de cada pagina en
   Elementor: es una regla, no dieciseis ediciones, y quitarla devuelve el
   sitio a como estaba. El valor sustituye al que hubiera (no se suma) para que
   el hueco sea el mismo en todas: con clamp queda en 48 px de movil y 80 de
   escritorio, siempre por encima de lo que habia. */
body.gv-shell .gv-hero-foto+.e-con {
  padding-top: clamp(48px, 6vw, 80px);
}


/* ------------------------------ PILDORAS A ANCHO COMPLETO EN MOVIL */
/* En movil las pildoras quedaban dentadas: cada una medida a su texto, con el
   hueco sobrante a la derecha, y la columna se leia como una escalera. El
   contenedor SI ocupaba el ancho -312 px medidos-; lo que se encogia era el
   <p> de dentro, que .gv-pildora deja en inline-block para que la pildora
   ajuste a su contenido. Eso es lo correcto cuando van en fila; puestas en
   columna, no.

   Se apunta al <p>, no al contenedor, y solo por debajo de 768 px: en
   escritorio siguen en fila ajustandose a su texto, que es como deben verse.
   La pildora del hero (.gv-hero-pildora) queda fuera a proposito: alli es un
   rotulo suelto sobre la fotografia, no un elemento de lista. */
@media (max-width:767px) {

  /* Portada: "Todas las especialidades en el mismo centro" */
  body.gv-shell .gv-pildora-enlace p {
    display: block;
    width: 100%;
  }

  /* El <a> ya era block: al dejar de estar encajado en un <p> encogido, pasa
     a ocupar la pildora entera y con ella crece el area pulsable, que en una
     lista de enlaces en movil es lo que interesa. */
  body.gv-shell .gv-pildora-enlace a {
    text-align: center;
  }

  /* Sobre nosotros: titulaciones y colegiacion. Aqui el texto se queda a la
     izquierda: son datos, y varios ocupan dos lineas; centrados quedarian
     descolgados.

     Hacen falta las dos reglas. Con solo la del <p> la pildora seguia
     dentada: el <p> ya era bloque, pero el WIDGET que lo envuelve medía 170 px
     dentro de una caja de 350, porque el contenedor de Elementor es un flex en
     columna y sus hijos se encogen al contenido. El !important sobre
     align-self es obligatorio: los contenedores de Elementor lo leen de su
     propia variable --align-self y una regla normal pierde siempre. */
  body.gv-shell .gv-pildora-caja>.gv-pildora {
    width: 100% !important;
    align-self: stretch !important;
  }

  body.gv-shell .gv-pildora-caja .gv-pildora p {
    display: block;
    width: 100%;
  }
}