/* =========================================================
   DOCTOR AT HOME MÉXICO
   DAH GLOBAL VISUAL SYSTEM

   ALCANCE:
   - SINGLE POSTS
   - PAGES
   - Excluye Home / Front Page

   HERO:
   Automático cuando el JS detecta estructura compatible

   MOBILE FIRST
   Versión Global 3.0
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page) {

  --dah-navy-900: #0b283b;
  --dah-navy-800: #12344a;
  --dah-navy-700: #1b475e;

  --dah-teal-600: #257d7a;
  --dah-teal-100: #eaf5f3;

  --dah-blue-700: #2349a7;
  --dah-blue-600: #2563eb;

  --dah-cream-100: #fbfaf5;
  --dah-cream-200: #f7f4e8;

  --dah-white: #ffffff;

  --dah-text: #3e515e;
  --dah-muted: #687983;

  --dah-border: #dde5e7;
  --dah-border-warm: #ebe6d8;

  --dah-radius-sm: 12px;
  --dah-radius-md: 18px;
  --dah-radius-lg: 24px;

  --dah-shadow-sm:
    0 5px 18px rgba(18, 52, 74, 0.05);

  --dah-shadow-md:
    0 12px 30px rgba(18, 52, 74, 0.10);

  --dah-shadow-button:
    0 9px 22px rgba(37, 99, 235, 0.25);
}


/* =========================================================
   2. TIPOGRAFÍA GLOBAL
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content,

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero {

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color:
    var(--dah-text);

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content {

  font-size: 17px;

  line-height: 1.72;
}


/* =========================================================
   3. PÁRRAFOS
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content p {

  margin-top: 0;

  margin-bottom: 24px;

  overflow-wrap: break-word;
}


/* =========================================================
   4. H2
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content h2 {

  margin:
    58px 0
    20px;

  color:
    var(--dah-navy-800);

  font-size: 29px;

  line-height: 1.13;

  letter-spacing: -0.022em;

  font-weight: 800;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content h2::before {

  content: "";

  display: block;

  width: 36px;
  height: 3px;

  margin-bottom: 12px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--dah-teal-600),
      var(--dah-blue-600)
    );
}


/* =========================================================
   5. H3
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content h3 {

  margin:
    34px 0
    11px;

  color:
    var(--dah-teal-600);

  font-size: 21px;

  line-height: 1.25;

  letter-spacing: -0.01em;

  font-weight: 750;
}


/* =========================================================
   6. H4
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content h4 {

  margin:
    28px 0
    10px;

  color:
    var(--dah-navy-700);

  font-size: 19px;

  line-height: 1.3;

  font-weight: 750;
}


/* =========================================================
   7. NEGRITAS
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content strong {

  color:
    var(--dah-navy-900);

  font-weight: 750;
}


/* =========================================================
   8. ENLACES
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content
a:not(.wp-block-button__link):not(.dah-auto-hero__button) {

  color:
    var(--dah-teal-600);

  text-decoration-line:
    underline;

  text-decoration-thickness:
    1px;

  text-decoration-color:
    rgba(37, 125, 122, 0.55);

  text-underline-offset:
    3px;
}


/* =========================================================
   9. LISTAS
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content ul,

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content ol {

  margin:
    26px 0
    34px;

  padding:
    22px 20px
    22px 42px;

  background:
    var(--dah-cream-100);

  border:
    1px solid
    var(--dah-border-warm);

  border-radius:
    var(--dah-radius-sm);

  box-shadow:
    var(--dah-shadow-sm);
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content li {

  padding-left: 3px;

  margin-bottom: 10px;

  overflow-wrap: break-word;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content li:last-child {

  margin-bottom: 0;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content li::marker {

  color:
    var(--dah-teal-600);
}


/* =========================================================
   10. IMÁGENES DEL CONTENIDO
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content figure {

  margin:
    32px 0
    40px;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content img {

  display: block;

  max-width: 100%;

  height: auto;

  border-radius:
    var(--dah-radius-md);

  box-shadow:
    var(--dah-shadow-md);
}


/* =========================================================
   11. BOTONES GUTENBERG
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content
.wp-block-button {

  margin:
    30px auto
    40px;

  text-align: center;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content
.wp-block-button__link {

  display:
    inline-flex !important;

  min-height: 52px;

  align-items: center;

  justify-content: center;

  padding:
    14px 26px !important;

  background:
    linear-gradient(
      90deg,
      var(--dah-blue-700),
      var(--dah-blue-600)
    ) !important;

  color:
    #ffffff !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  text-decoration:
    none !important;

  font-size:
    17px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  box-shadow:
    0 8px 18px
    rgba(30, 64, 175, 0.24) !important;
}


/* =========================================================
   12. FAQ GENÉRICA
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content h3 + p {

  margin-top: 0;

  padding-bottom: 6px;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content h3 + p + h3 {

  padding-top: 6px;
}


/* =========================================================
   13. BLOCKQUOTE
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content blockquote {

  margin:
    30px 0;

  padding:
    20px 22px;

  background:
    var(--dah-cream-100);

  border-left:
    4px solid
    var(--dah-teal-600);

  border-radius:
    0
    var(--dah-radius-sm)
    var(--dah-radius-sm)
    0;

  color:
    var(--dah-text);
}


/* =========================================================
   14. SEPARADORES
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content hr {

  margin:
    52px 0;

  border: 0;

  border-top:
    1px solid
    var(--dah-border);
}


/* =========================================================
   15. TABLAS
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content table {

  width: 100%;

  margin:
    28px 0
    36px;

  border-collapse:
    separate;

  border-spacing: 0;

  overflow: hidden;

  border:
    1px solid
    var(--dah-border);

  border-radius:
    var(--dah-radius-sm);

  font-size: 15px;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content th {

  padding:
    13px 14px;

  background:
    var(--dah-navy-800);

  color:
    #ffffff;

  text-align: left;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.entry-content td {

  padding:
    13px 14px;

  border-top:
    1px solid
    var(--dah-border);
}


/* =========================================================
   16. HERO GLOBAL
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero {

  position: relative;

  overflow: hidden;

  margin: 0;

  padding:
    28px 18px
    38px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(37, 125, 122, 0.12),
      transparent 42%
    ),

    var(--dah-cream-100);
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--dah-teal-600),
      var(--dah-blue-600)
    );
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__inner {

  width: 100%;

  max-width: 1120px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;
}


/* =========================================================
   17. ORDEN HERO MÓVIL
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__content {

  display: contents;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__title {

  order: 1;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__description--primary {

  order: 2;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__cta {

  order: 3;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__visual {

  order: 4;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__description--secondary {

  order: 5;
}


/* =========================================================
   18. H1 HERO
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero h1 {

  margin:
    0 0
    16px;

  color:
    var(--dah-navy-900);

  font-size:
    clamp(
      27px,
      7.3vw,
      32px
    );

  line-height:
    1.08;

  letter-spacing:
    -0.025em;

  font-weight: 800;
}


/* =========================================================
   19. TEXTO HERO
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__description {

  color:
    var(--dah-text);

  font-size: 16px;

  line-height: 1.62;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__description--primary {

  margin:
    0 0
    20px !important;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__description--secondary {

  margin:
    24px 0
    0 !important;
}


/* =========================================================
   20. CTA HERO
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__cta {

  width:
    100% !important;

  margin:
    0 0
    30px !important;

  padding:
    0 !important;

  text-align: center;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__button {

  display:
    flex !important;

  width:
    100% !important;

  min-height: 56px;

  align-items: center;

  justify-content: center;

  padding:
    15px 20px !important;

  box-sizing:
    border-box;

  background:
    linear-gradient(
      90deg,
      var(--dah-blue-700),
      var(--dah-blue-600)
    ) !important;

  color:
    #ffffff !important;

  border:
    0 !important;

  border-radius:
    14px !important;

  text-decoration:
    none !important;

  text-align: center;

  font-size:
    17px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  box-shadow:
    var(--dah-shadow-button) !important;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__button:active {

  transform:
    scale(0.98);
}


/* =========================================================
   21. IMAGEN HERO
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__visual {

  width: 100%;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__visual figure {

  width: 100%;

  margin:
    0 !important;

  padding: 0;
}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero__visual img {

  display: block;

  width:
    100% !important;

  height:
    auto !important;

  margin: 0;

  border-radius:
    var(--dah-radius-md);

  box-shadow:
    0 14px 34px
    rgba(18, 52, 74, 0.15);
}


/* =========================================================
   22. HERO SIN IMAGEN
   ========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero--no-image
.dah-auto-hero__inner {

  max-width: 900px;
}


/* =========================================================
   23. MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content {

    font-size: 16px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content h2 {

    font-size: 27px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content h3 {

    font-size: 20px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero {

    padding-left: 16px;

    padding-right: 16px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero h1 {

    font-size: 27px;
  }

}


/* =========================================================
   24. TABLET
   ========================================================= */

@media (min-width: 700px) {

  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero {

    padding:
      48px 40px
      56px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__title,

  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__description--primary,

  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__description--secondary,

  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__cta,

  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__visual {

    order: initial;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero h1 {

    font-size:
      clamp(
        40px,
        5.6vw,
        52px
      );
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__description {

    font-size: 17px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__description--secondary {

    margin:
      0 0
      26px !important;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__cta {

    width:
      auto !important;

    margin:
      0 !important;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__button {

    width:
      auto !important;

    min-width:
      260px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__visual {

    margin-top:
      32px;
  }

}


/* =========================================================
   25. ESCRITORIO
   ========================================================= */

@media (min-width: 960px) {

  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content h2 {

    margin-top:
      72px;

    font-size:
      clamp(
        32px,
        3vw,
        39px
      );
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content h3 {

    font-size: 23px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero {

    padding:
      60px 44px
      62px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero--with-image
  .dah-auto-hero__inner {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, 0.92fr);

    gap: 58px;

    align-items: center;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero--no-image
  .dah-auto-hero__inner {

    display: block;

    max-width: 900px;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero h1 {

    font-size:
      clamp(
        43px,
        3.8vw,
        55px
      );
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__visual {

    margin: 0;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__visual img {

    border-radius:
      var(--dah-radius-lg);

    box-shadow:
      0 22px 52px
      rgba(18, 52, 74, 0.16);
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero__button:hover,

  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content
  .wp-block-button__link:hover {

    color:
      #ffffff !important;

    transform:
      translateY(-2px);

    filter:
      brightness(1.04);

    box-shadow:
      0 12px 27px
      rgba(37, 99, 235, 0.30) !important;
  }


  body:is(.single-post, .page):not(.home):not(.front-page)
  .entry-content
  a:not(.wp-block-button__link):not(.dah-auto-hero__button):hover {

    color:
      var(--dah-navy-700);
  }

}
/* =========================================================
26. CARRUSEL DENTRO DEL HERO
========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero--with-carousel
.dah-auto-hero__visual {

  width: 100%;

}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero--with-carousel
.dah-doctors-carousel {

  width: 100%;

  max-width: 520px;

  margin-left: auto;

  margin-right: auto;

}


/* Corregir color heredado del nombre del médico */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-doctors-carousel
.dah-doctor-caption
strong {

  color: #ffffff !important;

  font-weight: 750;

}


body:is(.single-post, .page):not(.home):not(.front-page)
.dah-doctors-carousel
.dah-doctor-caption
span {

  color: rgba(255, 255, 255, 0.92) !important;

}


/* Escritorio */

@media (min-width: 960px) {

  body:is(.single-post, .page):not(.home):not(.front-page)
  .dah-auto-hero--with-carousel
  .dah-doctors-carousel {

    max-width: 100%;

    margin: 0;

  }

}

/* =========================================================
27. CORRECCIÓN IMÁGENES CARRUSEL HERO
Evita que las reglas globales del hero recorten las fotos
========================================================= */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero--with-carousel
.dah-doctors-carousel
.dah-doctor-slide
img {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}


/* Fondo del espacio sobrante en fotos verticales */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero--with-carousel
.dah-carousel-viewport {

  background: #f3f7f8;

}


/* Mantener el marco exterior redondeado */

body:is(.single-post, .page):not(.home):not(.front-page)
.dah-auto-hero--with-carousel
.dah-carousel-viewport {

  overflow: hidden;

  border-radius:
    var(--dah-radius-lg);

  box-shadow:
    0 22px 52px
    rgba(18, 52, 74, 0.16);
}