/* Preparatoria José Vasconcelos · sitio público
   Marino y naranja del logo; Archivo condensada para titulares, Newsreader para leer. */
:root {
  --marino: #12234A;
  --marino-2: #1C3366;
  --naranja: #F5821F;
  --naranja-tinta: #B4560C;   /* naranja para texto sobre blanco (contraste AA) */
  --papel: #FFFFFF;
  --niebla: #EEF2F8;
  --tinta: #16203A;
  --gris: #556079;
  --oro: #E9A92B;             /* solo en la sección de los Linces */
  --linea: #D7DEEA;
  --whats: #1F8F4E;

  --f-tit: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-txt: "Newsreader", Georgia, "Times New Roman", serif;
  --ancho: 1180px;
  --gutter: 20px;
  --radio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-txt); font-size: 1.125rem; line-height: 1.6;
  font-optical-sizing: auto; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--f-tit); font-stretch: 78%; font-weight: 800;
  line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 .5em; text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 6vw, 3.4rem); color: var(--marino); }
h3 { font-size: 1.7rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--papel); padding: 8px 14px; }
.saltar:focus { left: 8px; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: 72px 0; }
.entrada { font-size: 1.25rem; line-height: 1.55; max-width: 62ch; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-family: var(--f-tit); font-stretch: 90%; font-weight: 700; font-size: 1.02rem; line-height: 1.15;
  text-decoration: none; text-align: center; border: 2px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-naranja { background: var(--naranja); color: var(--marino); }
.btn-naranja:hover { background: #FF9640; }
.btn-marino { background: var(--marino); color: var(--papel); }
.btn-marino:hover { background: var(--marino-2); }
.btn-linea { border-color: var(--marino); color: var(--marino); }
.btn-linea:hover { background: var(--marino); color: var(--papel); }
.btn-linea-claro { border-color: rgba(255,255,255,.55); color: var(--papel); }
.btn-linea-claro:hover { border-color: var(--papel); background: rgba(255,255,255,.08); }
.btn-whats { background: var(--whats); color: var(--papel); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 50; background: var(--marino); color: var(--papel); }
.barra-in { max-width: var(--ancho); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca img { height: 42px; width: auto; }
.menu { display: none; }
.barra-pagar { display: none; }
.hamburguesa {
  margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.hamburguesa span { display: block; width: 24px; height: 2.5px; background: var(--papel); border-radius: 2px; transition: transform .2s, opacity .2s; }
.barra.abierto .hamburguesa span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.barra.abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.barra.abierto .hamburguesa span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.barra.abierto .menu {
  display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--marino); padding: 8px var(--gutter) 20px; border-top: 1px solid rgba(255,255,255,.12);
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.menu a {
  font-family: var(--f-tit); font-stretch: 90%; font-weight: 600; font-size: 1.15rem;
  color: var(--papel); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.menu a:hover { color: var(--naranja); }
.menu .menu-pagar { color: var(--naranja); border-bottom: 0; }

/* ---------- portada ---------- */
.portada { background: var(--marino); color: var(--papel); padding: 36px 0 0; overflow: hidden; }
.portada-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 32px; }
.portada-pre { font-family: var(--f-tit); font-stretch: 90%; font-weight: 600; color: var(--naranja); font-size: 1.02rem; margin-bottom: 14px; }
.portada h1 {
  font-size: clamp(2.9rem, 12.5vw, 6.2rem); font-stretch: 70%; font-weight: 850; line-height: .94; margin-bottom: 22px; color: var(--papel);
}
.portada-sub { font-size: 1.2rem; color: #D6DDEC; max-width: 46ch; }
.portada-foto { margin: 0; position: relative; }
.portada-foto img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 140px 18px 18px 18px;     /* la curva del logo */
}
.portada-foto::after {                      /* la bolita naranja del logo */
  content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: var(--naranja); right: 18px; top: -22px;
}
.datos {
  list-style: none; margin: 40px auto 0; padding: 0; max-width: var(--ancho);
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid rgba(255,255,255,.14);
}
.datos li { padding: 18px var(--gutter); border-bottom: 1px solid rgba(255,255,255,.14); display: grid; gap: 2px; }
.datos b { font-family: var(--f-tit); font-stretch: 80%; font-weight: 800; font-size: 1.5rem; color: var(--papel); }
.datos span { color: #B9C3D8; font-size: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .portada-texto > * { animation: sube .7s cubic-bezier(.2,.7,.2,1) both; }
  .portada-texto > :nth-child(2) { animation-delay: .08s; }
  .portada-texto > :nth-child(3) { animation-delay: .16s; }
  .portada-texto > :nth-child(4) { animation-delay: .24s; }
  .portada-foto::after { animation: cae .9s cubic-bezier(.3,1.5,.5,1) .35s both; }
}
@keyframes sube { from { opacity: 0; transform: translateY(14px); } }
@keyframes cae { from { opacity: 0; transform: translateY(-60px) scale(.6); } }

/* ---------- la escuela ---------- */
.dos-col { display: grid; gap: 40px; }
.razones { margin: 28px 0 0; display: grid; gap: 0; }
.razones div { padding: 16px 0 16px 30px; border-top: 1px solid var(--linea); position: relative; }
.razones div::before { content: ""; position: absolute; left: 4px; top: 25px; width: 12px; height: 12px; border-radius: 50%; background: var(--naranja); }
.razones dt { font-family: var(--f-tit); font-stretch: 85%; font-weight: 750; font-size: 1.25rem; color: var(--marino); }
.razones dd { margin: 2px 0 0; color: var(--gris); }
.mision { margin-top: 20px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.mision summary {
  cursor: pointer; padding: 16px 0; font-family: var(--f-tit); font-stretch: 85%; font-weight: 700; font-size: 1.15rem; color: var(--naranja-tinta);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.mision summary::-webkit-details-marker { display: none; }
.mision summary::after { content: "+"; font-size: 1.6rem; line-height: 1; transition: transform .2s; }
.mision[open] summary::after { transform: rotate(45deg); }
.mision p { font-size: 1.05rem; color: var(--gris); }
.collage { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 12px; align-content: start; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.collage .c1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.collage .c2 { aspect-ratio: 3 / 4; }
.collage .c3 { aspect-ratio: 3 / 4; border-radius: var(--radio) var(--radio) 90px var(--radio); }

/* ---------- plan de estudios ---------- */
.plan { background: var(--niebla); }
.ruta { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ruta li { background: var(--marino); color: var(--papel); padding: 14px 10px 12px; display: grid; gap: 2px; }
.ruta li:first-child { border-radius: 12px 0 0 12px; }
.ruta .espec { grid-column: 1 / -1; background: var(--naranja); color: var(--marino); border-radius: 12px; }
.ruta li:nth-child(4) { border-radius: 0 12px 12px 0; }
.ruta .sem { font-family: var(--f-tit); font-stretch: 75%; font-weight: 850; font-size: 1.9rem; line-height: 1; }
.ruta .tipo { font-family: var(--f-tit); font-stretch: 90%; font-weight: 600; font-size: .92rem; opacity: .85; }
.ruta .espec .tipo { opacity: 1; }
.areas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.areas li { background: var(--papel); border-left: 6px solid var(--naranja); border-radius: 0 12px 12px 0; padding: 16px 18px; display: grid; gap: 2px; }
.areas b { font-family: var(--f-tit); font-stretch: 82%; font-weight: 800; font-size: 1.3rem; color: var(--marino); line-height: 1.15; }
.areas span { color: var(--gris); font-size: 1rem; }

/* ---------- costos ---------- */
.fichas { display: grid; gap: 20px; margin-top: 28px; }
.ficha { border-radius: 20px; padding: 28px 24px; }
.ficha-prepa { background: var(--marino); color: var(--papel); }
.ficha-prepa h3 { color: var(--papel); }
.ficha-curso { background: var(--papel); border: 2px solid var(--marino); }
.ficha-curso h3 { color: var(--marino); }
.ficha-nota { font-family: var(--f-tit); font-stretch: 90%; font-weight: 600; margin-top: -.3em; }
.ficha-prepa .ficha-nota { color: var(--naranja); }
.ficha-curso .ficha-nota { color: var(--naranja-tinta); }
.precios { margin: 18px 0 18px; }
.precios div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed currentColor; }
.ficha-prepa .precios div { border-color: rgba(255,255,255,.3); }
.ficha-curso .precios div { border-color: var(--linea); }
.precios dt { font-size: 1.05rem; }
.precios dd { margin: 0; font-family: var(--f-tit); font-stretch: 78%; font-weight: 800; font-size: 1.7rem; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.ficha-prepa .precios dd { color: var(--papel); }
.ficha-curso .precios dd { color: var(--marino); }
.ficha-curso .precios div:last-child dd { font-size: 1.2rem; }
.ficha-prepa .btn-linea { border-color: rgba(255,255,255,.6); color: var(--papel); }
.ficha-prepa .btn-linea:hover { background: var(--papel); color: var(--marino); }
.ficha-curso > p { font-size: 1.05rem; color: var(--gris); }
.horario { font-weight: 600; color: var(--tinta) !important; }
.aclaracion { margin-top: 18px; font-size: .98rem; color: var(--gris); }

/* ---------- becas ---------- */
.becas { background: var(--marino); color: var(--papel); overflow: hidden; }
.becas h2 { color: var(--papel); }
.becas .entrada { color: var(--papel); }
.becas p { color: #D6DDEC; }
.becas-in { display: grid; gap: 8px; align-items: center; }
.becas-cifra {
  font-family: var(--f-tit); font-stretch: 62%; font-weight: 900; color: var(--naranja);
  font-size: clamp(7rem, 40vw, 15rem); line-height: .82; letter-spacing: -0.03em;
}
.tipos-beca { list-style: none; padding: 0; margin: 4px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.tipos-beca li { font-family: var(--f-tit); font-stretch: 90%; font-weight: 600; font-size: .98rem; padding: 6px 14px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; }

/* ---------- cultura ---------- */
.talleres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.talleres figure, .galeria figure { margin: 0; position: relative; }
.talleres img, .galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio); }
.talleres .t-grande { grid-column: 1 / -1; }
.talleres .t-grande img { aspect-ratio: 16 / 9; }
.talleres figcaption, .galeria figcaption {
  position: absolute; left: 10px; bottom: 10px; background: var(--papel); color: var(--marino);
  font-family: var(--f-tit); font-stretch: 88%; font-weight: 700; font-size: .95rem; padding: 4px 12px; border-radius: 999px;
}
.lista-talleres { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lista-talleres li {
  font-family: var(--f-tit); font-stretch: 75%; font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--marino); line-height: 1.15;
  display: inline-flex; align-items: center; gap: 10px;
}
.lista-talleres li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); flex: none; }
.talleres .t-extra { display: none; }

/* ---------- deportes ---------- */
.deportes { background: #0E1A38; color: var(--papel); position: relative; overflow: hidden; }
.deportes::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--oro); }
.deportes-in { display: grid; gap: 28px; align-items: center; }
.deportes h2 { color: var(--oro); }
.deportes .entrada { color: #D6DDEC; }
.lince { width: min(200px, 60%); }
.disciplinas { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 0; }
.disciplinas li {
  font-family: var(--f-tit); font-stretch: 72%; font-weight: 850; font-size: clamp(1.9rem, 8vw, 2.8rem); line-height: 1.1;
  padding: 8px 0; border-bottom: 2px solid rgba(233,169,43,.35);
}
.deportes-foto { margin: 0; }
.deportes-foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio); border: 3px solid var(--oro); }

/* ---------- instalaciones ---------- */
.panorama { margin: 30px 0; position: relative; }
.panorama img { width: 100%; height: clamp(200px, 38vw, 460px); object-fit: cover; }
.panorama figcaption {
  position: absolute; left: var(--gutter); bottom: 14px; background: var(--papel); color: var(--marino);
  font-family: var(--f-tit); font-stretch: 88%; font-weight: 700; font-size: .95rem; padding: 4px 12px; border-radius: 999px;
}
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galeria .g-ancha { grid-column: 1 / -1; }
.galeria .g-ancha img { aspect-ratio: 16 / 7; }

/* ---------- contacto ---------- */
.contacto { background: var(--niebla); }
.contacto-in { display: grid; gap: 30px; }
address { font-style: normal; }
.dir { font-size: 1.3rem; line-height: 1.45; color: var(--marino); }
address a { color: var(--marino); text-decoration-color: var(--naranja); text-underline-offset: 3px; overflow-wrap: anywhere; }
.redes { margin-top: 22px; display: flex; gap: 22px; }
.redes a { font-family: var(--f-tit); font-stretch: 90%; font-weight: 700; color: var(--naranja-tinta); }
.mapa iframe { width: 100%; height: 340px; border: 0; border-radius: 18px; display: block; background: var(--linea); }

/* ---------- pie ---------- */
.pie { background: var(--marino); color: #C7D0E2; padding: 40px 0 120px; font-size: 1rem; }
.pie-in { display: grid; gap: 22px; }
.pie img { width: 170px; }
.pie-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-links a { color: var(--papel); }

/* ---------- barra inferior en celular ---------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--papel); border-top: 1px solid var(--linea);
}
.barra-movil .btn { padding: 10px 12px; font-size: .98rem; }

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  :root { --gutter: 32px; }
  .seccion { padding: 96px 0; }
  .datos { grid-template-columns: repeat(3, 1fr); padding: 0 var(--gutter); }
  .datos li { padding: 22px 20px 26px 0; border-bottom: 0; }
  .datos li + li { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.14); }
  .areas { grid-template-columns: 1fr 1fr; }
  .fichas { grid-template-columns: 1fr 1fr; align-items: start; }
  .ficha { padding: 34px 32px; }
  .talleres { grid-template-columns: repeat(3, 1fr); }
  .talleres .t-grande { grid-column: 1 / -1; }
  .talleres .t-extra { display: block; }
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria .g-ancha { grid-column: span 2; }
  .galeria .g-ancha img { aspect-ratio: auto; height: 100%; }
  .mapa iframe { height: 100%; min-height: 380px; }
}

/* ---------- escritorio ---------- */
@media (min-width: 1000px) {
  html { scroll-padding-top: 84px; }
  .portada { padding-top: 64px; }
  .portada-in { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; }
  .portada-foto img { border-radius: 220px 22px 22px 22px; }
  .portada-foto::after { width: 74px; height: 74px; right: 28px; top: -30px; }
  .datos { margin-top: 64px; }
  .dos-col { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
  .collage { position: sticky; top: 110px; }
  .ruta { grid-template-columns: repeat(4, 1fr) 1.7fr; }
  .ruta li { padding: 22px 18px 18px; }
  .ruta li:nth-child(4) { border-radius: 0; }
  .ruta .espec { grid-column: auto; border-radius: 0 12px 12px 0; }
  .ruta .sem { font-size: 2.6rem; }
  .areas { grid-template-columns: repeat(4, 1fr); }
  .becas-in { grid-template-columns: auto 1fr; gap: 56px; }
  .talleres { grid-template-columns: 2fr 1fr 1fr 1fr; grid-auto-rows: 300px; }
  .talleres .t-grande { grid-column: auto; }
  .talleres img, .talleres .t-grande img { aspect-ratio: auto; height: 100%; }
  .deportes-in { grid-template-columns: 220px 1fr 1.1fr; gap: 44px; }
  .lince { width: 100%; }
  .contacto-in { grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: stretch; }
  .pie { padding-bottom: 40px; }
  .pie-in { grid-template-columns: auto 1fr; align-items: center; gap: 40px; }
  .barra-movil { display: none; }
}

@media (min-width: 1100px) {
  .barra-in { min-height: 76px; }
  .marca img { height: 50px; }
  .hamburguesa { display: none; }
  .menu { display: flex; gap: 22px; margin-left: auto; }
  .menu a { font-size: 1rem; padding: 6px 0; border: 0; }
  .menu .menu-pagar { display: none; }
  .barra-pagar { display: inline-flex; }
}