:root{
  --azul:#002060; --naranja:#e99b29; --dorado:#c8a84b; --oro:#ffc000;
  --fondo:#ffffff; --gris:#eef0f4;
  --fuente:Gadugi,'Segoe UI',Tahoma,Arial,sans-serif;
  --oro-texto:#8a6d1f; --naranja-texto:#a35f00;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--gris);color:var(--azul);font-family:var(--fuente);-webkit-font-smoothing:antialiased}
body:has(.ficha:target){overflow:hidden}
.hoja{max-width:860px;margin:0 auto;background:var(--fondo);min-height:100vh;box-shadow:0 0 40px rgba(0,32,96,.08)}
.cabecera{display:block;width:100%;height:auto}
main{padding:34px 28px 56px}
h1,h2{margin:0;text-align:center;font-weight:700}
h1{color:var(--naranja);font-size:30px;line-height:1.2}
.intro{font-size:19px;line-height:1.5;margin:18px 0 28px;text-align:justify;hyphens:auto}
.intro strong{font-weight:700}

/* --- Proyectos --- */
.proyectos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;scroll-margin-top:16px}
.proyecto{position:relative;display:block;overflow:hidden;border-radius:3px;outline-offset:4px;
          box-shadow:0 6px 18px rgba(0,32,96,.18);transition:transform .25s ease, box-shadow .25s ease}
.proyecto img{display:block;width:100%;height:auto;aspect-ratio:480/620;object-fit:cover;transition:transform .5s ease}
.proyecto span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-weight:700;font-size:14px;
               letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(transparent,rgba(0,16,48,.85));
               opacity:0;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease}
.proyecto:hover,.proyecto:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,32,96,.28)}
.proyecto:hover img,.proyecto:focus-visible img{transform:scale(1.04)}
.proyecto:hover span,.proyecto:focus-visible span{opacity:1;transform:none}

h2{font-size:28px;margin-top:46px;color:var(--azul)}
.about{font-size:19px;line-height:1.5;margin:16px 0 0;text-align:justify;hyphens:auto}
.invest{margin:40px 0 30px;text-align:center;font-size:21px;font-weight:700;color:var(--naranja)}
.invest a{color:var(--naranja)}

/* --- Equipo --- */
.equipo{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.equipo img{width:124px;max-width:100%;height:auto;border-radius:50%;display:block;margin:0 auto 12px}
.equipo b{display:block;font-size:15px}
.equipo small{display:block;font-size:13.5px;line-height:1.35;margin-top:3px}

/* --- FICHA EMERGENTE (como el boceto de la página 3) --- */
.ficha{position:fixed;inset:0;z-index:20;display:none;overflow-y:auto;overscroll-behavior:contain;padding:70px 16px 40px}
.ficha:target{display:block;animation:aparecer .25s ease-out}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.velo{position:fixed;inset:0;background:rgba(240,241,244,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.volver{position:fixed;top:18px;left:18px;z-index:2;display:flex;align-items:center;justify-content:center;
        width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,32,96,.2);
        color:var(--azul);text-decoration:none;font-size:30px;line-height:1}
.volver:hover{background:var(--azul);color:#fff}
.tarjeta{position:relative;z-index:1;width:min(640px,100%);margin:0 auto;animation:subir .35s ease-out}
@keyframes subir{from{transform:translateY(22px)}to{transform:none}}
.tarjeta .foto{display:block;margin:0 auto;max-width:82%;max-height:62vh;width:auto;height:auto;
               box-shadow:0 18px 40px rgba(0,32,96,.3)}
.tarjeta .foto.ancha{max-width:100%}
.tarjeta .foto.borde{outline:2px solid var(--oro)}
.texto{position:relative;background:#fff;margin-top:-18px;padding:30px 34px 30px;box-shadow:0 12px 34px rgba(0,32,96,.18)}
.texto .logo{position:absolute;top:-30px;right:22px;width:74px;height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.texto .etiqueta{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-texto)}
.texto .venta{margin:0 0 16px;padding-right:66px;font-size:19px;line-height:1.5}
.texto .frase{margin:0 0 22px;font-size:18px;font-style:italic;color:var(--naranja-texto)}
.texto .contacto{display:inline-block;background:var(--azul);color:#fff;text-decoration:none;font-weight:700;
                 padding:11px 22px;border-radius:7px}
.texto .contacto:hover{background:#0b3a9a}
.texto .pie{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.navegar{display:flex;gap:8px}
.navegar a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:22px;
           border:1px solid #c9d2e6;color:var(--azul);text-decoration:none;font-weight:700;font-size:14px}
.navegar a:hover{background:var(--azul);color:#fff;border-color:var(--azul)}

@media (max-width:640px){
  main{padding:26px 16px 44px}
  h1{font-size:25px} h2{font-size:24px}
  .intro,.about{font-size:17px;text-align:left}
  .proyectos{gap:10px}
  .proyecto span{opacity:1;transform:none;font-size:11px;padding:18px 6px 6px}
  .equipo{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .ficha{padding:76px 10px 28px}
  .tarjeta .foto{max-width:100%;max-height:52vh}
  .texto{padding:26px 20px 24px}
  .texto .venta{font-size:17px;padding-right:56px}
  .texto .logo{width:62px;top:-26px;right:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}