/* =========================================================
   INNOVASALUD — HOSPITALIZACIÓN DOMICILIARIA
   CSS AISLADO: no modifica el header ni el footer compartidos.
   ========================================================= */

.innova-hospital-page {
  margin: 0;
  color: #5b5b5b;
  background: #f8f2ed;
}

.hospital-page {
  /* Colores oficiales del manual de marca. */
  --hospital-blue: #00308d;
  --hospital-blue-secondary: #0066ff;
  --hospital-cyan: #00ccff;
  --hospital-blue-soft: #e9eef4;
  --hospital-green-primary: #99df57;
  --hospital-green-secondary: #99d200;
  --hospital-green: #66b533;
  --hospital-green-dark: #528f2e;
  --hospital-green-soft: #edf3e8;
  --hospital-cream: #f8f2ed;
  --hospital-sand: #eee4d9;
  --hospital-surface: #fbf6f0;
  --hospital-text: #5b5b5b;
  --hospital-muted: #6f716f;
  --hospital-border: #d8d3cc;
  --hospital-light: #f8f2ed;
  --hospital-shadow: 0 16px 40px rgba(40, 58, 82, 0.08);

  overflow: hidden;
  color: var(--hospital-text);
  background: var(--hospital-cream);
  font-family: "Barlow", Arial, sans-serif;
}

.hospital-page *,
.hospital-page *::before,
.hospital-page *::after {
  box-sizing: border-box;
}

.hospital-page h1,
.hospital-page h2,
.hospital-page h3,
.hospital-page p,
.hospital-page figure {
  margin-top: 0;
}

.hospital-page h1,
.hospital-page h2,
.hospital-page h3 {
  color: var(--hospital-blue);
  text-wrap: balance;
}

.hospital-page p,
.hospital-page li {
  text-wrap: pretty;
}

.hospital-container {
  width: min(calc(100% - 44px), 1180px);
  margin-inline: auto;
}

.hospital-section {
  padding: 72px 0;
}

.hospital-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--hospital-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.hospital-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: var(--hospital-green);
  border-radius: 50%;
}

.hospital-section-heading h2,
.hospital-centered-heading h2 {
  margin-bottom: 17px;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.08;
}

.hospital-section-heading > p:last-child,
.hospital-centered-heading > p:last-child {
  margin-bottom: 0;
  color: var(--hospital-muted);
  font-size: 17px;
  line-height: 1.7;
}

.hospital-centered-heading {
  max-width: 780px;
  margin: 0 auto 38px;
  text-align: center;
}

/* =========================================================
   HERO: franja azul independiente del azul oscuro del footer.
   ========================================================= */

.hospital-hero {
  position: relative;
  padding: 82px 0 78px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 20%, rgba(248, 242, 237, 0.14), transparent 24%),
    linear-gradient(112deg, var(--hospital-blue), var(--hospital-blue-secondary) 115%);
  border-bottom: 7px solid var(--hospital-green);
}

.hospital-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -180px;
  width: 380px;
  height: 380px;
  border: 60px solid rgba(102, 181, 51, 0.12);
  border-radius: 50%;
}

.hospital-hero__content {
  position: relative;
  z-index: 1;
}

.hospital-hero__category {
  margin-bottom: 17px;
  color: #b8ef8e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hospital-hero h1 {
  max-width: 920px;
  margin-bottom: 22px;
  color: var(--hospital-light);
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.02;
}

.hospital-hero__lead {
  max-width: 760px;
  margin-bottom: 30px;
  color: rgba(248, 242, 237, 0.9);
  font-size: 19px;
  line-height: 1.65;
}

.hospital-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

/* =========================================================
   BOTONES
   ========================================================= */

.hospital-button,
.hospital-contact__phone {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 25px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hospital-button:hover,
.hospital-contact__phone:hover {
  transform: translateY(-2px);
  text-decoration: none;
}



.hospital-button--secondary {
  color: var(--hospital-light) !important;
  background: rgba(248, 242, 237, 0.08);
  border-color: rgba(248, 242, 237, 0.48);
}

.hospital-button--secondary:hover {
  color: var(--hospital-blue) !important;
  background: var(--hospital-cream);
}

/* =========================================================
   INTRODUCCIÓN
   ========================================================= */

.hospital-introduction {
  background: var(--hospital-cream);
}

.hospital-introduction__grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 72px;
  align-items: start;
}

.hospital-introduction__copy {
  padding: 29px 31px;
  background: var(--hospital-surface);
  border: 1px solid var(--hospital-border);
  border-left: 5px solid var(--hospital-green);
  border-radius: 12px;
}

.hospital-introduction__copy p {
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.75;
}

.hospital-introduction__copy p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   IMAGEN ÚNICA
   ========================================================= */

.hospital-image-section {
  padding: 0 0 72px;
  background: var(--hospital-cream);
}

.hospital-image {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
  background: var(--hospital-sand);
  border-radius: 18px;
  box-shadow: var(--hospital-shadow);
}

.hospital-image img {
  display: block;
  width: 100%;
  height: clamp(390px, 48vw, 610px);
  object-fit: cover;
}

.hospital-image figcaption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  max-width: 470px;
  padding: 13px 16px;
  color: var(--hospital-light);
  background: rgba(0, 48, 141, 0.88);
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.5;
  backdrop-filter: blur(7px);
}

/* =========================================================
   PERFIL DEL PACIENTE
   ========================================================= */

.hospital-eligibility {
  background: linear-gradient(180deg, var(--hospital-sand), var(--hospital-cream));
}

.hospital-eligibility__grid {
  display: block;
}

.hospital-eligibility .hospital-section-heading {
  max-width: 800px;
  margin: 0 auto 38px;
  text-align: center;
}

.hospital-check-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.hospital-check-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 19px 21px;
  width: 100%;
  background: var(--hospital-surface);
  border: 1px solid rgba(102, 181, 51, 0.22);
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(91, 91, 91, 0.035);
}

.hospital-check-list li > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--hospital-blue);
  background: var(--hospital-green-primary);
  border-radius: 50%;
  font-weight: 700;
}

.hospital-check-list strong {
  display: block;
  margin-bottom: 5px;
  color: var(--hospital-blue);
  font-size: 18px;
}

.hospital-check-list p {
  margin-bottom: 0;
  color: var(--hospital-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* =========================================================
   PROCESO
   ========================================================= */

.hospital-process {
  background: var(--hospital-cream);
}

.hospital-process__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* Centra las secciones que solamente tienen tres tarjetas */
.hospital-process__list--three {
  grid-template-columns: repeat(3, minmax(0, 280px));
  justify-content: center;
}

.hospital-process__list li {
  position: relative;
  min-height: 245px;
  padding: 27px 24px;
  background: var(--hospital-surface);
  border: 1px solid var(--hospital-border);
  border-radius: 14px;
}

.hospital-process__list li > span {
  display: inline-grid;
  width: 44px;
  height: 44px;
  margin-bottom: 25px;
  place-items: center;
  color: var(--hospital-light);
  background: var(--hospital-blue);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.hospital-process__list h3 {
  margin-bottom: 11px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.hospital-process__list p {
  margin-bottom: 0;
  color: var(--hospital-muted);
  font-size: 15px;
  line-height: 1.65;
}



/* =========================================================
   COMPONENTES
   ========================================================= */

.hospital-components {
  background: #f0f1e9;
  border-top: 1px solid rgba(102, 181, 51, 0.13);
  border-bottom: 1px solid rgba(102, 181, 51, 0.13);
}

.hospital-components__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.hospital-components__grid article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 17px;
  align-items: start;
  padding: 24px;
  background: var(--hospital-surface);
  border: 1px solid rgba(76, 145, 40, 0.18);
  border-top: 4px solid var(--hospital-green-primary);
  border-radius: 13px;
}

.hospital-components__grid article > span {
  display: grid;
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--hospital-blue);
  background: var(--hospital-blue-soft);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.hospital-components__grid h3 {
  margin-bottom: 7px;
  font-size: 21px;
  font-weight: 600;
}

.hospital-components__grid p {
  margin-bottom: 0;
  color: var(--hospital-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* =========================================================
   BENEFICIOS
   ========================================================= */

.hospital-benefits {
  background: var(--hospital-sand);
}

.hospital-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hospital-benefits__grid article {
  position: relative;
  padding: 29px 26px;
  overflow: hidden;
  background: var(--hospital-surface);
  border: 1px solid var(--hospital-border);
  border-radius: 14px;
}

.hospital-benefits__grid article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--hospital-green);
}

.hospital-benefits__grid h3 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 600;
}

.hospital-benefits__grid p {
  margin-bottom: 0;
  color: var(--hospital-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* =========================================================
   AVISO DE SEGURIDAD
   ========================================================= */

.hospital-safety {
  padding: 26px 0;
  background: var(--hospital-blue-soft);
  border-top: 1px solid var(--hospital-border);
  border-bottom: 1px solid var(--hospital-border);
}

.hospital-safety__content {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.hospital-safety__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--hospital-light);
  background: var(--hospital-blue);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
}

.hospital-safety h2 {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 600;
}

.hospital-safety p {
  margin-bottom: 5px;
  color: #545d68;
  font-size: 15px;
  line-height: 1.65;
}

.hospital-safety p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   PREGUNTAS FRECUENTES
   ========================================================= */

.hospital-faq {
  background: var(--hospital-cream);
}

.hospital-faq__list {
  max-width: 900px;
  margin: 0 auto;
}

.hospital-faq details {
  margin-bottom: 11px;
  overflow: hidden;
  background: var(--hospital-surface);
  border: 1px solid var(--hospital-border);
  border-radius: 12px;
}

.hospital-faq details[open] {
  border-color: rgba(102, 181, 51, 0.55);
  box-shadow: 0 10px 26px rgba(40, 58, 82, 0.06);
}

.hospital-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  color: var(--hospital-blue);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
}

.hospital-faq summary::-webkit-details-marker {
  display: none;
}


.hospital-faq details[open] summary span {
  transform: rotate(45deg);
}

.hospital-faq details > p {
  max-width: 780px;
  margin-bottom: 0;
  padding: 0 22px 22px;
  color: var(--hospital-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* =========================================================
   CONTACTO FINAL Y SEPARACIÓN DEL FOOTER
   ========================================================= */

.hospital-contact {
  padding: 66px 0 74px;
  background: linear-gradient(115deg, var(--hospital-green-soft), var(--hospital-cream) 74%);
  border-top: 1px solid rgba(102, 181, 51, 0.22);
  border-bottom: 18px solid var(--hospital-cream);
}

.hospital-contact__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 58px;
  align-items: center;
}

.hospital-contact h2 {
  max-width: 720px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.08;
}

.hospital-contact__content > div:first-child > p:last-child {
  max-width: 700px;
  margin-bottom: 0;
  color: var(--hospital-muted);
  font-size: 17px;
  line-height: 1.65;
}

.hospital-contact__actions {
  display: grid;
  min-width: 245px;
  gap: 11px;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .hospital-introduction__grid,
  .hospital-contact__content {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hospital-process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hospital-benefits__grid {
    grid-template-columns: 1fr;
  }

  .hospital-benefits__grid article {
    min-height: auto;
  }

  .hospital-contact__actions {
    width: min(100%, 360px);
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 640px) {
  .hospital-container {
    width: min(calc(100% - 28px), 1180px);
  }

  .hospital-section {
    padding: 52px 0;
  }

  .hospital-centered-heading {
    margin-bottom: 29px;
    text-align: left;
  }

  .hospital-hero {
    padding: 62px 0 58px;
  }

  .hospital-hero h1 {
    font-size: clamp(39px, 12vw, 53px);
  }

  .hospital-hero__lead {
    font-size: 17px;
  }

  .hospital-hero__actions,
  .hospital-button,
  .hospital-contact__phone {
    width: 100%;
  }

  .hospital-section-heading h2,
  .hospital-centered-heading h2,
  .hospital-contact h2 {
    font-size: clamp(31px, 9vw, 40px);
  }

  .hospital-introduction__copy {
    padding: 23px 21px;
  }

  .hospital-image-section {
    padding-bottom: 52px;
  }

  .hospital-image img {
    height: 350px;
  }

  .hospital-image figcaption {
    position: static;
    max-width: none;
    color: var(--hospital-text);
    background: var(--hospital-sand);
    border-radius: 0;
  }

  .hospital-process__list,
  .hospital-components__grid {
    grid-template-columns: 1fr;
  }

  .hospital-process__list li {
    min-height: auto;
  }

  .hospital-components__grid article {
    padding: 20px;
  }

  .hospital-safety__content {
    grid-template-columns: 1fr;
  }

  .hospital-faq summary {
    padding: 18px;
    font-size: 17px;
  }

  .hospital-faq details > p {
    padding: 0 18px 20px;
  }

  .hospital-contact {
    padding: 54px 0 62px;
    border-bottom-width: 14px;
  }

  .hospital-contact__actions {
    width: 100%;
  }
}

/* Reduce movimiento para usuarios que así lo prefieren. */
@media (prefers-reduced-motion: reduce) {
  .hospital-page *,
  .hospital-page *::before,
  .hospital-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================================================
   COMPATIBILIDAD DE PÁGINAS DE SERVICIO
   Conserva el HTML ya publicado con clases service-* y lo integra
   a la misma paleta cálida del diseño actual.
   ========================================================= */
.innova-service-page {
  margin: 0;
  color: #5b5b5b;
  background: #f8f2ed;
}

.service-page {
  --service-blue: #00308d;
  --service-green: #66b533;
  --service-green-light: #99df57;
  --service-cream: #f8f2ed;
  --service-sand: #eee4d9;
  --service-surface: #fbf6f0;
  --service-soft-blue: #e9eef4;
  --service-soft-green: #edf3e8;
  --service-text: #5b5b5b;
  --service-muted: #6f716f;
  --service-border: #d8d3cc;
  overflow: hidden;
  color: var(--service-text);
  background: var(--service-cream);
  font-family: "Barlow", Arial, sans-serif;
}

.service-page *,
.service-page *::before,
.service-page *::after {
  box-sizing: border-box;
}

.service-page h1,
.service-page h2,
.service-page h3,
.service-page p,
.service-page figure {
  margin-top: 0;
}

.service-page h1,
.service-page h2,
.service-page h3 {
  color: var(--service-blue);
  text-wrap: balance;
}

.service-page p,
.service-page li {
  text-wrap: pretty;
}

.service-container {
  width: min(calc(100% - 44px), 1180px);
  margin-inline: auto;
}

.service-title {
  position: relative;
  padding: 82px 0 78px;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 88% 20%, rgba(248, 242, 237, 0.14), transparent 24%),
    linear-gradient(112deg, var(--service-blue), #0066ff 115%);
  border-bottom: 7px solid var(--service-green);
}



/* Mantiene el texto delante del círculo */
.service-title .service-container {
  position: relative;
  z-index: 1;
}

/* Texto descriptivo debajo del título */
.service-title__lead {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(248, 242, 237, 0.9) !important;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}

.service-title span {
  display: block;
  margin-bottom: 13px;
  color: #b8ef8e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.service-title h1 {
  max-width: 920px;
  margin: 0;
  color: var(--service-cream);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
}

.service-introduction,
.service-situations,
.service-scope,
.service-practical,
.service-faq {
  padding: 68px 0;
}

.service-introduction__grid,
.service-practical__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(34px, 6vw, 88px);
  align-items: start;
}

.service-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--service-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.service-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--service-green);
}

.service-introduction h2,
.service-heading h2,
.service-practical h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08;
}

.service-copy {
  padding: 30px;
  border: 1px solid var(--service-border);
  border-left: 6px solid var(--service-green);
  border-radius: 22px;
  background: var(--service-surface);
}

.service-copy p,
.service-practical p {
  margin-bottom: 18px;
  color: var(--service-muted);
  font-size: 18px;
  line-height: 1.72;
}

.service-advisory {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 5px solid var(--service-green);
  border-radius: 14px;
  color: var(--service-blue);
  background: var(--service-soft-green);
  font-weight: 600;
  line-height: 1.6;
}

.service-image {
  padding: 0 0 68px;
}

.service-image figure {
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 26px;
  background: var(--service-sand);
}

.service-image img {
  display: block;
  width: 100%;
  height: clamp(360px, 48vw, 650px);
  object-fit: cover;
}

.service-heading {
  max-width: 820px;
  margin: 0 auto 38px;
  text-align: center;
}

.service-situations {
  background: var(--service-soft-blue);
}

.service-situations__list,
.service-scope__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.service-situations__list article,
.service-scope__grid article {
  display: flex;
  gap: 18px;
  min-height: 180px;
  padding: 26px;
  border: 1px solid var(--service-border);
  border-radius: 20px;
  background: var(--service-surface);
}

.service-situations__list article > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 14px;
  color: var(--service-blue);
  background: var(--service-soft-green);
  font-weight: 700;
}

.service-situations__list h3,
.service-scope__grid h3 {
  margin-bottom: 8px;
  font-size: 22px;
}

.service-situations__list p,
.service-scope__grid p {
  margin-bottom: 0;
  color: var(--service-muted);
  line-height: 1.65;
}

.service-family {
  padding: 68px 0;
  background: var(--service-soft-green);
}

.service-family__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 52px;
  align-items: center;
}

.service-family__content h2 {
  margin-bottom: 14px;
  font-size: clamp(34px, 4vw, 54px);
}

.service-family__content p {
  color: var(--service-muted);
  font-size: 18px;
  line-height: 1.7;
}

.service-family__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-family__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--service-border);
  border-radius: 14px;
  color: var(--service-blue);
  background: var(--service-surface);
  font-weight: 600;
}

.service-family__list li span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--service-cream);
  background: var(--service-green);
}

.service-scope__grid article {
  display: block;
}

.service-practical {
  background: var(--service-soft-blue);
}

.service-practical__details {
  display: grid;
  gap: 12px;
  margin: 0;
}

.service-practical__details > div {
  padding: 18px 20px;
  border: 1px solid var(--service-border);
  border-radius: 14px;
  background: var(--service-surface);
}

.service-practical dt {
  margin-bottom: 5px;
  color: var(--service-blue);
  font-weight: 700;
}

.service-practical dd {
  margin: 0;
  color: var(--service-muted);
  line-height: 1.55;
}

.service-faq__list {
  max-width: 900px;
  margin: 0 auto;
}

.service-faq details {
  margin-bottom: 12px;
  border: 1px solid var(--service-border);
  border-radius: 16px;
  background: var(--service-surface);
}

.service-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  color: var(--service-blue);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.service-faq details[open] summary span {
  transform: rotate(45deg);
}


.service-faq details > p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--service-muted);
  line-height: 1.65;
}

.service-contact {
  padding: 62px 0 68px;
  border-bottom: 0;
  background: var(--service-sand);
}

.service-contact__content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.service-contact h2 {
  max-width: 760px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4.2vw, 56px);
}

.service-contact p {
  margin-bottom: 0;
  color: var(--service-muted);
  font-size: 18px;
}

.service-contact__actions {
  display: grid;
  width: 280px;
  min-width: 280px;
  gap: 12px;
}

.service-button,
.service-contact__phone {
  display: inline-flex;
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 2px solid var(--service-green);
  border-radius: 10px;
  color: var(--service-blue);
  background: var(--service-green);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(79, 145, 40, 0.24);
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}





.service-contact__phone,
.service-contact__phone:visited {
  color: #00308d !important;
  background: transparent !important;
  border-color: #00308d !important;
}



@media (max-width: 820px) {
  .service-contact__content {
    grid-template-columns: 1fr;
  }

  .service-contact__actions {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 820px) {
  .service-introduction__grid,
  .service-practical__grid,
  .service-family__grid,
  .service-contact__content {
    grid-template-columns: 1fr;
  }

  .service-situations__list,
  .service-scope__grid {
    grid-template-columns: 1fr;
  }

  .service-contact__actions {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .service-container {
    width: min(calc(100% - 28px), 1180px);
  }

  .service-title,
  .service-introduction,
  .service-situations,
  .service-family,
  .service-scope,
  .service-practical,
  .service-faq,
  .service-contact {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Apnea, terapia y enfermería conservan el mismo hero de los demás servicios. */
  .innova-service-page .service-title {
    padding-top: 62px;
    padding-bottom: 58px;
  }

  .innova-service-page .service-title h1 {
    font-size: clamp(39px, 12vw, 53px);
  }

  .innova-about-page .service-title {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .service-copy,
  .service-situations__list article,
  .service-scope__grid article {
    padding: 21px;
  }

  .service-copy {
    padding: 24px 22px;
    border-left-width: 5px;
    border-radius: 18px;
  }

  .service-image img {
    height: 350px;
  }
}

/* Nosotros conserva una franja sencilla y centrada, como Contacto. */
.innova-about-page .service-title {
  padding: 68px 0 72px;
  text-align: center;
  background: var(--service-blue);
  border-bottom: 0;
}

.innova-about-page .service-title h1 {
  margin-inline: auto;
  font-size: clamp(36px, 4.5vw, 64px) !important;
}

@media (max-width: 560px) {
  .innova-about-page .service-title {
    padding: 48px 0;
  }
}

/* Botones cuadrados en todas las páginas nuevas */
.service-button,
.service-contact__phone,
.hospital-button,
.hospital-contact__phone {
  border-radius: 10px !important;
}

/* =========================================================
   COLORES UNIFICADOS DE LOS BOTONES
   ========================================================= */

.service-button--primary,
.hospital-button--primary {
  color: #00308d !important;
  background: #66b533 !important;
  border: 2px solid #66b533 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(79, 145, 40, 0.24) !important;
}

.service-button--primary:hover,
.service-button--primary:focus-visible,
.hospital-button--primary:hover,
.hospital-button--primary:focus-visible {
  color: #00308d !important;
  background: #99df57 !important;
  border-color: #99df57 !important;
  transform: translateY(-2px);
}

.service-contact__phone,
.service-contact__phone:visited,
.hospital-contact__phone,
.hospital-contact__phone:visited {
  color: #00308d !important;
  background: transparent !important;
  border: 2px solid #00308d !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.service-contact__phone:hover,
.service-contact__phone:focus-visible,
.hospital-contact__phone:hover,
.hospital-contact__phone:focus-visible {
  color: #f8f2ed !important;
  background: #00308d !important;
  border-color: #00308d !important;
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .service-title__lead {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.6;
  }

  .service-title::after {
    right: -170px;
    bottom: -210px;
    width: 330px;
    height: 330px;
    border-width: 48px;
  }
}