@font-face{font-family:Lora;src:url(../fuentes/lora.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:Lora;src:url(../fuentes/lora-italic.ttf) format("truetype");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Poppins;src:url(../fuentes/poppins-regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(../fuentes/poppins-medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(../fuentes/poppins-bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--noche:#061a40;--marino:#0a2a66;--rey:#1552c4;--cielo:#7cc4ff;--hielo:#eaf3ff;--texto:#11203d;--gris:#5a6b88;--blanco:#fff;--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,sans-serif;color:var(--texto);background:#f6f9ff;line-height:1.65;font-size:16.5px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Lora,Georgia,serif;line-height:1.12;margin:0 0 .5em;font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.01em}
.envoltura{width:min(1180px,100% - 40px);margin-inline:auto}
.saltar{position:absolute;left:-999px;top:8px;background:var(--rey);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.saltar:focus{left:12px}
:focus-visible{outline:2px solid var(--cielo);outline-offset:3px}
.sobre{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--rey);margin:0 0 14px}
.sobre-claro{color:var(--cielo)}
/* barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.barra.solida{background:rgba(6,26,64,.92);backdrop-filter:blur(10px);box-shadow:0 6px 30px rgba(0,0,0,.2)}
.barra-in{display:flex;align-items:center;justify-content:space-between;height:74px;color:#fff}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Lora,serif;font-size:1.35rem}
.marca svg{width:30px;height:30px;color:var(--cielo)}
.marca b{font-weight:600;color:var(--cielo)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;font-size:.92rem;opacity:.85}
.nav a:hover{opacity:1;color:var(--cielo)}
.nav .nav-cta{opacity:1;border:1px solid rgba(124,196,255,.6);padding:8px 18px;border-radius:99px}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:99px;padding:7px 16px;font:inherit;font-size:.9rem}
/* hero */
.hero{position:relative;background:radial-gradient(1200px 600px at 80% 10%,#1a4fb0 0%,transparent 60%),linear-gradient(160deg,#061a40 0%,#0a2a66 55%,#0e3a8a 100%);color:#fff;padding:140px 0 150px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(124,196,255,.05) 0 2px,transparent 2px 38px);pointer-events:none}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:center;position:relative}
.hero .sobre{color:var(--cielo)}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.02em}
h1 em{color:var(--cielo);font-weight:500}
.lead{font-size:1.1rem;color:#cfe0ff;max-width:34em;margin:0 0 30px}
.acciones{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;padding:13px 26px;border-radius:99px;font-weight:500;font-size:.95rem;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-claro{background:var(--cielo);color:var(--noche)}
.btn-claro:hover{background:#a8d8ff}
.btn-linea{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-linea:hover{background:rgba(255,255,255,.08)}
.lema{list-style:none;padding:0;margin:40px 0 0;display:flex;gap:0;flex-wrap:wrap;font-family:Lora,serif;font-style:italic;font-size:1.1rem;color:#9fc2f5}
.lema li+li::before{content:"·";margin:0 14px;color:var(--cielo)}
.hero-fotos{position:relative;min-height:520px}
.hero-fotos figure{margin:0;position:absolute;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.f1{right:0;top:0;width:78%;border-radius:200px 200px var(--r) var(--r);border:6px solid rgba(124,196,255,.25)}
.f1 img{width:100%;height:520px;object-fit:cover;object-position:center 30%}
.f2{left:0;bottom:-10px;width:44%;border-radius:50%;border:6px solid var(--noche);aspect-ratio:1}
.f2 img{width:100%;height:100%;object-fit:cover}
.sello{position:absolute;right:-8px;bottom:36px;background:#fff;color:var(--noche);border-radius:14px;padding:12px 18px;font-size:.82rem;box-shadow:0 14px 40px rgba(0,0,0,.3);max-width:190px;line-height:1.35}
.sello span{display:block;font-family:Lora,serif;font-size:1.6rem;font-weight:600;color:var(--rey)}
.ola{position:absolute;left:0;right:0;bottom:-1px;height:80px;background:#f6f9ff;clip-path:ellipse(70% 100% at 50% 100%)}
/* secciones */
.sec{padding:100px 0}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:70px;align-items:center}
.foto-marco{position:relative}
.foto-marco::after{content:"";position:absolute;inset:24px -24px -24px 24px;border:2px solid var(--cielo);border-radius:var(--r);z-index:-1}
.foto-marco img{border-radius:var(--r);width:100%;height:560px;object-fit:cover;object-position:center 25%}
.sobre-mi{position:relative;z-index:0}
blockquote{margin:30px 0 0;padding:18px 0 18px 24px;border-left:3px solid var(--rey);font-family:Lora,serif;font-style:italic;font-size:1.5rem;color:var(--marino)}
.cabeza{text-align:center;max-width:680px;margin:0 auto 50px}
.sub{color:var(--gris);margin:0}
.compromiso{background:var(--hielo)}
.pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pilar{background:#fff;border-radius:var(--r);padding:38px 32px;box-shadow:0 10px 40px rgba(10,42,102,.08);border-top:4px solid var(--rey);transition:transform .25s}
.pilar:hover{transform:translateY(-6px)}
.num{font-family:Lora,serif;font-size:2.6rem;color:var(--cielo);font-weight:600;line-height:1}
.pilar h3{font-size:1.6rem;margin:14px 0 10px;color:var(--noche)}
.pilar p{color:var(--gris);margin:0}
.fundacion{background:linear-gradient(150deg,var(--noche),var(--marino));color:#fff}
.fundacion p{color:#cfe0ff}
.invertido>:first-child{order:0}
.actividades{list-style:none;padding:0;margin:26px 0 34px;display:grid;gap:14px}
.actividades li{display:grid;gap:2px;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(124,196,255,.18)}
.actividades b{color:#fff;font-weight:500}
.actividades span{color:#a9c4ec;font-size:.92rem}
.mosaico{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.mosaico img{border-radius:var(--r);width:100%;height:440px;object-fit:cover}
.mosaico img:last-child{margin-top:60px}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g{padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;overflow:hidden;position:relative}
.g img{width:100%;height:340px;object-fit:cover;transition:transform .5s}
.g::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,26,64,.55),transparent 50%);opacity:0;transition:opacity .3s}
.g:hover img{transform:scale(1.05)}
.g:hover::after{opacity:1}
.mas{text-align:center;margin-top:34px}
.mas a{color:var(--rey);font-weight:500;text-decoration:none}
.contacto{background:var(--hielo);text-align:center}
.contacto-in{max-width:640px}
.avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 20px;border:4px solid #fff;box-shadow:0 10px 30px rgba(10,42,102,.2);object-fit:cover}
.contacto p{color:var(--gris)}
.redes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.redes a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--noche);color:#fff;padding:12px 22px;border-radius:99px;font-size:.93rem;transition:background .2s}
.redes a:hover{background:var(--rey)}
.redes svg{width:18px;height:18px}
.pie{background:var(--noche);color:#9fb6da;font-size:.88rem;padding:26px 0}
.pie-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pie a{text-decoration:none}
.visor[hidden]{display:none}
.visor{position:fixed;inset:0;background:rgba(3,12,32,.92);z-index:80;display:grid;place-items:center;padding:20px}
.visor img{max-height:88vh;width:auto;border-radius:12px}
.cerrar{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
.revelar{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}
.revelar.visto{opacity:1;transform:none}
@media (max-width:900px){
  .hero-in,.dos{grid-template-columns:minmax(0,1fr)}
  .hero{padding:120px 0 120px}
  .hero-fotos{min-height:440px;max-width:460px;width:100%;margin:0 auto}
  .f1 img{height:440px}
  .pilares{grid-template-columns:minmax(0,1fr)}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foto-marco img{height:440px}
  .menu-btn{display:block}
  .nav{position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;background:rgba(6,26,64,.97);padding:10px 20px 20px;display:none}
  .nav.abierta{display:flex}
  .nav a{padding:12px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .nav-cta{border:0;padding:12px 0}
  .foto-marco::after{inset:14px -10px -14px 10px}
}
@media (max-width:520px){
  .g img{height:220px}
  .mosaico img{height:300px}
  .sello{right:0}
  .sec{padding:70px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.revelar{opacity:1;transform:none}}