@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --light: #F4F9FA;
  --dark1: #1D8AB0;
  --dark2: #0A3548;
  --accent: #F2C14E;
  --ink: #10222B;
  --stone: #5C7480;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter', sans-serif; background:var(--light); color:var(--ink);}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.01em;}
img{max-width:100%; display:block;}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 6%;
  background:rgba(10,53,72,0.35);
  backdrop-filter:blur(10px);
  z-index:1000;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
}
nav.scrolled{
  padding:12px 6%;
  background:rgba(10,53,72,0.92);
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
body.page-interior nav.scrolled{background:rgba(244,249,250,0.97);}
.logo{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Space Grotesk', sans-serif; font-size:1.15rem; font-weight:700; text-decoration:none;}
.logo .brand-name{display:inline-block; white-space:nowrap; color:inherit;}
.logo .mark{width:34px; height:34px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--dark2); font-weight:700;}
.nav-links{display:flex; gap:30px; list-style:none; align-items:center;}
.nav-links a{color:#fff; text-decoration:none; font-size:0.92rem; font-weight:600; opacity:0.85; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-links .cta{background:var(--accent); color:var(--dark2); padding:10px 20px; border-radius:8px; opacity:1;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer;}
.lang-toggle{background:transparent; border:1.5px solid rgba(255,255,255,0.5); color:#fff; font-size:0.78rem; font-weight:700; padding:6px 12px; border-radius:6px; cursor:pointer; transition:background .2s ease, border-color .2s ease;}
.lang-toggle:hover{background:rgba(255,255,255,0.12); border-color:#fff;}
body.page-interior .lang-toggle{color:var(--dark2); border-color:rgba(10,53,72,0.4);}
body.page-interior .lang-toggle:hover{background:rgba(10,53,72,0.08); border-color:var(--dark2);}
body.page-interior nav{background:rgba(244,249,250,0.92);}
body.page-interior .logo, body.page-interior .nav-links a{color:var(--dark2);}
body.page-interior .menu-toggle{color:var(--dark2);}

/* ---------- HERO (foto de fondo, estilo Entrecajas) ---------- */
.hero-outer{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  padding-top:0;
  background-image:
    linear-gradient(100deg, rgba(10,53,72,0.88) 0%, rgba(10,53,72,0.5) 45%, rgba(10,53,72,0.2) 100%),
    url('../images/hero-photo.jpg');
  background-size:cover;
  background-position:center;
}
.hero{
  padding:120px 6% 90px;
  max-width:1280px;
  margin:0 auto;
  width:100%;
}
.hero .tag{color:var(--accent); font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:18px;}
.hero h1{font-size:clamp(2.4rem,4.8vw,3.6rem); line-height:1.08; color:#fff; margin-bottom:22px; max-width:680px;}
.hero p{color:rgba(244,249,250,0.9); font-size:1.1rem; line-height:1.65; max-width:520px; margin-bottom:34px;}
.cta-row{display:flex; gap:16px;}
.btn{padding:14px 28px; border-radius:8px; font-size:0.92rem; font-weight:700; text-decoration:none; display:inline-block; transition:transform .2s ease, box-shadow .2s ease;}
.btn-primary{background:var(--accent); color:var(--dark2);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(242,193,78,0.4);}
.btn-outline{border:2px solid #fff; color:#fff;}
.btn-outline:hover{background:#fff; color:var(--dark2);}

/* ---------- SECTION SHARED ---------- */
section{padding:110px 6%; max-width:1280px; margin:0 auto;}
.tag{color:var(--dark1); font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:16px;}

/* ---------- QUIENES SOMOS (fondo oscuro) ---------- */
#quienes{
  background:linear-gradient(120deg, var(--dark1) 0%, var(--dark2) 100%);
  max-width:100%;
  padding:110px 6%;
}
.quienes-grid{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
#quienes .tag{color:var(--accent);}
#quienes h2{color:#fff; font-size:clamp(2rem,4vw,2.7rem); margin-bottom:24px;}
#quienes p{color:rgba(244,249,250,0.85); font-size:1.02rem; line-height:1.75; margin-bottom:18px; max-width:520px;}
.quienes-visual img{border-radius:24px; width:100%; aspect-ratio:4/5; object-fit:cover; box-shadow:0 20px 50px rgba(0,0,0,0.25);}

/* ---------- QUE HACEMOS (fondo claro) ---------- */
#hacemos .section-head{max-width:640px; margin-bottom:56px;}
#hacemos h2{font-size:clamp(2rem,4vw,2.7rem); color:var(--dark2); line-height:1.15;}
#hacemos .section-head p{margin-top:16px; color:var(--stone); font-size:1.02rem; line-height:1.6;}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.card{background:transparent; box-shadow:none; padding:0; transition:transform .25s ease;}
.card:hover{transform:translateY(-6px); box-shadow:none;}
.card img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:28px 28px 28px 90px; margin-bottom:22px; box-shadow:0 16px 34px rgba(10,53,72,0.15);}
.card .eyebrow{display:block; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--dark1); font-weight:700; margin-bottom:10px;}
.card h3{font-size:1.25rem; color:var(--dark2); margin-bottom:10px;}
.card p{color:var(--stone); font-size:0.94rem; line-height:1.6;}

footer{text-align:center; padding:36px 6%; background:var(--dark2); color:rgba(244,249,250,0.55); font-size:0.82rem;}
footer a{color:var(--accent); text-decoration:none;}
.info-card p strong{color:#fff;}

/* ---------- Sofisticación: carga de página ---------- */
body{opacity:0; animation:pageFadeIn .6s ease forwards;}
@keyframes pageFadeIn{to{opacity:1;}}

/* ---------- Sofisticación: barra de progreso de scroll ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; background:var(--accent); z-index:1100; width:0%; transition:width .1s linear;}

/* ---------- Sofisticación: degradado animado sutil en el hero ---------- */
.hero-outer{background-size:112% 112%; animation:heroGradientShift 40s ease-in-out infinite;}
@keyframes heroGradientShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:30% 50%;}
}

/* ---------- Sofisticación: zoom de imagen en hover ---------- */
.card{overflow:visible;}
.card .img-wrap{border-radius:28px 28px 28px 90px; overflow:hidden; margin-bottom:22px; box-shadow:0 16px 34px rgba(10,53,72,0.15);}
.card .img-wrap img{margin-bottom:0; border-radius:0; transition:transform .5s ease;}
.card:hover .img-wrap img{transform:scale(1.08);}

/* ---------- Sofisticación: botón volver arriba ---------- */
.back-to-top{position:fixed; bottom:28px; right:28px; width:46px; height:46px; border-radius:50%; border:none; background:var(--dark2); color:var(--accent); font-size:1.2rem; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, background .2s ease; box-shadow:0 8px 20px rgba(0,0,0,0.25); z-index:999;}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-to-top:hover{background:var(--dark1);}

/* ---------- Sofisticación: aparición escalonada de tarjetas ---------- */
.cards .card{transition-delay:0s;}
.cards .card:nth-child(1).reveal{transition-delay:0s;}
.cards .card:nth-child(2).reveal{transition-delay:.12s;}
.cards .card:nth-child(3).reveal{transition-delay:.24s;}
.cat-row .cat-item:nth-child(1).reveal{transition-delay:0s;}
.cat-row .cat-item:nth-child(2).reveal{transition-delay:.08s;}
.cat-row .cat-item:nth-child(3).reveal{transition-delay:.16s;}
.cat-row .cat-item:nth-child(4).reveal{transition-delay:.24s;}
.cat-row .cat-item:nth-child(5).reveal{transition-delay:.32s;}

@media (prefers-reduced-motion: reduce){
  body{animation:none; opacity:1;}
  .hero-outer{animation:none;}
  .card .img-wrap img{transition:none;}
}

/* ---------- Franja de categorías ---------- */
.categorias{background:#EFF6F8; padding:80px 6%;}
.categorias-title{text-align:center; color:var(--dark2); font-size:clamp(1.5rem,3vw,2rem); margin-bottom:44px;}
.cat-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; max-width:1180px; margin:0 auto;}
.cat-item{flex:1 1 160px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; cursor:default;}
.cat-icon{width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,var(--dark1),var(--dark2)); color:var(--accent); display:flex; align-items:center; justify-content:center; transition:transform .3s ease, box-shadow .3s ease;}
.cat-icon svg{width:26px; height:26px;}
.cat-item:hover .cat-icon{transform:translateY(-6px) scale(1.06); box-shadow:0 14px 26px rgba(10,53,72,0.28);}
.cat-item span{font-size:0.9rem; font-weight:600; color:var(--dark2); max-width:140px; transition:color .3s ease;}
.cat-item:hover span{color:var(--dark1);}

/* ---------- Footer expandido ---------- */
.site-footer{background:var(--dark2); padding:64px 6% 0; color:rgba(244,249,250,0.7);}
.footer-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:44px;}
.footer-brand .logo{color:#fff; margin-bottom:16px; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-size:1.15rem;}
.footer-brand .logo .mark{flex-shrink:0;}
.footer-brand p{font-size:0.88rem; line-height:1.6; max-width:320px; color:rgba(244,249,250,0.6);}
.footer-col h4{font-family:'Space Grotesk',sans-serif; color:#fff; font-size:0.95rem; margin-bottom:16px;}
.footer-col{display:flex; flex-direction:column; gap:10px;}
.footer-col a, .footer-col span{color:rgba(244,249,250,0.65); text-decoration:none; font-size:0.88rem;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(244,249,250,0.12); text-align:center; padding:22px 0; font-size:0.8rem; color:rgba(244,249,250,0.5);}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr; gap:34px;}
  .cat-row{justify-content:center;}
}

@media (max-width:900px){
  .hero, .quienes-grid{grid-template-columns:1fr; text-align:left;}
  .cards{grid-template-columns:1fr;}
  .nav-links{position:fixed; top:0; right:0; height:100vh; width:min(80vw,300px); background:var(--light); flex-direction:column; justify-content:center; align-items:flex-start; padding:0 36px; gap:26px; transform:translateX(100%); transition:transform .35s ease; box-shadow:-10px 0 30px rgba(0,0,0,0.1);}
  .nav-links.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  section, .hero, #quienes{padding-left:6%; padding-right:6%;}
  .hero{padding-top:140px;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}