/* AirCare 2.0: capa de pulido del diseno grafico (rama aircare-2.0, 2026-10-12, pedido del Dr. Lara: "pulir y mejorar,
   no redisenar todo", con margen suficiente para que no se confunda con el sitio de la agencia anterior).
   Va DESPUES de estilos-originales.css y extra.css: la estructura y el contenido no cambian, cambia la piel.
   Engancha en clases ac-* puestas en las plantillas (una por seccion); los !important ganan a las utilidades de
   Tailwind y a los style="background..." en linea del sitio original. Decisiones: DESIGN.md y PRODUCT.md. */

/* ============================================================================================ fuentes alojadas */
/* Octava pasada (2026-10-19, auditoria completa, tanda A1). Antes las dos familias llegaban de Google Fonts (hoja de
   estilos + woff2 de otro dominio, display=swap y sin respaldo ajustado): el contenedor del hero saltaba de 96 a 554 px
   cuando llegaba la hoja y de 554 a 497 px al cambiar a los woff2 (CLS 0.195 a 0.266 en la portada, medido). Ahora los
   archivos viven en el sitio (assets/fonts/), con la hoja ya en este CSS, y cada familia tiene su @font-face de respaldo
   (Arial o Georgia ajustados con size-adjust y overrides) para que el texto se pinte del mismo ancho y alto antes de que
   llegue la fuente. Solo latin y latin-ext (el sitio es en espanol); cada rango baja solo si la pagina lo usa.
   Licencia: Wix Madefor Display y Wix Madefor Text (Dalton Maag) y Fraunces (Undercase Type) son SIL Open Font License 1.1,
   tal como se publican en Google Fonts; se pueden alojar y redistribuir. Los woff2 son los mismos que servia Google
   (wixmadefordisplay v12, wixmadefortext v17, fraunces v38), sin modificar. Fraunces solo la usa la portada; conserva
   su eje de tamano optico (opsz 9 a 144) y la suavidad fija de antes (SOFT 50). */
@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/assets/fonts/wix-madefor-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/assets/fonts/wix-madefor-display-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/wix-madefor-text-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/wix-madefor-text-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/fraunces-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/fraunces-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/fraunces-400-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/fraunces-400-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Respaldos ajustados (receta de Pipis, scripts/tokens-marca.py -> font_face_respaldo, con las metricas del catalogo como punto de partida).
   Cada size-adjust se CALIBRO midiendo en el navegador el ancho de todo el texto del sitio con la fuente real contra el respaldo
   (diferencia final menor de 0.3 %; los overrides de ascenso y descenso salen de las metricas de cada fuente entre su size-adjust):
   Arial (400, 500) y Arial Bold (600 a 700) para Wix Madefor; Georgia y Georgia Italic para Fraunces (cuyo ancho no cambia con
   el tamano optico). Cada respaldo lleva el MISMO unicode-range que la fuente real: lo que queda fuera (la flecha de "Ver mas",
   por ejemplo) lo sigue pintando el sistema como siempre y no Arial (medido: la flecha se movia un pixel). Los pesos se declaran
   por rango para que el navegador no sintetice negrita sobre la fuente local. */
@font-face { font-family: "Wix Madefor Display Respaldo"; font-weight: 500 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 99.2%; ascent-override: 101.61%; descent-override: 25.4%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wix Madefor Text Respaldo"; font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 103.48%; ascent-override: 97.41%; descent-override: 24.35%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wix Madefor Text Respaldo"; font-weight: 500;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 105.31%; ascent-override: 95.72%; descent-override: 23.93%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Wix Madefor Text Respaldo"; font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 98.73%; ascent-override: 102.1%; descent-override: 25.52%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces Respaldo"; font-weight: 500;
  src: local("Georgia");
  size-adjust: 88.42%; ascent-override: 110.61%; descent-override: 28.84%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces Respaldo"; font-style: italic; font-weight: 400;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 80.47%; ascent-override: 121.54%; descent-override: 31.69%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ================================================================================================ tokens */
:root {
  /* marca (de estilos-originales.css): azul pizarra #3a446d y dorado #ad9060. Contrastes medidos (WCAG 2.2). */
  --ac-navy: #3a446d;          /* estructura y botones; texto blanco encima 9.4:1 */
  --ac-tinta: #1e2443;         /* titulos: 15.1:1 sobre blanco */
  --ac-hondo: #2a3157;         /* fondo de las bandas profundas */
  --ac-cuerpo: #454c66;        /* lectura: 8.5:1 sobre blanco */
  --ac-gris: #5b6178;          /* letra chica: 6.1:1 sobre blanco, 5.4:1 sobre cielo */
  --ac-oro: #ad9060;           /* dorado de marca: adorno, iconos y texto de 24 px o mas (3.0:1) */
  --ac-oro-texto: #80652f;     /* dorado para texto chico: 5.5:1 sobre blanco, 5.1:1 sobre tinte */
  --ac-oro-cielo: #6f5627;     /* dorado para texto chico sobre el cielo de marca: 5.2:1 en su tono mas oscuro */
  --ac-oro-claro: #d9c39a;     /* dorado sobre azul: 5.5:1 sobre --ac-navy */
  --ac-oro-grande: #9a7c4a;    /* dorado de titulos sobre claro: 3.6:1 en tinte, 3.4:1 en cielo (texto grande pide 3:1) */
  --ac-verde-wa: #15803d;      /* WhatsApp con texto blanco: 5.0:1 (el #1da851 daba 3.1:1) */
  --ac-verde-wa-hondo: #116a32; /* WhatsApp al pasar el cursor: 6.7:1 con texto blanco */
  --ac-alerta: #b91c1c;        /* unico color con significado: el numero de emergencias (911) y su recuadro; 6.5:1 sobre blanco */
  --ac-alerta-fondo: #fef2f2;  /* fondo del recuadro "Cuando acudir a urgencias" */
  --ac-champan: #ecdfc4;       /* rotulo sobre el velo oscuro del panel abierto: 4.5:1 o mas */
  --ac-cielo: #edf1f8;         /* cielo de marca: hero, encabezados de pagina y bandas claras */
  --ac-tinte: #f4f6fb;         /* secciones alternas */
  --ac-regla: rgba(58, 68, 109, .14);
  --ac-regla-fuerte: rgba(58, 68, 109, .28);
  --ac-sombra: 0 1px 2px rgba(30, 36, 67, .04), 0 12px 28px -16px rgba(30, 36, 67, .22);
  --ac-radio: 20px;            /* fichas e imagenes: UN radio para todo el sitio */
  --ac-radio-chico: 14px;
  --ac-pastilla: 999px;        /* botones */
  --ac-display: "Wix Madefor Display", "Wix Madefor Display Respaldo", ui-sans-serif, system-ui, sans-serif;
  --ac-texto: "Wix Madefor Text", "Wix Madefor Text Respaldo", ui-sans-serif, system-ui, sans-serif;
  --ac-sale: cubic-bezier(.22, 1, .36, 1);   /* ease-out-quint */
  /* Encabezado de paginas interiores: el mismo cielo con la transicion un poco mas a la derecha (es mas bajo que el
     hero y con el mismo degradado se pasaba de la meta: 61 % a 1280). */
  --ac-cielo-banner:
    radial-gradient(48% 80% at 96% 4%, rgba(173, 144, 96, .34), transparent 66%),
    linear-gradient(100deg, #f2f5fa 0%, #eef2f9 32%, #dce5f3 50%, #cfdbf0 100%);
  /* Cielo de marca para hero y encabezados: color perceptible (regla 20 de estilo-william: ni oscuro ni casi blanco;
     el primer cielo, #ebf0f8, media 17 % de color y se leia anemico). */
  --ac-cielo-fondo:
    radial-gradient(48% 80% at 96% 4%, rgba(173, 144, 96, .34), transparent 66%),
    linear-gradient(100deg, #f2f5fa 0%, #eef2f9 26%, #dce5f3 42%, #cfdbf0 100%);
  /* Medido con gate-visual (croma >= 18 = color): el texto va sobre la mitad casi blanca y la foto sobre la mitad
     de cielo; asi el hero queda en la meta de color (45-60 % a 1280) sin oscurecer el texto. */
}

/* ============================================================================================ tipografia */
/* Par "claro" del catalogo de Pipis (Wix Madefor, Dalton Maag, OFL): una voz en dos cortes. Sustituye la fuente del
   sistema del sitio anterior y deja fuera Montserrat (vetada por la decision 14 del Dr.). */
html body { font-family: var(--ac-texto); color: var(--ac-cuerpo); -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3, html body h4 {
  font-family: var(--ac-display); letter-spacing: -.02em; text-wrap: balance;
}
html body h1 { font-weight: 600; letter-spacing: -.025em; }
html body h2, html body h3 { font-weight: 600; }
html body p, html body li { text-wrap: pretty; }
/* Tipo oracion: el sitio anterior ponia rotulos en MAYUSCULAS espaciadas (regla 7 de estilo-william; el rotulo en
   mayusculas sobre cada seccion es ademas firma de sitio hecho con IA). */
html body .uppercase { text-transform: none; letter-spacing: normal; }
/* Un solo titulo de seccion en todo el sitio */
.ac-seccion-titulo, .ac-razones h2, .ac-equipo h2, .ac-opiniones h2, .ac-servicios h2.text-graydark,
.ac-enfermedades h2, .ac-sintomas h2 {
  font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.75rem) !important; line-height: 1.12 !important;
  font-weight: 600 !important; color: var(--ac-tinta) !important; letter-spacing: -.022em !important;
}

/* ================================================================================================ botones */
/* "Agende aqui": pastilla azul de marca de 52 px (antes rectangulo dorado con una capa blanca que subia y el texto
   duplicado para el hover). */
div.group:has(> .ac-btn), a:has(> div > .ac-btn) { overflow: visible !important; }
.ac-btn {
  border-radius: var(--ac-pastilla) !important; background: var(--ac-navy) !important; color: #fff !important;
  height: 52px !important; padding: 0 28px !important; font-size: 1rem !important; font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(30, 36, 67, .10), 0 12px 26px -14px rgba(30, 36, 67, .65) !important;
  transition: background-color .3s var(--ac-sale), transform .3s var(--ac-sale), box-shadow .3s var(--ac-sale) !important;
}
.ac-btn:hover { background: var(--ac-tinta) !important; transform: translateY(-1px); }
.ac-btn > div.absolute, .ac-btn span.absolute { display: none !important; }
.ac-btn span.flex { transform: none !important; opacity: 1 !important; }
/* "Ver todos": contorno (antes boton con degradado azul a dorado) */
.ac-btn.ac-btn-contorno {
  background: transparent !important; color: var(--ac-navy) !important; box-shadow: none !important;
  border: 1.5px solid var(--ac-regla-fuerte) !important; height: 48px !important;
}
.ac-btn.ac-btn-contorno:hover { background: var(--ac-tinte) !important; border-color: var(--ac-navy) !important; }
.ac-btn.ac-btn-contorno span.flex::after { content: "\2192"; margin-left: .15em; transition: transform .3s var(--ac-sale); }
.ac-btn.ac-btn-contorno:hover span.flex::after { transform: translateX(3px); }
/* WhatsApp del hero: circulo de contorno */
.ac-btn-wa {
  width: 52px !important; height: 52px !important; padding: 0 !important; border-radius: var(--ac-pastilla) !important;
  background: #fff !important; color: var(--ac-navy) !important; border: 1.5px solid var(--ac-regla-fuerte) !important;
  box-shadow: none !important; transform: none !important;
}
.ac-btn-wa:hover { border-color: var(--ac-navy) !important; background: var(--ac-tinte) !important; }

/* ============================================================================================== cabecera */
/* La franja COFEPRIS de arriba se quito (Dr. Lara, 2026-10-12): el folio y las cedulas siguen en el pie de cada pagina */
.ac-cabecera { box-shadow: none !important; border-bottom: 1px solid var(--ac-regla) !important;
               background: rgba(255, 255, 255, .96) !important; }
.ac-cabecera nav a, .ac-cabecera nav button { font-weight: 500; color: var(--ac-tinta); }

/* ==================================================================================================== hero */
.ac-hero { background: var(--ac-cielo-fondo) !important; max-height: none !important; overflow: hidden; }
.ac-hero > .relative.z-10 { min-height: clamp(560px, 76vh, 760px) !important; }
/* En celular el hero no lleva foto: sin altura minima, para que el boton quede en la primera pantalla (regla 14). */
@media (max-width: 1023px) { .ac-hero > .relative.z-10 { min-height: 0 !important; padding: 44px 0 52px; } }
.ac-hero .space-y-6 > div:first-child {
  color: var(--ac-oro-texto) !important; font-size: 1.05rem !important; font-weight: 600 !important;
  letter-spacing: .01em; font-family: var(--ac-texto);
}
.ac-hero h1 {
  color: var(--ac-tinta) !important; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.4rem) !important;
  line-height: 1.04 !important; font-weight: 600 !important; letter-spacing: -.03em !important;
}
.ac-hero h2 { color: var(--ac-cuerpo) !important; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem) !important;
              font-weight: 400 !important; line-height: 1.5; max-width: 34ch; font-family: var(--ac-texto); letter-spacing: 0; }
.ac-hero img[alt="Doctor"] { border-radius: 26px !important; object-position: center 20% !important; }
.ac-hero .hidden.lg\:flex > div {
  transform: none !important; translate: none !important; height: clamp(440px, 58vh, 560px) !important; max-width: 440px !important;
  border-radius: 26px; box-shadow: var(--ac-sombra);
  outline: 1px solid rgba(217, 195, 154, .9); outline-offset: -14px;   /* hilo dorado hacia adentro (paspartu): firma de AirCare 2.0 */
}

/* ================================================================================== por que elegirnos */
/* Cuatro columnas ligeras con regla fina entre ellas, sin cajas (regla 1 de estilo-william: reglas finas en vez de
   cajas); antes, cuatro tarjetas con la segunda bajada a proposito. */
.ac-razones { background: #fff !important; padding: clamp(72px, 9vw, 120px) 0 !important; }
.ac-razones .grid { gap: 0 !important; }
.ac-razon {
  transform: none !important; translate: none !important;   /* Tailwind v4 baja la 2a tarjeta con `translate` */
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 28px 28px 8px !important; text-align: left;
}
@media (min-width: 1024px) { .ac-razon + .ac-razon { border-left: 1px solid var(--ac-regla) !important; } }
@media (max-width: 1023px) { .ac-razon + .ac-razon { border-top: 1px solid var(--ac-regla) !important; } }
.ac-razon > .absolute { display: none !important; }
.ac-razon .group-hover-shake { animation: none !important; }
.ac-razon .w-16.h-16 { width: 56px !important; height: 56px !important; padding: 12px; border-radius: 16px;
                       background: rgba(173, 144, 96, .12); }
.ac-razon h3 { color: var(--ac-tinta) !important; font-size: 1.15rem !important; margin-bottom: .6rem !important; }
.ac-razon p { color: var(--ac-cuerpo) !important; font-size: .975rem !important; line-height: 1.65 !important; }

/* ============================================================================================ sobre AirCare */
.ac-sobre { background: var(--ac-tinte) !important; background-image: none !important;
            padding: clamp(72px, 9vw, 120px) 0 !important; }
.ac-sobre .-rotate-90, .ac-sobre .lg\:hidden.mt-6 { display: none !important; }   /* texto vertical de la agencia */
.ac-sobre img { border-radius: var(--ac-radio) !important; box-shadow: var(--ac-sombra) !important; transform: none !important; scale: none !important;
                outline: 1px solid rgba(217, 195, 154, .9); outline-offset: -14px; }
.ac-sobre .text-mcolor2.text-sm { color: var(--ac-oro-texto) !important; font-size: 1rem !important; font-weight: 600 !important; }
.ac-sobre h2 { font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.4rem) !important; line-height: 1.08 !important; }
.ac-sobre h2 .text-mcolor1 { color: var(--ac-tinta) !important; }
.ac-sobre h2 .text-mcolor2 { color: var(--ac-oro-grande) !important; }
.ac-sobre p { color: var(--ac-cuerpo) !important; font-size: 1.0625rem !important; line-height: 1.75 !important; max-width: 62ch; }

/* ================================================================================================ equipo */
.ac-equipo { background: #fff !important; padding: clamp(72px, 9vw, 112px) 0 !important; }
.ac-equipo .text-blue-900 { color: var(--ac-oro-texto) !important; font-weight: 600 !important; font-size: 1rem !important; }
.ac-equipo .md\:opacity-0 { opacity: 1 !important; transform: none !important; translate: none !important; }   /* visible aunque el JS no corra */
/* Cinco medicos: la fila de abajo centrada (antes 3 + 2 con un hueco a la derecha en escritorio) */
.ac-equipo .grid { display: flex !important; flex-wrap: wrap; justify-content: center; }
.ac-equipo .grid > .ac-medico-tarjeta { flex: 0 1 100%; }
@media (min-width: 768px) { .ac-equipo .grid > .ac-medico-tarjeta { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .ac-equipo .grid > .ac-medico-tarjeta { flex-basis: calc((100% - 4rem) / 3); } }
.ac-medico-tarjeta { border-radius: var(--ac-radio) !important; box-shadow: none !important;
                     border: 1px solid var(--ac-regla); transform: none !important; scale: none !important;
                     transition: transform .4s var(--ac-sale), box-shadow .4s var(--ac-sale) !important; }
.ac-medico-tarjeta:hover { transform: translateY(-4px) !important; scale: none !important; box-shadow: var(--ac-sombra) !important; }
.ac-medico-tarjeta img { border-radius: 0 !important; }
.ac-medico-tarjeta > .bg-mcolor1 {
  background: rgba(255, 255, 255, .97) !important; border: 1px solid var(--ac-regla); border-radius: 16px !important;
  margin: 0 !important; left: 12px !important; right: 12px !important; bottom: 12px !important; padding: 12px 14px !important;
}
.ac-medico-tarjeta > .bg-mcolor1 h3 { color: var(--ac-tinta) !important; font-size: 1.02rem !important; }
.ac-medico-tarjeta > .bg-mcolor1 div { color: var(--ac-gris) !important; opacity: 1 !important; font-size: .85rem !important; }
.ac-medico-tarjeta .bg-mcolor2 { background: rgba(30, 36, 67, .95) !important; border-radius: 16px !important; margin: 12px !important; }
.ac-medico-tarjeta .bg-mcolor2 h3 { color: #fff !important; }
.ac-medico-tarjeta .bg-mcolor2 a { color: var(--ac-tinta) !important; background: #fff !important;
                                   border-radius: var(--ac-pastilla) !important; padding: 8px 16px !important; }
.ac-medico-tarjeta > .absolute.inset-0.border-2 { display: none !important; }

/* ==================================================================== banda de valoracion (cancer de pulmon) */
.ac-banda-cancer { background: var(--ac-cielo-fondo) !important; color: var(--ac-tinta) !important; box-shadow: none !important; }
.ac-banda-cancer > .absolute { display: none !important; }
.ac-banda-cancer .backdrop-blur-md {
  background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ac-regla) !important; box-shadow: var(--ac-sombra) !important; border-radius: var(--ac-radio) !important;
}
.ac-banda-cancer h2, .ac-banda-cancer h3 { color: var(--ac-tinta) !important; }
.ac-banda-cancer p { color: var(--ac-cuerpo) !important; }
.ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) {
  background: rgba(173, 144, 96, .12) !important; color: var(--ac-oro-texto) !important; border-color: transparent !important;
}

/* ============================================ banda "Problemas respiratorios": el momento de impacto del inicio */
/* Una sola banda profunda en el inicio (antes habia tres bandas oscuras). Luz de marca que "respira" despacio. */
.ac-banda-problemas {
  background-image: none !important; isolation: isolate;
  background:
    radial-gradient(60% 120% at 88% 0%, rgba(173, 144, 96, .30), transparent 62%),
    radial-gradient(55% 110% at 0% 100%, rgba(120, 140, 205, .20), transparent 60%),
    linear-gradient(135deg, var(--ac-tinta) 0%, var(--ac-navy) 100%) !important;
  padding: clamp(64px, 8vw, 104px) 0 !important;
}
.ac-banda-problemas::before {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(32% 38% at 62% 42%, rgba(217, 195, 154, .22), transparent 70%);
  animation: ac-respira 11s ease-in-out infinite alternate;
}
@keyframes ac-respira {
  from { transform: translate3d(-5%, -2%, 0) scale(.94); opacity: .75; }
  to   { transform: translate3d(6%, 4%, 0) scale(1.1); opacity: 1; }
}
.ac-banda-problemas > .bg-black\/20 { display: none !important; }
.ac-banda-problemas .bg-white { background: transparent !important; box-shadow: none !important; padding: 0 !important;
                                max-width: 960px !important; }
.ac-banda-problemas h2, .ac-banda-problemas h3 { color: #fff !important; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem) !important; }
.ac-banda-problemas p { color: rgba(255, 255, 255, .84) !important; font-size: 1.1rem !important; }
.ac-banda-problemas .ac-btn { background: #fff !important; color: var(--ac-tinta) !important; }
.ac-banda-problemas .ac-btn:hover { background: var(--ac-oro-claro) !important; }

/* =============================================================================================== servicios */
.ac-servicios { background: #fff !important; }
.ac-servicios h2.text-mcolor1 { color: var(--ac-oro-texto) !important; font-size: 1rem !important; font-weight: 600 !important; }
.ac-servicios button.rounded-2xl { border-radius: var(--ac-radio-chico) !important; box-shadow: none !important; }
.ac-servicios button.bg-white { border: 1px solid var(--ac-regla) !important; }
.ac-servicios button.bg-white:hover { border-color: var(--ac-regla-fuerte) !important; background: var(--ac-tinte) !important; }
.ac-servicios button.bg-mcolor1 { background: var(--ac-navy) !important; border: 1px solid var(--ac-navy) !important; }
.ac-servicios .rounded-2xl:not(button), .ac-servicios .rounded-xl:not(button), .ac-servicios .rounded-lg:not(button) {
  border-radius: var(--ac-radio) !important; box-shadow: none !important;
}
.ac-servicios img { border-radius: var(--ac-radio) !important; }

/* =============================================================================================== opiniones */
.ac-opiniones { background: var(--ac-tinte) !important; padding: clamp(64px, 8vw, 104px) 0 !important; }
.ac-opiniones .opinion-tarjeta { border: 1px solid var(--ac-regla) !important; box-shadow: none !important;
                                 border-radius: var(--ac-radio-chico) !important; }
.ac-opiniones .opinion-texto { color: var(--ac-cuerpo) !important; }
.ac-opiniones .opinion-iniciales { background: var(--ac-navy) !important; }
.ac-opiniones .opinion-meta { color: var(--ac-gris) !important; }

/* ===================================================================================== enfermedades y sintomas */
.ac-enfermedades { background: #fff !important; }
.ac-enfermedades h2 + p, .ac-enfermedades p.text-gray-600 { color: var(--ac-cuerpo) !important; }
.ac-enfermedades .grid > div {
  border: 1px solid var(--ac-regla) !important; border-radius: var(--ac-radio) !important; box-shadow: none !important;
  transition: transform .4s var(--ac-sale), box-shadow .4s var(--ac-sale), border-color .4s var(--ac-sale) !important;
}
.ac-enfermedades .grid > div:hover { transform: translateY(-3px) !important; box-shadow: var(--ac-sombra) !important;
                                     border-color: rgba(173, 144, 96, .55) !important; }
.ac-enfermedades .grid > div h3 { color: var(--ac-tinta) !important; }
.ac-sintomas { background: var(--ac-tinte) !important; }
.ac-sintomas span.ac-rotulo, .ac-sintomas span.bg-clip-text {
  background: none !important; color: var(--ac-oro-texto) !important;
  box-shadow: none !important; border: 0 !important; padding: 0 !important; font-size: 1rem !important; font-weight: 600 !important;
}
.ac-sintomas .space-y-4 > div, .ac-sintomas [class*="space-y-4"] > div {
  border: 1px solid var(--ac-regla) !important; border-radius: var(--ac-radio) !important; box-shadow: none !important;
  background: #fff !important;
}
.ac-sintomas img { border-radius: var(--ac-radio-chico) !important; }
.ac-sintomas a.ver-mas-sintoma {
  border: 0 !important; background: none !important; color: var(--ac-navy) !important; font-weight: 600 !important;
  padding: 10px 0 !important; white-space: nowrap;
}
.ac-sintomas a.ver-mas-sintoma::after { content: " \2192"; }

/* ======================================================================== banda de seguro medico (todas) */
/* Clara: con el pie oscuro debajo eran dos bloques oscuros seguidos en cada pagina. */
.ac-banda-seguro { background: var(--ac-cielo-fondo) !important; background-image: var(--ac-cielo-fondo) !important; }
.ac-banda-seguro > .absolute { display: none !important; }
.ac-banda-seguro h2 { color: var(--ac-tinta) !important; font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.75rem) !important; }
.ac-banda-seguro h2 + p { color: var(--ac-cuerpo) !important; font-weight: 400 !important;
                          font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem) !important; line-height: 1.6 !important; }
.ac-banda-seguro p.text-white\/80 { color: var(--ac-gris) !important; }

/* ============================================================================================ pagos y pie */
.ac-pagos { background: transparent !important; }
.ac-pagos [class*="rounded"]:not(.ac-pagos) { border-radius: var(--ac-radio-chico) !important; box-shadow: none !important; }
.ac-pagos .bg-mcolor1 { background: transparent !important; color: var(--ac-oro-texto) !important; font-weight: 600; }
.ac-pie { background: linear-gradient(180deg, var(--ac-hondo) 0%, var(--ac-tinta) 100%) !important; }
.ac-pie .text-mcolor2 { color: var(--ac-oro-claro) !important; }
.ac-pie a { color: rgba(255, 255, 255, .80); transition: color .2s var(--ac-sale); }
.ac-pie a:hover { color: #fff; }
.ac-pie .border-t, .ac-pie [class*="border-white"] { border-color: rgba(255, 255, 255, .12) !important; }

/* ============================================================================ paginas interiores: encabezado */
.ac-banner { background: var(--ac-cielo-banner) !important; background-image: var(--ac-cielo-banner) !important;
             padding-bottom: clamp(32px, 5vw, 56px) !important; }
.ac-banner .text-white { color: var(--ac-cuerpo) !important; }
.ac-banner .text-mcolor2, .ac-banner h1 {
  color: var(--ac-tinta) !important; font-family: var(--ac-display) !important; font-weight: 600 !important;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem) !important; line-height: 1.08 !important; letter-spacing: -.025em;
}

/* ================================================================== paginas interiores: ficha y lateral */
.ac-ficha { border: 1px solid var(--ac-regla) !important; box-shadow: none !important; border-radius: var(--ac-radio) !important; }
@media (min-width: 768px) { .ac-ficha { padding: 36px !important; } }
.ac-ficha > img { border-radius: var(--ac-radio-chico) !important; }
.ac-ficha h1 { color: var(--ac-tinta) !important; }
.ac-ficha h2 { color: var(--ac-tinta) !important; font-size: 1.45rem !important; margin-top: 2.2rem !important; }
.ac-ficha p, .ac-ficha li { color: var(--ac-cuerpo); line-height: 1.75; }
.ac-ficha :is(p, ul, ol, aside), .ac-medico-parrafo, .ac-banda-cancer p { max-width: 58ch; }   /* renglon de lectura: ~80 caracteres (medido) */
@media (max-width: 767px) { .ac-ficha { padding: 20px !important; } }   /* la de enfermedades no tenia relleno en celular */
.ac-ficha ul li::marker { color: var(--ac-oro); }
.ac-ficha .border-l-4 {      /* "Estadisticas en Mexico": bloque tintado, sin franja lateral ni caja dentro de la ficha */
  border: 0 !important; background: var(--ac-tinte) !important; border-radius: var(--ac-radio-chico) !important;
}
/* Cuando acudir a urgencias: bloque tintado, sin franja lateral (prohibicion de impeccable) ni caja dentro de la ficha */
.signos-alarma { border: 0 !important; border-radius: var(--ac-radio-chico) !important; padding: 20px 24px !important; }

.ac-lateral { background: #fff !important; border: 1px solid var(--ac-regla) !important; box-shadow: none !important;
              border-radius: var(--ac-radio) !important; }
.ac-lateral-cabeza { background: transparent !important; border-bottom: 1px solid var(--ac-regla); }
.ac-lateral-cabeza, .ac-lateral-cabeza * { color: var(--ac-tinta) !important; }
.ac-lateral a.group { border: 0 !important; box-shadow: none !important; transform: none !important;
                      border-radius: 12px !important; background: transparent !important; }
.ac-lateral a.group:hover { background: var(--ac-tinte) !important; }
.ac-lateral a.group.from-mcolor1 { background: var(--ac-navy) !important; }
.ac-lateral a.group .bg-blue-100 { background: var(--ac-tinte) !important; color: var(--ac-navy) !important; }
.ac-lateral .bg-gray-50 { background: var(--ac-tinte) !important; }
.ac-lateral .bg-gray-50 p, .ac-lateral .text-gray-500 { color: var(--ac-gris) !important; }
.ac-lateral a.group .leading-tight { line-height: 1.35 !important; }

.ac-cta { background-image: none !important; border-radius: var(--ac-radio) !important; box-shadow: none !important;
          background: linear-gradient(160deg, var(--ac-hondo), var(--ac-tinta)) !important; }
.ac-cta button.bg-blue-600 { background: #fff !important; color: var(--ac-tinta) !important; border-radius: var(--ac-pastilla) !important; box-shadow: none !important; }
.ac-cta button.bg-green-600 { background: var(--ac-verde-wa) !important; border-radius: var(--ac-pastilla) !important; box-shadow: none !important; }
/* Los dos botones en una linea cada uno, sin partir "Llame ahora" en dos renglones */
.ac-cta button.bg-blue-600, .ac-cta button.bg-green-600 { font-size: 1rem !important; padding: 12px 18px !important;
  white-space: nowrap; flex: 1 1 auto; min-height: 48px; }
.ac-cta .sm\:flex-row { flex-direction: column !important; width: 100%; gap: 10px !important; }
.ac-cta .sm\:flex-row > button { width: 100%; }

/* ===================================================================================== otras paginas */
.ac-listado { background: var(--ac-tinte) !important; }
.ac-listado [class*="rounded"] { border-radius: var(--ac-radio) !important; }
.ac-doctoralia { background: var(--ac-tinte) !important; background-image: none !important; }

.ac-404 { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
          text-align: center; padding: 96px 24px; background: var(--ac-cielo-fondo); }
.ac-404-cifra { font-family: var(--ac-display); font-weight: 600; font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
                line-height: 1; color: var(--ac-oro-grande); letter-spacing: -.04em; margin: 0 0 12px; }
.ac-404 h1 { color: var(--ac-tinta); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem); margin: 0 0 12px; }
.ac-404-texto { color: var(--ac-cuerpo); margin: 0 0 24px; }
.ac-404-enlaces { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }
.ac-404-enlaces a { border: 1.5px solid var(--ac-regla-fuerte); border-radius: var(--ac-pastilla); padding: 10px 20px;
                    color: var(--ac-navy); font-weight: 600; transition: background-color .25s var(--ac-sale); }
.ac-404-enlaces a:hover { background: var(--ac-tinte); }

/* ========================================================================================== interaccion */
:where(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid var(--ac-navy); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .ac-banda-problemas::before { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* PLANOS 11.32: en celular el encabezado generico de seccion empujaba el nombre de la pagina fuera de la primera
   pantalla. Ahi el titulo se achica y su parrafo de marketing (igual en todas las paginas de la seccion) se oculta
   (regla 14 de estilo-william: en movil, fuera lo que no cambia el dato). */
@media (max-width: 767px) {
  .ac-banner { padding-bottom: 20px !important; padding-top: 28px !important;
               background: var(--ac-cielo-fondo) !important; background-image: var(--ac-cielo-fondo) !important; }
  .ac-banner .grid { min-height: 0 !important; }
  .ac-banner .text-mcolor2, .ac-banner h1 { font-size: 1.8rem !important; margin-bottom: 0 !important; }
  .ac-banner .text-white > p:not(.text-mcolor2) { display: none !important; }
}

/* Texto chico sobre el cielo de marca: tonos que pasan AA en su parte mas oscura (medido con gate-visual) */
.ac-hero .space-y-6 > div:first-child, .ac-banner .text-mcolor2.text-sm { color: var(--ac-oro-cielo) !important; }
.ac-banda-seguro p.text-white\/80, .ac-banda-seguro p.text-sm { color: var(--ac-cuerpo) !important; }

/* ======================================================================================================
   ESCRITORIO PREMIUM (2026-10-12, segunda pasada). Pedido del Dr. Lara: "que se vean premium, su publico es gente muy
   adinerada; no que se vea costoso, simplemente muy bien disenado"; "revisa simetria de todo"; el celular NO se toca
   hasta aprobar el escritorio: todo va dentro de min-width 1024px.
   Medido antes (herramientas de simetria a 1280): el contenido arrancaba a 16, 24, 32, 48, 57, 64, 73, 88, 92, 105 o
   160 px del borde segun la seccion; la ficha y la lateral quedaban 16 | 49 px; el aire por seccion iba de 112 a 164.
   ====================================================================================================== */
@media (min-width: 1024px) {
  :root { --ac-ancho: 1120px; --ac-margen: 40px; --ac-ritmo: 120px; }

  /* Un solo eje: todos los contenedores al mismo ancho y margen (a 1280 px el contenido arranca a 80 px de cada lado) */
  html body :is(.container, .max-w-7xl, .max-w-6xl) {
    max-width: calc(var(--ac-ancho) + 2 * var(--ac-margen)) !important; width: 100%;
    padding-left: var(--ac-margen) !important; padding-right: var(--ac-margen) !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  html body :is(.container, .max-w-7xl, .max-w-6xl) :is(.container, .max-w-7xl, .max-w-6xl) {
    max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;   /* anidados: sin doble margen */
  }

  /* Ritmo: el mismo aire arriba y abajo en las secciones del inicio */
  .ac-razones, .ac-sobre, .ac-equipo, .ac-servicios, .ac-opiniones, .ac-enfermedades, .ac-sintomas {
    padding-top: var(--ac-ritmo) !important; padding-bottom: var(--ac-ritmo) !important;
  }
  .ac-razones > .container > .text-center, .ac-equipo .text-center.mb-8, .ac-opiniones .text-center.mb-12 { margin-bottom: 56px !important; }

  /* Encabezados de seccion alineados al eje (antes, unos centrados y otros a la izquierda) */
  .ac-razones .text-center, .ac-equipo .text-center.mb-8, .ac-opiniones .text-center.mb-12 { text-align: left !important; }
  .ac-sintomas .flex.justify-center.mb-4 { justify-content: flex-start !important; }
  .ac-sintomas h2 { text-align: left !important; }

  /* Cabecera: mas fina, redes en un solo tono discreto (los iconos dorados grandes se veian de plantilla) */
  .ac-cabecera .h-20 { height: 76px !important; }
  .ac-cabecera nav a, .ac-cabecera nav button { font-size: .95rem !important; color: var(--ac-tinta) !important; }
  .ac-cabecera button img {        /* solo las redes (el logotipo no va en boton; antes la regla lo encogia) */
    width: 20px !important; height: 20px !important; filter: grayscale(1) brightness(.38); opacity: .72;
    transition: opacity .25s var(--ac-sale);
  }
  .ac-cabecera button:hover img { opacity: 1; }

  /* Hero: titulo con mas presencia, credencial en una linea bajo los botones */
  .ac-hero h1 { font-size: clamp(3.4rem, 2rem + 2.6vw, 4.6rem) !important; }
  .ac-hero .grid { gap: 72px !important; }
  .ac-hero-credencial { display: block; margin: 4px 0 0; font-size: .9rem; color: var(--ac-cuerpo); letter-spacing: .005em; }

  /* Bandas: contenido a todo el eje, titulo a la izquierda y accion a la derecha */
  .ac-banda-problemas .bg-white { max-width: none !important; width: 100%; margin: 0 !important; }
  .ac-banda-cancer .backdrop-blur-md { padding: 48px 56px !important; }

  /* Metodos de pago: las tres fichas centradas (antes cargadas a la izquierda de una rejilla de cuatro) */
  .ac-pagos .lg\:grid-cols-4 { display: flex !important; justify-content: center; gap: 16px !important; }
  .ac-pagos .lg\:grid-cols-4 > * { flex: 0 1 260px; }

  /* Lectura un poco mas grande en escritorio */
  .ac-ficha :is(p, li) { font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
  /* Fotos al eje: la del hero termina en el margen derecho y la de "Sobre AirCare" arranca en el izquierdo */
  .ac-hero .hidden.lg\:flex { justify-content: flex-end !important; }
  .ac-sobre .max-w-md { margin-left: 0 !important; }
  /* Secciones con un relleno interno extra de 24 px: fuera, para que el aire sea el mismo en todas */
  :is(.ac-servicios, .ac-enfermedades, .ac-sintomas) > div.p-6 { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* Contacto al mismo eje */
  .ac-contacto { max-width: calc(var(--ac-ancho) + 2 * var(--ac-margen)); margin: 0 auto;
                 padding-left: var(--ac-margen) !important; padding-right: var(--ac-margen) !important; }
  /* Barra lateral a todo su carril (terminaba 33 px antes del margen) */
  .ac-lateral { width: 100%; }
  /* Banda de valoracion: texto a la izquierda, accion pegada al margen derecho de la ficha */
  .ac-banda-cancer .backdrop-blur-md .md\:flex-row, .ac-banda-cancer .backdrop-blur-md .lg\:flex-row { justify-content: space-between !important; width: 100%; }
}
@media (max-width: 1023px) {   /* el celular se trabaja despues */
  .ac-hero-credencial { display: none; }
  /* space-y-6 da margen a todo hijo menos el ultimo, aunque el ultimo este oculto: sin esto los botones ganaban
     24 px de margen y el hero del celular crecia (medido contra el commit anterior) */
  .ac-hero .space-y-6 > :has(+ .ac-hero-credencial) { margin-bottom: 0 !important; margin-block-end: 0 !important; }
}

@media (min-width: 1024px) {
  /* Tercera ronda de simetria (inspeccion pantalla por pantalla, 2026-10-12) */
  .ac-razon:first-child { padding-left: 0 !important; }            /* el texto de la primera columna al eje */
  .ac-razon:last-child { padding-right: 0 !important; }
  .ac-medico-tarjeta > .bg-mcolor1 { min-height: 78px; display: flex; flex-direction: column; justify-content: center; }
  .ac-banda-problemas h2 { margin-bottom: 14px !important; }
  /* Opiniones: el titulo no tenia contenedor y arrancaba en el borde de la ventana */
  .ac-opiniones > .text-center { max-width: calc(var(--ac-ancho) + 2 * var(--ac-margen)); margin: 0 auto 56px !important;
                                 padding: 0 var(--ac-margen); }
  /* Rotulos que repetian el titulo de su seccion (regla 3 de estilo-william: un dato una vez) */
  .ac-servicios h2.uppercase, .ac-enfermedades h2.uppercase, .ac-sintomas .flex.justify-center.mb-4 { display: none !important; }
  /* Pie: redes discretas en blanco, titulos de columna en tamano de rotulo, logotipo mas contenido */
  .ac-pie button img { width: 22px !important; height: 22px !important; filter: brightness(0) invert(1); opacity: .72; }
  .ac-pie button:hover img { opacity: 1; }
  .ac-pie h3 { font-size: .98rem !important; line-height: 1.45 !important; letter-spacing: 0 !important; max-width: 24ch; }
  .ac-pie h4 { font-size: 1rem !important; }
  .ac-pie a > img:not(button img), .ac-pie > div img:first-of-type:not(button img) { max-width: 220px; height: auto; }
}

@media (min-width: 1024px) {
  /* Redes de la cabecera: el boton del tamano del icono, para que el ultimo toque el eje derecho */
  .ac-cabecera .flex.gap-3 { gap: 22px !important; }
  .ac-cabecera .flex.gap-3 > button { width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; }
  .ac-cabecera .flex.gap-3 .p-1 { padding: 0 !important; display: block; }
  /* space-x-4 le daba 16 px de margen al bloque de redes porque detras va el boton del menu movil (oculto aqui) */
  .ac-cabecera .space-x-4 > .md\:flex { margin-right: 0 !important; margin-inline-end: 0 !important; }
}
@media (min-width: 1024px) {
  /* Aire de 120 px medido en el primer texto: estas secciones traen envoltorios con margen propio (24-48 px) */
  .ac-servicios { padding-top: calc(var(--ac-ritmo) - 24px) !important; }
  .ac-enfermedades { padding-top: calc(var(--ac-ritmo) - 48px) !important; }
  .ac-sintomas { padding-top: calc(var(--ac-ritmo) - 24px) !important; }
}
@media (min-width: 1024px) {
  /* Menu centrado en el eje de la pagina (antes quedaba entre logotipo y redes: su centro caia en 528 px de 1280) */
  .ac-cabecera .justify-between.h-20 { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .ac-cabecera .justify-between.h-20 > :last-child { justify-self: end; }
}
@media (min-width: 1024px) {
  /* Hilo dorado del hero ENCIMA de la foto (como outline quedaba debajo de la imagen y no se veia) */
  .ac-hero .hidden.lg\:flex > div { outline: 0 !important; }
  .ac-hero .hidden.lg\:flex > div::after {
    content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217, 195, 154, .9); border-radius: 16px;
    pointer-events: none; z-index: 2;
  }
}

@media (min-width: 1024px) {
  /* Cabecera: logotipo | menu centrado | una sola accion. Las redes ya estan en el pie (el Dr. Tolentino autorizo
     moverlas, CAMBIOS 2026-10-09); con seis iconos el menu centrado quedaba a 27 px de ellos. */
  .ac-cabecera .space-x-4 > .md\:flex { display: none !important; }
  .ac-cab-cta {
    display: inline-flex !important; align-items: center; height: 42px; padding: 0 20px; border-radius: var(--ac-pastilla);
    border: 1.5px solid var(--ac-regla-fuerte); color: var(--ac-navy); font-weight: 600; font-size: .93rem;
    transition: background-color .25s var(--ac-sale), border-color .25s var(--ac-sale);
  }
  .ac-cab-cta:hover { background: var(--ac-tinte); border-color: var(--ac-navy); }
  .ac-cabecera .space-x-4 > .ac-cab-cta { margin-right: 0 !important; margin-inline-end: 0 !important; }
}
.ac-cab-cta { display: none; }   /* en celular y tableta la cabecera sigue igual (se trabaja despues) */

@media (min-width: 1024px) {
  /* ===== Paginas interiores (cuarta ronda de simetria, inspeccion pantalla por pantalla a 1280, 2026-10-12) ===== */

  /* Encabezado: el titulo arranca a la misma altura en todas las paginas y siempre al eje izquierdo. Antes se centraba
     en un alto minimo de 320 px ("Nuestro equipo" caia 100 px mas abajo que "Agende su cita" y centrado a 224 px) y el
     titulo de servicios se partia en tres renglones desparejos. */
  .ac-banner { padding-top: 88px !important; padding-bottom: 88px !important; }
  .ac-banner .grid { min-height: 0 !important; }
  .ac-banner .grid > div { grid-column: 1 / span 9 !important; text-align: left !important; }
  .ac-banner .text-mcolor2, .ac-banner h1 { text-wrap: balance; margin-bottom: 20px !important; }
  .ac-banner .text-white > p:not(.text-mcolor2) { max-width: 60ch !important; }
  .ac-banner .text-white > :last-child { margin-bottom: 0 !important; }

  /* Lista lateral: el numero y la flecha no se encogen cuando el nombre ocupa dos renglones (el 8 quedaba mas chico
     y fuera de columna, y su flecha mas tenue) */
  .ac-lateral a.group .flex.items-center.gap-3 > div:first-child, .ac-lateral a.group > svg { flex-shrink: 0 !important; }

  /* (quinta pasada: las tres fichas con icono pasaron a columnas con reglas finas; ver "Contacto" al final de la hoja) */

  /* Ficha del medico al eje. Venia en un contenedor de 1600 px con 24 px de margen: foto, reglas y fichas a 24 px del
     borde mientras el resto del sitio va a 80. La banda de Doctoralia sigue de borde a borde. */
  .ac-medico-ficha { max-width: none !important; padding: 96px 0 0 !important; }
  .ac-medico-ficha > :not(.my-8) { max-width: var(--ac-ancho); width: calc(100% - 2 * var(--ac-margen));
                                   margin-left: auto !important; margin-right: auto !important; }
  .ac-medico-ficha > .grid:first-child { column-gap: 64px !important; margin-bottom: 96px !important; }
  .ac-medico-ficha .border-gray-300 { border-color: var(--ac-regla) !important; }
  .ac-medico-ficha > .border-t { padding-top: 64px !important; padding-bottom: 64px !important; margin-bottom: 0 !important; }

  /* Foto: sin sombra pesada, con el hilo dorado de la marca. Octava pasada (2026-10-19, decision del Dr. Lara): ya no es fija al bajar;
     solo la cabecera queda fija. Se queda arriba, al inicio de su columna. */
  .ac-medico-foto { align-self: start; }
  .ac-medico-foto img { box-shadow: none !important; border-radius: var(--ac-radio) !important; }
  .ac-medico-foto > div::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217, 195, 154, .9);
                                 border-radius: 12px; pointer-events: none; z-index: 2; }

  /* Nombre y especialidad alineados con su semblanza (antes centrados sobre un texto alineado a la izquierda), la
     especialidad como credencial en una linea (regla 20 de estilo-william: nunca en chip ni caja) y una regla fina */
  .ac-medico-ficha .lg\:col-span-8 > .text-center { text-align: left !important; padding-bottom: 28px;
                                                     border-bottom: 1px solid var(--ac-regla); }
  .ac-medico-ficha h1 { color: var(--ac-tinta) !important; font-family: var(--ac-display) !important; font-weight: 600 !important;
                        font-size: clamp(2.2rem, 1.5rem + 1.4vw, 2.8rem) !important; line-height: 1.1 !important; letter-spacing: -.025em; }
  .ac-medico-ficha h1 + div { margin-top: 10px !important; }
  .ac-medico-ficha h1 + div > span { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
                                     color: var(--ac-oro-texto) !important; font-size: 1.12rem !important; font-weight: 600 !important; }
  .ac-medico-parrafo { color: var(--ac-cuerpo); font-size: 1.0625rem !important; line-height: 1.75 !important; }

  /* Cedulas: la familia de fichas del sitio */
  .ac-medico-ficha .md\:grid-cols-2 > .border { border-radius: var(--ac-radio) !important; border-color: var(--ac-regla) !important; box-shadow: none !important; }

  /* Acreditaciones y sociedades: titulos de seccion en tinta y logotipos centrados. Con dos acreditaciones en una
     rejilla de tres, o cinco sociedades en una de cuatro, la fila quedaba cargada a la izquierda. */
  .ac-medico-ficha h2 { color: var(--ac-tinta) !important; font-family: var(--ac-display) !important; font-weight: 600 !important;
                        font-size: 1.75rem !important; letter-spacing: -.02em; margin-bottom: 40px !important; }
  .ac-medico-ficha .gap-0:is(.lg\:grid-cols-3, .lg\:grid-cols-4) { display: flex !important; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .ac-medico-ficha .gap-0:is(.lg\:grid-cols-3, .lg\:grid-cols-4) > .relative { flex: 0 0 25%; }
  .ac-medico-ficha .gap-0:is(.lg\:grid-cols-3, .lg\:grid-cols-4) > .relative:is(:nth-child(4n), :last-child) > .w-px { display: none !important; }
  .ac-medico-ficha .gap-0 .w-px { background: var(--ac-regla) !important; }

  /* Pie: el primer icono de redes al eje (el boton traia 4 px de relleno) */
  .ac-pie .flex.gap-3 { gap: 20px !important; }
  .ac-pie .flex.gap-3 > button { width: auto !important; height: auto !important; padding: 0 !important; }
  .ac-pie .flex.gap-3 .p-1 { padding: 0 !important; display: block; }
}
@media (min-width: 1024px) {
  /* Pagina del medico: la foto de Doctoralia al eje izquierdo (centrada en su mitad caia a 120 px) y la galeria con
     la misma voz que el resto (rotulo dorado en tipo oracion, titulo en tinta) */
  .ac-galeria { padding-top: var(--ac-ritmo) !important; padding-bottom: var(--ac-ritmo) !important; }
  .ac-galeria .text-center > p { color: var(--ac-oro-texto) !important; text-transform: none !important; letter-spacing: 0 !important;
                                 font-size: .95rem !important; font-weight: 600 !important; }
  .ac-galeria h2 { color: var(--ac-tinta) !important; font-family: var(--ac-display) !important; font-weight: 600 !important; letter-spacing: -.02em; }
  .ac-galeria .text-center.mb-12 { margin-bottom: 48px !important; }
}
@media (min-width: 1024px) {
  /* Listados (servicios, enfermedades, sintomas, equipo). Quinta pasada (2026-10-17): antes la ficha blanca colgaba
     encimada sobre el pie de la foto (absolute bottom-0 + translate-y-10) y tapaba al medico desde la barbilla. Ahora
     cada elemento es UNA pieza: la foto entera arriba (equipo 415 x 538 y servicios 760 x 420, cada una en su
     proporcion, sin recortar a nadie) y el texto debajo, sin encimar; mismas alturas por fila y "Saber mas" al pie.
     Sin sombra en reposo: una sola, al pasar el cursor. La ultima fila incompleta queda centrada. */
  .ac-listado .grid { display: flex !important; flex-wrap: wrap; justify-content: center; column-gap: 40px !important; row-gap: 40px !important; }
  .ac-listado .grid > .group { flex: 0 0 calc((100% - 40px) / 2); display: flex; margin-bottom: 0 !important; }
  .ac-listado .group > .relative { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
    background: #fff; border: 1px solid var(--ac-regla); border-radius: var(--ac-radio);
    transition: box-shadow .32s var(--ac-sale), border-color .32s var(--ac-sale); }
  .ac-listado .group:hover > .relative { box-shadow: var(--ac-sombra); border-color: var(--ac-regla-fuerte); }
  .ac-listado .group > .relative > .relative.overflow-hidden { flex: none; border-radius: 0 !important; }
  .ac-listado .group > .relative > .relative.overflow-hidden > a { display: block; }
  .ac-listado .group img { display: block; width: 100%; height: auto !important; aspect-ratio: 760 / 420; object-fit: cover;
    scale: none !important; transition: transform .7s var(--ac-sale) !important; }
  .ac-listado .group a[href^="/nuestro-equipo/"] img { aspect-ratio: 415 / 538; object-position: 50% 0; }
  .ac-listado .group:hover img { transform: scale(1.04); }
  .ac-listado .group > .relative > .absolute { position: static !important; display: flex; flex: 1 1 auto; translate: none !important; transform: none !important; }
  .ac-listado .group .bg-white.rounded-2xl { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; padding: 26px 28px 28px !important;
    background: transparent; border-radius: 0 !important; box-shadow: none !important; translate: none !important; transform: none !important; }
  .ac-listado .bg-white.rounded-2xl > a:last-child { margin-top: auto; }
  /* Colores a tokens (antes gray-900 / gray-600 / blue-600 de Tailwind) */
  .ac-listado h2 { color: var(--ac-tinta) !important; font-family: var(--ac-display); font-size: 1.3rem; font-weight: 600 !important;
    letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px !important; }
  .ac-listado .bg-white.rounded-2xl p { color: var(--ac-cuerpo) !important; font-size: .95rem; line-height: 1.6; margin-bottom: 20px !important; }
  .ac-listado .bg-white.rounded-2xl > a:last-child span { color: var(--ac-navy) !important; font-weight: 600 !important; transition: color .25s var(--ac-sale); }
  .ac-listado .group:hover .bg-white.rounded-2xl > a:last-child span { color: var(--ac-tinta) !important; }
  /* Pieza entera clicable (regla 12 de estilo-william): el enlace de "Saber mas" cubre la ficha */
  .ac-listado .bg-white.rounded-2xl > a:last-child::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  /* Fichas de lectura: sin el margen del ultimo parrafo, el aire de abajo igual al de arriba */
  .ac-ficha > :last-child, .ac-ficha > :last-child > :last-child { margin-bottom: 0 !important; }
}
@media (min-width: 1280px) { .ac-listado .grid > .group { flex-basis: calc((100% - 80px) / 3); } }

/* Boton "Agende en linea en Doctoralia" de la tarjeta lateral (lo agrego la clinica en main el 2026-10-12, con estilo de
   la hoja original: recuadro blanco de 78 px en dos renglones bajo dos pastillas de 49). En 2.0 es la tercera pastilla,
   de contorno, para que no compita con llamar y WhatsApp (regla 11 de estilo-william: una accion principal). */
.ac-cta .cta-doctoralia {
  display: flex !important; align-items: center; justify-content: center; width: 100%; max-width: none !important;
  min-height: 48px; margin: 10px 0 0 !important; padding: 12px 18px !important; border-radius: var(--ac-pastilla) !important;
  background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: none !important; font-size: 1rem !important; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color .25s var(--ac-sale), border-color .25s var(--ac-sale);
}
.ac-cta .cta-doctoralia:hover { background: rgba(255, 255, 255, .10) !important; border-color: #fff; color: #fff !important; }

/* ======================================================================================================
   TERCERA PASADA DE ESCRITORIO (2026-10-12): hallazgos de la auditoria (Opus con estilo-william e impeccable) y la
   aclaracion del Dr. Lara: "no quiero que se vea barroco, pero si premium y caro". Lo caro sale de la contencion y la
   precision (aire, luz, hilos finos, nada fuera de lugar), no de adornos. Solo escritorio: el celular sigue igual.
   ====================================================================================================== */
@media (min-width: 1024px) {
  /* Luz de marca en tono champan: el dorado sobre el cielo azul daba una mancha gris (rgb 198,196,195 medida en la
     esquina del hero, mas oscura que el cielo); una luz debe ser MAS clara que su fondo */
  :root {
    --ac-cielo-banner:
      radial-gradient(48% 80% at 96% 4%, rgba(255, 244, 222, .78), transparent 66%),
      linear-gradient(100deg, #f2f5fa 0%, #eef2f9 32%, #dce5f3 50%, #cfdbf0 100%);
    --ac-cielo-fondo:
      radial-gradient(48% 80% at 96% 4%, rgba(255, 244, 222, .78), transparent 66%),
      linear-gradient(100deg, #f2f5fa 0%, #eef2f9 26%, #dce5f3 42%, #cfdbf0 100%);
  }
  /* Banda profunda: el dorado mezclado con el azul marino siempre da gris (neblina rgb 82,81,97 medida); la luz es un
     azul mas claro del mismo tono, con apenas un velo champan en la que respira */
  .ac-banda-problemas {
    background:
      radial-gradient(46% 110% at 90% 0%, rgba(150, 170, 235, .26), transparent 62%),
      radial-gradient(55% 110% at 0% 100%, rgba(120, 140, 205, .14), transparent 60%),
      linear-gradient(135deg, var(--ac-tinta) 0%, var(--ac-navy) 100%) !important;
  }
  .ac-banda-problemas::before { background: radial-gradient(26% 34% at 64% 40%, rgba(236, 222, 196, .10), transparent 70%); }

  /* Cabecera estable a cualquier ancho: extra.css compacta el menu solo hasta 1439 px; desde 1440 volvian los 32 px de
     margen, el menu media 831 px, quedaba pegado al boton (0 px) y "Agende su cita" se partia en dos renglones */
  .ac-cabecera nav.hidden.lg\:flex > * { margin-inline: 0 !important; }
  .ac-cabecera nav.hidden.lg\:flex > a, .ac-cabecera nav.hidden.lg\:flex > div > button,
  .ac-cabecera nav.hidden.lg\:flex > div > a { padding-left: .5rem !important; padding-right: .5rem !important; }
  .ac-cab-cta { white-space: nowrap; }
  .ac-cabecera { background: #fff !important; }   /* a .96 se adivinaba el texto que pasaba detras */

  /* Botones: sombra contenida y anillo de foco con la forma de la pastilla */
  .ac-btn { box-shadow: 0 1px 2px rgba(30, 36, 67, .08), 0 10px 22px -14px rgba(30, 36, 67, .25) !important; }
  :where(.ac-btn, .ac-btn-wa, .ac-cab-cta, .cta-doctoralia, a:has(> .ac-btn), a:has(> div > .ac-btn)):focus-visible { border-radius: var(--ac-pastilla); }

  /* Enfermedades del inicio: al pasar el cursor entraba una foto oscura y el texto en tinta desaparecia; las seis
     fichas llevaban el icono de cancer de pulmon (heredado de la agencia; no hay iconos propios). Ficha clara entera
     clicable, "Ver mas" visible en reposo y sin icono equivocado. */
  .ac-enfermedades .grid > div > .absolute.inset-0 { display: none !important; }
  .ac-enfermedades .grid > div .relative.z-10 > .w-12 { display: none !important; }
  .ac-enfermedades .grid > div h3 { color: var(--ac-tinta) !important; font-size: 1.3rem !important; }
  .ac-enfermedades .grid > div p { color: var(--ac-cuerpo) !important; }
  .ac-enfermedades .grid > div .relative.z-10 { padding: 32px !important; }
  .ac-enfermedades .grid > div .mt-4.opacity-0 { opacity: 1 !important; margin-top: 8px !important; }
  .ac-enfermedades .grid > div .mt-4 a { display: inline-flex; flex-direction: row-reverse; gap: .35em; color: var(--ac-navy) !important;
                                         font-weight: 600 !important; font-size: .95rem !important; text-decoration: none !important; }
  .ac-enfermedades .grid > div .mt-4 a::before { content: "\2192"; transition: transform .3s var(--ac-sale); }
  .ac-enfermedades .grid > div:hover .mt-4 a::before { transform: translateX(3px); }
  .ac-enfermedades .grid > div .mt-4 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }

  /* Servicios del inicio: la lista arranca a la altura de la foto (antes 25 px abajo, centrada), la foto sin el marco
     interno de 8 px que la hacia ver encogida y la descripcion sin caja ni sangria */
  .ac-servicios .space-y-4.flex.flex-col.items-center.justify-center { justify-content: flex-start !important; }
  .ac-servicios .space-y-6 > .relative.h-80 { box-shadow: none !important; }
  .ac-servicios .space-y-6 > .relative.h-80 img { padding: 0 !important; }
  .ac-servicios .space-y-6 > .p-6.rounded-2xl { padding: 0 !important; box-shadow: none !important; background: transparent !important; }

  /* "Sobre AirCare": titulo en un solo tono (el titular en dos colores era firma de la agencia) y la foto llena su columna */
  .ac-sobre h2 .text-mcolor2 { color: var(--ac-tinta) !important; }
  .ac-sobre .max-w-md { max-width: none !important; }

  /* Sintomas: titulos en tinta (salian en gris 71,71,71) */
  .ac-sintomas h3 { color: var(--ac-tinta) !important; }

  /* Banda de valoracion: el rotulo como texto dorado en tipo oracion, sin pastilla (regla 20 de estilo-william) */
  .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) {
    background: none !important; padding: 0 !important; border: 0 !important; font-weight: 600 !important; font-size: .95rem !important;
  }
  .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) > svg { display: none !important; }
  .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) > span { display: inline-block; text-transform: lowercase; }
  .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) > span::first-letter { text-transform: uppercase; }

  /* Lectura: la vineta afuera, el segundo renglon alineado con el primero */
  .ac-ficha ul { list-style-position: outside !important; padding-left: 1.3em !important; }
  .ac-ficha ul li { padding-left: .2em; }

  /* Lista lateral: sin numeros (los servicios no tienen orden) y la flecha solo al pasar o en la pagina activa */
  .ac-lateral a.group .flex.items-center.gap-3 > div:first-child { display: none !important; }
  .ac-lateral a.group > svg { opacity: 0; transition: opacity .25s var(--ac-sale), transform .25s var(--ac-sale); }
  .ac-lateral a.group:hover > svg, .ac-lateral a.group.from-mcolor1 > svg { opacity: 1; }
  .ac-lateral a.group:hover > svg { transform: translateX(2px); }
  .ac-lateral a.group { padding-top: 12px !important; padding-bottom: 12px !important; }

  /* Opiniones: iniciales en circulo (las de tres letras salian en pastilla de 53-57 px) */
  .ac-opiniones .opinion-iniciales { width: auto !important; height: 44px !important; min-width: 44px; padding: 0 9px !important;
                                     border-radius: 22px !important; font-size: .74rem !important; letter-spacing: 0 !important;
                                     white-space: nowrap; }   /* circulo si caben; las de cuatro letras ("S.O.A.G.") se salian */

  /* Galeria y pagos: rotulos en tipo oracion ("Galeria de Fotos", "Seguros de gastos Medicos") */
  .ac-galeria .text-center > p, .ac-pagos .lg\:grid-cols-4 p, .ac-pagos .lg\:grid-cols-4 span { text-transform: lowercase !important; }
  .ac-galeria .text-center > p::first-letter, .ac-pagos .lg\:grid-cols-4 p::first-letter,
  .ac-pagos .lg\:grid-cols-4 span::first-letter { text-transform: uppercase !important; }

  /* 404: blanca, para que su cielo no se funda con el de la banda de seguro */
  .ac-404 { background: #fff !important; }

  /* Flotantes: WhatsApp en el verde de la marca (seguia en el dorado de la agencia) y los dos de 44 px */
  footer .fixed.bottom-4 button { width: 44px !important; height: 44px !important; }
  footer .fixed.bottom-4 button.bg-mcolor2 { background: var(--ac-verde-wa) !important; }

  /* (la foto de Doctoralia de la ficha del medico ya no se muestra en escritorio: repetia la foto de arriba; ver "Quinta pasada") */
}
@media (min-width: 1280px) {
  .ac-cabecera nav.hidden.lg\:flex { column-gap: 14px; }   /* aire entre secciones del menu cuando hay espacio */
}
@media (min-width: 1024px) {
  /* Aire visual igual arriba y abajo, medido hasta el ultimo borde visible (fichas y botones por su borde): razones
     120/128, enfermedades y sintomas 120/144, listados 96/104 (el resto del sitio va a 120) */
  .ac-razones { padding-bottom: calc(var(--ac-ritmo) - 8px) !important; }
  .ac-enfermedades, .ac-sintomas { padding-bottom: calc(var(--ac-ritmo) - 24px) !important; }
  .ac-listado { padding-top: var(--ac-ritmo) !important; padding-bottom: calc(var(--ac-ritmo) - 8px) !important; }
  .ac-pagos .bg-mcolor1 { padding: 0 !important; }   /* el rotulo ya no es pastilla: sin su relleno de 8 px */
  .ac-pagos > .relative.z-10 { padding-top: 60px !important; }   /* 64 visibles arriba, como abajo */
}

/* Contacto: "¿Aceptan mi seguro?" (Dr. Tolentino con Charles, 2026-10-12, version preliminar) */
.ac-seguros { max-width: 1120px; margin: 0 auto 72px; padding: 40px clamp(20px, 4vw, 48px); background: var(--ac-tinte);
  border: 1px solid var(--ac-regla); border-radius: var(--ac-radio); }
.ac-seguros h2 { font-family: var(--ac-display); color: var(--ac-tinta); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 16px; }
.ac-seguros > p { color: var(--ac-cuerpo); line-height: 1.7; max-width: 68ch; margin-bottom: 10px; }
.ac-seguros-listas { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin: 28px 0 20px; }
.ac-seguros h3 { color: var(--ac-oro-texto); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 12px; }
.ac-seguros ul { columns: 2; column-gap: 32px; }
.ac-seguros-listas > div:last-child ul { columns: 1; }
.ac-seguros li { color: var(--ac-tinta); padding: 7px 0; border-bottom: 1px solid var(--ac-regla); break-inside: avoid; }
.ac-seguros-nota { color: var(--ac-gris); font-size: .95rem; }
.ac-seguros h2 { scroll-margin-top: 110px; }
/* Enlace de la banda "¿Cuenta con seguro médico?" (pie de todas las paginas) a la lista de Contacto */
.ac-enlace-seguros { color: var(--ac-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
  text-align: center; }
.ac-enlace-seguros::after { content: " \2192"; }
.ac-enlace-seguros:hover { color: var(--ac-tinta); text-decoration-thickness: 2px; }
@media (min-width: 1024px) { .ac-enlace-seguros { text-align: right; } }
@media (max-width: 767.98px) {
  .ac-seguros-listas { grid-template-columns: 1fr; gap: 20px; }
  .ac-seguros ul, .ac-seguros-listas > div:last-child ul { columns: 2; column-gap: 16px; }
  .ac-seguros li { font-size: .9rem; padding: 6px 0; }
}

/* Indices: introduccion opcional bajo el encabezado (hoy solo /nuestro-equipo/; Dr. Tolentino con Charles, 2026-10-12) */
.ac-intro { max-width: 760px; margin: 0 auto; padding: 64px 20px 8px; }
.ac-intro p { color: var(--ac-cuerpo); font-size: 1.125rem; line-height: 1.75; margin-bottom: 18px; }
.ac-intro p:first-child { color: var(--ac-tinta); font-size: 1.25rem; }
@media (max-width: 767.98px) { .ac-intro { padding-top: 40px; } .ac-intro p { font-size: 1.0625rem; } .ac-intro p:first-child { font-size: 1.125rem; } }

/* Ficha del medico: "Areas de atencion" (enlaces a los temas que revisa) y "Formacion" (Dr. Tolentino con Charles, 2026-10-12) */
.ac-areas, .ac-formacion { border-top: 1px solid var(--ac-regla); padding-top: 28px; }
.ac-areas h2, .ac-formacion h2 { font-family: var(--ac-display); color: var(--ac-tinta); font-size: 1.375rem; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 16px; }
.ac-areas ul { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-areas a { display: inline-block; padding: 9px 16px; border-radius: var(--ac-pastilla); background: var(--ac-tinte);
  border: 1px solid var(--ac-regla); color: var(--ac-navy); font-weight: 500; font-size: .95rem;
  transition: background-color .3s var(--ac-sale), border-color .3s var(--ac-sale); }
.ac-areas a:hover { background: var(--ac-cielo); border-color: var(--ac-navy); }
.ac-formacion li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 12px 20px; position: relative;
  border-bottom: 1px solid var(--ac-regla); }
.ac-formacion li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac-oro); }
.ac-formacion-titulo { color: var(--ac-tinta); font-weight: 600; }
.ac-formacion-lugar { color: var(--ac-gris); font-size: .95rem; }

/* ======================================================================================================
   CUARTA PASADA (2026-10-12), pedido del Dr. Lara con capturas: galeria del equipo en paneles diagonales que se
   expanden, calificacion en grande, brillo dorado al pasar el cursor, franja regulatoria, resumen de cada ficha con
   formato, tarjeta lateral premium, fondos difuminados en movimiento (gusto del Dr. Tolentino) y microinteracciones
   (assets/aircare-2.js). Todo lo visual va en escritorio; lo unico que cambia en celular es la franja regulatoria
   del pie, porque es informacion legal y no diseno.
   ====================================================================================================== */
.ac-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
             clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ac-paneles, .ac-calificacion { display: none; }

/* Franja regulatoria del pie (Bloque A de Pipis). En celular, un dato por renglon; en escritorio, al eje izquierdo. */
.ac-legal { display: grid; gap: 8px; color: rgba(255, 255, 255, .74); font-size: .8125rem; line-height: 1.6; text-align: center; }
.ac-legal p { margin: 0; }
.ac-legal-responsable { color: #fff; font-size: .875rem; }
.ac-legal-rotulo { color: var(--ac-oro-claro); font-weight: 600; margin-right: .3em; }
.ac-legal-datos > span { display: block; }
.ac-legal a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35);
              text-underline-offset: 3px; transition: text-decoration-color .25s var(--ac-sale); }
.ac-legal a:hover { text-decoration-color: #fff; }
.ac-legal-aviso { color: rgba(255, 255, 255, .62); }
/* Aviso de cookies: informativo, letra chica como el aviso de arriba (blanco al 62 %: 6.6:1 sobre --ac-hondo) */
.ac-legal-cookies { color: rgba(255, 255, 255, .62); font-size: .75rem; }
/* En celular los botones flotantes (subir, llamar, WhatsApp) ocupan los ultimos ~100 px de la pantalla: con este aire,
   al llegar al final de la pagina la linea de cookies queda encima de ellos y no debajo. */
@media (max-width: 1023px) { .ac-legal { padding-bottom: 176px; } }   /* 176: los flotantes ocupan los ultimos 168 px */

@keyframes ac-deriva {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.08); }
}
@keyframes ac-aurora {
  from { transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(8%, 6%, 0) rotate(28deg) scale(1.15); }
}

@media (min-width: 1024px) {
  /* ---------------------------------------------------------------------------- equipo: paneles en diagonal */
  /* Inspiracion: la galeria de personajes que mando el Dr. Lara y los "hover expand" de 21st.dev. Cinco paneles
     inclinados 64 px que se traslapan dejando un hilo de 10 px; el elegido crece y muestra su resumen. Las fotos miden
     415 x 538: el panel abierto no pasa de ~570 px para no estirarlas de mas. */
  html body .ac-equipo .grid { display: none !important; }
  .ac-paneles { --sesgo: clamp(48px, 5vw, 64px); --hueco: 10px; display: flex; height: 540px; border-radius: var(--ac-radio); overflow: hidden;
                isolation: isolate; }
  .ac-panel { position: relative; flex: 1 1 0; min-width: 0; margin-left: calc(var(--hueco) - var(--sesgo));
              clip-path: polygon(var(--sesgo) 0, 100% 0, calc(100% - var(--sesgo)) 100%, 0 100%);
              background: var(--ac-tinta); transition: flex-grow .75s var(--ac-sale); }
  .ac-panel:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--sesgo)) 100%, 0 100%); }
  .ac-panel:last-child { clip-path: polygon(var(--sesgo) 0, 100% 0, 100% 100%, 0 100%); }
  .ac-panel.es-activo { flex-grow: 3; }
  html:not(.ac-js) .ac-paneles:is(:hover, :focus-within) .ac-panel.es-activo:not(:hover, :focus-within) { flex-grow: 1; }
  html:not(.ac-js) .ac-panel:is(:hover, :focus-within) { flex-grow: 3; }

  .ac-panel-boton { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
  .ac-panel.es-activo .ac-panel-boton { cursor: default; }
  .ac-panel-boton:focus-visible { outline: 3px solid var(--ac-oro-claro) !important; outline-offset: -8px; border-radius: 0; }
  .ac-panel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 0;
                   filter: saturate(.82) brightness(.94); transition: filter .6s var(--ac-sale), transform 1.2s var(--ac-sale); }
  .ac-panel:hover .ac-panel-foto, .ac-panel.es-activo .ac-panel-foto { filter: none; }
  /* Velo para leer el texto: en el cerrado solo abajo (el nombre corto); en el abierto sube hasta media foto */
  .ac-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
                     background: linear-gradient(180deg, rgba(30, 36, 67, 0) 58%, rgba(30, 36, 67, .5) 78%, rgba(30, 36, 67, .9) 100%);
                     transition: opacity .6s var(--ac-sale); }
  .ac-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
                      background: linear-gradient(180deg, rgba(30, 36, 67, 0) 26%, rgba(30, 36, 67, .55) 42%, rgba(26, 31, 60, .86) 58%, rgba(22, 27, 52, .97) 100%);
                      transition: opacity .6s var(--ac-sale); }
  .ac-panel.es-activo::before { opacity: 1; }
  .ac-panel.es-activo::after { opacity: 0; }

  /* "Dr." arriba y el apellido abajo: en una linea "Dr. Tolentino" tocaba el corte diagonal del panel */
  .ac-panel-corto { position: absolute; left: 26px; bottom: 24px; z-index: 2; color: #fff; font-family: var(--ac-display);
                    font-weight: 600; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; text-align: left;
                    transition: opacity .35s var(--ac-sale), transform .5s var(--ac-sale); }
  .ac-panel-titulo { display: block; font-family: var(--ac-texto); font-size: .8125rem; font-weight: 500; color: rgba(255, 255, 255, .78); }
  .ac-panel:not(.es-activo):hover .ac-panel-corto { transform: translateY(-3px); }
  .ac-panel.es-activo .ac-panel-corto { opacity: 0; }

  .ac-panel-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 calc(var(--sesgo) + 36px) 36px 44px;
                   color: #fff; opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
                   transition: opacity .35s var(--ac-sale), transform .6s var(--ac-sale), visibility 0s linear .35s; }
  .ac-panel:last-child .ac-panel-info { padding-right: 44px; }
  .ac-panel.es-activo .ac-panel-info { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
                                       transition: opacity .5s var(--ac-sale) .28s, transform .7s var(--ac-sale) .28s, visibility 0s; }
  html:not(.ac-js) .ac-paneles:is(:hover, :focus-within) .ac-panel.es-activo:not(:hover, :focus-within) .ac-panel-info { opacity: 0; visibility: hidden; }
  html:not(.ac-js) .ac-panel:is(:hover, :focus-within) .ac-panel-info { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .ac-panel-esp { color: var(--ac-champan); font-size: .875rem; font-weight: 600; margin: 0 0 6px; }   /* champan claro: el --ac-oro-claro daba 3.6:1 sobre el velo */
  .ac-panel-nombre { color: #fff !important; font-family: var(--ac-display); font-weight: 600; font-size: 1.6rem; line-height: 1.15;
                     letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
  .ac-panel-resumen { color: rgba(255, 255, 255, .86); font-size: .975rem; line-height: 1.6; margin: 0 0 10px; max-width: 46ch; }
  .ac-panel-cedula { color: rgba(255, 255, 255, .62); font-size: .8125rem; margin: 0 0 20px; }
  .ac-panel-enlace { display: inline-flex; align-items: center; gap: .4em; height: 44px; padding: 0 22px; border-radius: var(--ac-pastilla);
                     background: #fff; color: var(--ac-tinta) !important; font-weight: 600; font-size: .95rem;
                     transition: background-color .25s var(--ac-sale); }
  .ac-panel-enlace::after { content: "\2192"; transition: transform .3s var(--ac-sale); }
  .ac-panel-enlace:hover { background: var(--ac-oro-claro); }
  .ac-panel-enlace:hover::after { transform: translateX(3px); }
  .ac-panel-enlace:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; border-radius: var(--ac-pastilla); }

  /* ---------------------------------------------------------------------------- opiniones: calificacion */
  .ac-opiniones .text-center.mb-12 { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .ac-calificacion { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
  .ac-calificacion p { margin: 0; }
  .ac-calificacion-cifra { font-family: var(--ac-display); font-weight: 600; font-size: 5.25rem; line-height: .86;
                           letter-spacing: -.04em; color: var(--ac-tinta); }
  .ac-calificacion-detalle { display: grid; gap: 5px; padding-left: 22px; border-left: 1px solid var(--ac-regla-fuerte); }
  .ac-calificacion-estrellas { position: relative; font-size: 1.45rem; line-height: 1; letter-spacing: 3px; color: rgba(173, 144, 96, .22); }
  .ac-calificacion-relleno { position: absolute; left: 0; top: 0; color: var(--ac-oro); clip-path: inset(0 0 0 0);
                             transition: clip-path 1.3s var(--ac-sale) .15s; }
  .ac-por-llenar .ac-calificacion-relleno { clip-path: inset(0 100% 0 0); }
  .ac-calificacion-fuente a { color: var(--ac-tinta) !important; font-weight: 600; font-size: 1rem; text-decoration: underline;
                              text-decoration-color: var(--ac-regla-fuerte); text-underline-offset: 4px;
                              transition: text-decoration-color .25s var(--ac-sale); }
  .ac-calificacion-fuente a:hover { text-decoration-color: var(--ac-tinta); }
  .ac-cuenta { font-variant-numeric: tabular-nums; }
  .ac-calificacion-otra { color: var(--ac-gris); font-size: .875rem; }

  /* ---------------------------------------------------------- fichas: brillo dorado que sigue al cursor */
  /* Luz champan con un velo lavanda (los dos tonos de la marca sobre blanco) y un borde que se enciende cerca del
     cursor. Sin JS la luz queda arriba al centro. */
  :is(.ac-enfermedades .grid > div, .ac-sintomas .space-y-4 > div, .ac-listado .group .bg-white.rounded-2xl) {
    --mx: 50%; --my: 0%; position: relative; isolation: isolate;
  }
  :is(.ac-sintomas .space-y-4 > div, .ac-listado .group .bg-white.rounded-2xl) { overflow: hidden; }
  :is(.ac-enfermedades .grid > div, .ac-sintomas .space-y-4 > div, .ac-listado .group .bg-white.rounded-2xl)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: inherit;
    background: radial-gradient(440px circle at var(--mx) var(--my), rgba(236, 214, 170, .34), rgba(178, 190, 238, .16) 42%, transparent 72%);
    transition: opacity .5s var(--ac-sale);
  }
  :is(.ac-enfermedades .grid > div, .ac-sintomas .space-y-4 > div, .ac-listado .group .bg-white.rounded-2xl)::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border-radius: inherit; padding: 1px;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(173, 144, 96, .95), rgba(173, 144, 96, 0) 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity .4s var(--ac-sale);
  }
  .ac-enfermedades .grid > div:hover::before, .ac-enfermedades .grid > div:hover::after,
  .ac-sintomas .space-y-4 > div:hover::before, .ac-sintomas .space-y-4 > div:hover::after,
  .ac-listado .group:hover .bg-white.rounded-2xl::before, .ac-listado .group:hover .bg-white.rounded-2xl::after { opacity: 1 !important; }   /* el :is() de arriba pesa como su argumento mas especifico (4 clases) */
  .ac-enfermedades .grid > div:hover, .ac-sintomas .space-y-4 > div:hover {
    border-color: rgba(173, 144, 96, .45) !important;
    box-shadow: 0 1px 2px rgba(30, 36, 67, .05), 0 24px 46px -24px rgba(173, 144, 96, .5), 0 12px 26px -20px rgba(30, 36, 67, .22) !important;
  }

  /* ---------------------------------------------------------- fichas de lectura: credencial y resumen */
  /* "Revisado por" como renglon de credencial entre reglas finas: el nombre en su renglon, especialidad, cedula y fecha
     en otro (antes, tres renglones partidos y la foto de 40 px centrada contra ellos) */
  .ac-ficha .revision-autor { align-items: center !important; gap: 14px !important; padding: 16px 0; margin: 6px 0 32px !important;
                              border-top: 1px solid var(--ac-regla); border-bottom: 1px solid var(--ac-regla); }
  .ac-ficha .revision-autor img { width: 46px !important; height: 46px !important; flex-shrink: 0;
                                  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(173, 144, 96, .6); }
  .ac-ficha .revision-autor p { color: var(--ac-gris) !important; font-size: .9375rem !important; line-height: 1.55 !important; max-width: none; }
  .ac-rev-quien { display: block; font-size: 1.0625rem; margin-bottom: 2px; }
  .ac-rev-quien .font-semibold { font-weight: 400 !important; color: var(--ac-gris); }
  .ac-rev-quien a { color: var(--ac-tinta) !important; font-weight: 600 !important; text-decoration: none;
                    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
                    transition: background-size .35s var(--ac-sale); }
  .ac-rev-quien a:hover { background-size: 100% 1px; }
  .ac-rev-sep, .ac-ficha .revision-autor br { display: none; }
  .ac-rev-ced { white-space: nowrap; }
  .ac-rev-fecha { color: var(--ac-gris) !important; white-space: nowrap; }   /* la fecha no se parte ("9 / de octubre") */
  .ac-rev-fecha::before { content: " \00B7  "; }

  /* "En breve": el resumen deja la cursiva gris y pasa a texto de entrada con su rotulo */
  .ac-resumen { font-style: normal !important; color: var(--ac-tinta) !important; font-size: 1.3rem !important; line-height: 1.6 !important;
                max-width: 50ch !important; margin-bottom: 44px !important; text-wrap: pretty; }
  .ac-resumen::before { content: "En breve"; display: block; margin-bottom: 10px; font-size: .95rem; font-weight: 600;
                        color: var(--ac-oro-texto); letter-spacing: .01em; }
  .ac-resumen-vacio { display: none !important; }
  /* Enfermedades (sin resumen): la descripcion hace de texto de entrada */
  /* (el h2 "Descripcion" ya no se vuelve rotulo de 15 px: igual que en servicios y sintomas, ver "Quinta pasada") */
  .ac-ficha:has(> .ac-resumen-vacio) > section:first-of-type p { color: var(--ac-tinta) !important; font-size: 1.125rem !important;
    line-height: 1.7 !important; text-wrap: pretty; }
  .ac-ficha:has(> .ac-resumen-vacio) > section:first-of-type { margin-bottom: 44px !important; }

  /* ---------------------------------------------------------- tarjeta lateral: aurora azul profunda */
  /* Antes: logotipo en un circulo blanco, titulo de 36 px y parrafo centrado de siete renglones. Ahora: sin logotipo
     (ya esta en la cabecera), texto al eje izquierdo y luces difuminadas que se mueven despacio. */
  .ac-cta { isolation: isolate; min-height: 0 !important; text-align: left;
            background: linear-gradient(165deg, #283058 0%, var(--ac-tinta) 70%, #181d38 100%) !important; }
  .ac-cta::before { content: ""; position: absolute; inset: -45%; z-index: -1; pointer-events: none; filter: blur(18px);
    background:
      radial-gradient(28% 24% at 30% 28%, rgba(132, 154, 232, .55), transparent 70%),
      radial-gradient(24% 22% at 74% 52%, rgba(236, 214, 170, .26), transparent 70%),
      radial-gradient(32% 28% at 42% 84%, rgba(96, 118, 200, .42), transparent 70%);
    animation: ac-aurora 16s ease-in-out infinite alternate; }
  .ac-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 70%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 70%); }
  .ac-cta > .flex.justify-center.pt-6 { display: none !important; }
  .ac-cta > .p-8 { padding: 36px 30px 30px !important; text-align: left !important; }
  .ac-cta h3 { font-family: var(--ac-display) !important; font-size: 1.75rem !important; font-weight: 600 !important; line-height: 1.15 !important;
               letter-spacing: -.02em; margin-bottom: 14px !important; text-wrap: balance; }
  .ac-cta > .p-8 > p { font-size: 1rem !important; line-height: 1.65 !important; color: rgba(255, 255, 255, .8) !important;
                       margin: 0 0 26px !important; max-width: none !important; }

  /* ---------------------------------------------------------- fondos difuminados que se mueven despacio */
  /* Gusto del Dr. Tolentino: luces de marca (lavanda y champan) que derivan 26-34 s; el texto queda encima, sin
     movimiento. La meta de color del hero (45-60 %) se mide con gate-visual despues de cada cambio. */
  .ac-hero, .ac-banner, .ac-banda-seguro, .ac-opiniones { position: relative; isolation: isolate; overflow: hidden; }
  .ac-hero::before, .ac-banner::before, .ac-banda-seguro::before, .ac-opiniones::before {
    content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; will-change: transform;
    animation: ac-deriva 28s ease-in-out infinite alternate;
  }
  .ac-hero::before {
    background:
      radial-gradient(26% 32% at 66% 26%, rgba(160, 178, 236, .40), transparent 70%),
      radial-gradient(22% 28% at 90% 78%, rgba(255, 238, 206, .60), transparent 70%),
      radial-gradient(30% 34% at 44% 92%, rgba(186, 200, 240, .34), transparent 70%);
  }
  .ac-banner::before {
    background:
      radial-gradient(24% 46% at 70% 30%, rgba(160, 178, 236, .36), transparent 70%),
      radial-gradient(20% 40% at 92% 80%, rgba(255, 238, 206, .55), transparent 70%);
    animation-duration: 32s;
  }
  .ac-banda-seguro::before {
    background:
      radial-gradient(24% 50% at 18% 30%, rgba(160, 178, 236, .34), transparent 70%),
      radial-gradient(22% 44% at 86% 70%, rgba(255, 238, 206, .55), transparent 70%);
    animation-duration: 34s; animation-direction: alternate-reverse;
  }
  .ac-opiniones::before {
    background: radial-gradient(22% 34% at 84% 12%, rgba(236, 222, 196, .55), transparent 70%),
                radial-gradient(26% 30% at 8% 70%, rgba(178, 190, 238, .22), transparent 70%);
    animation-duration: 30s;
  }
  .ac-opiniones > * { position: relative; z-index: 1; }
  .ac-banda-problemas::after {
    content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
    background: radial-gradient(22% 30% at 24% 70%, rgba(150, 170, 235, .16), transparent 70%);
    animation: ac-deriva 24s ease-in-out infinite alternate-reverse;
  }

  /* ---------------------------------------------------------- microinteracciones (assets/aircare-2.js) */
  .ac-cabecera { transition: box-shadow .35s var(--ac-sale) !important; }
  .ac-cabecera.ac-cabecera-baja { box-shadow: 0 12px 30px -24px rgba(30, 36, 67, .45) !important; }
  .ac-aparece { transition: opacity .7s var(--ac-sale), translate .9s var(--ac-sale), transform .4s var(--ac-sale),
                            box-shadow .4s var(--ac-sale), border-color .4s var(--ac-sale), flex-grow .75s var(--ac-sale) !important; }
  .ac-por-aparecer { opacity: 0 !important; translate: 0 22px !important; }
  [data-ac-paneles] > .ac-por-aparecer { translate: 36px 0 !important; }
  /* Enlaces del pie: el subrayado crece desde la izquierda */
  .ac-pie a:not(:has(*)):not(.ac-legal a) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
                                                        transition: color .2s var(--ac-sale), background-size .35s var(--ac-sale); }
  .ac-pie a:not(:has(*)):not(.ac-legal a):hover { background-size: 100% 1px; }

  /* Franja regulatoria al eje izquierdo, un renglon por idea: responsable, sus datos y el aviso. Cada dato entero en su
     renglon (en dos columnas el folio COFEPRIS se partia en dos) */
  .ac-legal { text-align: left; gap: 6px; }
  .ac-legal-datos > span { display: inline-block; white-space: nowrap; }
  .ac-legal-datos > span + span::before { content: "\00B7"; margin: 0 .6em; color: rgba(255, 255, 255, .4); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .ac-hero::before, .ac-banner::before, .ac-banda-seguro::before, .ac-opiniones::before, .ac-banda-problemas::after,
  .ac-cta::before { animation: none !important; }
  .ac-panel, .ac-panel-info, .ac-panel-foto { transition: none !important; }
}

/* ======================================================= preguntas frecuentes (Dr. Tolentino, 2026-10-13)
   Acordeon sin JS (<details>/<summary>, plantillas/preguntas.html). Filas con la regla fina de 2.0, la pregunta en
   tinta y un "+" dorado que gira a "x" al abrir. En Contacto va en una caja como la de seguros. */
.ac-faq { margin-top: 2.2rem; }
.ac-faq-lista { border-top: 1px solid var(--ac-regla); }
.ac-faq-item { border-bottom: 1px solid var(--ac-regla); }
.ac-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 4px; color: var(--ac-tinta); font-weight: 600; font-size: 1.0625rem; line-height: 1.45;
  transition: color .2s var(--ac-sale); }
.ac-faq-item summary::-webkit-details-marker { display: none; }
.ac-faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; margin-top: -2px; border-radius: var(--ac-pastilla);
  border: 1px solid var(--ac-regla-fuerte); color: var(--ac-oro-texto); display: grid; place-items: center; font-weight: 400;
  font-size: 1.25rem; line-height: 1; transition: transform .25s var(--ac-sale), background-color .2s var(--ac-sale); }
.ac-faq-item[open] summary::after { transform: rotate(45deg); background: var(--ac-tinte); }
.ac-faq-item summary:hover { color: var(--ac-navy); }
.ac-faq-item summary:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 2px; border-radius: 6px; }
.ac-faq-item p { margin: -4px 44px 20px 4px; color: var(--ac-cuerpo); line-height: 1.7; }
.ac-faq-caja { max-width: 1120px; margin: 0 auto 72px; padding: 40px clamp(20px, 4vw, 48px); background: var(--ac-tinte);
  border: 1px solid var(--ac-regla); border-radius: var(--ac-radio); }
.ac-faq-caja .ac-faq { margin-top: 0; }
.ac-faq-caja .ac-faq h2 { font-family: var(--ac-display); color: var(--ac-tinta) !important; font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
.ac-faq-caja .ac-faq-item summary::after { background: #fff; }
@media (max-width: 767.98px) {
  .ac-faq-item summary { font-size: 1rem; padding: 16px 0; }
  .ac-faq-item p { margin-right: 0; margin-left: 0; }
  .ac-faq-caja { margin: 0 16px 48px; }
}

/* Diagnostico y tratamiento (Dr. Tolentino, 2026-10-13): la guia que respalda el texto, en letra chica bajo Tratamiento */
.ac-guia { margin-top: 10px; color: var(--ac-gris); font-size: .875rem; line-height: 1.5; }

/* Boton flotante de Doctoralia (Dr. Tolentino, 2026-10-13): agenda en linea, justo arriba del de WhatsApp. Verde azulado
   de la familia de Doctoralia, oscurecido para que la marca blanca pase 4.3:1 (el #00c3a5 de Doctoralia daba 2.2:1). */
.ac-flotante-doctoralia { width: 44px; height: 44px; border-radius: 999px; background: #00897b; display: grid; place-items: center;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transition: transform .2s var(--ac-sale); }
.ac-flotante-doctoralia:hover { transform: scale(1.08); }
.ac-flotante-doctoralia:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 3px; }
.ac-flotante-doctoralia img { width: 24px; height: 24px; display: block; }
@media (max-width: 1023px) {   /* en celular los flotantes miden 36 px: el de Doctoralia igual */
  .ac-flotante-doctoralia { width: 36px; height: 36px; }
  .ac-flotante-doctoralia img { width: 20px; height: 20px; }
}
/* Flotantes con espaciado uniforme (Dr. Tolentino, 2026-10-13: "en las reglas de diseno se menciona la simetria").
   Antes: WhatsApp pegado al borde inferior (bottom 0) y 20 px entre el y Doctoralia, 12 px entre los de arriba.
   Ahora: WhatsApp a 24 px del borde, igual que del lado derecho, y 12 px entre todos los botones.
   La pila (subir y Doctoralia) arranca a 24 + alto del boton + 12. */
footer div.fixed.bottom-4.right-4 > a > button.fixed { bottom: 24px !important; }
div.fixed.bottom-4.right-4.z-50 { bottom: 80px !important; }   /* 24 + 44 + 12 */
@media (max-width: 1023px) {
  div.fixed.bottom-4.right-4.z-50 { bottom: 72px !important; } /* 24 + 36 + 12 */
}

/* ===================================================================== portada con carrusel (2026-10-15)
   Dr. Tolentino: estilo del Centro Medico ABC, foto que se difumina hacia el texto, y carrusel con los cinco medicos
   (cambia cada 6 s; assets/aircare-2.js). Reemplaza el cielo con luces y la foto de banco enmarcada.
   Escritorio: la foto ocupa la derecha (hasta 64 % del ancho, proporcion 3:2 del alto) y se funde con el fondo
   hacia el texto, que queda al eje del logo. Celular: la foto va arriba, a todo lo ancho, y se funde hacia abajo. */
.ac-hero { background: #f3f5f9 !important; }
.ac-hero::before { display: none !important; }
.ac-carrusel { position: relative; overflow: hidden; aspect-ratio: 3 / 2; max-height: 52vh; width: 100%; }
.ac-carrusel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: scale(1.04); transition: opacity 1.4s var(--ac-sale), transform 7.5s linear; }
.ac-carrusel-foto.activa { opacity: 1; transform: scale(1); }
.ac-carrusel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(243,245,249,0) 55%, rgba(243,245,249,.7) 82%, #f3f5f9 100%); }
.ac-carrusel-control { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: flex;
  align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(30,36,67,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ac-carrusel-control button { all: unset; cursor: pointer; display: block; }
.ac-carrusel-control .ac-carrusel-punto { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.6);
  transition: width .3s var(--ac-sale), background .3s; }
.ac-carrusel-control .ac-carrusel-punto[aria-current="true"] { width: 22px; background: #fff; }
.ac-carrusel-control .ac-carrusel-pausa { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; margin-left: 4px; }
.ac-carrusel-control button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
html:not(.ac-js) .ac-carrusel-control { display: none; }   /* sin JS no hay carrusel: queda la primera foto */
/* Rotulo dentro del h1: se ve como antes (dorado, chico, arriba del titulo) */
.ac-hero .space-y-6 > .ac-hero-textos { color: inherit !important; font-size: inherit !important; font-weight: inherit !important;
  letter-spacing: normal; font-family: inherit; }
.ac-hero h1 .ac-hero-rotulo { display: block; margin-bottom: 20px; color: var(--ac-oro-texto); font-family: var(--ac-texto);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; }
.ac-hero h1 .ac-hero-titulo { display: block; }
@media (max-width: 1023px) {
  .ac-hero > .relative.z-10 { padding-top: 4px !important; }
  .ac-hero h1 .ac-hero-titulo { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 2.9rem); line-height: 1.06; }
  .ac-hero h1 .ac-hero-rotulo { font-size: .95rem; margin-bottom: 14px; }
}
@media (min-width: 1024px) {
  .ac-hero { --alto: clamp(600px, 74vh, 720px); }
  .ac-carrusel { position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; max-height: none; aspect-ratio: auto;
    width: min(64vw, calc(var(--alto) * 1.5)); }
  .ac-carrusel::after { background: linear-gradient(90deg, #f3f5f9 0%, rgba(243,245,249,.94) 13%, rgba(243,245,249,.62) 27%, rgba(243,245,249,0) 44%); }
  .ac-carrusel-control { left: 58%; bottom: 28px; }
  .ac-hero > .relative.z-10 { min-height: var(--alto) !important; }
  .ac-hero .grid { grid-template-columns: minmax(0, 560px) !important; justify-content: start !important; }
  .ac-hero h1 { font-size: clamp(2.75rem, 1.4rem + 2.1vw, 3.75rem) !important; line-height: 1.04 !important; }
  .ac-hero h1 .ac-hero-rotulo { margin-bottom: 28px; }
  .ac-hero h2 { max-width: 34rem !important; }
}
@media (prefers-reduced-motion: reduce) { .ac-carrusel-foto { transition: none; transform: none !important; } }

/* Titulo de la portada en Fraunces (Dr. Tolentino, 2026-10-15): serif suave, calida y premium; "respiracion" en
   cursiva dorada (--ac-oro-texto, 5.5:1). El rotulo y el resto del sitio siguen en Wix Madefor. */
.ac-hero h1 .ac-hero-titulo { font-family: 'Fraunces', 'Fraunces Respaldo', Georgia, serif; font-weight: 500; letter-spacing: -.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50; }
.ac-hero h1 .ac-hero-titulo em { font-style: italic; font-weight: 400; color: var(--ac-oro-texto); }
@media (min-width: 1024px) { .ac-hero h1 { font-size: clamp(3rem, 1.6rem + 2.4vw, 4.1rem) !important; line-height: 1.02 !important; } }
/* La capa del texto (relative z-10, a todo lo ancho del hero) tapaba el carrusel y se comia los clics de los puntos y
   la pausa (elementFromPoint en un punto devolvia esa capa). Deja pasar los clics salvo en la columna del texto. */
.ac-hero > .relative.z-10, .ac-hero > .relative.z-10 > .container, .ac-hero .grid { pointer-events: none; }
.ac-hero .grid > * { pointer-events: auto; }

/* ============================================== "Comprometidos con la calidad" (Dr. Tolentino, 2026-10-15)
   Version compacta: a la izquierda sello, titulo, texto, boton a CONACEM y recordatorio; a la derecha la lista de los
   cinco medicos con sus especialidades certificadas y "Vigente". Sin consejo, numero, fecha ni fuente: estan en la
   ficha de cada medico y en CONACEM. */
.ac-calidad { background: var(--ac-tinte); padding: clamp(64px, 8vw, 104px) 16px; }
.ac-calidad-marco { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; }
.ac-sello { width: 48px; height: 48px; color: var(--ac-oro); display: block; margin-bottom: 16px; }
.ac-calidad-rotulo { color: var(--ac-oro-texto); font-weight: 600; font-size: 1rem; margin-bottom: 10px; }
.ac-calidad-texto { color: var(--ac-cuerpo); font-size: 1.0625rem; line-height: 1.7; margin-top: 14px; max-width: 46ch; }
.ac-calidad-boton { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; background: var(--ac-navy);
  color: #fff !important; border-radius: var(--ac-pastilla); padding: 14px 26px; font-weight: 600; text-decoration: none;
  transition: background .2s var(--ac-sale); }
.ac-calidad-boton:hover { background: var(--ac-tinta); }
.ac-calidad-boton:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 3px; }
.ac-calidad-boton svg { width: 16px; height: 16px; }
.ac-calidad-recordatorio { color: var(--ac-gris); font-size: .9rem; line-height: 1.6; margin-top: 16px; max-width: 46ch; }
.ac-calidad-lista { list-style: none; padding: 6px 24px; margin: 0; background: #fff; border: 1px solid var(--ac-regla);
  border-radius: var(--ac-radio); box-shadow: var(--ac-sombra); align-self: center; }
.ac-calidad-lista > li { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; }
.ac-calidad-lista > li + li { border-top: 1px solid var(--ac-regla); }
.ac-calidad-check { width: 24px; height: 24px; color: var(--ac-oro-texto); }
.ac-calidad-nombre { color: var(--ac-tinta); font-weight: 600; font-size: 1.05rem; text-decoration: none; line-height: 1.35; }
.ac-calidad-nombre:hover { color: var(--ac-navy); text-decoration: underline; text-underline-offset: 3px; }
.ac-calidad-esp { color: var(--ac-cuerpo); font-size: .92rem; margin-top: 2px; }
.ac-calidad-vig { color: var(--ac-oro-texto); font-weight: 600; font-size: .85rem; }
.ac-calidad .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1024px) { .ac-calidad-marco { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }
@media (max-width: 479.98px) {
  .ac-calidad-lista { padding: 4px 16px; }
  .ac-calidad-lista > li { grid-template-columns: 22px 1fr; }
  .ac-calidad-vig { grid-column: 2; margin-top: -8px; }
}
/* Celular (Dr. Tolentino, 2026-10-15): mas compacto, sin la palabra "Vigente" (queda la palomita) */
@media (max-width: 767.98px) {
  .ac-calidad-vig { display: none; }
  .ac-calidad-lista > li { grid-template-columns: 22px 1fr; padding: 14px 0; gap: 12px; }
  .ac-calidad-marco { gap: 28px; }
  .ac-calidad-texto { font-size: 1rem; }
}
/* Nombre abreviado solo en celular (Dr. Tolentino, 2026-10-15): contenido -> nombre_corto */
.ac-calidad .ac-nombre-corto { display: none; }
@media (max-width: 767.98px) { .ac-calidad .ac-nombre-largo { display: none; } .ac-calidad .ac-nombre-corto { display: inline; } }

/* ======================================== corrientes de aire: fondo animado del inicio (Dr. Tolentino, 2026-10-15)
   Haces de cuatro lineas onduladas en cada cambio de seccion (assets/aircare-2.js, corrientes). La capa va detras de
   todo; solo con la clase ac-con-corrientes (la pone el JS) las secciones claras se vuelven transparentes o casi. */
.ac-corrientes { position: absolute; left: 0; right: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ac-corriente { position: absolute; left: 0; width: 200%; height: 220px; animation: ac-deriva 70s linear infinite; }
.ac-corriente.ac-inv { animation-direction: reverse; animation-duration: 90s; }
.ac-corriente path { fill: none; stroke: rgba(58, 68, 109, .24); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.ac-corriente path.ac-oro { stroke: rgba(173, 144, 96, .6); }
@keyframes ac-deriva { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ac-corriente { animation: none; } }
.ac-con-corrientes .ac-razones, .ac-con-corrientes .ac-equipo, .ac-con-corrientes .ac-servicios,
.ac-con-corrientes .ac-enfermedades, .ac-con-corrientes .ac-pagos { background: transparent !important; }
.ac-con-corrientes .ac-sobre, .ac-con-corrientes .ac-opiniones, .ac-con-corrientes .ac-sintomas,
.ac-con-corrientes .ac-calidad { background: rgba(240, 243, 250, .40) !important; }

/* ======================================================================================================
   QUINTA PASADA DE ESCRITORIO (2026-10-17, tanda 1): auditoria del director de arte medida a 1280. Todo vive en
   @media (min-width: 1024px) o esta oculto por debajo de ese ancho: el celular no cambia ni un pixel (comparado
   contra el commit anterior, pantalla por pantalla). Movimiento: salida cubic-bezier(.22,1,.36,1) (--ac-sale) y
   duraciones de 160 / 320 / 700 ms; "reducir movimiento" lo apaga con la regla global de arriba.
   ====================================================================================================== */
.ac-agendar { display: none; }                        /* solo escritorio y solo con JS (ver mas abajo) */
.ac-agendar-medico, .ac-canales, .ac-solo-escritorio { display: none; }

@media (min-width: 1024px) {
  /* Octava pasada (2026-10-19): el flotante "Agendar" es un circulo de 48 px (icono de calendario) de 1024 a 1439 px, a 16 px del
     borde, y la pastilla de 144 px desde 1440. Motivo (medido a 1280): la pastilla ocupaba x 1112-1256 con la columna de texto
     terminando en 1200 (invadia 88 px) y "subir" caia dentro de la columna, a su lado. --ac-agendar-d es la distancia al borde
     derecho: a 1440 el contenido termina en x 1280 y la pastilla de 144 px a 24 px del borde empezaba en 1272, asi que ahi se
     acerca a 12 px (clamp: llega a 24 px desde 1464 px de ancho, cuando ya no toca la columna). */
  :root { --ac-agendar-w: 44px; --ac-circulo: 44px; --ac-agendar-d: 8px; }   /* undecima pasada: 44 px a 8 px del borde (antes 48 a 16) */

  /* ---- 1. Paginas interiores (enfermedad, servicio, sintoma): la primera pantalla dice el tema ---------------------
     Antes: el encabezado de categoria ocupaba 370 px con un titulo de 50 px (ni siquiera encabezado HTML) y el h1 real
     quedaba en y 860, debajo de una ilustracion; el h1 medía 48 px en EPOC y 30 px en el resto. Ahora la categoria es
     una franja delgada con su nombre como rotulo dorado y el h1 abre la ficha, en UN solo tamano. */
  .ac-banner:has(p.text-mcolor2) { padding-top: 30px !important; padding-bottom: 30px !important; }
  .ac-banner:has(p.text-mcolor2) .text-white > p:not(.text-mcolor2) { display: none !important; }   /* el parrafo de marketing, igual en todas las paginas de la seccion */
  .ac-banner p.text-mcolor2 { font-family: var(--ac-texto) !important; font-size: .95rem !important; font-weight: 600 !important;
    line-height: 1.4 !important; letter-spacing: .01em !important; color: var(--ac-oro-cielo) !important; margin: 0 !important; }

  /* La ficha en columna: el h1, "Revisado por" y el resumen (en enfermedades, la descripcion) suben arriba de la imagen */
  .ac-ficha:not(.legal) { display: flex; flex-direction: column; }
  .ac-ficha:not(.legal) > h1 { order: -4; }
  .ac-ficha:not(.legal) > .revision-autor { order: -3; }
  .ac-ficha:not(.legal) > .ac-resumen { order: -2; }
  .ac-ficha:not(.legal):has(> .ac-resumen-vacio) > section:first-of-type { order: -1; }
  .ac-ficha:not(.legal) > h1 { font-size: 2.75rem !important; font-weight: 600 !important; line-height: 1.08 !important;
    letter-spacing: -.025em !important; color: var(--ac-tinta) !important; margin: 0 0 22px !important; text-wrap: balance; }
  .ac-ficha:not(.legal) > img { width: 100%; height: auto !important; max-height: 320px !important; object-fit: cover; margin: 0 0 8px !important;
    border-radius: var(--ac-radio-chico) !important; }
  /* Un solo h2 en todas las fichas ("Descripcion" era rotulo de 15 px en enfermedades y h2 de 23 px en servicios) */
  .ac-ficha:has(> .ac-resumen-vacio) > section:first-of-type h2 { margin-top: 0 !important; }

  /* ---- 3b. Tarjeta lateral: una accion principal y dos enlaces; sin tarjeta dentro de tarjeta ------------------------
     La lista y la aurora azul eran dos tarjetas anidadas (la oscura, con radio, dentro de la blanca) y la franja
     "14 enfermedades" repetia un dato que la lista ya muestra. La aurora pasa a ser el pie de la misma tarjeta. */
  .ac-lateral > .bg-gray-50 { display: none !important; }
  .ac-lateral > .mt-12 { margin-top: 0 !important; }
  .ac-lateral .ac-cta { border-radius: 0 !important; }
  .ac-cta > .p-8 { display: grid; grid-template-columns: 1fr; }
  .ac-cta > .p-8 > .flex { display: contents; }
  .ac-cta > .p-8 > :is(h3, p) { grid-column: 1; order: 0; }
  .ac-cta button.bg-green-600 { order: 1; margin-bottom: 14px; }                       /* la accion principal */
  .ac-cta button.bg-blue-600, .ac-cta .cta-doctoralia { display: flex !important; align-items: center; justify-content: space-between;
    width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 0 2px !important; border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 0 !important; background: none !important;
    color: #fff !important; box-shadow: none !important; font-size: .98rem !important; font-weight: 600 !important; text-align: left;
    flex: none; transition: background-color .32s var(--ac-sale), padding .32s var(--ac-sale); }
  .ac-cta button.bg-blue-600 { order: 2; }
  .ac-cta .cta-doctoralia { order: 3; border-bottom: 1px solid rgba(255, 255, 255, .16) !important; }
  .ac-cta button.bg-blue-600::after, .ac-cta .cta-doctoralia::after { content: "\2192"; color: var(--ac-oro-claro); transition: translate .32s var(--ac-sale); }
  .ac-cta button.bg-blue-600:hover, .ac-cta .cta-doctoralia:hover { background: rgba(255, 255, 255, .06) !important; padding: 0 10px !important; }
  .ac-cta button.bg-blue-600:hover::after, .ac-cta .cta-doctoralia:hover::after { translate: 4px 0; }
  .ac-cta :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }

  /* ---- 2 y 5. Colores de la ficha del medico, pagos y galeria, a tokens ----------------------------------------------- */
  .ac-medico-ficha :is(.text-gray-900, .text-gray-800) { color: var(--ac-tinta) !important; }
  .ac-medico-ficha .text-gray-700 { color: var(--ac-cuerpo) !important; }
  .ac-pagos h3 { color: var(--ac-tinta) !important; }                                  /* metodos de pago: rgb(71,71,71) */
  /* Galeria de la ficha del medico: el borde y el punto activo eran naranja (amber de Tailwind) */
  .ac-galeria .border-amber-600 { border-color: var(--ac-navy) !important; }
  .ac-galeria .ring-amber-200 { --tw-ring-color: var(--ac-regla-fuerte) !important; }
  .ac-galeria .bg-amber-600 { background-color: var(--ac-navy) !important; }
  .ac-galeria .border-gray-200 { border-color: var(--ac-regla) !important; }
  .ac-galeria .bg-gray-300 { background-color: var(--ac-regla-fuerte) !important; }
  .ac-galeria .hover\:border-amber-300:hover { border-color: var(--ac-oro) !important; }
  .ac-galeria .hover\:bg-amber-300:hover { background-color: var(--ac-oro) !important; }

  /* ---- 3c. Contacto: los tres canales son la pieza principal, en reglas finas ---------------------------------------- */
  .ac-canales { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-bottom: 1px solid var(--ac-regla); }
  .ac-canal { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 40px 48px; }
  .ac-canal:first-child { padding-left: 0; }
  .ac-canal + .ac-canal { border-left: 1px solid var(--ac-regla); }
  .ac-canal-rotulo { margin: 0 0 6px; color: var(--ac-oro-texto); font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
  .ac-canal-dato { margin: 0 0 26px; color: var(--ac-tinta); font-family: var(--ac-display); font-size: 1.85rem; font-weight: 600;
    letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .ac-canal-boton { display: inline-flex; align-items: center; justify-content: center; height: 52px; margin-top: auto; padding: 0 28px;
    border: 1.5px solid var(--ac-regla-fuerte); border-radius: var(--ac-pastilla); background: transparent; color: var(--ac-tinta);
    font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color .32s var(--ac-sale), border-color .32s var(--ac-sale), color .32s var(--ac-sale), translate .16s var(--ac-sale); }
  .ac-canal-boton:hover { border-color: var(--ac-navy); background: var(--ac-tinte); translate: 0 -1px; }
  .ac-canal-boton:active { translate: 0 0; }
  .ac-canal-boton:focus-visible { border-radius: var(--ac-pastilla); }
  .ac-canal-principal { border-color: var(--ac-verde-wa); background: var(--ac-verde-wa); color: #fff; }
  .ac-canal-principal:hover { border-color: var(--ac-verde-wa-hondo); background: var(--ac-verde-wa-hondo); }
  /* Las fichas con icono pasan a renglones de texto con regla fina; el telefono y el WhatsApp viven arriba, solo una vez.
     Decima pasada (tanda A3): ya no son tres columnas bajo los canales sino una pila de tres renglones (Direccion, Horario,
     Urgencias) a la izquierda del mapa; ver "DECIMA PASADA" al final de la hoja. El orden visual sigue siendo el de antes. */
  .ac-contacto .space-y-8 > .grid { gap: 0 !important; grid-template-columns: minmax(0, 1fr) !important; }
  .ac-contacto .grid > .bg-white.rounded-lg.border { border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; text-align: left !important; position: relative; padding: 22px 0 22px 56px !important;
    border-top: 1px solid var(--ac-regla) !important; }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(2) { order: 1; padding-top: 0 !important; border-top: 0 !important; }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(3) { order: 2; }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(1) { order: 3; }
  .ac-contacto .grid > .bg-white > .flex.justify-center.mb-4 { display: none !important; }
  .ac-contacto .grid > .bg-white:first-child > div:last-child > :nth-child(-n+4) { display: none !important; }
  .ac-contacto .grid > .bg-white h2 { margin: 0 0 12px !important; color: var(--ac-oro-texto) !important; font-family: var(--ac-texto);
    font-size: .95rem !important; font-weight: 600 !important; letter-spacing: .01em; }
  .ac-contacto .ac-solo-escritorio { display: block; }
  .ac-contacto .grid .text-gray-800 { color: var(--ac-tinta) !important; }
  .ac-contacto .grid :is(.text-gray-600, .text-gray-700) { color: var(--ac-cuerpo) !important; }
  .ac-contacto .grid a { color: var(--ac-tinta); }
  .ac-contacto .grid .text-center { text-align: left !important; }

  /* ---- 4. Ficha del medico: acciones propias arriba del widget de Doctoralia, sin la foto repetida --------------------
     El widget (iframe de Doctoralia) muestra "403 ERROR" crudo cuando no carga; las acciones nunca dependen de el. */
  section.ac-doctoralia { min-height: 0 !important; padding-top: var(--ac-ritmo) !important; padding-bottom: var(--ac-ritmo) !important; }
  section.ac-doctoralia .flex.md\:flex-row { flex-direction: column; align-items: stretch; max-width: 760px; margin-left: auto; margin-right: auto; }
  section.ac-doctoralia .md\:w-1\/2:first-child { display: none !important; }
  section.ac-doctoralia .md\:w-1\/2 { width: 100% !important; }
  .ac-agendar-medico { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-bottom: 28px; }
  .ac-accion-principal { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border-radius: var(--ac-pastilla);
    background: var(--ac-navy); color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 1px 2px rgba(30, 36, 67, .10), 0 12px 26px -14px rgba(30, 36, 67, .65);
    transition: background-color .32s var(--ac-sale), translate .16s var(--ac-sale); }
  .ac-accion-principal:hover { background: var(--ac-tinta); translate: 0 -1px; }
  .ac-accion-principal:focus-visible { border-radius: var(--ac-pastilla); }
  .ac-accion-enlace { color: var(--ac-tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ac-regla-fuerte);
    text-underline-offset: 5px; transition: text-decoration-color .32s var(--ac-sale), color .32s var(--ac-sale); }
  .ac-accion-enlace:hover { color: var(--ac-navy); text-decoration-color: currentColor; }
  .doctoralia-widget-container { min-height: 380px; padding: 14px; overflow: hidden; background: #fff; border: 1px solid var(--ac-regla);
    border-radius: var(--ac-radio); }

  /* ---- 3a. Flotantes: UN boton "Agendar" que despliega los tres canales; "subir" solo despues de dos pantallas -------- */
  html.ac-js .ac-agendar { display: block; position: fixed; right: var(--ac-agendar-d); bottom: 24px; z-index: 50;
    transition: opacity .32s var(--ac-sale), visibility 0s linear 0s; }
  html.ac-js footer div.fixed.bottom-4.right-4 > a { display: none !important; }       /* llamar, WhatsApp y Doctoralia: ahora viven en la lista */
  html.ac-js div.fixed.bottom-4.right-4.z-50 { bottom: calc(24px + var(--ac-circulo) + 12px) !important; right: var(--ac-agendar-d) !important;   /* ENCIMA del flotante, misma x */
    opacity: 0; visibility: hidden; translate: 0 8px;
    transition: opacity .32s var(--ac-sale), translate .32s var(--ac-sale), visibility 0s linear .32s; }
  html.ac-js.ac-subir div.fixed.bottom-4.right-4.z-50 { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  /* Con el flotante retirado (hay otro llamado de agendar en pantalla) "subir" baja a su lugar; con la lista abierta se aparta */
  html.ac-js.ac-subir.ac-agendar-oculto div.fixed.bottom-4.right-4.z-50 { translate: 0 60px; }
  html.ac-js:has(.ac-agendar.es-abierto) div.fixed.bottom-4.right-4.z-50 { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .32s; }
  /* Retiro del flotante (assets/aircare-2.js, agendarRetirado): opacidad 0 y sin clics en 320 ms mientras el contenido ya trae un llamado a la vista */
  html.ac-js.ac-agendar-oculto .ac-agendar { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, .32s; }
  html.ac-js footer div.fixed.bottom-4 > button { width: var(--ac-circulo) !important; height: var(--ac-circulo) !important; margin: 0 !important; scale: none !important;
    background: #fff !important; color: var(--ac-tinta) !important; box-shadow: none !important; border: 1px solid var(--ac-regla-fuerte);
    transition: border-color .32s var(--ac-sale), background-color .32s var(--ac-sale), translate .16s var(--ac-sale) !important; }
  html.ac-js footer div.fixed.bottom-4 > button svg { color: var(--ac-tinta) !important; }
  html.ac-js footer div.fixed.bottom-4 > button:hover { border-color: var(--ac-navy); background: var(--ac-tinte) !important; translate: 0 -2px; }
  html.ac-js footer div.fixed.bottom-4 > button:focus-visible { outline: 2px solid var(--ac-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px #fff !important; }

  .ac-agendar-boton { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: var(--ac-agendar-w); height: var(--ac-circulo); padding: 0; border: 0; border-radius: var(--ac-pastilla); background: var(--ac-tinta); color: #fff;
    font: 600 1rem/1 var(--ac-texto); cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px -12px rgba(30, 36, 67, .55);
    transition: background-color .32s var(--ac-sale), translate .16s var(--ac-sale); }
  .ac-agendar-boton:hover { background: var(--ac-navy); translate: 0 -2px; }
  .ac-agendar-boton:active { translate: 0 0; scale: .97; }
  .ac-agendar-boton:focus-visible { border-radius: var(--ac-pastilla); outline: 2px solid var(--ac-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
  .ac-agendar-flecha { transition: rotate .32s var(--ac-sale); }
  .ac-agendar.es-abierto .ac-agendar-flecha { rotate: 180deg; }
  /* Circulo (1024-1439): solo el icono de calendario; el nombre accesible es aria-label="Agendar". Pastilla (desde 1440): texto y flecha */
  .ac-agendar-ico { display: block; }
  .ac-agendar-texto, .ac-agendar-flecha { display: none; }
  .ac-agendar.es-abierto .ac-agendar-boton { background: var(--ac-navy); }
  .ac-agendar-lista { position: absolute; right: 0; bottom: calc(100% + 12px); width: 264px; margin: 0; padding: 4px 20px; list-style: none;
    background: #fff; border: 1px solid var(--ac-regla); border-radius: var(--ac-radio-chico);
    box-shadow: 0 1px 2px rgba(30, 36, 67, .05), 0 22px 44px -22px rgba(30, 36, 67, .45);
    opacity: 0; visibility: hidden; translate: 0 8px;
    transition: opacity .16s var(--ac-sale), translate .32s var(--ac-sale), visibility 0s linear .32s; }
  .ac-agendar.es-abierto .ac-agendar-lista { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .ac-agendar-lista li + li { border-top: 1px solid var(--ac-regla); }
  .ac-agendar-lista a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--ac-tinta);
    font-size: 1rem; font-weight: 600; text-decoration: none; transition: color .16s var(--ac-sale); }
  .ac-agendar-lista a::after { content: "\2192"; color: var(--ac-oro-texto); transition: translate .32s var(--ac-sale); }
  .ac-agendar-lista a:hover { color: var(--ac-navy); }
  .ac-agendar-lista a:hover::after { translate: 4px 0; }
  .ac-agendar-lista a:focus-visible { border-radius: 6px; }
}

@media (min-width: 1440px) {
  :root { --ac-agendar-w: 144px; --ac-circulo: 48px; --ac-agendar-d: clamp(12px, calc(50vw - 708px), 24px); }
  .ac-agendar-ico { display: none; }
  .ac-agendar-texto { display: inline; }
  .ac-agendar-flecha { display: block; }
  .ac-agendar.es-abierto .ac-agendar-boton { background: var(--ac-tinta); }   /* la pastilla conserva su color de siempre */
}

/* "Sobre" con la foto de grupo nueva (horizontal, los cinco completos; 2026-10-17). En columna junto al texto quedaba
   de 536 x 330 frente a 520 px de texto: los medicos se veian chicos y la seccion desbalanceada. En escritorio: titulo
   y texto en una fila y la foto a todo el eje debajo, como pieza protagonista. El celular sigue apilado igual. */
@media (min-width: 1024px) {
  .ac-sobre .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; row-gap: 56px !important; }
  .ac-sobre .grid.lg\:grid-cols-2 > .order-1 { order: 1 !important; display: grid; grid-template-columns: 5fr 6fr;
                                                column-gap: 72px; align-items: end; }
  .ac-sobre .grid.lg\:grid-cols-2 > .order-1 > * { margin-bottom: 0 !important; }
  .ac-sobre .grid.lg\:grid-cols-2 > .order-2 { order: 2 !important; }
  .ac-sobre .max-w-md img { width: 100% !important; aspect-ratio: 16 / 7.4; object-fit: cover; object-position: 50% 8%;
                            box-shadow: none !important; }
  .ac-sobre h2 { margin-bottom: 0 !important; }
}

/* ======================================================================================================
   SEXTA PASADA: sistema (tanda 2, 2026-10-17). Auditoria del director de arte a 1280: "que cada cosa tenga UNA regla".
   Medido antes: 7 tamanos de titulo de seccion (36 a 51.84 px, uno en gris), ocho tamanos de cuerpo (11.84 a 17.92 px)
   con interlineado 1.75, radios de 4, 8, 10, 12, 16, 22 y 24 px, siete elementos con sombra en reposo y rotulos en
   MAYUSCULAS. Ahora, todo en @media (min-width: 1024px) (el celular no cambia ni un pixel):
     titulos de seccion   44 px / 1.1 / 600 / -0.022em / tinta  (h2 de lectura en fichas 28; titulos de ficha 20 o 24)
     cuerpo               17 px / 1.5 (lectura)  y  15 px / 1.45 (letra chica, fichas y avisos)
     radios               20 (--ac-radio), 14 (--ac-radio-chico) y pastilla
     sombra               una sola (--ac-sombra), solo al pasar el cursor y en los flotantes
     rotulos              tipo oracion, 15 px, 600, dorado de texto
     ritmo                120 px de aire visible arriba y abajo en las secciones del inicio
   ====================================================================================================== */
@media (min-width: 1024px) {
  :root {
    --ac-t-titulo: 2.75rem;      /* 44 */
    --ac-t-lectura: 1.0625rem;   /* 17 */
    --ac-t-chica: .9375rem;      /* 15 */
  }

  /* ---- 1. Titulos de seccion: UN tamano, un peso, una tinta (antes 36, 41.6, 44 y 51.84 px; uno en el gris del cuerpo) ---- */
  html body :is(.ac-razones, .ac-sobre, .ac-equipo, .ac-calidad, .ac-banda-cancer, .ac-banda-problemas, .ac-servicios,
                .ac-opiniones, .ac-enfermedades, .ac-sintomas, .ac-banda-seguro, .ac-galeria) h2:not(.uppercase),
  html body .ac-seccion-titulo, html body .ac-banner h1 {
    font-size: var(--ac-t-titulo) !important; line-height: 1.1 !important; font-weight: 600 !important;
    letter-spacing: -.022em !important;
  }
  html body :is(.ac-razones, .ac-sobre, .ac-equipo, .ac-calidad, .ac-banda-cancer, .ac-servicios, .ac-opiniones,
                .ac-enfermedades, .ac-sintomas, .ac-banda-seguro, .ac-galeria) h2:not(.uppercase),
  html body .ac-sobre h2 :is(.text-mcolor1, .text-mcolor2), html body .ac-banner h1 { color: var(--ac-tinta) !important; }
  /* Titulos de lectura dentro de fichas, cajas de Contacto y pagina del medico: 28 (antes 23.2, 32 y 22) */
  html body :is(.ac-ficha, .ac-medico-ficha, .ac-areas, .ac-formacion, .ac-seguros, .ac-faq-caja .ac-faq) h2:not(.ac-solo-escritorio) {
    font-size: 1.75rem !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: -.02em !important;
    color: var(--ac-tinta) !important;
  }
  /* Titulos de ficha (h3 de tarjeta): 20 (24 para el nombre del medico abierto); enteros */
  html body .ac-razon h3, html body .ac-enfermedades .grid > div h3, html body .ac-sintomas h3, html body .ac-listado h2,
  html body .ac-pie h3 { font-size: 1.25rem !important; line-height: 1.25 !important; }
  html body .ac-panel-nombre { font-size: 1.5rem !important; }
  html body .ac-hero h2 { font-size: 1.25rem !important; }                 /* bajada del hero: 20, entero (era 20.8) */

  /* ---- 2. Cuerpo: 17 de lectura, 15 de letra chica; interlineado 1.5 y 1.45 ------------------------------------------ */
  /* Lectura (17 / 1.5) */
  html body :is(.ac-sobre p, .ac-ficha p, .ac-ficha li, .ac-medico-parrafo, .ac-calidad-texto, .ac-banda-seguro h2 + p,
                .ac-banda-cancer p, .ac-intro p, .ac-seguros > p, .ac-seguros li, .ac-faq-item p, .ac-faq-item summary,
                .ac-servicios p, .ac-servicios button span.font-medium, .ac-sintomas p, .ac-enfermedades h2 + p,
                .ac-enfermedades p.text-gray-600, .ac-contacto p.text-base, .ac-ficha .ac-rev-quien, .ac-formacion-titulo,
                .ac-calidad-nombre, .ac-calificacion-fuente, .ac-banda-problemas p, .ac-cta > .p-8 > p) {
    font-size: var(--ac-t-lectura) !important; line-height: 1.5 !important;
  }
  html body .ac-ficha :is(p, ul, ol, aside), html body :is(.ac-medico-parrafo, .ac-banda-cancer p) { max-width: 66ch; }
  html body .ac-intro p { max-width: 66ch; }
  html body .ac-intro p:first-child { font-weight: 500; }
  /* La entrada de la ficha ("En breve", o la descripcion en enfermedades): mismo cuerpo de 17, en tinta y peso 500 */
  html body .ac-ficha .ac-resumen, html body .ac-ficha:has(> .ac-resumen-vacio) > section:first-of-type p {
    font-size: var(--ac-t-lectura) !important; line-height: 1.5 !important; font-weight: 500; max-width: 66ch !important;
  }
  /* Letra chica (15 / 1.45) */
  html body :is(.ac-hero-credencial, .ac-razon p, .ac-calidad-recordatorio, .ac-calidad-esp, .ac-calidad-vig,
                .ac-calificacion-otra, .ac-guia, .ac-seguros-nota, .ac-panel-esp, .ac-panel-resumen, .ac-panel-cedula,
                .ac-panel-titulo, .ac-panel-enlace, .opinion-texto, .opinion-meta, .opinion-estrellas, .ac-formacion-lugar,
                .ac-areas a, .ac-areas .ac-area-texto, .ac-listado .bg-white.rounded-2xl p, .ac-enfermedades .grid > div p,
                .ac-enfermedades .grid > div .mt-4 a, .ac-ficha .revision-autor p, .ac-ficha .revision-fuentes,
                .ac-ficha .revision-fuentes *, .aviso-medico, .aviso-medico *, .aviso-emergencia, .testimonios-fuente,
                .testimonios-fuente a, .ac-cab-cta, .ac-lateral a.group span.font-medium, .ac-listado a span,
                .ac-sintomas a.ver-mas-sintoma, .ac-canal-rotulo, .ac-banner p.text-mcolor2, .ac-enlace-seguros,
                .ac-banda-seguro p.text-sm, .ac-banda-seguro p.text-white\/80, .ac-legal, .ac-legal *, .ac-pie p,
                .ac-pie li, .ac-pie li a, .ac-pie li a *, .ac-pie .text-sm, .ac-pagos span, .ac-pagos h3,
                .ac-contacto .grid :is(.text-sm, .text-gray-600, .text-gray-700), .ac-contacto .grid h2) {
    font-size: var(--ac-t-chica) !important; line-height: 1.45 !important;
  }
}

@media (min-width: 1024px) {
  /* Botones grandes (52 px): 17; el resto de acciones, 15 */
  html body :is(.ac-btn, .ac-canal-boton, .ac-accion-principal, .ac-accion-enlace, .ac-calidad-boton, .ac-agendar-boton,
                .ac-agendar-lista a, .ac-cta button.bg-green-600) { font-size: var(--ac-t-lectura) !important; }
  html body .ac-cta :is(button.bg-blue-600, .cta-doctoralia) { font-size: var(--ac-t-chica) !important; }
  html body :is(.ac-calidad-rotulo, .ac-equipo .text-blue-900, .ac-sobre .text-mcolor2.text-sm) { font-size: var(--ac-t-chica) !important; }

  /* ---- 7. Rotulos: tipo oracion, 15 px, 600, dorado de texto; ni MAYUSCULAS ni tracking ------------------------------ */
  html body :is(.ac-seguros h3, .ac-galeria .text-center > p, .ac-pagos .bg-mcolor1, .ac-canal-rotulo, .ac-contacto .grid > .bg-white h2,
                .ac-calidad-rotulo, .ac-equipo .text-blue-900, .ac-sobre .text-mcolor2.text-sm,
                .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) > span, .ac-resumen::before) {
    font-size: var(--ac-t-chica) !important; line-height: 1.45 !important; font-weight: 600 !important;
    letter-spacing: 0 !important; text-transform: none !important; color: var(--ac-oro-texto) !important;
  }
  html body .ac-seguros h3::first-letter { text-transform: uppercase; }
  html body .ac-banner p.text-mcolor2 { color: var(--ac-oro-cielo) !important; }

  /* ---- 3. Radios: 20 / 14 / pastilla (antes 4, 8, 10, 12, 16, 22 y 24) ------------------------------------------------ */
  html body :is(.rounded-sm, .rounded, .rounded-md, .rounded-lg, .rounded-xl) { border-radius: var(--ac-radio-chico) !important; }
  html body :is(.rounded-2xl, .rounded-3xl) { border-radius: var(--ac-radio) !important; }
  html body .ac-razon .w-16.h-16, html body .ac-ficha .border-l-4, html body .ac-lateral a.group,
  html body .ac-medico-tarjeta > .bg-mcolor1, html body .ac-medico-tarjeta .bg-mcolor2 { border-radius: var(--ac-radio-chico) !important; }
  html body .ac-sintomas .flex-shrink-0.h-48, html body .ac-sintomas .overflow-hidden { border-radius: var(--ac-radio-chico) !important; }
  html body :is(.ac-medico-foto > div::after) { border-radius: var(--ac-radio-chico); }
  html body .ac-cta :is(a, button):focus-visible { border-radius: var(--ac-radio-chico); }
  html body .ac-agendar-lista a:focus-visible, html body .ac-pie button { border-radius: var(--ac-radio-chico); }
  /* Iniciales de opiniones: circulo fijo de 44 px; la letra mas chica para que "S.O.A.G." quepa sin salirse */
  html body .ac-opiniones .opinion-iniciales {
    width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important;
    border-radius: var(--ac-pastilla) !important; font-size: .625rem !important; letter-spacing: -.01em !important;
    line-height: 1 !important; overflow: hidden;
  }

  /* ---- 4. Sombras: una sola (--ac-sombra), solo al pasar el cursor y en los flotantes -------------------------------- */
  html body :is(.ac-calidad-lista, .ac-banda-cancer .backdrop-blur-md, .ac-btn, .ac-accion-principal) { box-shadow: none !important; }
  html body :is(.ac-btn, .ac-accion-principal):hover, html body .ac-banda-cancer .backdrop-blur-md:hover { box-shadow: var(--ac-sombra) !important; }
  html body .ac-ficha .revision-autor img { box-shadow: none !important; outline: 1px solid rgba(173, 144, 96, .6); outline-offset: 2px; }
  html body .ac-enfermedades .grid > div:hover, html body .ac-sintomas .space-y-4 > div:hover { box-shadow: var(--ac-sombra) !important; }
  html body .ac-cabecera.ac-cabecera-baja { box-shadow: var(--ac-sombra) !important; }
  html body .ac-agendar-boton { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), var(--ac-sombra); }
  html body .ac-agendar-lista { box-shadow: var(--ac-sombra); }
  html body .ac-flotante-doctoralia { box-shadow: var(--ac-sombra); }
}

@media (min-width: 1024px) {
  /* Titulos de pagina: el h1 del encabezado y el del medico, en el mismo tamano que los de seccion (antes 50.56 y 41.92) */
  html body .ac-banner h1.text-mcolor2, html body .ac-medico-ficha h1 {
    font-size: var(--ac-t-titulo) !important; line-height: 1.1 !important; letter-spacing: -.022em !important; color: var(--ac-tinta) !important;
  }
  /* Bajada del encabezado (Contacto, equipo, servicios) en el cuerpo de lectura */
  html body .ac-banner .text-white > p:not(.text-mcolor2) { font-size: var(--ac-t-lectura) !important; line-height: 1.5 !important; }
  /* Cabecera y pie */
  html body .ac-cabecera :is(nav a, nav button, nav a span, nav button span) { font-size: var(--ac-t-chica) !important; }
  html body .ac-pie h4 { font-size: var(--ac-t-lectura) !important; }
  html body .ac-pie h4 { line-height: 1.4 !important; }
  /* Calificacion: la fuente enlazada en 17; las estrellas en un tamano entero */
  html body .ac-calificacion-fuente a, html body .ac-calificacion-fuente a .ac-cuenta { font-size: var(--ac-t-lectura) !important; }
  html body .ac-calificacion-estrellas { font-size: 1.5rem !important; }
  /* Equipo de portada: apellido del panel cerrado en 17; rotulo del hero (dentro del h1, fuera del titulo en Fraunces) en 17 */
  html body .ac-panel-corto { font-size: var(--ac-t-lectura) !important; }
  html body .ac-hero h1 .ac-hero-rotulo { font-size: var(--ac-t-lectura) !important; }
  /* Pagina del medico: credenciales, especialidad y semblanza en 17 (antes 16, 17.9 y 18) */
  html body .ac-medico-ficha :is(p, h1 + div > span), html body .doctoralia-widget-container a { font-size: var(--ac-t-lectura) !important; line-height: 1.5 !important; }
  html body .ac-medico-ficha h1 + div > span { line-height: 1.4 !important; }
  /* Contacto: el dato de cada canal, en la escala de titulos (28) */
  html body .ac-canal-dato { font-size: 1.75rem !important; }
}

@media (min-width: 1024px) {
  /* ---- 6. Ritmo vertical: 120 px de aire VISIBLE arriba y abajo en cada seccion del inicio (medido hasta el primer y el
     ultimo borde visible: texto, foto o borde de ficha). Las bandas (profunda de "Problemas respiratorios", seguro y
     pagos) conservan su medida, pero simetrica. Antes: calidad 102/102, cancer 64/64, razones 116/112, opiniones 116/122. */
  :root { --ac-ritmo-banda: 104px; }
  .ac-razones { padding-top: calc(var(--ac-ritmo) + 4px) !important; padding-bottom: var(--ac-ritmo) !important; }
  .ac-sobre { padding-top: calc(var(--ac-ritmo) - 2px) !important; padding-bottom: var(--ac-ritmo) !important; }
  .ac-equipo { padding-top: calc(var(--ac-ritmo) - 1px) !important; padding-bottom: var(--ac-ritmo) !important; }
  .ac-calidad { padding-top: var(--ac-ritmo) !important; padding-bottom: var(--ac-ritmo) !important; }
  .ac-banda-cancer { padding-top: var(--ac-ritmo) !important; padding-bottom: var(--ac-ritmo) !important; }
  .ac-banda-problemas { padding-top: calc(var(--ac-ritmo-banda) + 4px) !important; padding-bottom: calc(var(--ac-ritmo-banda) - 3px) !important; }
  .ac-banda-seguro > .relative { padding-top: 84px !important; padding-bottom: 77px !important; }   /* 80 y 80 visibles */
  .ac-servicios { padding-top: calc(var(--ac-ritmo) - 20px) !important; }
  .ac-enfermedades { padding-top: calc(var(--ac-ritmo) - 44px) !important; }
  .ac-sintomas { padding-top: calc(var(--ac-ritmo) - 20px) !important; }
  .ac-opiniones { padding-top: calc(var(--ac-ritmo) + 4px) !important; padding-bottom: calc(var(--ac-ritmo) - 2px) !important; }
}

@media (min-width: 1024px) {
  /* Sombras de Tailwind (shadow-lg y compania) fuera en reposo; el anillo de las miniaturas activas se conserva */
  html body :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { --tw-shadow: 0 0 #0000 !important; --tw-shadow-colored: 0 0 #0000 !important; }
  html body [class*="hover:shadow"]:hover { box-shadow: var(--ac-sombra) !important; }
  html body .ac-cabecera nav .absolute.top-full { box-shadow: var(--ac-sombra) !important; border-color: var(--ac-regla) !important; }   /* menu desplegable: flotante */
  html body .ac-cabecera nav .absolute.-top-2 { border-color: var(--ac-regla) !important; }

  /* Colores sueltos a tokens: bordes de gris de Tailwind en pagos y avisos, parrafos de sintomas */
  html body .ac-pagos .border-2 { border-width: 1px !important; border-color: var(--ac-regla) !important; }
  html body :is(.aviso-medico, .revision-fuentes) { border-color: var(--ac-regla) !important; }
  html body .ac-sintomas p, html body .ac-servicios p, html body .ac-sobre p { color: var(--ac-cuerpo) !important; }

  /* "Revisado por": la especialidad y la cedula en un renglon y la fecha en el suyo. Antes la fecha pegada a la cedula
     (el <br> estaba oculto) los bajaba juntos y el " . " literal quedaba huerfano al final de la linea de especialidad */
  html body .ac-ficha .revision-autor br { display: inline; }
  html body .ac-rev-fecha::before { content: none; }
  html body .ac-ficha .revision-autor p { line-height: 1.45 !important; }

  /* Recuadro de urgencias: su rojo y su fondo ya son tokens (--ac-alerta), el unico color con significado del sitio */
  html body .signos-alarma { background: var(--ac-alerta-fondo) !important; }
  html body .signos-alarma :is(a, h2) { color: var(--ac-alerta) !important; }
  /* Flechas de la galeria del medico: borde de pelo en lugar del gris de Tailwind */
  html body .ac-galeria button { border-color: var(--ac-regla) !important; }

  /* Cabecera y pie: interlineado del sistema */
  html body .ac-cabecera :is(nav a span, nav button span) { line-height: 1.45 !important; }
  html body .ac-pie h4 { line-height: 1.5 !important; }
}

/* ======================================================================================================
   SEPTIMA PASADA: piezas (tanda 3, 2026-10-18). Auditoria del director de arte a 1280. Solo escritorio (>= 1024 px):
   el celular no cambia ni un pixel (comparado contra el commit anterior). Lo que dejo la clinica se queda: hero,
   corrientes de aire, Comprometidos con la calidad, opiniones, preguntas frecuentes, pagos, seguros, Areas de atencion
   y Formacion. Movimiento: salida --ac-sale, 160 / 320 / 700 ms; "reducir movimiento" lo apaga con la regla global.
     1  valoracion de cancer + banda "Problemas respiratorios": una sola pieza, un solo llamado (el de la banda)
     2  galeria del medico: una sola navegacion (miniaturas), la activa con hilo dorado
     3  inicio: "Ver mas" de enfermedades al pie de la ficha y el de sintomas junto al texto
     4  listados: descripciones completas, sin "..."
     5  pie: titulos de columna con escala de rotulo
     6  logotipos a 2x (ver srcset en cabecera.html y pie.html)
   ====================================================================================================== */
@media (min-width: 1024px) {

  /* ---- 1. Valoracion de cancer + banda profunda: contenido y llamado ----------------------------------------------------
     Antes: dos botones seguidos ("Agende su consulta" y "Agende aqui"), 120 px de cielo vacio entre la tarjeta y la banda.
     Ahora la tarjeta es solo contenido (sin boton: el llamado es el de la banda de abajo), con la composicion editorial
     del "Sobre" (rotulo y titulo a la izquierda, texto a la derecha), y se monta 64 px sobre la banda: el cielo y la banda
     profunda se leen como una sola pieza. */
  .ac-banda-cancer .backdrop-blur-md .flex-shrink-0 { display: none !important; }
  .ac-banda-cancer .backdrop-blur-md { padding: 56px 64px !important; box-shadow: none !important; }
  .ac-banda-cancer .backdrop-blur-md:hover { box-shadow: none !important; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 { display: grid; grid-template-columns: 5fr 6fr; column-gap: 72px; row-gap: 14px;
    align-items: start; text-align: left; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 > * { margin: 0 !important; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 > div { grid-column: 1; grid-row: 1; justify-self: start; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 > h2 { grid-column: 1; grid-row: 2; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 > p { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 52ch; }
  .ac-banda-cancer:has(+ .ac-banda-problemas) { padding-bottom: 0 !important; }
  .ac-banda-cancer + .ac-banda-problemas { margin-top: -64px; padding-top: calc(var(--ac-ritmo-banda) + 4px + 64px) !important; }

  /* ---- 2. Galeria del medico: una sola navegacion ------------------------------------------------------------------------
     Antes: 20 puntos Y 13 miniaturas visibles (el resto, tras un scroll horizontal sin pista). Ahora los puntos se van y las
     miniaturas caben todas en una fila (se reparten el ancho; la activa crece, 700 ms); la activa lleva un hilo dorado
     separado 2 px (firma de AirCare 2.0) y las demas, atenuadas. Flechas discretas: 40 px, borde de pelo, sin sombra. */
  .ac-galeria .mt-4.space-x-2 { display: none !important; }
  .ac-galeria .relative > .relative.overflow-hidden { border-radius: var(--ac-radio) !important; }
  .ac-galeria .galeria-miniaturas { display: flex; justify-content: center; gap: 6px; overflow: visible !important;
    margin-top: 24px !important; padding: 6px 4px 0 !important; }
  .ac-galeria .galeria-miniaturas > button { flex: 1 1 0 !important; width: auto !important; min-width: 0; max-width: 88px;
    height: 60px !important; margin: 0 !important; border: 0 !important; border-radius: var(--ac-radio-chico) !important;
    opacity: .7; box-shadow: none !important; cursor: pointer;
    transition: flex-grow .7s var(--ac-sale), max-width .7s var(--ac-sale), opacity .32s var(--ac-sale), box-shadow .32s var(--ac-sale) !important; }
  .ac-galeria .galeria-miniaturas > button:hover { opacity: 1; }
  .ac-galeria .galeria-miniaturas > button.border-amber-600 { flex-grow: 3.2 !important; max-width: 176px; opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ac-oro-grande) !important; }
  .ac-galeria .galeria-miniaturas > button:focus-visible { outline: 2px solid var(--ac-tinta); outline-offset: 3px; }
  .ac-galeria .relative > button.absolute { width: 40px !important; height: 40px !important; padding: 0 !important;
    border-radius: var(--ac-pastilla) !important; background: rgba(255, 255, 255, .92) !important; color: var(--ac-tinta) !important;
    border: 1px solid var(--ac-regla) !important; box-shadow: none !important;
    transition: background-color .16s var(--ac-sale), border-color .16s var(--ac-sale), scale .16s var(--ac-sale) !important; }
  .ac-galeria .relative > button.absolute:hover { background: #fff !important; border-color: var(--ac-tinta) !important; }
  .ac-galeria .relative > button.absolute:active { scale: .96; }
  .ac-galeria .relative > button.absolute:focus-visible { outline: 2px solid var(--ac-tinta); outline-offset: 3px; }

  /* ---- 3. Inicio: "Ver mas" de enfermedades al pie de la ficha; el de sintomas, junto a su texto -----------------------
     Enfermedades: la ficha es columna y "Ver mas" va anclado abajo, a la misma altura en toda la fila (antes quedaba a
     la altura de su ultimo renglon: 3 alturas distintas en una fila). */
  .ac-enfermedades .grid > div { display: flex; flex-direction: column; }
  .ac-enfermedades .grid > div > .relative.z-10 { flex: 1 1 auto; display: flex; flex-direction: column; }
  .ac-enfermedades .grid > div > .relative.z-10 > p { margin-bottom: 0 !important; }
  .ac-enfermedades .grid > div .mt-4.opacity-0 { margin-top: auto !important; padding-top: 24px; }
  /* Sintomas: la fila (foto, texto y "Ver mas") se compuso de nuevo en la novena pasada (tanda A2, al final de este archivo). */

  /* ---- 4. Listados (servicios, enfermedades, sintomas): descripciones completas ----------------------------------------
     Medido a 1280 antes: 13 de 14 descripciones de /servicios/, 12 de 14 de /enfermedades/ y 8 de 8 de /sintomas/
     salian cortadas con "..." (line-clamp-2; el texto entero ocupa 2 a 4 renglones). Los titulos tambien (1 en /enfermedades/).
     Las fichas de una fila ya miden lo mismo (flex), asi que el texto entero solo las alarga en las filas que lo piden. */
  .ac-listado :is(p, h2)[class*="line-clamp"] { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important;
    line-clamp: unset !important; }

  /* ---- 5. Pie: titulos de columna con escala de rotulo ---------------------------------------------------------------------
     Antes: 20 px, tres renglones ("Servicios y estudios especializados en salud respiratoria") y 24ch de ancho, mas
     pesados que las propias listas. Ahora 15 px / 600 / dorado claro / 1.4 (rotulo del sistema); todos con alto minimo de
     dos renglones, asi las tres listas arrancan a la misma altura. */
  html body .ac-pie h3 { font-size: var(--ac-t-chica) !important; line-height: 1.4 !important; font-weight: 600 !important;
    letter-spacing: 0 !important; max-width: none !important; min-height: 2.8em; margin-bottom: 18px !important; }
  html body .ac-pie h3, html body .ac-pie h3 a { color: var(--ac-oro-claro) !important; font-size: var(--ac-t-chica) !important; }
  /* La columna del logotipo a 220 px (lo que mide el logotipo) y 24 px entre listas: las listas ganan ancho y el titulo largo cabe en dos renglones */
  html body .ac-pie .grid.lg\:grid-cols-3.items-start { grid-template-columns: 220px 1fr; }
  html body .ac-pie .grid.lg\:grid-cols-3.items-start > .lg\:col-span-2 { column-gap: 24px; }
  html body .ac-pie h3 { text-wrap: pretty; }

  /* ---- 6. Logotipos a 2x: mismo tamano pintado (cabecera 48 px de alto, pie 220 px de ancho); la proporcion de la
     imagen original fija la medida para que el archivo de 2x no la cambie por redondeo ------------------------------------ */
  .ac-cabecera a[href="/"] > img { aspect-ratio: 622 / 261; }
  .ac-pie img[alt="logo"] { aspect-ratio: 622 / 261; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  html body .ac-pie h3 { min-height: 4.2em; }   /* a 1024 el titulo largo ocupa tres renglones: las listas siguen arrancando juntas */
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* A 1024 la tarjeta de valoracion no admite dos columnas (el titulo caia en cinco renglones): en una sola columna */
  .ac-banda-cancer .backdrop-blur-md { padding: 48px 56px !important; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 { grid-template-columns: 1fr; row-gap: 14px; }
  .ac-banda-cancer .backdrop-blur-md .flex-1 > p { grid-column: 1; grid-row: 3; margin-top: 8px !important; max-width: 62ch; }
}

/* ======================================================================================================
   OCTAVA PASADA (auditoria completa del 19-oct, tanda A1). Las fuentes alojadas y sus respaldos viven al inicio de este
   archivo (seccion "fuentes alojadas"); el flotante "Agendar" y su retiro, en la quinta pasada (ver 3a) y en
   assets/aircare-2.js (agendarRetirado). Aqui:
     1  areas de toque de 24 x 24 px o mas (WCAG 2.5.8), en todas las anchuras y sin mover ni un pixel de lo visible
     2  solo la cabecera es fija: indice lateral, tarjeta lateral y foto del medico se quedan arriba (>= 1024 px)
     3  fundido entre "Comprometidos con la calidad" y la banda de cancer (>= 1024 px)
   ====================================================================================================== */

/* ---- 1. Areas de toque -------------------------------------------------------------------------------------------------
   Medido antes: puntos del carrusel 8 x 8 (el activo 22 x 8), pausa 18 x 18, "Ver mas" del inicio 53 x 18 en celular, "Saber mas"
   de los listados 105 x 20 en celular y tableta, puntos de la galeria del medico 8.6 x 12 (celular) y 12 x 12 (tableta).
   Tecnica: el propio elemento crece con relleno transparente (background-clip: content-box deja la parte pintada igual) y un
   margen negativo del mismo tamano deja el flujo como estaba, asi que nada visible se mueve. Con un relleno parejo en los dos
   ejes la esquina redondeada del recorte queda como la de antes (radio = lado menor / 2). Los puntos del carrusel y de la
   galeria estan a 18 y 20 px de paso: sus areas de 24 px se montan unos pixeles (gana el de la derecha en el traslape). */
.ac-carrusel-control .ac-carrusel-punto, .ac-carrusel-control .ac-carrusel-punto[aria-current="true"] { box-sizing: content-box; padding: 8px; margin: -8px; background-clip: content-box; }   /* el [aria-current] repite el selector: su 'background' abreviado reiniciaba el recorte */
.ac-carrusel-control .ac-carrusel-punto:focus-visible { outline-offset: -5px; }   /* el aro sigue 3 px afuera del punto, no de su area */
.ac-carrusel-control .ac-carrusel-pausa { box-sizing: content-box; padding: 3px; margin: -3px -3px -3px 1px; }
.ac-carrusel-control .ac-carrusel-pausa:focus-visible { outline-offset: 0; }
.ac-galeria .mt-4.space-x-2 > button { box-sizing: content-box; padding: 8px; margin: -8px 0 -8px -8px !important; background-clip: content-box; }
.ac-galeria .mt-4.space-x-2 > button:last-child { margin-right: -8px !important; }
.ac-enfermedades .grid > div .mt-4 > a { padding: 13px 12px; margin: -13px -12px; }
@media (max-width: 1023.98px) {
  .ac-listado a:has(> .group\/btn) { padding-block: 12px; }
}

@media (min-width: 1024px) {
  /* ---- 2. Solo la cabecera fija ------------------------------------------------------------------------------------------
     El indice lateral de las fichas (lg:sticky lg:top-8 en la plantilla de Tailwind) medía 979 a 1363 px, mas que la pantalla:
     al bajar se quedaba pegado con su pie cortado. Ya no es fijo; la tarjeta lateral va dentro de el, asi que tampoco. */
  html body .ac-lateral { position: static; }

  /* ---- 3. Fundido entre "Comprometidos con la calidad" y la banda de cancer -----------------------------------------------
     Medido a 1280: la calidad terminaba en y 4226 (tinte casi blanco) y la banda de cancer arrancaba ahi con su cielo ya en
     color y las corrientes de aire cortadas en el borde. Ahora el cielo de la banda entra con una mascara de 112 px (transparente
     arriba, pleno abajo): deja ver lo que hay detras (el fondo de la pagina y las corrientes) y, encima, una capa del mismo tinte
     de la seccion anterior que se desvanece en esos mismos 112 px; asi el paso es continuo y la banda no cambia de lugar ni de alto. */
  /* z-index 2 (la banda ya es relative) hace de la banda un contexto de apilado: el cielo y el fundido (z -2 y -1) quedan detras de su
     contenido pero encima de las corrientes (z -1 del <body>), y la banda entera sigue encima de la banda profunda que viene
     despues y se le monta 64 px, para que la tarjeta no quede tapada. */
  .ac-banda-cancer { --ac-fundido: 112px; background: transparent !important; z-index: 2; }
  .ac-banda-cancer::before, .ac-banda-cancer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
  .ac-banda-cancer::before { bottom: 0; z-index: -2; background: var(--ac-cielo-fondo);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ac-fundido)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ac-fundido)); }
  .ac-banda-cancer:has(+ .ac-banda-problemas)::before { bottom: 64px; }   /* los 64 px que cubre la banda profunda, ahora debajo de la banda, quedan sin cielo */
  .ac-banda-cancer::after { height: var(--ac-fundido); z-index: -1; background: linear-gradient(to bottom, var(--ac-tinte), transparent); }
  .ac-con-corrientes .ac-banda-cancer::after { background: linear-gradient(to bottom, rgba(240, 243, 250, .40), transparent); }   /* el tinte de .ac-calidad con corrientes */
}

/* ======================================================================================================
   NOVENA PASADA (auditoria completa del 19-oct, tanda A2: portada, escritorio). Las tres piezas viven solo desde 1024 px; el
   celular no cambia (0 px medidos contra el commit anterior).
     1  "Por que elegirnos" como bento (rejilla de 12 columnas, filetes de 1 px, una pieza alta con la sala de espera)
     2  Sintomas del inicio: foto de 320 x 240, fila entera clicable, "Ver mas" a la derecha
     3  puntos del carrusel del hero a 24 px de paso
   Idea tomada de 21st.dev 27082 "Feature Overview Bento" (reticula de filetes finos dentro de un solo marco; MIT): se tomo la
   composicion, no el codigo.
   ====================================================================================================== */

/* ---- 1. Por que elegirnos: bento --------------------------------------------------------------------------------------------
   Antes: cuatro columnas de 280 px con 189 palabras, un icono en caja beige de 56 px por columna y reglas verticales que se
   curvaban porque eran el canto de cajas de radio 20. Ahora un solo marco de radio 20 con las celdas separadas por 1 px de la
   propia regla de marca (el fondo del marco asoma por el gap), asi no hay cantos curvos sueltos. 12 columnas = 5 (pieza alta)
   + 3.5 + 3.5; la primera razon ocupa las dos columnas de la derecha de la fila de arriba. */
.ac-razon-foto { display: none; }   /* en celular no existe: display:none y carga diferida, la foto ni se descarga */
@media (min-width: 1024px) {
  html body .ac-razones .grid {
    grid-template-columns: 5fr 3.5fr 3.5fr; gap: 1px !important; align-items: stretch;
    background: var(--ac-regla); background-clip: padding-box; border: 1px solid var(--ac-regla); border-radius: var(--ac-radio); overflow: hidden;
  }
  html body .ac-razones .ac-razon {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-start;
    padding: clamp(24px, 2.5vw, 32px) !important; background: var(--ac-tinte) !important; border: 0 !important; border-radius: 0 !important;
    min-width: 0;
  }
  html body .ac-razones .ac-razon:nth-child(1) { grid-column: 2 / 4; grid-row: 1; }
  html body .ac-razones .ac-razon:nth-child(2) { grid-column: 2; grid-row: 2; }
  html body .ac-razones .ac-razon:nth-child(3) { grid-column: 3; grid-row: 2; }
  html body .ac-razones .ac-razon:nth-child(4) { grid-column: 1; grid-row: 1 / 3; }
  html body .ac-razones .ac-razon > .relative.z-10 > .mb-6 { display: none !important; }   /* sin icono en caja (escritorio) */
  html body .ac-razones .ac-razon h3 { font-size: 1.5rem !important; line-height: 1.2 !important; font-weight: 600 !important;
    letter-spacing: -.018em; color: var(--ac-tinta) !important; margin: 0 0 12px !important; }
  html body .ac-razones .ac-razon p { font-size: var(--ac-t-lectura) !important; line-height: 1.5 !important; max-width: 46ch; color: var(--ac-cuerpo) !important; }
  /* Aura champan: solo en el tercio de abajo de cada tarjeta (elipse de 34 % de alto anclada al borde inferior); el texto
     (tinta 15.1:1, cuerpo 8.5:1 sobre el tinte) conserva mas de 7:1 encima de ella. */
  html body .ac-razones .ac-razon:not(.ac-razon-con-foto)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .85;
    background: radial-gradient(110% 34% at 50% 100%, rgba(236, 223, 196, .7), rgba(236, 223, 196, 0) 100%);
    transition: opacity 320ms var(--ac-sale);
  }
  /* La pieza alta: la sala de espera a todo el alto de la celda; velo de tinta solo en el tercio de abajo, donde va el texto. */
  html body .ac-razones .ac-razon-con-foto { justify-content: flex-end; background: var(--ac-hondo) !important; }
  .ac-razon-foto { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ac-hondo); }
  .ac-razon-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
    transition: transform 1100ms var(--ac-sale); }
  .ac-razon-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(30, 36, 67, .94) 0%, rgba(30, 36, 67, .9) 26%, rgba(30, 36, 67, .78) 38%, rgba(30, 36, 67, 0) 54%); }
  html body .ac-razones .ac-razon-con-foto h3 { color: #fff !important; }
  html body .ac-razones .ac-razon-con-foto p { color: #f3f5f9 !important; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html body .ac-razones .ac-razon:not(.ac-razon-con-foto):hover::before { opacity: 1; }
  .ac-razon-con-foto:hover .ac-razon-foto img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-razon-foto img { transition: none; }
  .ac-razon-con-foto:hover .ac-razon-foto img { transform: none; }
}

/* ---- 2. Sintomas del inicio ------------------------------------------------------------------------------------------------
   Antes: fila de 1070 px con foto de 192 x 144, texto de 635 px y ~230 px vacios a la derecha. Ahora tres columnas: foto de
   320 x 240, texto a 60ch y "Ver mas" a la derecha, centrado en vertical; la fila entera es un enlace (el ::before del enlace
   cubre la fila: funciona sin JS y con teclado). Las fotos de origen miden 760 x 420: a 320 x 240 (recorte 4:3 de 560 x 420) la
   original se reduce en pantallas 1x y se amplia 1.14 en 2x; una version de 640 px de ancho (640 x 353) se ampliaria 1.36, asi
   que se sirve la original. */
@media (min-width: 1024px) {
  html body .ac-sintomas .space-y-4 > div { cursor: pointer; }
  html body .ac-sintomas .space-y-4 > div > .flex {
    position: static; display: grid !important; grid-template-columns: 320px minmax(0, 60ch) minmax(max-content, 1fr);
    align-items: center; column-gap: 40px; row-gap: 0; min-height: 0; padding-left: 0;
  }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:first-child {
    position: static; translate: none; width: 320px !important; height: 240px !important; overflow: hidden;
  }
  .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:first-child img { transition: transform 700ms var(--ac-sale); }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-grow { flex-grow: 0 !important; width: auto !important; max-width: 60ch; }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-grow > p { margin-bottom: 0 !important; }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:last-child { width: auto !important; margin: 0; justify-self: end; align-self: center; }
  html body .ac-sintomas h3 { font-size: 1.5rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  html body .ac-sintomas .space-y-4 > div > .flex a.ver-mas-sintoma { padding: 12px 0 !important; font-size: var(--ac-t-lectura) !important; line-height: 1.5 !important; }
  .ac-sintomas a.ver-mas-sintoma::before { content: ""; position: absolute; inset: 0; z-index: 3; }   /* enlace estirado: la fila es relative */
  .ac-sintomas a.ver-mas-sintoma::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform 160ms var(--ac-sale); }
  .ac-sintomas a.ver-mas-sintoma:focus-visible { outline: 0; }
  .ac-sintomas .space-y-4 > div:has(a.ver-mas-sintoma:focus-visible) { outline: 2px solid var(--ac-navy); outline-offset: 3px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ac-sintomas .space-y-4 > div:hover .flex-shrink-0:first-child img { transform: scale(1.03); }
  .ac-sintomas .space-y-4 > div:hover a.ver-mas-sintoma::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:first-child img, .ac-sintomas a.ver-mas-sintoma::after { transition: none; }
  .ac-sintomas .space-y-4 > div:hover .flex-shrink-0:first-child img, .ac-sintomas .space-y-4 > div:hover a.ver-mas-sintoma::after { transform: none; }
}

/* ---- 3. Puntos del carrusel del hero: 24 px de paso (WCAG 2.5.8) -------------------------------------------------------------
   Con el paso de 18 px (8 de punto + 10 de espacio) las areas de toque de 24 px se montaban 6 px. El espacio sube a 16 px:
   paso de 24, sin cambiar el tamano visible de ningun punto (8 px; el activo 22). La pausa queda 6 px mas lejos, sin montarse. */
@media (min-width: 1024px) {
  .ac-carrusel-control { gap: 16px; }
}

/* ======================================================================================================
   DECIMA PASADA (tanda A3: contacto y lectura, escritorio). Todo vive desde 1024 px; el celular no cambia (0 px medidos).
     1  Contacto: la ubicacion (direccion, horario, urgencias y el mapa) justo despues de los canales
     2  Renglones de lectura de 66 a 70 caracteres (ficha del medico y aviso de privacidad)
     3  Aviso de privacidad: columna de ~720 px centrada, con su titulo a la misma x
     4  Nuestro equipo: el parrafo de entrada al eje izquierdo, alineado con el titulo
   ====================================================================================================== */

/* ---- 2. Medida de lectura ---------------------------------------------------------------------------------------------------
   Medido (17 px Wix Madefor Text): 1 ch = 10.9 px pero un renglon de texto corrido promedia 8.4 px por caracter, asi que el tope
   de 66ch de la sexta pasada daba 85 a 94 caracteres por renglon. 52ch (566 px) da ~67 de media y 70 de maximo. */
:root { --ac-renglon: 52ch; }

@media (min-width: 1024px) {
  /* ---- 1. Contacto: ubicacion despues de los canales ---------------------------------------------------------------------------
     El mapa es el ultimo hijo del <body> (despues de seguros y preguntas frecuentes; y 2698 de 4687 px a 1280). Para subirlo sin
     duplicar el iframe ni tocar el orden del documento (el celular conserva el suyo), el <body> de esta pagina pasa a ser una rejilla
     flexible de renglones: cada hijo ocupa su renglon completo, salvo la pila de direccion/horario/urgencias y el mapa, que comparten
     el suyo. Los dos hijos de .ac-contacto suben a hijos del body con display: contents. La cabecera sigue fija (en una rejilla CSS
     perderia el sticky: su bloque contenedor seria su celda; en flex es el body). El orden: cabecera, banner y canales (0), pila de
     ubicacion (0), mapa (1), lo demas (2). */
  body:has(.ac-contacto) {
    --ac-eje: min(var(--ac-ancho), calc(100% - 2 * var(--ac-margen)));   /* % del ancho del body, en el elemento que lo usa */
    --ac-mapa-ancho: min(520px, calc(var(--ac-eje) * .465));
    display: flex; flex-wrap: wrap; align-content: flex-start;
  }
  body:has(.ac-contacto) > * { flex: 0 0 100%; order: 2; min-width: 0; }
  body:has(.ac-contacto) > :is(noscript, header, .ac-banner) { order: 0; }
  .ac-contacto { display: contents; }

  /* los canales ocupan el renglon entero (si midieran solo el eje, la pila de ubicacion cabria en su mismo renglon); el eje se logra con
     relleno y la regla de pelo se dibuja como fondo del ancho del eje */
  .ac-canales { flex: 0 0 100%; margin: 48px 0 0; padding: 0 calc((100% - var(--ac-eje)) / 2); border-bottom: 0;
    background: linear-gradient(var(--ac-regla), var(--ac-regla)) bottom center / var(--ac-eje) 1px no-repeat; }
  .ac-contacto .space-y-8 { flex: 1 1 0; min-width: 0; margin: 0 0 72px calc((100% - var(--ac-eje)) / 2); padding: 56px 56px 0 0; align-self: flex-start; }
  body:has(.ac-contacto) > .ac-mapa {
    order: 1; flex: 0 0 var(--ac-mapa-ancho); height: 520px; align-self: flex-start;
    margin: 56px calc((100% - var(--ac-eje)) / 2) 72px 0; padding: 0; overflow: hidden;
    border: 1px solid var(--ac-regla); border-radius: var(--ac-radio); background: var(--ac-tinte);
  }
  .ac-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

  /* Renglones: icono de linea fina de 24 px (mascara, en el color del token), rotulo y dato; reglas de pelo entre renglones */
  .ac-contacto .grid > .bg-white.rounded-lg.border::before {
    content: ""; position: absolute; left: 0; top: 22px; width: 24px; height: 24px; background: var(--ac-oro-grande);
    -webkit-mask: var(--ac-icono) center / contain no-repeat; mask: var(--ac-icono) center / contain no-repeat;
  }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(2)::before { top: 0; }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(2) { --ac-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(3) { --ac-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(1) { --ac-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5z'/%3E%3Cpath d='M12 10v4.2M12 17v.01'/%3E%3C/svg%3E"); }
  .ac-contacto .grid > .bg-white.rounded-lg.border:nth-child(1)::before { background: var(--ac-alerta); }   /* el unico color con significado: urgencias */
  .ac-contacto .grid .space-y-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
  .ac-contacto .grid .space-y-2 > * { margin: 0 !important; }
  .ac-contacto .grid .aviso-emergencia { margin-top: 14px; }

  /* "Como llegar": enlace de texto con la flecha suelta que avanza (160 ms) */
  html body .ac-contacto .ac-como-llegar {
    display: inline-block; margin-top: 8px; padding: 6px 0; color: var(--ac-tinta);
    font-size: var(--ac-t-lectura); font-weight: 600; line-height: 1.5; text-decoration: underline;
    text-decoration-color: var(--ac-regla-fuerte); text-decoration-thickness: 1px; text-underline-offset: 5px;
    transition: text-decoration-color 320ms var(--ac-sale);
  }
  .ac-como-llegar::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform 160ms var(--ac-sale); }
  .ac-como-llegar:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 3px; border-radius: 4px; }

  /* ---- 2. y 3. Lectura: medida de 66 a 70 caracteres ------------------------------------------------------------------------ */
  html body :is(.ac-medico-parrafo, .ac-intro p), html body .ac-ficha.legal :is(p, ul, ol, aside) { max-width: var(--ac-renglon); }

  /* ---- 3. Aviso de privacidad: columna de ~720 px centrada, con su titulo a la misma x -------------------------------------------- */
  /* Fallo que lo motivo: la sexta pasada la dejo al eje izquierdo con `margin-left: 0 !important; max-width: 760px !important` (x 80 a 840 a 1280, 360 px vacios a
     la derecha); esa regla (retirada) pisaba el mx-auto de la plantilla. El titulo del banner se coloca en la misma x que el borde de la columna. */
  .ac-ficha.legal { margin-left: auto !important; margin-right: auto !important; max-width: 720px !important; padding: 40px 72px !important; }
  .ac-banner:has(+ main .legal) .container > .grid { max-width: 720px; margin-left: auto; margin-right: auto; }

  /* ---- 4. Nuestro equipo: parrafo de entrada al eje de 80 px, a la altura del titulo ---------------------------------------------- */
  .ac-intro { max-width: calc(var(--ac-ancho) + 2 * var(--ac-margen)); margin: 0 auto; padding-left: var(--ac-margen); padding-right: var(--ac-margen); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ac-como-llegar:hover { text-decoration-color: var(--ac-navy); }
  .ac-como-llegar:hover::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-como-llegar, .ac-como-llegar::after { transition: none; }
  .ac-como-llegar:hover::after { transform: none; }
}

/* ======================================================================================================
   UNDECIMA PASADA (tanda A4: interiores y cierre del escritorio). La pieza 1 (miniaturas) no es de CSS: vive en
   plantillas/medico.html y home/gallery/mini/. Piezas 2 a 4 solo desde 1024 px; el celular no cambia (0 px medidos).
     2  Caja del widget de Doctoralia: su marco solo existe cuando el iframe disparo `load`
     3  Renglones de las fichas de enfermedades, servicios y sintomas: 52ch (--ac-renglon), como la ficha del medico
     4  Flotante "Agendar" de 1024 a 1223 px: circulo de 44 px a 8 px del borde y margen derecho de 52 px en el contenido
   ====================================================================================================== */

@media (min-width: 1024px) {
  /* ---- 2. Caja del widget de Doctoralia --------------------------------------------------------------------------------------
     Medido antes (1280): la caja medía 380 px con su borde y su fondo blanco aunque el iframe no cargara (script bloqueado, sin red)
     o solo mostrara el "403 ERROR" crudo. Ahora el marco (borde, fondo, alto minimo de 380 px y relleno) solo aparece cuando
     assets/aircare-2.js ve `load` en el iframe y pone `ac-widget-listo`; antes, la caja no ocupa espacio ni se enfoca (visibility) y
     quedan las acciones de arriba. El iframe sigue montado con su ancho (el script de Doctoralia lo mide) y carga igual. */
  .doctoralia-widget-container { transition: opacity 320ms var(--ac-sale); }
  .doctoralia-widget-container:not(.ac-widget-listo) {
    min-height: 0; max-height: 0; padding: 0; border-width: 0; background: transparent; opacity: 0; visibility: hidden;
  }

  .ac-agendar-medico:has(+ .doctoralia-widget-container:not(.ac-widget-listo)) { margin-bottom: 0; }   /* sin caja debajo, sin los 28 px de separacion */

  /* ---- 3. Renglones de las fichas de enfermedades, servicios y sintomas ---------------------------------------------------------
     Medido antes (17 px, 1280): 85 caracteres por renglon como maximo (media 73) porque max-width era 66ch. 52ch (566 px) es la
     medida de la ficha del medico y da ~66. Mismo tamano de letra. Las listas, el recuadro de urgencias y la entrada de la ficha
     (resumen / descripcion) toman la misma medida; el recuadro de urgencias se ajusta a ella mas su relleno (24 + 24). */
  html body .ac-ficha :is(p, ul, ol, aside) { max-width: var(--ac-renglon); }
  html body .ac-ficha .ac-resumen, html body .ac-ficha:has(> .ac-resumen-vacio) > section:first-of-type p { max-width: var(--ac-renglon) !important; }
  html body .ac-ficha .signos-alarma { max-width: calc(var(--ac-renglon) + 48px); }
}

/* ---- 4. Flotante "Agendar" de 1024 a 1223 px -------------------------------------------------------------------------------
   Medido antes: el circulo de 48 px a 16 px del borde ocupaba x W-64 a W-16 y el contenido llegaba a W-40: invadia 24 px a 1024,
   1100 y 1200 (y hasta 1247 px de ancho, donde el eje de 1120 px ya deja 64 px libres). Ahora el circulo mide 44 px y esta a 8 px
   (vive en la octava pasada: --ac-circulo y --ac-agendar-d) y, en ese rango, el margen del eje sube de 40 a 52 px: el circulo ocupa
   x W-52 a W-8 y el contenido termina en W-52, sin tocarse. A 1224 el eje de 1120 px ya cabe con 52 px a cada lado: no hay salto. */
@media (min-width: 1024px) and (max-width: 1223.98px) {
  :root { --ac-margen: 52px; }
  /* "Comprometidos con la calidad" no usaba el eje: su relleno era de 16 px, asi que su lista llegaba a W-16 (y el texto de su
     vigencia a W-40) hasta 1199 px; ahora el mismo margen del eje que las demas secciones (desde 1200 px no cambia: el marco de 1120 px ya esta centrado). */
  .ac-calidad { padding-left: var(--ac-margen); padding-right: var(--ac-margen); }
}

/* ======================================================================================================
   DUODECIMA PASADA (2026-10-19, decision del Dr. Lara): aire en las paginas interiores y columnas sin hueco (escritorio).
   Fallo que la motivo: con el Dr. viendo el escritorio terminado, "siento que blanquea los fondos de las secciones y ya
   no hay acentos o dinamismo al desplazarse" y "los textos ahora estan todo alineado a la izquierda, muy mal". Las
   interiores (fichas, listados, medico, equipo, contacto, aviso) eran blanco plano de lado a lado, y las tandas A3/A4
   acortaron los renglones a 52ch al eje izquierdo, dejando 150 a 400 px vacios a la derecha. Eligio, entre tres maquetas,
   auras difuminadas que derivan al desplazarse + las ondas del inicio (Dr. Tolentino) en los cambios de seccion,
   "pero mejora el diseno de las ondas". El inicio NO cambia: sus corrientes son las del Dr. Tolentino, tal cual.
   Todo vive en @media (min-width: 1024px): el celular no cambia ni un pixel.
   ====================================================================================================== */
.ac-aire { display: none; }
@media (min-width: 1024px) {
  /* ---- 1. Auras: dos luces grandes y difuminadas detras de todo (azul de marca arriba a la derecha, champan abajo a la
     izquierda). Solo en interiores: el inicio se reconoce por su .ac-hero. Las fichas de lectura siguen blancas encima. */
  body:not(:has(.ac-hero)) { background: #f5f7fb !important; }
  body:not(:has(.ac-hero))::before, body:not(:has(.ac-hero))::after {
    content: ""; position: fixed; z-index: -2; pointer-events: none; border-radius: 50%; will-change: transform; }
  /* Caida en cinco pasos (no en dos): con dos, el centro se leia como una mancha de borde marcado (captura del 19-oct). */
  body:not(:has(.ac-hero))::before { width: 96vw; height: 120vh; top: -40vh; right: -36vw;
    background: radial-gradient(closest-side, rgba(132, 154, 232, .34), rgba(132, 154, 232, .25) 25%, rgba(140, 160, 232, .13) 52%,
                rgba(150, 170, 235, .045) 76%, rgba(150, 170, 235, 0)); }
  body:not(:has(.ac-hero))::after { width: 84vw; height: 110vh; bottom: -48vh; left: -34vw;
    background: radial-gradient(closest-side, rgba(232, 204, 152, .44), rgba(232, 204, 152, .32) 25%, rgba(236, 214, 172, .16) 52%,
                rgba(240, 224, 194, .055) 76%, rgba(240, 224, 194, 0)); }
  /* Dinamismo al desplazarse: las luces cruzan la pantalla en sentidos opuestos a lo largo de la pagina. Sin soporte de
     animation-timeline se quedan quietas (mismo aspecto); "reducir movimiento" las deja quietas. */
  @supports (animation-timeline: scroll()) {
    body:not(:has(.ac-hero))::before { animation: ac-aura-azul linear both; animation-timeline: scroll(root); }
    body:not(:has(.ac-hero))::after { animation: ac-aura-oro linear both; animation-timeline: scroll(root); }
  }
  @keyframes ac-aura-azul { to { transform: translate3d(-24vw, 38vh, 0) scale(1.08); } }
  @keyframes ac-aura-oro { to { transform: translate3d(26vw, -34vh, 0) scale(.94); } }

  /* Lo que pintaba el blanco (o el gris) de lado a lado se vuelve transparente; las fichas y tarjetas conservan su blanco. */
  body:not(:has(.ac-hero)) :is(.min-h-screen.bg-white, main.bg-white, main > .bg-gray-50, main section.bg-white,
    main > div > .bg-gray-50, .ac-intro) { background-color: transparent !important; }
  body:not(:has(.ac-hero)) .ac-ficha:not(.legal), body:not(:has(.ac-hero)) .ac-lateral { background: #fff !important; }
  body:not(:has(.ac-hero)) .ac-ficha:not(.legal) { box-shadow: 0 1px 2px rgba(30, 36, 67, .04), 0 22px 48px -28px rgba(30, 36, 67, .28) !important; }

  /* ---- 2. Cinta de hilos de aire de las interiores (JS aireInterior): dos lienzos fijos en la ventana con el mismo
     dibujo; el de atras queda bajo encabezado, fichas y tarjetas, el de adelante pinta la mitad de la cinta encima de
     ellas (solo en su margen vacio). Ninguno pinta sobre texto: el JS recorta cada titulo, parrafo, lista e imagen. */
  .ac-aire { display: block; position: fixed; top: 0; left: 0; pointer-events: none; }
  .ac-aire-atras { z-index: -1; }
  .ac-aire-frente { z-index: 20; }     /* encima de fichas y tarjetas; la cabecera fija y los flotantes siguen arriba */

  /* ---- 3. Columnas sin hueco a la derecha ---------------------------------------------------------------------------- */
  /* Nuestro equipo: la entrada en dos columnas (lo principal a la izquierda con hilo dorado, el contexto a la derecha
     con hilo gris) en lugar de un parrafo de 52ch con 560 px vacios a su lado. */
  html body .ac-intro { display: grid; grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: start; }
  html body .ac-intro p { max-width: none !important; margin: 0; padding-top: 18px; border-top: 1px solid var(--ac-regla); }
  html body .ac-intro p:first-child { border-top-color: var(--ac-oro); }
  /* Fichas de enfermedades, servicios y sintomas: el texto llena la ficha. Con 56 px de relleno quedan ~620 px de
     renglon (unos 72 caracteres a 17 px), sin el hueco de 100 px a la derecha que dejaba el tope de 52ch. */
  html body .ac-ficha:not(.legal) { padding: 44px 56px !important; }
  html body .ac-ficha:not(.legal) :is(p, ul, ol, aside), html body .ac-ficha .ac-resumen,
  html body .ac-ficha:has(> .ac-resumen-vacio) > section:first-of-type p { max-width: none !important; }
  /* Ficha del medico: foto mas grande (5 de 12) y el texto llena su columna (~610 px), sin 165 px vacios a la derecha. */
  .ac-medico-ficha > .grid:first-child { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; }
  .ac-medico-ficha > .grid:first-child > * { grid-column: auto !important; }
  html body .ac-medico-parrafo { max-width: none !important; }
  /* Botones de agenda del medico centrados cuando el widget de Doctoralia no carga */
  .ac-agendar-medico { justify-content: center; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  body:not(:has(.ac-hero))::before, body:not(:has(.ac-hero))::after { animation: none !important; }
}

/* ======================================================================================================
   PRIMERA PASADA DE CELULAR (M1, 2026-10-20, decision del Dr. Lara tras aprobar el escritorio): defectos y piso, la forma no cambia.
   Todo vive en @media (max-width: 1023.98px): de 1024 px en adelante no cambia ni un pixel (medido contra el commit anterior).
     1  Letra de lectura de 16 px donde hoy es menor (razones del inicio, listado de servicios, ficha del medico)
     2  Cabecera opaca (a .96 se adivinaba el texto que pasaba detras)
     3  Flotantes de la clinica (llamar, WhatsApp, Doctoralia y subir): mismos lugares, tamanos y colores; solo cambia CUANDO se ven
   El srcset de las fotos vive en las plantillas (herramientas/fotos-chicas.py crea los archivos).
   ====================================================================================================== */
@media (max-width: 1023.98px) {
  /* ---- 1. Letra de 16 px. Fallo que lo motivo (inspeccion a 375, 390 y 412): 67 % del texto corrido del inicio, 82 % del listado
     de servicios y 89 % de la ficha del medico iban bajo 16 px (15.6, 14 y 14). Interlineado 1.5 (cuerpo, estilo-william). El
     listado se corta a 3 renglones y no a 2: a 16 px los mismos 2 renglones esconderian mas texto del que ya escondian a 14. */
  .ac-razon p { font-size: 1rem !important; line-height: 1.5 !important; }
  html body .ac-listado .bg-white.rounded-2xl p { font-size: 1rem; line-height: 1.5; -webkit-line-clamp: 3; line-clamp: 3; }
  html body .ac-medico-ficha :is(.ac-medico-parrafo, p.text-sm) { font-size: 1rem; line-height: 1.5; }

  /* ---- 2. Cabecera opaca. Fallo que lo motivo: el fondo calculado de la cabecera en el telefono era rgba(255,255,255,.96) y
     por detras se adivinaba el texto al bajar; el blanco pleno que ya tenia el escritorio pasa tambien al telefono. */
  .ac-cabecera { background-color: #fff !important; }

  /* ---- 3. Flotantes. Fallo que lo motivo: los tres circulos (36 px, a 24 px del borde, 12 px entre ellos) tapaban texto y
     enlaces en 39 de 40 corridas (1 a 14 elementos por pagina). Son de la clinica (Dr. Tolentino): se quedan los tres, con su
     simetria de 24 y 12 px, tamano y colores. Solo cambia cuando se ven (assets/aircare-2.js, flotantesMovil):
       al bajar se retiran (deslizan hacia el borde y se desvanecen, 200 ms); al subir, o 700 ms despues de parar, vuelven,
       siempre (no se esconden por haber texto debajo); en la ultima pantalla quedan; "subir" solo despues de dos pantallas
       (la clase ac-subir que subirVisible ya pone en <html>). Solo opacidad y translate: nada de layout.
     La caja fija (36 x 108 px) deja pasar los toques por los huecos entre botones: cada boton recupera los suyos. */
  html.ac-js footer div.fixed.bottom-4.right-4 { pointer-events: none; }
  html.ac-js footer div.fixed.bottom-4.right-4 > button,
  html.ac-js footer div.fixed.bottom-4.right-4 > a.ac-flotante-doctoralia,
  html.ac-js footer div.fixed.bottom-4.right-4 > a > button {
    pointer-events: auto; opacity: 1; visibility: visible; translate: 0 0;
    transition: opacity .32s var(--ac-sale), translate .32s var(--ac-sale), scale .3s var(--ac-sale), transform .2s var(--ac-sale), visibility 0s linear 0s;
  }
  html.ac-js.ac-flotantes-fuera footer div.fixed.bottom-4.right-4 > button,
  html.ac-js.ac-flotantes-fuera footer div.fixed.bottom-4.right-4 > a.ac-flotante-doctoralia,
  html.ac-js.ac-flotantes-fuera footer div.fixed.bottom-4.right-4 > a > button,
  html.ac-js:not(.ac-subir) footer div.fixed.bottom-4.right-4 > button {
    pointer-events: none; opacity: 0; visibility: hidden; translate: 60px 0;
    transition: opacity .2s var(--ac-sale), translate .2s var(--ac-sale), scale .3s var(--ac-sale), transform .2s var(--ac-sale), visibility 0s linear .2s;
  }
  /* "subir" aun no toca (menos de dos pantallas): sin desliz lateral, solo se desvanece sobre su lugar */
  html.ac-js:not(.ac-subir) footer div.fixed.bottom-4.right-4 > button { translate: 0 0; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  /* sin animacion: aparecen y desaparecen al instante */
  html.ac-js footer div.fixed.bottom-4.right-4 > button,
  html.ac-js footer div.fixed.bottom-4.right-4 > a.ac-flotante-doctoralia,
  html.ac-js footer div.fixed.bottom-4.right-4 > a > button { transition: none !important; }
}

/* ======================================================================================================
   SEGUNDA PASADA DE CELULAR (M2, 2026-10-20): el inicio compacto. Ningun texto cambia: solo forma y acomodo.
   Todo vive en @media (max-width: 1023.98px); de 1024 px en adelante no cambia ni un pixel (medido contra el commit anterior).
   Fallo que lo motivo: el inicio medía 25.3 pantallas a 375 x 667 (31.1 con "reducir movimiento", porque las 18 opiniones se
   apilaban): equipo, servicios, enfermedades y sintomas iban uno debajo de otro, igual que en el sitio de la agencia.
   Una forma por mensaje y dos vecinas nunca iguales (regla 24 de estilo-william):
     razones        renglones con regla fina, sin icono en caja (como en escritorio)
     equipo         carrusel con anclaje y puntos de 44 px; la siguiente ficha asoma ~14 %
     servicios      fila de pestanas que se desliza, una sola linea
     opiniones      pastilla 5.0 y carrusel de una opinion con la siguiente asomando (tambien con "reducir movimiento")
     enfermedades   una sola ficha de seis renglones con flecha
     sintomas       filas con foto de 104 x 78 y el texto a la derecha
     pie            tres columnas plegadas en <details>; pagos 2 x 2; la franja legal NO se pliega
   M2b (2026-10-20, el Dr. Lara tras verlo en vivo): razones en carrusel de tarjetas con icono de linea, sintomas en tarjetas con la foto de
   fondo y pestanas de servicios con desvanecido, flechas y deslizamiento de muestra; las opiniones pasan (JS) antes de la banda del seguro.
   Movimiento: salida --ac-sale, 160 / 320 ms; solo transform, opacity y color; nada de scale(0); "reducir movimiento" quita los
   desplazamientos suaves (el carrusel sigue deslizandose a mano). El JS vive en assets/aircare-2.js (desliza, pestanasMovil,
   pieColumnas); sin el, todo sigue siendo deslizable y las columnas del pie quedan abiertas.
   ====================================================================================================== */
.ac-desliza-ctl { display: none; }   /* el JS lo crea siempre; solo se pinta bajo 1024 px */
.ac-razon-linea, .ac-pestanas-flecha { display: none; }   /* M2b: icono de linea de cada razon y flechas de las pestanas, solo bajo 1024 px */
.ac-pestanas-marco { display: contents; }   /* M2b: en escritorio el marco no existe en el diseno: la fila de pestanas sigue siendo la celda de la rejilla */
@property --ac-fi { syntax: "<length>"; inherits: false; initial-value: 0px; }   /* desvanecido de las orillas de las pestanas (izquierda y derecha); se anima al cambiar */
@property --ac-fd { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ac-pie-col > .ac-pie-resumen { display: none; }   /* el titulo con enlace (h3) es el de escritorio; el <summary> es solo del celular */
@media (max-width: 1023.98px) {
  :root { --ac-m2-v: 46px; --ac-m2-eje: 16px; }

  /* ---- Ritmo: 46 px de aire arriba y abajo (eran 72; las corrientes de aire ocupan de -32 a +43 px alrededor de cada corte, asi que 46 las deja en el aire); los envoltorios internos con su propio relleno de 16 a 24 px, a cero arriba y abajo */
  html body :is(.ac-razones, .ac-sobre, .ac-equipo, .ac-servicios, .ac-opiniones, .ac-enfermedades, .ac-sintomas) {
    padding-top: var(--ac-m2-v) !important; padding-bottom: var(--ac-m2-v) !important;
  }
  html body :is(.ac-servicios, .ac-enfermedades, .ac-sintomas) > div { padding-top: 0 !important; padding-bottom: 0 !important; }
  html body .ac-servicios > div { padding-left: var(--ac-m2-eje); padding-right: var(--ac-m2-eje); }

  /* ---- 1. Razones (M2b; antes renglones entre reglas): carrusel con anclaje de una razon a la vez, la siguiente asoma ~14 %.
     Cada tarjeta: icono de linea dorado de 44 px SIN caja (la caja era senal de IA), titulo 20/600 y texto 16/1.5. El texto es el de la
     clinica, sin tocar. Puntos de 44 px (desliza, mas arriba). Quieto: sin autoplay. ---- */
  html body .ac-razones > .container > .text-center { margin-bottom: 20px !important; }
  html body .ac-razones .grid {
    display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 12px !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ac-m2-eje);
    overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--ac-m2-eje)); margin-right: calc(-1 * var(--ac-m2-eje));
    padding: 4px var(--ac-m2-eje) 6px;
  }
  html body .ac-razones .grid::-webkit-scrollbar { display: none; }
  html body .ac-razones .grid:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: -2px; border-radius: var(--ac-radio); }
  html body .ac-razones .ac-razon {
    flex: 0 0 min(78vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column;
    padding: 24px 22px 26px !important; background: #fff !important; border: 1px solid var(--ac-regla) !important;
    border-radius: var(--ac-radio) !important; box-shadow: none !important; transform: none !important;
  }
  html body .ac-razones .ac-razon > .relative.z-10 { display: flex; flex-direction: column; flex: 1 1 auto; }
  html body .ac-razones .ac-razon > .relative.z-10 > .mb-6 { display: none !important; }   /* el icono relleno de la agencia: en celular va el de linea */
  html body .ac-razones .ac-razon .ac-razon-linea { display: block; width: 44px; height: 44px; margin: 0 0 16px; flex: none; }
  html body .ac-razones .ac-razon h3 { font-size: 1.25rem !important; line-height: 1.25 !important; margin-bottom: 8px !important; }
  html body .ac-razones .ac-razon p { font-size: 1rem !important; line-height: 1.5 !important; }

  /* ---- 7. Sobre: parrafos a 16 / 1.5 (estaban a 17 / 1.75: tres renglones de mas por parrafo) ---- */
  html body .ac-sobre .grid.lg\:grid-cols-2 { gap: 28px !important; }
  html body .ac-sobre .mb-8 { margin-bottom: 20px !important; }
  html body .ac-sobre .mb-10 { margin-bottom: 0 !important; }
  html body .ac-sobre p { font-size: 1rem !important; line-height: 1.5 !important; }

  /* ---- Carruseles con anclaje (equipo, pestanas y opiniones): comparten el mismo oficio ---- */
  html body :is(.ac-equipo .grid, .opiniones-movil) {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ac-m2-eje);
    overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--ac-m2-eje)); margin-right: calc(-1 * var(--ac-m2-eje));
    padding-left: var(--ac-m2-eje); padding-right: var(--ac-m2-eje); position: relative;
  }
  html body :is(.ac-equipo .grid, .opiniones-movil)::-webkit-scrollbar { display: none; }
  html body :is(.ac-equipo .grid, .opiniones-movil):focus-visible { outline: 2px solid var(--ac-navy); outline-offset: -2px; border-radius: var(--ac-radio); }

  /* Puntos (equipo) y contador con flechas (opiniones). Los arma assets/aircare-2.js; objetivos de 44 px. Flechas sueltas, sin circulo. */
  html body .ac-desliza-ctl { display: flex; align-items: center; justify-content: center; margin-top: 4px; }
  .ac-desliza-punto, .ac-desliza-flecha {
    appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ac-pastilla); color: var(--ac-navy);
    -webkit-tap-highlight-color: transparent; transition: opacity .16s var(--ac-sale), background-color .16s var(--ac-sale);
  }
  .ac-desliza-punto::before { content: ""; width: 8px; height: 8px; border-radius: var(--ac-pastilla); background: rgba(58, 68, 109, .28);
    transition: width .32s var(--ac-sale), background-color .32s var(--ac-sale); }
  .ac-desliza-punto[aria-current="true"]::before { width: 24px; background: var(--ac-navy); }
  .ac-desliza-flecha svg { width: 20px; height: 20px; display: block; transition: transform .16s var(--ac-sale); }
  .ac-desliza-flecha:active svg { transform: translateX(var(--ac-flecha, 0)); }
  .ac-desliza-flecha[data-ac-dir="-1"] { --ac-flecha: -2px; }
  .ac-desliza-flecha[data-ac-dir="1"] { --ac-flecha: 2px; }
  .ac-desliza-flecha:disabled { opacity: .3; cursor: default; }
  .ac-desliza-punto:focus-visible, .ac-desliza-flecha:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 2px; }
  .ac-desliza-cuenta { min-width: 72px; text-align: center; font-weight: 600; font-size: 1rem; line-height: 1.5; color: var(--ac-tinta);
    font-variant-numeric: tabular-nums; }

  /* ---- 2. Equipo: carrusel; la ficha mide 78 % del ancho (tope 340 px) y la siguiente asoma ~14 % ---- */
  html body .ac-equipo .grid {
    display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 12px !important;
    padding-top: 4px; padding-bottom: 8px;
  }
  html body .ac-equipo .grid > .ac-medico-tarjeta { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
  html body .ac-equipo .text-center.mb-8 { margin-bottom: 16px !important; }
  html body .ac-equipo .text-center .mb-4 { margin-bottom: 8px !important; }
  html body .ac-medico-tarjeta { transition: transform .16s var(--ac-sale) !important; }
  html body .ac-medico-tarjeta:hover { transform: none !important; box-shadow: none !important; }
  html body .ac-medico-tarjeta:active { transform: scale(.985) !important; }
  html body .ac-medico-tarjeta:focus-within { outline: 2px solid var(--ac-navy); outline-offset: 3px; }
  /* la capa de cedulas y "Ver mas" que sitio.js muestra al tocar: con el foco dentro del boton tambien se ve */
  html body .ac-medico-tarjeta:focus-within > .bg-mcolor2 { opacity: 1 !important; pointer-events: auto !important; }

  /* ---- 3. Servicios: pestanas en una sola linea que se desliza (48 px; la activa en --ac-navy) ---- */
  html body .ac-servicios .flex.justify-start.mb-6 { display: none; }   /* "Servicios" sobre "Servicios y estudios...": repetia el titulo (igual que en escritorio) */
  html body .ac-servicios .text-start.mb-8 { margin-bottom: 20px; }
  html body .ac-servicios .grid.lg\:grid-cols-2 { gap: 16px !important; margin-bottom: 20px !important; }
  /* M2b (el Dr.: "los chips se cortan y no se entiende que se puede hacer scroll lateral"): el marco lleva las flechas de 44 px;
     la fila tiene aire de 16 px al inicio y al final, anclaje al CENTRO (la activa queda centrada y completa), desvanecido en la orilla
     por donde hay mas pestanas (el JS pone ac-borde-izq / ac-borde-der segun el desplazamiento) y la siguiente asoma ~60 px. */
  html body .ac-servicios .ac-pestanas-marco { display: block; position: relative; margin-left: calc(-1 * var(--ac-m2-eje)); margin-right: calc(-1 * var(--ac-m2-eje)); }
  html body .ac-servicios .space-y-4.flex.flex-col {
    flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ac-m2-eje);
    overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 6px var(--ac-m2-eje); margin: 0;   /* 6 px arriba y abajo: caben el anillo de foco de 2 px y su separacion */
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--ac-fi) * .62), #000 var(--ac-fi), #000 calc(100% - var(--ac-fd)), transparent calc(100% - var(--ac-fd) * .42), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--ac-fi) * .62), #000 var(--ac-fi), #000 calc(100% - var(--ac-fd)), transparent calc(100% - var(--ac-fd) * .42), transparent 100%);
    transition: --ac-fi .32s var(--ac-sale), --ac-fd .32s var(--ac-sale);
  }
  html body .ac-servicios .space-y-4.flex.flex-col::-webkit-scrollbar { display: none; }
  html body .ac-servicios .ac-pestanas-marco.ac-borde-izq > .space-y-4.flex.flex-col { --ac-fi: 52px; }
  html body .ac-servicios .ac-pestanas-marco.ac-borde-der > .space-y-4.flex.flex-col { --ac-fd: 52px; }
  html body .ac-servicios .ac-pestanas-flecha {
    appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
    position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--ac-pastilla); color: var(--ac-navy); -webkit-tap-highlight-color: transparent;
    opacity: 0; visibility: hidden; transition: opacity .16s var(--ac-sale), visibility 0s linear .16s;
  }
  html body .ac-servicios .ac-pestanas-flecha[data-ac-dir="-1"] { left: 0; --ac-flecha: -2px; }
  html body .ac-servicios .ac-pestanas-flecha[data-ac-dir="1"] { right: 0; --ac-flecha: 2px; }
  html body .ac-servicios .ac-pestanas-marco.ac-borde-izq > .ac-pestanas-flecha[data-ac-dir="-1"],
  html body .ac-servicios .ac-pestanas-marco.ac-borde-der > .ac-pestanas-flecha[data-ac-dir="1"] { opacity: 1; visibility: visible; transition-delay: 0s; }
  html body .ac-servicios .ac-pestanas-flecha svg { width: 20px; height: 20px; display: block; transition: transform .16s var(--ac-sale); }
  html body .ac-servicios .ac-pestanas-flecha:active svg { transform: translateX(var(--ac-flecha, 0)); }
  html body .ac-servicios .ac-pestanas-flecha[data-ac-dir="1"] svg { scale: -1 1; }   /* la misma flecha, volteada */
  html body .ac-servicios .ac-pestanas-flecha:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 2px; }
  html body .ac-servicios .space-y-4.flex.flex-col > button {
    flex: 0 0 auto; width: auto !important; min-height: 48px; margin: 0 !important; padding: 6px 18px 6px 8px !important;
    border-radius: var(--ac-pastilla) !important; scroll-snap-align: center;
    max-width: min(280px, 74vw);   /* la activa centrada deja 55 px a cada lado: ni el desvanecido (52 px) ni las flechas la tocan; las etiquetas largas pasan a dos renglones ("Tamizaje de cancer de pulmon en fumadores" medía 404 px y se cortaba por los dos lados) */
    transition: background-color .16s var(--ac-sale), border-color .16s var(--ac-sale), color .16s var(--ac-sale), transform .16s var(--ac-sale) !important;
  }
  html body .ac-servicios .space-y-4.flex.flex-col > button:active { transform: scale(.98); }
  html body .ac-servicios .space-y-4.flex.flex-col > button:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 2px; }
  html body .ac-servicios .space-y-4.flex.flex-col > button .gap-4 { gap: 10px; }
  html body .ac-servicios .space-y-4.flex.flex-col > button .gap-4 > div { flex: none; }   /* el circulo del icono no se achata cuando la etiqueta pasa a dos renglones */
  html body .ac-servicios .space-y-4.flex.flex-col > button span.font-medium { font-size: 1rem; line-height: 1.25; text-align: left; }
  html body .ac-servicios .space-y-6 > :not(:last-child) { margin-bottom: 12px !important; }
  html body .ac-servicios .space-y-6 > .relative.h-80 { height: auto !important; aspect-ratio: 16 / 10; box-shadow: none !important; }
  html body .ac-servicios .space-y-6 > .relative.h-80 img { padding: 0 !important; }
  html body .ac-servicios .space-y-6 > .p-6.rounded-2xl { padding: 0 !important; box-shadow: none !important; background: transparent !important; }
  html body .ac-servicios .space-y-6 p { font-size: 1rem !important; line-height: 1.5 !important; }

  /* ---- 4. Opiniones: pastilla 5.0 y carrusel de una opinion con la siguiente asomando. Quieto siempre: sin movimiento solo,
     asi con "reducir movimiento" tambien es un carrusel (antes se apilaban las 18: 4,737 px a 375). ---- */
  html body .ac-opiniones > .text-center.mb-12 { margin-bottom: 20px !important; }
  html body .ac-opiniones .opiniones-carrusel { display: none !important; }
  html body .ac-opiniones .opiniones-movil { display: block !important; height: auto !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html body .opiniones-movil .opiniones-col { overflow: visible; }
  html body .opiniones-movil .opiniones-pista { flex-direction: row; gap: 12px; width: max-content; animation: none !important; transform: none !important; }
  html body .opiniones-movil .opiniones-copia { display: none !important; }
  html body .opiniones-movil .opinion-tarjeta {
    flex: 0 0 min(80vw, 380px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 20px !important;
  }
  html body .opiniones-movil .opinion-pie { margin-top: auto; }
  html body .ac-opiniones .opinion-texto { font-size: 1rem !important; line-height: 1.5 !important; }
  html body .ac-opiniones .opinion-estrellas { font-size: 1rem !important; margin-bottom: 8px; }
  html body .ac-opiniones .opinion-meta { font-size: .875rem !important; line-height: 1.35 !important; }
  html body .ac-opiniones .testimonios-fuente { font-size: 1rem !important; line-height: 1.5 !important; margin-top: 12px !important; }
  /* la calificacion en pastilla (cifras de index.json -> calificacion; la linea de Google queda solo en escritorio) */
  html body .ac-opiniones .ac-calificacion {
    display: inline-flex; align-items: center; gap: 12px; position: relative; margin-top: 16px; padding: 8px 20px 8px 14px;
    background: #fff; border: 1px solid var(--ac-regla); border-radius: var(--ac-pastilla); text-align: left;
  }
  html body .ac-opiniones .ac-calificacion p { margin: 0; }
  html body .ac-opiniones .ac-calificacion-cifra { font-family: var(--ac-display); font-weight: 600; font-size: 1.75rem; line-height: 1; color: var(--ac-tinta); letter-spacing: -.02em; }
  html body .ac-opiniones .ac-calificacion-detalle { display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid var(--ac-regla-fuerte); }
  html body .ac-opiniones .ac-calificacion-estrellas { position: relative; font-size: 1rem; line-height: 1.2; letter-spacing: 2px; color: rgba(173, 144, 96, .24); }
  html body .ac-opiniones .ac-calificacion-relleno { position: absolute; left: 0; top: 0; color: var(--ac-oro); }
  html body .ac-opiniones .ac-calificacion-fuente a { color: var(--ac-tinta); font-size: .9375rem; line-height: 1.3; font-weight: 600; text-decoration: none; }
  html body .ac-opiniones .ac-calificacion-fuente a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ac-pastilla); }
  html body .ac-opiniones .ac-calificacion-fuente a:focus-visible { outline: 0; }
  html body .ac-opiniones .ac-calificacion:has(a:focus-visible) { outline: 2px solid var(--ac-navy); outline-offset: 3px; }
  html body .ac-opiniones .ac-calificacion-otra { display: none; }

  /* ---- 5. Enfermedades: UNA ficha de seis renglones (nombre, descripcion y flecha; regla fina; renglon entero clicable) ---- */
  html body .ac-enfermedades > div { padding-left: var(--ac-m2-eje); padding-right: var(--ac-m2-eje); }
  html body .ac-enfermedades .flex.flex-col.lg\:flex-row { gap: 12px; margin-bottom: 20px; }
  html body .ac-enfermedades .flex.flex-col.lg\:flex-row h2 { margin-bottom: 0 !important; }
  html body .ac-enfermedades h2 + p, html body .ac-enfermedades .lg\:max-w-md p { font-size: 1rem !important; line-height: 1.5 !important; }
  html body .ac-enfermedades .grid {
    display: block !important; margin-bottom: 24px !important; padding: 0 20px; background: #fff;
    border: 1px solid var(--ac-regla); border-radius: var(--ac-radio); overflow: hidden;
  }
  html body .ac-enfermedades .grid > div {
    display: block; position: relative; padding: 0; gap: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; transform: none !important; transition: background-color .16s var(--ac-sale) !important;
  }
  html body .ac-enfermedades .grid > div + div { border-top: 1px solid var(--ac-regla) !important; }
  html body .ac-enfermedades .grid > div > .absolute.inset-0 { display: none !important; }
  html body .ac-enfermedades .grid > div .relative.z-10 { padding: 16px 36px 16px 0 !important; }
  html body .ac-enfermedades .grid > div .relative.z-10 > .w-12 { display: none !important; }
  html body .ac-enfermedades .grid > div h3 { color: var(--ac-tinta) !important; font-size: 1.25rem !important; line-height: 1.25 !important; margin-bottom: 6px !important; }
  html body .ac-enfermedades .grid > div p { color: var(--ac-cuerpo) !important; font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; }
  /* Decision: bajo 768 px el renglon es el nombre y su flecha; la descripcion de 14 px sigue en el documento (lectores de pantalla y buscadores)
     pero no se pinta: es un resumen de una linea de lo que la pagina de la enfermedad abre en su primer parrafo, y seis descripciones
     de 3 renglones a 16 px costaban 480 px (1.9 pantallas la seccion). De 768 a 1023 px se pintan a 16 px. */
  html body .ac-enfermedades .grid > div .mt-4 { margin: 0 !important; padding: 0; opacity: 1 !important; }
  html body .ac-enfermedades .grid > div .mt-4 > a {
    position: static; display: block; padding: 0; margin: 0; font-size: 0; line-height: 0; color: var(--ac-navy) !important; text-decoration: none !important;
  }
  html body .ac-enfermedades .grid > div .mt-4 > a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
  html body .ac-enfermedades .grid > div .mt-4 > a::after {
    content: "\2192"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 1.25rem; line-height: 1;
    transition: transform .16s var(--ac-sale);
  }
  html body .ac-enfermedades .grid > div:active { background: var(--ac-tinte) !important; }
  html body .ac-enfermedades .grid > div:active .mt-4 > a::after { transform: translateX(3px); }
  html body .ac-enfermedades .grid > div:has(a:focus-visible) { outline: 2px solid var(--ac-navy); outline-offset: -2px; }
  html body .ac-enfermedades .grid > div .mt-4 > a:focus-visible { outline: 0; }

  /* ---- 6. Sintomas (M2b; antes filas con foto de 104 x 78): tarjetas apiladas con la foto de fondo (4:3; 16:9 desde 640 px), degradado
     oscuro de abajo hacia arriba y encima el titulo y la descripcion en blanco (16 px). La tarjeta entera es el enlace. Distintas de las
     razones (carrusel) que quedan lejos arriba y de las enfermedades (una ficha de renglones) que quedan justo antes. ---- */
  html body .ac-sintomas > div { padding-left: var(--ac-m2-eje); padding-right: var(--ac-m2-eje); }
  html body .ac-sintomas h2 { margin-bottom: 8px !important; }
  html body .ac-sintomas .space-y-4 { margin-bottom: 24px !important; display: grid; gap: 14px; }
  html body .ac-sintomas .space-y-4 > div {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3;
    margin: 0 !important; padding: 0 !important; background: var(--ac-hondo) !important; border: 0 !important;
    border-radius: var(--ac-radio) !important; box-shadow: none !important; overflow: hidden;
    transition: transform .16s var(--ac-sale);
  }
  html body .ac-sintomas .space-y-4 > div + div { border-top: 0 !important; }
  html body .ac-sintomas .space-y-4 > div > .flex { display: contents !important; }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:first-child {
    position: absolute; inset: 0; z-index: -2; width: auto !important; height: auto !important; border-radius: 0 !important; overflow: hidden; background: var(--ac-hondo) !important;
  }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:first-child img { object-position: 50% 28%; transition: transform .7s var(--ac-sale); }
  html body .ac-sintomas .space-y-4 > div::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgba(22, 27, 52, .9) 0%, rgba(22, 27, 52, .84) 34%, rgba(22, 27, 52, .66) 54%, rgba(22, 27, 52, .26) 76%, rgba(22, 27, 52, 0) 100%);
  }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-grow { flex-grow: 0; width: auto !important; min-width: 0; padding: 20px 20px 22px; position: relative; }
  html body .ac-sintomas h3 { font-size: 1.25rem !important; line-height: 1.25 !important; margin-bottom: 6px !important; color: #fff !important; }
  html body .ac-sintomas h3::after { content: " \2192"; color: var(--ac-oro-claro); }
  html body .ac-sintomas .space-y-4 p { font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; color: #fff !important; }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:last-child { position: static; width: 0 !important; height: 0; overflow: visible; }
  html body .ac-sintomas a.ver-mas-sintoma {
    position: absolute; inset: 0; z-index: 2; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important;
    font-size: 0; line-height: 0; color: transparent !important; overflow: hidden; border-radius: 0;
  }
  html body .ac-sintomas a.ver-mas-sintoma::after { content: none; }
  html body .ac-sintomas .space-y-4 > div:active { transform: scale(.985); }
  html body .ac-sintomas .space-y-4 > div:has(a.ver-mas-sintoma:focus-visible) { outline: 2px solid var(--ac-navy); outline-offset: 3px; }
  html body .ac-sintomas a.ver-mas-sintoma:focus-visible { outline: 0; }
  @media (hover: hover) and (pointer: fine) {
    html body .ac-sintomas .space-y-4 > div:hover > .flex > .flex-shrink-0:first-child img { transform: scale(1.03); }
  }

  /* ---- 8. Pie: las tres columnas se pliegan en <details> (cerradas por el JS; abiertas sin JS); la franja legal NO se pliega ---- */
  html body .ac-pie > .container { padding-top: 32px !important; padding-bottom: 8px !important; }
  html body .ac-pie .grid.lg\:grid-cols-3.items-start { gap: 0 !important; }
  html body .ac-pie .lg\:col-span-1.space-y-6 { padding-bottom: 20px; }
  html body .ac-pie .lg\:col-span-2.grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  html body .ac-pie .ac-pie-col { border-top: 1px solid rgba(255, 255, 255, .14); }
  html body .ac-pie .ac-pie-col > .ac-pie-resumen {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 6px 0; margin: 0 !important;
    list-style: none; cursor: pointer; color: var(--ac-oro-claro); font-weight: 600; font-size: 1rem; line-height: 1.35;
    -webkit-tap-highlight-color: transparent; transition: color .16s var(--ac-sale);
  }
  html body .ac-pie .ac-pie-col > .ac-pie-resumen::-webkit-details-marker { display: none; }
  html body .ac-pie .ac-pie-col > .ac-pie-resumen::after {
    content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
    background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
    transition: transform .32s var(--ac-sale);
  }
  html body .ac-pie .ac-pie-col[open] > .ac-pie-resumen::after { transform: rotate(45deg); }
  html body .ac-pie .ac-pie-col > .ac-pie-resumen:focus-visible { outline: 2px solid var(--ac-oro-claro); outline-offset: 2px; border-radius: var(--ac-radio-chico); }
  html body .ac-pie .ac-pie-col > h3 { display: none; }
  html body .ac-pie .ac-pie-col > ul { margin: 0; padding: 0 0 12px; }
  html body .ac-pie .ac-pie-col > ul > li { margin: 0 !important; }
  html body .ac-pie .ac-pie-col > ul > li > a { min-height: 44px; align-items: center; font-size: 1rem !important; line-height: 1.4 !important; }
  html body .ac-pie .border-t.pt-8.mt-8 { margin-top: 20px; padding-top: 20px; }
  /* altura suave del plegable donde el navegador sabe animar ::details-content (Chromium 131+); en los demas se abre al instante */
  @supports (interpolate-size: allow-keywords) {
    html body .ac-pie .ac-pie-col { interpolate-size: allow-keywords; }
    html body .ac-pie .ac-pie-col::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ac-sale), content-visibility .32s allow-discrete; }
    html body .ac-pie .ac-pie-col[open]::details-content { block-size: auto; }
  }

  /* ---- Metodos de pago: 2 x 2 (solo bajo 640 px, donde existe la lista de una columna) ---- */
  html body .ac-pagos .grid.sm\:hidden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html body .ac-pagos .grid.sm\:hidden > div > .flex {
    flex-direction: column; justify-content: center; text-align: center; gap: 8px; height: 100%; padding: 14px 8px; min-height: 104px;
  }
  html body .ac-pagos .grid.sm\:hidden img { width: 40px; height: 40px; }
  html body .ac-pagos .grid.sm\:hidden h3 { flex: none; font-size: 1rem !important; line-height: 1.3 !important; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .ac-desliza-punto::before, .ac-desliza-flecha, .ac-desliza-flecha svg,
  html body .ac-pie .ac-pie-col > .ac-pie-resumen::after, html body .ac-pie .ac-pie-col::details-content,
  html body .ac-enfermedades .grid > div .mt-4 > a::after { transition: none !important; }
  html body .ac-medico-tarjeta:active, html body .ac-servicios .space-y-4.flex.flex-col > button:active, html body .ac-sintomas .space-y-4 > div:active { transform: none !important; }
  html body .ac-servicios .space-y-4.flex.flex-col, html body .ac-servicios .ac-pestanas-flecha, html body .ac-servicios .ac-pestanas-flecha svg,
  html body .ac-sintomas .space-y-4 > div, html body .ac-sintomas .space-y-4 > div > .flex > .flex-shrink-0:first-child img { transition: none !important; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  /* M2b: las tarjetas de sintomas, mas anchas que altas desde 640 px (a 768 px de 736 x 552 a 736 x 414) */
  html body .ac-sintomas .space-y-4 > div { aspect-ratio: 16 / 9; }
  html body .ac-sintomas .space-y-4 > div > .flex > .flex-grow { padding: 24px 28px 26px; }
}
@media (max-width: 767.98px) {
  html body .ac-enfermedades .grid > div p { display: none !important; }
  html body .ac-enfermedades .grid > div h3 { margin-bottom: 0 !important; }
  html body .ac-enfermedades .grid > div .relative.z-10 { padding: 15px 36px 15px 0 !important; min-height: 56px; display: flex; align-items: center; }
  /* pie y pagos mas contenidos */
  html body .ac-pie img[alt="logo"] { width: 168px !important; }
  html body .ac-pie .lg\:col-span-1.space-y-6 { padding-bottom: 12px; }
  html body .ac-pagos > .relative.z-10 { padding-top: 28px !important; padding-bottom: 28px !important; }
  html body .ac-pagos .text-center.mb-6 { margin-bottom: 16px !important; }
}

/* ======================================================================================================
   TERCERA PASADA DE CELULAR (M3, 2026-10-20): interiores, auras y cinta ligeras, letra de lectura y el inicio pendiente de M1.
   Todo vive en @media (max-width: 1023.98px) (salvo 2 reglas base que ocultan lo nuevo en escritorio); de 1024 px en adelante
   no cambia ni un pixel (medido contra el commit anterior). Ningun texto cambia: solo forma, acomodo y tamano de letra.
     1  Auras: UNA capa fija con las dos luces (la mitad de trabajo que las dos de escritorio), al 70 % de su alfa; los
        contenedores blancos de lado a lado de las interiores se vuelven transparentes y las fichas siguen blancas
     2  Listado de servicios, enfermedades y sintomas: filas con foto de 104 x 78, como los sintomas del inicio (M2)
     3  Contacto, seguros: cada lista de aseguradoras en un <details> (el titulo es el renglon que la abre)
     4  Letra de lectura de 16 px en las interiores ("Revisado por", guia, aviso medico, indice lateral, seguros, formacion)
     5  Inicio: la pastilla "Valoracion Especializada" pasa a rotulo, igual que en escritorio (el boton NO se quita: es de la clinica)
     6  Inicio: un icono de linea por enfermedad a la izquierda del nombre (pedido del Dr. Lara)
   La cinta de hilos (JS aireInterior, modo "movil") dibuja en el lienzo .ac-aire-atras; aqui solo se le da lugar.
   ====================================================================================================== */
.ac-enf-icono { display: none; }          /* escritorio: el icono nuevo no se pinta (el de siempre sigue en su ficha) */
.ac-seg-det > .ac-seg-resumen { display: none; }   /* escritorio: el titulo es el h3 de siempre; el <summary> es solo del celular */
@media (max-width: 1023.98px) {
  /* ---- 1. Auras. Una sola capa fija con las dos luces (azul arriba a la derecha, champan abajo a la izquierda), al 70 % del
     alfa de escritorio (azul .34 / .25 / .13 / .045 pasa a .24 / .17 / .09 / .03; champan .44 / .32 / .16 / .055 a .31 / .22 / .11 / .04).
     Solo transform y ligado al desplazamiento (animation-timeline: scroll(root), en el compositor): 0 repintados al bajar. Sin
     soporte queda quieta (mismo aspecto) y con "reducir movimiento" tambien. El inicio se reconoce por su .ac-hero. */
  body:not(:has(.ac-hero)) { background: #f5f7fb !important; }
  body:not(:has(.ac-hero))::before {
    content: ""; position: fixed; z-index: -2; pointer-events: none; will-change: transform;
    top: -10svh; left: -20vw; width: 140vw; height: 120svh;
    background:
      radial-gradient(closest-side at 72% 24%, rgba(132, 154, 232, .24), rgba(132, 154, 232, .17) 25%, rgba(140, 160, 232, .09) 52%, rgba(150, 170, 235, .03) 76%, rgba(150, 170, 235, 0)),
      radial-gradient(closest-side at 26% 78%, rgba(232, 204, 152, .31), rgba(232, 204, 152, .22) 25%, rgba(236, 214, 172, .11) 52%, rgba(240, 224, 194, .04) 76%, rgba(240, 224, 194, 0));
    background-size: 100% 100%; background-repeat: no-repeat;
  }
  @supports (animation-timeline: scroll()) {
    body:not(:has(.ac-hero))::before { animation: ac-aura-movil linear both; animation-timeline: scroll(root); }
  }
  @keyframes ac-aura-movil { from { transform: translate3d(10vw, 4svh, 0); } to { transform: translate3d(-12vw, -6svh, 0); } }

  /* Lo que pintaba el blanco (o el tinte) de lado a lado se vuelve transparente; las fichas y tarjetas conservan su blanco. */
  body:not(:has(.ac-hero)) :is(.min-h-screen.bg-white, main.bg-white, main > .bg-gray-50, main section.bg-white,
    main > div > .bg-gray-50, .ac-intro, .ac-listado) { background-color: transparent !important; }
  body:not(:has(.ac-hero)) .ac-ficha:not(.legal), body:not(:has(.ac-hero)) .ac-lateral { background: #fff !important; }
  /* El lienzo de la cinta: el mismo que en escritorio (fijo, bajo encabezado, fichas y tarjetas), solo el de atras */
  .ac-aire { display: block; position: fixed; top: 0; left: 0; pointer-events: none; }
  .ac-aire-atras { z-index: -1; }

  /* ---- 2. Listado: filas con foto chica (solo servicios, enfermedades y sintomas: .ac-listado-filas; el equipo conserva sus tarjetas) ---- */
  html body .ac-listado-filas { padding-top: 8px !important; padding-bottom: 12px !important; }
  html body .ac-listado-filas > .container { padding-left: var(--ac-m2-eje, 16px); padding-right: var(--ac-m2-eje, 16px); }
  html body .ac-listado-filas .grid { display: block !important; border-top: 1px solid var(--ac-regla); }
  html body .ac-listado-filas .group {
    position: relative; margin: 0 !important; border-bottom: 1px solid var(--ac-regla); transition: background-color .16s var(--ac-sale);
  }
  html body .ac-listado-filas .group > .relative {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 0;
  }
  html body .ac-listado-filas .group > .relative > .relative.overflow-hidden {
    width: 104px; height: 78px; border-radius: var(--ac-radio-chico) !important; overflow: hidden;
  }
  html body .ac-listado-filas .group > .relative > .relative.overflow-hidden > a { display: block; width: 100%; height: 100%; }
  html body .ac-listado-filas .group img { width: 100%; height: 100% !important; object-fit: cover; transform: none !important; transition: none; }
  html body .ac-listado-filas .group > .relative > .absolute {
    position: static !important; inset: auto; transform: none !important; translate: none; min-width: 0; display: block;
  }
  html body .ac-listado-filas .group .bg-white.rounded-2xl {
    padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    transform: none !important; position: static; display: block; width: auto;
  }
  html body .ac-listado-filas .group:hover .bg-white.rounded-2xl { box-shadow: none !important; transform: none !important; }
  html body .ac-listado-filas .group h2 {
    font-size: 1.125rem; line-height: 1.36; font-weight: 600; margin: 0 0 2px !important; color: var(--ac-tinta) !important; letter-spacing: -.01em;
  }
  html body .ac-listado-filas .group h2::after { content: " \2192"; color: var(--ac-navy); }
  html body .ac-listado-filas .group h2[class*="line-clamp"] { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; }   /* el nombre completo, aunque pase de dos renglones */
  html body .ac-listado-filas .group .bg-white.rounded-2xl p { margin: 0 !important; font-size: 1rem; line-height: 1.5; }
  /* "Saber mas": el renglon entero es el enlace (se estira sobre la fila); el texto queda para lectores de pantalla */
  html body .ac-listado-filas .group .bg-white.rounded-2xl > a:last-child {
    position: absolute; inset: 0; z-index: 2; display: block; padding: 0 !important; font-size: 0; line-height: 0; color: transparent !important; overflow: hidden;
  }
  html body .ac-listado-filas .group .bg-white.rounded-2xl > a:last-child svg { display: none; }
  html body .ac-listado-filas .group:active { background: rgba(255, 255, 255, .7); }
  html body .ac-listado-filas .group:has(a:focus-visible) { outline: 2px solid var(--ac-navy); outline-offset: -2px; border-radius: var(--ac-radio-chico); }
  html body .ac-listado-filas .group a:focus-visible { outline: 0; }

  html body .ac-listado-filas .group .bg-white.rounded-2xl > a:first-child { display: block; }   /* el nombre es un enlace de renglon entero (no de 22 px de alto: objetivo tactil) */

  /* ---- 3. Contacto, seguros: cada lista plegada en un <details>; el parrafo ya contesta la pregunta y la lista es consulta ---- */
  html body .ac-seguros { margin-bottom: 40px; padding: 28px 20px 24px; }
  html body .ac-seguros h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 12px; }
  html body .ac-seguros > p { font-size: 1rem; line-height: 1.5; margin-bottom: 10px; }
  html body .ac-seguros-listas { gap: 0; margin: 14px 0 14px; border-bottom: 1px solid var(--ac-regla); }
  html body .ac-seguros-listas > div > h3 { display: none; }
  html body .ac-seguros .ac-seg-det { border-top: 1px solid var(--ac-regla); }
  html body .ac-seguros .ac-seg-det > .ac-seg-resumen {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 6px 0; margin: 0;
    list-style: none; cursor: pointer; color: var(--ac-tinta); font-weight: 600; font-size: 1rem; line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
  }
  html body .ac-seguros .ac-seg-det > .ac-seg-resumen::-webkit-details-marker { display: none; }
  html body .ac-seguros .ac-seg-det > .ac-seg-resumen::after {
    content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px; color: var(--ac-oro-texto);
    background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
    transition: transform .32s var(--ac-sale);
  }
  html body .ac-seguros .ac-seg-det[open] > .ac-seg-resumen::after { transform: rotate(45deg); }
  html body .ac-seguros .ac-seg-det > .ac-seg-resumen:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: 2px; border-radius: var(--ac-radio-chico); }
  html body .ac-seguros .ac-seg-det > ul, html body .ac-seguros-listas > div:last-child .ac-seg-det > ul { columns: 1; margin: 0; padding: 0 0 8px; }
  html body .ac-seguros .ac-seg-det li { font-size: 1rem; line-height: 1.4; padding: 9px 0; }
  html body .ac-seguros-nota { font-size: 1rem; line-height: 1.5; margin: 0; }

  /* ---- 4. Letra de lectura de 16 px en las interiores (medido: "Revisado por", guia, aviso medico, fuentes, indice lateral, seguros,
     formacion y areas del medico iban a 14 o 15.2 px). Interlineado 1.5. Las leyendas legales del pie son la franja de la clinica y no se tocan. ---- */
  html body :is(.ac-ficha .revision-autor p, .ac-ficha .revision-autor span, .ac-rev-quien, .ac-rev-ced, .ac-rev-fecha, .ac-ficha .revision-fuentes,
                .ac-ficha .revision-fuentes *, .ac-guia, .aviso-medico, .aviso-medico *, .aviso-emergencia, .ac-lateral a.group span,
                .ac-lateral a.group div, .ac-lateral p, .ac-areas a, .ac-areas .ac-area-texto, .ac-formacion-lugar, .ac-medico-ficha p.text-sm,
                .legal p.text-sm, .ac-galeria .text-center > p, .ac-pagos p.text-sm, p.text-white\/80.text-sm) {
    font-size: 1rem !important; line-height: 1.5 !important;
  }
  html body .ac-lateral a.group .w-8 { font-size: 1rem !important; line-height: 1 !important; }
  html body .ac-pagos .bg-mcolor1 { font-size: 1rem !important; line-height: 1.4 !important; }   /* rotulo "Metodos de pago": 12 px en la hoja base */

  /* Ficha del medico: el nombre y los titulos pasan a tinta, como en escritorio (en dorado #ad9060 sobre el fondo de las auras daban 2.6:1 y 2.82:1; minimo 3:1) */
  html body .ac-medico-ficha :is(h1, h2) { color: var(--ac-tinta) !important; }

  /* ---- 5. Inicio, tarjeta de valoracion de cancer: la pastilla "Valoracion Especializada" pasa a rotulo dorado en tipo oracion, sin caja
     ni icono (regla 20 de estilo-william; igual que en escritorio). El boton "Agende su consulta" se queda: es de la clinica. ---- */
  html body .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) {
    background: none !important; padding: 0 !important; border: 0 !important; margin-bottom: 0 !important;
  }
  html body .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) > svg { display: none !important; }
  html body .ac-banda-cancer .backdrop-blur-md [class*="rounded-full"]:not(button) > span {
    display: inline-block; font-size: 1rem !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: 0 !important;
    text-transform: none !important; color: var(--ac-oro-texto) !important;
  }

  /* ---- 6. Inicio, enfermedades: icono de linea (24 px en un cuadro de 32) a la izquierda de cada nombre, 12 px hasta el texto,
     centrado con el primer renglon del nombre; decorativo (alt vacio). El renglon entero sigue siendo el enlace. ---- */
  html body .ac-enfermedades .grid > div .relative.z-10 {
    display: grid !important; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start; align-content: center;
  }
  html body .ac-enfermedades .grid > div .relative.z-10 > .ac-enf-icono {
    display: block; grid-column: 1; grid-row: 1; width: 32px; height: 32px; padding: 4px; box-sizing: border-box; object-fit: contain;
    margin-top: calc((1.25rem * 1.25 - 32px) / 2); transition: none; filter: none !important;
  }
  html body .ac-enfermedades .grid > div .relative.z-10 > :is(h3, p) { grid-column: 2; }
  html body .ac-enfermedades .grid > div .relative.z-10 > .mt-4 { grid-column: 1 / -1; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  body:not(:has(.ac-hero))::before { animation: none !important; }
  html body .ac-seguros .ac-seg-det > .ac-seg-resumen::after, html body .ac-listado-filas .group { transition: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  html body .ac-listado-filas .grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  html body .ac-listado-filas .group > .relative { grid-template-columns: 120px minmax(0, 1fr); }
  html body .ac-listado-filas .group > .relative > .relative.overflow-hidden { width: 120px; height: 90px; }
}
@media (min-width: 480px) and (max-width: 1023.98px) {
  html body .ac-seguros .ac-seg-det > ul, html body .ac-seguros-listas > div:last-child .ac-seg-det > ul { columns: 2; column-gap: 24px; }
}

/* ======================================================================================================
   UBICACION Y FRANJA LEGAL DEL PIE (2026-10-20, pedido del Dr. Lara; escritorio y celular)
   Pieza 1. La seccion "Hospital Angeles Lomas" (plantillas/pie.html) va entre "Metodos de pago" y el pie oscuro, en todas las
   paginas menos Contacto (alli ya estan el mapa y los canales: seria un duplicado). Composicion de la del Dr. Centeno, vestida con
   los tokens de AirCare: texto a la izquierda (rotulo con punto, titulo, linea, renglones con icono en circulo tintado, mapa en tarjeta),
   foto de la sala a la derecha a sangre hasta el borde y fundida hacia el texto. De 1024 px, dos columnas; abajo, una: foto 16:10
   arriba y luego titulo, renglones y mapa. Todo es tipo oracion (nada de mayusculas espaciadas), radio de 20 y Wix Madefor.
   Pieza 2. La franja legal (responsable sanitario, cedulas, COFEPRIS, aviso medico y cookies: texto intacto) pasa a dos columnas
   en escritorio y a una pila compacta en celular, a 14 px sobre el pie oscuro.
   ====================================================================================================== */
body:has(.ac-contacto) .ac-ubic { display: none; }   /* /contacto/ ya trae el mapa, los canales y el horario */
.ac-ubic { position: relative; isolation: isolate; overflow: hidden; background: var(--ac-cielo); color: var(--ac-cuerpo); }
.ac-ubic-cuerpo { position: relative; z-index: 1; }
/* El borde de abajo se funde con el pie oscuro (sin corte seco de cielo a azul): los ultimos --ac-ubic-fundido px pasan al color con el que
   arranca el pie. Vive dentro del aire de abajo de la seccion, asi que nunca toca el mapa. */
.ac-ubic { --ac-ubic-fundido: 56px; }
.ac-ubic::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--ac-ubic-fundido); pointer-events: none;
                  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ac-hondo) 55%, transparent) 55%, var(--ac-hondo) 100%); }
.ac-ubic-rotulo { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--ac-oro-cielo); font-family: var(--ac-texto);
                  font-size: .9375rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ac-ubic-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-oro); }
html body .ac-ubic .ac-ubic-cuerpo h2.ac-seccion-titulo { margin: 0 0 6px; text-align: left; line-height: 1.05; }
.ac-ubic-linea { margin: 0 0 18px; color: var(--ac-cuerpo); font-size: 1.0625rem; line-height: 1.35; }

/* Datos de contacto, segunda version (Dr. Lara, 20-oct: "no me gusta el formato de los datos de contacto"). La primera los ponia
   en renglones iguales con icono, rotulo gris y dato subrayado: todo pesaba lo mismo y los telefonos parecian texto. Ahora cada
   dato tiene la forma de lo que es:
   - la direccion es un parrafo con su boton "Como llegar";
   - el horario es una tabla de dos renglones (dias a la izquierda, horas a la derecha, regla fina);
   - llamar, WhatsApp y Doctoralia son ACCIONES: tarjetas enteras que se tocan, con icono en circulo navy, nombre y dato. */
.ac-ubic-dir { margin: 0 0 18px; }
.ac-ubic-direccion { margin: 0 0 12px; color: var(--ac-tinta); font-size: 1.0625rem; line-height: 1.4; font-weight: 500; text-wrap: pretty; max-width: 46ch; }
html body .ac-ubic .ac-ubic-llegar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px; border-radius: var(--ac-pastilla);
  border: 1px solid var(--ac-regla-fuerte); background: #fff; color: var(--ac-tinta); font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; transition: border-color 160ms var(--ac-sale), background-color 160ms var(--ac-sale);
}
.ac-ubic-llegar svg { color: var(--ac-oro-texto); flex: none; }
.ac-ubic-llegar span::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform 160ms var(--ac-sale); }

.ac-ubic-horario { margin: 0 0 20px; padding: 0; max-width: 460px; }
.ac-ubic-horario > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--ac-regla); }
.ac-ubic-horario > div:last-child { border-bottom: 1px solid var(--ac-regla); }
.ac-ubic-horario dt { margin: 0; color: var(--ac-cuerpo); font-size: 1rem; line-height: 1.45; }
.ac-ubic-horario dd { margin: 0; color: var(--ac-tinta); font-size: 1rem; line-height: 1.45; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ac-ubic-acciones { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-ubic-acciones li { margin: 0; padding: 0; min-width: 0; }
html body .ac-ubic .ac-ubic-accion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 16px; box-sizing: border-box;
  border-radius: 16px; background: #fff; border: 1px solid var(--ac-regla); color: var(--ac-tinta); text-decoration: none;
  box-shadow: 0 1px 2px rgba(30, 36, 67, .04);
  transition: transform 220ms var(--ac-sale), box-shadow 220ms var(--ac-sale), border-color 220ms var(--ac-sale);
}
.ac-ubic-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ac-navy); }
.ac-ubic-ico svg { width: 19px; height: 19px; }
.ac-ubic-accion-txt { display: grid; gap: 2px; min-width: 0; }
.ac-ubic-accion-et { color: var(--ac-tinta); font-size: 1rem; line-height: 1.3; font-weight: 600; }
.ac-ubic-accion-dato { color: var(--ac-gris); font-size: .9375rem; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-ubic .ac-ubic-accion:focus-visible, .ac-ubic .ac-ubic-llegar:focus-visible, .ac-ubic .ac-ubic-fachada:focus-visible {
  outline: 2px solid var(--ac-navy); outline-offset: 3px; }
.ac-ubic-accion:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .ac-ubic .ac-ubic-accion:hover { transform: translateY(-2px); border-color: var(--ac-regla-fuerte); box-shadow: var(--ac-sombra); }
  .ac-ubic .ac-ubic-llegar:hover { border-color: var(--ac-navy); }
  .ac-ubic .ac-ubic-llegar:hover span::after { transform: translateX(4px); }
}

/* Mapa de Google Maps real (assets/aircare-2.js lo monta con loading="lazy"). Sin JS, la tarjeta es un enlace a Google Maps.
   Alto fijo: cero salto de diseno al cargar. */
.ac-ubic-mapa { position: relative; height: 260px; border-radius: var(--ac-radio); overflow: hidden; border: 1px solid var(--ac-regla);
                background: #e8edf5; }
.ac-ubic-fachada { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
                   color: var(--ac-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ac-ubic-mapa iframe { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }

/* Foto: a sangre, sin marco; fundida hacia el color de la seccion */
.ac-ubic-foto { margin: 0; position: relative; overflow: hidden; }
.ac-ubic-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ac-ubic-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

@media (min-width: 1024px) {
  .ac-ubic { --ac-ubic-fundido: 88px; padding: 96px max(var(--ac-margen, 40px), calc((100% - var(--ac-ancho, 1120px)) / 2)); }
  .ac-ubic-cuerpo { width: calc(50% - 56px); }
  .ac-ubic-foto { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 50%; }
  .ac-ubic-foto::after { background: linear-gradient(90deg, var(--ac-cielo) 0%, color-mix(in srgb, var(--ac-cielo) 70%, transparent) 14%, transparent 46%); }
  .ac-ubic-mapa { height: 260px; }
}
@media (max-width: 1023.98px) {
  .ac-ubic { display: flex; flex-direction: column; }
  .ac-ubic-foto { order: -1; aspect-ratio: 16 / 10; max-height: 380px; }
  .ac-ubic-foto img { object-position: 50% 45%; }   /* en 16:10 entra el televisor con el logotipo y los sillones */
  .ac-ubic-foto::after { background: linear-gradient(0deg, var(--ac-cielo) 0%, color-mix(in srgb, var(--ac-cielo) 60%, transparent) 14%, transparent 42%); }
  .ac-ubic-cuerpo { width: 100%; max-width: 680px; padding: 8px var(--ac-m2-eje, 16px) 56px; margin: 0 auto; box-sizing: border-box; }
  .ac-ubic-rotulo, .ac-ubic-linea, .ac-ubic-direccion { font-size: 1rem; }
  .ac-ubic-linea { margin-bottom: 14px; }
}
@media (max-width: 559.98px) {
  /* En el telefono las tres acciones en UNA fila (Dr. Lara, 20-oct: "los botones mas compactos, que se puedan ver en una sola
     linea aunque sea mas alta"): tarjetas verticales centradas, icono arriba, nombre y dato debajo. El dato baja a 13 px para
     que "565 233 9968" quepa en ~110 px de ancho a 375-390 px; el nombre, que es lo que se lee, queda a 15 px. */
  .ac-ubic-acciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body .ac-ubic .ac-ubic-accion { align-items: center; text-align: center; gap: 8px; padding: 14px 4px 12px; border-radius: 14px; }
  .ac-ubic-accion-txt { justify-items: center; }
  .ac-ubic-ico { width: 38px; height: 38px; }
  .ac-ubic-accion-et { font-size: .9375rem; }
  .ac-ubic-accion-dato { font-size: .8125rem; letter-spacing: -.01em; }
  .ac-ubic-mapa { height: 220px; }
  .ac-ubic-cuerpo { padding-bottom: 40px; }
  .ac-ubic { --ac-ubic-fundido: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-ubic .ac-ubic-accion, .ac-ubic .ac-ubic-llegar, .ac-ubic-llegar span::after { transition: none !important; }
  .ac-ubic .ac-ubic-accion:hover, .ac-ubic-accion:active, .ac-ubic .ac-ubic-llegar:hover span::after { transform: none !important; }
}

/* ---- Franja legal: dos columnas en escritorio, pila compacta en celular. 14 px, interlineado 1.6, regla fina arriba (la del contenedor) ---- */
.ac-legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: left; color: rgba(255, 255, 255, .84); }
.ac-legal-col { display: grid; gap: 4px; align-content: start; min-width: 0; }
html body footer.ac-pie .ac-legal.ac-legal, html body footer.ac-pie .ac-legal.ac-legal :is(p, span, a) { font-size: .875rem !important; line-height: 1.55 !important; letter-spacing: 0; }   /* gana a la regla de 15 px de escritorio (:is con .ac-contacto .grid, 0,3,2) */
html body .ac-legal .ac-legal-responsable { color: #fff; }
html body .ac-legal .ac-legal-aviso, html body .ac-legal .ac-legal-cookies { color: rgba(255, 255, 255, .78); }
.ac-legal-datos > span { display: block; white-space: normal; }
.ac-legal-sinpartir { white-space: nowrap; }   /* "No. 2515062002A00093" no se parte entre renglones */
.ac-legal-datos > span + span::before { content: none; }
@media (min-width: 1024px) {
  .ac-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 10px; align-items: start; }
  .ac-legal-cookies { grid-column: 1 / -1; }
  /* sin la tercera celda (el bloque del hospital que vivia aqui) la columna de enlaces ya no cabia en "span 2" y caia debajo del logo */
  html body .ac-pie .grid.lg\:grid-cols-3.items-start > .lg\:col-span-2 { grid-column: 2 / -1; }
}
@media (min-width: 1200px) {
  .ac-legal { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ac-legal-datos > span { display: inline-block; white-space: nowrap; }
  .ac-legal-datos > span + span::before { content: "\00B7"; margin: 0 .7em; color: rgba(255, 255, 255, .5); }
}

/* ======================================================================================================
   TABLETA (768 a 1023 px), M4 (2026-10-20). Fallo que la motivo (medido a 900 px): los titulos del inicio arrancaban en
   siete ejes distintos (x 0, 16, 82, 90, 123 y 126) porque cada seccion traia su propio contenedor (el .container de Tailwind
   de 736 px centrado, margenes de 16 px del celular o ninguno). Aqui un solo eje: --ac-t-eje a cada lado, 40 px minimo y el
   contenido a 840 px como maximo. El celular (< 768) y el escritorio (>= 1024) no cambian.
   ====================================================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --ac-t-eje: max(40px, calc((100vw - 840px) / 2)); }
  html body .container { max-width: none !important; padding-left: var(--ac-t-eje) !important; padding-right: var(--ac-t-eje) !important; }
  html body .ac-calidad-marco { max-width: none; margin: 0; padding-left: var(--ac-t-eje); padding-right: var(--ac-t-eje); }
  /* Metodos de pago: los cuatro en una fila (antes 3 + 1 suelto) */
  html body .ac-pagos .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* Las piezas de celular (M2, M2b) usan --ac-m2-eje (16 px): en tableta toman el eje comun */
  :root { --ac-m2-eje: var(--ac-t-eje); }
  html body .ac-hero .ac-hero-textos, html body .ac-hero .space-y-6 { padding-left: 0 !important; padding-right: 0 !important; }
  html body .ac-hero .container { padding-left: 0 !important; padding-right: 0 !important; }   /* el hero sumaba el eje dos veces (su envoltura y su .container) */
  html body .ac-hero .grid { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; padding-left: var(--ac-t-eje) !important; padding-right: var(--ac-t-eje) !important; }
  /* Opiniones: la seccion no lleva relleno lateral, asi que el carrusel no debe salirse con margen negativo (desbordaba 24 px) */
  html body .ac-opiniones .opiniones-movil { margin-left: 0 !important; margin-right: 0 !important; }
  html body .ac-calidad { padding-left: 0 !important; padding-right: 0 !important; }   /* calidad sumaba 16 px de la seccion al eje */
  html body .ac-ubic-cuerpo { max-width: none; padding-left: var(--ac-t-eje); padding-right: var(--ac-t-eje); }
  html body .ac-seguros, html body .ac-faq-caja { margin-left: var(--ac-t-eje); margin-right: var(--ac-t-eje); }
}

/* ======================================================================================================
   FICHAS EN CELULAR (2026-10-20, Dr. Lara): el indice lateral se pliega tras un boton (JS lateralPlegable) y la tarjeta
   oscura "Conozca otras..." se compacta (sin el logotipo de 128 px ni el alto minimo de 400 px; sus textos y sus tres botones
   se quedan). La linea "14 enfermedades" pasa al boton. Escritorio sin cambio: todo vive bajo 1024 px.
   ====================================================================================================== */
.ac-lateral-boton { display: none; }
@media (max-width: 1023.98px) {
  html body .ac-lateral-plegable .ac-lateral-cabeza { padding: 0 !important; }
  html body .ac-lateral-plegable .ac-lateral-cabeza > :not(.ac-lateral-boton) { display: none !important; }
  .ac-lateral-boton { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 20px; border: 0; background: transparent; color: var(--ac-tinta); font: 600 1.0625rem/1.3 var(--ac-texto); text-align: left; cursor: pointer; }
  .ac-lateral-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 6px; padding: 0 7px; border-radius: 999px;
    background: var(--ac-tinte); color: var(--ac-navy); font-size: .875rem; font-weight: 600; }
  .ac-lateral-boton svg { flex: none; color: var(--ac-oro-texto); transition: transform 220ms var(--ac-sale); }
  .ac-lateral-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ac-lateral-boton:focus-visible { outline: 2px solid var(--ac-navy); outline-offset: -4px; border-radius: 12px; }
  html body .ac-lateral-plegable:not(.es-abierto) > .ac-lateral-lista { display: none !important; }
  html body .ac-lateral-plegable > .bg-gray-50:last-child { display: none !important; }
  /* Tarjeta oscura compacta */
  html body .ac-lateral .ac-cta { min-height: 0 !important; }
  html body .ac-lateral .ac-cta > .flex.justify-center:first-child { display: none !important; }
  html body .ac-lateral .ac-cta .p-8 { padding: 24px 20px !important; }
  html body .ac-lateral .ac-cta h3 { font-size: 1.5rem !important; margin-bottom: 10px !important; }
  html body .ac-lateral .ac-cta p { font-size: 1rem !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
  html body .ac-lateral .mt-12 { margin-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .ac-lateral-boton svg { transition: none; } }

/* ======================================================================================================
   COLOR EN LAS FICHAS DEL CELULAR (2026-10-20, Dr. Lara: mas color en asma y Contacto). Fallo que lo motivo: en el telefono
   la ficha blanca ocupaba 92 % del ancho y tapaba las auras; asma media 28 % de color y Contacto 29 % (meta 40-45 %). Bajo
   768 px la ficha deja de ser tarjeta blanca: el texto va directo sobre el fondo con luces (que sube al alfa de escritorio),
   con 4 px mas de renglon a cada lado. El contraste sigue alto: el cuerpo #454c66 sobre el tono mas oscuro del aura da 7:1 o
   mas. Tableta y escritorio sin cambio.
   ====================================================================================================== */
@media (max-width: 767.98px) {
  body:not(:has(.ac-hero))::before {
    background:
      radial-gradient(closest-side at 72% 24%, rgba(132, 154, 232, .36), rgba(132, 154, 232, .26) 25%, rgba(140, 160, 232, .14) 52%, rgba(150, 170, 235, .05) 76%, rgba(150, 170, 235, 0)),
      radial-gradient(closest-side at 26% 78%, rgba(232, 204, 152, .46), rgba(232, 204, 152, .33) 25%, rgba(236, 214, 172, .17) 52%, rgba(240, 224, 194, .06) 76%, rgba(240, 224, 194, 0)) !important;
  }
  html body:not(:has(.ac-hero)) .ac-ficha:not(.legal) { background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding-left: 4px !important; padding-right: 4px !important; }
  /* Contacto: las fichas de canales y las cajas de seguros y preguntas, en blanco translucido para que pase la luz */
  html body .ac-contacto :is(.bg-white, .rounded-2xl.bg-white), html body .ac-seguros, html body .ac-faq-caja { background: rgba(255, 255, 255, .55) !important; }
}

/* Areas de atencion sin pagina propia (Dr. Tolentino, 2026-10-21): misma pildora que las que llevan enlace, como texto
   y sin efecto al pasar el cursor (contenido: area sin "url"). */
.ac-areas .ac-area-texto { display: inline-block; padding: 9px 16px; border-radius: var(--ac-pastilla); background: var(--ac-tinte);
  border: 1px solid var(--ac-regla); color: var(--ac-navy); font-weight: 500; font-size: .95rem; cursor: default; }