/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    TOKENS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    :root{
    --black:  #0e0d0b;
    --ink:    #1c1a16;
    --slate:  #064c23;
    --muted:  #6a6560;
    --light:  #b0a99e;
    --border: #e0dbd3;
    --paper:  #f8f5f0;
    --cream:  #fdfbf8;
    --gold:   #c09a52;
    --gold-d: #9a7838;
    --gold-l: #ddb96a;

    /* Per-program accent */
    --lic-h:  168; --lic:  hsl(88deg 48% 50%);  --lic-l:  hsl(168 38% 92%);
    --mst-h:  230; --mst:  hsl(37deg 91% 55%);  --mst-l:  hsl(230 38% 93%);
    --doc-h:  38;  --doc:  hsl(218deg 45% 34%);  --doc-l:  hsl(38  58% 93%);
    --pst-h:  280; --pst:  hsl(139deg 66% 22%);  --pst-l:  hsl(280 30% 93%);

    --serif: 'Playfair Display', Georgia, serif;
    --sans:  'Lato', system-ui, sans-serif;
    --radius: 10px;
    --shadow: 0 2px 12px rgba(14,13,11,.08), 0 8px 32px rgba(14,13,11,.05);
    --shadow-lg: 0 8px 40px rgba(14,13,11,.14), 0 2px 8px rgba(14,13,11,.06);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    BASE
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    *,*::before,*::after{box-sizing:border-box;padding:0}
    html{scroll-behavior:smooth;font-size:16px}
    body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

    /* subtle paper noise */
    body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    background-size:300px;opacity:1;
    }

    .wrap{
        max-width:100%;
        margin:0 clamp(.5rem, 2vw, 2rem);
        padding:0 clamp(.5rem, 2vw, 2rem);
        position:relative;
        z-index:1
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    BREADCRUMB
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .bc-bar{
        background:var(--slate);
        /* padding:.7rem 0; */
        width: 100%;
        /* padding: 1rem 0; */
        border-bottom:1px solid rgba(192,154,82,.2);
        backdrop-filter: blur(5px);
        position: relative; 
        z-index: 999;

        position: relative;
        top: 0;
        width: 100%;
        z-index: 1000;
        overflow: visible !important;
    }
    .bc-container {
    max-width: 1200px;
    margin: 0;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between; /* LOGO a la izq, MENÚ a la der */
    align-items: center;
    }
    /* Estilos del Menú Derecho */
    .hero-menu {
    display: flex;
    list-style: none;
    gap: clamp(1rem, 2vw, 2.5rem); /* Espacio fluido entre links */
    margin: 0;
    padding: 0;
    align-items: center;
    }

    .hero-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
    }

    .hero-nav a:hover {
    color: var(--gold-l, #c09a52);
    }

    /* Botón destacado dentro del menú */
    .nav-btn {
    background: #f39200; /* Naranja UIC */
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    color: white !important;
    }

    /* --- 2. BOTÓN HAMBURGUESA (Oculto en PC) --- */
    .menu-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    .menu-toggle span {
        width: 25px;
        height: 3px;
        background-color: white;
        transition: 0.3s;
    }

    /* --- 3. RESPONSIVE MÓVIL (Max-width: 992px) --- */
    @media (max-width: 992px) {
        .menu-toggle {
            display: flex; /* Mostrar en móvil */
        }

        .hero-nav {
            display: none; /* Ocultar menú por defecto en móvil */
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: rgba(10, 78, 35, 0.95); /* Tu verde al 95% */
            backdrop-filter: blur(10px);
            padding: 20px 0;
        }

        /* Clase que activaremos con JS */
        .hero-nav.is-active {
            display: block;
        }

        .hero-nav ul {
            flex-direction: column; /* Lista vertical */
            gap: 0;
        }

        .hero-nav ul li {
            width: 100%;
            text-align: center;
        }

        .hero-nav a {
            display: block;
            padding: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        /* --- DROPDOWN EN MÓVIL --- */
        .dropdown-menu {
            position: static !important; /* Ya no flota, empuja el contenido */
            opacity: 1 !important;
            /* visibility: visible !important; */
            display: none; /* Oculto inicialmente */
            width: 100%;
            transform: none !important;
            background: rgba(0, 0, 0, 0.2) !important;
            box-shadow: none !important;
        }

        /* Al hacer clic (o hover en móvil si prefieres) */
        .dropdown.is-open .dropdown-menu {
            display: block;
        }

        .nav-btn {
            margin: 15px auto;
            width: fit-content;
        }
    }



    /* --- LA FLECHA --- */
    .arrow-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    /* Crea un triángulo con bordes */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff; 
    transition: transform 0.3s ease;
    }

    /* Girar flecha al abrir */
    .dropdown:hover .arrow-icon {
    transform: rotate(180deg);
    border-top-color: var(--gold-l, #c09a52);
    }

    /* --- EL DESPLEGABLE --- */
    .dropdown {
    position: relative; /* Padre necesario para posicionar el hijo */
    }

    .dropdown-menu {
    /* Reset de Flexbox anterior */
    display: flex !important;
    flex-direction: column !important; 
    
    /* Posicionamiento */
    position: absolute;
    top: 100%;
    left: 0;
    /* Asegura que esté por encima de todo */
    
    /* Estética */
    background-color: rgba(10, 78, 35, 0.9); /* Verde sólido para evitar transparencias raras */
    backdrop-filter: blur(10px);
    min-width: 220px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    border-radius: 4px;
    border-top: 3px solid #c09a52;
    box-shadow: 0 8px 15px rgba(0,0,0,0.5);

    /* Estado Inicial (Oculto) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    gap: 1px;
    }

    /* --- EL MOMENTO DEL DESPLIEGUE --- */
    .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
    }

    /* --- ESTILO DE LOS LINKS INTERNOS --- */
    .dropdown-menu li {
    width: 100%;
    display: block;
    position: relative;
    }

    .dropdown-menu li a {
    color: #fff !important;
    padding: 12px 20px 0 !important;
    display: block !important;
    text-transform: none !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    width: 100%;
    }

    .dropdown-menu li a:hover {
    background-color: rgba(192, 154, 82, 0.2);
    color: #c09a52 !important;
    }

    .bc{display:flex;align-items:center;gap:.4rem;list-style:none;font-size:.72rem;color:#ffffff}
    .bc li+li::before{content:'›';opacity:.4;margin-right:.3rem}
    .bc a{color:#ffffff;text-decoration:none;transition:color .2s}
    .bc a:hover{color:var(--gold-l)}
    .bc li:last-child{color:var(--gold-l)}


    /* La imagen del logo con responsive fluido */
    .hero-logo {
    /* Ancho: mínimo 140px, ideal 15% del ancho de pantalla, máximo 280px */
    width: clamp(140px, 18vw, 180px);
    height: auto; /* Mantiene la proporción */
    display: block;
    
    /* Filtro opcional: si el logo es oscuro y el fondo también, 
        puedes hacerlo blanco con CSS si es un PNG */
    /* filter: brightness(0) invert(1); */
    
    transition: transform 0.3s ease;
    }

    .hero-logo:hover {
    transform: scale(1.05); /* Efecto sutil al pasar el mouse */
    }

    /* Alineación en móviles */
    @media (max-width: 992px) {
    .hero-logo-wrap {
        display: flex;
        justify-content: left;
    }
    }

    #mobile-menu {
            transition: transform 0.3s ease-in-out;
        }
        #mobile-menu.hidden-panel {
            transform: translateX(100%);
        }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    HERO
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* .hero{
    background-image: url("../imagenes/Psicologiaypsicoanalisis.jpg");
    background-size: cover;      
    background-position: center; 
    
    min-height: clamp(300px, 50vw, 600px); 
    position: relative;
    display:flex;
    

    }
    .hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 70% 40%, rgba(192,154,82,.15) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 90%, rgba(42,48,64,.8) 0%, transparent 50%);
    }
    
    .hero::after{
    content:'';position:absolute;
    top:0;left:0;width:100%;height:100%;
    background-image:repeating-linear-gradient(
        0deg, transparent, transparent 79px,
        rgba(192,154,82,.04) 80px
    );
    pointer-events:none;
    }
    .hero-inner{
    position:relative;
    z-index:2;
    padding:.1rem 1rem 10rem;
    max-width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:5rem;
    align-items:center;
    }
    .hero-eyebrow{
    font-size:clamp(.72rem, 1.9vw, .9rem);
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold-l);
    align-items:center;
    gap:.8rem;
    margin-bottom:1.2rem;
    margin-top:1rem;
    }
    .hero-eyebrow::before{
        content:'';
        width:2.5rem;
        height:1px;
    }
    .hero h1{
    font-family:var(--serif);
    font-size:clamp(25px,6vw,4.4rem);
    font-weight:400;
    line-height:1.1;
    color:#fff;
    margin-bottom:.5rem;
    }
    .hero h1 em{font-style:italic;
        color:var(--gold-l)
    }
    .hero-sub{
    font-size:clamp(.9rem, 3vw, 1.4rem);
    color:#ffffff;
    max-width:clamp(64%, 63vw, 70%);
    line-height:1.8;
    }
    .hero-pills{
    display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;
    }
    .pill{
    font-size:.72rem;font-weight:700;letter-spacing:.1em;
    padding:.32rem .9rem;border-radius:100px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    color:#ffffff;
    }

    .hero-stats {
        position: absolute;
        bottom: clamp(1px, .1vh, 2px); 
        right: clamp(15px, 5vw, 60px); 
        left: auto;
        
        width: auto;
        max-width: 92vw; 
        
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; 
        align-items: stretch;
        gap: clamp(6px, 1.2vw, 15px);
        
        z-index: 20;
    }

    .stat {
        flex: 1 1 0px; 
        min-width: 0;   
        
        background: rgba(10, 78, 35, 0.5); 
        backdrop-filter: blur(10px);
        border: 2px solid rgba(192, 154, 82, 0.3);
        border-radius: 8px;
        
        padding: clamp(1px, .1vw, 2px) 1px 1px 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        transition: transform 0.3s ease;
    }

    .stat:hover {
        transform: translateY(-5px);
        border-color: rgba(192, 154, 82, 0.8);
    }

    .stat-n {
        font-family: var(--serif);
        color: var(--gold-l, #c09a52);
        font-weight: 700;
        line-height: 1.2;
        font-size: clamp(1.1rem, 2.8vw, 2.4rem); 
        margin-bottom: 4px;
    }

    .stat-l {
        color: #ffffff;
        
        font-weight: 600;
        line-height: 1.1;
        font-size: clamp(0.8rem, 0.99vw, 1rem);
        letter-spacing: 0.02em;
    }

    @media (max-width: 600px) {
        .hero-stats {
            right: 5px;
            bottom: 2px;
            gap: 5px;
        }
        
        .stat {
            padding: 8px 4px;
        }
    } */

    /* ---- Hero: imagen de fondo + overlay oscuro ---- */
    .hero {
      padding: 4rem 0 0 0; 
      position: relative;
      background-image: url('https://uic.mx/ia-html/UIC_NUEVO/imagenes/Psicologiaypsicoanalisis.jpg');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
    }

    /* Overlay para asegurar legibilidad del texto */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        100deg,
        rgba(8, 18, 38, 0.82) 0%,
        rgba(8, 18, 38, 0.55) 60%,
        rgba(8, 18, 38, 0.20) 100%
      );
      z-index: 0;
    }

    /* ---- Contenedor interno ---- */
    .hero .hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      max-width: 740px;
      margin: 0 clamp(0.5rem, 6vh, 8rem);
      padding: 72px 40px 64px;
      gap: 0;
    }

    /* ---- Columna de texto (.au) ---- */
    .hero .hero-inner .au:first-child {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* ---- Eyebrow / badge ---- */
    .hero .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.09);
      border: 0.5px solid rgba(255, 255, 255, 0.22);
      border-radius: 20px;
      padding: 5px 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.70);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      width: fit-content;
      margin-bottom: 20px;
    }

    .hero .hero-eyebrow::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4fc08d;
      flex-shrink: 0;
    }

    /* ---- Título h1 ---- */
    .hero .hero-inner h1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 600;
      font-size: clamp(38px, 5vw, 56px);
      line-height: 1.1;
      color: #ffffff;
      letter-spacing: -0.5px;
      margin: 0 0 20px;
    }

    /* Color dorado para el <em> */
    .hero .hero-inner h1 em {
      font-style: italic;
      font-weight: 400;
      color: #d4a843;
    }

    /* ---- Párrafo subtítulo ---- */
    .hero .hero-sub {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(.85rem, 2vw, 1.1rem);
      line-height: 1.40;
      color: rgba(255, 255, 255, 0.70);
      font-weight: 300;
      max-width: 560px;
      margin: 0 0 36px;
    }

    /* ---- Stats: debajo del hero-sub ---- */
    .hero .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
    }

    .hero .stat {
      background: rgba(212, 168, 67, 0.12);
      border: 0.5px solid rgba(212, 168, 67, 0.30);
      border-radius: 10px;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    /* ---- Número del stat ---- */
    .hero .stat-n {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 32px;
      font-weight: 600;
      color: #d4a843;
      line-height: 1;
      letter-spacing: -0.5px;
    }

    /* IARPP — texto más pequeño */
    .hero .stat:last-child .stat-n {
      font-size: 19px;
      letter-spacing: 0.04em;
      padding-top: 8px;
    }

    /* ---- Label del stat ---- */
    .hero .stat-l {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(.85rem, 2vw, 1.1rem);
      color: rgba(255, 255, 255, 0.60);
      font-weight: 400;
      line-height: 1.4;
    }

    /* ---- Responsive ---- */
    @media (max-width: 768px) {
      .hero .hero-inner {
        padding: 48px 24px 48px;
        margin: 0 4rem 0 .5rem
      }
      .hero .hero-stats {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 480px) {
      .hero .hero-stats {
        grid-template-columns: 1fr 1fr;
      }
    }


    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    STICKY NAV
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .prog-nav{
    position: sticky;
    top: 0;
    z-index: 1100;
    background:rgba(253,251,248,.96);
    backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid var(--border);
    }
    .prog-nav-inner{
    max-width:100%;
    margin:0 2rem;
    padding:0 2rem;
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    }
    .prog-nav-inner::-webkit-scrollbar{display:none}
    .prog-nav a{
    display:flex;align-items:center;gap:.55rem;
    padding:.9rem 1.3rem;
    font-size: clamp(.8rem, 2vw, .95rem);
    font-weight:700;letter-spacing:.04em;
    color:var(--muted);text-decoration:none;white-space:nowrap;
    border-bottom:2px solid transparent;
    transition:color .2s,border-color .2s;
    }
    .prog-nav a:hover,.prog-nav a.is-active{color:var(--gold-d)}
    .prog-nav a.is-active{border-bottom-color:var(--gold)}
    .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    HUB OVERVIEW CARDS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .hub{padding:4rem 0}
    .sec-label{
    font-size:.68rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold-d);
    display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;
    }
    .sec-label::before{content:'';width:1.8rem;height:1px;background:var(--gold)}
    .sec-title{
    font-family:var(--serif);
    font-size:clamp(1.8rem,3.5vw,2.75rem);
    font-weight:400;line-height:1.2;color:var(--slate);
    margin-bottom:.6rem;
    }
    .sec-sub{
        font-size: clamp(.85rem, 2vw, 1.1rem);
        color:var(--muted);
        max-width:70%;
    }
    .sec-sub2{
        font-size:clamp(.85rem, 2vw,1.1rem);
        color:var(--muted);
        max-width:90%;
    }

    .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
    @media(max-width:1000px){.card-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:580px){.card-grid{grid-template-columns:1fr}}

    .pcard{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;text-decoration:none;color:inherit;
    display:flex;flex-direction:column;
    transition:transform .25s,box-shadow .25s;
    }
    .pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
    .pcard-stripe{height:3px}
    .pcard-body{padding:1.6rem;flex:1;display:flex;flex-direction:column}
    .pcard-level{font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.4rem}
    .pcard h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.25;color:var(--slate);margin-bottom:.7rem}
    .pcard-desc{
        font-size: clamp(.95rem, 2.2vw, 1.05rem);
        color:var(--muted);
        line-height:1.65;
        flex:1
    }
    .pcard-meta{
    margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:.4rem;
    }
    .tag{
    font-size:.66rem;font-weight:700;letter-spacing:.06em;
    padding:.18rem .6rem;border-radius:100px;
    background:var(--paper);border:1px solid var(--border);color:var(--muted);
    }
    .pcard-link{
    margin-top:1.1rem;font-size:.76rem;font-weight:700;letter-spacing:.06em;
    display:flex;align-items:center;gap:.4rem;transition:gap .2s;
    }
    .pcard-link::after{content:'→'}
    .pcard-link:hover{gap:.7rem}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    PROGRAM SECTIONS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .prog-sec{
    padding:4rem 0;
    border-top:1px solid var(--border);
    position:relative;
    }
    .prog-sec:nth-child(even){background:#fff}

    .prog-head{
    display:grid;grid-template-columns:1.6fr 1fr;gap:3.5rem;
    align-items:start;margin-bottom:3.5rem;
    }
    @media(max-width:860px){.prog-head{grid-template-columns:1fr}}

    .badge-pill{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.67rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;padding:.3rem .9rem;border-radius:100px;
    margin-bottom:.9rem;
    }
    .prog-head h2{
    font-family:var(--serif);
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:400;line-height:1.1;color:var(--slate);
    margin-bottom:1rem;
    }
    .prog-head h2 em{font-style:italic}
    .prog-lead{
        font-size: clamp(.9rem, 2vw, 1.1rem);
        color:var(--muted);
        line-height:1.85;
        max-width:100%}

    /* info box */
    .info-box{
    background:var(--paper);border:1px solid var(--border);
    border-radius:var(--radius);overflow:hidden;
    }
    .info-box-head{
    padding:.85rem 1.25rem;
    font-size:.7rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:#fff;
    }
    .info-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:.7rem 1.25rem;border-bottom:1px solid var(--border);
    font-size:.84rem;
    }
    .info-row:last-child{border-bottom:none}
    .info-row .lbl{color:var(--light);font-size:.74rem;letter-spacing:.04em}
    .info-row .val{font-weight:700;color:var(--slate);text-align:right;max-width:62%}

    /* content cols */
    .cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
    .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
    @media(max-width:820px){.cols-3,.cols-2{grid-template-columns:1fr}}

    .content-box{
    background:#fff;border:1px solid var(--border);
    border-radius:var(--radius);padding:1.5rem;
    }
    .prog-sec:nth-child(even) .content-box{background:var(--paper)}
    .content-box h4{
    font-family:var(--serif);
    font-size:1.05rem;
    font-weight:500;
    color:var(--slate);
    margin-bottom:.85rem;
    padding-bottom:.6rem;
    border-bottom:1px solid var(--border);
    }
    .content-box ul{list-style:none}
    .content-box ul li{
    font-size: clamp(.85rem, 2vw, .95rem);
    color:var(--muted);
    padding:.32rem 0;border-bottom:1px solid var(--border);
    display:flex;align-items:flex-start;gap:.55rem;
    }
    .content-box ul li:last-child{border-bottom:none}
    .content-box ul li::before{
    content:'—';color:var(--gold);font-size:.78rem;
    flex-shrink:0;margin-top:.12rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FAQ
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .faq-wrap{margin-top:3rem}
    .faq-title{
    font-family:var(--serif);font-size:1.5rem;font-weight:400;
    color:var(--slate);margin-bottom:1.25rem;
    }
    details{
    border:1px solid var(--border);border-radius:var(--radius);
    margin-bottom:.6rem;background:#fff;transition:box-shadow .2s;
    }
    .prog-sec:nth-child(even) details{background:var(--paper)}
    details[open]{box-shadow:var(--shadow)}
    summary{
    padding:1rem 1.3rem;
    font-size:.92rem;font-weight:700;color:var(--slate);
    cursor:pointer;list-style:none;
    display:flex;justify-content:space-between;align-items:center;
    transition:color .2s;user-select:none;
    }
    summary::-webkit-details-marker{display:none}
    summary::after{
    content:'+';font-size:1.3rem;font-weight:300;
    color:var(--gold);flex-shrink:0;margin-left:1rem;
    transition:transform .3s;
    }
    details[open] summary::after{transform:rotate(45deg)}
    details[open] summary{color:var(--gold-d)}
    .faq-ans{
    padding:.1rem 1.3rem 1.1rem;
    font-size:.88rem;color:var(--muted);line-height:1.8;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FACULTY
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .faculty-sec{padding:6rem 0;background:var(--paper)}
    .faculty-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:1rem;margin-top:2.5rem;
    }
    .fc{
    background:#fff;border:1px solid var(--border);
    border-radius:var(--radius);padding:1.25rem;
    transition:box-shadow .2s;
    }
    .fc:hover{box-shadow:var(--shadow)}
    .fc-name{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--slate);margin-bottom:.15rem}
    .fc-degree{font-size:.72rem;color:var(--gold-d);font-weight:700;margin-bottom:.5rem}
    .fc-spec{
        font-size:clamp(.85rem, 2vw,.95rem);
        color:var(--muted);
        line-height:1.55
    }

    .author-card{
    background:var(--slate);
    color:#fff;
    border-radius:var(--radius);
    padding:2.5rem;
    margin-bottom:2.5rem;
    display:grid;
    grid-template-columns:.1fr 1fr;gap:1.75rem;align-items:center;
    }
    @media(max-width:555px){
        .author-card{
            grid-template-columns:1fr;
            text-align:center;
        }
        .docente-img{
            justify-self:center;
        }
    }
    .author-avatar{
    width:64px;height:64px;border-radius:50%;
    background:rgba(192,154,82,.2);border:1.5px solid rgba(192,154,82,.45);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:1.4rem;color:var(--gold-l);
    flex-shrink:0;
    }
    .author-card h3{font-family:var(--serif);font-size:1.35rem;font-weight:400;margin-bottom:.2rem}
    .author-card .role{
        font-size: clamp(.85rem, 2vw, 1.1rem);
        color:var(--gold-l);font-weight:700;letter-spacing:.08em;margin-bottom:.65rem}
    .author-card p{
        font-size: clamp(.85rem, 2vw, 1.1rem);
        color:rgba(255,255,255,.65);line-height:1.75}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ★ FLOATING REGISTRATION FORMS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* The trigger button that appears when user is in a section */
    .float-trigger{
    position:fixed;
    right:0;
    z-index:300;
    display:none; /* shown by JS */
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    }
    .float-trigger.is-visible{
    transform:translateX(0);
    }

    /* Vertical "tab" button */
    .float-tab{
    position:absolute;
    right:10%;
    top:50%;
    transform:translateY(-50%);
    display:flex;align-items:center;gap:.55rem;
    padding:.7rem .9rem;
    border:none;
    border-radius:6px 6px;
    cursor:pointer;
    font-family:var(--sans);
    font-size:.90rem;font-weight:700;letter-spacing:.08em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    color:#fff;white-space:nowrap;
    box-shadow:-3px 0 12px rgba(14,13,11,.18);
    transition:padding .2s;
    }
    .float-tab:hover{padding-left:1.2rem}
    .float-tab svg{width:14px;height:14px;flex-shrink:0}

    /* The form panel */
    .float-panel{
    width:450px;
    background:#fff;
    box-shadow:var(--shadow-lg);
    border-radius:4px 0 0 4px;
    overflow:hidden;
    }
    .float-panel-head{
    padding:1.1rem 1.25rem;
    display:flex;align-items:center;justify-content:space-between;
    }
    .float-panel-head .title{
    font-family:var(--serif);font-size:1.05rem;font-weight:500;color:#fff;
    line-height:1.2;
    }
    .float-panel-head .subtitle{
    font-size:.68rem;color:rgba(255,255,255,.7);margin-top:.2rem;font-weight:400;
    }
    .float-close{
    background:none;border:none;cursor:pointer;
    color:rgba(255,255,255,.7);font-size:1.3rem;line-height:1;
    padding:0 0 0 .5rem;transition:color .2s;flex-shrink:0;
    }
    .float-close:hover{color:#fff}

    .float-body{padding:1.25rem}
    .float-field{margin-bottom:.85rem}
    .float-field label{
    display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.3rem;
    }
    .float-field input,
    .float-field select{
    width:100%;padding:.65rem .85rem;
    border:1px solid var(--border);border-radius:var(--radius);
    background:var(--paper);
    font-family:var(--sans);font-size:.88rem;color:var(--ink);
    outline:none;transition:border-color .2s,box-shadow .2s;
    appearance:none;
    }
    .float-field input::placeholder{color:var(--light)}
    .float-field input:focus,
    .float-field select:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(192,154,82,.12);
    }
    .float-field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236a6560'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .85rem center;
    padding-right:2rem;
    }
    .float-field select option{color:var(--ink)}

    .float-btn{
    width:100%;padding:.75rem;
    border:none;border-radius:var(--radius);
    font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;
    cursor:pointer;transition:filter .2s,transform .15s;
    }
    .float-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
    .float-btn:active{transform:translateY(0)}

    .float-note{
    font-size:.67rem;color:var(--light);text-align:center;
    margin-top:.75rem;line-height:1.5;
    }

    /* success state */
    .float-success{
    display:none;text-align:center;padding:2rem 1.25rem 1.75rem;
    }
    .float-success .check{
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto .85rem;font-size:1.2rem;color:#fff;
    }
    .float-success h4{
    font-family:var(--serif);font-size:1.1rem;
    color:var(--slate);margin-bottom:.4rem;
    }
    .float-success p{font-size:.84rem;color:var(--muted)}

    /* vertical positioning per form */
    #flt-lic{top:calc(35vh - 160px)}
    #flt-mst{top:calc(35vh - 160px)}
    #flt-doc{top:calc(35vh - 160px)}
    #flt-pst{top:calc(35vh - 160px)}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    COLOR UTILS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .c-lic{color:var(--lic)}  .bg-lic{background:var(--lic)}  .bg-lic-l{background:var(--lic-l)}
    .c-mst{color:var(--mst)}  .bg-mst{background:var(--mst)}  .bg-mst-l{background:var(--mst-l)}
    .c-doc{color:var(--doc)}  .bg-doc{background:var(--doc)}  .bg-doc-l{background:var(--doc-l)}
    .c-pst{color:var(--pst)}  .bg-pst{background:var(--pst)}  .bg-pst-l{background:var(--pst-l)}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FOOTER
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    footer{
    background:#0c0b09;color:rgba(255,255,255,.35);
    padding:2rem 0;text-align:center;font-size:.76rem;
    }
    footer a{color:var(--gold-l);text-decoration:none}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    RESPONSIVE
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media(max-width:900px){
    .float-panel{width:400px}
    } 
    @media(max-width:560px){
    /* .hero-stats{grid-template-columns:1fr 1fr 1fr 1fr} */
    .float-panel{width:350px}
    /* .float-trigger{display:none!important} disable on small screens — inline modal instead */
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ENTER ANIMATIONS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    .au{animation:fadeUp .65s ease both}
    .d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    TESTIMONIOS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .testi-sec{
    padding:6rem 0;
    background:#fff;
    border-top:1px solid var(--border);
    }
    .testi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.25rem;
    margin-top:3rem;
    }
    .testi-card{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.75rem;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    transition:box-shadow .2s;
    }
    .testi-card:hover{box-shadow:var(--shadow)}
    .testi-card::before{
    content:'\201C';
    font-family:var(--serif);
    font-size:4rem;
    line-height:1;
    color:var(--gold);
    opacity:.35;
    position:absolute;
    top:.75rem;right:1.25rem;
    }
    .testi-stripe{
    height:3px;
    border-radius:2px;
    position:absolute;
    top:0;left:0;right:0;
    border-radius:var(--radius) var(--radius) 0 0;
    }
    .testi-quote{
    font-family:var(--serif);
    font-size:1.05rem;
    font-weight:400;
    color:var(--slate);
    line-height:1.75;
    font-style:italic;
    }
    .testi-result{
    font-size:.8rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;
    padding:.3rem .8rem;
    border-radius:100px;
    display:inline-block;
    align-self:flex-start;
    }
    .testi-author{
    display:flex;align-items:center;gap:.85rem;
    padding-top:1rem;
    border-top:1px solid var(--border);
    margin-top:auto;
    }
    .testi-initials{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:.95rem;color:#fff;
    flex-shrink:0;font-weight:500;
    }
    .testi-name{font-size:.85rem;font-weight:700;color:var(--slate)}
    .testi-prog{font-size:.74rem;color:var(--muted);margin-top:.1rem}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    CLÍNICAS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .clinicas-sec{
    padding:6rem 0;
    background:var(--paper);
    border-top:1px solid var(--border);
    }
    .clinicas-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:3rem;
    }
    @media(max-width:720px){.clinicas-grid{grid-template-columns:1fr}}
    .clinica-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:box-shadow .2s;
    }
    .clinica-card:hover{box-shadow:var(--shadow)}
    .clinica-head{
    background:var(--slate);
    padding:1.25rem 1.5rem;
    display:flex;align-items:center;gap:1rem;
    }
    .clinica-icon{
    width:42px;height:42px;border-radius:50%;
    background:rgba(192,154,82,.2);
    border:1px solid rgba(192,154,82,.35);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;flex-shrink:0;
    }
    .clinica-head-text .name{
    font-family:var(--serif);font-size:1rem;font-weight:500;
    color:#fff;line-height:1.25;
    }
    .clinica-head-text .sigla{
    font-size:.68rem;font-weight:700;letter-spacing:.12em;
    color:var(--gold-l);margin-top:.1rem;
    }
    .clinica-body{padding:1.25rem 1.5rem}
    .clinica-desc{
    font-size:clamp(.87rem, 2vw, 1rem);
    color:var(--muted);
    line-height:1.7;margin-bottom:1rem;
    }
    .clinica-tags{display:flex;flex-wrap:wrap;gap:.4rem}
    .clinica-tag{
    font-size:.68rem;font-weight:700;letter-spacing:.06em;
    padding:.2rem .65rem;border-radius:100px;
    background:var(--paper);border:1px solid var(--border);
    color:var(--muted);
    }
    .clinica-nota{
    margin-top:2.5rem;
    background:var(--slate);
    border-radius:var(--radius);
    padding:1.5rem 2rem;
    display:flex;align-items:center;gap:1.5rem;
    flex-wrap:wrap;
    }
    .clinica-nota p{
    font-size:.88rem;color:rgba(255,255,255,.7);
    line-height:1.65;flex:1;min-width:200px;
    }
    .clinica-nota strong{color:var(--gold-l)}

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ACREDITACIONES
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .acred-sec{
    padding:5rem 0;
    background:#fff;
    border-top:1px solid var(--border);
    }
    .acred-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1rem;
    margin-top:2.5rem;
    }
    .acred-card{
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.4rem 1.25rem;
    background:var(--paper);
    transition:border-color .2s,box-shadow .2s;
    text-align:center;
    }
    .acred-card:hover{
    border-color:rgba(192,154,82,.45);
    box-shadow:var(--shadow);
    }
    .acred-sigla{
    font-family:var(--serif);
    font-size:1.6rem;font-weight:400;
    color:var(--gold-d);
    line-height:1;
    margin-bottom:.4rem;
    }
    .acred-name{
    font-size: clamp(.85rem, 2vw, 1.1rem);
    font-weight:700;
    color:var(--slate);
    margin-bottom:.5rem;
    line-height:1.3;
    }
    .acred-desc{
    font-size: clamp(.84rem, 2vw, .9rem);
    color:var(--muted);
    line-height:1.55;
    }
    .acred-divider{
    width:24px;height:1px;
    background:var(--gold);
    margin:.6rem auto;
    }
    .rvoe-banner{
    margin-top:2rem;
    background:var(--slate);
    border-radius:var(--radius);
    padding:1.5rem 2rem;
    display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
    }
    .rvoe-badge{
    font-family:var(--serif);
    font-size:2rem;color:var(--gold-l);
    font-weight:400;flex-shrink:0;
    line-height:1;
    }
    .rvoe-text{flex:1;min-width:180px}
    .rvoe-text strong{
    display:block;font-size:.82rem;font-weight:700;
    color:#fff;letter-spacing:.05em;margin-bottom:.3rem;
    }
    .rvoe-text p{
        font-size: clamp(.85rem, 2vw, 1rem);
        color:rgba(255,255,255,.6);line-height:1.6}

    .lista-fa{
        list-style:none;
        padding-left:0;
    } 
    .lista-fa li{
        position:relative;
        padding-left:15px;
        font-size: 17px;
        font-family: 'Avenir', serif;
        line-height: 1.8;
    }

    .lista-fa li::before{
        content: "\f111"; /* icono círculo */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position:absolute;
        left:0;
        top:6px;
        font-size:8px;
        color:#008c44;
    }

    .prog-sec[hidden] {
    display: none;
    }

    .prog-nav a.active {
    font-weight: 700;
    border-bottom: 2px solid currentColor;
    }
    .docente-img{
        width:150px;
        height:auto;
        flex-shrink:0;
    }

    .imagen-box{
        width:100%;
        height:300px; /* o el alto que necesites */
        background:
            linear-gradient(to right,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,1) 40%,
                rgba(255,255,255,0.6) 55%,
                rgba(255,255,255,0) 60%
            ),
            url('../imagenes/Autismo-1024x683-1.jpg');
        background-size: cover;      /* 🔥 llena el contenedor */
        background-position: center; /* 🔥 centra la imagen */
        background-repeat: no-repeat;
    }

    .imagen-box{
        height:40vh; /* altura dinámica */
        min-height:250px;
    }
    .imagen-box h2, .imagen-box p{
            padding:20px 15px;
            width: 50%;
        }

    @media (max-width: 700px) {
        .imagen-box{
            display:flex;
            flex-direction:column; /* 🔥 apila */
            height:40vh; /* 🔥 quita altura fija */
            background:none; /* 🔥 elimina fondo */
            padding:3% 0;
        }

        /* imagen real arriba */
        .imagen-box::before{
            content:"";
            width:100%;
            height:200px; /* puedes ajustar */
            background:url('../imagenes/Autismo-1024x683-1.jpg') center/cover no-repeat;
            display:block;
        }

        /* contenido abajo */
        .imagen-box h2, .imagen-box p{
            padding:10px 1px 1px;
            width: 100%;
        }

    }
    .header-icon {
        color: #f4c06a;
        transition: all 0.3s ease;
    }

    .header-icon:hover {
        color: #ffffff;
        transform: scale(1.1);
    }

    .dnone{
      display: none;
    }

    .grecaptcha-badge {
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s ease;
    }
    .grecaptcha-badge.is-visible {
        visibility: visible;
        opacity: 1;
    }