/* ============================================================
   PROPUESTA B — registro institucional
   Archivo de trabajo. NO es el sitio en produccion.
   Cambios de fondo respecto de estilo.css:
     · una sola familia (sans), sin serif editorial ni monoespaciada
     · azul petroleo institucional en vez de cobre/naranja
     · sin rotulos en mayusculas espaciadas ni reglitas de acento
     · sin puntos de color en las listas
     · sin iconos por materia
     · retrato real y con peso, como en las fichas de estudio
   ============================================================ */

:root{
  --marca:#1C4B5C;
  --marca-osc:#12333F;
  --tinta:#23292B;
  --tinta-2:#5C666A;
  --papel:#FFFFFF;
  --papel-2:#F2F5F6;
  --filete:#DCE2E4;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{color-scheme:light; -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--marca)}

.saltar{position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--marca); color:#FFF; padding:.7rem 1.1rem}
.saltar:focus{left:0}

/* Una sola caja para todo el sitio. Con 1120 px centrados, en un monitor de
   1538 quedaban mas de 200 px muertos a cada lado. Al ensanchar hay que
   repartir lo ganado dentro de cada seccion (retrato mas grande, tres
   columnas de materias), o el espacio solo se corre hacia la derecha. */
.limite{max-width:1440px; margin:0 auto; padding:0 clamp(24px,3.2vw,52px)}

/* ---------- Barra, sobre el video ----------
   Una sola banda arriba, con el mismo tratamiento que la tira de materias
   del pie de la portada: negro translucido, desenfoque y una linea clara de
   separacion. El video llega hasta el borde superior y se ve pasando por
   detras. Nada de esto puede ser opaco: eso es justamente lo que se busca. */
.barra{
  position:relative; z-index:3; flex:none;
  background:rgba(7,20,26,.52);
  backdrop-filter:blur(3px);
  border-bottom:1px solid rgba(255,255,255,.20);
}

/* ---------- Barra ---------- */
.barra .limite{display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:68px}
.barra__marca{text-decoration:none; line-height:1.25}
.barra__rotulo{display:block; font-size:1.02rem; font-weight:600; color:#FFFFFF}
.barra__lugar{display:block; font-size:.78rem; color:#BACAD0}
.barra__nav{display:flex; align-items:center; gap:10px; font-size:.88rem}
.barra__nav > a{
  color:#EAF0F2; text-decoration:none;
  border:1px solid rgba(255,255,255,.38); border-radius:2px; padding:8px 15px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.barra__nav > a:hover{color:#FFFFFF; border-color:#FFFFFF; background:rgba(255,255,255,.14)}
.barra__nav > a:focus-visible{outline:2px solid #FFF; outline-offset:2px}
.barra__idioma{display:flex; gap:6px; align-items:center; font-size:.82rem;
  color:#BACAD0; white-space:nowrap;
  padding-left:22px; border-left:1px solid rgba(255,255,255,.28)}
.barra__idioma b{color:#FFFFFF}
.barra__idioma a{color:#D5DFE2; text-decoration:none}
.barra__idioma a:hover{color:#FFFFFF; text-decoration:underline}
.barra__idioma a:focus-visible{outline:2px solid #FFF; outline-offset:3px}
@media (max-width:820px){
  /* En celular la barra se queda con el rotulo y el idioma. El contacto lo
     da el boton de la portada y las materias, la tira de abajo. El ">"
     importa: sin el, esta regla tambien esconderia el "EN". */
  .barra__nav > a{display:none}
  .barra .limite{min-height:60px}
}

/* ---------- Portada con video ----------
   Sin poster: mientras llega el MP4 se ve un azul plano, no una foto.
   Asi desaparece el salto de imagen fija a video. */
/* Casi la pantalla completa, como en el sitio actual: con el cuadro mas alto
   el recorte del video deja ver los cerros del fondo. Los 48 px que se restan
   son a proposito, para que asome la tira de materias y se note que sigue. */
/* La tira de materias vive DENTRO de la portada, al pie y sobre el video,
   como en el sitio actual. Es lo que le da piso al titular: sin ella, en un
   monitor alto el texto quedaba flotando en medio del cuadro con aire por
   los cuatro costados. Con la tira abajo, el sobrante se va todo arriba,
   donde el video es paisaje y no vacio. */
.portada{position:relative; background:var(--marca-osc); overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end}
.portada__texto{margin-top:auto}
/* En monitores altos el bloque queda muy abajo y se acumula campo vacio
   sobre el titular: se despega de la tira para subirlo. Bajo 640 px de alto
   no se aplica, porque ahi no hay aire que repartir y el texto terminaria
   apretado contra la barra. */
@media (min-height:640px){
  .portada__texto{margin-bottom:clamp(0px,11vh,120px)}
}
.portada__video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .9s ease}
.portada__video.listo{opacity:1}
.portada__velo{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,26,33,.42) 0%,rgba(10,26,33,.62) 55%,rgba(10,26,33,.80) 100%)}
.portada .limite{position:relative; z-index:2; width:100%}
/* El aire vertical es del bloque de texto, no de toda caja que caiga dentro
   de la portada: la barra tiene su propia altura. */
.portada__texto{padding-top:56px; padding-bottom:40px}
/* El tope en rem hacia que el titular quedara clavado en 47 px tanto en una
   pantalla de 1264 como en una de 1538, y en la grande se leia chico. El vh
   lo frena en monitores anchos pero bajos, donde si no se come la portada. */
.portada h1{
  margin:0; max-width:19ch; color:#FFFFFF; font-weight:400;
  font-size:min(clamp(1.85rem,4.2vw,4rem),9vh); line-height:1.2; letter-spacing:-.012em;
}
.portada__bajada{margin:20px 0 0; max-width:52ch; color:#D8E2E5;
  font-size:clamp(1rem,1.35vw,1.22rem)}
.portada__acciones{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:30px}
.portada__acciones a{color:#E6EDEF; text-decoration:none; font-size:.95rem}
.portada__acciones a:hover{text-decoration:underline}
.boton{
  display:inline-block; font:inherit; font-size:.95rem; cursor:pointer;
  background:var(--marca); color:#FFF; border:1px solid var(--marca);
  padding:12px 26px; text-decoration:none;
}
.boton:hover{background:var(--marca-osc); border-color:var(--marca-osc)}
.boton:focus-visible{outline:2px solid #FFF; outline-offset:2px}
@media (max-width:640px){
  .portada__texto{padding-top:56px; padding-bottom:40px}
}

/* Monitores anchos pero bajos (tipicos con la barra de tareas y el navegador
   comiendose la pantalla): el encabezado, el texto y la tira no caben en una
   pantalla y la tira se salia por abajo. Se recupera el alto apretando el
   aire, que es lo unico que sobra ahi. */
@media (max-height:620px){
  .portada__texto{padding-top:30px; padding-bottom:26px}
  .barra .limite{min-height:60px}
}

/* ---------- Tira de materias, al pie de la portada ---------- */
.tira{position:relative; z-index:2; flex:none;
  background:rgba(7,20,26,.52); border-top:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(3px);
}
.tira .limite{display:flex; flex-wrap:wrap; gap:6px 24px;
  padding-top:15px; padding-bottom:15px; font-size:.88rem}
.tira a{color:#D5DFE2; text-decoration:none}
.tira a:hover{color:#FFFFFF; text-decoration:underline}
.tira a:focus-visible{outline:2px solid #FFF; outline-offset:3px}
@media (max-width:700px){
  /* Nueve materias en un celular ocupan cuatro lineas y se comen la
     portada. Se dejan en una sola linea corrible. */
  .tira .limite{flex-wrap:nowrap; overflow-x:auto; gap:20px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .tira .limite::-webkit-scrollbar{display:none}
  .tira a{white-space:nowrap}
}

/* ---------- Secciones ---------- */
.seccion{padding:64px 0}
.seccion--alt{background:var(--papel-2); border-top:1px solid var(--filete);
  border-bottom:1px solid var(--filete)}
.seccion__titulo{
  margin:0 0 34px; font-size:1.32rem; font-weight:600; color:var(--marca-osc);
  padding-bottom:12px; border-bottom:1px solid var(--filete);
}

/* ---------- Perfil ---------- */
.perfil{display:grid; grid-template-columns:1fr; gap:36px}
@media (min-width:900px){.perfil{grid-template-columns:320px minmax(0,1fr); gap:56px}}
@media (min-width:1300px){.perfil{grid-template-columns:370px minmax(0,1fr); gap:72px}}
.perfil__retrato{margin:0}
/* Sin aspect-ratio ni object-fit: la foto es 800x1000 y ya viene encuadrada.
   Cualquier recorte propio la descuadra. */
.perfil__retrato img{width:100%; height:auto}
.ficha{margin:24px 0 0; font-size:.92rem; line-height:1.85}
.ficha dt{font-weight:600; color:var(--marca-osc); font-size:.8rem; margin-top:14px}
.ficha dd{margin:0; color:var(--tinta-2)}
.ficha a{color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--filete)}
.ficha a:hover{color:var(--marca); border-color:var(--marca)}

.perfil__nombre{margin:0; font-size:1.72rem; font-weight:600; color:var(--marca-osc); line-height:1.2}
.perfil__cargo{margin:4px 0 22px; color:var(--tinta-2); font-size:1rem}
.perfil__texto p{margin:0 0 16px; max-width:74ch}
.perfil__texto h3{
  margin:32px 0 12px; font-size:1.02rem; font-weight:600; color:var(--marca-osc);
}
.detalle{list-style:none; margin:0; padding:0}
.detalle li{position:relative; padding:0 0 10px 20px; max-width:74ch}
.detalle li::before{content:"\2014"; position:absolute; left:0; color:#A9B5B9}
.detalle .anno{color:var(--tinta-2); font-variant-numeric:tabular-nums}
.enumeracion{margin:0; color:var(--tinta-2)}

/* ---------- Areas de practica ---------- */
.materias{display:grid; grid-template-columns:1fr; gap:30px 52px}
@media (min-width:820px){.materias{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Nueve materias en tres columnas dan tres filas exactas, sin celda suelta
   al final, y llenan el ancho que antes quedaba vacio a la derecha. */
@media (min-width:1240px){.materias{grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 56px}}
.materia h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 8px; font-size:1.05rem; font-weight:600; color:var(--marca-osc);
}
/* Los iconos vuelven, pero en el azul de marca y con el mismo trazo fino
   de siempre: acompanan al titulo, no compiten con el. */
.materia .marca{
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:var(--marca); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.materia p{margin:0; color:var(--tinta-2); font-size:.95rem; max-width:60ch}

/* ---------- Contacto ---------- */
.contacto{display:grid; grid-template-columns:1fr; gap:36px}
@media (min-width:900px){.contacto{grid-template-columns:320px minmax(0,1fr); gap:56px}}
@media (min-width:1300px){.contacto{grid-template-columns:370px minmax(0,1fr); gap:72px}}
.contacto__datos p{margin:0 0 14px; color:var(--tinta-2); font-size:.95rem}
.contacto__datos a{color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--filete)}
.contacto__datos a:hover{color:var(--marca); border-color:var(--marca)}
.contacto__datos .ficha{margin:0 0 26px}
.contacto__datos .ficha dt:first-of-type{margin-top:0}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid .full{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:.84rem; color:var(--tinta-2)}
.field input,.field textarea{
  font:inherit; font-size:.95rem; padding:11px 12px; border-radius:2px;
  border:1px solid #B4C0C4; background:#FFF; color:var(--tinta);
}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--marca);
  box-shadow:0 0 0 2px rgba(28,75,92,.12)}
form{display:flex; flex-direction:column; gap:18px}
.panel__send{
  font:inherit; font-size:.95rem; cursor:pointer; align-self:flex-start;
  background:var(--marca); color:#FFF; border:1px solid var(--marca);
  padding:12px 28px; border-radius:2px;
}
.panel__send:hover{background:var(--marca-osc); border-color:var(--marca-osc)}
.panel__send:disabled{opacity:.55; cursor:default}
.panel__status{margin:0; font-size:.92rem; background:var(--papel-2);
  border-left:3px solid var(--marca); padding:10px 14px}
.panel__status[hidden]{display:none}
.form-title{display:none}

/* Modal en celular; bloque normal en escritorio. Misma mecanica de contacto.js. */
#contacto{border:none; padding:0; width:100%; max-width:min(34rem,calc(100vw - 2rem));
  background:#FFF; color:var(--tinta); box-shadow:0 20px 60px rgba(10,26,33,.34)}
#contacto::backdrop{background:rgba(10,26,33,.68)}
.panel{padding:26px; display:flex; flex-direction:column; gap:16px}
.panel__head{display:flex; justify-content:flex-end; margin-bottom:-12px}
.panel__close{font:inherit; font-size:1.6rem; line-height:1; cursor:pointer;
  background:none; border:none; color:var(--tinta-2); padding:2px 6px}
.panel__note{margin:0; font-size:.86rem; color:var(--tinta-2)}
@media (min-width:900px){
  /* En escritorio el formulario deja de flotar sobre el blanco: va dentro de
     una tarjeta gris con filete. Sin ella la seccion se leia sin bordes y
     toda la parte baja de la pagina quedaba en un blanco continuo. */
  /* El formulario no crece con la caja: campos de 900 px para escribir un
     nombre se ven desproporcionados. */
  #contacto[open]{position:static; display:block; width:auto; max-width:760px;
    margin:0; box-shadow:none;
    background:var(--papel-2); border:1px solid var(--filete); padding:30px}
  #contacto::backdrop{background:transparent}
  .panel{padding:0; gap:18px}
  .panel__head,.panel__note,#abrir-contacto{display:none}
}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.pie{background:var(--marca-osc); color:#C4D2D7; padding:30px 0; font-size:.86rem}
.pie .limite{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between}
.pie a{color:#E3EBED}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}