.itl-extra{--navy:#06366b;--navy2:#082e59;--gold:#efbd36;--ink:#071d3d;--soft:#f4f7fb}
.itl-extra,.itl-extra *{box-sizing:border-box}html{scroll-behavior:smooth}
.itl-extra{font-family:Montserrat,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
.wrap{width:min(1420px,calc(100% - 72px));margin:auto}
.itl-extra .hero{position:relative;overflow:hidden;background:linear-gradient(90deg,#062f61 0%,#073a74 52%,#0b477e 100%);color:#fff}
.itl-extra .heroBg{position:absolute;inset:0;background:radial-gradient(circle at 72% 40%,#ffffff12,transparent 34%),linear-gradient(90deg,#001f49aa,transparent 70%)}
.itl-extra .heroGrid{position:relative;min-height:470px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center}
.heroText{padding:40px 0}
.itl-extra .eyebrow{color:var(--gold);font-size:20px;letter-spacing:.13em}
.hero h1{font-size:60px;line-height:1.02;margin:10px 0 2px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--gold)}
.itl-extra .hero h2{font-size:29px;margin:6px 0 18px;font-weight:600}
.itl-extra .line{height:3px;width:560px;max-width:100%;background:var(--gold);margin:15px 0}
.itl-extra .heroText>p{font-size:19px}
.itl-extra .heroText p i{display:inline-block;height:22px;width:1px;background:#fff;margin:0 20px;vertical-align:middle}
.itl-extra .btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#f1c84e,#e9b72d);color:#061a35;text-decoration:none;border:0;border-radius:12px;padding:17px 28px;font-weight:800;font-size:17px;box-shadow:0 8px 24px #0002;cursor:pointer}
.itl-extra .heroText small{display:block;margin-top:10px}
.itl-extra .mascot{height:470px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.itl-extra .mascot img{height:100%;width:100%;object-fit:cover;object-position:center 28%;mask-image:linear-gradient(to left,#000 86%,transparent 100%)}
.itl-extra .activities{padding:28px 0 20px}
.itl-extra .title{text-align:center}
.itl-extra .title h2{font-size:28px;margin:0;color:var(--navy);font-weight:800}
.itl-extra .title h2:before,.itl-extra .title h2:after{content:"";display:inline-block;width:95px;height:2px;background:var(--gold);vertical-align:middle;margin:0 28px}
.itl-extra .title p{font-size:12px;letter-spacing:.08em;color:#365a86}
.tabs{display:flex;margin:26px 0 0 15px}
.itl-extra .tab{border:1px solid #d7dee8;background:#fff;padding:15px 28px;font:700 14px Montserrat;color:var(--ink);cursor:pointer}
.itl-extra .tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.itl-extra .tab span{opacity:.6;margin-left:8px}
.disciplines{display:none;grid-template-columns:repeat(8,1fr);background:#f8f5ec;border-radius:12px;padding:22px 14px;margin-top:-1px}
.itl-extra .disciplines.active{display:grid}
.itl-extra .disciplines span{text-align:center;font-weight:700;font-size:13px;padding:4px 12px;border-right:1px solid #d9b85a}
.itl-extra .disciplines span:last-child{border:0}
.itl-extra .info{display:grid;grid-template-columns:1.1fr .95fr .95fr;gap:14px;padding:0 0 35px}
.info article{background:#f3f7fb;border-radius:12px;padding:24px 32px;min-height:210px}
.itl-extra .info h3{color:var(--navy);font-size:17px}
.itl-extra .info ul{list-style:none;padding:0;margin:20px 0}
.itl-extra .info li{margin:14px 0}
.itl-extra .info li:before{content:"✓";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;margin-right:14px;font-weight:800}
.itl-extra .info p{line-height:1.5}
.info strong,.itl-extra .info a{color:var(--navy)}
.itl-extra .register{text-align:center}
.itl-extra .register .btn{width:100%}
.itl-extra .facebook{display:block;text-decoration:none;text-align:left;margin:18px auto 0;max-width:270px;font-size:12px}
.itl-extra .docs{background:#f7f9fc;padding:45px 0}
.itl-extra .docGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.itl-extra .docGrid article{display:grid;grid-template-columns:125px 1fr;gap:18px;background:#fff;border:1px solid #dfe5ed;border-radius:10px;padding:12px}
.itl-extra .docGrid img{width:125px;height:150px;object-fit:cover;object-position:top}
.itl-extra .docGrid h3{font-size:14px;color:var(--navy);margin:4px 0}
.itl-extra .docGrid p{font-size:12px;line-height:1.5}
.docGrid a,.itl-extra .docGrid button{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;border:0;border-radius:6px;padding:10px 12px;font-weight:700;font-size:11px;cursor:pointer}
.itl-extra .contact{background:#edf4fb;padding:30px 0}
.itl-extra .contactGrid{display:grid;grid-template-columns:1.3fr .7fr 1.2fr 1.2fr;gap:25px}
.contactGrid div{display:flex;flex-direction:column;gap:5px;font-size:12px}
.itl-extra .contactGrid b{color:var(--navy)}
.itl-extra .contactGrid a{color:var(--navy);text-decoration:none}
.itl-extra .modal{position:fixed;inset:0;z-index:60;background:#000d;display:none;place-items:center;padding:25px}
.itl-extra .modal.open{display:grid}
.itl-extra .modal img{max-width:min(100%,1050px);max-height:90vh}
.itl-extra .close{position:fixed;right:28px;top:20px;border:0;background:none;color:#fff;font-size:40px;cursor:pointer}@media(max-width:900px){.itl-extra .wrap{width:min(100% - 30px,1420px)}
.itl-extra .heroGrid{grid-template-columns:1fr}
.itl-extra .heroText{z-index:2}
.itl-extra .hero h1{font-size:46px}
.itl-extra .mascot{position:absolute;right:-100px;bottom:0;width:60%;opacity:.42}
.disciplines{grid-template-columns:repeat(2,1fr);gap:0}
.itl-extra .disciplines span{border-right:0;border-bottom:1px solid #e1d3a5;padding:12px}
.itl-extra .info,.itl-extra .docGrid,.itl-extra .contactGrid{grid-template-columns:1fr}
.itl-extra .title h2:before,.itl-extra .title h2:after{display:none}
.itl-extra .docGrid article{grid-template-columns:95px 1fr}
.itl-extra .docGrid img{width:95px;height:125px}}@media(max-width:520px){.itl-extra .hero h1{font-size:36px}
.itl-extra .hero h2{font-size:22px}
.itl-extra .heroText>p{font-size:14px}
.itl-extra .heroText p i{margin:0 8px}
.itl-extra .mascot{width:78%;right:-145px}
.itl-extra .tabs{margin-left:0}
.itl-extra .tab{padding:13px 16px}
.itl-extra .disciplines{grid-template-columns:1fr 1fr}
.itl-extra .info article{padding:22px}
.itl-extra .title h2{font-size:23px}}

/* Compatibilidad con el header.php institucional: estilos confinados al módulo. */
.itl-extra a:not(.btn):not(.facebook){color:var(--navy)!important;font-size:inherit}
.itl-extra .btn,.itl-extra .btn:link,.itl-extra .btn:visited{color:#061a35!important;font-size:16px!important;text-decoration:none!important}
.itl-extra .docGrid a,.itl-extra .docGrid button{color:#fff!important;font-size:12px!important}
.itl-extra .hero{color:#fff!important}
.itl-extra .hero h1,.itl-extra .hero h2,.itl-extra .hero p,.itl-extra .hero small{color:#fff}
.itl-extra .hero h1 em{color:var(--gold)}
.itl-extra .extra-subnav{background:#06366b;position:relative;z-index:1}
.itl-extra .extra-subnav .wrap{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;min-height:55px;padding:10px 0}
.itl-extra .extra-subnav a{color:#fff!important;font-size:14px!important;text-decoration:none!important;font-weight:600}
.itl-extra .extra-subnav a:hover{text-decoration:underline!important}
.itl-extra .tab.active{color:#fff!important}
.itl-extra .modal{z-index:1055}
.itl-extra .modal img{object-fit:contain}
.itl-extra .close{opacity:1;text-shadow:none}
@media(max-width:700px){.itl-extra .extra-subnav .wrap{gap:10px 18px}.itl-extra .extra-subnav a{font-size:12px!important}}
@media (min-width: 769px) {
    .hero .heroGrid {
        display: grid !important;
        grid-template-columns: minmax(0, 60%) minmax(0, 40%) !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .hero .heroText {
        min-width: 0;
    }

    .hero .mascot img {
        width: 100% !important;
        max-width: 520px !important;
        height: auto !important;
        object-fit: contain;
    }
    .hero .mascot img {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
    }
}
/* AGRANDAR GATO ITL EN COMPUTADORA */
@media (min-width: 992px) {

    .hero .heroGrid {
        display: grid !important;
        grid-template-columns: 50% 50% !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .hero .mascot {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .hero .mascot img {
        display: block !important;
        width: 135% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
}
/* CORREGIR LETRAS DE BOTONES AZULES */

.docs .docGrid article a,
.docs .docGrid article a:link,
.docs .docGrid article a:visited {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.docs .docGrid article a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
/* TRES COLUMNAS: REQUISITOS, INFORMACIÓN E INSCRÍBETE */

.itl-extra #convocatoria .steps,
.itl-extra #convocatoria .cards,
.itl-extra #convocatoria .grid3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* Adaptación para celulares */
@media (max-width: 768px) {
    .itl-extra #convocatoria .steps,
    .itl-extra #convocatoria .cards,
    .itl-extra #convocatoria .grid3 {
        grid-template-columns: 1fr !important;
    }
}
/* REQUISITOS - INFORMACIÓN - INSCRÍBETE */

/* Computadoras */
@media (min-width: 992px) {

    .itl-extra section#convocatoria,
    section#convocatoria.info {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    section#convocatoria > article {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}
/* CONTACTO: CUATRO COLUMNAS */

.itl-extra #contacto .contactGrid,
#contacto .contactGrid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* Cada bloque de información */
#contacto .contactGrid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: auto !important;
    overflow-wrap: anywhere;
}

/* Títulos */
#contacto .contactGrid b {
    display: block !important;
    font-weight: 700 !important;
}

/* Enlaces */
#contacto .contactGrid a {
    overflow-wrap: anywhere;
}

/* TABLETAS: DOS COLUMNAS */
@media (min-width: 769px) and (max-width: 991px) {
    #contacto .contactGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* CELULARES: UNA COLUMNA */
@media (max-width: 768px) {
    #contacto .contactGrid {
        grid-template-columns: 1fr !important;
    }
}

/* AJUSTES MÓVILES: NAVEGACIÓN Y MASCOTA */
@media (max-width: 768px) {
  .itl-extra .extra-subnav .wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    height: auto !important;
  }
  .itl-extra .extra-subnav .wrap a,
  .itl-extra .extra-subnav .wrap a:link,
  .itl-extra .extra-subnav .wrap a:visited {
    display: block !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .itl-extra .hero {height: auto !important; overflow: hidden !important;}
  .itl-extra .heroGrid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 20px 0 0 !important;
  }
  .itl-extra .heroText {width: 100% !important; padding: 20px 0 !important;}
  .itl-extra .mascot {
    position: relative !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important; height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .itl-extra .mascot img {
    display: block !important;
    width: min(290px, 85%) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

/* TITULO DE PORTADA: AMARILLO Y RESPONSIVO */
.itl-extra .hero .heroText h1 > em,
.itl-extra .hero .heroText h1 > span.titulo-extra,
.itl-extra .hero .heroText h1 > em.titulo-extra {
    color: #efbd36 !important;
    -webkit-text-fill-color: #efbd36 !important;
    font-style: normal !important;
}
@media (max-width: 768px) {
    .itl-extra .hero .heroGrid,
    .itl-extra .hero .heroText {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .itl-extra .hero .heroText h1 {
        max-width: 100% !important;
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.18 !important;
        text-align: center !important;
    }
    .itl-extra .hero .heroText h1 > em,
    .itl-extra .hero .heroText h1 > span.titulo-extra,
    .itl-extra .hero .heroText h1 > em.titulo-extra {
        display: block !important;
        max-width: 100% !important;
        font-size: clamp(14px, 4.3vw, 20px) !important;
        line-height: 1.3 !important;
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
        text-align: center !important;
        color: #efbd36 !important;
        -webkit-text-fill-color: #efbd36 !important;
    }
}

/* EXTRAESCOLARES MÁS GRANDE EN CELULAR */
@media (max-width: 767px) {

    .itl-extra .hero h1 .titulo-extra,
    .itl-extra .hero h1 em {
        display: block !important;
        font-size: clamp(22px, 6.2vw, 30px) !important;
        font-weight: 800 !important;
        letter-spacing: -1.2px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        color: #efbd36 !important;
        -webkit-text-fill-color: #efbd36 !important;
    }
}

/* BOTÓN SÍGUENOS EN FACEBOOK */

.itl-extra .register a.facebook,
.itl-extra .register a.facebook:link,
.itl-extra .register a.facebook:visited {
    display: block !important;
    background-color: #e8f0fb !important;
    color: #06366b !important;
    -webkit-text-fill-color: #06366b !important;
    border: 1px solid #c9d9ef !important;
    border-radius: 10px !important;
    padding: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
}

.itl-extra .register a.facebook b {
    color: #06366b !important;
    -webkit-text-fill-color: #06366b !important;
    font-weight: 700 !important;
}

.itl-extra .register a.facebook:hover {
    background-color: #d5e5f8 !important;
}