/* CPMA IT - Estilos principales */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Nunito:wght@300;400;600;700&display=swap');

:root {
  --azul: #1a319e;
  --azul-oscuro: #122175;
  --azul-claro: #e8ecf8;
  --rojo: #fc0500;
  --blanco: #ffffff;
  --gris-claro: #f7f8fc;
  --gris-texto: #4a4a5a;
  --sombra: 0 4px 24px rgba(26,49,158,0.10);
  --sombra-fuerte: 0 8px 40px rgba(26,49,158,0.18);
  --radio: 16px;
  --radio-sm: 8px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Nunito',sans-serif; background:var(--blanco); color:var(--gris-texto); line-height:1.7; -webkit-font-smoothing:antialiased; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.96); backdrop-filter:blur(12px); border-bottom:1px solid rgba(26,49,158,0.08); padding:0 5%; display:flex; align-items:center; justify-content:space-between; height:72px; box-shadow:0 2px 12px rgba(26,49,158,0.06); }
.nav-logo { height:44px; width:auto; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--azul); font-weight:600; font-size:0.9rem; letter-spacing:0.03em; transition:color 0.2s; }
.nav-links a:hover { color:var(--rojo); }

/* HERO */
.hero { min-height:100vh; padding-top:72px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.hero-content { display:flex; flex-direction:column; justify-content:center; padding:80px 6% 80px 8%; background:var(--blanco); }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--rojo); font-weight:700; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:20px; }
.hero-eyebrow::before { content:''; width:28px; height:2px; background:var(--rojo); display:block; }
.hero-titulo { font-family:'Playfair Display',serif; font-size:clamp(2.4rem,4vw,3.6rem); color:var(--azul-oscuro); line-height:1.15; margin-bottom:16px; }
.hero-titulo em { font-style:italic; color:var(--rojo); }
.hero-lema { font-size:0.97rem; color:var(--azul); font-weight:600; margin-bottom:24px; padding:12px 20px; background:var(--azul-claro); border-left:4px solid var(--azul); border-radius:0 var(--radio-sm) var(--radio-sm) 0; display:inline-block; }
.hero-texto { font-size:1.05rem; color:var(--gris-texto); line-height:1.8; margin-bottom:36px; max-width:500px; }
.hero-cta { display:inline-flex; align-items:center; gap:10px; background:var(--azul); color:var(--blanco); padding:14px 28px; border-radius:50px; font-weight:700; font-size:0.95rem; text-decoration:none; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; box-shadow:var(--sombra); }
.hero-cta:hover { background:var(--azul-oscuro); transform:translateY(-2px); box-shadow:var(--sombra-fuerte); }
.hero-cta-arrow { transition:transform 0.2s; }
.hero-cta:hover .hero-cta-arrow { transform:translateX(4px); }
.hero-imagen { position:relative; overflow:hidden; }
.hero-imagen img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-imagen-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(18,33,117,0.88) 0%,transparent 65%); padding:40px; }
.hero-imagen-quote { color:var(--blanco); font-family:'Playfair Display',serif; font-size:1.15rem; font-style:italic; line-height:1.5; border-left:3px solid rgba(252,5,0,0.85); padding-left:16px; }

/* SECCIONES */
section { padding:96px 5%; }
.section-eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--rojo); font-weight:700; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:12px; }
.section-eyebrow::before { content:''; width:24px; height:2px; background:var(--rojo); display:block; }
.section-titulo { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--azul-oscuro); line-height:1.2; margin-bottom:16px; }
.section-subtitulo { font-size:1.05rem; color:var(--gris-texto); max-width:560px; line-height:1.8; margin-bottom:56px; }

/* PILARES */
.pilares { background:var(--gris-claro); }
.pilares-header { text-align:center; max-width:640px; margin:0 auto 56px; }
.pilares-header .section-subtitulo { margin-left:auto; margin-right:auto; }
.pilares-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1200px; margin:0 auto; }
.pilar-card { background:var(--blanco); border-radius:var(--radio); padding:36px 28px; box-shadow:var(--sombra); border-top:4px solid var(--azul); transition:transform 0.25s,box-shadow 0.25s; }
.pilar-card:hover { transform:translateY(-6px); box-shadow:var(--sombra-fuerte); }
.pilar-card:nth-child(2) { border-top-color:#2a8a5e; }
.pilar-card:nth-child(3) { border-top-color:#e67e22; }
.pilar-card:nth-child(4) { border-top-color:var(--rojo); }
.pilar-icono { font-size:2.4rem; margin-bottom:16px; display:block; }
.pilar-nombre { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--azul-oscuro); margin-bottom:12px; font-weight:700; }
.pilar-descripcion { font-size:0.92rem; color:var(--gris-texto); line-height:1.75; margin-bottom:20px; }
.pilar-actividades { list-style:none; padding:0; border-top:1px solid rgba(26,49,158,0.08); padding-top:16px; }
.pilar-actividades li { font-size:0.85rem; color:var(--azul); font-weight:600; padding:4px 0; display:flex; align-items:center; gap:8px; }
.pilar-actividades li::before { content:'→'; color:var(--rojo); font-size:0.75rem; flex-shrink:0; }

/* ESTRUCTURA */
.estructura { background:var(--blanco); }
.estructura-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.estructura-imagen-wrap { position:relative; }
.estructura-imagen-wrap img { width:100%; border-radius:var(--radio); box-shadow:var(--sombra-fuerte); }
.estructura-imagen-wrap::before { content:''; position:absolute; top:-16px; left:-16px; right:16px; bottom:16px; border:2px solid var(--azul-claro); border-radius:var(--radio); z-index:-1; }

/* EQUIPO */
.equipo { background:var(--azul-oscuro); position:relative; overflow:hidden; }
.equipo::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px; background:radial-gradient(circle,rgba(252,5,0,0.12) 0%,transparent 70%); pointer-events:none; }
.equipo .section-eyebrow { color:rgba(252,5,0,0.9); }
.equipo .section-eyebrow::before { background:rgba(252,5,0,0.9); }
.equipo .section-titulo { color:var(--blanco); }
.equipo .section-subtitulo { color:rgba(255,255,255,0.75); }
.equipo-imagen-wrap { border-radius:var(--radio); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.equipo-imagen-wrap img { width:100%; display:block; }
.equipo-lema-banner { background:var(--azul); color:var(--blanco); text-align:center; padding:20px 32px; font-family:'Playfair Display',serif; font-size:1.1rem; font-style:italic; }
.equipo-lema-banner span { color:rgba(255,120,120,1); font-style:normal; font-weight:700; }

/* ROLES */
.roles { background:var(--gris-claro); }
.roles-inner { max-width:1200px; margin:0 auto; }
.roles-imagen-wrap { border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-fuerte); }
.roles-imagen-wrap img { width:100%; display:block; }

/* CONTACTO */
.contacto { background:var(--blanco); }
.contacto-inner { max-width:680px; margin:0 auto; text-align:center; }
.contacto-inner .section-eyebrow { justify-content:center; }
.contacto-inner .section-eyebrow::before { display:none; }
.contacto-inner .section-subtitulo { margin:0 auto 48px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; text-align:left; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:0.82rem; font-weight:700; color:var(--azul); letter-spacing:0.04em; text-transform:uppercase; }
.form-group input,.form-group select,.form-group textarea { border:2px solid rgba(26,49,158,0.15); border-radius:var(--radio-sm); padding:12px 16px; font-family:'Nunito',sans-serif; font-size:0.97rem; color:var(--gris-texto); background:var(--gris-claro); transition:border-color 0.2s,box-shadow 0.2s; outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--azul); box-shadow:0 0 0 3px rgba(26,49,158,0.08); background:var(--blanco); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-submit { margin-top:24px; background:var(--azul); color:var(--blanco); border:none; padding:16px 40px; border-radius:50px; font-family:'Nunito',sans-serif; font-size:1rem; font-weight:700; cursor:pointer; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; box-shadow:var(--sombra); letter-spacing:0.03em; }
.form-submit:hover { background:var(--azul-oscuro); transform:translateY(-2px); box-shadow:var(--sombra-fuerte); }

/* FOOTER */
footer { background:var(--azul-oscuro); color:rgba(255,255,255,0.7); text-align:center; padding:40px 5%; }
.footer-logo { height:40px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:0.9; }
footer p { font-size:0.88rem; line-height:1.7; }
footer strong { color:var(--blanco); }

/* ANIMACIONES */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp 0.7s ease both; }
.delay-1{animation-delay:0.1s} .delay-2{animation-delay:0.22s} .delay-3{animation-delay:0.34s} .delay-4{animation-delay:0.46s}

/* RESPONSIVE */
@media(max-width:1024px){
  .pilares-grid{grid-template-columns:repeat(2,1fr)}
  .estructura-inner{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  .hero{grid-template-columns:1fr}
  .hero-imagen{height:320px;order:-1}
  .hero-content{padding:48px 6%}
  .nav-links{display:none}
  .pilares-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  section{padding:64px 5%}
}