/* Colegio Enrique Arreguín - sitio público.
   Mobile first: la base es el celular; @media (min-width: 600px) es tablet y (min-width: 960px) computadora.
   Colores del escudo: azul marino y rojo. El corte diagonal del escudo se repite en todo el sitio. */

:root {
  --navy: #14223d;
  --navy-2: #1d2f52;
  --navy-soft: #e9edf5;
  --red: #ad202d;
  --red-dark: #8f1a25;
  --red-light: #ff8a95;
  --ink: #171c26;
  --muted: #5a6273;
  --line: #dde2ea;
  --paper: #fbfbfc;
  --white: #ffffff;
  --gold: #b88a1b;
  --silver: #8a94a3;
  --bronze: #a0623a;
  --platinum: #6c7a8c;
  --ok: #1f7a4d;
  --ok-soft: #e5f3ec;
  --warn: #9a6200;
  --warn-soft: #fbf1dc;
  --bad-soft: #f8e6e8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 34, 61, .06), 0 8px 28px rgba(20, 34, 61, .08);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --diag: 160deg;           /* en celular la diagonal es suave */
}
@media (min-width: 960px) { :root { --diag: 112deg; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--ink); background: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-variant-numeric: lining-nums; }
p { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.serif { font-family: var(--serif); font-weight: 600; color: var(--navy); }
.muted { color: var(--muted); }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5vw, 52px); color: var(--navy); letter-spacing: -.015em; }
.sub { color: var(--muted); max-width: 60ch; margin-top: 14px; font-size: 17px; }
.eyebrow { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
section.block { padding: 64px 0; }
@media (min-width: 600px) { .wrap { padding: 0 20px; } }
@media (min-width: 960px) { section.block { padding: 88px 0; } }

/* ---------- Encabezado y menú ---------- */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; view-transition-name: encabezado; }
.top.small { box-shadow: 0 6px 24px rgba(20, 34, 61, .08); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 42px; }
.brand b { display: block; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--navy); }
.brand small { display: none; margin-top: 3px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu-btn { display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font-size: 20px; }
.nav { display: none; }
.nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; padding: 12px 16px 18px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(20, 34, 61, .18); }
.nav a { padding: 12px 14px; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 600; color: var(--muted); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--navy-soft); }
.nav .only-mobile { color: var(--red); }
.top .btn { display: none; }
@media (min-width: 600px) { .brand small { display: block; } }
@media (min-width: 960px) {
  .top .wrap { height: 68px; }
  .top.small .wrap { height: 58px; }
  .menu-btn, .nav .only-mobile { display: none; }
  .nav, .nav.open { display: flex; flex-direction: row; position: static; gap: 4px; margin-left: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav a { padding: 8px 12px; font-size: 14.5px; }
  .nav a:hover { color: var(--ink); background: var(--navy-soft); }
  .top .btn { display: inline-flex; padding: 10px 18px; font-size: 14px; }
}

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border: 1px solid transparent; border-radius: 999px; font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s, background .2s, box-shadow .2s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-red { background: var(--red); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-light { background: #fff; color: var(--navy); }
.btn-glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20, 34, 61, .18); }
  .btn-red:hover { background: var(--red-dark); }
  .btn-navy:hover { background: var(--navy-2); }
  .btn-ghost:hover { background: var(--navy-soft); }
  .btn-glass:hover { background: rgba(255, 255, 255, .22); }
  .btn-red::after, .btn-navy::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); }
  .btn-red:hover::after, .btn-navy:hover::after { animation: barrido .8s ease; }
}

/* ---------- Portada a pantalla completa ---------- */
.hero-full { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: calc(100svh - 64px); color: #fff; }
.hf-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.hf-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 24, 44, .92) 0%, rgba(14, 24, 44, .6) 55%, rgba(14, 24, 44, .2) 100%); }
.hf-in { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 80px; padding-bottom: 40px; }
.hf-copy { max-width: 680px; }
.hero-full .eyebrow { color: var(--red-light); }
.hero-full h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 7vw, 104px); line-height: 1; letter-spacing: -.02em; }
.hero-full h1 em { color: var(--red-light); }
.hero-full h1 .w { display: inline-block; }
.hero-full .lead { max-width: 46ch; margin: 20px 0 30px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.seal { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.seal img { width: 44px; }
.seal b { display: block; font-size: 16px; }
.seal span { font-size: 13px; color: rgba(255, 255, 255, .75); }
@media (min-width: 960px) {
  .hero-full { min-height: calc(100dvh - 68px); }
  .hf-bg { object-position: center 40%; }
  .hf-shade { background: linear-gradient(90deg, rgba(14, 24, 44, .88) 0%, rgba(14, 24, 44, .55) 42%, rgba(14, 24, 44, .05) 75%), linear-gradient(0deg, rgba(14, 24, 44, .75) 0%, rgba(14, 24, 44, 0) 45%); }
  .hf-in { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 72px; }
  .hero-full .lead { font-size: 19px; }
}

/* ---------- Manifiesto y podio ---------- */
.manifesto { padding: 64px 0 48px; }
.mf-grid { display: grid; gap: 36px; align-items: center; }
.mf { max-width: 22ch; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.18; letter-spacing: -.01em; color: var(--navy); font-variant-numeric: lining-nums; }
.mf b { font-weight: 600; color: var(--red); background: linear-gradient(var(--red), var(--red)) no-repeat 0 92% / 0 2px; transition: background-size 1.2s var(--ease) .4s; }
.mf.in b { background-size: 100% 2px; }
.podio { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; }
.pd { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.disc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; font-size: 24px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 10px 24px rgba(20, 34, 61, .2); }
.disc.oro { background: var(--gold); } .disc.plata { background: var(--silver); } .disc.bronce { background: var(--bronze); }
.pd .col { position: relative; overflow: hidden; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 18px; border-radius: 14px 14px 0 0; background: var(--navy); color: #fff; transform-origin: bottom; }
.pd .col strong { font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.pd .col span { margin-top: 4px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pd .col em { position: absolute; bottom: 10px; font: normal 26px var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .5); }
.p1 .col { height: 200px; background: linear-gradient(var(--diag), var(--navy) 0 60%, var(--red) 60%); }
.p2 .col { height: 150px; }
.p3 .col { height: 120px; }
.podio-nota { grid-column: 1 / -1; padding-top: 12px; border-top: 2px solid var(--navy); text-align: center; font-size: 14px; color: var(--muted); }
@media (min-width: 960px) {
  .manifesto { padding: 96px 0 72px; }
  .mf-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .mf { font-size: clamp(34px, 3.8vw, 52px); }
  .disc { width: 64px; height: 64px; font-size: 30px; }
  .pd .col strong { font-size: 48px; }
  .p1 .col { height: 240px; } .p2 .col { height: 180px; } .p3 .col { height: 140px; }
}

/* ---------- Medallas (carrusel infinito) ---------- */
.medallero { padding: 80px 0 60px; color: #fff; background: linear-gradient(172deg, var(--navy) 0 84%, var(--red) 84% 100%); clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); }
.medallero .h2 { color: #fff; }
.marquee-head { display: flex; flex-wrap: wrap; align-items: end; gap: 20px; }
.medal-marquee { overflow: hidden; margin-top: 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.medal-track { display: flex; gap: 14px; width: max-content; padding: 6px 0 18px; }
.medal { width: 240px; flex: none; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .35s var(--ease), box-shadow .35s; }
.medal b { display: block; font-size: 17px; line-height: 1.3; }
.medal span { font-size: 14px; color: var(--muted); }
.medallero .medal { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; }
.medallero .medal span { color: rgba(255, 255, 255, .72); }
.m { position: relative; overflow: hidden; display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; color: #fff; font-size: 22px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 6px 16px rgba(0, 0, 0, .12); }
.m.oro { background: var(--gold); } .m.plata { background: var(--silver); } .m.bronce { background: var(--bronze); } .m.platino { background: var(--platinum); }
.m::after { content: ""; position: absolute; inset: -50%; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); transform: translateX(-100%); }
@media (hover: hover) {
  .medal:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .medal:hover .m::after { animation: brillo 1s ease; }
}
@media (min-width: 960px) {
  .medallero { padding: 110px 0 80px; background: linear-gradient(var(--diag), var(--navy) 0 64%, var(--red) 64% 100%); clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }
  .marquee-head .btn { margin-left: auto; }
  .medal { width: 270px; }
}

/* ---------- Niveles en Inicio: paneles con números romanos ---------- */
.steps { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.step { position: relative; isolation: isolate; overflow: hidden; height: 230px; border-radius: var(--radius); color: #fff; text-decoration: none; transition: flex .8s var(--ease); }
.step img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.step::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 34, 61, 0) 30%, rgba(20, 34, 61, .9)); }
.rn { position: absolute; top: 18px; left: 22px; font: 600 64px/1 var(--serif); color: var(--red); font-variant-numeric: lining-nums; }
.st-tx { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.st-tx h3 { font-family: var(--serif); font-size: 32px; font-weight: 600; white-space: nowrap; }
.st-tx p { max-width: 40ch; margin: 6px 0 14px; font-size: 15.5px; }
.go { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 2px solid var(--red); font-size: 14.5px; font-weight: 700; }
@media (min-width: 960px) {
  .steps { flex-direction: row; height: 520px; }
  .step { flex: 1; min-width: 0; height: auto; }
  .step.on { flex: 3.2; }
  .step.on img { transform: scale(1.04); }
  .step:not(.on)::after { background: linear-gradient(180deg, rgba(20, 34, 61, .25), rgba(20, 34, 61, .92)); }
  .step:not(.on) .rn { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
  .step:not(.on) .st-tx p, .step:not(.on) .go { opacity: 0; transform: translateY(10px); }
  .step .st-tx p, .step .go { transition: opacity .5s .25s, transform .5s .25s; }
  .step:not(.on) .st-tx h3 { position: absolute; bottom: 0; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 28px; }
}

/* ---------- Portal en Inicio: celular con el reporte ---------- */
.portal-sec { padding: 80px 0; overflow: hidden; color: #fff; background: linear-gradient(var(--diag), var(--navy) 0 82%, var(--red) 82% 100%); }
.portal-sec .h2 { max-width: 14ch; color: #fff; }
.portal-sec .sub { color: rgba(255, 255, 255, .78); }
.ps-grid { display: grid; gap: 48px; align-items: center; }
.phone-stage { position: relative; display: grid; place-items: center; padding: 30px 0; }
.phone { width: 280px; padding: 14px; border-radius: 44px; background: #0b1220; box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .08); transform: rotate(-4deg); }
.phone-notch { position: relative; z-index: 2; width: 110px; height: 26px; margin: -14px auto 6px; border-radius: 0 0 16px 16px; background: #0b1220; }
.phone .report { padding: 18px; border-radius: 30px; box-shadow: none; }
.phone .kpi strong { font-size: 19px; }
.sign { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.notif { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; width: 230px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
.notif img { width: 30px; }
.notif b { display: block; font-size: 13.5px; }
.notif span { font-size: 12.5px; color: var(--muted); }
.n1 { top: 0; right: 0; }
.n2 { bottom: 10px; left: 0; }
@media (min-width: 960px) {
  .portal-sec { padding: 110px 0; background: linear-gradient(calc(var(--diag) + 180deg), var(--navy) 0 84%, var(--red) 84% 100%); }
  .ps-grid { grid-template-columns: 1fr 1fr; }
  .phone { width: 320px; }
  .notif { width: 270px; }
  .n1 { right: -10px; } .n2 { left: -20px; }
}

/* ---------- Componente de reporte (Inicio y portal) ---------- */
.report { padding: 22px; border-radius: 20px; background: var(--white); color: var(--ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.report-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.report-head b { display: block; }
.report-head span { font-size: 13px; color: var(--muted); }
.avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); font-weight: 800; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--red); }
.pill.navy { background: var(--navy-soft); color: var(--navy); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
.kpi { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.kpi small { display: block; font-size: 12px; color: var(--muted); }
.kpi strong { font-size: 22px; }
.subjects { display: grid; gap: 8px; }
.subj { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.subj:last-child { border-bottom: 0; }
.grade { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Vida escolar: mosaico ---------- */
.bento { display: grid; grid-auto-rows: 230px; gap: 14px; margin-top: 40px; }
.tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: var(--radius); color: #fff; text-decoration: none; transition: transform .5s var(--ease); }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 16, 30, 0) 30%, rgba(10, 16, 30, .85)); }
.tile h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.tile p { max-width: 46ch; margin-top: 6px; font-size: 14.5px; opacity: .88; }
.tile.quote { justify-content: space-between; background: var(--red); }
.tile.quote::after { display: none; }
.tile.quote .q { font: 600 30px/1.1 var(--serif); opacity: 1; }
.tile.quote .by { display: flex; align-items: center; gap: 8px; font-size: 13.5px; opacity: .85; }
.t-e { background: var(--navy); }
@media (hover: hover) { .tile:hover { transform: translateY(-4px); } .tile:hover img { transform: scale(1.07); } }
@media (min-width: 600px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; }
  .t-a { grid-column: span 2; }
}
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 230px; }
  .t-a { grid-column: span 4; grid-row: span 2; }
  .t-b { grid-column: span 2; grid-row: span 2; }
  .t-c, .t-d, .t-e { grid-column: span 2; }
}

/* ---------- Bloques de texto con foto ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.pic { overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 5; }
.pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.checks { display: grid; gap: 14px; margin: 26px 0 30px; padding: 0; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks i { flex: none; margin-top: 1px; font-size: 22px; color: var(--red); }
.checks b { display: block; }
.checks span { font-size: 15px; color: var(--muted); }
.portal-teaser { display: grid; gap: 32px; align-items: center; overflow: hidden; padding: 32px 22px; border-radius: 22px; background: var(--navy); color: #fff; }
.portal-teaser .h2 { color: #fff; }
.portal-teaser .sub { color: rgba(255, 255, 255, .78); }
@media (hover: hover) { .pic:hover img { transform: scale(1.05); } }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .portal-teaser { grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px; border-radius: 28px; }
}

/* ---------- Encabezado de páginas internas ---------- */
.cabecera { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 80px; background: var(--navy); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--diag), transparent 0 78%, var(--red) 78% 100%); }
.cb-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.cb-escudo { position: absolute; top: 28px; right: 16px; width: 90px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .4)); }
.ruta { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-light); }
.ruta a { text-decoration: none; color: rgba(255, 255, 255, .7); }
.cabecera h1 { margin-top: 10px; padding-right: 90px; font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 6vw, 84px); letter-spacing: -.02em; }
.cabecera p { max-width: 52ch; margin-top: 12px; font-size: 18px; color: rgba(255, 255, 255, .8); }
.cabecera + main { padding-top: 48px; }
@media (min-width: 960px) {
  .cabecera { padding: 72px 0 96px; }
  .cabecera::before { background: linear-gradient(var(--diag), transparent 0 66%, var(--red) 66% 100%); }
  .cb-img { left: auto; width: 48%; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
  .cb-escudo { top: 50%; right: 6%; width: 180px; transform: translateY(-50%); }
  .cabecera h1 { padding-right: 0; }
}

/* ---------- Niveles: filas con número romano ---------- */
main { counter-reset: nivel; }
.lv-row { counter-increment: nivel; display: grid; gap: 20px; padding: 40px 0; background: linear-gradient(90deg, var(--red) 0 64px, var(--line) 64px) top left / 100% 2px no-repeat; }
.lv-row .pic { aspect-ratio: 4 / 3; border-radius: 18px; }
.lv-row h2 { font-family: var(--serif); font-size: 40px; font-weight: 600; color: var(--navy); }
.lv-row h2::before { content: counter(nivel, upper-roman); display: block; margin-bottom: 6px; font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { padding: 7px 12px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); font-size: 13.5px; font-weight: 600; }
@media (hover: hover) { .lv-row:hover .pic img { transform: scale(1.05); } }
@media (min-width: 960px) { .lv-row { grid-template-columns: 360px 1fr; gap: 40px; align-items: start; } }

/* ---------- Logros: lista completa ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filters button { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.medal-groups { display: grid; gap: 20px; margin-top: 36px; }
.mlist { display: grid; gap: 10px; }
.mrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.mrow .m { width: 34px; height: 34px; margin: 0; font-size: 16px; flex: none; }
.mrow b { display: block; font-size: 15px; line-height: 1.3; }
.mrow span { font-size: 13px; color: var(--muted); }
.mrow .yr { margin-left: auto; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .medal-groups { grid-template-columns: 1fr 1fr; } }

/* ---------- Formularios ---------- */
.card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; line-height: 1.3; }
.hint { font-size: 13px; color: var(--muted); }
.err { display: none; font-size: 13px; color: var(--red); }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select { border-color: var(--red); }
input, select, textarea { width: 100%; padding: 13px 14px; border: 1px solid #c3cad6; border-radius: 10px; background: var(--white); color: var(--ink); font: 500 16px var(--sans); }
input:not([type=checkbox]):not([type=radio]), select { height: 50px; padding-top: 0; padding-bottom: 0; }
select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6273' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px; }
input[type=date] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--navy) 25%, transparent); border-color: var(--navy); }
textarea { min-height: 110px; resize: vertical; }
.row2 { display: grid; gap: 16px; align-items: start; }
.success { display: none; padding: 30px 10px; text-align: center; }
.success i { font-size: 54px; color: var(--ok); }
.success h3 { margin: 10px 0 8px; font-family: var(--serif); font-size: 32px; }
.sent .form { display: none; }
.sent .success { display: block; }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } .card { padding: 32px; } }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; gap: 28px; padding-bottom: 40px; }
.c-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.c-item i { font-size: 24px; color: var(--red); }
.c-item b { display: block; }
.c-item a { text-decoration: none; }
.map { overflow: hidden; min-height: 360px; border: 1px solid var(--line); border-radius: 20px; }
.map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.social { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); text-decoration: none; font-size: 14.5px; font-weight: 700; }
.social i { font-size: 20px; }
.social.fb i { color: #1877f2; }
.social.ig i { color: #d62976; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } .map { position: sticky; top: 96px; height: 560px; } .map iframe { height: 560px; } }

/* ---------- Cierre común y pie ---------- */
.visita { margin-top: 40px; padding: 90px 0 70px; color: #fff; background: linear-gradient(var(--diag), var(--navy) 0 75%, var(--red) 75% 100%); clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%); }
.visita .h2 { color: #fff; }
.visita .sub { color: rgba(255, 255, 255, .8); }
.vs-in { display: grid; gap: 32px; align-items: center; }
.vs-escudo { width: 120px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }
@media (min-width: 960px) {
  .visita { padding: 120px 0 100px; background: linear-gradient(var(--diag), var(--navy) 0 58%, var(--red) 58% 100%); }
  .vs-in { grid-template-columns: 220px 1fr; gap: 48px; }
  .vs-escudo { width: 220px; }
}
.foot { margin-top: 40px; padding: 64px 20px 40px; border-top: 1px solid var(--line); text-align: center; view-transition-name: pie; }
.visita + .foot, main:has(> .visita:last-child) + .foot { margin-top: 0; border-top: 0; }
.foot img { width: 56px; margin: 0 auto 14px; }
.motto { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--navy); }
.foot hr { width: 60px; margin: 20px auto; border: 0; border-top: 1px solid var(--line); }
.small-caps { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.foot .socials { justify-content: center; }
.copy { margin-top: 22px; font-size: 12.5px; color: var(--muted); }

/* ---------- Movimiento (solo si la persona no pidió reducirlo) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sale .35s ease both; }
::view-transition-new(root) { animation: vt-entra .45s var(--ease) both; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .reveal.in { opacity: 1; transform: none; }
  .hero-full .lead, .hero-full .ctas { animation: rise .9s var(--ease) both; }
  .hero-full .lead { animation-delay: .08s; } .hero-full .ctas { animation-delay: .16s; }
  .hero-full h1 .w { opacity: 0; animation: palabra .9s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 100ms); }
  .hero-full .ctas .btn-red { animation: latido 2.6s ease-in-out 2s 3; }
  .hf-bg { animation: kenburns 16s var(--ease) both; }
  .seal { animation: rise .9s var(--ease) .9s both, flota 5s ease-in-out 1.8s infinite; }
  .medal-track { animation: desliza 55s linear infinite; }
  .medal-marquee:hover .medal-track { animation-play-state: paused; }
  .podio .col { transform: scaleY(0); transition: transform 1.1s var(--ease); }
  .podio .disc { opacity: 0; transform: translateY(-30px); transition: opacity .6s, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
  .podio.in .col, .podio.in .disc { opacity: 1; transform: none; }
  .podio.in .p2 .col { transition-delay: .15s; } .podio.in .p3 .col { transition-delay: .3s; }
  .podio.in .p1 .disc { transition-delay: .9s; } .podio.in .p2 .disc { transition-delay: 1.05s; } .podio.in .p3 .disc { transition-delay: 1.2s; }
  .phone-stage.in .phone { animation: gira 1.1s var(--ease) both; }
  .phone-stage.in .n1 { animation: llega .8s var(--ease) .6s both, flota 6s ease-in-out 1.6s infinite; }
  .phone-stage.in .n2 { animation: llega .8s var(--ease) 1.3s both, flota 6s ease-in-out 2.4s infinite; }
  .cabecera h1, .cabecera p, .ruta { animation: rise .9s var(--ease) both; }
  .cabecera p { animation-delay: .1s; }
  @supports (animation-timeline: scroll()) {
    .hf-in { animation: salehero linear both; animation-timeline: scroll(); animation-range: 0 90vh; }
    .split .pic img { animation: paralaje linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes palabra { from { opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(173, 32, 45, .45); } 50% { box-shadow: 0 0 0 10px rgba(173, 32, 45, 0); } }
@keyframes kenburns { from { transform: scale(1.12); } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes desliza { to { transform: translateX(-50%); } }
@keyframes brillo { to { transform: translateX(100%); } }
@keyframes barrido { to { left: 130%; } }
@keyframes llega { from { opacity: 0; transform: translateY(-24px) scale(.94); } }
@keyframes gira { from { opacity: 0; transform: rotate(4deg) translateY(30px); } }
@keyframes salehero { to { opacity: 0; transform: translateY(-60px); } }
@keyframes paralaje { from { transform: scale(1.15) translateY(-4%); } to { transform: scale(1.15) translateY(4%); } }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }