/* ================= RESET ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    background: #000;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

/* ================= HERO ================= */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background: #000;
}

.fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
    z-index: 2;
}

/* ================= HEADER ================= */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    padding: 0 7.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    z-index: 20;
}

.logo-header { width: 185px; height: auto; }

.header-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.telefono {
    color: #ddd;
    text-decoration: none;
    font-size: 15px;
}

/* ================= IDIOMA ================= */
.idioma { position: relative; }

.idioma-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    color: #fff;
    font: 14px inherit;
    cursor: pointer;
}

.globo {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.2;
}

.flecha {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 5px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    transition: .3s;
}

.idioma.open .flecha { transform: rotate(225deg); margin-top: 4px; }

.idioma-menu {
    position: absolute;
    top: 35px;
    right: 0;
    width: 120px;
    padding: 8px 0;
    background: #080808;
    border: 1px solid #333;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .3s;
}

.idioma.open .idioma-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.idioma-menu button {
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: 0;
    color: #fff;
    font: 12px inherit;
    text-align: left;
    cursor: pointer;
}

.idioma-menu button:hover { background: #151515; color: #a9dce9; }

/* ================= 3 RAYITAS ================= */
.menu-btn {
    width: 25px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-btn span {
    display: block;
    height: 1px;
    margin: 8px 0;
    background: #fff;
}

/* ================= MENU LATERAL ================= */
.menu-panel {
    position: fixed;
    top: 0;
    right: -450px;
    width: 430px;
    height: 100vh;
    padding: 85px 55px 40px;
    background: #070707;
    border-left: 1px solid #292929;
    overflow-y: auto;
    z-index: 100;
    transition: right .45s ease;
}

.menu-panel.active { right: 0; }

.cerrar {
    position: absolute;
    top: 25px;
    right: 35px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 35px;
    font-weight: 200;
    cursor: pointer;
}

.menu-titulo {
    margin-bottom: 35px;
    color: #888;
    font-size: 11px;
    letter-spacing: 4px;
}

.menu-links a {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 19px 0;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.menu-links small { width: 22px; color: #666; font-size: 10px; }
.menu-links span { font-size: 12px; letter-spacing: 1.5px; }

.menu-links a:hover { color: #a9dce9; transform: translateX(5px); }

.menu-cita {
    display: inline-block;
    margin-top: 25px;
    padding: 15px 23px;
    border: 1px solid #666;
    border-radius: 30px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 2px;
    text-decoration: none;
    transition: .3s;
}

.menu-cita:hover { background: #fff; color: #000; }

.menu-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: .4s;
}

.menu-fondo.active { opacity: 1; visibility: visible; }

/* ================= TEXTO ================= */
.hero-content { position: absolute; inset: 0; z-index: 5; }

.texto {
    position: absolute;
    top: 38%;
    left: 7%;
}

.texto > span {
    display: block;
    margin-bottom: 35px;
    color: #ddd;
    font-size: 13px;
    letter-spacing: 5px;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(55px, 5.2vw, 88px);
    font-weight: 400;
    line-height: .95;
}

.texto i {
    display: block;
    width: 70px;
    height: 1px;
    margin: 35px 0;
    background: #fff;
}

.texto p {
    margin-bottom: 38px;
    color: #aaa;
    font-size: 15px;
}

/* ================= BOTÓN ================= */
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding: 17px 28px;
    border: 1px solid #777;
    border-radius: 40px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    text-decoration: none;
    transition: .3s;
}

.btn-hero b { font-size: 18px; font-weight: 300; }
.btn-hero:hover { background: #fff; color: #000; }

/* ================= DOCTOR ================= */
.doctor {
    position: absolute;
    left: 60%;
    bottom: 0;
    height: 85%;
    transform: translateX(-50%);
    z-index: 4;
}

.doctor img { display: block; height: 100%; width: auto; }

/* ================= FIRMA ================= */
.firma {
    position: absolute;
    right: 7%;
    bottom: 7%;
    z-index: 6;
}

.firma img { width: 150px; height: auto; }

/* ================= TABLETS ================= */
@media (max-width: 1000px) {
    header { height: 95px; padding: 0 5%; }
    .logo-header { width: 155px; }
    .telefono { display: none; }
    .header-right { gap: 22px; }

    .texto { top: 31%; left: 5%; z-index: 7; }
    .texto > span { margin-bottom: 25px; font-size: 11px; letter-spacing: 3px; }
    h1 { font-size: clamp(48px, 7vw, 65px); }
    .texto p { font-size: 14px; }

    .doctor { left: 64%; height: 72%; }
    .firma { right: 5%; bottom: 5%; }
}

/* ================= CELULAR ================= */
@media (max-width: 600px) {
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* HERO */
    .hero {
        height: 100svh;
        min-height: 640px;
        max-height: 900px;
    }

    .overlay {
        background:
            linear-gradient(to bottom,
                rgba(0, 0, 0, .55) 0%,
                rgba(0, 0, 0, .25) 45%,
                rgba(0, 0, 0, .75) 100%);
    }

    /* HEADER */
    header { height: 78px; padding: 0 6%; }
    .logo-header { width: 120px; }
    .header-right { gap: 14px; }
    .telefono { display: none; }

    .idioma-btn { font-size: 11px; gap: 6px; }
    .globo { width: 20px; height: 20px; }
    .flecha { width: 6px; height: 6px; margin-left: 2px; }

    .menu-btn { width: 22px; }
    .menu-btn span { margin: 6px 0; }

    /* TEXTO */
    .texto {
        top: 20%;
        left: 7%;
        width: 86%;
        z-index: 7;
    }

    .texto > span {
        margin-bottom: 18px;
        font-size: 8px;
        letter-spacing: 3px;
        white-space: nowrap;
        opacity: .85;
    }

    h1 {
        max-width: 92%;
        font-size: clamp(38px, 12vw, 52px);
        line-height: 1;
    }

    .texto i { width: 45px; margin: 22px 0; }

    .texto p {
        max-width: 240px;
        margin-bottom: 22px;
        font-size: 12px;
        line-height: 1.55;
    }

    /* BOTÓN */
    .btn-hero {
        padding: 12px 18px;
        gap: 16px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }
    .btn-hero b { font-size: 14px; }

    /* DOCTOR: anclado abajo a la derecha sin desbordar */
    .doctor {
        left: auto;
        right: -6%;
        bottom: 0;
        height: 52%;
        max-height: 420px;
        transform: none;
        opacity: .9;
        z-index: 4;
    }

    .doctor img { height: 100%; width: auto; max-width: none; }

    /* FIRMA */
    .firma { right: 6%; bottom: 4%; z-index: 8; }
    .firma img { width: 80px; }

    /* MENU */
    .menu-panel {
        width: 100%;
        right: -100%;
        padding: 72px 26px 30px;
        overflow-x: hidden;
    }

    .cerrar { top: 18px; right: 22px; font-size: 30px; }
    .menu-titulo { margin-bottom: 26px; font-size: 9px; letter-spacing: 3px; }

    .menu-links a { margin: 15px 0; gap: 14px; }
    .menu-links small { width: 18px; font-size: 9px; }
    .menu-links span { font-size: 10px; letter-spacing: 1.2px; }

    .menu-cita { margin-top: 20px; padding: 13px 20px; font-size: 9px; }
}

/* ================= CELULARES PEQUEÑOS ================= */
@media (max-width: 380px) {
    .hero { min-height: 600px; }

    header { height: 72px; padding: 0 5%; }
    .logo-header { width: 108px; }
    .header-right { gap: 10px; }
    .globo { width: 18px; height: 18px; }
    .menu-btn { width: 20px; }

    .texto { top: 19%; left: 6%; width: 88%; }
    .texto > span { font-size: 7px; letter-spacing: 2px; }
    h1 { font-size: 34px; }
    .texto p { max-width: 210px; font-size: 11px; }

    .btn-hero { padding: 10px 16px; font-size: 8px; }
    .btn-hero b { font-size: 13px; }

    .doctor { height: 48%; right: -10%; }
    .firma img { width: 70px; }
}

/* ================= SOBRE MÍ ================= */
.sobre-mi {
    display: flex;
    gap: 4%;
    padding: 25px 7.5%;
    min-height: 100vh;
    background: #000;
    color: #fff;
    overflow: hidden;
}

.sobre-mi-imagen {
    flex: 0 0 30%;
}

.sobre-mi-imagen img {
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
    object-position: center top;
    border-radius: 30px;
    display: block;
}

.sobre-mi-contenido {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.sobre-mi-titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    letter-spacing: 6px;
}

.sobre-mi-titulo i {
    width: 95px;
    height: 1px;
    background: #777;
}

.sobre-mi-contenido h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(45px, 4.1vw, 70px);
    font-weight: 400;
    line-height: 1;
    margin: 25px 0;
}

.sobre-mi-contenido h2 em { color: #d0d0d0; }

.sobre-mi-contenido > p {
    max-width: 1000px;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    color: #d0d0d0;
}

.enfoque {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 38px;
}

.enfoque-linea {
    width: 7px;
    height: 58px;
    background: #fff;
    flex-shrink: 0;
}

.enfoque-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.enfoque small { font-size: 10px; letter-spacing: 5px; }
.enfoque strong { font-size: 21px; font-weight: 400; letter-spacing: 6px; }

.enfoque > em {
    margin-left: auto;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #ccc;
}

/* ============ TABLET ============ */
@media (max-width: 900px) {
    .sobre-mi {
        gap: 30px;
        padding: 45px 5%;
        min-height: auto;
    }

    .sobre-mi-imagen { flex: 0 0 35%; }
    .sobre-mi-imagen img { min-height: 500px; border-radius: 20px; }

    .sobre-mi-contenido h2 { font-size: 42px; }
    .sobre-mi-contenido > p { font-size: 14px; line-height: 1.7; }

    .enfoque > em { display: none; }
}

/* ============ MÓVIL ============ */
@media (max-width: 600px) {
    .sobre-mi {
        flex-direction: column;
        gap: 25px;
        padding: 50px 6%;
        min-height: auto;
    }

    .sobre-mi-imagen {
        flex: none;
        width: 100%;
        height: 380px;
    }

    .sobre-mi-imagen img {
        height: 100%;
        min-height: 0;
        object-position: center 20%;
        border-radius: 18px;
    }

    .sobre-mi-titulo {
        font-size: 9px;
        letter-spacing: 3px;
        gap: 12px;
    }

    .sobre-mi-titulo i { width: 50px; }

    .sobre-mi-contenido h2 {
        font-size: clamp(32px, 10vw, 42px);
        margin: 16px 0 18px;
    }

    .sobre-mi-contenido > p {
        font-size: 13px;
        line-height: 1.7;
    }

    .enfoque {
        margin-top: 25px;
        gap: 14px;
    }

    .enfoque-linea { width: 5px; height: 48px; }
    .enfoque small { font-size: 8px; letter-spacing: 3px; }
    .enfoque strong { font-size: 15px; letter-spacing: 3px; }
}

/* ============ MÓVIL PEQUEÑO ============ */
@media (max-width: 380px) {
    .sobre-mi { padding: 40px 5%; gap: 20px; }
    .sobre-mi-imagen { height: 320px; }

    .sobre-mi-titulo { font-size: 8px; letter-spacing: 2.5px; }
    .sobre-mi-titulo i { width: 35px; }

    .sobre-mi-contenido h2 { font-size: 30px; }
    .sobre-mi-contenido > p { font-size: 12px; }

    .enfoque { margin-top: 20px; }
    .enfoque small { font-size: 7px; }
    .enfoque strong { font-size: 13px; }
}

/* =====================================================
   SECCIÓN: SOBRE MÍ
===================================================== */

.sobre-mi {
    display: flex;
    gap: 4%;
    padding: 25px 7.5%;
    min-height: 100vh;
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* ---------- IMAGEN ---------- */
.sobre-mi-imagen {
    flex: 0 0 30%;
}

.sobre-mi-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
    object-position: center top;   /* clave para que se vea bien la cara del doctor */
    border-radius: 30px;
}

/* ---------- CONTENIDO ---------- */
.sobre-mi-contenido {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sobre-mi-titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    letter-spacing: 6px;
}

.sobre-mi-titulo i {
    width: 95px;
    height: 1px;
    background: #777;
    flex-shrink: 0;
}

.sobre-mi-contenido h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(45px, 4.1vw, 70px);
    font-weight: 400;
    line-height: 1;
    margin: 25px 0;
}

.sobre-mi-contenido h2 em { color: #d0d0d0; }

.sobre-mi-contenido > p {
    max-width: 1000px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: #d0d0d0;
}

/* ---------- ENFOQUE ---------- */
.enfoque {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 38px;
}

.enfoque-linea {
    width: 7px;
    height: 58px;
    background: #fff;
    flex-shrink: 0;
}

.enfoque div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.enfoque small  { font-size: 10px; letter-spacing: 5px; }
.enfoque strong { font-size: 21px; font-weight: 400; letter-spacing: 6px; }

.enfoque > em {
    margin-left: auto;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #ccc;
}

/* =====================================================
   TABLET  (≤ 900px)
===================================================== */
@media (max-width: 900px) {
    .sobre-mi {
        gap: 30px;
        padding: 45px 5%;
        min-height: auto;
    }

    .sobre-mi-imagen { flex: 0 0 35%; }

    .sobre-mi-imagen img {
        min-height: 500px;
        border-radius: 22px;
    }

    .sobre-mi-contenido h2 { font-size: 42px; }
    .sobre-mi-contenido > p  { font-size: 14px; line-height: 1.7; }

    .enfoque > em { display: none; }
}

/* =====================================================
   CELULAR  (≤ 600px)
   → imagen arriba, texto abajo (mejor lectura y sin texto microscópico)
===================================================== */
@media (max-width: 600px) {
    .sobre-mi {
        flex-direction: column;
        gap: 28px;
        padding: 55px 6%;
        min-height: auto;
        overflow: visible;
    }

    /* Imagen a lo ancho, formato retrato contenido */
    .sobre-mi-imagen {
        flex: none;
        width: 100%;
        height: 400px;
    }

    .sobre-mi-imagen img {
        height: 100%;
        min-height: 0;
        object-position: center 15%;  /* encuadra el rostro del doctor */
        border-radius: 20px;
    }

    /* Contenido */
    .sobre-mi-titulo {
        gap: 12px;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .sobre-mi-titulo i { width: 45px; }

    .sobre-mi-contenido h2 {
        font-size: clamp(34px, 10vw, 44px);
        margin: 16px 0 18px;
    }

    .sobre-mi-contenido > p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .enfoque {
        margin-top: 28px;
        gap: 14px;
    }

    .enfoque-linea { width: 5px; height: 48px; }
    .enfoque small  { font-size: 8px; letter-spacing: 3px; }
    .enfoque strong { font-size: 15px; letter-spacing: 3px; }
}

/* =====================================================
   CELULARES PEQUEÑOS  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .sobre-mi { padding: 45px 5%; gap: 22px; }

    .sobre-mi-imagen { height: 330px; }

    .sobre-mi-titulo { font-size: 8px; letter-spacing: 2.5px; }
    .sobre-mi-titulo i { width: 32px; }

    .sobre-mi-contenido h2 { font-size: 30px; }
    .sobre-mi-contenido > p { font-size: 12px; line-height: 1.7; }

    .enfoque { margin-top: 22px; gap: 12px; }
    .enfoque-linea { height: 42px; }
    .enfoque small  { font-size: 7px; }
    .enfoque strong { font-size: 13px; letter-spacing: 2px; }
}

/* =====================================================
   SECCIÓN: MI TRAYECTORIA
===================================================== */

.trayectoria {
    padding: 25px 4%;
    height: 56vh;
    min-height: 480px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* ---------- TÍTULO ---------- */
.trayectoria-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 25px;
}

.trayectoria-titulo::before,
.trayectoria-titulo::after {
    content: "";
    width: 170px;
    height: 1px;
    background: #777;
    flex-shrink: 0;
}

.trayectoria-titulo span {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    letter-spacing: 5px;
}

/* ---------- GRID ---------- */
.trayectoria-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    height: calc(100% - 80px);
}

.trayectoria-card {
    padding: 28px 35px 20px;
    border: 1px solid #3d3d3d;
    border-radius: 18px;
    min-width: 0;
    overflow: hidden;
}

/* ---------- HEADER TARJETA ---------- */
.card-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
}

.icono {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border: 1px solid #aaa;
    border-radius: 50%;
}

.icono svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 5px;
}

.card-header i {
    display: block;
    width: 64px;
    height: 1px;
    margin-top: 14px;
    background: #999;
}

/* ---------- SCROLL ---------- */
.card-scroll {
    height: calc(100% - 90px);
    padding-right: 12px;
    overflow-y: auto;
}

.card-scroll::-webkit-scrollbar { width: 3px; }
.card-scroll::-webkit-scrollbar-track { background: #202020; }
.card-scroll::-webkit-scrollbar-thumb { background: #aaa; }

/* ---------- DATOS ---------- */
.dato {
    position: relative;
    padding: 5px 0 18px 20px;
    margin-bottom: 14px;
    border-left: 1px solid #aaa;
}

.dato::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -6px;
    width: 9px;
    height: 9px;
    background: #000;
    border: 2px solid #fff;
    border-radius: 50%;
}

.dato b    { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; }
.dato span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #aaa; }

/* ---------- LOGROS ---------- */
.logro {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #292929;
}

.mini-icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #aaa;
    border-radius: 50%;
    font-size: 20px;
}

.logro span { font-size: 14px; line-height: 1.5; }

/* =====================================================
   TABLET  (≤ 900px)
===================================================== */
@media (max-width: 900px) {
    .trayectoria {
        padding: 35px 3%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .trayectoria-titulo { gap: 25px; margin-bottom: 22px; }
    .trayectoria-titulo span { font-size: 30px; letter-spacing: 4px; }
    .trayectoria-titulo::before,
    .trayectoria-titulo::after { width: 90px; }

    .trayectoria-grid {
        gap: 14px;
        height: auto;
    }

    .trayectoria-card {
        height: 360px;
        padding: 20px 18px 16px;
        border-radius: 15px;
    }

    .card-header { gap: 14px; margin-bottom: 16px; }
    .icono { width: 52px; height: 52px; }
    .icono svg { width: 26px; height: 26px; }
    .card-header h3 { font-size: 12px; letter-spacing: 3px; }
    .card-header i { width: 45px; margin-top: 9px; }

    .card-scroll { height: calc(100% - 70px); padding-right: 8px; }
    .card-scroll::-webkit-scrollbar { width: 2px; }

    .dato { padding: 4px 0 13px 14px; margin-bottom: 11px; }
    .dato::before { width: 7px; height: 7px; border-width: 1px; left: -5px; top: 12px; }
    .dato b    { font-size: 11.5px; line-height: 1.4; }
    .dato span { font-size: 10px;   line-height: 1.4; }

    .logro { gap: 10px; padding: 11px 0; }
    .mini-icono { width: 30px; height: 30px; font-size: 15px; }
    .logro span { font-size: 10.5px; line-height: 1.4; }
}

/* =====================================================
   CELULAR  (≤ 600px)
   → 3 tarjetas EN UNA SOLA FILA (grid de 3 columnas).
     Se apilan verticalmente los elementos internos
     del header para ganar ancho útil y que el texto
     siga siendo legible.
===================================================== */
@media (max-width: 600px) {
    .trayectoria {
        padding: 35px 4%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    /* ---------- TÍTULO ---------- */
    .trayectoria-titulo { gap: 12px; margin-bottom: 22px; }
    .trayectoria-titulo span {
        font-size: 19px;
        letter-spacing: 3px;
        white-space: nowrap;
    }
    .trayectoria-titulo::before,
    .trayectoria-titulo::after { width: 30px; }

    /* ---------- GRID: 3 EN LÍNEA ---------- */
    .trayectoria-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        height: auto;
        align-items: stretch;
    }

    .trayectoria-card {
        height: 270px;              /* altura fija → las 3 se ven parejas */
        padding: 14px 10px 12px;
        border-radius: 12px;
    }

    /* ---------- HEADER EN COLUMNA (gana ancho) ---------- */
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }

    .icono { width: 34px; height: 34px; }
    .icono svg { width: 17px; height: 17px; }

    .card-header h3 {
        font-size: 8.5px;
        letter-spacing: 1.5px;
        line-height: 1.25;
    }

    .card-header i { width: 24px; margin-top: 6px; }

    /* ---------- SCROLL ---------- */
    .card-scroll {
        height: calc(100% - 78px);
        padding-right: 4px;
    }
    .card-scroll::-webkit-scrollbar { width: 2px; }

    /* ---------- DATOS ---------- */
    .dato { padding: 3px 0 9px 9px; margin-bottom: 7px; }
    .dato::before { width: 5px; height: 5px; border-width: 1px; left: -4px; top: 8px; }
    .dato b    { font-size: 8.5px; line-height: 1.35; }
    .dato span { font-size: 7.5px; line-height: 1.35; margin-top: 2px; }

    /* ---------- LOGROS ---------- */
    .logro { gap: 6px; padding: 7px 0; }
    .mini-icono { width: 22px; height: 22px; font-size: 11px; }
    .logro span { font-size: 7.5px; line-height: 1.3; }
}

/* =====================================================
   CELULARES PEQUEÑOS  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .trayectoria { padding: 30px 3.5%; }

    .trayectoria-titulo { gap: 8px; margin-bottom: 18px; }
    .trayectoria-titulo span { font-size: 17px; letter-spacing: 2px; }
    .trayectoria-titulo::before,
    .trayectoria-titulo::after { width: 22px; }

    .trayectoria-grid { gap: 6px; }

    .trayectoria-card {
        height: 240px;
        padding: 12px 8px 10px;
        border-radius: 10px;
    }

    .card-header { gap: 6px; margin-bottom: 8px; }
    .icono { width: 30px; height: 30px; }
    .icono svg { width: 15px; height: 15px; }
    .card-header h3 { font-size: 7.5px; letter-spacing: 1.2px; }
    .card-header i { width: 20px; margin-top: 5px; }

    .card-scroll { height: calc(100% - 68px); padding-right: 3px; }

    .dato { padding: 3px 0 8px 8px; margin-bottom: 6px; }
    .dato::before { left: -4px; top: 7px; }
    .dato b    { font-size: 7.5px; line-height: 1.3; }
    .dato span { font-size: 6.8px; line-height: 1.3; }

    .logro { gap: 5px; padding: 6px 0; }
    .mini-icono { width: 20px; height: 20px; font-size: 10px; }
    .logro span { font-size: 6.8px; line-height: 1.25; }
}

/* =====================================================
   CERTIFICACIONES Y ESPECIALIZACIÓN
===================================================== */

.certificaciones-section {
    padding: 50px 0 40px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* ---------- SEPARADOR ---------- */
.cert-separador {
    width: 100%;
    height: 1px;
    margin-bottom: 28px;
    background: #fff;
    opacity: .65;
}

.cert-container { padding: 0 6%; }

/* ---------- ENCABEZADO ---------- */
.cert-header { text-align: center; }

.cert-kicker {
    display: block;
    font-size: 10px;
    letter-spacing: 4px;
    color: #b9e2eb;
}

.cert-line {
    display: block;
    width: 58px;
    height: 1px;
    margin: 13px auto;
    background: #fff;
}

.cert-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 400;
    line-height: 1;
}

.cert-header p {
    max-width: 750px;
    margin: 13px auto 0;
    font-size: 13px;
    line-height: 1.55;
    color: #ccc;
}

/* ---------- CARRUSEL ---------- */
.cert-carousel {
    position: relative;
    margin-top: 27px;
    padding: 25px 0;
}

.cert-track-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
}

.cert-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    transition: transform .45s ease;
}

/* ---------- TARJETA ---------- */
.cert-card {
    flex: 0 0 245px;
    width: 245px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid #292929;
    border-radius: 12px;
    opacity: .42;
    transform: scale(.88);
    cursor: pointer;
    transition: transform .4s ease, opacity .4s ease, border-color .4s ease;
}

.cert-card.active {
    opacity: 1;
    transform: scale(1.18);
    border-color: #666;
    z-index: 5;
}

.cert-card img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
}

/* ---------- FLECHAS ---------- */
.cert-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #777;
    border-radius: 50%;
    background: rgba(0, 0, 0, .85);
    cursor: pointer;
    transition: background .3s;
}

.cert-arrow:hover { background: #fff; }

.cert-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.3;
    transition: stroke .3s;
}

.cert-arrow:hover svg { stroke: #000; }

.cert-prev { left: 12px; }
.cert-next { right: 12px; }

/* ---------- PUNTOS ---------- */
.cert-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 16px 0 28px;
}

.cert-dot {
    width: 7px;
    height: 7px;
    background: #555;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s;
}

.cert-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* =====================================================
   ENFERMEDADES TRATADAS
===================================================== */

.procedimientos-box {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr);
    align-items: center;
    width: 90%;
    min-height: 165px;
    margin: 0 auto;
    padding: 20px 40px;
    border: 1px solid #333;
    border-radius: 18px;
}

/* ---------- INTRO ---------- */
.procedimientos-title {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding-right: 30px;
    border-right: 1px solid #333;
}

.face-icon {
    flex-shrink: 0;
    width: 55px;
}

.face-icon svg {
    width: 48px;
    height: 62px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.procedure-kicker {
    font-size: 13px;
    letter-spacing: 3px;
    white-space: nowrap;
}

.procedimientos-title p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #aaa;
}

/* ---------- COLUMNAS ---------- */
.enfermedad-column {
    min-width: 0;
    padding: 0 25px;
    border-right: 1px solid #333;
}

.enfermedad-column:last-child { border-right: 0; }

.enfermedad-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 8px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #ddd;
}

.enfermedad-item span {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

/* =====================================================
   PREMIOS Y DISTINCIONES
===================================================== */

.premios-section {
    padding: 35px 0 40px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

.premios-container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------- ENCABEZADO ---------- */
.premios-header {
    margin-bottom: 24px;
    text-align: center;
}

.premios-kicker {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
}

.premios-line {
    display: block;
    width: 65px;
    height: 1px;
    margin: 14px auto 18px;
    background: #fff;
}

.premios-header h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 400;
    line-height: 1.1;
}

/* ---------- GRID ---------- */
.premios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* ---------- TARJETA ---------- */
.premio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 285px;
    padding: 28px 25px;
    background: #050505;
    border: 1px solid #363636;
    border-radius: 12px;
    text-align: center;
    transition: border-color .3s ease, transform .3s ease;
}

.premio-card:hover {
    border-color: #777;
    transform: translateY(-3px);
}

.premio-icon {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    margin-bottom: 14px;
}

.premio-icon svg {
    width: 58px;
    height: 58px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.premio-linea {
    width: 36px;
    height: 1px;
    margin-bottom: 18px;
    background: #fff;
}

.premio-card h3 {
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.25;
}

.premio-card p {
    max-width: 300px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.6;
    color: #ccc;
}

.premio-year {
    margin-top: auto;
    padding-top: 20px;
    font-size: 11px;
    letter-spacing: 5px;
    color: #ddd;
}

/* =====================================================
   RESPONSIVE — CERTIFICACIONES (≤ 900px)
===================================================== */
@media (max-width: 900px) {
    .certificaciones-section { padding: 45px 0 35px; }
    .cert-container { padding: 0 5%; }

    .cert-header h2 { font-size: 34px; }
    .cert-header p  { font-size: 12px; max-width: 560px; }

    .cert-card { flex: 0 0 190px; width: 190px; height: 270px; }
    .cert-card.active { transform: scale(1.12); }

    .cert-track { gap: 22px; }
    .cert-arrow { width: 38px; height: 38px; }
    .cert-arrow svg { width: 17px; height: 17px; }
}

/* =====================================================
   RESPONSIVE — ENFERMEDADES (≤ 1100px)
===================================================== */
@media (max-width: 1100px) {
    .procedimientos-box { padding: 20px 25px; }
    .enfermedad-column  { padding: 0 15px; }

    .procedure-kicker { font-size: 11px; letter-spacing: 2px; }
    .enfermedad-item  { font-size: 11px; }
}

/* =====================================================
   RESPONSIVE — PREMIOS (≤ 900px)
===================================================== */
@media (max-width: 900px) {
    .premios-grid { gap: 16px; }

    .premio-card { min-height: 260px; padding: 24px 18px; }

    .premio-icon { width: 56px; height: 56px; margin-bottom: 12px; }
    .premio-icon svg { width: 50px; height: 50px; }

    .premio-card h3 { font-size: 18px; margin-bottom: 10px; }
    .premio-card p  { font-size: 12px; line-height: 1.55; }

    .premio-linea { margin-bottom: 14px; }
    .premio-year  { padding-top: 16px; letter-spacing: 4px; }
}

/* =====================================================
   RESPONSIVE — ENFERMEDADES (≤ 800px)
   → título arriba + 3 columnas en una sola fila
===================================================== */
@media (max-width: 800px) {
    .procedimientos-box {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 22px 20px;
    }

    .procedimientos-title {
        grid-column: 1 / -1;
        padding: 0 0 18px;
        margin-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid #333;
    }

    .enfermedad-column { padding: 0 12px; }
    .enfermedad-column:nth-child(3) { border-right: 0; }
}

/* =====================================================
   RESPONSIVE — CELULAR  (≤ 600px)
   → Certificaciones + Enfermedades + Premios
===================================================== */
@media (max-width: 600px) {
    /* ---------- CERTIFICACIONES ---------- */
    .certificaciones-section { padding: 40px 0 30px; }
    .cert-separador { margin-bottom: 22px; }
    .cert-container { padding: 0 4%; }

    .cert-kicker { font-size: 8.5px; letter-spacing: 3px; }
    .cert-line   { width: 42px; margin: 10px auto; }

    .cert-header h2 { font-size: 26px; }

    .cert-header p {
        max-width: 320px;
        margin-top: 10px;
        font-size: 11.5px;
        line-height: 1.55;
    }

    .cert-carousel { margin-top: 18px; padding: 18px 0; }

    .cert-card {
        flex: 0 0 150px;
        width: 150px;
        height: 210px;
        padding: 6px;
        border-radius: 10px;
    }

    .cert-card.active { transform: scale(1.1); }
    .cert-track { gap: 16px; }

    .cert-arrow {
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, .9);
    }

    .cert-arrow svg { width: 14px; height: 14px; }

    .cert-prev { left: 4px; }
    .cert-next { right: 4px; }

    .cert-dots { gap: 6px; margin: 12px 0 20px; }
    .cert-dot  { width: 6px; height: 6px; }

    /* ---------- ENFERMEDADES ---------- */
    .procedimientos-box {
        width: 94%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 18px 14px;
        border-radius: 14px;
    }

    .procedimientos-title {
        gap: 14px;
        padding-bottom: 14px;
        margin-bottom: 14px;
    }

    .face-icon { width: 42px; }
    .face-icon svg { width: 36px; height: 46px; }

    .procedure-kicker { font-size: 9px; letter-spacing: 2px; }

    .procedimientos-title p {
        margin-top: 6px;
        font-size: 10.5px;
        line-height: 1.45;
    }

    .enfermedad-column { padding: 0 8px; }

    .enfermedad-item {
        gap: 6px;
        margin: 6px 0;
        font-size: 8.5px;
        line-height: 1.35;
    }

    .enfermedad-item span { width: 3px; height: 3px; }

    /* ---------- PREMIOS ---------- */
    .premios-section { padding: 32px 0 34px; }
    .premios-container { width: 94%; }

    .premios-kicker { font-size: 9px; letter-spacing: 3px; }
    .premios-line   { width: 45px; margin: 10px auto 14px; }
    .premios-header h2 { font-size: 26px; }
    .premios-header { margin-bottom: 18px; }

    .premios-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .premio-card {
        min-height: 230px;
        padding: 16px 8px 14px;
        border-radius: 10px;
    }

    .premio-icon { width: 38px; height: 38px; margin-bottom: 8px; }
    .premio-icon svg { width: 34px; height: 34px; stroke-width: 1.4; }

    .premio-linea { width: 22px; margin-bottom: 10px; }

    .premio-card h3 {
        font-size: 11px;
        line-height: 1.2;
        margin-bottom: 7px;
    }

    .premio-card p {
        max-width: none;
        font-size: 8.5px;
        line-height: 1.5;
    }

    .premio-year {
        padding-top: 10px;
        font-size: 7.5px;
        letter-spacing: 2px;
    }
}

/* =====================================================
   RESPONSIVE — CELULARES PEQUEÑOS  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    /* ---------- CERTIFICACIONES ---------- */
    .certificaciones-section { padding: 34px 0 26px; }
    .cert-container { padding: 0 3.5%; }

    .cert-header h2 { font-size: 22px; }
    .cert-header p  { font-size: 11px; max-width: 280px; }

    .cert-card {
        flex: 0 0 135px;
        width: 135px;
        height: 190px;
    }

    .cert-track { gap: 14px; }

    .cert-arrow { width: 28px; height: 28px; }
    .cert-arrow svg { width: 12px; height: 12px; }

    /* ---------- ENFERMEDADES ---------- */
    .procedimientos-box { padding: 16px 12px; }

    .face-icon { width: 36px; }
    .face-icon svg { width: 30px; height: 40px; }

    .procedure-kicker { font-size: 8px; letter-spacing: 1.5px; }

    .procedimientos-title p {
        margin-top: 5px;
        font-size: 10px;
    }

    .enfermedad-column { padding: 0 6px; }

    .enfermedad-item {
        gap: 5px;
        margin: 5px 0;
        font-size: 7.5px;
    }

    /* ---------- PREMIOS ---------- */
    .premios-section { padding: 28px 0 30px; }
    .premios-container { width: 95%; }

    .premios-header h2 { font-size: 22px; }
    .premios-kicker    { font-size: 8px; letter-spacing: 2.5px; }

    .premios-grid { gap: 6px; }

    .premio-card {
        min-height: 210px;
        padding: 13px 6px 11px;
        border-radius: 9px;
    }

    .premio-icon { width: 32px; height: 32px; margin-bottom: 7px; }
    .premio-icon svg { width: 28px; height: 28px; }

    .premio-linea { width: 18px; margin-bottom: 8px; }

    .premio-card h3 { font-size: 10px; margin-bottom: 6px; }
    .premio-card p  { font-size: 7.5px; line-height: 1.45; }

    .premio-year { padding-top: 9px; font-size: 6.8px; letter-spacing: 1.8px; }
}

/* =====================================================
   PROCEDIMIENTOS
===================================================== */

.procedimientos-section {
    padding: 38px 0 45px;
    background: #050505;
    color: #fff;
    overflow: hidden;
}

.procedimientos-container {
    display: grid;
    grid-template-columns: 35% 65%;
    width: 91%;
    max-width: 1500px;
    min-height: 650px;
    margin: 0 auto;
}

/* ---------- INFO ---------- */
.procedimientos-info { padding-right: 45px; }

.procedimientos-kicker {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
}

.procedimientos-linea {
    display: block;
    width: 90px;
    height: 2px;
    margin: 22px 0 42px;
    background: #fff;
}

.procedimientos-info h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 3.5vw, 48px);
    font-weight: 400;
    line-height: 1.05;
}

.procedimientos-info > p {
    max-width: 420px;
    margin: 22px 0 42px;
    font-size: 14px;
    line-height: 1.9;
    color: #bbb;
}

/* ---------- LISTA ---------- */
.procedimiento-item {
    display: grid;
    grid-template-columns: 45px 1fr 20px;
    align-items: center;
    gap: 15px;
    min-height: 75px;
    border-bottom: 1px solid #292929;
    cursor: pointer;
    transition: border-color .3s ease;
}

.procedimiento-item:hover { border-color: #777; }

.procedimiento-icono {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
}

.procedimiento-icono svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.procedimiento-texto { min-width: 0; }

.procedimiento-texto strong {
    display: block;
    font-size: 16px;
    letter-spacing: .5px;
}

.procedimiento-texto p {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #aaa;
}




.procedimiento-item:hover .procedimiento-flecha { transform: translateX(5px); }

/* ---------- GALERÍA ---------- */
.procedimientos-galeria {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 800px;
    overflow: hidden;
}

.procedimiento-imagen {
    position: relative;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.procedimiento-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.procedimiento-imagen:hover img { transform: scale(1.04); }

.imagen-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.9));
    pointer-events: none;
}

.procedimiento-imagen > span {
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 100%;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: 3px;
    text-align: center;
    color: #fff;
}

/* =====================================================
   TABLET  (≤ 1100px)
===================================================== */
@media (max-width: 1100px) {
    .procedimientos-container {
        grid-template-columns: 38% 62%;
        min-height: 520px;
    }

    .procedimientos-info { padding-right: 32px; }
    .procedimientos-info h2 { font-size: 40px; }
    .procedimientos-info > p { font-size: 13px; margin: 18px 0 32px; }

    .procedimiento-item { min-height: 66px; }
    .procedimiento-texto strong { font-size: 14px; }
    .procedimiento-texto p { font-size: 11px; }

    .procedimientos-galeria { height: 520px; }
    .procedimiento-imagen > span { bottom: 22px; font-size: 10px; letter-spacing: 2px; }
}

/* =====================================================
   CELULAR  (≤ 800px)
===================================================== */
@media (max-width: 800px) {
    .procedimientos-section { padding: 32px 0 38px; }

    .procedimientos-container {
        grid-template-columns: 1fr;
        width: 92%;
        min-height: 0;
        gap: 32px;
    }

    .procedimientos-info { padding-right: 0; }

    .procedimientos-linea { margin: 16px 0 28px; }
    .procedimientos-info h2 { font-size: 34px; }
    .procedimientos-info > p { font-size: 12.5px; line-height: 1.75; margin: 16px 0 26px; }

    .procedimiento-item { min-height: 60px; gap: 12px; }
    .procedimiento-texto strong { font-size: 13px; }
    .procedimiento-texto p { font-size: 10.5px; margin-top: 4px; }
    .procedimiento-flecha { font-size: 22px; }

    .procedimientos-galeria { height: 300px; }
    .procedimiento-imagen > span {
        bottom: 14px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }
}

/* =====================================================
   CELULAR PEQUEÑO  (≤ 600px)
===================================================== */
@media (max-width: 600px) {
    .procedimientos-section { padding: 28px 0 34px; }

    .procedimientos-kicker { font-size: 9px; letter-spacing: 3px; }
    .procedimientos-linea { width: 60px; height: 1.5px; margin: 13px 0 22px; }
    .procedimientos-info h2 { font-size: 28px; }
    .procedimientos-info > p { font-size: 11.5px; line-height: 1.7; margin: 14px 0 22px; }

    .procedimiento-item {
        grid-template-columns: 32px 1fr 14px;
        gap: 10px;
        min-height: 54px;
    }

    .procedimiento-icono { width: 26px; height: 26px; }
    .procedimiento-icono svg { width: 22px; height: 22px; stroke-width: 1.3; }

    .procedimiento-texto strong { font-size: 12px; }
    .procedimiento-texto p { font-size: 9.5px; line-height: 1.4; margin-top: 3px; }
    .procedimiento-flecha { font-size: 18px; }

    .procedimientos-galeria { height: 260px; }
    .procedimiento-imagen > span {
        bottom: 10px;
        padding: 0 3px;
        font-size: 7px;
        letter-spacing: .8px;
        line-height: 1.2;
    }
}

/* =====================================================
   CELULAR MUY PEQUEÑO  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .procedimientos-info h2 { font-size: 24px; }
    .procedimientos-info > p { font-size: 11px; }

    .procedimiento-texto strong { font-size: 11px; }
    .procedimiento-texto p { font-size: 8.8px; }

    .procedimientos-galeria { height: 220px; }
    .procedimiento-imagen > span { font-size: 6.3px; letter-spacing: .5px; }
}

/* =====================================================
   ANTES & DESPUÉS
===================================================== */

.antes-despues-section {
    padding: 35px 0 75px;
    background: #050505;
    color: #fff;
}

.antes-despues-container {
    width: 88%;
    max-width: 1400px;
    margin: auto;
}

/* ---------- ENCABEZADO ---------- */
.antes-despues-header {
    margin-bottom: 22px;
    text-align: center;
}

.antes-kicker {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 5px;
}

.antes-despues-header h2 {
    margin: 14px 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 400;
    line-height: 1.1;
}

.antes-linea {
    display: block;
    width: 90px;
    height: 1px;
    margin: auto;
    background: #fff;
}

/* ---------- GRID ---------- */
.antes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

/* ---------- TARJETA ---------- */
.antes-card {
    padding: 17px 20px 24px;
    background: #070707;
    border: 1px solid #292929;
    border-radius: 13px;
    text-align: center;
    transition: transform .3s ease, border-color .3s ease;
}

.antes-card:hover {
    transform: translateY(-3px);
    border-color: #666;
}

/* ---------- IMAGEN ---------- */
.antes-imagen {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 9px;
}

.antes-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.antes-card:hover .antes-imagen img { transform: scale(1.03); }

/* ---------- ICONO ---------- */
.antes-icono {
    display: grid;
    place-items: center;
    height: 58px;
    margin-top: 10px;
}

.antes-icono svg {
    width: 55px;
    height: 55px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- NOMBRE ---------- */
.antes-card h3 {
    margin: 5px 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: 1px;
}

/* ---------- BOTÓN ---------- */
.antes-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85%;
    height: 48px;
    margin: auto;
    border: 1px solid #777;
    border-radius: 30px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 3px;
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease;
}

.antes-btn:hover {
    background: #151515;
    border-color: #fff;
}

/* =====================================================
   TABLET  (≤ 900px)
   → 2 tarjetas arriba + 1 abajo (centrada)
===================================================== */
@media (max-width: 900px) {
    .antes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    /* La tercera tarjeta ocupa ambas columnas y se centra */
    .antes-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: calc(50% - 9px);
        margin: 0 auto;
    }

    .antes-imagen { height: 260px; }
    .antes-card h3 { font-size: 20px; }

    .antes-icono { height: 48px; }
    .antes-icono svg { width: 46px; height: 46px; }

    .antes-btn { height: 44px; font-size: 10px; letter-spacing: 2.5px; }
}

/* =====================================================
   CELULAR  (≤ 600px)
   → 2 arriba + 1 abajo (mismo patrón, más compacto)
===================================================== */
@media (max-width: 600px) {
    .antes-despues-section { padding: 40px 0 55px; }
    .antes-despues-container { width: 92%; }

    .antes-kicker { font-size: 9px; letter-spacing: 3.5px; }
    .antes-despues-header h2 { font-size: 26px; margin: 12px 0; }
    .antes-linea { width: 60px; }
    .antes-despues-header { margin-bottom: 18px; }

    .antes-grid { gap: 12px; }

    .antes-card {
        padding: 10px 10px 16px;
        border-radius: 11px;
    }

    .antes-imagen { height: 140px; border-radius: 7px; }

    .antes-icono { height: 34px; margin-top: 6px; }
    .antes-icono svg { width: 32px; height: 32px; }

    .antes-card h3 {
        margin: 4px 0 12px;
        font-size: 14px;
        letter-spacing: .5px;
    }

    .antes-btn {
        width: 100%;
        height: 34px;
        font-size: 8.5px;
        letter-spacing: 1.8px;
    }
}

/* =====================================================
   CELULARES PEQUEÑOS  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .antes-despues-section { padding: 34px 0 48px; }
    .antes-despues-container { width: 94%; }

    .antes-despues-header h2 { font-size: 22px; }

    .antes-grid { gap: 10px; }

    .antes-imagen { height: 120px; }

    .antes-icono svg { width: 28px; height: 28px; }
    .antes-card h3 { font-size: 13px; }

    .antes-btn {
        height: 30px;
        font-size: 7.5px;
        letter-spacing: 1.5px;
    }
}

/* =====================================================
   AGENDA TU CONSULTA
===================================================== */

.agenda-consulta {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 620px;
    overflow: hidden;
    background: #050505;
}

.agenda-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.agenda-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.96) 22%,
        rgba(0,0,0,.88) 40%,
        rgba(0,0,0,.45) 58%,
        rgba(0,0,0,.08) 78%,
        rgba(0,0,0,.02) 100%);
}

.agenda-contenido {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 5%;
}

.agenda-etiqueta {
    display: block;
    margin-bottom: 20px;
    font-size: 12px;
    letter-spacing: 5px;
    color: #fff;
}

.agenda-linea {
    width: 85px;
    height: 2px;
    margin-bottom: 35px;
    background: #fff;
}

.agenda-contenido h2 {
    margin: 0 0 24px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 4.5vw, 67px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -1px;
    color: #fff;
}

.agenda-contenido h2 span { display: block; }

.agenda-contenido p {
    max-width: 560px;
    margin: 0 0 28px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: #ddd;
}

/* ---------- BOTONES ---------- */
.agenda-botones {
    display: flex;
    align-items: center;
    gap: 18px;
}

.agenda-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 350px;
    height: 68px;
    padding: 0 22px;
    border-radius: 15px;
    font-size: 14px;
    text-decoration: none;
    transition: .3s ease;
}

.agenda-btn strong {
    margin-left: auto;
    font-size: 25px;
    font-weight: 300;
}

.agenda-btn svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    flex-shrink: 0;
}

.agenda-doctoralia { color: #fff; border: 1px solid #fff; background: transparent; }
.agenda-doctoralia:hover { background: #fff; color: #000; }

.agenda-whatsapp { color: #000; background: #fff; border: 1px solid #fff; }
.agenda-whatsapp:hover { background: #e7e7e7; }

/* =====================================================
   TABLET (≤ 1000px)
===================================================== */
@media (max-width: 1000px) {
    .agenda-consulta { height: 580px; }
    .agenda-contenido { padding: 0 6%; }
    .agenda-contenido h2 { font-size: 50px; }
    .agenda-btn { width: 300px; height: 62px; }
}

/* =====================================================
   CELULAR (≤ 700px) — layout horizontal conservado
===================================================== */
@media (max-width: 700px) {
    .agenda-consulta {
        height: auto;
        min-height: 540px;
        align-items: center;
    }

    /* Doctor visible en el lado derecho */
    .agenda-fondo { object-position: 72% center; }

    /* Degradado horizontal más agresivo para que el texto se lea sobre el lado izquierdo */
    .agenda-overlay {
        background: linear-gradient(90deg,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.95) 45%,
            rgba(0,0,0,.55) 68%,
            rgba(0,0,0,.12) 88%,
            rgba(0,0,0,0) 100%);
    }

    .agenda-contenido { padding: 0 24px; }

    .agenda-etiqueta {
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .agenda-linea {
        width: 55px;
        height: 1px;
        margin-bottom: 22px;
    }

    .agenda-contenido h2 {
        max-width: 70%;
        margin-bottom: 16px;
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.05;
    }

    .agenda-contenido p {
        max-width: 62%;
        margin-bottom: 22px;
        font-size: 12px;
        line-height: 1.55;
    }

    /* Botones apilados, compactos */
    .agenda-botones {
        flex-direction: column;
        align-items: stretch;
        width: 62%;
        max-width: 320px;
        gap: 10px;
    }

    .agenda-btn {
        width: 100%;
        height: 48px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 11px;
    }

    .agenda-btn strong { font-size: 18px; }
    .agenda-btn svg { width: 22px; height: 22px; }
}

/* =====================================================
   CELULAR PEQUEÑO (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .agenda-consulta { min-height: 500px; }

    .agenda-contenido { padding: 0 18px; }

    .agenda-contenido h2 {
        max-width: 72%;
        font-size: 26px;
    }

    .agenda-contenido p {
        max-width: 65%;
        font-size: 11px;
        line-height: 1.5;
    }

    .agenda-botones { width: 68%; gap: 8px; }
    .agenda-btn { height: 42px; font-size: 10px; }
    .agenda-btn strong { font-size: 16px; }
}

/* =====================================================
   AGENDA TU CONSULTA
===================================================== */

.agenda-consulta {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 620px;
    overflow: hidden;
    background: #050505;
}

/* ---------- IMAGEN ---------- */
.agenda-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ---------- DEGRADADO ---------- */
.agenda-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .98) 0%,
        rgba(0, 0, 0, .96) 22%,
        rgba(0, 0, 0, .88) 40%,
        rgba(0, 0, 0, .45) 58%,
        rgba(0, 0, 0, .08) 78%,
        rgba(0, 0, 0, .02) 100%);
}

/* ---------- CONTENIDO ---------- */
.agenda-contenido {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 5%;
}

.agenda-etiqueta {
    display: block;
    margin-bottom: 20px;
    font-size: 12px;
    letter-spacing: 5px;
    color: #fff;
}

.agenda-linea {
    width: 85px;
    height: 2px;
    margin-bottom: 35px;
    background: #fff;
}

.agenda-contenido h2 {
    margin: 0 0 24px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 4.5vw, 67px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -1px;
    color: #fff;
}

.agenda-contenido h2 span { display: block; }

.agenda-contenido p {
    max-width: 560px;
    margin: 0 0 28px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: #ddd;
}

/* ---------- BOTONES ---------- */
.agenda-botones {
    display: flex;
    align-items: center;
    gap: 18px;
}

.agenda-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 350px;
    height: 68px;
    padding: 0 22px;
    border-radius: 15px;
    font-size: 14px;
    text-decoration: none;
    transition: .3s ease;
}

.agenda-btn strong {
    margin-left: auto;
    font-size: 25px;
    font-weight: 300;
}

.agenda-btn svg {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.agenda-doctoralia {
    color: #fff;
    background: transparent;
    border: 1px solid #fff;
}

.agenda-doctoralia:hover { background: #fff; color: #000; }

.agenda-whatsapp {
    color: #000;
    background: #fff;
    border: 1px solid #fff;
}

.agenda-whatsapp:hover { background: #e7e7e7; }

/* =====================================================
   TABLET  (≤ 1000px)
===================================================== */
@media (max-width: 1000px) {
    .agenda-consulta { height: 580px; }
    .agenda-contenido { padding: 0 6%; }
    .agenda-contenido h2 { font-size: 50px; }
    .agenda-btn { width: 300px; height: 62px; }
}

/* =====================================================
   CELULAR  (≤ 700px)
   → se conserva el layout horizontal: texto a la izquierda,
     doctor visible a la derecha con degradado lateral.
===================================================== */
@media (max-width: 700px) {
    .agenda-consulta {
        height: auto;
        min-height: 540px;
        align-items: center;
    }

    /* Doctor visible a la derecha */
    .agenda-fondo { object-position: 72% center; }

    /* Degradado horizontal más agresivo para asegurar legibilidad */
    .agenda-overlay {
        background: linear-gradient(90deg,
            rgba(0, 0, 0, .98) 0%,
            rgba(0, 0, 0, .95) 45%,
            rgba(0, 0, 0, .55) 68%,
            rgba(0, 0, 0, .12) 88%,
            rgba(0, 0, 0, 0) 100%);
    }

    .agenda-contenido { padding: 0 24px; }

    .agenda-etiqueta {
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .agenda-linea {
        width: 55px;
        height: 1px;
        margin-bottom: 22px;
    }

    .agenda-contenido h2 {
        max-width: 70%;
        margin-bottom: 16px;
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.05;
        letter-spacing: -.5px;
    }

    .agenda-contenido p {
        max-width: 62%;
        margin-bottom: 22px;
        font-size: 12px;
        line-height: 1.55;
    }

    /* Botones apilados y compactos, sobre el lado izquierdo */
    .agenda-botones {
        flex-direction: column;
        align-items: stretch;
        width: 62%;
        max-width: 320px;
        gap: 10px;
    }

    .agenda-btn {
        width: 100%;
        height: 48px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 11px;
    }

    .agenda-btn strong { font-size: 18px; }
    .agenda-btn svg { width: 22px; height: 22px; }
}

/* =====================================================
   CELULAR PEQUEÑO  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .agenda-consulta { min-height: 500px; }
    .agenda-contenido { padding: 0 18px; }

    .agenda-contenido h2 {
        max-width: 72%;
        font-size: 26px;
    }

    .agenda-contenido p {
        max-width: 65%;
        font-size: 11px;
        line-height: 1.5;
    }

    .agenda-botones {
        width: 68%;
        gap: 8px;
    }

    .agenda-btn {
        height: 42px;
        font-size: 10px;
    }

    .agenda-btn strong { font-size: 16px; }
}

/* =====================================================
   PODCAST & PLÁTICAS
===================================================== */

.podcast-section {
    padding: 45px 2.5% 35px;
    background: #050505;
    color: #fff;
    overflow: hidden;
}

.podcast-contenedor {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------- PARTE SUPERIOR ---------- */
.podcast-superior {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 42px;
}

.podcast-titulos { margin-left: 2%; }

.podcast-etiqueta {
    display: block;
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: 4px;
    color: #fff;
}

.podcast-linea {
    width: 65px;
    height: 2px;
    margin-bottom: 25px;
    background: #fff;
}

.podcast-titulos h2 {
    margin: 0 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5.2vw, 80px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -1px;
}

.podcast-titulos h2 span { display: block; }

.podcast-titulos p {
    margin: 0;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    color: #ddd;
}

/* ---------- BOTÓN YOUTUBE ---------- */
.youtube-canal {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 335px;
    height: 58px;
    margin-top: 105px;
    margin-right: 2%;
    padding: 0 20px;
    border: 1px solid #555;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: .3s ease;
}

.youtube-canal:hover { border-color: #fff; background: #111; }

.youtube-canal svg {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
}

.youtube-canal svg polygon { fill: #fff; stroke: none; }

.youtube-flecha {
    margin-left: auto;
    font-size: 26px;
    font-weight: 300;
}

/* ---------- SLIDER CON BARRA DE DESLIZAMIENTO ---------- */
.podcast-slider {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Espacio para que la barra respire */
    padding-bottom: 18px;
}

/* Barra de deslizamiento visible (Firefox) */
.podcast-slider {
    scrollbar-width: thin;
    scrollbar-color: #fff #1a1a1a;
}

/* Barra de deslizamiento visible (Chrome, Safari, Edge) */
.podcast-slider::-webkit-scrollbar {
    height: 6px;
}

.podcast-slider::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

.podcast-slider::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    transition: background .3s ease;
}

.podcast-slider::-webkit-scrollbar-thumb:hover {
    background: #b9e2eb;
}

/* 4 tarjetas en una sola fila */
.podcast-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    scroll-snap-align: start;
}

/* ---------- TARJETA ---------- */
.podcast-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #080808;
    border: 1px solid #444;
    border-radius: 15px;
    color: #fff;
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease;
}

.podcast-card:hover {
    transform: translateY(-4px);
    border-color: #888;
}

/* ---------- IMAGEN ---------- */
.podcast-imagen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

.podcast-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.podcast-card:hover .podcast-imagen img { transform: scale(1.04); }

.podcast-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
}

/* ---------- EPISODIO ---------- */
.episodio {
    position: absolute;
    top: 17px;
    right: 15px;
    z-index: 2;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 2px 8px #000;
}

/* ---------- PLAY ---------- */
.play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    padding-left: 4px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    color: #fff;
    font-size: 20px;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}

.podcast-card:hover .play {
    background: rgba(255,255,255,.12);
    transform: translate(-50%, -50%) scale(1.08);
}

/* ---------- DURACIÓN ---------- */
.duracion {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 5px 8px;
    border: 1px solid #fff;
    border-radius: 6px;
    background: rgba(0,0,0,.7);
    font-size: 10px;
    letter-spacing: .5px;
    color: #fff;
}

/* ---------- INFO ---------- */
.podcast-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 154px;
    padding: 18px 20px;
}

.podcast-info h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
}

.mini-linea {
    width: 50px;
    height: 2px;
    margin: 25px 0 13px;
    background: #fff;
}

.ver-video {
    font-size: 10px;
    letter-spacing: 3px;
    color: #fff;
}

.podcast-vacio { visibility: hidden; }

/* =====================================================
   TABLET  (≤ 1100px)
===================================================== */
@media (max-width: 1100px) {
    .podcast-section { padding: 40px 3% 30px; }
    .podcast-superior { margin-bottom: 35px; }

    .podcast-titulos h2 { font-size: 52px; }
    .podcast-titulos p  { font-size: 15px; }

    .youtube-canal { width: 280px; height: 54px; margin-top: 80px; }

    .podcast-slide { gap: 12px; }

    .podcast-info { min-height: 130px; padding: 14px; }
    .podcast-info h3 { font-size: 17px; }
    .mini-linea { margin: 18px 0 10px; }

    .play { width: 54px; height: 54px; font-size: 17px; }
    .episodio { top: 12px; right: 12px; font-size: 11px; }
    .duracion { right: 10px; bottom: 10px; font-size: 9px; }
}

/* =====================================================
   CELULAR  (≤ 700px) — 4 tarjetas en una sola fila
===================================================== */
@media (max-width: 700px) {
    .podcast-section { padding: 35px 4% 30px; }

    .podcast-superior {
        flex-direction: column;
        margin-bottom: 28px;
    }

    .podcast-titulos { margin-left: 0; }

    .podcast-etiqueta { font-size: 10px; letter-spacing: 3px; margin-bottom: 14px; }
    .podcast-linea { width: 50px; height: 1px; margin-bottom: 18px; }
    .podcast-titulos h2 { font-size: 38px; line-height: .98; }
    .podcast-titulos p  { font-size: 12.5px; margin-top: 14px; }

    .desktop { display: none; }

    .youtube-canal {
        width: 100%;
        max-width: 300px;
        height: 48px;
        margin-top: 20px;
        margin-right: 0;
        font-size: 11.5px;
    }

    .youtube-canal svg { width: 21px; height: 21px; }

    /* Barra un poco más gruesa para dedos */
    .podcast-slider { padding-bottom: 14px; }
    .podcast-slider::-webkit-scrollbar { height: 5px; }

    /* Grid: 4 tarjetas en una sola fila */
    .podcast-slide {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .podcast-card { border-radius: 10px; }

    .play {
        width: 32px;
        height: 32px;
        font-size: 11px;
        padding-left: 2px;
    }

    .episodio {
        top: 6px;
        right: 6px;
        font-size: 7.5px;
        letter-spacing: 1px;
    }

    .duracion {
        right: 5px;
        bottom: 5px;
        padding: 2px 4px;
        font-size: 6.5px;
        border-radius: 4px;
    }

    .podcast-info { min-height: 88px; padding: 8px 7px 10px; }
    .podcast-info h3 { font-size: 9px; line-height: 1.2; }
    .mini-linea { width: 22px; height: 1px; margin: 8px 0 6px; }
    .ver-video { font-size: 6.5px; letter-spacing: 1.5px; }
}

/* =====================================================
   CELULAR PEQUEÑO  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .podcast-section { padding: 30px 3.5% 26px; }

    .podcast-titulos h2 { font-size: 32px; }
    .podcast-titulos p  { font-size: 11.5px; }

    .podcast-slide { gap: 5px; }

    .play { width: 26px; height: 26px; font-size: 9px; }

    .episodio { font-size: 6.5px; top: 5px; right: 5px; }
    .duracion { font-size: 5.8px; padding: 2px 3px; right: 4px; bottom: 4px; }

    .podcast-info { min-height: 78px; padding: 6px 5px 8px; }
    .podcast-info h3 { font-size: 8px; }

    .mini-linea { width: 18px; margin: 6px 0 5px; }
    .ver-video  { font-size: 6px; letter-spacing: 1.2px; }
}

/* Ocultar los puntitos del podcast */
.podcast-dots {
    display: none !important;
}

/* =====================================================
   OPINIONES
===================================================== */

.opiniones-section {
    padding: 45px 2.5% 40px;
    background: #050505;
    color: #fff;
    overflow: hidden;
}

/* ---------- ENCABEZADO ---------- */
.opiniones-header {
    margin-bottom: 55px;
    text-align: center;
}

.opiniones-etiqueta {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 5px;
    color: #fff;
}

.opiniones-linea {
    width: 82px;
    height: 1px;
    margin: 0 auto 25px;
    background: #aaa;
}

.opiniones-header h2 {
    margin: 0 0 18px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 400;
    line-height: 1;
}

.opiniones-header > p {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: #aaa;
}

/* ---------- CALIFICACIÓN ---------- */
.calificacion {
    margin-top: 38px;
    text-align: center;
}

.numero-calificacion {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.numero-calificacion strong {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 400;
    color: #fff;
}

.numero-calificacion span {
    font-family: 'Playfair Display', serif;
    font-size: 27px;
    color: #aaa;
}

.estrellas {
    margin-top: 7px;
    font-size: 21px;
    letter-spacing: 7px;
    color: #d5a32a;
}

.opiniones-verificadas {
    margin-top: 13px;
    font-size: 10px;
    color: #888;
}

.opiniones-verificadas strong { color: #fff; }

/* ---------- GRID ---------- */
.opiniones-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* ---------- TARJETA ---------- */
.opinion-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 430px;
    padding: 22px 18px 19px;
    background: #111;
    border: 1px solid #333;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    transition: border-color .3s ease, transform .3s ease;
}

.opinion-card:hover {
    border-color: #777;
    transform: translateY(-3px);
}

.comilla {
    margin-bottom: 22px;
    font-family: Georgia, serif;
    font-size: 29px;
    font-weight: bold;
    line-height: .6;
    color: #fff;
}

.opinion-card h3 {
    margin: 0 0 10px;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.05;
    color: #fff;
}

.estrellas-card {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #d5a32a;
}

.datos-opinion {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 22px;
    padding-left: 12px;
    border-left: 1px solid #777;
}

.datos-opinion span {
    font-size: 9px;
    font-weight: 300;
    line-height: 1.35;
    color: #888;
}

.opinion-card > p {
    margin: 0;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.7;
    color: #ddd;
}

.ver-resena {
    margin-top: auto;
    padding-top: 22px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: #fff;
    white-space: nowrap;
    transition: letter-spacing .3s ease;
}

.opinion-card:hover .ver-resena { letter-spacing: 3px; }

/* ---------- BLOQUE FINAL ---------- */
.opinion-final {
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    min-height: 105px;
    margin-top: 20px;
    padding: 20px 28px;
    background: #111;
    border: 1px solid #333;
    border-radius: 16px;
}

.opinion-final-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    font-size: 25px;
    border: 1px solid #666;
    border-radius: 50%;
}

.opinion-final-text { flex: 1; min-width: 0; }

.opinion-final-text h3 {
    margin: 0 0 7px;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 400;
    color: #fff;
}

.opinion-final-text p {
    margin: 0;
    font-size: 9px;
    font-weight: 300;
    line-height: 1.5;
    color: #999;
}

.dejar-resena {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 230px;
    height: 58px;
    padding: 0 20px;
    border: 1px solid #777;
    color: #fff;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    transition: .3s ease;
}

.dejar-resena:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* =====================================================
   TABLET GRANDE  (≤ 1250px)
===================================================== */
@media (max-width: 1250px) {
    .opiniones-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================
   TABLET  (≤ 1000px)
===================================================== */
@media (max-width: 1000px) {
    .opiniones-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .opinion-card { min-height: 420px; }

    .opinion-final { flex-wrap: wrap; }
    .opinion-final-text { min-width: 260px; }
}

/* =====================================================
   CELULAR  (≤ 700px)
   → 3 tarjetas EN UNA SOLA FILA
===================================================== */
@media (max-width: 700px) {
    .opiniones-section { padding: 35px 4% 30px; }
    .opiniones-header { margin-bottom: 32px; }

    .opiniones-etiqueta { font-size: 9px; letter-spacing: 3px; margin-bottom: 12px; }
    .opiniones-linea { width: 55px; margin: 0 auto 18px; }
    .opiniones-header h2 { font-size: 30px; line-height: 1.05; }
    .opiniones-header > p { font-size: 11px; line-height: 1.6; }

    .calificacion { margin-top: 22px; }
    .numero-calificacion strong { font-size: 36px; }
    .numero-calificacion span { font-size: 20px; }
    .estrellas { font-size: 17px; letter-spacing: 5px; }
    .opiniones-verificadas { font-size: 9px; }

    /* 3 tarjetas en una fila */
    .opiniones-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* Tarjeta compacta */
    .opinion-card {
        min-height: 300px;
        padding: 12px 10px 14px;
        border-radius: 12px;
    }

    .comilla { font-size: 20px; margin-bottom: 12px; }

    .opinion-card h3 {
        margin-bottom: 6px;
        font-size: 12px;
        line-height: 1.15;
    }

    .estrellas-card {
        margin-bottom: 10px;
        font-size: 8.5px;
        letter-spacing: .5px;
    }

    .datos-opinion {
        margin-bottom: 12px;
        padding-left: 7px;
        gap: 3px;
    }

    .datos-opinion span { font-size: 7px; line-height: 1.3; }

    .opinion-card > p {
        font-size: 8px;
        line-height: 1.55;
    }

    .ver-resena {
        padding-top: 12px;
        font-size: 6.5px;
        letter-spacing: 1.5px;
    }

    /* Bloque final apilado pero ordenado */
    .opinion-final {
        margin-top: 14px;
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        border-radius: 12px;
    }

    .opinion-final-icon { width: 48px; height: 48px; font-size: 20px; }

    .opinion-final-text h3 { font-size: 18px; }
    .opinion-final-text p  { font-size: 9px; }

    .dejar-resena {
        width: 100%;
        height: 46px;
        font-size: 9px;
        letter-spacing: 2px;
    }
}

/* =====================================================
   CELULAR PEQUEÑO  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .opiniones-section { padding: 30px 3.5% 26px; }

    .opiniones-header h2 { font-size: 26px; }
    .opiniones-header > p { font-size: 10.5px; }

    .numero-calificacion strong { font-size: 32px; }
    .numero-calificacion span { font-size: 18px; }
    .estrellas { font-size: 15px; letter-spacing: 4px; }

    .opiniones-grid { gap: 6px; }

    .opinion-card {
        min-height: 280px;
        padding: 10px 8px 12px;
        border-radius: 10px;
    }

    .comilla { font-size: 17px; margin-bottom: 10px; }

    .opinion-card h3 { font-size: 11px; }
    .estrellas-card { font-size: 7.5px; }

    .datos-opinion { padding-left: 6px; margin-bottom: 10px; }
    .datos-opinion span { font-size: 6.5px; }

    .opinion-card > p { font-size: 7.5px; line-height: 1.5; }

    .ver-resena { font-size: 6px; letter-spacing: 1.2px; }
}


/* =====================================================
   CONTACTO
===================================================== */

.contacto-section {
    padding: 55px 4% 45px;
    background: #050505;
    color: #fff;
}

/* ---------- ENCABEZADO ---------- */
.contacto-header {
    max-width: 1400px;
    margin: 0 auto 70px;
    text-align: center;
}

.contacto-mini {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 6px;
}

.contacto-linea {
    width: 84px;
    height: 1px;
    margin: 14px auto 30px;
    background: #777;
}

.contacto-header h2 {
    margin: 0 0 25px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(38px, 5vw, 70px);
    font-weight: 400;
    line-height: 1.05;
}

.contacto-header p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #aaa;
}

/* ---------- INFO (3 columnas) ---------- */
.contacto-info {
    max-width: 1450px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.75fr 1.25fr 1fr;
}

.contacto-item {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 115px;
    padding: 10px 45px;
}

.contacto-item + .contacto-item { border-left: 1px solid #333; }

.contacto-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border: 1px solid #777;
    border-radius: 50%;
}

.contacto-icono svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacto-texto { min-width: 0; }

.contacto-label {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 5px;
    color: #fff;
}

.contacto-texto a {
    font-size: 18px;
    color: #ddd;
    text-decoration: none;
    transition: color .3s;
}

.contacto-texto a:hover { color: #fff; }

.contacto-texto h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 400;
}

.contacto-texto p {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: #888;
}



/* ---------- REDES SOCIALES ---------- */
.contacto-redes {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    box-sizing: border-box;
    gap: 45px;
    margin: 45px auto 0;
    padding: 0;

    text-align: center;
}

.contacto-redes > span {
    display: block;
    flex: 0 0 auto;
    width: 105px;

    font-size: 11px;
    letter-spacing: 5px;
    line-height: 1.5;
    text-align: center;
}

.redes-lista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 0 0 auto;
}

.red-social {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: transform .3s ease;
}

.red-social:hover {
    transform: translateY(-4px);
}

.red-social img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* ---------- CELULAR ---------- */
@media (max-width: 600px) {
    .contacto-redes {
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
    }

    .contacto-redes > span {
        width: auto;
        font-size: 9px;
        letter-spacing: 3px;
    }

    .redes-lista {
        gap: 12px;
    }

    .red-social,
    .red-social img {
        width: 44px;
        height: 44px;
    }
}



/* ---------- MAPA ---------- */
.contacto-mapa {
    width: 100%;
    height: 430px;
    margin: 0;
    padding: 0;
    line-height: 0;
    background: #000;
}

.contacto-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =====================================================
   TABLET  (≤ 1100px)
===================================================== */
@media (max-width: 1100px) {
    .contacto-item { padding: 10px 25px; gap: 18px; }

    .contacto-icono { width: 65px; height: 65px; }
    .contacto-icono svg { width: 25px; height: 25px; }
}

/* =====================================================
   TABLET PEQUEÑA  (≤ 850px)
   → 3 columnas siguen en fila pero más compactas
===================================================== */
@media (max-width: 850px) {
    .contacto-section { padding: 45px 5% 40px; }
    .contacto-header { margin-bottom: 45px; }
    .contacto-header h2 { font-size: 42px; }

    .contacto-info {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contacto-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 14px;
        min-height: 0;
    }

    .contacto-item + .contacto-item { border-left: 1px solid #333; }

    .contacto-redes {
        gap: 24px;
        margin-top: 35px;
    }

    .contacto-redes > span { font-size: 10px; letter-spacing: 4px; }
}

/* =====================================================
   CELULAR  (≤ 600px)
   → 3 columnas siguen en fila, todo compacto
===================================================== */
@media (max-width: 600px) {
    .contacto-section { padding: 38px 4% 34px; }
    .contacto-header { margin-bottom: 34px; }

    .contacto-mini { font-size: 9px; letter-spacing: 4px; }
    .contacto-linea { width: 55px; margin: 10px auto 20px; }
    .contacto-header h2 { font-size: 28px; margin-bottom: 16px; }
    .contacto-header p  { font-size: 12px; line-height: 1.65; }

    .contacto-info { gap: 0; }

    .contacto-item {
        padding: 14px 8px;
        gap: 10px;
    }

    .contacto-icono { width: 44px; height: 44px; }
    .contacto-icono svg { width: 18px; height: 18px; stroke-width: 1.5; }

    .contacto-label {
        margin-bottom: 6px;
        font-size: 7.5px;
        letter-spacing: 2px;
    }

    .contacto-texto a { font-size: 10px; }

    .contacto-texto h3 {
        margin-bottom: 5px;
        font-size: 10px;
        line-height: 1.25;
    }

    .contacto-texto p { font-size: 8px; line-height: 1.45; }

    /* Redes más compactas */
    .contacto-redes {
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
    }

    .contacto-redes > span { font-size: 9px; letter-spacing: 3px; }

    .redes-lista { gap: 12px; }
    .red-social,
    .red-social img { width: 30px; height: 44px; }

    /* Mapa */
    .contacto-mapa { height: 320px; }
}

/* =====================================================
   CELULAR PEQUEÑO  (≤ 380px)
===================================================== */
@media (max-width: 380px) {
    .contacto-section { padding: 32px 3.5% 28px; }

    .contacto-header h2 { font-size: 24px; }
    .contacto-header p  { font-size: 11px; }

    .contacto-item { padding: 12px 6px; gap: 8px; }

    .contacto-icono { width: 38px; height: 38px; }
    .contacto-icono svg { width: 16px; height: 16px; }

    .contacto-label { font-size: 6.8px; letter-spacing: 1.6px; }
    .contacto-texto a { font-size: 9px; }
    .contacto-texto h3 { font-size: 9px; }
    .contacto-texto p  { font-size: 7.2px; }

    .red-social,
    .red-social img { width: 38px; height: 38px; }

    .contacto-mapa { height: 280px; }
}

/* =========================================
   SINERGIA INTERNACIONAL
========================================= */

.sinergia-section {
    width: 100%;
    padding: 55px 6%;
    background: #000;
    color: #fff;
}

.sinergia-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================
   TÍTULO
========================================= */

.sinergia-title {
    text-align: center;
    margin-bottom: 35px;
}

.sinergia-title h2 {
    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 3px;

    color: #fff;
}

.sinergia-title span {
    display: block;

    width: 45px;
    height: 1px;

    margin: 15px auto 0;

    background: #fff;
    opacity: .7;
}


/* =========================================
   TARJETAS
========================================= */

.sinergia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.sinergia-item {
    padding: 27px 30px;

    background: #111;

    border: 1px solid rgba(255,255,255,.13);

    transition: border-color .3s ease,
                transform .3s ease;
}

.sinergia-item:hover {
    border-color: rgba(255,255,255,.30);
    transform: translateY(-2px);
}


/* =========================================
   PAÍS / ALCANCE
========================================= */

.sinergia-pais {
    display: block;

    margin-bottom: 9px;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #999;
}


/* =========================================
   NOMBRE DE ORGANIZACIÓN
========================================= */

.sinergia-info h3,
.sinergia-item h3 {
    margin: 0 0 12px;

    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 400;

    line-height: 1.3;

    color: #fff;
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.sinergia-item p {
    margin: 0 0 18px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;

    line-height: 1.6;

    color: #aaa;
}


/* =========================================
   DATO INFERIOR
========================================= */

.sinergia-dato {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,.12);
}

.sinergia-dato span {
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;

    letter-spacing: 2px;

    color: #777;
}

.sinergia-dato strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;

    color: #fff;
}


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

@media (max-width: 800px) {

    .sinergia-section {
        padding: 50px 5%;
    }

    .sinergia-grid {
        gap: 18px;
    }

    .sinergia-item {
        padding: 25px;
    }
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .sinergia-section {
        padding: 45px 20px;
    }

    .sinergia-title {
        margin-bottom: 28px;
    }

    .sinergia-title h2 {
        font-size: 23px;
        letter-spacing: 2px;
        line-height: 1.3;
    }

    .sinergia-title span {
        margin-top: 12px;
    }

    .sinergia-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sinergia-item {
        padding: 22px 20px;
    }

    .sinergia-pais {
        font-size: 8px;
    }

    .sinergia-item h3 {
        font-size: 18px;
        line-height: 1.3;
    }

    .sinergia-item p {
        font-size: 10px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .sinergia-dato {
        padding-top: 12px;
    }
}

/* =========================
   DOS UBICACIONES
========================= */

.ubicacion-item {
    margin-bottom: 14px;
}

.ubicacion-item:last-child {
    margin-bottom: 0;
}

.ubicacion-item h3 {
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 5px;
    color: #fff;
}

.ubicacion-item p {
    color: #888;
    font-size: 9.5px;
    line-height: 1.45;
    margin: 0;
}


/* FOOTER / DERECHOS DE AUTOR */
.footer-derechos {
    width: 100%;
    background: #000;
    border-top: 1px solid #292929;
    padding: 12px 15px;
    text-align: center;
    box-sizing: border-box;
}

.footer-derechos p {
    margin: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* Adaptación para celulares */
@media (max-width: 600px) {
    .footer-derechos {
        padding: 10px;
    }

    .footer-derechos p {
        font-size: 9px;
    }
}