/* Estilos que antes vivian "scoped" dentro de los componentes .astro.
   Se convierten a reglas globales porque EJS no tiene scoping de CSS. */

/* Web-only utilities: estos elementos sólo se muestran en desktop. En mobile los
   oculta `mobile/app.css`. El web/app.css carga con media="(min-width: 992px)",
   así que estas reglas sólo aplican cuando el navegador las solicita. */
.cv-web-only { display: initial; }
.cv-mobile-only { display: none !important; }


/* Color de marca (#036d3f, tomado del logo) reemplazando el azul/cian original
   del tema, para que toda la web (botones, links, iconos, acentos) tenga armonia
   con el logo. Se sobreescriben las mismas variables que define el tema base en
   html[data-theme-color=skin-1], con mayor especificidad/orden para que ganen. */
html[data-theme-color="skin-1"] {
  --bs-primary: #036d3f;
  --bs-primary-rgb: 3, 109, 63;
  --bs-primary-text-emphasis: rgb(1.2, 43.6, 25.2);
  --bs-primary-bg-subtle: rgb(204.6, 225.8, 216.6);
  --bs-primary-border-subtle: rgb(204.6, 225.8, 216.6);
  --bs-primary-btn-hover-bg: rgb(2.55, 92.65, 53.55);
  --bs-primary-btn-hover-border-color: rgb(2.55, 92.65, 53.55);
}

:root {
  --primary-hover: #048f52;
}

/* El tema base usa left:-125px sin condicion de ancho para el widget "item1" de la
   seccion de clinica virtual. Esto se sale del viewport en anchos de laptop comunes
   (~1481px-1700px), donde el gutter real del contenedor es menor a 125px. Se reduce
   el offset para que la cinta nunca quede recortada, en cualquier ancho por encima
   del breakpoint donde el propio tema ya reduce el valor a -50px. */
@media (min-width: 1481px) {
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) .item1 {
    left: -60px;
  }
}

/* La composición de imágenes de la clínica virtual necesita más aire en los
   anchos grandes y una separación real cuando los elementos se apilan en móvil. */
@media (min-width: 1200px) {
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) {
    padding-left: 18px;
    padding-right: 112px;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) .item1 {
    left: -70px;
    transform: scale(0.94);
    transform-origin: left top;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) .item2 {
    right: -18px;
    transform: scale(0.94);
    transform-origin: right bottom;
  }
}

@media (max-width: 767px) {
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .dz-media,
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item1,
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item2 {
    position: static;
    width: 100%;
    margin: 0;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item1 {
    padding: 0;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item2 {
    display: flex;
    justify-content: center;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item2 .info-widget.style-6 {
    width: min(100%, 300px);
    margin: 0;
  }
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background-color: var(--bs-light, #ecf5fb);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary, #036d3f);
  border-radius: 6px;
  border: 3px solid var(--bs-light, #ecf5fb);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-secondary, #031b4e);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-primary, #036d3f) var(--bs-light, #ecf5fb);
}

/* Las anclas del menu quedan visibles debajo del encabezado fijo. */
#inicio,
#clinica-virtual,
#especialidades,
#informacion,
#contacto {
  scroll-margin-top: 92px;
}

/* ===== Header ===== */
.header-info-row {
  --bs-gutter-x: 2rem;
  align-items: center;
}

.header-info-item {
  display: flex;
  align-items: center;
}

.header-info-item .icon-bx-wraper.style-5 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  min-height: 56px;
}

.header-info-item .icon-bx-wraper.style-5 .icon-bx {
  width: 52px;
  min-width: 52px;
  display: flex;
  justify-content: center;
}

.header-info-item .icon-bx-wraper.style-5 .icon-cell {
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-info-item .icon-bx-wraper.style-5 .icon-cell img {
  max-width: 45px;
  max-height: 45px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.inner-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
  padding-left: 560px;
}

/* El logo se saca del flujo del flex para que pueda pegarse al borde izquierdo
   del header y ocupar casi todo su alto, sin depender del padding del
   container-fluid (que empuja todo lo demas hacia la derecha). */
.logo-header {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Panel blanco con corte diagonal detras del logo: el logo tiene su propio fondo
   blanco (no es transparente), asi que este panel lo continua y luego corta en
   diagonal hacia el azul del resto del header. */
.logo-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 600px;
  max-width: 80%;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%);
  z-index: 0;
}

.logo-header img {
  width: auto;
  height: 64px;
  max-width: none;
}

.footer-logo img {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(3, 27, 78, 0.18);
}

@media (max-width: 991.98px) {
  .inner-bar {
    padding-left: 320px;
  }

  .logo-header {
    left: 20px;
  }

  .logo-panel {
    width: 340px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  }

  .logo-header img {
    height: 46px;
  }
}

@media (max-width: 575px) {
  .inner-bar {
    padding-left: 210px;
  }

  .logo-header {
    left: 14px;
  }

  .logo-panel {
    width: 230px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%);
  }

  .logo-header img {
    height: 34px;
  }
}

.header-nav {
  flex: 1 1 auto;
}

.main-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  min-height: 72px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
  color: var(--bs-primary);
}

.login-menu-item {
  position: relative;
}

.login-trigger {
  align-items: center;
  background: var(--bs-primary);
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  padding: 0 22px;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.login-trigger .login-avatar {
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  display: none;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.login-trigger .login-avatar--initials {
  align-items: center;
  background: var(--bs-secondary);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
}

.login-trigger.is-authenticated {
  background: transparent;
  border-radius: 50%;
  min-height: 48px;
  padding: 0;
  width: 48px;
}

.login-trigger.is-authenticated span:not(.login-avatar) {
  display: none;
}

.login-trigger.is-authenticated .login-avatar {
  display: block;
}

.login-trigger.is-authenticated .login-avatar--initials {
  display: flex;
}

.login-trigger:hover,
.login-trigger:focus-visible {
  background: var(--primary-hover);
  box-shadow: 0 12px 24px rgba(3, 109, 63, 0.24);
  color: #ffffff;
  transform: translateY(-1px);
}

.login-trigger.is-authenticated:hover,
.login-trigger.is-authenticated:focus-visible {
  background: transparent;
}

.session-popover {
  background: #ffffff;
  border: 1px solid rgba(3, 27, 78, 0.08);
  border-radius: 18px 18px 34px 18px / 18px 18px 28px 18px;
  box-shadow: 0 18px 38px rgba(3, 27, 78, 0.14);
  min-width: 168px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 10000;
}

.session-popover::before {
  background: #ffffff;
  border-left: 1px solid rgba(3, 27, 78, 0.08);
  border-top: 1px solid rgba(3, 27, 78, 0.08);
  content: "";
  height: 12px;
  position: absolute;
  right: 18px;
  top: -7px;
  transform: rotate(45deg);
  width: 12px;
}

.session-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.session-popover .session-popover__button {
  align-items: center;
  background: #f8fbfd;
  border: 1px solid rgba(3, 27, 78, 0.08);
  border-radius: 12px;
  color: var(--bs-secondary);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: 100%;
}

.session-popover .session-popover__button:hover,
.session-popover .session-popover__button:focus-visible {
  background: var(--bs-primary);
  color: #ffffff;
}

.login-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

.login-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

html.login-modal-open,
body.login-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.login-modal__overlay {
  backdrop-filter: blur(6px);
  background: rgba(3, 27, 78, 0.58);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.login-modal__dialog {
  background: #ffffff;
  border: 1px solid rgba(3, 27, 78, 0.08);
  border-radius: 30px 30px 88px 30px / 30px 30px 68px 30px;
  box-shadow:
    0 22px 46px rgba(3, 27, 78, 0.12),
    0 28px 80px rgba(3, 27, 78, 0.22);
  max-width: 430px;
  overflow: hidden;
  padding: 134px 36px 34px;
  position: relative;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.2s ease;
  width: min(100%, 430px);
}

.login-modal__dialog::before {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.92) 0 34px, rgba(255, 255, 255, 0) 35px),
    linear-gradient(135deg, rgba(236, 245, 251, 0.96), rgba(3, 109, 63, 0.14));
  border-radius: 0 0 30px 0 / 0 0 24px 0;
  content: "";
  height: 92px;
  left: 0;
  position: absolute;
  right: 70px;
  top: 0;
}

.login-modal.is-open .login-modal__dialog {
  transform: translateY(0) scale(1);
}

.login-modal__shape {
  align-items: center;
  display: flex;
  height: 92px;
  left: 0;
  padding-left: 36px;
  position: absolute;
  right: 70px;
  top: 0;
  z-index: 1;
}

.login-modal__icon {
  align-items: center;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(3, 27, 78, 0.1);
  display: inline-flex;
  height: 58px;
  justify-content: center;
  padding: 10px;
  width: 58px;
}

.login-modal__icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.login-modal__close {
  align-items: center;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(3, 27, 78, 0.08);
  color: var(--bs-secondary);
  cursor: pointer;
  display: inline-flex;
  font-size: 28px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 20px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  width: 36px;
  z-index: 1;
}

.login-modal__close:hover,
.login-modal__close:focus-visible {
  background: var(--bs-primary);
  color: #ffffff;
  transform: none;
}

.login-modal__head {
  border-bottom: 1px dashed rgba(3, 27, 78, 0.18);
  margin: 0 0 22px;
  padding: 0 0 22px;
  position: relative;
  z-index: 1;
}

.login-modal__head h2 {
  color: var(--bs-secondary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
}

.login-modal__head p {
  color: #566593;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.login-form {
  display: grid;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.login-form label {
  color: var(--bs-secondary);
  display: grid;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}

.login-form input {
  background: #f8fbfd;
  border: 1px solid #d9e6ef;
  border-radius: 16px;
  color: var(--bs-secondary);
  font: inherit;
  min-height: 50px;
  outline: none;
  padding: 11px 14px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.login-form input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(3, 109, 63, 0.16);
}

.login-form__submit {
  background: var(--bs-primary);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  min-height: 50px;
  padding: 0 18px;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.login-form__submit:hover,
.login-form__submit:focus-visible {
  background: var(--primary-hover);
  box-shadow: 0 12px 24px rgba(3, 109, 63, 0.2);
  transform: translateY(-1px);
}

.login-form__submit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.login-form__message {
  color: var(--bs-secondary);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-height: 18px;
}

@media (max-width: 991px) {
  .main-bar,
  .inner-bar {
    min-height: 72px;
  }

  .inner-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    padding: 0 76px 0 170px;
  }

  .mobile-menu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    float: none;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100000;
  }

  .mobile-menu-toggle .navicon {
    display: block;
  }

  .header-nav.mo-left {
    background: var(--bs-secondary);
    box-shadow: 12px 0 30px rgba(3, 27, 78, 0.2);
    padding-top: 72px;
  }

  .header-nav.mo-left .main-navigation {
    gap: 0;
    padding: 0 20px 20px;
  }

  .main-navigation {
    display: block;
  }

  .main-navigation a {
    color: #ffffff;
    min-height: 32px;
    font-size: 14px;
    min-height: 48px;
    width: 100%;
  }

  .header-nav.mo-left .main-navigation > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .header-nav.mo-left .login-menu-item {
    border-bottom: 0;
    padding-top: 18px;
  }

  .login-trigger {
    min-height: 38px;
    padding: 0 18px;
  }
}

@media (max-width: 575px) {
  .inner-bar {
    padding-left: 150px;
    padding-right: 68px;
  }

  .logo-header img {
    height: auto;
    max-width: min(200px, calc(100vw - 86px));
    width: 200px;
  }

  #por-que-elegir .row-wrapper {
    margin-left: 0;
    margin-right: 0;
  }

  [data-facilities-section] .info-widget.style-6 .info-icon {
    right: 0;
  }

  .login-modal {
    padding: 16px;
  }

  .login-modal__dialog {
    padding: 28px 22px 24px;
  }

  .login-modal__head h2 {
    font-size: 24px;
  }
}

@media (min-width: 992px) {
  .mobile-menu-toggle,
  .mobile-menu-close {
    display: none;
  }
}

@media (max-width: 991px) {
  .mobile-menu-close {
    border: 0;
    cursor: pointer;
    padding: 0;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }
}

/* ===== Hero ===== */
[data-hero-section] {
  position: relative;
  isolation: isolate;
}

[data-hero-section]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-bg.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  z-index: -1;
}

[data-hero-section] .hero-title-line,
[data-hero-section] .hero-title-accent {
  display: block;
}

[data-hero-section] .heartbeat-icon {
  width: 82px;
  height: 48px;
  color: #ff5f7d;
  filter: drop-shadow(0 0 12px rgba(255, 95, 125, 0.35));
  animation: heartbeat-scale 1.8s ease-in-out infinite;
}

[data-hero-section] .heartbeat-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-hero-section] .heartbeat-line-bg,
[data-hero-section] .heartbeat-line-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

[data-hero-section] .heartbeat-line-bg {
  stroke: rgba(255, 95, 125, 0.2);
}

[data-hero-section] .heartbeat-line-path {
  stroke: currentColor;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: heartbeat-trace 1.8s linear infinite;
}

@keyframes heartbeat-trace {
  0% {
    stroke-dashoffset: 160;
    opacity: 0.35;
  }
  15% {
    opacity: 1;
  }
  65% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -160;
    opacity: 0.2;
  }
}

@keyframes heartbeat-scale {
  0%,
  100% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.02);
  }
  28% {
    transform: scale(1.08);
  }
  38% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-section] .heartbeat-icon,
  [data-hero-section] .heartbeat-line-path {
    animation: none;
  }

  [data-hero-section] .heartbeat-line-path {
    stroke-dashoffset: 0;
  }
}

[data-hero-section] .hero-content .title {
  max-width: 620px;
  font-size: clamp(3.2rem, 5vw, 5.3rem);
  line-height: 1.08;
}

[data-hero-section] .hero-benefit-card {
  max-width: 300px;
  padding: 1.8rem 2rem;
  border-radius: 2rem;
}

[data-hero-section] .hero-benefit-card .title {
  margin: 0 0 0.8rem;
  font-size: 1.8rem;
  line-height: 1.15;
}

[data-hero-section] .hero-benefit-card p {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.45;
}

@media (min-width: 992px) and (max-width: 1919.98px) {
  .hero-banner.style-1[data-hero-section] .item4 {
    right: 90px;
  }

  [data-hero-section] .hero-benefit-card {
    max-width: 220px;
    padding: 1.4rem 1.6rem;
  }

  [data-hero-section] .hero-benefit-card .title {
    font-size: 1.4rem;
  }

  [data-hero-section] .hero-benefit-card p {
    font-size: 1.1rem;
  }
}

@media (max-width: 991.98px) {
  [data-hero-section] .hero-content .title {
    max-width: none;
  }

  [data-hero-section] .hero-benefit-card {
    max-width: 260px;
    padding: 1.6rem 1.8rem;
  }

  [data-hero-section] .hero-benefit-card .title {
    font-size: 1.7rem;
  }

  [data-hero-section] .hero-benefit-card p {
    font-size: 1.2rem;
  }
}

/* ===== Wellness services ===== */
[data-wellness-services-section] .cv-conditions-header {
  margin-bottom: 42px;
}

[data-wellness-services-section] .cv-conditions-header .title {
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.06;
}

[data-wellness-services-section] .cv-conditions-header .title span {
  display: block;
}

[data-wellness-services-section] .cv-conditions-header .cv-conditions-note {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(3, 27, 78, 0.62);
}

[data-wellness-services-section] .cv-conditions-grid > [class*="col-"] {
  align-items: stretch;
}

[data-wellness-services-section] .cv-conditions-grid .icon-bx-wraper.style-3 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

[data-wellness-services-section] .tabler-service-icon {
  width: 58px;
  height: 58px;
  color: var(--bs-secondary);
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover .tabler-service-icon {
  color: #ffffff;
}

[data-wellness-services-section] .icon-bg .tabler-service-icon {
  width: 160px;
  height: 160px;
  color: var(--bs-secondary);
  opacity: 0.08;
  stroke-width: 1.35;
}

[data-wellness-services-section] .icon-bx-wraper.style-3 {
  background: #ffffff;
  border: 1px solid rgba(3, 27, 78, 0.06);
  border-radius: 30px 30px 88px 30px / 30px 30px 68px 30px;
  box-shadow: 0 16px 34px rgba(3, 27, 78, 0.05);
  clip-path: none;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

[data-wellness-services-section] .icon-bx-wraper.style-3::before {
  display: none;
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover {
  background: var(--bs-primary);
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(3, 27, 78, 0.09);
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover .icon-content .dz-title,
[data-wellness-services-section] .icon-bx-wraper.style-3:hover .icon-content p {
  color: #ffffff;
}

[data-wellness-services-section] .icon-bx-wraper.style-3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  background:
    radial-gradient(circle at 100% 100%, rgba(3, 109, 63, 0.16), rgba(3, 109, 63, 0) 58%),
    linear-gradient(180deg, rgba(3, 109, 63, 0), rgba(3, 109, 63, 0.06));
  pointer-events: none;
  z-index: 0;
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover::after {
  background:
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16));
}

[data-wellness-services-section] .icon-bx-head,
[data-wellness-services-section] .appointment-footer {
  position: relative;
  z-index: 1;
}

[data-wellness-services-section] .appointment-footer {
  justify-content: flex-start;
  padding-top: 18px;
  border-top: 1px dashed rgba(3, 27, 78, 0.16);
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover .appointment-footer {
  border-top-color: rgba(255, 255, 255, 0.35);
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover .appointment-footer,
[data-wellness-services-section] .icon-bx-wraper.style-3:hover .appointment-footer i,
[data-wellness-services-section] .icon-bx-wraper.style-3:hover .appointment-footer span {
  color: #ffffff;
}

[data-wellness-services-section] .appointment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

[data-wellness-services-section] .appointment-badge i {
  color: var(--bs-primary);
  font-size: 17px;
  line-height: 1;
}

[data-wellness-services-section] .icon-bx-wraper.style-3:hover .appointment-badge i,
[data-wellness-services-section] .icon-bx-wraper.style-3:hover .appointment-badge span {
  color: #ffffff;
}

[data-wellness-services-section] .appointment-badge:hover {
  color: var(--bs-primary);
}

@media (max-width: 575.98px) {
  [data-wellness-services-section] .cv-conditions-header {
    margin-bottom: 30px;
  }
}

/* ===== Appointment (informacion) ===== */
[data-appointment-section] {
  padding-top: 60px;
  padding-bottom: 0;
}

[data-appointment-section] .form-body {
  background-image: none !important;
  background-color: #123b70 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 55px rgba(3, 27, 78, 0.2);
  border-radius: 20px;
}

[data-appointment-section] .text-vertical {
  background-color: var(--bs-secondary);
  box-shadow: 0 12px 28px rgba(3, 27, 78, 0.14);
}

[data-appointment-section] .form-title .appointment-title-plain {
  color: #ffffff !important;
}

[data-appointment-section] .form-title .appointment-title-accent {
  color: #8de3bd !important;
}

[data-appointment-section] .form-floating.input-light .form-control,
[data-appointment-section] .form-floating.input-light .form-select {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  padding-left: 0 !important;
}

[data-appointment-section] .form-floating.input-light .form-select {
  padding-right: 1.5rem !important;
  height: calc(3.5rem + 2px) !important;
  line-height: 1.25 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238de3bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 14px 10px !important;
  cursor: pointer;
}

[data-appointment-section] .form-floating.input-light .form-select option {
  background-color: #123b70 !important;
  color: #ffffff !important;
  padding: 10px;
}

[data-appointment-section] .form-floating.input-light .form-control:focus,
[data-appointment-section] .form-floating.input-light .form-select:focus,
[data-appointment-section] .form-floating.input-light .form-control:not(:placeholder-shown),
[data-appointment-section] .form-floating.input-light .form-select:valid {
  border-bottom-color: #8de3bd !important;
}

[data-appointment-section] .form-floating.input-light label {
  color: rgba(255, 255, 255, 0.72) !important;
  padding-left: 0 !important;
}

[data-appointment-section] .form-floating.input-light .form-control:focus ~ label,
[data-appointment-section] .form-floating.input-light .form-select:focus ~ label,
[data-appointment-section] .form-floating.input-light .form-control:not(:placeholder-shown) ~ label,
[data-appointment-section] .form-floating.input-light .form-select:valid ~ label {
  color: #8de3bd !important;
}

/* ===== Public information pages ===== */
[data-public-information-page] {
  background:
    linear-gradient(135deg, rgba(236, 245, 251, 0.96), rgba(255, 255, 255, 0.98)),
    url(/images/footer-bg.webp) center / cover;
}

[data-public-information-page] .public-information-hero {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

[data-public-information-page] .public-information-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--bs-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-public-information-page] .public-information-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bs-primary);
}

[data-public-information-page] .public-information-title {
  margin-bottom: 18px;
  color: var(--bs-secondary);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.12;
}

[data-public-information-page] .public-information-intro {
  max-width: 700px;
  margin: 0 auto 18px;
  color: #566593;
  font-size: 18px;
}

[data-public-information-page] .public-information-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(3, 109, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--bs-primary);
  font-size: 13px;
  font-weight: 600;
}

[data-public-information-page] .public-information-content {
  padding: 38px 42px;
  border: 1px solid rgba(3, 27, 78, 0.07);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 45px rgba(3, 27, 78, 0.06);
}

[data-public-information-page] .public-information-block + .public-information-block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px dashed rgba(3, 27, 78, 0.16);
}

[data-public-information-page] .public-information-block h2,
[data-public-information-page] .public-information-aside h2 {
  color: var(--bs-secondary);
  font-size: 24px;
  line-height: 1.25;
}

[data-public-information-page] .public-information-block p,
[data-public-information-page] .public-information-aside p {
  margin-bottom: 0;
  color: #566593;
}

[data-public-information-page] .public-information-list,
[data-public-information-page] .public-information-links {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

[data-public-information-page] .public-information-list li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 24px;
  color: var(--bs-secondary);
}

[data-public-information-page] .public-information-list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 5px rgba(3, 109, 63, 0.1);
}

[data-public-information-page] .public-information-links li + li {
  margin-top: 10px;
}

[data-public-information-page] .public-information-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
}

[data-public-information-page] .public-information-links a:hover {
  color: var(--bs-secondary);
}

[data-public-information-page] .public-information-links i {
  font-size: 17px;
}

[data-public-information-page] .public-information-aside {
  position: sticky;
  top: 28px;
  padding: 34px 30px;
  border-radius: 28px 28px 72px 28px;
  background: linear-gradient(145deg, #031b4e, #123b70);
  box-shadow: 0 22px 48px rgba(3, 27, 78, 0.16);
}

[data-public-information-page] .public-information-aside-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(141, 227, 189, 0.16);
  color: #8de3bd;
  font-size: 24px;
}

[data-public-information-page] .public-information-aside h2 {
  color: #ffffff;
}

[data-public-information-page] .public-information-aside p {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.76);
}

[data-public-information-page] .public-information-aside .btn {
  width: 100%;
  justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  [data-public-information-page] .public-information-hero {
    margin-bottom: 30px;
  }

  [data-public-information-page] .public-information-intro {
    font-size: 16px;
  }

  [data-public-information-page] .public-information-content {
    padding: 28px 24px;
    border-radius: 22px;
  }

  [data-public-information-page] .public-information-aside {
    position: static;
    border-radius: 22px 22px 52px 22px;
  }
}

/* ===== FAQ ===== */
[data-faq-section] {
  padding-bottom: 20px !important;
}

[data-faq-section] .content-wrapper.style-5 .content-media .faq-action-card {
  position: absolute;
  bottom: 28px;
  padding: 0;
  width: fit-content;
  min-width: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

@media only screen and (max-width: 575px) {
  [data-faq-section] {
    padding-bottom: 10px !important;
  }

  [data-faq-section] .content-wrapper.style-5 .content-media .faq-action-card {
    bottom: 18px;
  }

}

/* ===== Blog ===== */
[data-blog-section] {
  background: #f5f9fc;
  padding: 105px 0 125px !important;
}

[data-blog-section] .dz-card.style-2 {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

/* Gradient overlay for cards with background images */
[data-blog-section] .dz-card.style-2.dz-card-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3, 27, 78, 0.70) 0%, rgba(3, 27, 78, 0.35) 45%, rgba(3, 27, 78, 0.92) 100%) !important;
  z-index: 1;
  transition: opacity 0.3s ease;
  opacity: 1 !important;
}

[data-blog-section] .dz-card.style-2.dz-card-overlay:hover::before {
  background: linear-gradient(180deg, rgba(3, 27, 78, 0.82) 0%, rgba(3, 27, 78, 0.50) 45%, rgba(3, 27, 78, 0.96) 100%) !important;
}

/* Ensure card content sits above the gradient overlay */
[data-blog-section] .dz-card.style-2 .dz-info {
  position: relative;
  z-index: 2;
}

/* Title text high contrast on image cards */
[data-blog-section] .dz-card.style-2.dz-card-overlay .dz-title a,
[data-blog-section] .dz-card.style-2.dz-card-overlay .dz-title {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  font-weight: 700 !important;
}

/* Date badge styling for high contrast */
[data-blog-section] .dz-card.style-2 .post-date {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: #031b4e !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 12px !important;
}

/* Overrides for no-image plain card (Card 3) */
[data-blog-section] .dz-card.style-2.no-image {
  background-color: #ecf5fb !important;
  background-image: none !important;
  border: 1px solid rgba(3, 27, 78, 0.08);
}

[data-blog-section] .dz-card.style-2.no-image::before {
  display: none !important;
}

[data-blog-section] .dz-card.style-2.no-image .dz-title a,
[data-blog-section] .dz-card.style-2.no-image .dz-title {
  color: #031b4e !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

[data-blog-section] .dz-card.style-2.no-image .post-date {
  background-color: #031b4e !important;
  color: #ffffff !important;
}

@media only screen and (max-width: 575px) {
  [data-blog-section] {
    padding: 70px 0 85px !important;
  }
}

/* ===== Contact map ===== */
[data-contact-map-section] {
  background: #ffffff;
  padding: 125px 0 135px;
}

[data-contact-map-section] .contact-map-visual {
  position: relative;
  min-height: 520px;
  overflow: visible;
}

[data-contact-map-section] .contact-map-tiles {
  display: grid;
  grid-template-columns: repeat(9, 256px);
  grid-template-rows: repeat(3, 256px);
  height: 768px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.08);
  width: 2304px;
}

[data-contact-map-section] .contact-map-image {
  display: block;
  filter: none;
  height: auto;
  margin: 0 auto;
  mix-blend-mode: multiply;
  object-fit: contain;
  pointer-events: none;
  width: min(100%, 620px);
}

[data-appointment-section] .phone-field {
  min-height: calc(3.5rem + 2px);
}

[data-appointment-section] .phone-field__label {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 7px;
  transition: color 0.2s ease;
}

[data-appointment-section] .phone-field__control {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  min-height: 34px;
  transition: border-color 0.2s ease;
}

[data-appointment-section] .phone-field__country {
  position: relative;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: 12px;
  padding-right: 12px;
}

[data-appointment-section] .phone-field__country-select {
  appearance: none;
  background: transparent;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 172px;
  outline: none;
  padding: 0 18px 0 0;
  white-space: nowrap;
}

[data-appointment-section] .phone-field__country::after {
  color: rgba(255, 255, 255, 0.75);
  content: '⌄';
  font-size: 14px;
  pointer-events: none;
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-55%);
}

[data-appointment-section] .phone-field__country-select option {
  background: #ffffff;
  color: #101828;
}

[data-appointment-section] .phone-field .form-control {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  flex: 1 1 auto;
  font-size: 15px;
  height: 34px;
  min-width: 0;
  outline: none !important;
  padding: 0 !important;
}

[data-appointment-section] .phone-field .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

[data-appointment-section] .phone-field:focus-within .phone-field__label,
[data-appointment-section] .phone-field:focus-within .phone-field__country-select {
  color: #8de3bd;
}

[data-appointment-section] .phone-field:focus-within .phone-field__control {
  border-bottom-color: #8de3bd;
}

[data-appointment-section] .phone-field__hint {
  color: rgba(255, 255, 255, 0.55);
  display: block;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 6px;
}

[data-appointment-section] .appointment-form-actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  min-height: 60px;
  position: relative;
}

[data-appointment-section] .appointment-form-actions .turnstile-wrap--invisible {
  height: 1px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}

[data-appointment-section] .appointment-form-actions .turnstile-wrap--invisible .cf-turnstile {
  min-height: 0;
}

[data-appointment-section] .appointment-submit {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Solo lleva errores: el envío correcto lo confirma el aviso compartido.
   Sobre el fondo primario el texto suelto se perdía, así que va en una caja. */
[data-appointment-section] .dzFormMsg {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
}

[data-appointment-section] .dzFormMsg:empty {
  display: none;
}

[data-appointment-section] .dzFormMsg.is-error {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #f5c6c2;
  border-left: 4px solid #d92d20;
  border-radius: 10px;
  color: #b42318;
  font-weight: 500;
  padding: 10px 13px;
}


@media only screen and (max-width: 767px) {
  [data-contact-map-section] {
    padding: 80px 0 90px;
  }

  [data-contact-map-section] .contact-map-visual {
    min-height: auto;
  }
}

/* ===== Alerts partial ===== */
.app-alert-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10050;
  display: grid;
  gap: 10px;
  max-width: 360px;
}

.app-alert {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(3, 27, 78, 0.16);
  border-left: 4px solid var(--bs-primary);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--bs-secondary);
}

.app-alert.app-alert--error {
  border-left-color: #e64848;
}

.app-alert.app-alert--success {
  border-left-color: #17b978;
}

/* ==========================================================================
   Scroll reveal
   Modern on-scroll entrance for every `.wow` element. The hidden initial state
   only applies once JS adds `.has-reveal` to <html>, so the page stays fully
   visible without JS. Disabled entirely under prefers-reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .wow {
    --reveal-duration: 0.62s;
    --reveal-delay: 0s;
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    transition:
      opacity var(--reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
      transform var(--reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay);
    will-change: opacity, transform;
    backface-visibility: hidden;
  }

  .has-reveal .wow.fadeInRight {
    transform: translate3d(36px, 0, 0) scale(0.985);
  }

  .has-reveal .wow.fadeInLeft {
    transform: translate3d(-36px, 0, 0) scale(0.985);
  }

  .has-reveal .wow.fadeInDown {
    transform: translate3d(0, -28px, 0) scale(0.985);
  }

  .has-reveal .wow.zoomIn {
    transform: scale(0.94);
  }

  /* Fade only, no travel — used for large visuals that carry their own motion
     (e.g. the hero image with its floating widgets and parallax). */
  .has-reveal .wow.wow-fade {
    transform: scale(0.985);
  }

  /* The hero is above the fold, so keep its entrance tighter and softer. */
  .has-reveal [data-hero-section] .wow:not(.wow-fade) {
    transform: translate3d(0, 18px, 0) scale(0.99);
    --reveal-duration: 0.54s;
  }

  .has-reveal .wow.is-inview {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ===================================================================
   Ajustes solo para móvil (< 992px)
   Todo vive dentro de media queries: escritorio no cambia.
   =================================================================== */

@media (max-width: 991.98px) {
  /* En móvil esta sección muestra solo el formulario: el mosaico de
     `appointment-bg.webp` queda como un bloque decorativo debajo y no aporta
     contenido. En escritorio se conserva el fondo original. */
  [data-appointment-section] {
    background-image: none !important;
  }

  /* El tema dejaba 30px de margen en la tarjeta y 24px de padding en la
     columna. En móvil eso se veía como un bloque vacío debajo del formulario. */
  [data-appointment-section] .form-wrapper.style-1 {
    margin-bottom: 0;
  }

  [data-appointment-section] .col-lg-6.align-self-center.pb-4 {
    padding-bottom: 0 !important;
  }

  /* --- Portada --- */
  /* En móvil se apilan los bloques de la portada y los CTA se mantienen como
     una sola fila independiente de la columna de texto. */
  /* `h-100` en la fila dejaba la portada con alto fijo y los botones se salían
     por debajo, encima de la sección siguiente. */
  [data-hero-section] .inner-wrapper,
  [data-hero-section] .inner-wrapper .row {
    height: auto;
  }

  [data-hero-section] .inner-wrapper .row {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }

  [data-hero-section] .inner-wrapper .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  [data-hero-section] .inner-wrapper .row > [class*="col-"]:first-child,
  [data-hero-section] .hero-content {
    display: contents;
  }

  [data-hero-section] .hero-content .title {
    order: 0;
  }

  [data-hero-section] .hero-content .text {
    order: 1;
  }

  [data-hero-section] .inner-wrapper .row > [class*="col-"]:last-child {
    order: 2;
  }

  [data-hero-section] .hero-actions {
    order: 3;
    position: relative;
    z-index: 4;
    display: flex;
    gap: 10px;
    margin-top: -34px;
    /* La fila lleva `align-items-end`, así que sin esto el bloque se encogía al
       ancho del contenido y quedaba pegado a la derecha. */
    align-self: stretch;
  }

  [data-hero-section] .hero-actions .btn {
    flex: 1 1 0;
    justify-content: center;
    margin-right: 0;
    min-height: 52px;
    /* A media pantalla, "Agendar valoracion" se partía en dos líneas a 16px. */
    font-size: 0.88rem;
    padding: 15px 10px;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(3, 27, 78, 0.22);
  }

  /* Las tarjetas flotantes las oculta el tema desde 1199px. En móvil vuelven,
     recolocadas sobre la foto y a menor escala. */
  [data-hero-section].hero-banner.style-1 .item2,
  [data-hero-section].hero-banner.style-1 .item4 {
    display: block;
  }

  [data-hero-section].hero-banner.style-1 .item4 {
    position: absolute;
    right: 0;
    top: 6px;
    left: auto;
    bottom: auto;
    z-index: 3;
    max-width: 62%;
  }

  [data-hero-section].hero-banner.style-1 .item2 {
    position: absolute;
    left: 0;
    top: 56%;
    right: auto;
    bottom: auto;
    z-index: 3;
  }

  /* La tarjeta venía dimensionada para escritorio (260px de ancho y titular de
     1,7rem): sobre una foto de 360px ocupaba 208px de alto. */
  [data-hero-section] .hero-benefit-card {
    max-width: 186px;
    padding: 13px 15px;
    border-radius: 16px;
  }

  [data-hero-section] .hero-benefit-card .title {
    margin-bottom: 4px;
    font-size: 0.95rem;
    line-height: 1.25;
  }

  [data-hero-section] .hero-benefit-card p {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  [data-hero-section].hero-banner.style-1 .item2 .info-widget {
    transform: scale(0.88);
    transform-origin: left center;
    animation: none;
  }

  [data-hero-section].hero-banner.style-1 .item4 .info-widget {
    animation: none;
  }

  /* --- Cabecera --- */
  /* El logo se salía del panel blanco: a 390px acababa en 214px mientras la
     parte recta del panel terminaba en 194, así que la diagonal cortaba el
     icono por la mitad (a 768px el desfase era de 51px). El ancho del panel, el
     corte y el margen del logo pasan a ser variables compartidas, y el ancho
     máximo del logo se deriva de ellas: así no pueden volver a desacoplarse. */
  .main-bar {
    --cv-panel-w: min(360px, 74vw);
    --cv-panel-cut: 56px;
    --cv-logo-left: 20px;
  }

  .logo-panel {
    width: var(--cv-panel-w);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cv-panel-cut)) 100%, 0 100%);
  }

  .logo-header {
    left: var(--cv-logo-left);
  }

  .logo-header img {
    width: auto;
    height: auto;
    max-width: calc(var(--cv-panel-w) - var(--cv-panel-cut) - var(--cv-logo-left) - 14px);
    max-height: 42px;
  }

  /* --- Clínica virtual --- */
  /* En una columna esto se rompía: dos fotos seguidas y, suelto debajo, el
     horario con el reloj flotando medio fuera de su tarjeta. En móvil queda
     solo la foto de la videollamada, y el horario se pega debajo formando con
     ella una única tarjeta. */
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .dz-media {
    display: none;
  }

  /* La tarjeta completa: una sola pieza con sombra, y el recorte de esquinas lo
     hace el contenedor, no cada bloque por su cuenta. */
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(3, 27, 78, 0.16);
  }

  /* El rótulo iba rotado 90° y se salía por el borde izquierdo. En vez de
     perderlo, vuelve como pastilla horizontal sobre la foto. */
  [data-facilities-section] .info-widget.style-7 .widget-content {
    display: block;
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
  }

  /* Degradado al pie de la foto para que la pastilla se lea sobre cualquier
     zona de la imagen y el paso al verde no sea un corte seco. */
  [data-facilities-section] .info-widget.style-7 .widget-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
    background: linear-gradient(to top, rgba(3, 27, 78, 0.6), rgba(3, 27, 78, 0));
    pointer-events: none;
  }

  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item1,
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item2 {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Foto: sin radio propio, lo recorta la tarjeta. */
  [data-facilities-section] .info-widget.style-7 .widget-media {
    width: 100%;
    border: 0;
    border-radius: 0;
  }

  [data-facilities-section] .info-widget.style-7 .widget-media img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center 35%;
  }

  /* Horario: ocupa el ancho de la tarjeta y no lleva radio propio. */
  [data-facilities-section] .content-wrapper.style-1 .content-media:not(.right) > .item2 .info-widget.style-6 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 22px 22px 20px;
    border-radius: 0;
  }

  /* El reloj estaba a -30px, fuera de la tarjeta y pisando la foto. Pasa a la
     esquina, a la altura del título, como sello de la sección. */
  [data-facilities-section] .info-widget.style-6 .info-icon {
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    padding: 7px;
    border-width: 2px;
  }

  [data-facilities-section] .info-widget.style-6 .info-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  [data-facilities-section] .info-widget.style-6 .title {
    padding-right: 56px;
    margin-bottom: 14px;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
  }

  /* Filas con separador y cifras alineadas: seis líneas idénticas sin ritmo se
     leían como un volcado de datos. */
  [data-facilities-section] .info-widget.style-6 ul li {
    padding: 9px 0;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  [data-facilities-section] .info-widget.style-6 ul li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  [data-facilities-section] .info-widget.style-6 ul li strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }

  /* --- Solicita información --- */
  /* En una columna la foto cae DEBAJO del formulario, donde ya no ilustra
     nada y añade 355px de recorrido. */
  [data-appointment-section] .content-wrapper.style-8 > .col-lg-6.text-center {
    display: none;
  }

  /* 16px es el umbral por debajo del cual iOS hace zoom al enfocar un campo,
     y al hacerlo descuadra la página. */
  [data-appointment-section] .form-control,
  [data-appointment-section] .form-select,
  [data-appointment-section] .phone-field .form-control {
    font-size: 16px;
  }

  /* A ancho completo, sin tarjeta: los 15px de margen blanco a cada lado sólo
     estrechaban los campos. El -15px compensa el padding del container. */
  [data-appointment-section] .form-wrapper.style-1 {
    margin-left: -15px;
    margin-right: -15px;
  }

  /* El tema fija padding y radio desde `.form-wrapper.style-1 .form-body` y
     `.content-wrapper.style-8 .form-body`: hay que igualar su especificidad. */
  [data-appointment-section] .form-wrapper.style-1 .appointment-form-body {
    border-radius: 0;
    padding: 34px 20px 32px;
    /* Pegado a los bordes, el borde lateral y la sombra solo dejaban una línea
       clara contra el borde de la pantalla. */
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  /* Más aire para escribir: campos más altos y más separación entre ellos. */
  [data-appointment-section] .form-floating > .form-control,
  [data-appointment-section] .form-floating > .form-select {
    min-height: 62px;
  }

  [data-appointment-section] .phone-field__control {
    min-height: 54px;
  }

  [data-appointment-section] .phone-field .form-control {
    height: 52px;
  }

  [data-appointment-section] form .row > [class*="col-"].m-b30 {
    margin-bottom: 26px;
  }

  /* En una columna el botón ancho es más fácil de acertar que uno a la derecha. */
  [data-appointment-section] .appointment-form-actions {
    justify-content: stretch;
  }

  [data-appointment-section] .appointment-submit {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    margin-left: 0;
  }

  /* --- Áreas frecuentes de consulta --- */
  /* Tarjeta más compacta: con una por fila, 322px cada una eran ocho pantallas
     de recorrido. */
  [data-wellness-services-section] .cv-conditions-header .title {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
  }

  [data-wellness-services-section] .cv-conditions-header .cv-conditions-note {
    font-size: 0.98rem;
    margin-top: 14px;
  }

  [data-wellness-services-section] .icon-bx-wraper.style-3 {
    padding: 18px 20px;
    border-radius: 24px;
  }

  /* Con la especificidad del tema (.icon-bx-wraper.style-3 .icon-bx), un
     selector más corto no gana. */
  [data-wellness-services-section] .icon-bx-wraper.style-3 .icon-bx {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }

  [data-wellness-services-section] .tabler-service-icon {
    width: 40px;
    height: 40px;
  }

  [data-wellness-services-section] .icon-content p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  /* El icono gigante de fondo desborda la tarjeta ya reducida. */
  [data-wellness-services-section] .icon-bg .tabler-service-icon {
    width: 108px;
    height: 108px;
  }

  [data-wellness-services-section] .icon-bx-wraper.style-3::after {
    height: 62px;
  }

  [data-wellness-services-section] .icon-bx-wraper.style-3 .icon-bx-footer {
    margin-top: 12px;
    margin-right: 0;
    padding-top: 12px;
  }

  /* --- Preguntas frecuentes --- */
  /* Apilado, el orden del marcado dejaba la foto suelta al final, después del
     acordeón. Va arriba, como entrada de la sección, y el texto debajo. */
  [data-faq-section] .content-wrapper.style-5 > [class*="col-"]:last-child {
    order: -1;
    margin-bottom: 26px;
  }

  [data-faq-section] .content-wrapper.style-5 .content-media img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center 22%;
    border-radius: 24px;
  }

  /* --- Noticias --- */
  /* Cuatro tarjetas de ~414px son 1.714px de sección. Se dejan dos y el resto
     queda a un toque en "Ver todo", que ahora también se muestra en móvil. */
  [data-blog-section] .col-xl-3.col-lg-12 {
    display: none;
  }

  /* El botón "Ver todo" quedaba entre el título y las tarjetas, cortando la
     lectura. `display: contents` saca las dos columnas de la cabecera al flujo
     del container para poder reordenarlas: título, tarjetas y al final el
     botón, que es donde se busca una vez vistas las noticias. */
  [data-blog-section] .container {
    display: flex;
    flex-direction: column;
  }

  [data-blog-section] .section-head.style-1 {
    display: contents;
  }

  [data-blog-section] .section-head.style-1 > [class*="col-"]:first-child {
    order: 0;
    margin-bottom: 22px;
  }

  [data-blog-section] .container > .row.g-20 {
    order: 1;
  }

  [data-blog-section] .section-head.style-1 > [class*="col-"]:last-child {
    order: 2;
    margin-top: 20px;
    text-align: center;
  }

  [data-blog-section] .section-head.style-1 .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  /* A ancho completo, el recuadro blanco de la flecha parecía otro botón dentro
     del botón. Se queda solo el icono. */
  [data-blog-section] .section-head.style-1 .btn .right-icon {
    width: auto;
    height: auto;
    min-width: 0;
    margin-left: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: inherit;
    box-shadow: none;
  }

  [data-blog-section] .section-head .title {
    font-size: clamp(1.85rem, 7.5vw, 2.3rem);
  }

  [data-blog-section] .dz-card.style-2 {
    min-height: 0;
    height: 260px;
  }

  /* Los dos titulares a dos líneas: uno ocupaba cuatro y otro dos, y las
     tarjetas se leían como dos componentes distintos. */
  [data-blog-section] .dz-card.style-2 .dz-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.12rem;
    line-height: 1.3;
  }

  /* Las dos tarjetas traen marcado distinto: la destacada agrupa fecha y título
     en `.content-half` con un botón ancho debajo, y la otra pone el título
     junto a una flecha redonda. Se igualan por posición —fecha arriba, título
     abajo, flecha abajo a la derecha— sin tocar el marcado ni el escritorio. */
  /* Contenido al pie de la tarjeta. Con `justify-content` y no con márgenes
     automáticos: la fecha va en absoluto, así que no es un ítem del flex y el
     empuje tenía que venir del contenedor. */
  [data-blog-section] .dz-card.style-2 .dz-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* `display: contents` disuelve el envoltorio de la destacada, así fecha,
     título y flecha son hermanos y se colocan igual que en la otra tarjeta. */
  [data-blog-section] .dz-card.style-2 .content-half {
    display: contents;
  }

  /* Hueco a la derecha para que la flecha superpuesta no pise el texto. */
  [data-blog-section] .dz-card.style-2 .content-half .dz-title {
    padding-right: 58px;
  }

  [data-blog-section] .dz-card.style-2 .content-half + .bottom-info {
    display: flex;
    justify-content: flex-end;
    /* Traía `flex: 1 1 0` y se comía todo el espacio libre, dejando el título
       pegado arriba. */
    flex: none;
    /* Se sube sobre la última línea del título en vez de ocupar una fila
       propia, que es como queda la flecha en la otra tarjeta. */
    margin: -46px 0 0;
  }

  [data-blog-section] .dz-card.style-2 .content-half + .bottom-info .btn {
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  [data-blog-section] .dz-card.style-2 .content-half + .bottom-info .btn > span:first-child {
    display: none;
  }

  /* --- Footer --- */
  /* Doce enlaces en una columna eran 288px por lista; en dos, la mitad. */
  .site-footer .widget_services ul.list-hover1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  /* El margen entre elementos sobra en cuanto el enlace tiene alto propio. */
  .site-footer .widget_services ul.list-hover1 > li {
    margin: 0;
  }

  /* 20px de alto de toque queda muy por debajo del mínimo recomendado. */
  .site-footer .widget_services ul.list-hover1 > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9rem;
    line-height: 1.3;
  }
}

@media (max-width: 575.98px) {
  /* Panel y logo más ajustados, para dejar aire hasta el botón del menú. */
  .main-bar {
    --cv-panel-w: min(290px, 76vw);
    --cv-panel-cut: 40px;
    --cv-logo-left: 14px;
  }

  .logo-header img {
    max-height: 34px;
  }

  [data-blog-section] .dz-card.style-2 {
    height: 250px;
  }
}

/* ==========================================================================
   Reparto de la barra superior en escritorio (>= 992px)
   ==========================================================================
   El panel blanco del logo no participa del flujo: se le reserva sitio con el
   `padding-left` de `.inner-bar`, y el menú vive en la banda que queda. Con los
   valores del tema esa banda se usaba mal —los enlaces se amontonaban contra el
   borde derecho, dejando ~500px muertos en el centro y ~140px sobrantes a la
   derecha, porque `.container-fluid` reserva 100px de padding lateral por
   encima de 1480px. Aquí se recupera ese espacio y se reparten los enlaces. */
@media (min-width: 992px) {
  /* El lado izquierdo lo sigue mandando el panel del logo; el derecho no tiene
     nada que esquivar, así que no necesita los 100px del tema. */
  .main-bar .inner-bar {
    padding-right: 44px;
  }

  /* `.clearfix` mete un ::after que, dentro de un flex, cuenta como un ítem más:
     con `gap: 28px` en la barra se comía 28px por la derecha del menú sin
     pintar nada. El logo va en `position: absolute`, así que el menú es el único
     ítem real y la separación no hace falta. */
  .main-bar .inner-bar::after {
    content: none;
  }

  /* Los enlaces se reparten por la banda en vez de apelotonarse al final. El
     tope de ancho evita que en pantallas muy anchas queden tan separados que
     dejen de leerse como un mismo grupo. */
  .header-nav.w3menu .main-navigation {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    justify-content: space-between;
    /* Mínimo cuando la banda se estrecha y `space-between` ya no tiene holgura. */
    gap: 16px;
  }
}

/* Por debajo de 1280px la banda libre se estrecha lo justo para que el menú
   empiece a apretarse: se recorta el margen derecho y el mínimo de separación
   entre enlaces. (El selector de idioma se compacta en el mismo tramo; esa
   regla vive en LanguageSwitcher.astro, junto al resto de su estilo.) */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .main-bar .inner-bar {
    padding-right: 24px;
  }

  /* Con la banda tan justa, `space-between` reparte lo que quede; este mínimo
     solo evita que los enlaces lleguen a tocarse. */
  .header-nav.w3menu .main-navigation {
    gap: 10px;
  }
}

/* Entre 992 y 1199px ni con eso cabe: el menú desbordaba por la derecha, y ya
   lo hacía antes de añadir el selector de idioma (a 1024px el contenido pedía
   1100px). A esos anchos el panel del logo no necesita 560px, así que se
   recorta junto con su diagonal y el menú vuelve a caber. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .logo-panel {
    width: 430px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%);
  }

  .main-bar .inner-bar {
    /* Deja libre la diagonal: el panel corta de 430px (arriba) a 350px (abajo),
       así que a la altura del texto del menú el borde ronda los 390px. */
    padding-left: 410px;
  }

  .logo-header img {
    height: 52px;
  }
}

/* ==========================================================================
   Portada en móvil
   ==========================================================================
   La portada se diseñó para escritorio: foto a la derecha, dos tarjetas
   flotando sobre ella y unos aros decorativos enmarcándola. En una columna de
   ~330px esas piezas dejan de encajar, y estos ajustes las recolocan. */

@media (max-width: 991.98px) {
  /* --- Aros decorativos ---
     `.circle-wrapper` arranca 100px por debajo de la foto, así que en móvil no
     la enmarcaba: los aros asomaban por debajo y cruzaban por detrás de los
     botones. Se ocultan los aros, NO su contenedor: el contenedor es el único
     hijo en flujo de `.hero-thumbnail` (la foto va en `position: absolute`) y
     sin él la foto se queda sin alto y la sección colapsa.

     El tema los declara como `.hero-banner.style-1 .circle-wrapper .circleN`,
     así que hay que repetir esas clases para ganarle por especificidad. */
  [data-hero-section].hero-banner.style-1 .circle-wrapper .circle1,
  [data-hero-section].hero-banner.style-1 .circle-wrapper .circle2,
  [data-hero-section].hero-banner.style-1 .circle-wrapper .circle3 {
    display: none;
  }

  /* --- Tarjetas flotantes ---
     Dos tarjetas sobre un retrato de 330px lo saturaban y tapaban las caras. Se
     deja solo la de receta digital, que ocupa el sitio que tenía la otra: abajo
     a la izquierda, alineada con el borde de la foto. */
  [data-hero-section].hero-banner.style-1 .item2 {
    display: none;
  }

  [data-hero-section].hero-banner.style-1 .item4 {
    top: 56%;
    left: 0;
    right: auto;
  }

  /* --- Botones ---
     Se montan sobre el borde inferior del retrato. Siguen en el flujo para que
     la siguiente sección empiece después de los CTA, sin cortes ni solapes. */
  [data-hero-section] .hero-actions {
    margin-top: -52px;
    margin-bottom: 16px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  /* Los dos CTA permanecen juntos debajo de la imagen y comparten el ancho
     disponible, sin que uno crezca más que el otro por la longitud del texto. */
  [data-hero-section] .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* La flecha ocupa demasiado espacio dentro de dos botones compactos; el
     texto queda centrado y los dos CTA conservan la misma jerarquía visual. */
  [data-hero-section] .hero-actions .btn .right-icon {
    display: none;
  }

  /* Al entrar en pantalla, el reveal no debe desplazar los CTA fuera del hero
     ni dejar que la siguiente sección los cubra. */
  .has-reveal [data-hero-section] .hero-actions .btn.is-inview {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  /* Por debajo de 400px la foto se queda en ~290px y la tarjeta, con su tope
     fijo de 186px, pasaba a cubrir dos tercios de su ancho. Con `min()` manda
     el tope en píxeles mientras la foto sea grande (a 390px sigue midiendo los
     mismos 186px de siempre) y solo al estrecharse manda el porcentaje. */
  [data-hero-section].hero-banner.style-1 .item4 {
    max-width: min(186px, 56%);
  }

  /* `100%` y no `none`: la tarjeta debe obedecer el tope de su contenedor. Sin
     esto se dimensionaba por su contenido, se salía de `.item4` y el texto
     acababa cortado por el borde derecho de la pantalla. */
  [data-hero-section] .hero-benefit-card {
    max-width: 100%;
    padding: 11px 12px;
    border-radius: 14px;
  }

  [data-hero-section] .hero-benefit-card .title {
    font-size: 0.85rem;
  }

  [data-hero-section] .hero-benefit-card p {
    font-size: 0.72rem;
  }
}