/*
Theme Name:  Dentistas MX
Theme URI:   https://socialbake.com
Author:      SocialBake
Author URI:  https://socialbake.com
Description: Tema de Dentistas MX, portado de la plantilla HTML Medilo (ThemeServices).
Version:     1.19.40
License:     GNU General Public License v2 or later
Text Domain: dentistas-mx
Tags:        medical, dental, one-column, custom-menu, featured-images
*/

/* Los estilos reales viven en assets/css/style.css, tal cual vienen de la plantilla.
   Este archivo solo existe porque WordPress lo exige como cabecera del tema. */

/* Las etiquetas del menu en espanol son mas anchas que las de la demo en ingles
   y a 1280px se pegaban al logo. Se recorta el espacio entre items solo en ese
   rango; de 1400px en adelante queda el valor original de la plantilla. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .cs_nav.cs_primary_color .cs_nav_list > li {
    margin-right: var(--espacio-4);
  }
}

/* ==========================================================================
   Accesibilidad, contraste y acciones de contacto
   Correcciones sobre la plantilla de Envato. Cada bloque dice que criterio
   corrige para que no se borren "por limpiar".
   ========================================================================== */

/* --- Contraste (WCAG 1.4.3 AA) -------------------------------------------
   El azul de marca (#2ea6f7) da 2.65:1 sobre blanco: falla como color de
   texto (necesita 4.5:1) y tambien como fondo del boton principal con texto
   blanco. Dos tokens por rol, y solo dos (6.1.4):
   - --accent-color (#2ea6f7): marca. Fondos decorativos, iconos y texto sobre
     azul marino (5.65:1), bordes. Es donde se reconoce la marca.
   - --accent-strong (#0a66a8): el mismo azul, oscurecido hasta cumplir AA en
     todos los fondos claros del sitio: 6.0:1 sobre blanco y 5.1:1 sobre el
     gris de seccion (#e8edf0). Todo texto o fondo de boton con texto blanco
     sobre fondo claro usa este token; no hay un tercer tono suelto.
   No puede ser un solo color: ninguno pasa a la vez sobre blanco y sobre el
   azul marino (#002261). */
:root {
  --accent-strong: #0a66a8;

  /* Escala de espaciado y de radios (6.5.3). La plantilla usa un grid de 5 px;
     el CSS propio de este archivo escribia 6, 8, 12, 14, 16, 18, 24, 28 px a
     mano, dos rejillas mezcladas en la misma pagina. Todo el espaciado de aqui
     se ajusto al grid de 5 px (diferencias de 1-2 px, imperceptibles) y va por
     estos tokens; solo quedan en px los detalles de 1-3 px (bordes, ajustes
     opticos) y los negativos. --espacio-N = N x 5 px. */
  --espacio-1: 5px;
  --espacio-2: 10px;
  --espacio-3: 15px;
  --espacio-4: 20px;
  --espacio-5: 25px;
  --espacio-6: 30px;
  --espacio-7: 35px;
  --espacio-8: 40px;
  --espacio-10: 50px;
  --espacio-11: 55px;
  --espacio-12: 60px;
  --espacio-14: 70px;
  --espacio-16: 80px;
  --espacio-20: 100px;
  --radio-input: 5px;
  --radio-card: 10px;
  --radio-panel: 20px;
  --radio-pill: 999px;
}

.cs_accent_color,
a.cs_accent_color,
.cs_iconbox_subtitle a,
.cs_post_meta a:hover,
.cs_footer a:hover {
  color: var(--accent-strong);
}

.cs_btn.cs_style_1.cs_color_1,
.cs_btn.cs_style_1.cs_color_2:hover,
.cs_btn.cs_style_1.cs_color_3:hover {
  background-color: var(--accent-strong);
}

/* El pie usa azul claro sobre azul marino: ahi el contraste sí alcanza y se
   deja el color de marca. */
.cs_white_color .cs_accent_color,
.cs_blue_bg .cs_accent_color {
  color: var(--accent-color);
}

/* --- Saltar al contenido (WCAG 2.4.1) ------------------------------------ */
.cs_skip_link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 9999;
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: 0 0 var(--radio-card) var(--radio-card);
  background: var(--blue-color);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}
.cs_skip_link:focus {
  top: 0;
  color: #fff;
}

/* --- Texto solo para lectores de pantalla -------------------------------- */
.cs_visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Foco visible (WCAG 2.4.7 y 2.4.11) ----------------------------------
   La plantilla quita el outline en varios controles. Se restituye solo para
   navegacion por teclado, con 3px y un halo claro para que se vea igual sobre
   fondo blanco que sobre el azul marino del pie. */
#cs_contenido:focus {
  outline: none;
}
/* El encabezado fijo puede tapar el elemento enfocado al tabular. */
:target,
[id] {
  scroll-margin-top: 120px;
}

/* Las pestanas de la portada y el enlace de saltar al contenido mueven la
   pagina de golpe: sin transicion no se ve de donde a donde salto. El
   scroll-margin-top de arriba ya evita que el destino quede bajo el
   encabezado fijo, y el bloque de movimiento reducido lo anula. */
html {
  scroll-behavior: smooth;
}

/* --- Tamaño de area tactil (WCAG 2.5.8, minimo 24x24) --------------------- */
.cs_footer_social_btns a,
.cs_social_btns a,
.cs_pagination a,
.cs_pagination .page-numbers,
.cs_menu_dropdown_toggle,
.cs_search_toggle {
  min-width: 44px;
  min-height: 44px;
}
.cs_search_toggle {
  background: none;
  border: 0;
  padding: 0;
}

/* --- Formularios (WCAG 1.3.1, 3.3.2) ------------------------------------- */
.cs_form_label {
  display: block;
  margin-bottom: var(--espacio-1);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--heading-color);
}
/* Blanco solo donde el fondo pintado es oscuro de verdad. El formulario de
   citas vive sobre .cs_appointment_form_wrapper (#f2f4f9): incluirlo aqui
   dejaba las etiquetas en blanco sobre gris claro (1.09:1, invisibles). */
.cs_blue_bg .cs_form_label,
.cs_footer .cs_form_label {
  color: #fff;
}
.cs_form_label .cs_req {
  color: #c1121f;
}
.cs_form_label .cs_opt {
  font-weight: 400;
  color: var(--body-color);
}
/* Leyenda del asterisco (WCAG 3.3.2). Va antes del primer campo de cada
   formulario, asi que tiene que leerse como nota y no competir con la primera
   etiqueta: tamano menor y color de cuerpo, que sobre blanco y sobre el gris
   --gray-color de las dos secciones de contacto se queda por encima de 4.5:1. */
.dmx_form_obligatorios {
  margin: 0 0 var(--espacio-2);
  font-size: 0.9375rem;
  color: var(--body-color);
}
.cs_footer .dmx_form_obligatorios,
.cs_blue_bg .dmx_form_obligatorios {
  color: #fff;
}
.cs_form_field:focus {
  border-color: var(--accent-strong);
}
/* Consentimiento del aviso de privacidad. La casilla mantiene 24x24 reales
   (WCAG 2.5.8) y la etiqueta completa es zona de clic. */
.dmx_consentimiento label {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-color);
}
.dmx_consentimiento input[type='checkbox'] {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0;
  accent-color: var(--accent-strong);
}
.dmx_consentimiento a {
  color: var(--accent-strong);
  text-decoration: underline;
}
.cs_blue_bg .dmx_consentimiento label {
  color: #fff;
}
.cs_blue_bg .dmx_consentimiento a {
  color: #fff;
  text-decoration: underline;
}

/* Trampa antispam: la rellenan los robots y nunca las personas. Se saca de la
   vista en lugar de usar display:none, que algunos robots detectan y respetan,
   y fuera del recorrido de teclado. El `!important` evita que una regla de la
   hoja de Medilo la devuelva a la pantalla: una trampa visible la rellenaria
   una persona y su envio acabaria rechazado. */
.dmx_trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.dmx_aviso {
  margin: 0 0 var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-card);
  border-left: 4px solid;
  font-size: 16px;
}
.dmx_aviso_ok {
  background: #e8f5ec;
  border-color: #1b7f3b;
  color: #14532d;
}
.dmx_aviso_error {
  background: #fdecec;
  border-color: #c1121f;
  color: #7f1020;
}

/* --- Formulario de comentarios de WordPress (4.41, 4.42) -----------------
   comment_form() se imprime con la clase .cs_reply_form row pero el tema
   nunca lo estilizo: el textarea conservaba el ancho intrinseco de su
   cols="45" -381 px computados, max-width: none- y en un telefono de 375 px
   utiles su borde derecho caia en 393, asi que overflow-x: clip le cortaba
   18 px. Los <p> tampoco son columnas de Bootstrap, de modo que heredaban
   los margenes negativos de la .row y se salian 3 px mas. */
#commentform textarea,
#commentform input[type='text'],
#commentform input[type='email'],
#commentform input[type='url'] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Los tres campos de una linea -#author, #email, #url- median 32 px de alto en
   cualquier pantalla: cumplen el minimo AA de 24 pero no la recomendacion de
   44 de Apple HIG y Material (4.43). Los campos del formulario de contacto del
   tema miden 48 porque llevan .cs_form_field; estos no llevan ninguna clase,
   asi que el minimo se les pone aqui con el mismo padding horizontal que ya
   tienen los demas campos del sitio. */
#commentform input[type='text'],
#commentform input[type='email'],
#commentform input[type='url'] {
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-3);
}
/* La .row de Bootstrap se desplaza media canaleta a cada lado contando con
   que sus hijos sean columnas que la compensen con su padding. Los <p> que
   emite WordPress no lo son, asi que el formulario entero sobresalia 3 px por
   la derecha. Se le quitan los margenes negativos y el padding de los <p>
   queda como canaleta interior. */
#commentform.row {
  margin-left: 0;
  margin-right: 0;
}
#commentform.row > p {
  margin-left: 0;
  margin-right: 0;
}
/* La casilla de «guardar mis datos» la emite WordPress y media 13x13: por
   debajo del minimo de 24x24 del criterio 2.5.8. Mismos valores que la del
   aviso de privacidad para que las dos se sientan igual. */
#commentform input[type='checkbox'] {
  width: 24px;
  height: 24px;
  margin-right: var(--espacio-1);
  vertical-align: middle;
  accent-color: var(--accent-strong);
}
/* 4.68: `dmx.css` apaga el foco del boton de publicar con
   `.cs_reply_form .cs_btn.cs_style_1{outline:none}` -especificidad (0,3,0)
   frente a la (0,1,0) del anillo global de mas abajo, y servida antes, asi que
   el empate ni se plantea-. Medido en dev: `outline` resolvia a «3px none» y
   `box-shadow` a `none`, de modo que al tabular hasta publicar no se veia
   donde estaba el foco en ninguna entrada del blog (WCAG 2.4.7 AA). Se
   devuelve el mismo anillo del resto del sitio con especificidad suficiente,
   solo en `:focus-visible`, sin tocar `dmx.css` ni el estado de reposo. */
.cs_reply_form .cs_btn.cs_style_1:focus-visible {
  outline: 3px solid var(--blue-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* --- Barra de acciones en movil ------------------------------------------
   Quien llega con dolor busca como contactar, no como navegar. Las tres
   acciones quedan fijas abajo, dentro del alcance del pulgar. */
.dmx_barra_movil {
  display: none;
}
@media (max-width: 991.98px) {
  .dmx_barra_movil {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 16px rgba(0, 34, 97, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dmx_barra_movil_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    min-height: 60px;
    padding: var(--espacio-2) var(--espacio-1);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--blue-color);
    text-decoration: none;
  }
  .dmx_barra_movil_item i {
    font-size: 19px;
  }
  .dmx_barra_movil_cta {
    background: var(--accent-strong);
    color: #fff;
  }
  .dmx_barra_movil_item:hover,
  .dmx_barra_movil_item:focus {
    color: var(--accent-strong);
  }
  .dmx_barra_movil_cta:hover,
  .dmx_barra_movil_cta:focus {
    background: var(--blue-color);
    color: #fff;
  }
  /* Para que la barra no tape el final del pie. La barra mide 60 px de alto
     mas su borde superior mas el indicador de inicio del iPhone, asi que el
     cuerpo tiene que ceder los tres: con 60 fijos, los ultimos ~34 px del pie
     quedaban debajo de la barra, y tras arreglarlo seguia tapando 1 px (4.44).
     72 es el mismo hueco que ya usan .cs_footer_bottom y .cs_scrollup. */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  /* Y el mismo hueco para cualquier desplazamiento programado: sin esto, el
     scrollIntoView del asistente dejaba el destino pegado al borde inferior,
     es decir detras de la barra. Solo abajo: el hueco de arriba lo pone el
     scroll-margin-top de [id], y declarar los dos los sumaria. */
  html {
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* --- Movimiento reducido (WCAG 2.3.3) ------------------------------------
   La plantilla anima practicamente cada bloque al hacer scroll. Con la
   preferencia del sistema activa, todo aparece de una vez. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .wow,
  .animated {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cs_spinner_img,
  .cs_moving_text_wrap * {
    animation: none !important;
  }
}

/* ==========================================================================
   Segunda pasada: hallazgos de ux-audit / ui-audit / ui-ux-pro-max
   ========================================================================== */

/* --- Contraste que la primera pasada no cubrio (WCAG 1.4.3) ---------------
   Se habia corregido .cs_accent_color, pero el azul de marca se usa como
   color de texto en otros cuatro sitios. Medido antes del cambio:
   pestaña activa 1.06:1, palabra del hero 2.65:1, "Leer mas" 2.65:1,
   "Ver mas" 2.25:1, horario del pie 2.65:1. */

/* Pestañas: en cs_style_1 el enlace activo ya va blanco sobre azul marino y
   cumple. En cs_style_3 el fondo activo es el azul de marca y el texto blanco
   encima da 2.65:1. Se cambia el fondo, no el texto. */
.cs_tab_links.cs_style_3 li.active a {
  background-color: var(--accent-strong);
}

/* Palabra destacada del titular: 48px necesita 3:1 y daba 2.65:1. La regla de
   la plantilla es .cs_hero.cs_style_1 .cs_hero_title span, mas especifica que
   una sola clase, asi que hay que igualarla. */
.cs_hero.cs_style_1 .cs_hero_title span,
.cs_page_title span,
.cs_section_heading .cs_section_title span:not([class]) {
  color: var(--accent-strong);
}
/* Sobre fondo azul marino el de marca si alcanza y se conserva. */
.cs_white_color .cs_hero_title span,
.cs_blue_bg .cs_section_title span,
.cs_white_color .cs_section_title span {
  color: var(--accent-color);
}

/* Enlaces de texto "LEER MAS +" / "VER MAS" (van sobre el gris #e8edf0). */
.cs_about_iconbox .cs_about_iconbox_subtitle a,
.cs_service_footer_text a,
.cs_iconbox_text a,
.cs_card_subtitle a {
  color: var(--accent-strong);
}

/* Datos de contacto del pie: texto blanco sobre el azul claro de marca. */
.cs_footer_contact li,
.cs_footer_contact li a {
  color: #fff;
}
.cs_footer_widget .cs_accent_bg {
  background-color: var(--blue-color);
}

/* Numeracion del carrusel: en la portada va sobre fondo blanco, no sobre el
   azul marino. Por defecto oscura; blanca solo en secciones de fondo oscuro. */
.slick-dots li {
  color: var(--body-color);
}
.slick-dots li.slick-active {
  color: var(--accent-strong);
  font-weight: 600;
}
.cs_blue_bg .slick-dots li,
.cs_white_color .slick-dots li {
  color: rgba(255, 255, 255, 0.75);
}
.cs_blue_bg .slick-dots li.slick-active,
.cs_white_color .slick-dots li.slick-active {
  color: #fff;
}

/* Iconos de redes: glifo blanco sobre #475f8d da 2.3:1 y como elemento grafico
   necesita 3:1 (WCAG 1.4.11). */
.cs_social_btns.cs_style_1 a.cs_center {
  background-color: var(--blue-color);
}
.cs_social_btns.cs_style_1 a.cs_center:hover {
  background-color: var(--accent-strong);
}

/* El enlace del consentimiento va sobre el gris del formulario. */
.dmx_consentimiento a {
  color: var(--accent-strong);
}

/* --- Foco visible en cualquier fondo (WCAG 2.4.11) ------------------------
   El outline era blanco dentro de .cs_hero, y el CTA de la cabecera cae ahi:
   anillo blanco sobre papel blanco = foco invisible. Se usa un anillo de dos
   tonos que se ve igual sobre claro y sobre oscuro, sin depender del contexto. */
:focus-visible {
  outline: 3px solid var(--blue-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}
.cs_blue_bg :focus-visible,
.cs_footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 34, 97, 0.9);
}

/* El anillo de arriba tardaba 300 ms en aparecer: `src/assets/css/style.css:196`
   (compilado en `assets/css/dmx.css:332`) declara `a { transition: all 0.3s ease }`
   y ese `all` arrastra `outline-color`, `outline-offset` y `box-shadow`, que son
   justo las tres propiedades con las que se dibuja. Al enfocar, el anillo arrancaba
   en `currentColor` sin desplazamiento y con el halo transparente; quien tabula
   rapido no alcanzaba a verlo (y durante la auditoria produjo una lectura falsa de
   «anillo blanco, contraste 1.00:1»). Se acota la transicion a las propiedades que
   si cambian al pasar el raton en este tema — los `.cs_btn` solo mueven
   `background-color` y `color` — dejando el anillo instantaneo. Este archivo carga
   despues de dmx.css y la especificidad es la misma, asi que gana sin !important.
   La duracion y la curva siguen viniendo del atajo de dmx.css. */
a {
  transition-property: color, background-color, border-color, opacity, transform,
    background-size, text-decoration-color;
}

/* Miniaturas del hero como <button> (7.1.1): sin el aspecto de boton del
   navegador; el borde y el "+" los sigue poniendo Medilo por clase. Desde
   6.4.4 no hay slick: el navegador es una columna flex (fila en movil) y la
   activa se marca con aria-current en vez de .slick-current. */
.cs_hero_slider_nav {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  height: auto;
}
.cs_hero_slider_nav button.cs_hero_slider_thumb_mini {
  display: block;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.cs_hero_slider_nav .cs_hero_slider_thumb_mini[aria-current],
.cs_hero_slider_nav .cs_hero_slider_thumb_mini:hover {
  border-color: #fff;
}
.cs_hero_slider_nav .cs_hero_slider_thumb_mini:hover::before {
  opacity: 1;
}
.cs_hero_slider_nav button.cs_hero_slider_thumb_mini:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 34, 97, 0.9);
  border-radius: var(--radio-card);
}
@media (max-width: 991.98px) {
  .cs_hero_slider_nav {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}

/* Resenas reales (6.1.2): el bloque solo existe cuando dmx_resenas() devuelve
   resenas con consentimiento. Se pinta como lista propia, no con el cascaron de
   testimonio de Medilo (comillas gigantes, retrato de banco, carrusel de uno en
   uno). */
.dmx_resenas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-5);
}
.dmx_resena {
  display: flex;
  gap: var(--espacio-4);
  align-items: flex-start;
  padding: var(--espacio-5);
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radio-card);
}
.dmx_resena_icono {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  font-size: 18px;
}
.dmx_resena_texto {
  margin: 0 0 var(--espacio-2);
}
.dmx_resena_texto p {
  margin: 0;
}
.dmx_resena_autor {
  margin: 0;
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .dmx_resena {
    padding: var(--espacio-4);
    gap: var(--espacio-3);
  }
  .dmx_resena_icono {
    flex-basis: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* Cierre de la portada (6.2.4): la segunda franja azul de la demo (fondo a
   pantalla completa, 600 px, boton de video) pasa a una linea contenida al
   final, para que la unica franja azul conserve su fuerza. */
.dmx_cierre {
  padding: var(--espacio-12) 0;
  border-top: 1px solid var(--border-color);
}
.dmx_cierre_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-5) var(--espacio-8);
  flex-wrap: wrap;
}
.dmx_cierre_titulo {
  font-size: 28px;
  margin: 0 0 var(--espacio-2);
}
.dmx_cierre_texto {
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 575.98px) {
  .dmx_cierre { padding: var(--espacio-10) 0; }
  .dmx_cierre_titulo { font-size: 24px; }
}

/* --- Estados de formulario que faltaban ----------------------------------- */
.cs_form_field[aria-invalid='true'] {
  border-color: #c1121f;
  background-color: #fff5f5;
}
.dmx_campo_error {
  display: block;
  margin-top: var(--espacio-1);
  font-size: 14px;
  color: #b00d1c;
}
.cs_btn[disabled],
.cs_btn[aria-disabled='true'],
.cs_form_field:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cs_btn[data-enviando='1']::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--espacio-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: dmx_gira 0.7s linear infinite;
}
@keyframes dmx_gira {
  to {
    transform: rotate(360deg);
  }
}

/* Los avisos no deben distinguirse solo por color (WCAG 1.4.1). */
.dmx_aviso_ok .dmx_aviso_titulo::before {
  content: '\2713\00a0\00a0';
  font-weight: 700;
}
.dmx_aviso_error::before {
  content: '\26a0\00a0\00a0';
  font-weight: 700;
}

/* --- Telefono en la cabecera de escritorio -------------------------------- */
.dmx_header_tel {
  display: none;
}
@media (min-width: 1200px) {
  .dmx_header_tel {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 44px;
    margin-right: var(--espacio-5);
    color: var(--blue-color);
    text-decoration: none;
    white-space: nowrap;
  }
  .dmx_header_tel i {
    font-size: 15px;
    color: var(--accent-strong);
  }
  .dmx_header_tel_txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .dmx_header_tel_label {
    /* 12px queda por debajo del minimo legible recomendado para texto de
       interfaz; 13px cabe igual en la cabecera. */
    font-size: 13px;
    color: var(--body-color);
  }
  .dmx_header_tel strong {
    font-size: 16px;
    font-weight: 700;
  }
  .dmx_header_tel:hover strong,
  .dmx_header_tel:focus strong {
    color: var(--accent-strong);
  }
}

/* --- Escala tipografica ---------------------------------------------------
   La plantilla llegaba a 20 combinaciones tamaño/peso visibles en la portada.
   Se colapsan las cuatro sueltas a los pasos de la escala (13/16/19/24/32/48)
   y a dos pesos, sin tocar los titulos, que ya eran consistentes. */
.cs_extra_bold {
  font-weight: 700;
}
.cs_semi_bold {
  font-weight: 500;
}

/* Rotulo de seccion sobre fondo gris (#e8edf0) y etiqueta de categoria. */
.cs_gray_bg .cs_section_subtitle.cs_accent_color,
.cs_section_subtitle.cs_accent_color {
  color: var(--accent-strong);
}
.cs_post_category,
.cs_post_category.position-absolute {
  background-color: var(--accent-strong);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Preguntas frecuentes
   <details>/<summary> nativo: abre con teclado sin JS, no gasta INP y no
   provoca salto de layout porque el contenido cerrado no ocupa espacio.
   --------------------------------------------------------------------------- */
.dmx_faq {
  padding: var(--espacio-20) 0;
  background-color: #f7f9fb;
}
@media (max-width: 991.98px) {
  .dmx_faq { padding: var(--espacio-14) 0; }
}
.dmx_faq_intro {
  max-width: 34em;
  margin: var(--espacio-3) auto 0;
}
.dmx_faq_lista {
  max-width: 820px;
  margin: var(--espacio-8) auto 0;
}
.dmx_faq_item {
  background-color: #fff;
  border: 1px solid #dfe6ec;
  border-radius: var(--radio-card);
  margin-bottom: var(--espacio-2);
}
.dmx_faq_pregunta {
  /* 20px vertical + linea de 24px = 64px de alto: por encima del minimo de
     44x44 de WCAG 2.2 (2.5.8) sin depender del largo de la pregunta. */
  padding: var(--espacio-4) var(--espacio-11) var(--espacio-4) var(--espacio-5);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue-color);
  cursor: pointer;
  position: relative;
  list-style: none;
}
.dmx_faq_pregunta::-webkit-details-marker { display: none; }
.dmx_faq_pregunta::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.dmx_faq_item[open] > .dmx_faq_pregunta::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.dmx_faq_item[open] > .dmx_faq_pregunta { color: var(--accent-strong); }
.dmx_faq_respuesta {
  padding: 0 var(--espacio-11) var(--espacio-4) var(--espacio-5);
}
.dmx_faq_respuesta p { margin: 0; }
.dmx_faq_cta {
  margin: var(--espacio-7) 0 0;
  text-align: center;
}
.dmx_faq_tel {
  display: inline-block;
  margin-left: var(--espacio-4);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .dmx_faq_pregunta { font-size: 16px; padding-right: var(--espacio-10); }
  .dmx_faq_tel { display: block; margin: var(--espacio-3) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dmx_faq_pregunta::after { transition: none; }
}

/* Migaja de pan: el elemento actual usaba --accent-color (#2ea6f7) sobre
   blanco, 2.65:1. Es texto plano, no enlace, asi que va en tono de cuerpo. */
/* La regla de la plantilla es .cs_page_heading .breadcrumb .active (0,3,0):
   hay que igualar especificidad o no gana. */
.cs_page_heading .breadcrumb .active,
.cs_page_heading .breadcrumb li.active,
.cs_breadcrumb li.active {
  color: #4a5568;
}

/* WCAG 2.2 SC 2.5.8: los enlaces de listas de navegacion (pie y submenus) no
   son texto en linea dentro de un parrafo, asi que si les aplica el minimo de
   24px de alto de objetivo. La altura venia de 19px. */
.cs_footer_widget_nav_list a,
.cs_footer_menu a,
.cs_nav_list .cs_mega_wrapper a,
.cs_nav_list ul a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
  min-height: 24px;
}

/* Los enlaces de telefono son objetivo tactil por si mismos, no texto en linea
   dentro de una frase: se les da el alto minimo de 24px (WCAG 2.2, 2.5.8). */
a[href^='tel:'],
a[href^='mailto:'] {
  display: inline-block;
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* --- Contraste sobre fondo azul oscuro (--blue-color #002261) --------------
   El acento oscuro (--accent-strong) que se puso para fondos claros queda en 2.2:1
   sobre el azul de marca. En esos bloques el acento tiene que ser claro. */
.cs_blue_bg .cs_section_subtitle.cs_accent_color,
.cs_blue_bg .cs_section_subtitle,
.cs_footer .cs_section_subtitle.cs_accent_color {
  color: #9ed3ff;
}
/* El texto del boton de video heredaba el gris del cuerpo (#636363) sobre el
   mismo azul: 2.49:1. */
.cs_blue_bg .cs_play_btn_text,
.cs_blue_bg .cs_play_btn_text a {
  color: #fff;
}

/* Etiqueta de categoria del blog: pastilla blanca con texto en #2ea6f7
   (2.65:1). La regla de la plantilla es .cs_post.cs_style_1 .cs_post_category
   (0,3,0), asi que hay que igualarla. */
.cs_post.cs_style_1 .cs_post_category,
.cs_post .cs_post_thumbnail .cs_post_category {
  color: var(--accent-strong);
}

/* Horarios: las franjas usaban el acento claro sobre blanco, 2.65:1. La regla
   original es .cs_content_row .cs_schedule_wrapper .cs_schedule_time. */
.cs_content_row .cs_schedule_wrapper .cs_schedule_time,
.cs_timeline_wrapper .cs_schedule_wrapper .cs_schedule_time {
  color: var(--accent-strong);
}

/* Casos: el texto blanco de la ficha va directamente encima de la foto, sin
   ninguna capa intermedia. Con una foto clara deja de leerse. El degradado
   garantiza el contraste sin tapar la imagen (WCAG 1.4.3). */
.cs_card.cs_style_5 .cs_card_thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 20, 58, 0.88) 0%, rgba(0, 20, 58, 0.55) 45%, rgba(0, 20, 58, 0.15) 100%);
  pointer-events: none;
}
.cs_card.cs_style_5 .cs_card_thumbnail {
  position: relative;
}

/* La migaja "Inicio" medía 23px de alto: un pixel por debajo del minimo. */
.cs_page_heading .breadcrumb a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}

/* Que pasa despues de enviar, dicho antes del boton. Tono de nota, no de
   error: gris legible (5.7:1 sobre blanco) y sin peso extra. */
.dmx_expectativa {
  margin: 0 0 var(--espacio-4);
  font-size: 14px;
  line-height: 1.55;
  color: #4a5568;
}
.cs_blue_bg .dmx_expectativa,
.cs_footer .dmx_expectativa { color: #c8d6ea; }

/* El enlace de la miniatura era una caja en linea: su area de foco se dibujaba
   como una franja de 20x26 al lado de la imagen, no sobre ella. */
.cs_post_thumbnail,
.cs_post.cs_style_1 .cs_post_thumbnail { display: block; }

/* Mensaje de exito: titulo, que sigue y salidas. El aviso dejo de ser un
   parrafo suelto para ser el cierre del flujo. */
.dmx_aviso_ok p { margin: 0 0 var(--espacio-2); }
.dmx_aviso_ok p:last-child { margin-bottom: 0; }
.dmx_aviso_titulo { font-weight: 700; font-size: 18px; }
.dmx_aviso_acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
  margin-top: var(--espacio-3);
}
.dmx_aviso_acciones .cs_btn,
.cs_appointment_form .dmx_aviso_acciones .cs_btn.cs_style_1,
.cs_contact_form .dmx_aviso_acciones .cs_btn.cs_style_1 {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: 1.6em;
}
/* El boton de enviar de la agenda es cuadrado y de ancho completo a proposito
   (diseno de Medilo), y el de contacto llega con `margin-top:10px`. Ninguna de
   las dos cosas aplica aqui: este es un boton normal dentro de una fila, asi
   que se le devuelven el radio, el ancho y el margen. El hover tambien: en el
   formulario de agenda `.cs_appointment_form .cs_btn.cs_style_1:hover` gana por
   orden de hoja y lo pinta de #2ea6f7, que con texto blanco se queda en 2.6:1;
   el resto del sitio usa el azul marino de `cs_color_1`. */
.cs_appointment_form .dmx_aviso_acciones .cs_btn.cs_style_1:hover {
  background-color: var(--blue-color);
}
.dmx_aviso_acciones a[href^='tel:'] { color: #14532d; text-decoration: underline; }

/* --- 1.4.12 Espaciado de texto -------------------------------------------
   Con el line-height 1.5 que exige el criterio, las etiquetas de las pestanas
   crecen a 80px dentro de una caja de 60px con overflow:hidden y se cortan.
   La altura pasa a ser un minimo. */
.cs_tab_links.cs_style_1 li a {
  height: auto;
  min-height: 60px;
  overflow: visible;
}

/* --- Estados vacios: busqueda sin resultados, blog sin entradas, 404 ---
   La rejilla del blog es grid; el aviso tiene que ocupar el ancho completo
   en lugar de quedarse como una columna de tarjeta. */
.dmx_vacio { grid-column: 1 / -1; flex: 1 1 100%; width: 100%; }
.dmx_vacio_titulo { font-size: 22px; font-weight: 700; color: var(--blue-color); margin: 0 0 var(--espacio-2); }
.dmx_vacio p { color: #4a5568; margin: 0 0 var(--espacio-3); }
.dmx_vacio_buscador label { display: block; font-size: 14px; color: #4a5568; margin-bottom: var(--espacio-1); }
.dmx_vacio_campos { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-bottom: var(--espacio-4); }
.dmx_vacio_campos input[type='search'] {
  flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 var(--espacio-3);
  border: 1px solid #cbd5e0; border-radius: var(--radio-input); font-size: 16px;
}
.dmx_vacio_campos .cs_btn { flex: 0 0 auto; width: auto; padding: var(--espacio-2) var(--espacio-5); }

.dmx_rescate { list-style: none; padding: 0; margin: 0 0 var(--espacio-5); display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-2); }
.cs_error_content .dmx_rescate { justify-content: center; }
.dmx_rescate a {
  display: inline-block; padding: var(--espacio-2) var(--espacio-4); border: 1px solid #cbd5e0; border-radius: var(--radio-pill);
  color: var(--blue-color); font-size: 15px; line-height: 1.4; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.dmx_rescate a:hover, .dmx_rescate a:focus-visible { background: #eef6fd; border-color: var(--accent-strong); }

/* --- Entrada individual: cierre y navegacion --- */
.dmx_cta_entrada { background: #eef6fd; border-radius: var(--radio-card); padding: var(--espacio-5) var(--espacio-6); }
.dmx_cta_entrada_titulo { font-size: 20px; font-weight: 700; color: var(--blue-color); margin: 0 0 var(--espacio-2); }
.dmx_cta_entrada p { color: #4a5568; margin: 0 0 var(--espacio-3); }
.dmx_cta_entrada_acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-4); }
.dmx_cta_entrada_acciones .cs_btn { flex: 0 0 auto; width: auto; }
.dmx_cta_entrada_acciones a:not(.cs_btn) { color: var(--accent-strong); text-decoration: underline; }

.dmx_nav_entradas { display: flex; flex-wrap: wrap; gap: var(--espacio-3); justify-content: space-between; margin-top: var(--espacio-7); }
.dmx_nav_entradas span { flex: 1 1 240px; }
.dmx_nav_entradas .dmx_nav_sig { text-align: right; }
.dmx_nav_entradas a {
  display: block; padding: var(--espacio-3) var(--espacio-4); border: 1px solid #e2e8f0; border-radius: var(--radio-card);
  color: var(--blue-color); font-weight: 600; line-height: 1.4; text-decoration: none;
}
.dmx_nav_entradas a:hover, .dmx_nav_entradas a:focus-visible { border-color: var(--accent-strong); background: #f7fbff; }
.dmx_nav_entradas .dmx_nav_prev a::before { content: '\2190\00a0\00a0'; }
.dmx_nav_entradas .dmx_nav_sig a::after { content: '\00a0\00a0\2192'; }

.cs_post_body > *:last-child { margin-bottom: 0; }
.cs_post_tags { margin: var(--espacio-5) 0 0; }

/* --- Escala tipográfica ---
   La plantilla mezclaba 13/15/17/19/27 px con la escala par que usa el resto
   del sitio (14/16/18/20/22/24/28/40/48). Dos textos con el mismo papel salian
   con tamanos distintos segun la pagina. Se redondean a la escala. */
.cs_btn.cs_style_1,
.cs_tab_links.cs_style_3,
.cs_recent_post .cs_recent_post_title,
.cs_sidebar_widget .cs_tag_list .cs_tag_link,
.cs_about.cs_style_1.cs_type_2 .cs_video_open,
.cs_hero.cs_style_2 .cs_video_open { font-size: 18px; }

.cs_page_heading .breadcrumb,
.cs_hero.cs_style_1 .cs_hero_subtitle,
.cs_hero.cs_style_2 .cs_hero_subtitle,
.cs_hero.cs_style_3 .cs_hero_subtitle,
.cs_tab_links.cs_style_1 li a span { font-size: 20px; }

.cs_card.cs_style_2 .cs_card_title { font-size: 28px; }

.dmx_header_tel_label { font-size: 14px; }

/* --- Mapa de ubicacion --- */
.cs_location_map { line-height: 0; }
.cs_location_map iframe { display: block; width: 100%; height: 500px; border: 0; }
.dmx_mapa_pie {
  line-height: 1.5; margin: 0; padding: var(--espacio-3) var(--espacio-4); background: #f7fbff;
  color: #4a5568; font-size: 15px; display: flex; flex-wrap: wrap; gap: var(--espacio-1) var(--espacio-4);
  align-items: baseline; justify-content: space-between;
}
.dmx_mapa_pie a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; }
@media (max-width: 767.98px) { .cs_location_map iframe { height: 320px; } }

/* --- Objetivos táctiles de 44x44 (Apple HIG, Material, WCAG 2.5.5) ---
   El criterio AA (2.5.8) pide 24x24 y eso ya se cumplia, pero el boton del
   menu medía 30x27: es el control mas usado del sitio en movil y el que mas
   se falla al pulsar. El area crece sin mover nada de sitio. */
.cs_menu_toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin-right: -7px;
}
/* Esta regla existia sin condicion de ancho y anulaba el `display: none` de
   :432, con lo que el telefono de escritorio se colaba en la cabecera movil y
   salia a 194x31: apretado, por debajo de 44 px y peleandose el sitio con el
   logo. Se anadio para cumplir un target tactil y rompio el diseno responsive.
   En movil el telefono si vale la pena — una clinica dental recibe urgencias —
   pero como boton de icono de 44x44, no como el bloque de escritorio. */
@media (min-width: 1200px) {
  .dmx_header_tel { min-height: 44px; display: inline-flex; align-items: center; }
}
/* El selector lleva la etiqueta a proposito: `.dmx_header_tel` es 0,1,0 y la
   regla general de telefonos de :801 es 0,1,1, asi que ganaba por
   especificidad y dejaba este enlace en 30 px de alto con `display: block` —
   el `min-height: 44px` de aqui no se aplicaba nunca (4.43). Con `a.` las dos
   reglas empatan y decide el orden, que es esta. Mismo error que ya se
   documento para .dmx_faq_tel en :1236. */
@media (max-width: 1199.98px) {
  a.dmx_header_tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: var(--espacio-1);
    color: var(--blue-color);
  }
  /* El numero y la etiqueta ocupan demasiado al lado del logo. Se ocultan a la
     vista pero NO con `display: none`: el icono es aria-hidden, asi que
     esconder tambien el texto dejaria el enlace sin nombre accesible y un
     lector de pantalla anunciaria "enlace" a secas. Se usa el patron de texto
     visualmente oculto, que lo mantiene en el arbol de accesibilidad. */
  .dmx_header_tel .dmx_header_tel_txt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .dmx_header_tel i { font-size: 18px; }
}
.cs_search_form .cs_form_field,
.cs_search input[type='search'],
form[role='search'] input { min-height: 44px; }

/* En pantallas tactiles el dedo necesita 44px; en escritorio el raton no, y
   estirar todo ahi solo separaria las tarjetas sin motivo. */
@media (pointer: coarse) {
  .cs_main_header_right .dmx_header_tel { min-height: 44px; }
  .cs_header_search_form_in .cs_header_search_field { min-height: 44px; }
  .cs_post.cs_style_1 .cs_post_btn,
  .cs_post .cs_post_btn { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Resto de controles de navegacion que en tactil quedaban entre 19 y 32 px de
   alto. Se les da alto de 44 sin cambiar el tipo ni la posicion del texto. */
@media (pointer: coarse) {
  .cs_footer_widget_nav_list li a,
  .cs_footer_menu li a,
  .cs_footer_contact li a[href^='tel:'],
  .cs_tab_links.cs_style_3 li a,
  .cs_service_footer_text a,
  .cs_about_iconbox_subtitle a,
  .dmx_faq_tel,
  .cs_hero_info p a[href^='tel:'] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .cs_footer_widget_nav_list li,
  .cs_footer_menu li { margin-bottom: 0; }
}

/* ==========================================================================
   Ciclo 3 — hallazgos de /ui-audit
   ========================================================================== */

/* Ni la hoja de la plantilla ni esta definian :active en ningun componente
   (grep -c ':active' devolvia 0 en ambas). En movil, donde no hay hover
   previo, el paciente pulsa "Agendar cita" y no recibe ningun acuse hasta que
   carga la pagina siguiente: el escenario de la doble pulsacion. El formulario
   ya se protegia con aria-disabled; la navegacion no.

   Ciclo 4: la lista es por selector, asi que el agendador —escrito despues—
   nacio sin :active, y es la superficie que mas se toca del sitio. Se anaden
   sus cuatro controles. */
.cs_btn:active,
.cs_post_btn:active,
.cs_card_btn:active,
.cs_menu_toggle:active,
.dmx_faq_pregunta:active,
.cs_pagination a:active,
.dmx_rescate a:active,
.dmx_agenda_dia:active,
.dmx_agenda_hora:active,
.dmx_agenda_atras:active,
.dmx_agenda_secundario:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .cs_btn:active,
  .cs_post_btn:active,
  .cs_card_btn:active,
  .cs_menu_toggle:active,
  .dmx_faq_pregunta:active,
  .cs_pagination a:active,
  .dmx_rescate a:active,
  .dmx_agenda_dia:active,
  .dmx_agenda_hora:active,
  .dmx_agenda_atras:active,
  .dmx_agenda_secundario:active {
    transform: none;
    opacity: 0.85;
  }
}

/* La nota de "que pasa despues de enviar" estaba a 14px: tamano de pie de
   foto para el texto que baja la ansiedad justo antes del boton. Sube a 15
   sin igualar el cuerpo (16), que la dejaria compitiendo con las etiquetas. */
.dmx_expectativa { font-size: 15px; }

/* Escala tipografica: 13 tamanos distintos en portada. Estos dos pares no
   se distinguen a simple vista y no marcan jerarquia real. 13 -> 11. */
.cs_post.cs_style_1 .cs_post_subtitle,
.cs_post.cs_style_1 .cs_post_category { font-size: 16px; }
.cs_avatar_title { font-size: 28px; }

/* Resumen de errores del formulario (patron GOV.UK). Borde grueso a la
   izquierda en lugar de fondo rojo: el fondo saturado sobre el que van los
   enlaces obliga a recalcular contrastes y no aporta nada que el borde y el
   titulo no digan ya. */
.dmx_resumen_errores {
  margin: 0 0 var(--espacio-6);
  padding: var(--espacio-4) var(--espacio-4);
  border-left: 5px solid #b42318;
  background: #fef3f2;
  border-radius: var(--radio-input);
}
.dmx_resumen_errores:focus { outline: 3px solid var(--blue-color); outline-offset: 2px; }
.dmx_resumen_titulo {
  margin: 0 0 var(--espacio-2);
  font-size: 18px;
  font-weight: 600;
  color: #912018;
}
.dmx_resumen_lista { margin: 0; padding-left: var(--espacio-4); }
.dmx_resumen_lista li { margin-bottom: var(--espacio-1); }
.dmx_resumen_lista li:last-child { margin-bottom: 0; }
.dmx_resumen_lista a {
  color: #912018;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dmx_resumen_lista a:hover { color: #6c1610; }
@media (pointer: coarse) {
  .dmx_resumen_lista a { display: inline-flex; align-items: center; min-height: 44px; }
  .dmx_resumen_lista li { margin-bottom: 0; }
}

/* Marcador del mapa mientras el domicilio sea de relleno. Deliberadamente
   sobrio y sin apariencia de error: no es un fallo del sitio, es un dato que
   falta. */
.dmx_mapa_pendiente {
  padding: var(--espacio-8) var(--espacio-5);
  border: 2px dashed #c3ccd6;
  border-radius: var(--radio-card);
  background: #f7f9fb;
  text-align: center;
  color: #4a5568;
}
.dmx_mapa_pendiente p { margin: 0 0 var(--espacio-2); }
.dmx_mapa_pendiente p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Ciclo 3 — cierre
   ========================================================================== */

/* El menu movil no se oculta: se manda fuera de pantalla con `left: -100vw`
   (assets/css/style.css, dentro de @media max-width 1199px). Queda visible
   para el navegador, asi que sus ocho enlaces siguen en el orden de tabulado.
   Un usuario de teclado que tabula por la cabecera cae dentro de un menu que
   no puede ver y sin indicador de foco a la vista: incumple 2.4.3 y 2.4.7.
   `visibility: hidden` los saca del tabulado y del arbol de accesibilidad, y
   el retardo de 0.3s deja que la animacion de cierre termine antes. */
@media screen and (max-width: 1199.98px) {
  .cs_nav .cs_nav_list {
    visibility: hidden;
    transition: left 0.3s ease, visibility 0s linear 0.3s;
  }
  .cs_nav .cs_nav_list.cs_active {
    visibility: visible;
    transition: left 0.3s ease, visibility 0s linear 0s;
  }
}
@media screen and (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .cs_nav .cs_nav_list,
  .cs_nav .cs_nav_list.cs_active { transition: none; }
}

/* El cajon movil mide `min-height: 100vh` (assets/css/style.css:4301) y en
   Safari iOS y Chrome Android 100vh incluye la barra del navegador: el
   ultimo enlace podia quedar debajo de ella y ademas de la barra fija de
   acciones del pie (60 px). Con la altura limitada el cajon si desplaza, y
   dvh mide el viewport que de verdad se ve. */
@media screen and (max-width: 1199.98px) {
  .cs_nav .cs_nav_list {
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: var(--espacio-16);
  }
  @supports (height: 100dvh) {
    .cs_nav .cs_nav_list {
      min-height: 100dvh;
      max-height: 100dvh;
    }
  }
}

/* Los enlaces del cajon movil quedaban en 36 px de alto (padding 10 + linea de
   16). Con el menu cerrado no se veia porque no eran medibles; al abrirlo son
   los ocho destinos principales del sitio, en la pantalla donde el dedo es el
   unico puntero. */
@media screen and (max-width: 1199.98px) {
  .cs_nav .cs_nav_list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: var(--espacio-1);
    padding-bottom: var(--espacio-1);
  }
  /* El conmutador de submenu nace absoluto y a `width: 100%` (dmx.css, dentro de
     su @media de hasta 1199px), asi que se acuesta encima del enlace padre y lo
     tapa entero: con el menu abierto a 375 px, `elementFromPoint` devolvia el
     boton en los tres extremos del renglon y «Nosotros» no se podia tocar en
     ningun telefono ni tableta. Se le acota al extremo derecho. El icono no se
     mueve de sitio: la regla de origen ya lo alinea con `justify-content:
     flex-end` y 20px de relleno, y 56px siguen por encima del minimo tactil. */
  .cs_nav .cs_nav_list .cs_menu_dropdown_toggle {
    min-width: 44px;
    min-height: 44px;
    left: auto;
    right: 0;
    width: 56px;
  }
}

/* El submenu de escritorio solo abria con `:hover` (`.cs_nav .cs_nav_list > li:hover
   > ul` en dmx.css, dentro de su @media de 1200px en adelante). Como el `<ul>` se
   queda en `visibility: hidden`, su enlace no es enfocable, y «Horarios» quedaba
   fuera del alcance del teclado desde la navegacion principal (WCAG 2.1.1, nivel A).
   Este es el gemelo por foco de aquella regla, con las mismas declaraciones. */
@media (min-width: 1200px) {
  .cs_nav .cs_nav_list > li:focus-within > ul {
    top: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Migas de pan en pantalla tactil. Miden 50x34 y 33x44: pasan el minimo AA de
   24x24 y les aplica la excepcion de destino en linea, asi que no eran un
   incumplimiento. Aun asi son los dos unicos pulsables del sitio por debajo de
   44 px, y estan pegados uno a otro. Se les da la altura por padding; el ancho
   se deja como esta, porque estirarlo separaria las migas del separador y las
   dejaria de leer como una ruta. */
@media (pointer: coarse) {
  .cs_page_heading .breadcrumb li,
  .cs_page_heading .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* El bloque de arriba daba 44 px a `.dmx_faq_tel` (0,1,0) y no servia: la regla
   general de telefonos, `a[href^='tel:']`, es 0,1,1 y le fijaba el minimo en
   24 px. Ganaba por especificidad, no por orden, asi que el enlace se quedaba
   en 30 px de alto sin que se notara al leer la hoja. Se sube el minimo en la
   propia regla de telefonos, que es donde estaba el tope. */
@media (pointer: coarse) {
  a[href^='tel:'],
  a[href^='mailto:'] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Hero sin slick (6.4.4): solo se ve una diapositiva. Antes de que dmx.js
   arranque (y sin JS) es la primera, que es el bloque del LCP; despues, la que
   lleva .dmx_activa. Al cambiar entra deslizando desde la derecha; al cargar
   no se anima nada para no retrasar el LCP. */
.cs_hero_slider_thumb {
  touch-action: pan-y;
}
.cs_hero_slider_thumb_item + .cs_hero_slider_thumb_item,
.cs_hero_slider_thumb.dmx_activo .cs_hero_slider_thumb_item {
  display: none;
}
.cs_hero_slider_thumb.dmx_activo .cs_hero_slider_thumb_item.dmx_activa {
  display: block;
}
@keyframes dmx_hero_entra {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cs_hero_slider_thumb_item.dmx_anim .cs_hero_text_in {
  animation: dmx_hero_entra 0.3s ease both;
}

/* Carruseles de tarjetas sin slick (6.4.4): scroll-snap horizontal. Cada
   tarjeta mide 1/N del ancho (N lo pone dmx.js en --dmx-n segun los
   data-*-slides del contenedor) y los puntos de .cs_pagination son botones
   que desplazan el carril. La barra de scroll se oculta: los puntos y el
   propio arrastre ya dicen que hay mas. */
.cs_slider_wrapper {
  display: flex;
  gap: var(--espacio-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: var(--espacio-2) 0;
}
.cs_slider_wrapper::-webkit-scrollbar {
  display: none;
}
.cs_slider_wrapper > .cs_slide {
  flex: 0 0 calc((100% - (var(--dmx-n, 1) - 1) * 20px) / var(--dmx-n, 1));
  scroll-snap-align: start;
}
.cs_pagination.cs_style_2 button {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
}

/* 4.62: el punto se dibuja de 25x8 (40x8 el activo), por debajo del minimo de
   24x24 de WCAG 2.5.8 (AA) en su dimension vertical. El criterio no distingue
   raton de dedo, asi que el area pulsable se estira siempre con un
   pseudoelemento centrado -que no empuja la fila de puntos ni cambia nada
   visualmente-, y en tactil sube a 44x44 en el bloque @media (pointer: coarse)
   de mas abajo. */
.cs_pagination.cs_style_2 button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 24px;
  height: 24px;
}

/* El toggle del menu movil y el de los submenus son <button> de verdad (los
   dibuja dmx.js); se les quita el aspecto de boton del navegador. */
button.cs_menu_toggle,
button.cs_menu_dropdown_toggle {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
}
button.cs_menu_dropdown_toggle {
  padding: var(--espacio-5) var(--espacio-4);
}

/* Apariciones al hacer scroll (6.4.4): dmx.js esconde los bloques .wow solo
   cuando ya esta corriendo y los revela con IntersectionObserver anadiendo
   .animated. Sin JS nunca se esconden. */
.wow.dmx_oculto {
  visibility: hidden;
}

/* El nombre y la especialidad de cada doctor solo aparecian al pasar el mouse
   por encima. En un telefono no hay mouse: la tarjeta se quedaba con la foto
   y nada mas, en la seccion donde el paciente quiere saber quien lo va a
   atender. Con puntero grueso se deja fijo el mismo estado del hover, que ya
   esta disenado y no inventa un diseno nuevo. */
@media (pointer: coarse) {
  .cs_team.cs_style_1 .cs_team_thumbnail {
    width: 178px;
    height: 178px;
    border-radius: 50%;
    overflow: hidden;
  }
  .cs_team.cs_style_1 .cs_team_bio {
    position: initial;
    opacity: 1;
    transform: translateY(0);
  }
  .cs_team.cs_style_1 .cs_team_shape {
    top: -170px;
    right: -110px;
  }
  .cs_team.cs_style_1 .cs_team_shape.cs_blue_bg {
    top: -135px;
    left: -50px;
  }
}


/* La banda de titulo de las paginas internas usa una foto de 1920x612 con un
   aspa azul dibujada justo a la mitad. Con `cover`, en pantallas estrechas el
   recorte deja esa aspa encima del titulo: en /doctores/ cruzaba la palabra
   "doctores". Mover el encuadre no sirve — al correrlo a la derecha las caras
   de la foto quedan detras del texto y la miga de pan se vuelve ilegible. Se
   pone un degradado del mismo gris de la imagen (#e9edf0) sobre la mitad
   izquierda: el texto queda sobre plano y las personas siguen viendose. El
   aspa cae al 49-50% del encuadre tanto a 390 px como a 768, y entre ella y
   las personas la foto es gris liso, asi que el degradado se apaga entre el
   54% y el 66% sin que se note el corte. */
@media (max-width: 991.98px) {
  .cs_page_heading {
    position: relative;
  }
  .cs_page_heading::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #e9edf0 0%, #e9edf0 54%, rgba(233, 237, 240, 0) 66%);
  }
  .cs_page_heading > .container {
    position: relative;
    z-index: 1;
  }
}

/* --- Tabla de horarios ---------------------------------------------------- */
.dmx_horarios_tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--espacio-6);
}
.dmx_horarios_tabla th,
.dmx_horarios_tabla td {
  padding: var(--espacio-3) var(--espacio-3);
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  font-size: 17px;
}
.dmx_horarios_tabla thead th {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a5568;
  border-bottom-width: 2px;
}
.dmx_horarios_tabla tbody th {
  font-weight: 600;
  color: var(--blue-color);
}
/* El dia de hoy se marca con fondo y con la palabra "hoy": si solo fuera el
   fondo, quien no distingue ese contraste no se entera de cual es. */
.dmx_horarios_hoy {
  background: #e8f5ec;
}
.dmx_horarios_hoy th,
.dmx_horarios_hoy td {
  color: #14532d;
}
.dmx_horarios_marca {
  font-weight: 400;
  color: #14532d;
}
.dmx_horarios_nota {
  max-width: 62ch;
  color: #4a5568;
}

/* Cedula profesional en la ficha del especialista. Es un dato de verificacion,
   no un titulo: va en tono discreto y con el enlace al registro de la SEP. */
.cs_doctor_cedula {
  margin-top: var(--espacio-1);
  font-size: 15px;
  color: #4a5568;
}
.cs_doctor_cedula a {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* Precio en la tarjeta del tratamiento y tabla de precios de referencia.
   Solo salen cuando la clinica ha capturado el precio en el panel. */
.cs_iconbox_precio {
  margin-top: var(--espacio-2) !important;
  font-weight: 700;
  color: #14532d;
}
.dmx_precios {
  padding: var(--espacio-12) 0;
}
.dmx_precios_nota {
  max-width: 46em;
  color: #4a5568;
  margin-bottom: var(--espacio-5);
}
.dmx_precios_tabla {
  width: 100%;
  border-collapse: collapse;
  max-width: 720px;
}
.dmx_precios_tabla th,
.dmx_precios_tabla td {
  text-align: left;
  padding: var(--espacio-2) var(--espacio-3);
  border-bottom: 1px solid #e2e8f0;
}
.dmx_precios_tabla thead th {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4a5568;
}
.dmx_precios_tabla tbody td {
  font-weight: 700;
  white-space: nowrap;
}

/* El numero de las tarjetas de servicio ("01", "02") era un <h3> y pasa a
   <div> decorativo: un lector de pantalla lo anunciaba como titulo. Se le
   conserva la fuente y el margen que traia como encabezado para que la
   tarjeta no se mueva. */
.cs_iconbox .iconbox_index {
  font-family: var(--heading-font);
  margin: 0 0 var(--espacio-4) 0;
}

/* El fondo LCP de cada pagina viene en linea como variable (build.py,
   _fondo_lcp): asi la copia recortada para telefono se elige con una media
   query en vez de esperar a que main.js pinte el fondo. */
[style*="--dmx-fondo"] {
  background-image: var(--dmx-fondo);
}
@media (max-width: 480px) {
  [style*="--dmx-fondo-movil"] {
    background-image: var(--dmx-fondo-movil);
  }
}

/* --- Velo del hero (6.5.0) ------------------------------------------------
   El "Extra css" de Medilo anula con `inherit` la tarjeta blanca que la
   plantilla le pone a .cs_hero_text: en la demo daba igual, porque el fondo
   era un recorte de persona sobre papel blanco y la mitad izquierda estaba
   vacia. Con fotos de verdad el titular azul marino y el parrafo gris caen
   encima de la foto y se pierden. En vez de devolver la tarjeta (cambiaria el
   diseno ya revisado) se aclara el lado del texto con un degradado, que
   funciona con cualquier foto que entre despues. */
.cs_hero.cs_style_1 {
  position: relative;
}
.cs_hero.cs_style_1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.88) 38%,
    rgba(255, 255, 255, 0.55) 62%,
    rgba(255, 255, 255, 0) 85%
  );
  pointer-events: none;
}
/* El contenido va por encima del velo; el icono giratorio vive dentro de
   .cs_hero_text, asi que sube con el. */
.cs_hero.cs_style_1 > .container {
  position: relative;
  z-index: 1;
}
/* En movil el texto ocupa todo el ancho: el degradado lateral no basta. */
@media (max-width: 991.98px) {
  .cs_hero.cs_style_1::before {
    background: rgba(255, 255, 255, 0.9);
  }
}

/* Franja "Lo que cambia cuando te atiendes aqui" (6.5.0): misma historia que
   el hero. En la demo service_bg_2 era una imagen casi plana sobre gris, asi
   que el texto oscuro se leia; con una foto de verdad detras no. Se vela con
   el gris de la seccion y la foto queda como textura. */
section.cs_gray_bg.cs_bg_filed {
  position: relative;
}
section.cs_gray_bg.cs_bg_filed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(232, 237, 240, 0.93);
  pointer-events: none;
}
section.cs_gray_bg.cs_bg_filed > * {
  position: relative;
  z-index: 1;
}

/* Iconos de la franja "Lo que cambia cuando te atiendes aqui" (6.5.0).
   Medilo dibuja esa caja blanca con el icono oscuro y la invierte al pasar el
   cursor. Nuestros iconos (dmx_srv_*.svg) son blancos, porque en el resto del
   sitio viven sobre cajas azules: en esta franja quedaban blancos sobre blanco,
   invisibles hasta el hover. Se invierte el orden -- caja azul de entrada,
   azul marino al pasar el cursor -- y el icono se queda blanco siempre. */
.cs_iconbox.cs_style_3 .cs_iconbox_icon::before {
  background-color: var(--accent-color);
}
.cs_iconbox.cs_style_3 .cs_iconbox_icon::after {
  background-color: var(--blue-color);
}
.cs_iconbox.cs_style_3:hover .cs_iconbox_icon img,
.cs_iconbox.cs_style_3 .cs_iconbox_icon img {
  filter: none;
}

/* --- Velos de las franjas con foto de fondo (6.5.0) -----------------------
   Medilo traia aqui imagenes ya teñidas de azul marino, asi que la clase
   cs_blue_bg nunca se veia y el texto blanco encima se leia solo. Con fotos
   de verdad la imagen tapa ese azul y el texto queda encima de la foto. Se
   repone el azul como velo, para que cualquier foto que entre despues siga
   funcionando sin retocar el diseño. */
.cs_blue_bg.cs_bg_filed {
  position: relative;
}
.cs_blue_bg.cs_bg_filed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 34, 97, 0.88);
  pointer-events: none;
}
.cs_blue_bg.cs_bg_filed > * {
  position: relative;
  z-index: 1;
}

/* La cabecera de las paginas interiores lleva el titulo en gris oscuro: aqui
   el velo es claro, como en la portada. */
.cs_page_heading.cs_bg_filed {
  position: relative;
}
.cs_page_heading.cs_bg_filed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}
.cs_page_heading.cs_bg_filed > * {
  position: relative;
  z-index: 1;
}

/* --- Pestañas "Cómo decidimos y revisamos tu tratamiento" -----------------
   Medilo pinta la pestaña activa con un ovalo azul claro de 70x100 que se
   sale de la caja (la caja mide 69 de alto) y deja un rombo suelto flotando
   debajo. Aqui las cuatro son la misma tarjeta, el icono va en un cuadro
   contenido y el puntero queda pegado a la activa. */
.cs_tab_links.cs_style_1 {
  gap: 16px;
  flex-wrap: wrap;
}
.cs_tab_links.cs_style_1 li {
  flex: 1 1 210px;
  max-width: 300px;
  background-color: #fff;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cs_tab_links.cs_style_1 li a {
  height: auto;
  min-height: 78px;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 14px;
  overflow: visible;
  font-size: 17px;
}
.cs_tab_links.cs_style_1 li a span {
  font-size: 17px;
  line-height: 1.35;
}
.cs_tab_links.cs_style_1 li .cs_tab_link_icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-left: 0;
  border: 0;
  border-radius: 12px;
  background-color: #eaf4fd;
}
/* El rombo: mismo color que la pestaña activa, la mitad dentro de la caja,
   asi apunta al panel en vez de flotar suelto. */
.cs_tab_links.cs_style_1 li::after {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.cs_tab_links.cs_style_1 li:hover {
  background-color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 6px 18px rgba(0, 34, 97, 0.09);
}
.cs_tab_links.cs_style_1 li:hover a {
  color: var(--heading-color);
}
.cs_tab_links.cs_style_1 li:hover::after {
  opacity: 0;
}
.cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon {
  background-color: #d8eafb;
  border: 0;
}
.cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon img {
  filter: none;
}
.cs_tab_links.cs_style_1 li.active,
.cs_tab_links.cs_style_1 li.active:hover {
  background-color: var(--blue-color);
  border-color: var(--blue-color);
  box-shadow: 0 8px 22px rgba(0, 34, 97, 0.18);
}
.cs_tab_links.cs_style_1 li.active a,
.cs_tab_links.cs_style_1 li.active:hover a {
  color: #fff;
}
.cs_tab_links.cs_style_1 li.active .cs_tab_link_icon,
.cs_tab_links.cs_style_1 li.active:hover .cs_tab_link_icon {
  background-color: rgba(255, 255, 255, 0.16);
  border: 0;
}
.cs_tab_links.cs_style_1 li.active .cs_tab_link_icon img,
.cs_tab_links.cs_style_1 li.active:hover .cs_tab_link_icon img {
  filter: brightness(0) invert(1);
}
.cs_tab_links.cs_style_1 li.active::after,
.cs_tab_links.cs_style_1 li.active:hover::after {
  background-color: var(--blue-color);
  transform: translate(-50%, 7px) rotate(45deg);
  opacity: 1;
}
@media (max-width: 575px) {
  /* En columna el flex-basis de 210px se vuelve alto, no ancho: se anula. */
  .cs_tab_links.cs_style_1 li {
    flex: 0 0 auto;
    max-width: none;
  }
  .cs_tab_links.cs_style_1 li a {
    width: 100%;
    justify-content: flex-start;
  }
  .cs_tab_links.cs_style_1 li.active .cs_tab_link_icon,
  .cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon {
    background-color: rgba(255, 255, 255, 0.16);
  }
  .cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon {
    background-color: #d8eafb;
  }
}

/* --- Tarjeta de contacto del pie -----------------------------------------
   Eran dos cajas anidadas: la tarjeta en azul de marca y, dentro, un bloque
   azul marino con los datos, puesto solo para que el texto blanco cumpliera
   AA (blanco sobre #2ea6f7 da 2.7:1). Se resuelve con una sola tarjeta en
   el azul oscurecido, que con blanco da 6:1, y los datos en filas. */
.cs_footer_highlight_col.cs_accent_bg {
  background-color: var(--accent-strong);
  padding: 44px 32px;
  border-radius: 14px 14px 0 0;
}
@media (max-width: 1199px) {
  .cs_footer_highlight_col.cs_accent_bg {
    padding: 40px 24px;
  }
}
.cs_footer_logo {
  padding-bottom: 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.cs_footer_contact {
  background-color: transparent;
  padding: 0;
}
.cs_footer_contact li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 14px;
  padding: 16px 0;
  padding-left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.cs_footer_contact li:not(:last-child) {
  margin-bottom: 0;
}
.cs_footer_contact li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.cs_footer_contact li i {
  position: static;
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 15px;
}
.cs_footer_highlight_col .cs_social_btns {
  margin-top: 26px;
}

/* --- CTA fijo de WhatsApp -------------------------------------------------
   En movil el contacto ya vive en la barra fija de abajo; en escritorio no
   habia ningun acceso permanente. Va abajo a la izquierda porque el boton
   de "subir" de la plantilla esta fijo a la derecha: asi nunca se encima.
   El verde de marca (#25D366) con texto blanco da 1.9:1, no cumple AA; se
   usa el mismo verde oscurecido, que da 5.4:1. */
.dmx_wa_flotante {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 998;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 22px 8px 18px;
  border-radius: 999px;
  background-color: #0b7a44;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 34, 97, 0.22);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.dmx_wa_flotante i {
  font-size: 22px;
}
.dmx_wa_flotante:hover,
.dmx_wa_flotante:focus-visible {
  background-color: #096236;
  color: #fff;
  transform: translateY(-2px);
}
@media (min-width: 992px) {
  .dmx_wa_flotante {
    display: inline-flex;
  }
  /* Hueco al final del pie para que el boton nunca tape el aviso legal. */
  .cs_footer_bottom {
    padding-bottom: 72px;
  }
}
/* El boton de "subir" se fijaba a 30 px del borde y quedaba encima de la
   barra de acciones movil, que mide 60. */
@media (max-width: 991.98px) {
  .cs_scrollup.cs_scrollup_show {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* --- Tarjetas de tratamientos a la misma altura ---------------------------
   Las tarjetas se alto automatico: con resumenes de 2 a 4 lineas cada una
   terminaba a distinta altura y la rejilla se veia desalineada. La columna
   de Bootstrap ya se estira (align-items: stretch), solo faltaba que la
   tarjeta llenara su columna. */
/* 4.33: salidas de la tarjeta de urgencia de la portada. Subrayadas porque
   el color ya lo hereda de .cs_iconbox_text a y el color solo no basta. */
.dmx_iconbox_accion {
  margin: 8px 0 0;
  font-weight: 600;
}
.dmx_iconbox_accion a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dmx_iconbox_accion span {
  color: var(--body-color);
  margin: 0 4px;
}

.cs_iconbox.cs_style_2 {
  height: 100%;
}

/* === Asistente de citas (theme/inc/agenda.php + assets/js/agenda.js) ======
   Cuatro pasos, uno visible a la vez. El paso se oculta con display:none y
   no con visibility, para que el lector de pantalla tampoco lea los pasos
   que todavia no tocan. Todo lo clicable mide 44 px o mas de alto porque
   la mitad de las citas se piden desde el telefono.
   El bloque se escribio con px a mano (6/8/12/14/15/16/18/20/24/28) y quedo
   fuera de la escala del principio del archivo; todo su espaciado pasa ahora
   por --espacio-N (grid de 5 px, diferencias de 1-2 px) y los radios por el
   token del rol: --radio-card en avisos, cajas y la ficha de confirmacion,
   --radio-input en los campos y en los chips de dia y hora. Siguen en px los
   tamanos (44/48 px de area tactil, 104/128 px de columna, 760 px de ancho),
   los bordes y las tipografias, que no tienen token. */
.dmx_agenda {
  max-width: 760px;
  margin-inline: auto;
}

/* Aviso de arriba: resultado de cancelar, confirmacion pendiente, o el
   recordatorio de que estas moviendo una cita que ya existe. */
.dmx_agenda_recado {
  border-left: 4px solid var(--accent-color);
  border-radius: var(--radio-card);
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-5);
  background: var(--gray-color);
  color: var(--heading-color);
}
.dmx_agenda_recado p:last-child {
  margin-bottom: 0;
}
/* 4.34: el recado fija color en el contenedor, asi que los enlaces heredaban
   el mismo #222 del texto, sin subrayado y con peso normal: no se distinguian
   por nada. Justo en el recado de urgencia (1.19.18) esos dos enlaces son la
   salida principal para alguien con dolor, asi que van subrayados y en el azul
   AA. Doble clase para ganarle al `color` del contenedor. */
.dmx_agenda_recado a,
.dmx_agenda_recado.dmx_agenda_urgencia a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.dmx_agenda_recado a:hover,
.dmx_agenda_recado a:focus-visible {
  text-decoration-thickness: 2px;
}
.dmx_tono_ok {
  border-left-color: #1c7c3f;
}
.dmx_tono_aviso {
  border-left-color: #b26a00;
}
.dmx_tono_error {
  border-left-color: #b3261e;
}

/* 4.37: en el recado el tono era lo unico que separaba un acuse de un error
   (1.4.1 nivel A), porque .dmx_tono_* solo cambia el color del borde. Son los
   mismos tres signos que ya lleva .dmx_agenda_estado, con el mismo `/ ''` de
   texto alternativo vacio para que el lector no los anuncie cada vez que
   cambia el aria-live. Doble clase otra vez: .dmx_agenda_recado se declara
   despues de .dmx_tono_* y con la misma especificidad. */
.dmx_agenda_recado.dmx_tono_ok::before,
.dmx_agenda_recado.dmx_tono_aviso::before,
.dmx_agenda_recado.dmx_tono_error::before {
  margin-right: 6px;
  font-weight: 700;
}
.dmx_agenda_recado.dmx_tono_ok::before {
  content: '\2713' / '';
  color: #1c7c3f;
}
.dmx_agenda_recado.dmx_tono_aviso::before {
  content: '!' / '';
  color: #b26a00;
}
.dmx_agenda_recado.dmx_tono_error::before {
  content: '\2715' / '';
  color: #b3261e;
}

/* Sin JavaScript el asistente no avanza: se esconde completo (barra de pasos,
   renglon de estado y formulario) y queda el formulario plano del <noscript>,
   que si se procesa en el servidor. La clase la pone un script en linea
   impreso junto al bloque, antes de que el navegador pinte el asistente, para
   que no se vea aparecer y desaparecer. */
html:not(.dmx-js) .dmx_agenda_pasos,
html:not(.dmx-js) .dmx_agenda_estado,
html:not(.dmx-js) .dmx_agenda_form {
  display: none;
}

/* Barra de pasos. Es solo referencia visual: el avance real lo maneja el
   formulario, asi que los numeros no son botones. */
.dmx_agenda_pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  list-style: none;
  margin: 0 0 var(--espacio-6);
  padding: 0;
}
.dmx_agenda_paso_num {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: 15px;
  color: var(--body-color);
}
.dmx_agenda_paso_num > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
}
.dmx_agenda_paso_num.is-activo {
  color: var(--heading-color);
  font-weight: 600;
}
/* Fondo con texto blanco: va con --accent-strong, no con --accent-color
   (#2ea6f7 da 2.65:1 contra blanco y falla 1.4.3 AA). Ver el bloque de
   contraste del principio del archivo. */
.dmx_agenda_paso_num.is-activo > span {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--white);
}
/* El paso ya recorrido va en contorno, no relleno: antes agenda.js marcaba
   is-activo en todo paso <= el actual, asi que el hecho y el de ahora se
   veian identicos y la barra no decia donde estas. Ahora el hecho lleva
   is-hecho (circulo blanco con el azul oscuro al borde, 6.0:1 sobre blanco) y
   solo el actual queda relleno. */
.dmx_agenda_paso_num.is-hecho {
  color: var(--heading-color);
}
.dmx_agenda_paso_num.is-hecho > span {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

/* Linea de estado (aria-live). Ocupa alto fijo para que el bloque no salte
   cada vez que aparece o desaparece un mensaje.

   El borde izquierdo nace transparente a proposito: agenda.js le cuelga
   .dmx_tono_ok / _aviso / _error, que solo cambian border-left-color. Antes
   esas clases no se veian aqui porque el `border-left: 4px solid` vive en
   .dmx_agenda_recado, clase que esta linea no lleva: un error se leia igual
   que un acuse. Reservando el borde y el padding desde el estado neutro, el
   tono aparece sin mover el texto de sitio. */
.dmx_agenda_estado {
  min-height: 24px;
  margin: 0 0 var(--espacio-2);
  padding-left: var(--espacio-2);
  border-left: 4px solid transparent;
  font-size: 15px;
  color: var(--heading-color);
}
/* Y el tono no puede ser lo unico que distinga los tres casos (1.4.1): cada
   uno lleva su propio signo delante. El `/ ''` del content es el texto
   alternativo del pseudoelemento: vacio, para que el lector de pantalla no
   anuncie el signo cada vez que cambia el aria-live. En el navegador que no
   entiende esa sintaxis la declaracion entera se descarta, asi que no sale
   signo y tampoco ruido. */
.dmx_agenda_estado.dmx_tono_ok::before,
.dmx_agenda_estado.dmx_tono_aviso::before,
.dmx_agenda_estado.dmx_tono_error::before {
  margin-right: 6px;
  font-weight: 700;
}
/* Las tres reglas repiten el color del borde porque .dmx_agenda_estado se
   declara despues de .dmx_tono_* y con la misma especificidad: el
   `transparent` del estado neutro le ganaba al tono. Con las dos clases
   juntas el tono vuelve a mandar. */
.dmx_agenda_estado.dmx_tono_ok {
  border-left-color: #1c7c3f;
}
.dmx_agenda_estado.dmx_tono_ok::before {
  content: '\2713' / '';
  color: #1c7c3f;
}
.dmx_agenda_estado.dmx_tono_aviso {
  border-left-color: #b26a00;
}
.dmx_agenda_estado.dmx_tono_aviso::before {
  content: '!' / '';
  color: #b26a00;
}
.dmx_agenda_estado.dmx_tono_error {
  border-left-color: #b3261e;
}
.dmx_agenda_estado.dmx_tono_error::before {
  content: '\2715' / '';
  color: #b3261e;
}

.dmx_agenda_paso {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
}
.dmx_agenda_paso.is-activo {
  display: block;
}
.dmx_agenda_titulo {
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 var(--espacio-1);
  color: var(--heading-color);
  /* El cambio de paso trae este titulo a la pantalla. Es un <legend> sin id,
     asi que no le toca el scroll-margin-top de [id] y quedaba debajo del
     encabezado fijo (4.44). */
  scroll-margin-top: 120px;
}
/* Los anillos de foco de este bloque usan --accent-strong: como componente
   grafico necesitan 3:1 (WCAG 1.4.11) y --accent-color se queda en 2.65:1. */
.dmx_agenda_titulo:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
}
.dmx_agenda_subtitulo {
  margin: 0 0 var(--espacio-4);
  color: var(--body-color);
}

.dmx_agenda_campo {
  margin-bottom: var(--espacio-4);
}
.dmx_agenda_campo label {
  display: block;
  margin-bottom: var(--espacio-1);
  font-weight: 500;
  color: var(--heading-color);
}
.dmx_agenda_campo input,
.dmx_agenda_campo select,
.dmx_agenda_campo textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radio-input);
  background: var(--white);
  color: var(--heading-color);
  font-size: 16px; /* menos de 16 y Safari de iOS hace zoom al enfocar */
}
.dmx_agenda_campo textarea {
  min-height: 96px;
  resize: vertical;
}
.dmx_agenda_campo input:focus-visible,
.dmx_agenda_campo select:focus-visible,
.dmx_agenda_campo textarea:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-color: var(--accent-strong);
}
.dmx_agenda_campo input[aria-invalid="true"],
.dmx_agenda_campo textarea[aria-invalid="true"] {
  border-color: #b3261e;
}
.dmx_agenda_ayuda {
  display: block;
  margin-top: var(--espacio-1);
  font-size: 14px;
  color: var(--body-color);
}
/* El error lleva texto, no solo el borde rojo: quien no distingue el color
   necesita leer que falta. */
.dmx_agenda_error {
  display: block;
  margin-top: var(--espacio-1);
  font-size: 14px;
  color: #b3261e;
}
.dmx_agenda_error:empty {
  display: none;
}
/* El consentimiento reutiliza dmx_consentimiento(), que trae su propia
   maqueta y una columna de Bootstrap: aqui solo se le quita el padding de
   columna, porque el asistente no vive dentro de un .row. */
.dmx_agenda_consentimiento {
  margin-bottom: var(--espacio-4);
}
.dmx_agenda_consentimiento .dmx_consentimiento {
  padding-inline: 0;
}

/* Dias y horas: rejilla de botones que se adapta sola, sin media queries. */
.dmx_agenda_dias,
.dmx_agenda_horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
}
/* El borde no usa --border-color (#dddddd): sobre blanco da 1.3:1 y el chip
   no se lee como control hasta que lo tocas. #767676 da 4.5:1, por encima del
   3:1 que pide 1.4.11 para el limite de un componente. */
.dmx_agenda_dia,
.dmx_agenda_hora {
  min-height: 48px;
  padding: var(--espacio-2);
  border: 1px solid #767676;
  border-radius: var(--radio-input);
  background: var(--white);
  color: var(--heading-color);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Con el borde por defecto en #767676 (4.5:1), el hover tiene que ir al azul
   oscuro: --accent-color (2.65:1) dejaria el borde mas claro al pasar el raton
   que en reposo, justo al contrario de lo que debe senalar. */
.dmx_agenda_dia:hover,
.dmx_agenda_hora:hover {
  border-color: var(--accent-strong);
}
.dmx_agenda_dia:focus-visible,
.dmx_agenda_hora:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
/* Mismo motivo que el numero del paso activo: fondo con texto blanco encima,
   asi que --accent-strong (6.0:1) y no --accent-color (2.65:1). Es el estado
   que mas se lee del asistente: el dia y la hora que elegiste. */
.dmx_agenda_dia.is-elegido,
.dmx_agenda_hora.is-elegido {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--white);
  font-weight: 600;
}
/* Huecos mientras se piden las horas (ciclo 4). Reusan .dmx_agenda_hora para
   medir igual que el boton real: la rejilla no cambia de alto al llegar la
   respuesta. Sin texto, sin foco y fuera del arbol de accesibilidad: el que
   usa lector de pantalla ya tiene el aviso por el aria-live. */
.dmx_agenda_hora_hueco {
  background: var(--gray-color);
  border-color: var(--border-color);
  pointer-events: none;
  cursor: default;
  animation: dmx_latido 1.2s ease-in-out infinite;
}
@keyframes dmx_latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .dmx_agenda_hora_hueco {
    animation: none;
    opacity: 0.6;
  }
}

/* 4.24: la pregunta de cierre, dentro de la ficha de la cita. Se separa con una
   linea arriba para que se lea como un apendice y no como un paso mas del
   flujo: la cita ya quedo, esto es opcional. */
.dmx_agenda_facil {
  margin-top: var(--espacio-4);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--border-color);
}
.dmx_agenda_facil_pregunta {
  margin: 0 0 var(--espacio-2);
  font-size: 15px;
}
.dmx_agenda_facil_notas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.dmx_agenda_facil_nota {
  min-width: 44px;
  min-height: 44px;
  padding: var(--espacio-1) var(--espacio-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radio-input);
  background: var(--white);
  color: var(--heading-color);
  font-size: 16px;
  cursor: pointer;
}
.dmx_agenda_facil_nota:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.dmx_agenda_facil_nota:active {
  background: var(--gray-color);
}
.dmx_agenda_facil_nota:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.dmx_agenda_facil_escala {
  margin: var(--espacio-2) 0 0;
  color: var(--body-color);
  font-size: 14px;
}

/* 4.23: «Ver mas fechas». Va con el aspecto de .dmx_agenda_atras (enlace
   subrayado, no boton macizo) para que no compita con «Continuar», que es la
   accion principal del paso. Sube a la rejilla con margen negativo porque
   .dmx_agenda_dias ya reserva su propio margen inferior. */
.dmx_agenda_mas_dias {
  display: block;
  min-height: 44px;
  margin: calc( var(--espacio-4) * -1 ) 0 var(--espacio-4);
  padding: var(--espacio-2) var(--espacio-1);
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}
.dmx_agenda_mas_dias:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* Jerarquia del chip de dia. La regla anterior vestia un `<small>` que el
   PHP no emite: agenda.php pinta tres <span> (dmx_agenda_dia_sem / _num /
   _mes) que estaban sin una sola regla, asi que «mar 6 Oct» salia todo del
   mismo tamano y el numero no resaltaba. El dia de la semana se va a su
   renglon y el numero manda; el mes se queda al lado del numero para no
   convertir el chip en tres renglones (la rejilla ya muestra 8 dias y
   crecerla de alto obliga a desplazar justo lo que se recorto en 4.23). */
.dmx_agenda_dia_sem {
  display: block;
  font-size: 13px;
  opacity: 0.8;
}
.dmx_agenda_dia_num {
  font-size: 20px;
  font-weight: 600;
}
.dmx_agenda_dia_mes {
  margin-left: 3px;
  font-size: 13px;
  opacity: 0.8;
}
.dmx_agenda_horas:empty {
  display: none;
  margin-bottom: 0;
}

.dmx_agenda_vacio,
.dmx_agenda_nota {
  margin: 0 0 var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-card);
  background: var(--gray-color);
  color: var(--heading-color);
  font-size: 15px;
}

/* Aviso de cita repetida: no bloquea, solo advierte. */
.dmx_agenda_repetida {
  margin-bottom: var(--espacio-4);
}
.dmx_agenda_repetida:empty {
  display: none;
}
.dmx_agenda_repetida p {
  margin: 0 0 var(--espacio-1);
}
.dmx_agenda_repetida p:last-child {
  margin-bottom: 0;
}

.dmx_agenda_codigo {
  margin-bottom: var(--espacio-4);
  padding: var(--espacio-4);
  border: 1px dashed var(--border-color);
  border-radius: var(--radio-card);
}
.dmx_agenda_codigo_campo input {
  max-width: 200px;
  letter-spacing: 0.35em;
  font-size: 20px;
  text-align: center;
}

.dmx_agenda_botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
}
.dmx_agenda_botones .cs_btn {
  min-height: 48px;
}
.dmx_agenda_atras,
.dmx_agenda_secundario {
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-1);
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}
.dmx_agenda_atras:focus-visible,
.dmx_agenda_secundario:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.dmx_agenda_form button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Ficha final. Es lo ultimo que ve el paciente, asi que el folio y el dia
   van grandes y el resto en tabla para poder leerlo de un vistazo. */
.dmx_agenda_ficha {
  border: 1px solid var(--border-color);
  border-radius: var(--radio-card);
  padding: var(--espacio-5);
  background: var(--gray-color);
}
.dmx_agenda_ficha_cuando {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 var(--espacio-2);
  color: var(--heading-color);
}
.dmx_agenda_ficha_folio {
  margin: 0 0 var(--espacio-3);
  color: var(--body-color);
}
.dmx_agenda_ficha_folio strong {
  color: var(--heading-color);
  letter-spacing: 0.08em;
}
.dmx_agenda_ficha_dato {
  margin: 0 0 var(--espacio-2);
  color: var(--body-color);
}
.dmx_agenda_ficha_dato strong {
  color: var(--heading-color);
}
.dmx_agenda_ficha_dato a {
  color: var(--accent-strong);
  text-decoration: underline;
}
.dmx_agenda_ficha_nota {
  margin: 0 0 var(--espacio-3);
  color: var(--body-color);
}
.dmx_agenda_ficha_enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

@media (max-width: 575.98px) {
  .dmx_agenda_titulo {
    font-size: 21px;
  }
  .dmx_agenda_dias,
  .dmx_agenda_horas {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .dmx_agenda_botones .cs_btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dmx_agenda_dia,
  .dmx_agenda_hora {
    transition: none;
  }
}

/* 4.22: el emblema del tratamiento, en el hueco que ocupaba la foto de
   archivo. Los iconos dmx_srv_*.svg vienen en blanco (fill="#fff"), asi que
   necesitan fondo oscuro: el azul marino de marca. `aspect-ratio` con la misma
   proporcion que tenia la foto (770x448) reserva el alto antes de pintar, igual
   que hacian el width/height del <img>, para no mover el texto de abajo. */
.dmx_servicio_emblema {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 770 / 448;
  border-radius: var(--radio-panel);
  background: var(--blue-color);
}
.dmx_servicio_emblema img {
  width: 120px;
  height: 120px;
  max-width: 45%;
  opacity: 0.9;
}

/* El tratamiento que se esta mirando, en la lista lateral de su propia pagina.
   Sin esto los nueve renglones se ven igual y uno de ellos lleva a la pagina en
   la que ya estas. Se reusa el aspecto del :hover de la plantilla. */
.cs_solution_links.cs_style_2 li:has(a[aria-current="page"]) {
  background-color: var(--blue-color);
}
.cs_solution_links.cs_style_2 a[aria-current="page"] {
  color: var(--white);
}
.cs_solution_links.cs_style_2 a[aria-current="page"] .cs_tab_link_icon_left {
  background-color: var(--accent-color);
}

/* La ficha de los tres datos del tratamiento (2.6): duracion, sesiones y que
   incluye. Es un <dl>; en movil cada dato va en su renglon y desde 576 px la
   etiqueta queda en una columna fija para que los tres valores se alineen. */
.dmx_ficha {
  margin: var(--espacio-3) 0 0;
  max-width: 46em;
}
.dmx_ficha dt {
  font-weight: 700;
  color: var(--accent-strong);
  margin-top: var(--espacio-3);
}
.dmx_ficha dd {
  margin: 0;
}
.dmx_ficha dd ul {
  margin: 0;
  padding-left: var(--espacio-4);
  list-style: disc;
}
.dmx_ficha dd li + li {
  margin-top: var(--espacio-1);
}
@media (min-width: 576px) {
  .dmx_ficha {
    display: grid;
    grid-template-columns: 11em 1fr;
    column-gap: var(--espacio-4);
  }
  .dmx_ficha dt,
  .dmx_ficha dd {
    margin-top: var(--espacio-3);
  }
}

.dmx_firma {
  margin-top: var(--espacio-6);
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radio-card);
  background: #f7fbff;
}
.dmx_firma p { margin: 0; }
.dmx_firma_titulo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--espacio-1) !important;
}
.dmx_firma_nombre { font-size: 18px; font-weight: 700; color: var(--blue-color); }
.dmx_firma_especialidad { font-size: 16px; font-weight: 400; color: #4a5568; }
.dmx_firma_especialidad::before { content: '\00a0\00b7\00a0'; }
.dmx_firma_cedula, .dmx_firma_ficha { color: #4a5568; margin-top: var(--espacio-1) !important; }
.dmx_firma a { color: var(--accent-strong); text-decoration: underline; }

/* 4.30: buscador de la barra lateral del articulo. Hasta 1.19.15 el filtro
   `get_search_form` devolvia una copia del desplegable de la cabecera, cuya
   clase lleva `position: absolute; top: 100%; right: 0` en la hoja de la
   plantilla: sin ancestro posicionado, el formulario se colgaba del bloque
   contenedor inicial y se pintaba a una pantalla de distancia, sobre la foto
   del articulo, mientras su tarjeta quedaba de 12 px de alto y vacia. Este
   formulario va en el flujo, dentro de la tarjeta que la plantilla reserva
   (.cs_sidebar_widget.cs_search, que ya es flex con 5 px de margen interno). */
.dmx_buscador {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.dmx_buscador_campo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--espacio-3);
  border: none;
  background: transparent;
  font: inherit;
  color: var(--heading-color);
}
/* La plantilla apaga el outline de los input de esta tarjeta
   (.cs_sidebar_widget.cs_search input { outline: none }, dos clases y un
   elemento) con mas peso que el :focus-visible general, asi que el anillo se
   repite aqui: si no, el campo recibe el foco sin que se note (WCAG 2.4.11).
   Y se escribe con el formulario delante (tres clases) porque
   `.dmx_buscador_campo:focus-visible` por si solo tambien perdia: medido en
   dev, el campo salia con `outline-style: none`. */
.dmx_buscador .dmx_buscador_campo:focus-visible {
  outline: 3px solid var(--blue-color);
  outline-offset: -3px;
  box-shadow: none;
}
.dmx_buscador_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radio-input);
  background-color: var(--accent-strong);
  color: #fff;
  transition: background-color .2s ease;
}
.dmx_buscador_btn:hover { background-color: var(--blue-color); }

/* --- 4.43, lo que quedaba por debajo de 44 px en tactil ---
   Medido en un viewport real de 375x812 con `pointer: coarse` (el banco de
   pruebas en iframe que se uso al principio devolvia estilos congelados y
   daba falsos positivos: las migas, el pie y `.cs_post_btn` ya cumplian).
   Los que de verdad se quedaban cortos:
     - `.cs_iconbox_title a`      28 px — los ocho tratamientos de la portada y de /servicios/
     - `.cs_solution_links li a`  30 px — la lista lateral de tratamientos
     - `.dmx_iconbox_accion a`    25 px — «WhatsApp» de la tarjeta de urgencias
     - `.dmx_mapa_pie a`          23 px — «Como llegar» del pie del mapa
     - los puntos del carrusel     8 px — el <button> ocupa el <li>, que mide 25x8
   Va en el bloque tactil y no en la hoja general porque en escritorio el raton
   no necesita los 44 px y estirar los titulos de las tarjetas ahi solo mete
   aire. El enlace «aviso de privacidad» del consentimiento se queda en 23 px a
   proposito: es un destino en linea dentro de una frase, el caso que WCAG
   2.5.8 exceptua, y darle altura partiria el renglon del checkbox. */
@media (pointer: coarse) {
  .cs_iconbox_title a,
  .cs_solution_links.cs_style_2 li a,
  .dmx_iconbox_accion a,
  .dmx_mapa_pie a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* El punto mide 8 px y asi se queda: el area pulsable se estira con un
     pseudoelemento centrado, que no empuja la fila de puntos. La regla general
     ya lo deja en 24x24 (4.62); en tactil sube a 44x44. */
  .cs_pagination.cs_style_2 button::after {
    min-width: 44px;
    height: 44px;
  }
}

/* ===== Entradas: aire antes de cada subtitulo ===================== *
 * dmx.css da a los H2 del cuerpo `margin-top: 0` y a los parrafos
 * `margin-bottom: 20px`, de modo que la distancia entre el final de un
 * bloque de texto y el subtitulo siguiente era la misma -20 px- que entre
 * dos parrafos del mismo tema: nada avisaba de que ahi empieza otro
 * subtema. Con 70 px arriba del titulo el margen gana al del parrafo
 * (los margenes de hermanos contiguos colapsan al mayor) y el hueco real
 * queda en 70 px, 50 mas que antes.
 */
.cs_post_details .cs_post_body h2,
.cs_post_details .cs_post_body h3,
.cs_post_details .cs_post_body h4 {
  margin-top: 70px;
}
/* El primer titulo del cuerpo no necesita el hueco: arriba no hay texto
   del que separarse, solo la imagen y los datos de la entrada. */
.cs_post_details .cs_post_body > :first-child {
  margin-top: 0;
}

/* ===== 4.52 Pantallas de poca altura ============================== *
 * Con 320x256 -la condicion de referencia de WCAG 1.4.10- la cabecera
 * fija (80 px) mas la barra inferior movil (72 px) se comian 152 de 256
 * px: el 59 % de la pantalla era cromo. Lo mismo pasa en un movil
 * apaisado (375 px de alto). Por debajo de 480 px de alto la cabecera
 * deja de ser fija y la barra inferior se oculta: el contenido recupera
 * la pantalla completa y la cabecera sigue alcanzable haciendo scroll
 * arriba, que es donde esta.
 *
 * `!important` porque dmx.css declara `.cs_sticky_header { position:
 * fixed !important }` y no se puede editar (lo regenera build.py).
 */
@media (max-height: 480px) {
  .cs_site_header.cs_sticky_header {
    position: static !important;
  }
  .dmx_barra_movil {
    display: none;
  }
  /* Separador que compensa la cabecera fija en la portada. Sin cabecera
     fija es hueco muerto. */
  .cs_site_header_spacing_150 {
    height: 0;
  }
}

/* ===== 4.54 a) Modo de alto contraste de Windows ====================
 * Con `forced-colors: active` el navegador reescribe color, fondo y bordes
 * con los colores del sistema, pero conserva las imagenes de fondo. La banda
 * de titulo (`.cs_page_heading.cs_bg_filed`) y el hero quedaban con la foto
 * puesta y el texto repintado en el color de sistema: rotulo negro sobre
 * fotografia oscura. Se retira la foto para que el texto caiga sobre el fondo
 * del sistema, que es el unico que el navegador garantiza legible.
 */
@media (forced-colors: active) {
  .cs_bg_filed,
  [style*="--dmx-fondo"] {
    background-image: none !important;
  }
  /* Botones y boton de subir: sin su color de relleno se quedan sin silueta. */
  .cs_btn,
  .cs_scrollup {
    border: 1px solid ButtonBorder;
  }
  /* La barra inferior se distinguia del contenido solo por su color. */
  .dmx_barra_movil {
    border-top: 1px solid CanvasText;
  }
  /* El anillo de foco de arriba se dibuja con `box-shadow`, que el modo
     descarta, y con un azul de marca que tambien se reescribe. */
  :focus-visible,
  .cs_blue_bg :focus-visible,
  .cs_footer :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ===== 4.54 b) Impresion ===========================================
 * Una clinica es justo el sitio que alguien imprime para llevarse la
 * direccion, el telefono y los horarios. Sin reglas de impresion salia la
 * cabecera fija encima del texto, la barra inferior del movil, el boton de
 * subir y todos los fondos de color gastando tinta.
 */
@media print {
  .cs_site_header,
  .dmx_barra_movil,
  .cs_scrollup,
  .cs_skip_link {
    display: none !important;
  }
  .cs_site_header_spacing_150 {
    height: 0 !important;
  }
  *,
  *::before,
  *::after {
    background-image: none !important;
    box-shadow: none !important;
  }
  body,
  .cs_white_color,
  .cs_white_color h1,
  .cs_white_color h2,
  .cs_white_color h3,
  .cs_white_color h4,
  .cs_white_color p,
  .cs_white_color a,
  .cs_white_color li {
    color: #000 !important;
  }
  .cs_blue_bg,
  .cs_accent_bg,
  .cs_footer,
  .cs_footer_highlight_col {
    background-color: transparent !important;
  }
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
  img,
  iframe,
  table,
  .dmx_horarios_tabla {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ===== 4.54 c) Titulos largos =======================================
 * `.cs_hero_title` y `.cs_section_title` no tenian holgura de ajuste: a 320 px
 * y con la separacion de texto que exige WCAG 1.4.12 inyectada, el texto
 * salia de su caja (296 px de linea en una caja de 311) y llegaba a x~317 de
 * 320. Hoy no se nota porque la caja no recorta, pero la primera traduccion
 * larga o un nombre de tratamiento sin espacios lo parte.
 */
.cs_hero_title,
.cs_section_title,
.cs_page_title {
  overflow-wrap: anywhere;
}