/* =================================================================
     1. TOKENS DE DISEÑO — paleta, tipografía y medidas base
     ================================================================= */
  :root{
    /* Paleta — basada en el logotipo institucional */
    --rojo:        #A41E22;   /* rojo institucional intenso */
    --rojo-oscuro: #6E1316;   /* rojo profundo para fondos y degradados */
    --rojo-brasa:  #4A0C0E;   /* rojo casi negro, para el hero */
    --negro:       #1B1614;   /* negro elegante (no negro puro) */
    --blanco:      #FFFFFF;
    --crema:       #FBF8F3;   /* blanco cálido para fondos claros */
    --dorado:      #C9A35A;   /* dorado/champagne — detalles premium */
    --dorado-claro:#E4CD98;
    --dorado-oscuro:#866527;  /* mismo tono, oscurecido para texto legible sobre fondos claros */
    --gris-texto:  #5B5450;

    /* Tipografía */
    --f-display: "Fraunces", Georgia, serif;
    --f-cuerpo:  "Inter", -apple-system, sans-serif;

    /* Medidas */
    --max-w: 1240px;
    --radio: 2px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--f-cuerpo);
    color:var(--negro);
    background:var(--crema);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  .envoltorio{max-width:var(--max-w);margin:0 auto;padding:0 32px;}

  /* Respeta usuarios que prefieren menos animación */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  }

  h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.05;letter-spacing:-0.01em;}

  .ojo-titulo{
    font-family:var(--f-cuerpo);
    font-size:13px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--dorado-oscuro);
    display:flex;
    align-items:center;
    gap:14px;
  }
  .ojo-titulo::before{
    content:"";
    width:28px;height:1px;
    background:var(--dorado);
    display:inline-block;
  }

  /* =================================================================
     2. BOTONES
     ================================================================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    border-radius:var(--radio);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s;
    white-space:nowrap;
  }
  .btn-dorado{
    background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));
    color:var(--negro);
    font-weight:700;
    box-shadow:0 8px 24px -8px rgba(201,163,90,.6);
  }
  .btn-dorado:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(201,163,90,.7);}
  /* Variante compacta para el CTA fijo del header (antes duplicada inline en 9 páginas) */
  .btn-nav{padding:10px 20px;font-size:12px;}
  .btn-contorno{
    border:1.5px solid rgba(255,255,255,.55);
    color:var(--blanco);
  }
  .btn-contorno:hover{background:rgba(255,255,255,.12);border-color:var(--blanco);transform:translateY(-2px);}
  .btn-contorno-oscuro{
    border:1.5px solid var(--negro);
    color:var(--negro);
  }
  .btn-contorno-oscuro:hover{background:var(--negro);color:var(--blanco);}
  .btn-fantasma{
    color:rgba(255,255,255,.78);
    padding:16px 8px;
    border-bottom:1.5px solid rgba(255,255,255,.3);
    border-radius:0;
    gap:8px;
  }
  .btn-fantasma svg{width:16px;height:16px;flex:none;}
  .btn-fantasma:hover{color:var(--dorado-claro);border-color:var(--dorado-claro);transform:translateY(-2px);}

  /* =================================================================
     3. ENCABEZADO / MENÚ FIJO
     ================================================================= */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    padding:22px 0;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  header.scrolled{
    background:rgba(27,22,20,.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
  }
  nav.envoltorio{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .marca{
    display:flex;align-items:center;gap:14px;
    font-family:var(--f-display);
    color:var(--blanco);
  }
  .logo-img{
    width:46px;height:46px;
    border-radius:50%;
    object-fit:cover;
    transition:width .4s ease, height .4s ease;
  }
  .logo-img-grande{
    width:108px;height:108px;
    box-shadow:0 6px 20px rgba(0,0,0,.3);
  }
  header.scrolled .logo-img-grande{
    width:82px;height:82px;
  }

  .menu-links{display:flex;gap:22px;align-items:center;}
  .menu-links a{
    font-size:15px;font-weight:500;letter-spacing:.015em;
    color:rgba(255,255,255,.85);
    position:relative;
    padding-bottom:4px;
    white-space:nowrap;
  }
  .menu-links a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
    background:var(--dorado);transition:width .3s ease;
  }
  .menu-links a:hover::after{width:100%;}
  .menu-links a:hover{color:var(--blanco);}

  /* --- Submenús desplegables --- */
  .menu-item{position:relative;display:flex;align-items:center;}
  .menu-item > a{white-space:nowrap;}
  .menu-item > a .flecha{
    font-size:11.5px;margin-left:5px;opacity:.7;
    transition:transform .3s ease;display:inline-block;
  }
  .menu-item:hover > a .flecha{transform:rotate(180deg);}
  .submenu{
    position:absolute;top:calc(100% + 18px);left:0;
    background:rgba(27,22,20,.97);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    border-top:2px solid var(--dorado);
    min-width:210px;
    border-radius:0 0 6px 6px;
    overflow:hidden;
    opacity:0;visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
    z-index:2000;
  }
  .menu-item:hover .submenu,
  .menu-item:focus-within .submenu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .submenu a{
    display:block;
    padding:13px 20px;
    font-size:13px;font-weight:500;
    color:rgba(255,255,255,.82);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .25s, color .25s, padding-left .25s;
  }
  .submenu a:hover{
    background:rgba(201,163,90,.12);
    color:var(--dorado-claro);
    padding-left:28px;
  }
  .submenu a:last-child{border-bottom:none;}
  .submenu a::after{display:none!important;}

  /* --- Submenús en móvil --- */
  #panel-movil .mob-item{display:flex;flex-direction:column;}
  #panel-movil .mob-trigger{
    display:flex;justify-content:space-between;align-items:center;
    color:var(--blanco);font-family:var(--f-display);font-size:26px;
    background:none;border:none;cursor:pointer;text-align:left;width:100%;
    padding:0;
  }
  #panel-movil .mob-trigger .flecha{font-size:16px;transition:transform .3s;}
  #panel-movil .mob-sub{
    display:none;flex-direction:column;gap:10px;
    padding:14px 0 4px 18px;
    border-left:2px solid var(--dorado);
    margin-top:10px;
  }
  #panel-movil .mob-sub a{
    font-family:var(--f-cuerpo);font-size:16px;font-weight:500;
    color:rgba(255,255,255,.75);letter-spacing:.02em;
  }
  #panel-movil .mob-item.abierto .flecha{transform:rotate(180deg);}
  #panel-movil .mob-item.abierto .mob-sub{display:flex;}

  /* --- Modal de acceso (Aula Virtual / Biblioteca) --- */
  .modal-overlay{
    position:fixed;inset:0;z-index:3000;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
  }
  .modal-overlay.activo{opacity:1;visibility:visible;}
  .modal-caja{
    background:var(--negro);
    border:1px solid rgba(255,255,255,.08);
    border-top:3px solid var(--dorado);
    border-radius:8px;
    padding:50px 44px;
    width:100%;max-width:420px;
    position:relative;
    transform:scale(.95) translateY(12px);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .modal-overlay.activo .modal-caja{transform:scale(1) translateY(0);}
  .modal-cerrar{
    position:absolute;top:18px;right:20px;
    background:none;border:none;color:rgba(255,255,255,.5);
    font-size:24px;cursor:pointer;transition:color .25s;
  }
  .modal-cerrar:hover{color:var(--blanco);}
  .modal-logo{
    width:64px;height:64px;border-radius:50%;
    object-fit:cover;display:block;margin:0 auto 24px;
  }
  .modal-titulo{
    font-family:var(--f-display);font-size:22px;
    color:var(--blanco);text-align:center;margin-bottom:6px;
  }
  .modal-subtitulo{
    font-size:13px;color:rgba(255,255,255,.5);
    text-align:center;margin-bottom:30px;letter-spacing:.04em;
  }
  .modal-campo{margin-bottom:18px;}
  .modal-campo label{
    display:block;font-size:12px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--dorado-claro);margin-bottom:8px;
  }
  .modal-campo input{
    width:100%;padding:13px 16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:4px;color:var(--blanco);
    font-family:var(--f-cuerpo);font-size:15px;
    outline:none;transition:border-color .25s;
  }
  .modal-campo input:focus{border-color:var(--dorado-oscuro);}
  .modal-campo input::placeholder{color:rgba(255,255,255,.3);}
  .modal-btn-acceso{
    width:100%;padding:15px;
    background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));
    color:var(--negro);font-weight:700;
    font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
    border:none;border-radius:4px;cursor:pointer;
    margin-top:8px;
    transition:opacity .25s, transform .25s;
  }
  .modal-btn-acceso:hover{opacity:.9;transform:translateY(-1px);}
  .modal-aviso{
    font-size:12px;color:rgba(255,255,255,.4);
    text-align:center;margin-top:18px;line-height:1.5;
  }
  .modal-aviso a{color:var(--dorado-claro);text-decoration:underline;}
  @media(max-width:460px){.modal-caja{padding:36px 24px;margin:0 16px;}}

  .modal-roles{display:flex;gap:6px;background:rgba(255,255,255,.05);border-radius:6px;padding:5px;margin-bottom:28px;}
  .modal-rol{flex:1;padding:10px 8px;border:none;background:none;border-radius:4px;font-family:var(--f-cuerpo);font-size:13px;font-weight:600;color:rgba(255,255,255,.55);cursor:pointer;transition:background .2s,color .2s;}
  .modal-rol.activo{background:var(--dorado);color:var(--negro);}
  .modal-rol:not(.activo):hover{color:var(--blanco);}

  .menu-cta{display:flex;align-items:center;gap:12px;}
  .btn-menu-movil{
    display:none;
    width:42px;height:42px;
    border:1px solid rgba(255,255,255,.4);
    border-radius:50%;
    align-items:center;justify-content:center;
    color:var(--blanco);
    font-size:18px;
  }

  /* Menú móvil desplegable */
  #panel-movil{
    position:fixed;inset:0;
    background:var(--negro);
    z-index:1100;
    display:flex;flex-direction:column;
    padding:32px;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  #panel-movil.abierto{transform:translateX(0);}
  #panel-movil .cerrar{align-self:flex-end;color:var(--blanco);font-size:28px;background:none;}
  #panel-movil ul{margin-top:50px;display:flex;flex-direction:column;gap:28px;}
  #panel-movil a{color:var(--blanco);font-family:var(--f-display);font-size:26px;}
  #panel-movil .menu-cta{margin-top:50px;flex-direction:column;align-items:stretch;}

  /* =================================================================
     4. HERO
     ================================================================= */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    color:var(--blanco);
    overflow:hidden;
    background:
      radial-gradient(ellipse 90% 70% at 70% 20%, rgba(169,30,34,.55), transparent 60%),
      linear-gradient(160deg, var(--rojo-brasa) 0%, var(--negro) 75%);
  }
  /* === REEMPLAZAR FOTO AQUÍ (fondo del hero) ===
     Tamaño recomendado: 2400x1500px o mayor, formato JPG optimizado.
     Sugerencia: foto de cocina/estudiantes en acción, con buena luz.
     Para usarla: descomenta la regla .hero-foto y coloca tu imagen
     en assets/hero.jpg, o cambia la ruta abajo. */
  .hero-foto{
    position:absolute; inset:0;
    background-image:
      linear-gradient(160deg, rgba(74,12,14,.58) 10%, rgba(15,11,10,.62) 90%),
      url('assets/hero.jpg');
    background-size:cover;
    background-position:center;
    opacity:1;
  }
  .hero-textura{
    position:absolute;inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.18;
    mix-blend-mode:overlay;
  }
  .hero-glow{
    position:absolute;
    width:700px;height:700px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,163,90,.14), transparent 70%);
    top:-200px;right:-150px;
    filter:blur(10px);
    animation:flotar 12s ease-in-out infinite;
  }
  @keyframes flotar{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-30px,40px);}
  }

  .hero-contenido{
    position:relative;z-index:2;
    width:100%;
    padding-top:40px;
  }
  .hero .ojo-titulo{color:var(--dorado-claro);margin-bottom:26px;justify-content:flex-start;}
  .hero h1{
    font-size:clamp(40px, 6.4vw, 92px);
    font-weight:700;
    margin-bottom:8px;
  }
  .hero h1 .marca-nombre{
    display:block;
    color:var(--dorado-claro);
    font-style:italic;
    font-weight:500;
  }
  .hero .lema{
    font-family:var(--f-cuerpo);
    font-size:15px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
    margin:26px 0 44px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.18);
    max-width:480px;
  }
  .hero-botones{display:flex;gap:18px;flex-wrap:wrap;}

  .hero-pie{
    position:absolute;bottom:38px;left:0;right:0;z-index:2;
  }
  .hero-pie .envoltorio{
    display:flex;justify-content:space-between;align-items:flex-end;
    flex-wrap:wrap;gap:18px;
  }
  .hero-datos{display:flex;gap:42px;flex-wrap:wrap;}
  .hero-dato{font-size:13px;color:rgba(255,255,255,.7);}
  .hero-dato strong{display:block;font-family:var(--f-display);font-size:26px;color:var(--blanco);font-weight:700;}
  .scroll-indicador{
    width:30px;height:48px;border:1.5px solid rgba(255,255,255,.4);
    border-radius:20px;position:relative;
  }
  .scroll-indicador::after{
    content:"";position:absolute;top:8px;left:50%;width:4px;height:8px;
    background:var(--dorado-claro);border-radius:4px;
    transform:translateX(-50%);
    animation:scrollpunto 1.8s ease infinite;
  }
  @keyframes scrollpunto{
    0%{top:8px;opacity:1;}
    70%{top:26px;opacity:0;}
    100%{top:8px;opacity:0;}
  }

  /* --- Variante de hero claro (foto luminosa, texto oscuro) --- */
  .hero-claro{
    color:var(--negro);
    background:linear-gradient(160deg, var(--crema) 0%, #fff 100%);
  }
  .hero-claro .hero-foto{
    background-image:
      linear-gradient(90deg, rgba(251,248,243,.98) 0%, rgba(251,248,243,.93) 30%, rgba(251,248,243,.62) 50%, rgba(251,248,243,.12) 70%, rgba(251,248,243,0) 86%),
      var(--hero-img, url('assets/hero-chef.jpg'));
    background-size:100% 100%, cover;
    background-position:0 0, center;
  }
  .hero-claro .ojo-titulo{color:var(--dorado-oscuro);}
  .hero-claro h1{color:var(--negro);}
  .hero-claro h1 .marca-nombre{color:var(--rojo);}
  .hero-claro .lema{color:var(--gris-texto);border-top-color:rgba(27,22,20,.14);}
  .hero-claro .hero-dato{color:var(--gris-texto);}
  .hero-claro .hero-dato strong{color:var(--negro);}
  .hero-claro .btn-contorno{border-color:rgba(27,22,20,.32);color:var(--negro);}
  .hero-claro .btn-contorno:hover{background:var(--negro);color:#fff;border-color:var(--negro);}
  .hero-claro .btn-fantasma{color:var(--gris-texto);border-color:rgba(27,22,20,.28);}
  .hero-claro .btn-fantasma:hover{color:var(--rojo);border-color:var(--rojo);}
  .hero-claro .scroll-indicador{border-color:rgba(27,22,20,.28);}
  .hero-claro .hero-glow{
    width:820px;height:820px;top:-220px;right:-180px;
    background:radial-gradient(circle, rgba(164,30,34,.26) 0%, rgba(164,30,34,.09) 42%, transparent 72%);
  }

  /* Encabezado transparente sobre el hero claro: texto oscuro hasta hacer scroll */
  header:has(~ .hero-claro):not(.scrolled) .menu-links > li > a{color:var(--negro);}
  header:has(~ .hero-claro):not(.scrolled) .menu-links > li > a:hover{color:var(--rojo);}
  header:has(~ .hero-claro):not(.scrolled) .flecha{color:var(--negro);}
  header:has(~ .hero-claro):not(.scrolled) .btn-menu-movil{color:var(--negro);border-color:rgba(27,22,20,.35);}
  header:has(~ .hero-claro):not(.scrolled) .logo-img-grande{box-shadow:0 4px 18px rgba(0,0,0,.18);}

  /* =================================================================
     5. SECCIONES GENERALES
     ================================================================= */
  section{position:relative;padding:120px 0;}
  .seccion-cabecera{max-width:680px;margin-bottom:64px;}
  .seccion-cabecera h2{font-size:clamp(30px,4vw,48px);margin-top:18px;}
  .seccion-cabecera p{margin-top:20px;font-size:17px;line-height:1.7;color:var(--gris-texto);}
  .seccion-clara{background:var(--crema);}
  .seccion-oscura{background:var(--negro);color:var(--blanco);}

  /* === Biblioteca digital Labtter === */
  .labtter-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;margin-top:8px;}
  .labtter-info h2{font-size:clamp(28px,3.6vw,44px);margin-top:16px;color:var(--blanco);}
  .labtter-info h2 em{color:var(--dorado-claro);font-style:italic;}
  .labtter-intro{margin-top:18px;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.72);max-width:48ch;}
  .labtter-lista{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:13px;}
  .labtter-lista li{position:relative;padding-left:24px;font-size:14.5px;color:rgba(255,255,255,.8);}
  .labtter-lista li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--dorado);border-radius:1px;}
  .labtter-acceso{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:36px 34px;}
  .labtter-acceso-titulo{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px;}
  .labtter-credencial{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:12px 14px;margin-bottom:12px;}
  .labtter-credencial-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45);width:76px;flex-shrink:0;}
  /* Excepción intencional a Fraunces/Inter: monoespaciada mejora legibilidad de usuario/clave */
  .labtter-credencial-valor{font-family:'Courier New',monospace;font-size:15px;letter-spacing:.02em;color:var(--blanco);flex:1;word-break:break-all;}
  .labtter-credencial button{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:6px;display:flex;border-radius:4px;transition:color .2s,background .2s;flex-shrink:0;}
  .labtter-credencial button:hover{color:var(--dorado-claro);background:rgba(255,255,255,.08);}
  .labtter-credencial button svg{width:16px;height:16px;}
  .labtter-copiado{color:var(--dorado-claro);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
  .labtter-btn{width:100%;margin-top:20px;}
  .labtter-nota{margin-top:16px;font-size:12px;color:rgba(255,255,255,.4);text-align:center;line-height:1.5;}

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
  .reveal.visible{opacity:1;transform:translateY(0);}

  /* =================================================================
     6. QUIÉNES SOMOS
     ================================================================= */
  .quienes{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center;}
  .quienes-imgs{position:relative;height:520px;}
  /* === REEMPLAZAR FOTO AQUÍ (Quiénes somos, imagen grande) ===
     Tamaño recomendado: 800x1000px (vertical), foto institucional/fachada o aula. */
  .qi-grande{
    position:absolute;top:0;left:0;width:78%;height:84%;
    border-radius:6px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
    background:linear-gradient(150deg,var(--rojo),var(--rojo-oscuro));
  }
  /* === REEMPLAZAR FOTO AQUÍ (Quiénes somos, imagen pequeña superpuesta) ===
     Tamaño recomendado: 480x480px (cuadrada), foto de estudiantes/docentes. */
  .qi-chica{
    position:absolute;bottom:0;right:0;width:54%;height:50%;
    border-radius:6px;overflow:hidden;
    border:8px solid var(--crema);
    box-shadow:0 24px 50px -18px rgba(0,0,0,.35);
    background:linear-gradient(150deg,var(--dorado),#8a6d2f);
  }
  .qi-badge{
    position:absolute;left:-22px;top:40%;
    background:var(--blanco);
    padding:18px 24px;
    border-radius:6px;
    box-shadow:0 20px 40px -16px rgba(0,0,0,.25);
    text-align:center;
    border-left:4px solid var(--dorado);
  }
  .qi-badge strong{display:block;font-family:var(--f-display);font-size:30px;font-weight:700;color:var(--rojo);}
  .qi-badge span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-texto);}

  .quienes-texto p{font-size:16.5px;line-height:1.85;color:var(--gris-texto);margin-bottom:20px;}
  .quienes-texto p:first-of-type{font-size:19px;color:var(--negro);font-weight:500;line-height:1.6;}

  /* =================================================================
     7. MISIÓN / VISIÓN
     ================================================================= */
  .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.08);}
  .mv-card{background:var(--negro);padding:64px 56px;position:relative;}
  .mv-card:first-child{background:linear-gradient(160deg,var(--rojo-oscuro),var(--rojo-brasa));}
  .mv-num{font-family:var(--f-display);font-size:14px;color:var(--dorado-claro);letter-spacing:.2em;margin-bottom:24px;display:block;}
  .mv-card h3{font-size:30px;color:var(--blanco);margin-bottom:22px;}
  .mv-card p{font-size:16px;line-height:1.85;color:rgba(255,255,255,.78);}

  /* =================================================================
     8. VALORES
     ================================================================= */
  .valores-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.06);}
  .valor-card{
    background:var(--blanco);
    padding:42px 30px;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .valor-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(0,0,0,.15);z-index:2;}
  .valor-icono{
    width:50px;height:50px;margin-bottom:22px;
    color:var(--rojo);
  }
  .valor-icono svg{width:100%;height:100%;}
  .valor-card h4{font-size:17px;margin-bottom:10px;}
  .valor-card p{font-size:14px;color:var(--gris-texto);line-height:1.6;}

  /* =================================================================
     9. FINALIDAD
     ================================================================= */
  .finalidad{
    background:linear-gradient(135deg,var(--rojo),var(--rojo-oscuro));
    color:var(--blanco);
    border-radius:8px;
    padding:70px;
    display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center;
    position:relative;
    overflow:hidden;
  }
  .finalidad::before{
    content:"";position:absolute;width:380px;height:380px;border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    top:-120px;right:-100px;
  }
  .finalidad::after{
    content:"";position:absolute;width:260px;height:260px;border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
    top:-60px;right:-40px;
  }
  .finalidad h2{font-size:clamp(26px,3.4vw,38px);position:relative;z-index:1;}
  .finalidad p{font-size:17px;line-height:1.85;color:rgba(255,255,255,.88);position:relative;z-index:1;}

  /* =================================================================
     10. FINES DEL INSTITUTO
     ================================================================= */
  .fines-lista{display:flex;flex-direction:column;}
  .fin-item{
    display:grid;grid-template-columns:90px 1fr;
    gap:30px;
    padding:34px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    align-items:start;
  }
  .fin-item:first-child{border-top:1px solid rgba(0,0,0,.08);}
  .fin-num{font-family:var(--f-display);font-size:34px;color:var(--dorado-oscuro);font-style:italic;}
  .fin-texto h4{font-size:19px;margin-bottom:8px;}
  .fin-texto p{color:var(--gris-texto);font-size:15.5px;line-height:1.7;}

  /* =================================================================
     11. CARRERA — GASTRONOMÍA (sección hero secundaria)
     ================================================================= */
  .gastro{
    background:var(--negro);
    color:var(--blanco);
    padding:0;
  }
  .gastro-top{
    padding:120px 0 80px;
  }
  .gastro-etiqueta{color:var(--dorado-claro);}
  .gastro-top h2{font-size:clamp(34px,5vw,64px);max-width:780px;margin-top:18px;}
  .gastro-top h2 em{color:var(--dorado-claro);font-style:italic;}
  .gastro-top > .envoltorio > p{max-width:600px;margin-top:24px;font-size:17px;line-height:1.8;color:rgba(255,255,255,.72);}

  .gastro-galeria{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2px;
  }
  /* === REEMPLAZAR FOTO AQUÍ (Galería de gastronomía, 4 imágenes) ===
     Tamaño recomendado: 600x750px cada una (vertical), platos/técnicas culinarias. */
  .gg-item{
    aspect-ratio:3/4;
    position:relative;
    overflow:hidden;
    background:linear-gradient(160deg,var(--rojo-oscuro),var(--negro));
  }
  .gg-item:nth-child(2){background:linear-gradient(160deg,#3a2c14,var(--negro));}
  .gg-item:nth-child(3){background:linear-gradient(160deg,var(--rojo),var(--rojo-brasa));}
  .gg-item:nth-child(4){background:linear-gradient(160deg,#5c4720,var(--negro));}
  .gg-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
  .gg-item:hover img{transform:scale(1.06);}
  .gg-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.75), transparent 55%);
    display:flex;align-items:flex-end;padding:26px;
  }
  .gg-overlay span{font-family:var(--f-display);font-size:18px;color:var(--blanco);font-style:italic;}

  .gastro-bloques{
    padding:100px 0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:50px;
  }
  .gb-item{padding-right:20px;}
  .gb-num{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--dorado-claro);text-transform:uppercase;display:block;margin-bottom:18px;}
  .gb-item h4{font-size:21px;color:var(--blanco);margin-bottom:14px;}
  .gb-item p{font-size:15px;color:rgba(255,255,255,.68);line-height:1.75;}

  /* =================================================================
     12. GALERÍA INSTITUCIONAL (masonry)
     ================================================================= */
  .masonry{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:170px;
    gap:14px;
  }
  /* === REEMPLAZAR FOTOS AQUÍ (Galería institucional — masonry, 7 espacios) ===
     Sube tus fotos de estudiantes, graduaciones, concursos, etc.
     Cada bloque .m-item es un espacio de foto; cambia el tamaño de
     grid-row con la clase m-alto si quieres variar proporciones. */
  .m-item{
    border-radius:6px;
    overflow:hidden;
    position:relative;
    background:linear-gradient(160deg,var(--rojo),var(--rojo-oscuro));
  }
  .m-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
  .m-item:hover img{transform:scale(1.08);}
  .m-alto{grid-row:span 2;}
  .m-item:nth-child(2){background:linear-gradient(160deg,var(--negro),#000);}
  .m-item:nth-child(3){background:linear-gradient(160deg,var(--dorado),#8a6d2f);}
  .m-item:nth-child(4){background:linear-gradient(160deg,var(--rojo-oscuro),var(--negro));}
  .m-item:nth-child(5){background:linear-gradient(160deg,#8a6d2f,var(--negro));}
  .m-item:nth-child(6){background:linear-gradient(160deg,var(--rojo),#8a6d2f);}
  .m-item:nth-child(7){background:linear-gradient(160deg,var(--negro),var(--rojo-oscuro));}
  .m-etiqueta{
    position:absolute;bottom:14px;left:14px;
    color:var(--blanco);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(0,0,0,.45);padding:6px 12px;border-radius:30px;
    backdrop-filter:blur(4px);
  }

  /* =================================================================
     13. LOGROS Y RECONOCIMIENTOS
     ================================================================= */
  .logros{
    display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  }
  .logro-card{
    background:var(--blanco);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 16px 40px -22px rgba(0,0,0,.18);
  }
  /* === REEMPLAZAR FOTO AQUÍ (Logros y reconocimientos, 3 imágenes) ===
     Tamaño recomendado: 700x500px, fotos de premiaciones/medallas/concursos. */
  .logro-img{
    height:230px;
    background:linear-gradient(160deg,var(--dorado-claro),var(--dorado));
    position:relative;
  }
  .logro-img:nth-of-type(odd){background:linear-gradient(160deg,var(--rojo),var(--rojo-oscuro));}
  .logro-cuerpo{padding:28px 26px;}
  .logro-cuerpo h4{font-size:18px;margin-bottom:10px;}
  .logro-cuerpo p{font-size:14.5px;color:var(--gris-texto);line-height:1.65;}

  /* =================================================================
     14. COMUNIDAD EDUCATIVA
     ================================================================= */
  .comunidad{
    display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;
  }
  /* === REEMPLAZAR FOTO AQUÍ (Comunidad educativa, imagen principal) ===
     Tamaño recomendado: 1000x750px, foto grupal de estudiantes y docentes. */
  .comunidad-foto{
    border-radius:8px;
    aspect-ratio:4/3;
    background:linear-gradient(150deg,var(--rojo),var(--negro));
    position:relative;
    overflow:hidden;
    box-shadow:0 30px 60px -24px rgba(0,0,0,.3);
  }
  .comunidad-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:40px;background:rgba(0,0,0,.07);}
  .c-stat{background:var(--crema);padding:30px 10px 30px 0;}
  .c-stat strong{font-family:var(--f-display);font-size:38px;font-weight:700;color:var(--rojo);display:block;}
  .c-stat span{font-size:13px;color:var(--gris-texto);}

  /* =================================================================
     15. MODALIDAD
     ================================================================= */
  .modalidad{
    display:grid;grid-template-columns:.9fr 1.1fr;
    background:var(--blanco);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.18);
  }
  .modalidad-panel{
    background:linear-gradient(165deg,var(--negro),#000);
    color:var(--blanco);
    padding:70px 60px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .modalidad-panel .ojo-titulo{color:var(--dorado-claro);}
  .modalidad-panel h3{font-size:30px;color:var(--blanco);margin:18px 0 20px;}
  .modalidad-panel p{color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.8;}
  .modalidad-tag{
    margin-top:30px;display:inline-flex;align-items:center;gap:10px;
    border:1px solid rgba(201,163,90,.5);border-radius:30px;
    padding:10px 20px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dorado-claro);
    width:fit-content;
  }
  .modalidad-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dorado);}
  /* === REEMPLAZAR FOTO AQUÍ (Modalidad presencial) ===
     Tamaño recomendado: 900x700px, foto de aula/taller en uso. */
  .modalidad-foto{
    background:linear-gradient(150deg,var(--rojo-oscuro),var(--rojo));
    position:relative;
  }

  /* =================================================================
     16. CONTACTO
     ================================================================= */
  .contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
  .contacto-lista{display:flex;flex-direction:column;gap:30px;margin-top:36px;}
  .contacto-item{display:flex;gap:20px;align-items:flex-start;}
  .contacto-icono{
    width:46px;height:46px;flex:none;
    border-radius:50%;
    background:rgba(169,30,34,.08);
    color:var(--rojo);
    display:flex;align-items:center;justify-content:center;
  }
  .contacto-icono svg{width:20px;height:20px;}
  .contacto-item h4{font-size:15px;margin-bottom:5px;letter-spacing:.02em;}
  .contacto-item p, .contacto-item a{font-size:15px;color:var(--gris-texto);line-height:1.6;}
  .contacto-item a:hover{color:var(--rojo);}
  .redes-fila{display:flex;gap:14px;margin-top:10px;}
  .red-btn{
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;
    color:var(--negro);
    transition:all .3s ease;
  }
  .red-btn:hover{background:var(--rojo);color:var(--blanco);border-color:var(--rojo);transform:translateY(-3px);}
  .red-btn svg{width:18px;height:18px;}

  /* === Mapa: el iframe ya apunta a Jr. Libertad 473, Huamanga, Ayacucho === */
  .mapa-caja{
    border-radius:8px;overflow:hidden;
    box-shadow:0 30px 60px -26px rgba(0,0,0,.22);
    aspect-ratio:4/3.4;
    border:6px solid var(--blanco);
  }
  .mapa-caja iframe{width:100%;height:100%;border:0;filter:saturate(.85);}

  /* =================================================================
     17. FOOTER
     ================================================================= */
  footer{
    background:var(--negro);
    color:rgba(255,255,255,.7);
    padding:90px 0 0;
  }
  .footer-grid{
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:70px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-marca{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  /* === REEMPLAZAR LOGO AQUÍ (footer) === */
  .footer-marca img{width:50px;height:50px;border-radius:50%;object-fit:cover;}
  .footer-logo-grande{width:78px;height:78px;}
  .footer-marca strong{font-family:var(--f-display);font-size:17px;color:var(--blanco);display:block;}
  .footer-marca span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dorado-claro);}
  .footer-col h5{
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--blanco);margin-bottom:22px;
  }
  .footer-col ul{display:flex;flex-direction:column;gap:13px;}
  .footer-col a{font-size:14.5px;transition:color .3s ease;}
  .footer-col a:hover{color:var(--dorado-claro);}
  .footer-lema{
    font-family:var(--f-display);font-style:italic;
    font-size:15px;color:rgba(255,255,255,.55);
    max-width:260px;margin-top:18px;
  }
  .footer-base{
    padding:26px 0;
    display:flex;justify-content:space-between;align-items:center;
    font-size:12.5px;color:rgba(255,255,255,.4);
    flex-wrap:wrap;gap:10px;
  }

  /* =================================================================
     18. WHATSAPP FLOTANTE
     ================================================================= */
  .whatsapp-flotante{
    position:fixed;bottom:28px;right:28px;z-index:900;
    width:60px;height:60px;border-radius:50%;
    background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
    transition:transform .3s ease;
  }
  .whatsapp-flotante:hover{transform:scale(1.08);}
  .whatsapp-flotante svg{width:30px;height:30px;fill:var(--blanco);}
  .whatsapp-pulso{
    position:absolute;inset:0;border-radius:50%;
    border:2px solid #25D366;
    animation:pulso 2.2s ease-out infinite;
  }
  @keyframes pulso{
    0%{transform:scale(1);opacity:.7;}
    100%{transform:scale(1.7);opacity:0;}
  }

  /* =================================================================
     19. RESPONSIVE
     ================================================================= */
  @media (max-width:1080px){
    .menu-links{display:none;}
    .btn-menu-movil{display:flex;}
    .logo-img-grande{width:90px;height:90px;}
    header.scrolled .logo-img-grande{width:74px;height:74px;}
    .hero-claro .hero-foto{background-position:0 0, 72% center;}
    .quienes{grid-template-columns:1fr;gap:60px;}
    .quienes-imgs{height:420px;}
    .mv-grid{grid-template-columns:1fr;}
    .valores-grid{grid-template-columns:repeat(2,1fr);}
    .finalidad{grid-template-columns:1fr;padding:50px;}
    .gastro-bloques{grid-template-columns:1fr;gap:36px;}
    .gastro-galeria{grid-template-columns:repeat(2,1fr);}
    .masonry{grid-template-columns:repeat(2,1fr);}
    .logros{grid-template-columns:1fr;}
    .comunidad{grid-template-columns:1fr;gap:40px;}
    .modalidad{grid-template-columns:1fr;}
    .modalidad-foto{min-height:280px;}
    .contacto-grid{grid-template-columns:1fr;gap:50px;}
    .labtter-grid{grid-template-columns:1fr;gap:40px;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
    #admision .envoltorio > div,
    #biblioteca .envoltorio > div{grid-template-columns:1fr;gap:50px;}
    /* Rescate: cualquier grilla armada con estilo inline (3 o 4 columnas)
       baja a 2 columnas en tablet, en vez de quedarse apretada. */
    [style*="display:grid"][style*="grid-template-columns"]{
      grid-template-columns:repeat(2,1fr) !important;
    }
    [style*="display:grid"][style*="grid-template-columns"] > *{min-width:0;}
  }
  @media (max-width:640px){
    .envoltorio{padding:0 20px;}
    .labtter-acceso{padding:28px 22px;}
    .labtter-credencial-label{width:60px;font-size:10.5px;}
    .logo-img-grande{width:76px;height:76px;}
    header.scrolled .logo-img-grande{width:64px;height:64px;}
    section{padding:80px 0;}
    .hero{min-height:auto;flex-direction:column;padding-top:120px;padding-bottom:40px;}
    .hero-contenido{padding-top:0;width:100%;}
    .hero-botones{flex-direction:column;align-items:stretch;}
    .hero-pie{position:static;margin-top:56px;width:100%;}
    .hero-pie .envoltorio{display:block;}
    .hero-datos{display:flex;flex-direction:column;gap:18px;width:100%;}
    .hero-dato{width:100%;}
    .scroll-indicador{display:none;}
    .valores-grid{grid-template-columns:1fr;}
    .finalidad{padding:36px;}
    .gastro-galeria{grid-template-columns:repeat(2,1fr);}
    .masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px;}
    .footer-grid{grid-template-columns:1fr;}
    .qi-badge{left:0;}
    /* Rescate: cualquier grilla armada con estilo inline pasa a 1 columna
       en celular, sin importar cuántas columnas haya pedido el inline. */
    [style*="display:grid"][style*="grid-template-columns"]{
      grid-template-columns:1fr !important;
    }
    [style*="display:grid"][style*="grid-template-columns"] > *{min-width:0;}
    .btn{white-space:normal;text-align:center;}
  }