/* ---------------------------------------------------------------------------
   Advance · Centro de salud Santa Juana
   Capa de marca sobre el template base. Punto Gris — puntogris.cl
   Colores del Manual de Marca de Advance Salud (Merken Digital): azul principal #044B7E,
   celeste #6DB9E6, lima #9FD412, turquesa #48A9A6 y azul noche #012A47.
--------------------------------------------------------------------------- */

:root {
  --adv-turquesa: #6DB9E6;           /* celeste del manual: rellenos y brillos */
  --adv-turquesa-texto: #044B7E;     /* texto de marca sobre claro: azul principal */
  --adv-turquesa-claro: #6DB9E6;
  --adv-teal-profundo: #012A47;
  --adv-tinta: #012A47;              /* fondos oscuros */
  --adv-tinta-900: #012A47;
  --adv-agua: #E6EDF2;
  --adv-nieve: #f5f7fa;
  --adv-ambar: #9FD412;              /* lima del manual (antes ámbar FONASA) */
  --adv-naranja: #9FD412;
  --adv-celeste: #6DB9E6;
  --adv-azul: #044B7E;
  --adv-marino: #012A47;
  --adv-verde: #012A47;              /* confirmaciones */
  --adv-whatsapp: #012A47;
}

/* --- Logotipo ------------------------------------------------------------ */
/* Logotipo horizontal del Manual de Marca (archivos maestros de la diseñadora,
   recortados sin redibujar). Versión a color sobre claro; sobre el fondo
   oscuro del menú del celular se usa la versión para fondo oscuro. */

.adv-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.adv-logo__img {
  display: block;
  width: 196px;
  height: auto;
}

@media (max-width: 575px) {
  .adv-logo__img { width: 158px; }
}

/* --- Encabezado ---------------------------------------------------------- */
/* El logotipo horizontal y los rótulos en español necesitan más ancho que el
   del template, que estaba pensado para seis palabras en inglés.            */

.tf-header.header2 .header-inner { max-width: 1104px; }

@media (max-width: 1199px) and (min-width: 992px) {
  .tf-header.header2 .header-inner { max-width: calc(100vw - 48px); }
  .nav-menu-main { gap: 16px; }
}

/* --- Hero ---------------------------------------------------------------- */
/* El template trae el hero como un campo de color plano, no como fotografía:
   se mantiene así, cambiando el azul grisáceo por el turquesa de la marca.   */

/* Degradado de malla: base azul claro de la paleta, con zonas de violeta y
   turquesa. El turquesa es el del logotipo y evita que el violeta quede solo. */
.section-hero .hero-image {
  background-image: none;
  background-color: #DBEEF9;
  background:
    radial-gradient(46% 50% at 80% 12%, rgba(109,185,230, 0.46) 0%, rgba(109,185,230, 0) 64%),
    radial-gradient(40% 46% at 18% 80%, rgba(109,185,230, 0.62) 0%, rgba(109,185,230, 0) 64%),
    radial-gradient(50% 54% at 100% 92%, rgba(109,185,230, 0.46) 0%, rgba(109,185,230, 0) 66%),
    radial-gradient(42% 46% at 2% 2%, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(140deg, #F0F8FD 0%, #DBEEF9 42%, #C8E4F6 72%, #AFD9F1 100%);
}

/* Grano fino, como en la referencia */
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
  opacity: .40;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.section-hero .content-wrap .text { color: var(--neutral-700); }

/* --- Hero con figura ------------------------------------------------------ */
/* Se conserva la composición y las animaciones del template; sólo se reparte
   en dos columnas para que entre la fotografía recortada.                    */

@media (min-width: 992px) {
  .adv-hero .content-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: 32px;
    text-align: left !important;
    padding: 196px 0 120px;
  }
  /* más aire entre bloques: el titular no debe quedar pegado al menú */
  .adv-hero .content-wrap .sub { margin-bottom: 34px; }
  .adv-hero .content-wrap .title { margin-bottom: 44px; }
  .adv-hero .content-wrap .text { margin-bottom: 46px; }
  .adv-hero .adv-badges { margin-top: 38px; }
  .adv-hero .content-wrap .sub { margin-left: 0; margin-right: auto; }
  .adv-hero .content-wrap .title2 { justify-content: flex-start !important; }
  .adv-hero .content-wrap .text { margin-left: 0; }
  .adv-hero .content-wrap .bot-btns { justify-content: flex-start; }
  .adv-hero .adv-badges { justify-content: flex-start; }
}

.adv-hero__figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: min(56vh, 530px);
}

/* La animación del titular del template, recolocada bajo la figura */
.adv-hero__pill {
  position: absolute;
  left: 12%;
  bottom: -6%;
  z-index: 1;
  width: 255px;
  transform: scale(.78);
  transform-origin: left bottom;
  pointer-events: none;
}

@media (max-width: 1399px) { .adv-hero__pill { left: 8%;  transform: scale(.68); } }
@media (max-width: 991px)  { .adv-hero__pill { left: 4%;  bottom: -10%; transform: scale(.58); } }
@media (max-width: 575px)  { .adv-hero__pill { display: none; } }

/* halo suave detrás, como el círculo de la referencia */
.adv-hero__blob {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.35) 42%, rgba(255, 255, 255, 0) 70%);
}

.adv-hero__person {
  position: relative;
  z-index: 2;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  /* el corte en diagonal: la figura parece salir de la pantalla */
  clip-path: polygon(0 0, 100% 0, 100% 74%, 0 97%);
  filter: drop-shadow(0 26px 40px rgba(1,42,71, 0.22));
}

/* --- Piezas flotantes ----------------------------------------------------- */

.adv-float { position: absolute; z-index: 3; display: block; }

.adv-float--tri {
  width: 74px; height: 64px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, #6DB9E6 0%, #044B7E 100%);
  box-shadow: 0 14px 26px rgba(109,185,230, .34);
}
.adv-float--tri-2 {
  width: 56px; height: 48px;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
  background: linear-gradient(180deg, #C5E3F5 0%, #6DB9E6 100%);
  box-shadow: 0 14px 26px rgba(109,185,230, .28);
}
.adv-float--dot {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.75), rgba(109,185,230,.55) 46%, rgba(4,75,126,.45) 100%);
  backdrop-filter: blur(6px);
}
.adv-float--ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px dashed rgba(1,42,71, .22);
}

.adv-float--a { top: 4%;  right: 2%; }
.adv-float--b { top: 26%; left: -2%; }
.adv-float--c { bottom: 26%; right: -1%; }
.adv-float--d { top: 10%; left: 10%; }

/* tarjetitas de interfaz */
.adv-tarjeta {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 34px rgba(1,42,71, .16);
  font-size: 13px;
  font-weight: 600;
  color: var(--adv-tinta);
  white-space: nowrap;
}
.adv-tarjeta small { display: block; font-size: 11px; font-weight: 500; color: var(--neutral-500); }
.adv-tarjeta .ic {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #012A47; font-size: 13px;
  background: #6DB9E6;
}
.adv-tarjeta .ic.ambar { background: linear-gradient(180deg, #C5E571, #9FD412); color: #012A47; }
.adv-tarjeta--1 { top: 16%; left: -6%; }
.adv-tarjeta--2 { bottom: 20%; right: -8%; }

@media (max-width: 1399px) {
  .adv-tarjeta--1 { left: -2%; }
  .adv-tarjeta--2 { right: -2%; }
}

@media (max-width: 991px) {
  .adv-hero__figure { height: 360px; margin-top: 36px; }
  /* las tarjetitas se mantienen bajo la línea de la cara */
  .adv-tarjeta--1 { top: auto; bottom: 36%; left: -2%; }
  .adv-tarjeta--2 { bottom: 8%; right: -2%; }
  .adv-float--b, .adv-float--d { display: none; }
}

@media (max-width: 575px) {
  .adv-hero__figure { height: 280px; }
  /* el distintivo del template usa width:max-content y se sale en el celular */
  .section-hero .content-wrap .sub {
    width: auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
  }
  .adv-tarjeta { font-size: 12px; padding: 9px 13px; }
  .adv-float--tri { width: 54px; height: 46px; }
  .adv-float--dot { width: 66px; height: 66px; }
}

/* El botón de volver arriba no debe quedar bajo el de WhatsApp. */
#goTop { bottom: 92px; }
@media (max-width: 575px) { #goTop { bottom: 86px; right: 26px; } }

/* --- Ajustes de legibilidad sobre el template ---------------------------- */
/* El degradado original deja la segunda línea casi invisible. Se mantiene el
   efecto, pero partiendo de un 30 % de opacidad en vez de cero.             */

.text-gradient-2 {
  background: linear-gradient(360deg, rgba(1,42,71, 0.32) 0%, #012A47 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* El titular en español ocupa una línea más que el del template, que se
   solapaba con la tarjeta siguiente por un margen negativo. */
.section-about-us .heading-section { margin-bottom: 16px; }

/* El adorno del titular estorba en pantallas chicas */
@media (max-width: 767px) {
  .section-hero .content-wrap .title .title-icon { display: none; }
}

/* Cifras largas en español: el template estaba pensado para "230K". */
.section-about-us .review-box .counter { font-size: 104px; line-height: 104px; }
.section-about-us .review-box .counter .adv-unit {
  font-size: 30px;
  letter-spacing: 0;
  margin-left: 6px;
}
@media (max-width: 1199px) {
  .section-about-us .review-box .counter { font-size: 76px; line-height: 76px; }
  .section-about-us .review-box .counter .adv-unit { font-size: 24px; }
}
@media (max-width: 767px) {
  .section-about-us .review-box .counter { font-size: 58px; line-height: 58px; }
}

.section-statistic .swiper .statistic-number { font-size: 150px; line-height: 160px; }
.section-statistic .swiper .statistic-number .prefix { font-size: 140px; }
@media (max-width: 1399px) {
  .section-statistic .swiper .statistic-number { font-size: 112px; line-height: 122px; }
  .section-statistic .swiper .statistic-number .prefix { font-size: 104px; }
}
@media (max-width: 767px) {
  .section-statistic .swiper .statistic-number { font-size: 62px; line-height: 70px; }
  .section-statistic .swiper .statistic-number .prefix { font-size: 56px; }
}

/* Mismo campo de color para la cabecera de las páginas de noticias. */
.section-page-title {
  background-image: none;
  background:
    radial-gradient(62% 70% at 50% -10%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(152deg, #f5f7fa 0%, #D6EBF8 40%, #A7D5F0 74%, #6DB9E6 100%);
}

/* --- Formularios ---------------------------------------------------------- */
/* El template no usa <select> y deja una regla heredada que pinta de negro el
   desplegable nativo. */

select option,
.adv-booking select option {
  background-color: #fff;
  color: var(--primary);
}

/* La opción marcada del desplegable: violeta con letra blanca (el azul del
   sistema no es de la paleta). */
select option:checked,
select option:hover,
.adv-booking select option:checked,
.adv-booking select option:hover {
  background: #044B7E linear-gradient(#044B7E, #044B7E);
  color: #ffffff;
}
.adv-booking select { accent-color: #044B7E; }

/* Desplegable propio (lo arma advance.js sobre el <select>, que queda oculto
   para enviar el valor). Va dentro de la página, así que se mueve con el scroll
   y se cierra solo; el nativo azul del sistema no se puede teñir. */
.adv-sel { position: relative; }
.adv-booking .adv-sel > select {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  opacity: 0; pointer-events: none;
}
.adv-sel__btn {
  display: flex; align-items: center; width: 100%; box-sizing: border-box;
  height: 56px; padding: 0 56px 0 22px; text-align: left;
  border-radius: 999px; border: 1px solid var(--neutral-200); background-color: #fff;
  font: inherit; font-size: 16px; color: var(--primary); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1L7 7L13 1' stroke='%230a2240' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 22px center;
}
.adv-sel__btn:focus-visible, .adv-sel.is-open .adv-sel__btn { outline: none; border-color: var(--adv-turquesa); }
.adv-sel__list {
  display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  max-height: 330px; overflow-y: auto; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--neutral-200); border-radius: 22px;
  box-shadow: 0 18px 40px rgba(1,42,71, .16);
}
.adv-sel.is-open .adv-sel__list { display: block; }
.adv-sel__opt {
  padding: 10px 14px; border-radius: 12px; font-size: 15.5px; color: #012A47; cursor: pointer;
}
.adv-sel__opt[aria-selected="true"] { background: #EDF7FC; color: #044B7E; font-weight: 600; }
.adv-sel__opt:hover, .adv-sel__opt.is-active { background: #044B7E; color: #ffffff; }

/* --- Distintivos (SEREMI · FONASA · online) ------------------------------ */

.adv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}

.adv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--adv-tinta);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
}

.adv-badge .icon { font-size: 16px; color: var(--adv-turquesa-texto); }

.adv-badge--fonasa {
  background: var(--adv-ambar);
  border-color: var(--adv-ambar);
  color: #012A47;
}
.adv-badge--fonasa .icon { color: #012A47; }

.adv-badge--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.adv-badge--dark .icon { color: var(--adv-turquesa-texto); }

/* --- Cinta de aviso sobre el encabezado ---------------------------------- */

.adv-topbar {
  background: var(--adv-tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  text-align: center;
}
.adv-topbar a { color: var(--adv-turquesa); font-weight: 600; text-decoration: none; }
.adv-topbar a:hover { text-decoration: underline; }
.adv-topbar .sep { opacity: .35; margin: 0 10px; }
@media (max-width: 767px) { .adv-topbar .adv-topbar__opt { display: none; } }

/* --- Botón flotante de WhatsApp ------------------------------------------ */

.adv-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--adv-whatsapp);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(1,42,71, .36);
  transition: transform .25s ease, box-shadow .25s ease;
}
.adv-whatsapp:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(1,42,71, .48); }
.adv-whatsapp svg { width: 26px; height: 26px; flex-shrink: 0; }
@media (max-width: 575px) {
  .adv-whatsapp { padding: 0; width: 58px; justify-content: center; right: 16px; bottom: 16px; }
  .adv-whatsapp span { display: none; }
}

/* --- Reserva de hora ------------------------------------------------------ */

.adv-booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575px) { .adv-booking__row { grid-template-columns: 1fr; } }

.adv-booking select {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--neutral-200);
  background-color: #fff;
  padding: 0 22px;
  font-size: 16px;
  color: var(--primary);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1L7 7L13 1' stroke='%230a2240' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 22px center;
}
.adv-booking select:focus { outline: none; border-color: var(--adv-turquesa); }

.adv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.adv-chip {
  border: 1px solid var(--neutral-200);
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all .2s ease;
}
.adv-chip:hover { border-color: var(--adv-turquesa); }
.adv-chip.is-active { background: var(--adv-turquesa); border-color: var(--adv-turquesa); color: #012A47; }

.adv-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--neutral-600);
}
.adv-note .icon { color: var(--adv-turquesa-texto); font-size: 16px; margin-top: 2px; }

/* --- Valores y copago ----------------------------------------------------- */

.adv-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(159,212,18, .18);
  color: #044B7E;
  font-size: 13px;
  font-weight: 700;
}

/* --- Horario -------------------------------------------------------------- */

.adv-hours { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.adv-hours li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--neutral-200);
  font-size: 17px;
}
.adv-hours li:last-child { border-bottom: 0; }
.adv-hours .d { color: var(--neutral-600); }
.adv-hours .h { font-weight: 600; color: var(--primary); }

/* Sobre fondo oscuro */
.box-black .adv-hours li,
.adv-hours--dark li { border-bottom-color: rgba(255, 255, 255, .12); }
.box-black .adv-hours .d,
.adv-hours--dark .d { color: var(--neutral-400); }
.box-black .adv-hours .h,
.adv-hours--dark .h { color: #fff; }

/* --- Accesibilidad -------------------------------------------------------- */
/* El sitio actual bloquea el zoom y usa cuerpos muy pequeños: aquí se corrige. */

.adv-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--adv-turquesa);
  color: #012A47;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.adv-skip-link:focus { left: 0; color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--adv-turquesa);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* El mapa embebido respeta el radio del template */
.adv-map {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 40px;
  display: block;
}

/* --- El violeta como acento del sistema ----------------------------------- */
/* El turquesa sigue siendo la marca (es el logotipo). El violeta #044B7E
   aparece de forma consistente en el botón secundario, en los antetítulos y
   en las secciones de tecnología, equipo y valores.                          */

:root {
  --adv-violeta: #044B7E;
  --adv-violeta-claro: #366F98;
  --adv-violeta-oscuro: #044B7E;
}

/* Botón secundario: está en todos los pares de llamada a la acción */
.tf-btn-2 {
  color: var(--adv-violeta-oscuro);
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%),
              linear-gradient(0deg, #F0F8FD, #F5FAFD);
  box-shadow: 0px -3px 0px 0px #D0E9F7 inset,
              0px 1px 0px 0px rgba(255, 255, 255, 0.70) inset,
              0px 2.77px 2.21px 0px rgba(4,75,126, 0.14),
              0px 3px 3px 0px rgba(4,75,126, 0.16);
}
.tf-btn-2:hover {
  color: #fff;
  background: linear-gradient(180deg, var(--adv-violeta-claro) 0%, var(--adv-violeta) 100%);
  box-shadow: 0px 10px 24px rgba(4,75,126, .40);
}

/* El punto de cada antetítulo */
.heading-section .heading-sub::before { background-color: var(--adv-violeta); }
.heading-section .heading-sub.style-1::before { background-color: #fff; }

/* Tecnología · turquesa de la marca, que es el que rinde sobre fondo claro */
.section-tools {
  border-radius: 40px;
  margin: 0 16px;
  background:
    radial-gradient(52% 58% at 84% 14%, rgba(109,185,230, 0.42) 0%, rgba(109,185,230, 0) 64%),
    radial-gradient(46% 52% at 12% 86%, rgba(4,75,126, 0.26) 0%, rgba(4,75,126, 0) 64%),
    linear-gradient(140deg, #f5f7fa 0%, #E6EDF2 46%, #E6EDF2 100%);
}

/* Zona oscura: equipo, cifras, acreditaciones y testimonios */
.box-black::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 32% at 88% 6%, rgba(109,185,230, 0.55) 0%, rgba(109,185,230, 0) 66%),
    radial-gradient(38% 30% at 8% 96%, rgba(109,185,230, 0.38) 0%, rgba(109,185,230, 0) 66%);
}
.box-black > * { position: relative; z-index: 1; }



/* Iconos de las tarjetas: una progresión con tres colores de la paleta,
   todos con el mismo peso para que no se peleen entre sí. */

/* Etiquetas de las especialidades */
.list-tags .tags-item:hover,
.list-tags .tags-item:nth-child(even):hover {
  border-color: #6DB9E6;
  color: #6DB9E6;
}

/* Isotipo del centro de «Todo en un solo lugar»: caja azul noche con los
   cuatro círculos en cian (el blanco/azul sobre cian se veía raro). */
.features-center {
  background: linear-gradient(180deg, #012A47 0%, #012A47 100%),
              radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Otros hover sobre azul noche: cian, no violeta (el violeta ahí no se lee) */
.team-item .name:hover { color: #6DB9E6; }
.group-slider .group-btn-slider .btn-slider:hover .icon { color: #6DB9E6; }
/* Botones de redes del pie: pastilla blanca, así que el texto se enciende en
   violeta; el círculo sigue azul noche y su icono se queda en blanco. */
.tf-social-1 a:hover { color: #044B7E; }
.tf-social-1 a:hover .icon { color: #ffffff; }

/* Paginación y puntos de los deslizadores */
.pagi-dot span.active { background-color: var(--adv-violeta); }

/* --- Zonas de color por sección ------------------------------------------- */
/* Cada bloque grande recibe un tinte distinto de la paleta que Thomas
   documentó, para que se separen al hacer scroll sin romper la unidad.
   El turquesa del logotipo sigue mandando; el violeta es el segundo color.   */

:root {
  --adv-celeste: #6DB9E6;
  --adv-azul: #044B7E;
  --adv-marino: #012A47;
  --adv-lima: #044B7E;
}

/* Nosotros · turquesa, que es el color de la marca */
.section-about-us {
  position: relative;
  /* Sin manchas de color: el hero es una caja con su propio degradado y lo de abajo
     queda en blanco frio libre (#f5f7fa). Las dos manchas que habia chocaban con el
     borde de la caja. */
  background: none;
}


/* --- Más violeta en iconos y controles ------------------------------------ */


/* Paginación de noticias */
.wg-pagination .pagination-item.active,
.wg-pagination .pagination-item:hover { color: var(--brand); }

/* Botones de las tarjetas del equipo: al pasar el cursor, caja cian con el
   icono en azul noche (el par del documento para fondo cian). */
.tf-social .social-item:hover {
  background: #6DB9E6;
  box-shadow: 0 10px 24px rgba(109,185,230, .40);
}
.tf-social .social-item:hover .icon,
.tf-social .social-item:hover .icon * { color: #012A47 !important; }

/* Acreditaciones: el borde se enciende en violeta */
.awards-item:hover { border-color: rgba(109,185,230, .55); }


/* Indicadores de «Por qué Advance» */
.benefits-progress-inner .benefits-progress-item:nth-child(even) .progress-text .icon {
  color: var(--adv-violeta-oscuro);
}

/* Enlace activo del menú */
.nav-menu-main .item-link.active::after,
.nav-menu-main .item-link:hover::after { background-color: var(--adv-violeta); }

/* --- Reserva tu hora: campo de color en vez de fotografía ----------------- */
/* Sobre la foto de la sala de espera el titular y los datos de contacto se
   perdían. Se reemplaza por el mismo degradado de malla del hero, que además
   deja respirar al violeta.                                                  */

.section-contact .contact-image {
  overflow: hidden;
  background:
    radial-gradient(46% 54% at 84% 10%, rgba(109,185,230, 0.42) 0%, rgba(109,185,230, 0) 64%),
    radial-gradient(40% 48% at 10% 88%, rgba(109,185,230, 0.52) 0%, rgba(109,185,230, 0) 64%),
    radial-gradient(46% 52% at 100% 94%, rgba(109,185,230, 0.46) 0%, rgba(109,185,230, 0) 66%),
    linear-gradient(140deg, #f5f7fa 0%, #E9F5FB 44%, #D0E9F7 100%);
}

.section-contact .contact-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* El icono del medio de cada columna de «Todo en un solo lugar» va en violeta
   profundo: mismo peso que el verde azulado, para que convivan sin pelearse. */
/* Los seis iconos de «Todo en un solo lugar» van en azul noche (el de la columna del medio
   era violeta; Danilo los prefiere todos iguales). */

/* --- El ámbar como color de FONASA ---------------------------------------- */
/* Estaba suelto en una sola sección. Ahora marca siempre lo mismo: el bono. */

.adv-topbar strong { color: var(--adv-ambar); }

.section-pricing .price-per {
  color: #044B7E;
  background: rgba(159,212,18, .20);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.5;
  align-self: center;
}
.section-pricing .pricing-item.style-black .price-per {
  color: #C5E571;
  background: rgba(159,212,18, .16);
}

/* --- Hero: las líneas animadas van detrás del contenido ------------------- */

.adv-hero__lineas { top: 24%; bottom: 22%; }
.section-hero .container { position: relative; z-index: 2; }

/* --- Tecnología: aquí vive ahora la animación del template ----------------- */

.section-tools { position: relative; overflow: hidden; }

.adv-tools__pill {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 0;
  width: 255px;
  transform: translateX(-50%) scale(.82);
  transform-origin: center bottom;
  pointer-events: none;
}
.section-tools .container { position: relative; z-index: 1; }

@media (max-width: 1199px) { .adv-tools__pill { transform: translateX(-50%) scale(.66); bottom: 5%; } }

/* La nota al pie de los valores necesita aire: pegada al bloque se lee como
   parte de la tarjeta. */
.adv-nota-valores { margin-top: 56px; }
@media (max-width: 767px) { .adv-nota-valores { margin-top: 36px; } }

/* Credito del pie: sitio hecho por Punto Gris, con enlace a puntogris.cl.
   (Antes aqui estaba el aviso de «vista previa»: el sitio ya es el oficial.) */
.adv-credito { display: inline-block; margin-top: 6px; font-size: 13px; }
.adv-credito a { color: #012A47; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.adv-credito a:hover { color: #044B7E; }

/* --- Menú fijo ------------------------------------------------------------ */
/* El template dejaba la cabecera quieta arriba del todo. Al hacer scroll se
   queda pegada: en un sitio donde lo importante es reservar, el botón tiene
   que estar siempre a mano. */

.tf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: padding-top .28s ease;
}
.tf-header .header-inner { transition: box-shadow .28s ease, background-color .28s ease; }

.tf-header.adv-fijo { padding-top: 12px; }
.tf-header.adv-fijo .header-inner {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 30px rgba(1,42,71, .14);
}

@media (max-width: 991px) {
  .tf-header.adv-fijo { padding-top: 10px; }
}

/* --- El botón de «volver arriba» del template ----------------------------- */
#goTop { display: none !important; }

/* --- La barra de desplazamiento ------------------------------------------- */
/* El control de la derecha para subir y bajar es esta barra. El template la
   esconde con 'body::-webkit-scrollbar { width: 0 }', así que hay que
   repetir su misma especificidad para devolverla: una regla suelta
   ::-webkit-scrollbar pierde contra la suya aunque vaya después.

   Sigue la forma del sitio —pastilla redondeada y turquesa de la marca— sobre
   un riel apenas perceptible, en vez de la barra gris del navegador.

   En Chrome, 'scrollbar-width' y 'scrollbar-color' ganan sobre las reglas
   ::-webkit-scrollbar y la dejan como un hilo. Por eso las estándar se aplican
   sólo donde no existen las de WebKit, es decir en Firefox.                  */

html::-webkit-scrollbar,
body::-webkit-scrollbar,
::-webkit-scrollbar { width: 14px; height: 14px; }

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
::-webkit-scrollbar-track { background: rgba(230,237,242, .45); }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  border-radius: 99px;
  cursor: grab;
  background-color: #6DB9E6;
  background-image: linear-gradient(180deg, #6DB9E6 0%, #044B7E 100%);
  border: 4px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, #6DB9E6 0%, #044B7E 100%);
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
  background-image: linear-gradient(180deg, #6DB9E6 0%, #012A47 100%);
}
::-webkit-scrollbar-corner { background: transparent; }

@supports (scrollbar-color: auto) and (not selector(::-webkit-scrollbar)) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #6DB9E6 rgba(230,237,242, .55);
  }
}

/* --- Hero: escuadras en las esquinas -------------------------------------- */
/* El trazo sigue el radio real del borde del hero (40px). Por eso el dibujo va
   siempre a escala 1:1 y lo que cambia entre pantallas es cuánto se recorta,
   no el tamaño del arco: si se escalara, el arco dejaría de calzar.          */

.adv-esquinas {
  position: absolute;
  /* 20px por dentro del borde del hero: la curva queda concéntrica con él. */
  inset: 36px 36px 20px;
  z-index: 0;
  pointer-events: none;
}

.adv-esq {
  position: absolute;
  display: block;
  width: 190px;
  height: 128px;
  overflow: hidden;
}
.adv-esq svg { position: absolute; display: block; }

.adv-esq--si { top: 0; left: 0; }
.adv-esq--si svg { top: 0; left: 0; }
.adv-esq--sd { top: 0; right: 0; }
.adv-esq--sd svg { top: 0; right: 0; }
.adv-esq--ii { bottom: 0; left: 0; }
.adv-esq--ii svg { bottom: 0; left: 0; }
.adv-esq--id { bottom: 0; right: 0; }
.adv-esq--id svg { bottom: 0; right: 0; }

.adv-esq__base {
  stroke: rgba(1,42,71, .13);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.adv-esq__nodo { fill: rgba(4,75,126, .3); }

.adv-esq__pulso {
  stroke: var(--adv-turquesa-texto);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 46 1000;
  stroke-dashoffset: 1046;
  animation: advEsqPulso 5.4s linear infinite;
  opacity: .8;
}
.adv-esq--sd .adv-esq__pulso { animation-delay: 1.3s; }
.adv-esq--id .adv-esq__pulso { animation-delay: 2.6s; }
.adv-esq--ii .adv-esq__pulso { animation-delay: 3.9s; }

@keyframes advEsqPulso {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 991px) {
  .adv-esq { width: 140px; height: 100px; }
}
@media (max-width: 575px) {
  .adv-esq { width: 104px; height: 82px; }
}

/* El template baja el radio del hero a 24px bajo 767px, así que el arco de las
   escuadras se redibuja para seguir calzando. Si el navegador no admite 'd' en
   CSS, queda el trazo de 40px del atributo, que es el caso de escritorio. */
@media (max-width: 767px) {
  .adv-esquinas { inset: 28px 28px 12px; }
  .adv-esq--si path { d: path("M1 159 V12 A11 11 0 0 1 12 1 H239"); }
  .adv-esq--sd path { d: path("M1 1 H228 A11 11 0 0 1 239 12 V159"); }
  .adv-esq--ii path { d: path("M1 1 V148 A11 11 0 0 0 12 159 H239"); }
  .adv-esq--id path { d: path("M239 1 V148 A11 11 0 0 1 228 159 H1"); }
}

/* --- Ficha de especialidad ------------------------------------------------ */
/* El template sube la foto 371px para montarla sobre el hero. Ese hero sólo
   traía titular y bajada; el nuestro suma los botones, así que hay que
   reservarle ese alto o la foto se come las llamadas a la acción. */

.section-hero.v1.adv-hero--ficha .content-wrap { padding-bottom: 400px; }

@media (max-width: 767px) {
  /* En celular el template deja de montar la foto tan arriba. */
  .section-hero.v1.adv-hero--ficha .content-wrap { padding-bottom: 140px; }
}

/* ==========================================================================
   LEGIBILIDAD TRAS EL CAMBIO A CIAN
   El cian #6DB9E6 sobre blanco da 1,4:1: sirve de fondo, borde y acento, pero
   no de texto. Por eso el texto sobre claro usa el celeste profundo (#044B7E)
   y el cian se reserva para fondos oscuros. Aqui van los pocos sitios donde el
   template apagaba el texto mas de lo que se puede leer.
   ========================================================================== */

/* Numeros grandes y apagados del template: 72 px en gris casi blanco daban
   1,1:1. Se suben hasta 3:1, el minimo para texto grande, conservando que el
   segundo numero sea mas suave que el primero. */
.process-card .number .text-neutral-400 { color: #4D6A7E !important; }
.process-card .number .text-neutral-200 { color: #677F91 !important; }
.review-box .counter, .review-box .counter .number, .review-box .counter .adv-unit { color: #677F91 !important; }

/* El contador «1 / 3» de los testimonios va sobre fondo negro */
.swiper-testimonial_wrap .group-slider .testimonials-pagination,
.swiper-testimonial_wrap .group-slider .testimonials-pagination .swiper-pagination-total { color: #8D9FAC !important; }

/* Un texto de marca dentro de un bloque oscuro va en cian, no en el celeste
   profundo que es para fondo claro. La utilidad del template lleva !important. */
.text-white .text-brand, .box-black .text-brand, .blockquote-wrap .text-brand, .pricing-item.style-black .text-brand { color: var(--brand) !important; }
/* Las tres cajas de «Como reservas» son cian con icono azul noche (regla al final). */

/* «Ver area» sobre una foto: llevaba blanco sobre un velo translucido, y sobre
   una foto clara quedaba en gris claro con letra blanca (1,7:1). Con fondo
   propio, la letra se lee sea cual sea la foto. */
.featured-works-item .image .view-project { background: rgba(1,42,71, .86); color: #fff; }
.featured-works-item .image .view-project * { color: inherit; }

/* ==========================================================================
   HERO DE LA PORTADA, COMO LA REFERENCIA (26-10-2026)
   Todo acotado a .section-hero.adv-hero: solo la portada lleva esta clase, asi
   que las demas paginas no cambian.
   ========================================================================== */

/* Las escuadras animadas de las esquinas del hero SE QUEDAN. Las oculte yo por
   mi cuenta al leer mal «lineas a los lados»: Danilo se referia a las lineas
   que rodeaban a la doctora, que ya salieron con la caja nueva. Lo que no se
   pidio, no se toca. */

/* --- Titular: negrita y degradado del azul principal al turquesa ------------------------
   Cada linea hace su propio recorrido, de azul a turquesa, como en la
   referencia. Los extremos estan en los tonos mas claros que el fondo
   permite: #044B7E y #33838A (turquesa del manual oscurecido hacia el azul noche) sobre el blanco frio; el celeste
   puro #6DB9E6 daria 1,4:1 y no se podria leer. */
.section-hero.adv-hero .title {
  font-size: clamp(38px, 5.3vw, 84px) !important;
  line-height: .98 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}
.section-hero.adv-hero .title .title1,
.section-hero.adv-hero .title .title2 span {
  font-weight: 800 !important;
  background: linear-gradient(100deg, #044B7E 0%, #33838A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* --- Botones: dos pastillas planas -----------------------------------------
   El del template llevaba sombras interiores y brillo; aqui son planos.
   Principal: violeta con letra blanca (6,4:1): el cian se perdia contra el degradado celeste del fondo. Secundario: contorno celeste.
   Sin verde fluorescente: el color de conversion es el violeta secundario. */
.section-hero.adv-hero .bot-btns .tf-btn,
.section-hero.adv-hero .bot-btns .tf-btn-2 {
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.section-hero.adv-hero .bot-btns .tf-btn {
  background: #044B7E !important;
  border-color: #044B7E;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(4,75,126, .35) !important;
}
.section-hero.adv-hero .bot-btns .tf-btn:hover {
  background: #012A47 !important;
  border-color: #012A47;
  color: #fff !important;
}
/* Medido sobre el degradado real del fondo (celeste #6DB9E6 en el peor punto),
   #044B7E daba 3,3:1; con #012A47 da 5,3:1. */
.section-hero.adv-hero .bot-btns .tf-btn-2 {
  background: transparent !important;
  border-color: #012A47;
  color: #012A47 !important;
  box-shadow: none !important;
}
/* Al pasar el mouse: violeta con letra blanca (6,4:1). En cian se perdia contra el
   degradado celeste del fondo, igual que le pasaba al boton principal. */
.section-hero.adv-hero .bot-btns .tf-btn-2:hover {
  background: #044B7E !important;
  border-color: #044B7E;
  color: #fff !important;
}
.section-hero.adv-hero .bot-btns .tf-btn *,
.section-hero.adv-hero .bot-btns .tf-btn-2 * { color: inherit !important; }

/* --- Sellos de confianza: texto con icono, sin pastilla --------------------
   Pastillas con borde se leen como botones y son tres mas junto a los dos
   de verdad. Sin caja, solo informan. */
.section-hero.adv-hero .adv-badges { gap: 10px 30px; margin-top: 34px; justify-content: flex-start; }
.section-hero.adv-hero .adv-badge,
.section-hero.adv-hero .adv-badge--fonasa {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: #1F445D !important;
}
.section-hero.adv-hero .adv-badge .icon,
.section-hero.adv-hero .adv-badge--fonasa .icon { color: #012A47 !important; font-size: 15px; }
@media (max-width: 991px) { .section-hero.adv-hero .adv-badges { justify-content: center; } }

/* --- La doctora: sin halo, dentro de una caja redonda azul noche -----------
   Antes habia un circulo blanco detras y un recorte en diagonal. Ahora una
   caja con tres esquinas muy redondas y una pequena abajo a la izquierda, como
   la referencia. La cabeza asoma por encima de la caja.
   La foto mide EXACTAMENTE lo que la caja de ancho: asi los bordes rectos de
   la propia imagen (la tableta a la izquierda y la manga a la derecha llegan
   hasta el borde del PNG) caen justo sobre el borde de la caja y no se ven
   como un corte. Abajo se recorta con el mismo radio que la caja. */
.section-hero.adv-hero .adv-hero__blob {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(64%, 380px);
  height: 80%;
  aspect-ratio: auto;
  border-radius: 110px 110px 110px 28px;
  background: #012A47 !important;
  /* 1,5 px hacia dentro: por el antialias, la caja asomaba como un hilo oscuro por la
     curva de abajo, alrededor de la bata. */
  clip-path: inset(1.5px round 108px 108px 108px 26px);
}
.section-hero.adv-hero .adv-hero__person {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(64%, 380px);
  height: 94%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  clip-path: inset(0 round 0 0 110px 28px) !important;
  filter: none;
}
@media (max-width: 991px) {
  .section-hero.adv-hero .adv-hero__blob,
  .section-hero.adv-hero .adv-hero__person { width: min(72%, 320px); }
  .section-hero.adv-hero .adv-hero__blob { border-radius: 90px 90px 90px 24px; }
  .section-hero.adv-hero .adv-hero__person { clip-path: inset(0 round 0 0 90px 24px) !important; }
}

/* ==========================================================================
   LOS PARES DE COLOR DEL DOCUMENTO (lamina «Sobre que fondos va el logotipo»)
   Sobre cian: azul noche. Sobre violeta: blanco. Sobre azul noche: cian o
   blanco frio. Sobre blanco frio: azul noche, tinta o violeta. El cian NUNCA
   va como texto sobre claro (1,4:1) ni el blanco sobre cian.
   Las cajas de icono de «Como reservas» van las tres en cian, con el icono en azul noche.
   ========================================================================== */
.process-slide .process-card .icon { color: #012A47 !important; }   /* las tres cajas, cian con icono azul noche */   /* caja violeta */   /* caja azul noche */

/* La caja grande con el corazon (cian): el corazon va en azul noche */
.features-center .icon, .features-center i, .features-center svg { color: #012A47 !important; fill: #012A47; }

/* Check de la tarjetita «Hora confirmada» (caja cian) */
.adv-tarjeta .ic { color: #012A47; }
/* «Conoce el centro»: se queda la forma concava y el texto; solo sale la flecha. */
.section-hero .scroll-more .icon { display: none !important; }

/* ==========================================================================
   AJUSTES DE DANILO, 26-10
   ========================================================================== */

/* Botones «Reservar hora» de los precios: cian con letra azul noche. En la
   tarjeta azul noche el boton azul noche casi no se distinguia del fondo; en
   cian es el par del documento (cian sobre azul noche, azul noche sobre cian).
   Al pasar el mouse: azul noche con letra blanca en la tarjeta clara, y blanco
   frio con letra azul noche en la oscura (azul noche sobre azul noche no se ve). */
.section-pricing .pricing-item .tf-btn {
  background: #6DB9E6 !important;
  color: #012A47 !important;
  box-shadow: 0 8px 22px rgba(109,185,230, .30) !important;
}
.section-pricing .pricing-item .tf-btn * { color: inherit !important; }
.section-pricing .pricing-item .tf-btn:hover { background: #012A47 !important; color: #ffffff !important; }
.section-pricing .pricing-item.style-black .tf-btn:hover { background: #f5f7fa !important; color: #012A47 !important; }

/* Preguntas frecuentes: el boton +/- en violeta, con la cruz en blanco. */
.accordion-asked .accordion-button span {
  background: #044B7E !important;
  box-shadow: 0 6px 14px rgba(4,75,126, .30) !important;
}
.accordion-asked .accordion-button span::before,
.accordion-asked .accordion-button span::after { background-color: #ffffff; }

/* «Te esperamos en Villagran 199»: el titular y los datos de contacto estaban
   en los extremos de la columna (space-between) y quedaba un hueco enorme en el
   medio. Ahora van seguidos, arriba. */
#reservar .section-contact .col-left { justify-content: flex-start !important; }
#reservar .section-contact .col-left .heading-section { margin-bottom: 40px; }
/* Ajuste 25-10: en escritorio el bloque va centrado a lo alto de la caja del
   formulario y con un poco más de aire entre el titular y los datos. */
@media (min-width: 992px) {
  #reservar .section-contact .col-left { justify-content: center !important; }
  #reservar .section-contact .col-left .heading-section { margin-bottom: 56px; }
}
/* Foto de «Especialidades»: era una tira de 416×240 pegada abajo y quedaba
   pequeña junto a la tarjeta azul. Ahora es vertical y ocupa el alto libre de
   la columna; el lado derecho no cambia. */
.section-services .services-image {
  width: 100%;
  max-width: 440px;
  height: 560px;
}
@media (max-width: 991px) {
  .section-services .services-image { height: 380px; max-width: 100%; }
}

/* ===========================================================================
   TELEFONO (ajustes del 25-10 tras probar en un celular real)
   Todo lo de abajo va dentro de media queries: en escritorio no cambia nada.
   =========================================================================== */

/* El template esconde cada bloque (opacity:0) hasta que GSAP lo anima al llegar
   con el scroll. En un celular real, con la barra del navegador que sube y baja
   y las imágenes cargando, esa animación a veces no llega a dispararse y el
   bloque queda invisible pero ocupando su alto: huecos enormes y contenido
   «borrado». En pantallas chicas y táctiles todo se muestra siempre. */
@media (max-width: 991px), (pointer: coarse) {
  html .effectFade {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* «Sin llamar para preguntar cuánto cuesta…»: en el celular, dos frases
   separadas, y el interruptor con su texto en una línea propia. */
@media (max-width: 767px) {
  .section-pricing .adv-corte { display: block; height: 18px; }
  .section-pricing .adv-corte-sw { display: block; height: 6px; }
}
@media (max-width: 767px) {
  .section-pricing .heading-title { font-size: 35px; line-height: 43px; }
}

/* Hero en el celular: las tarjetas flotantes tapaban la cara y el brazo de la
   doctora. La figura sube a 380px y las dos tarjetas bajan a la altura del
   torso, una encima de la otra y sin cruzarse con la cara. */
@media (max-width: 575px) {
  .adv-hero__figure { height: 380px; }
  .adv-tarjeta { font-size: 11.5px; padding: 8px 11px; gap: 8px; }
  .adv-tarjeta small { font-size: 10.5px; }
  .adv-tarjeta .ic { width: 28px; height: 28px; flex: 0 0 28px; font-size: 13px; }
  .adv-tarjeta--1 { top: auto; bottom: 17%; left: 0; }
  .adv-tarjeta--2 { top: auto; bottom: 3%; right: 0; }
}

/* «Un centro moderno» y «Quién te va a atender» estaban pegadas: se separan. */
.section-tools { margin-bottom: 40px; }
@media (max-width: 767px) { .section-tools { margin-bottom: 24px; } }

/* ===========================================================================
   MARCA ADVANCE SALUD (Manual de Marca, Merken Digital) — ajustes de capa
   Pares de color: sobre celeste y lima va azul noche #012A47; sobre azul
   principal #044B7E y azul noche va blanco o celeste. Solo cambian colores y logo.
   =========================================================================== */

/* Tamaño de los isotipos (ahora son PNG del manual, no SVG a medida) */
footer .footer-content .footer-logo img { width: 86px; height: 86px; }
.features-center img { width: 144px; height: auto; }

/* Capas sobre los bloques azul noche: el azul noche solo no separa la tarjeta
   del fondo, así que las tarjetas y los bordes suben un paso hacia el azul
   principal (mitad de camino entre #012A47 y #044B7E). */
:root { --adv-capa: #033A63; }
.team-item,
.awards-item:hover {
  background:
    linear-gradient(0deg, var(--adv-capa), var(--adv-capa)),
    radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}
.awards-item { border-color: var(--adv-capa); }

/* Lima: el tercer color del isotipo, en los acentos pequeños */
.heading-section .heading-sub::before { background-color: #9FD412; }
.adv-chip.is-active { background: #9FD412; border-color: #9FD412; color: #012A47; }

/* Noticias: las fotos de la lista tenían anchos y altos distintos y se veía
   desordenado. Todas pasan a ser mosaicos iguales (3:2), recortadas al centro. */
.article-blog .blog-image { display: block; overflow: hidden; }
.article-blog .blog-image img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 426px) {
  .article-blog.style-horizontal .blog-image { flex: 0 0 300px; width: 300px; max-width: 300px; }
  .article-blog.style-horizontal .blog-image img { height: 200px; aspect-ratio: auto; }
}

/* «Cómo llegar»: la tarjeta de Dirección (dos líneas) quedaba más alta que las
   otras dos. En escritorio las tres miden lo mismo. */
@media (min-width: 768px) {
  .section-contact .row > .col-md-4 { display: flex; }
  .section-contact .row > .col-md-4 > .overflow-hidden { display: flex; width: 100%; }
  .section-contact .row > .col-md-4 .box-contact-item { width: 100%; }
}

/* --- Revisión del 24-10-2026 (sin reglas de color: las da la paleta B) ---- */
.adv-aviso-demo { opacity: 1; color: var(--secondary); }

/* Contenido de ejemplo, rotulado a la vista mientras no llegue el definitivo. */
.adv-ejemplo {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.adv-nota-ejemplo {
  max-width: 560px;
  margin: -32px auto 40px;
  padding: 10px 18px;
  border: 1px dashed var(--secondary);
  border-radius: 16px;
  color: var(--secondary);
  font-size: 15px;
  text-align: center;
}
.adv-nota-ejemplo--oscuro { border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .86); }
.pricing-item.style-black .adv-ejemplo { color: rgba(255, 255, 255, .86); }

/* Celular: la ilustración de «Pensado para toda la comuna» tapaba el título. */
@media (max-width: 575px) {
  .benefits-design .content { margin-top: 56px; }
}

/* El <select> del template no usa border-box y se salía de la tarjeta. */
form select { box-sizing: border-box; max-width: 100%; }

/* El título del hero pasó de <div> a <h1>: mismo aspecto que antes. */
h1.title { color: inherit; font-weight: inherit; }