/*
Theme Name:   Dra. María Elena
Theme URI:    https://salamancadesign.com
Description:  Tema personalizado desarrollado para el sitio web profesional de la Dra. María Elena, diseñado y desarrollado a las necesidades de comunicación, imagen institucional y presencia digital.
Author:       Erick Salamanca
Author URI:   https://salamancadesign.com
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  Dra. Maria Elena
*/

/* =========================================================
   @font-face — Chilton (familia completa)
   Orden de fuentes: woff2 → woff → ttf
   font-display: swap evita texto invisible durante la carga
   ========================================================= */

/* Thin – 100 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Thin.woff2') format('woff2'),
        url('fonts/Chilton-Thin.woff') format('woff'),
        url('fonts/Chilton-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-ThinItalic.woff2') format('woff2'),
        url('fonts/Chilton-ThinItalic.woff') format('woff'),
        url('fonts/Chilton-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* ExtraLight – 200 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-ExtraLight.woff2') format('woff2'),
        url('fonts/Chilton-ExtraLight.woff') format('woff'),
        url('fonts/Chilton-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-ExtraLightItalic.woff2') format('woff2'),
        url('fonts/Chilton-ExtraLightItalic.woff') format('woff'),
        url('fonts/Chilton-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Light – 300 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Light.woff2') format('woff2'),
        url('fonts/Chilton-Light.woff') format('woff'),
        url('fonts/Chilton-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-LightItalic.woff2') format('woff2'),
        url('fonts/Chilton-LightItalic.woff') format('woff'),
        url('fonts/Chilton-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular – 400 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Regular.woff2') format('woff2'),
        url('fonts/Chilton-Regular.woff') format('woff'),
        url('fonts/Chilton-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Italic.woff2') format('woff2'),
        url('fonts/Chilton-Italic.woff') format('woff'),
        url('fonts/Chilton-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium – 500 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Medium.woff2') format('woff2'),
        url('fonts/Chilton-Medium.woff') format('woff'),
        url('fonts/Chilton-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-MediumItalic.woff2') format('woff2'),
        url('fonts/Chilton-MediumItalic.woff') format('woff'),
        url('fonts/Chilton-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* SemiBold – 600 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-SemiBold.woff2') format('woff2'),
        url('fonts/Chilton-SemiBold.woff') format('woff'),
        url('fonts/Chilton-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/Chilton-SemiBoldItalic.woff') format('woff'),
        url('fonts/Chilton-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold – 700 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Bold.woff2') format('woff2'),
        url('fonts/Chilton-Bold.woff') format('woff'),
        url('fonts/Chilton-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-BoldItalic.woff2') format('woff2'),
        url('fonts/Chilton-BoldItalic.woff') format('woff'),
        url('fonts/Chilton-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ExtraBold – 800 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-ExtraBold.woff2') format('woff2'),
        url('fonts/Chilton-ExtraBold.woff') format('woff'),
        url('fonts/Chilton-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-ExtraBoldItalic.woff2') format('woff2'),
        url('fonts/Chilton-ExtraBoldItalic.woff') format('woff'),
        url('fonts/Chilton-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Black – 900 */
@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-Black.woff2') format('woff2'),
        url('fonts/Chilton-Black.woff') format('woff'),
        url('fonts/Chilton-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chilton';
    src: url('fonts/Chilton-BlackItalic.woff2') format('woff2'),
        url('fonts/Chilton-BlackItalic.woff') format('woff'),
        url('fonts/Chilton-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Tipografias */
p {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    color: #555;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

h2 {
    color: #0D2A5C;
    font-family: "Epilogue", Helvetica, Arial, Lucida, sans-serif;
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.1rem;
}

h2 span {
    font-family: "Chilton", Helvetica, Arial, Lucida, sans-serif;
    font-size: 2.125rem;
    font-style: italic;
    font-weight: 500;
    line-height: 2.1rem;
}

h3 {
    color: #0D2A5C;
    font-family: "Epilogue", Helvetica, Arial, Lucida, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

h4 {
    color: #0D2A5C;
    font-family: "Epilogue", Helvetica, Arial, Lucida, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

h5 {
    color: #00A3C0 !important;
    font-family: "Inter", Helvetica, Arial, Lucida, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2rem;
    letter-spacing: 0.03125rem;
}

/* texto hero */
.texto-hero p {
    font-family: "Epilogue", Helvetica, Arial, Lucida, sans-serif;
    font-size: 3.1rem;
    color: #0D2A5C;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    line-height: 3.42rem;
}

.texto-hero span {
    font-family: "Chilton", Helvetica, Arial, Lucida, sans-serif;
    font-size: 3.3rem;
    font-style: italic;
    font-weight: 500;
    line-height: 3.42rem;
}

.sub-call-to p {
    color: #0D2A5C;
    font-family: "Epilogue", Helvetica, Arial, Lucida, sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}



/* Estilos del Menú */
#menu-header ul li {
    padding-left: 0.27rem;
    padding-right: 0.27rem;
}

#menu-header ul li.current-menu-item>a,
#menu-header ul li.current-menu-ancestor>a,
#menu-header ul:not(.sub-menu)>li.current-menu-ancestor>a {
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 15%;
    text-underline-offset: 50%;
    text-underline-position: from-font;
}

/* Estilos del botón */
body #page-container .et_pb_section .et_pb_button {
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
}

/* Estilos del botoón de whatsapp */
body #page-container .et_pb_section .et_pb_button.btn-whatsapp::after {
    font-family: "bootstrap-icons" !important;
    content: "\F618" !important;
    font-size: 1.6em !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-left: 0.4em !important;
    position: relative !important;
    top: 0.38em !important;
    opacity: 1 !important;
}

/* Fix el hover */
body #page-container .et_pb_section .et_pb_button.btn-whatsapp:hover::after {
    font-family: "bootstrap-icons" !important;
    content: "\F618" !important;
    opacity: 1 !important;
}

/* Estilos del botoón de ubicación */
body #page-container .et_pb_section .et_pb_button.btn-ubicacion::after {
    font-family: "bootstrap-icons" !important;
    content: "\F3E7" !important;
    font-size: 1.6em !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-left: 0.4em !important;
    position: relative !important;
    top: 0.38em !important;
    opacity: 1 !important;
}

/* Fix el hover */
body #page-container .et_pb_section .et_pb_button.btn-ubicacion:hover::after {
    font-family: "bootstrap-icons" !important;
    content: "\F3E7" !important;
    opacity: 1 !important;
    color: #ef249b !important;
}

/* Estilos del botoón de flecha */
body #page-container .et_pb_section .et_pb_button.btn-flecha::after {
    font-family: "bootstrap-icons" !important;
    content: "\F138" !important;
    font-size: 1.6em !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-left: 0.4em !important;
    position: relative !important;
    top: 0.38em !important;
    opacity: 1 !important;
}

/* Fix el hover flecha*/
body #page-container .et_pb_section .et_pb_button.btn-flecha:hover::after {
    font-family: "bootstrap-icons" !important;
    content: "\F138" !important;
    opacity: 1 !important;
    color: #ef249b !important;
}

/* Icono flecha en el link "leer más" del módulo Blog */
.boton_leer_mas::after {
    font-family: "bootstrap-icons";
    content: "\F138";
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    margin-left: 0.35em;
    vertical-align: middle;
    line-height: 1;
}

/* Botones Hero */
#botones-hero .et_pb_module {
    width: 100% !important;
}

/* Resumen */
.resumen p {
    color: #0D2A5C;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.resumen_sub .et_pb_group .et_pb_text:nth-child(1) p {
    color: #0D2A5C;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.resumen_sub .et_pb_group .et_pb_text:nth-child(2) p {
    color: rgba(13, 42, 92, 0.70);
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.bio .bio-data .grupo-data .data-01 p {
    color: #fff;
    background: #0D2A5C;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    ;
}

.bio .bio-data .grupo-data .data-02:nth-child(1) p {
    color: rgba(13, 42, 92, 0.70);
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.bio .bio-data .grupo-data .data-02:nth-child(2) p {
    color: rgba(13, 42, 92, 0.70);
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.resumen .bi::before,
.resumen_sub .bi::before,
.resumen [class*=" bi-"]::before,
.resumen_sub [class*=" bi-"]::before,
.resumen [class^=bi-]::before,
.resumen_sub [class^=bi-]::before {
    font-size: 24px;
    color: #00A3C0;
    padding: 0.5rem;
    background: rgb(0, 163, 192, 8%);
    border-radius: 0.5rem;
}

.biografia .texto-descriptivo p {
    color: #555;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

.biografia .texto-experiencia p {
    color: #555;
    font-family: "Inter", sans-serif;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

.descrip_servicios ul p,
.descrip_servicios p {
    color: #555;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

.descrip_servicios h4 {
    font-size: 1rem;
}

.blurb-text p {
    color: #555;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

.contacto-info-text p {
    color: #555;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

.boton_leer_mas {
    color: #B81E78;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 1rem;
}

.boton_leer_mas::after {
    font-size: 1.5rem;
}

.pagination {
    margin: 1rem 0 0 0 !important;
}

.post_anteriores,
.post_nuevos {
    font-size: 1rem;
}

.modulo-blog h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.375rem !important;
}

.modulo-blog p {
    overflow: hidden;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.375rem !important;
}

#d5m-panel {
    background-color: rgb(255, 255, 255, 86%);
    box-shadow: none;
    height: 100dvh !important;
    box-shadow: 0px 0px 32px -6px rgb(0, 0, 0, 30%);
}

#d5m-overlay {
    background: rgb(255, 255, 255, 1%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    height: 100dvh !important;
}

/* Footer */
.footer p {
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

.footer ul {
    display: flex;
    flex-direction: column;
    margin-top: -8px;
}

.footer .et_mobile_nav_menu {
    display: none;
    ;
}

.footer .et_pb_menu__menu {
    display: flex;
}



/* ============================================================
   Media Queries — Divi 5
   Desktop : ≥ 981px
   Tablet  : 768px – 980px
   Mobile  : ≤ 767px
   ============================================================ */

/* Desktop */
@media (min-width: 981px) {}

/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {

    /* texto hero */
    .texto-hero p {
        font-size: 2.7rem;
        line-height: 2rem;
    }

    .texto-hero span {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .footer ul {
        flex-direction: row;
        margin-top: -8px;
    }

    .sub-call-to p {
        font-size: 1.8rem;
    }
}

/* Mobile */
@media (max-width: 767px) {

    /* texto hero */
    .texto-hero p {
        font-size: 2.7rem;
        line-height: 2rem;
    }

    .texto-hero span {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    h2 {
        font-size: 1.6rem;
        line-height: 2.1rem;
    }

    h2 span {
        font-size: 2.125rem;
        line-height: 2.1rem;
    }

    .footer ul {
        flex-direction: row;
        margin-top: -8px;
    }

    .sub-call-to p {
        font-size: 1.4rem;
    }

    /* callto */
    #callto-section .et_pb_button.btn-whatsapp::after,
    #callto-section .et_pb_button.btn-ubicacion::after {
        display: none !important;
    }
}

/* ============================================================
   Fix: header sticky/fixed en iOS Safari — v3

   ① Divi genera left:50% + translateX(-50%) para centrar el header.
      En iOS Safari, position:fixed + transform en el mismo elemento
      rompe el posicionamiento fijo. Fix: left:0 / right:0 / transform:none.

   ② backface-visibility:hidden promueve el header a su propia capa GPU
      sin alterar el transform. Esto estabiliza el rendering durante la
      animación del address bar de iOS Safari (elastic scroll / colapso).

   ③ overflow:visible previene que Divi JS aplique overflow:hidden al
      header cuando se cierra el menú móvil (condición: border-radius != 0).

   ④ Divi genera -webkit-backdrop-filter:(15px) sin blur() — valor inválido.
      Corregido en el ::before.

   ⑤ background:transparent en el elemento raíz del GPU layer: así los
      elementos transparentes dentro del layer (overlay del menú móvil)
      componen contra la página real, no contra el 70% blanco del header.
      El efecto frosted glass se aplica en ::before, que queda dentro del
      layer pero no interfiere con la composición de hijos transparentes.

   ⑥ CSS !important en author stylesheet sí gana sobre inline styles sin
      !important (CSS Cascade Level 4, §6.2). El MutationObserver en
      custom.js refuerza con setProperty('important') para máxima robustez.
   ============================================================ */
.et_pb_section_0_tb_header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    overflow: visible !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.et_pb_section_0_tb_header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    z-index: -1;
    pointer-events: none;
    transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}

.et_pb_section_0_tb_header.header-scrolled::before {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}