:root{--navy:#07596c;--teal:#00899e;--aqua:#20afc0;--pale:#dff3f6;--ink:#244650}html{scroll-behavior:smooth}body{color:var(--ink);background:#fff}h1,h2,h3,h4,strong{color:var(--navy)}a{color:var(--teal)}a:hover{color:#046078!important}#wrapper{overflow:hidden}.brand-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:2rem 0}.brand-header img{width:235px;max-width:48vw;height:auto}.brand-header nav{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.brand-header nav a{border:0}.hero{position:relative;padding:5.2rem 4rem;min-height:365px;display:flex;align-items:center;overflow:hidden;border-radius:18px;background:linear-gradient(110deg,#dff3f6 0%,#b4dce5 100%)}.hero:after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;right:-190px;top:-220px;border:85px solid rgba(255,255,255,.43)}.hero>div{position:relative;z-index:1;max-width:760px}.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:.75rem;font-weight:800;color:#028aa1}.hero h1{font-size:clamp(2rem,4.1vw,3.4rem);line-height:1.13;margin:.7rem 0 1rem}.hero p{font-size:1.08rem;max-width:670px}.actions .primary,.button.primary,.cta{background:var(--teal)!important;box-shadow:none!important;color:white!important;border-radius:6px!important}.cta{display:inline-block;padding:.75rem 1.35rem;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;border:0;text-decoration:none}.section-head{display:flex;align-items:end;justify-content:space-between;margin:4.7rem 0 1.6rem}.section-head h2{margin:0}.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}.course-card{border-radius:12px;overflow:hidden;box-shadow:0 12px 35px rgba(12,68,78,.1);border:1px solid #d7ebee;background:#fff;display:flex;flex-direction:column}.course-cover{height:245px;background:linear-gradient(130deg,#afd8e1,#e9f8fa);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.course-cover img{width:100%;height:100%;object-fit:cover;object-position:center 22%}.course-cover.endosound img{width:58%;height:78%;object-fit:contain}.course-copy{padding:1.65rem;flex:1;display:flex;flex-direction:column}.course-copy h3{font-size:1.3rem;margin:.7rem 0}.course-copy p{margin:0 0 1.2rem}.course-copy .cta{margin-top:auto;align-self:flex-start}.badge{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--teal)}.course-detail-hero{display:grid;grid-template-columns:1.3fr .75fr;align-items:center;gap:2rem;padding:3.5rem;border-radius:17px;background:var(--pale)}.course-detail-hero h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.15}.course-detail-hero img{width:100%;max-width:300px;max-height:410px;object-fit:contain;justify-self:center;box-shadow:0 10px 28px rgba(3,82,93,.13)}.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.5rem 0}.fact{background:#f1fafb;padding:1.25rem;border-left:4px solid var(--aqua);border-radius:4px}.fact small{display:block;color:#597d85;text-transform:uppercase;font-size:.7rem;letter-spacing:.07em}.fact strong{display:block;font-size:.96rem;margin-top:.4rem}.content-section{padding:2.8rem 0;border-bottom:1px solid #dfebed}.content-section h2{margin-bottom:1.4rem}.day{margin:2rem 0 3rem}.day h3{background:var(--navy);color:white;padding:1rem 1.2rem;border-radius:7px}.agenda{margin:0;list-style:none;padding:0}.agenda li{display:grid;grid-template-columns:75px 1fr;gap:1rem;padding:1rem .2rem;border-bottom:1px solid #dbe9ec}.agenda time{font-weight:800;color:var(--teal)}.agenda b{color:var(--navy)}.agenda small{display:block;color:#577780;margin-top:.15rem}.faculty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.speaker{text-align:center;padding:1rem;background:#f2fafb;border-radius:10px}.speaker img{width:125px;height:125px;object-fit:cover;object-position:top;border-radius:50%;margin:0 auto 1rem;background:#e1edf0}.speaker h3{font-size:.96rem;line-height:1.4;margin:0}.speaker p{font-size:.78rem;margin:.4rem 0}.muted{color:#637d85}.back-link{display:inline-block;margin-bottom:2rem}#footer{margin-top:4rem;padding:2.5rem 0;background:#e9f6f8}#footer .inner{padding:0}#footer p{margin:.5rem 0;font-size:.87rem}#footer a{border:0}.contact-block{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}.legal{font-size:.78rem;color:#5b7780}.course-detail-hero .actions{margin-top:1.5rem}.notice{font-size:.85rem;color:#52717a}.section-intro{max-width:800px}.pdf-button{border:2px solid #137e8f!important;color:#137e8f!important;border-radius:5px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:850px){.facts{grid-template-columns:repeat(2,1fr)}.faculty{grid-template-columns:repeat(3,1fr)}.course-detail-hero{grid-template-columns:1fr}.course-detail-hero img{max-width:230px}.hero{padding:3rem 2rem}}@media(max-width:600px){.brand-header{align-items:flex-start;flex-direction:column}.brand-header nav{font-size:.72rem}.hero{padding:2.6rem 1.5rem;min-height:300px}.course-grid{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.faculty{grid-template-columns:repeat(2,1fr)}.course-detail-hero{padding:2rem 1.25rem}.agenda li{grid-template-columns:55px 1fr}.course-cover{height:215px}.section-head{margin-top:3rem}}


/* ==========================================
   CURSOS EII LA PAZ
   REVISIÓN VISUAL NOVIEMBRE 2026
   ========================================== */

/* Tipografía y estructura */

body {
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3 {
    letter-spacing: normal;
}

#main > .inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

main {
    min-width: 0;
}

.content-section {
    padding: 3.5rem 0;
}

.content-section h2 {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    line-height: 1.25;
    letter-spacing: .025em;
    margin: .45rem 0 1.5rem;
}

.eyebrow {
    letter-spacing: .12em;
    line-height: 1.5;
}

/* Cabecera */

.brand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
}

.brand-header > a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-header img {
    width: 210px;
    height: auto;
}

.brand-header nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.4rem;
}

.brand-header nav a {
    white-space: nowrap;
    text-decoration: none;
}

/* Enlace de regreso */

.back-link {
    display: inline-flex;
    align-items: center;
    margin: 1rem 0 1.5rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

/* Portada del curso */

.course-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .65fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 4vw, 4rem);
    background: #dff3f6;
    border-radius: 14px;
}

.course-detail-hero > div {
    min-width: 0;
}

.course-detail-hero h1 {
    font-size: clamp(2rem, 3.4vw, 3.3rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 1rem 0 1.5rem;
}

.course-detail-hero p {
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.7;
}

.course-detail-hero > img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    justify-self: center;
    margin: 0;
}

.course-detail-hero .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-top: 2rem;
}

.course-detail-hero .actions a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 46px;
    margin: 0;
    white-space: normal;
}

/* Botones */

.cta,
.pdf-button {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .065em;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}

.pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.35rem;
    min-height: 46px;
    height: auto;
    white-space: normal;
}

/* Información práctica */

.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.fact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 125px;
    padding: 1.4rem;
    border-left: 4px solid #20afc0;
    border-radius: 6px;
    background: #f1fafb;
}

.fact small {
    display: block;
    margin-bottom: .75rem;
    font-size: .72rem;
    line-height: 1.4;
    letter-spacing: .07em;
}

.fact strong {
    display: block;
    margin: 0;
    font-size: .96rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}

/* Presentación */

.section-intro {
    max-width: 900px;
    font-size: 1.03rem;
    line-height: 1.8;
}

/* Programa */

.day {
    margin: 2.25rem 0 2.75rem;
}

.day h3 {
    padding: 1rem 1.5rem;
    margin: 0;
    background: #07596c;
    border-radius: 6px 6px 0 0;
    font-size: 1.05rem;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #fff;
}

.agenda {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e2eef0;
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.agenda li {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin: 0;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #e2eef0;
}

.agenda li:last-child {
    border-bottom: 0;
}

.agenda li:nth-child(even) {
    background: #f8fcfd;
}

.agenda time {
    display: block;
    padding-top: .1rem;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}

.agenda li > div {
    min-width: 0;
}

.agenda b {
    display: block;
    font-size: .98rem;
    line-height: 1.5;
    font-weight: 650;
}

.agenda small {
    display: block;
    margin-top: .3rem;
    font-size: .88rem;
    line-height: 1.55;
}

/* Equipo docente */

.faculty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.speaker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 235px;
    padding: 1.7rem 1.2rem;
    text-align: center;
    background: #f2fafb;
    border: 1px solid #e0edf0;
    border-radius: 10px;
}

.speaker img {
    display: block;
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    margin: 0 auto 1.25rem;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    background: #e1edf0;
}

.speaker h3 {
    display: block;
    width: 100%;
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    overflow-wrap: break-word;
}

.speaker-no-photo {
    justify-content: center;
}

.speaker-no-photo h3 {
    max-width: 220px;
}

/* Inscripción */

#inscripcion {
    max-width: 100%;
}

#inscripcion p {
    max-width: 900px;
    line-height: 1.75;
}

#inscripcion .cta {
    margin: .5rem 0;
}

/* Pie de página */

.contact-block {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.contact-block > div {
    min-width: 0;
}

.contact-block .legal {
    text-align: right;
    line-height: 1.8;
}

/* ==========================================
   TABLETS
   ========================================== */

@media (max-width: 950px) {

    .course-detail-hero {
        grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr);
        gap: 2rem;
        padding: 2.5rem;
    }

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

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

    .brand-header {
        flex-wrap: wrap;
    }

    .brand-header nav {
        gap: 1rem;
    }
}

/* ==========================================
   MÓVILES
   ========================================== */

@media (max-width: 650px) {

    .brand-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .brand-header img {
        width: 180px;
    }

    .brand-header nav {
        width: 100%;
        justify-content: flex-start;
        gap: .7rem 1rem;
        font-size: .72rem;
    }

    .course-detail-hero {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.4rem;
    }

    .course-detail-hero h1 {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
    }

    .course-detail-hero > img {
        max-width: 215px;
        max-height: 300px;
    }

    .course-detail-hero .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .course-detail-hero .actions a {
        width: 100%;
    }

    .facts {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .fact {
        min-height: 0;
        padding: 1.15rem;
    }

    .content-section {
        padding: 2.5rem 0;
    }

    .day h3 {
        font-size: .95rem;
        padding: .85rem 1rem;
    }

    .agenda li {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: .75rem;
        padding: 1rem .8rem;
    }

    .agenda time {
        font-size: .85rem;
    }

    .agenda b {
        font-size: .91rem;
    }

    .agenda small {
        font-size: .82rem;
    }

    .faculty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }

    .speaker {
        min-height: 205px;
        padding: 1.3rem .7rem;
    }

    .speaker img {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }

    .speaker h3 {
        font-size: .83rem;
        line-height: 1.4;
    }

    .contact-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-block .legal {
        text-align: left;
    }
}


/* ==========================================
   PLACEHOLDER CREATIVO - DRA. CLARA AMIAMA
   ========================================== */

.speaker-no-photo {
    justify-content: flex-start;
}

.speaker-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    margin: 0 auto 1.25rem;
    flex: 0 0 132px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #f7fcfd 0%, #e5f2f5 45%, #d4e9ee 100%);
    box-shadow:
        inset 0 0 0 8px rgba(255,255,255,.65),
        0 8px 18px rgba(7, 89, 108, .10);
    position: relative;
    overflow: hidden;
}

.speaker-placeholder::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(7, 89, 108, .08);
}

.speaker-placeholder-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        linear-gradient(145deg, #ffffff 0%, #edf7f9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 4px 10px rgba(7, 89, 108, .08);
    z-index: 1;
}

.speaker-placeholder-icon {
    display: inline-block;
    font-size: 3.15rem;
    line-height: 1;
    filter: saturate(0.95);
    transform: translateY(1px);
}

.speaker-no-photo h3 {
    margin-top: .2rem;
}

@media (max-width: 650px) {
    .speaker-placeholder {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
        margin-bottom: 1rem;
    }

    .speaker-placeholder-inner {
        width: 70px;
        height: 70px;
    }

    .speaker-placeholder-icon {
        font-size: 2.4rem;
    }
}


/* ==========================================
   ILUSTRACIÓN PREMIUM - DRA. CLARA AMIAMA
   ========================================== */

.speaker-no-photo {
    justify-content: flex-start;
}

.speaker-placeholder-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    margin: 0 auto 1.25rem;
    flex: 0 0 132px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #ffffff 0%, #eef7f8 42%, #dcecef 100%);
    box-shadow:
        inset 0 0 0 8px rgba(255,255,255,.72),
        0 10px 22px rgba(7, 89, 108, .10);
    overflow: hidden;
}

.speaker-premium-illustration {
    display: block;
    width: 118px;
    height: 118px;
}

.speaker-no-photo h3 {
    margin-top: .15rem;
}

@media (max-width: 650px) {
    .speaker-placeholder-premium {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
        margin-bottom: 1rem;
    }

    .speaker-premium-illustration {
        width: 86px;
        height: 86px;
    }
}


/* ==========================================
   EII LA PAZ - FOOTER RESPONSIVE V2
   ========================================== */

/* Tablets y móviles */

@media (max-width: 850px) {

    #footer {
        margin-top: 3rem;
        padding: 0 !important;
        background: #e9f6f8;
    }

    #footer > .inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 3.5rem 2rem !important;
        margin: 0 auto;
    }

    #footer .contact-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }

    #footer .contact-block > div {
        width: 100%;
        min-width: 0;
    }

    #footer strong {
        display: block;
        font-size: 1.2rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    #footer p {
        font-size: .95rem;
        line-height: 1.85;
        margin: 0 0 1.2rem;
        overflow-wrap: anywhere;
    }

    #footer .legal {
        width: 100%;
        font-size: .82rem;
        line-height: 1.9;
        text-align: left;
        color: #647f87;
    }

}

/* Móviles */

@media (max-width: 600px) {

    #footer {
        margin-top: 3.5rem;
    }

    #footer > .inner {
        padding:
            3.25rem
            max(1.5rem, env(safe-area-inset-right))
            3.5rem
            max(1.5rem, env(safe-area-inset-left))
            !important;
    }

    #footer .contact-block {
        gap: 2.25rem;
    }

    #footer strong {
        font-size: 1.15rem;
        margin-bottom: 1.1rem;
    }

    #footer p {
        font-size: .92rem;
        line-height: 1.85;
        margin-bottom: 1.25rem;
    }

    #footer a {
        overflow-wrap: anywhere;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    #footer .legal {
        border-top: 1px solid rgba(7,89,108,.13);
        padding-top: 1.75rem;
        font-size: .8rem;
        line-height: 1.9;
    }

}

/* Pantallas pequeñas */

@media (max-width: 380px) {

    #footer > .inner {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

}