/* ===================================================================
   EPAC Perú — Landing institucional
   Paleta: marfil/blanco + azul profundo (identidad EPAC) + azul medio
   (acento propio de esta pieza institucional). El logotipo conserva
   siempre sus colores oficiales de marca (rojo #931717 / azul #162236),
   tal como exige el manual de identidad.
   Tipografía: Montserrat (única tipografía definida en el manual).
=================================================================== */

:root {
  --navy: #162236;         /* azul profundo — texto, headings, footer */
  --navy-deep: #0a2136;    /* panel oscuro (hero card / footer gradient) */
  --navy-deep-2: #0d3252;
  --blue: #0b6fb6;         /* acento azul medio */
  --blue-dark: #08578f;
  --blue-pale: #eaf5fc;    /* fondo azul muy claro para chips / secciones alternas */
  --ivory: #faf9f6;        /* fondo marfil claro */
  --white: #ffffff;
  --ink: #22303f;          /* texto de cuerpo */
  --muted: #5c6b7a;        /* texto secundario */
  --border: #e3e7ec;
  --red: #931717;          /* rojo institucional — reservado al isotipo */

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 20px 45px -25px rgba(10, 33, 54, 0.35);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ===================================================================
   MOVIMIENTO — entrada del hero, flotación sutil, reveal al hacer scroll
   y micro-interacciones. Todo se anula con prefers-reduced-motion.
=================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes floatDiamond {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(-12px); }
}
@keyframes blobMorph {
  0%, 100% { border-radius: 44% 56% 62% 38% / 48% 44% 56% 52%; }
  50%      { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulseSoft {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .22; transform: scale(1.1); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes drawUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reveal al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.pillars-grid.reveal-group .pillar-card,
.entorno-chips.reveal-group .entorno-chip {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.pillars-grid.reveal-group.in-view .pillar-card,
.entorno-chips.reveal-group.in-view .entorno-chip {
  opacity: 1;
  transform: translateY(0);
}
.pillars-grid.reveal-group .pillar-card:nth-child(1),
.entorno-chips.reveal-group .entorno-chip:nth-child(1) { transition-delay: 0s; }
.pillars-grid.reveal-group .pillar-card:nth-child(2),
.entorno-chips.reveal-group .entorno-chip:nth-child(2) { transition-delay: .1s; }
.pillars-grid.reveal-group .pillar-card:nth-child(3),
.entorno-chips.reveal-group .entorno-chip:nth-child(3) { transition-delay: .2s; }
.entorno-chips.reveal-group .entorno-chip:nth-child(4) { transition-delay: .3s; }
.entorno-chips.reveal-group .entorno-chip:nth-child(5) { transition-delay: .4s; }
.entorno-chips.reveal-group .entorno-chip:nth-child(6) { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
}

p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
ul { list-style: none; margin: 0; padding: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow { max-width: 780px; }

img { max-width: 100%; display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-pulse { animation: popScale .4s ease; background: #1b8a4a !important; }
@keyframes popScale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---------- Eyebrow / section kicker (eco del manual: barra + texto) ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--blue);
  margin-bottom: 18px;
}
.eyebrow-bar { width: 28px; height: 3px; background: var(--navy); border-radius: 2px; flex: none; }
.eyebrow-light { color: #bcdcf2; }
.eyebrow-bar-light { background: #fff; }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-sub { color: var(--muted); font-size: 1.05rem; }

.section { padding: 96px 0; }
.section-alt { background: var(--blue-pale); }

/* ---------- Header (integrado en la tarjeta del hero) ---------- */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; }
.brand-logo { height: 40px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}
.nav a {
  position: relative;
  color: var(--navy);
  font-weight: 600;
  font-size: .95rem;
  transition: color .2s ease;
}
.nav a:hover { color: var(--blue); }
.nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: right .25s ease;
}
.nav a:not(.nav-cta):hover::after { right: 0; }
.nav-cta {
  background: var(--navy);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: .88rem !important;
  transition: background .2s ease, transform .2s ease;
}
.nav-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }

.header-mail { margin-left: 28px; }
.header-mail a { font-weight: 600; font-size: .92rem; color: var(--muted); }
.header-mail a:hover { color: var(--blue); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; }

/* ===================================================================
   HERO ENMARCADO — tarjeta blanca flotando sobre fondo azul degradado,
   inspirado en la estructura del modelo de referencia (header integrado,
   visual circular con elementos flotantes, tarjetas superpuestas al
   borde inferior). Colores propios de EPAC, sin fotografía de stock.
=================================================================== */
.hero-frame {
  position: relative;
  padding: 48px 20px 130px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--blue) 130%);
  background-size: 200% 200%;
  animation: gradientShift 18s ease-in-out infinite;
  overflow: hidden;
}
.hero-frame-deco { position: absolute; inset: 0; pointer-events: none; }
.frame-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.fc1 { width: 240px; height: 240px; top: -90px; left: -80px; animation: pulseSoft 9s ease-in-out infinite; }
.fc2 { width: 150px; height: 150px; bottom: -50px; right: 6%; background: rgba(255,255,255,.08); animation: pulseSoft 9s ease-in-out infinite 2s; }
.frame-diamond {
  position: absolute;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  transform: rotate(45deg);
  animation: floatDiamond 7s ease-in-out infinite;
}
.fd1 { top: 14%; right: 6%; }
.fd2 { bottom: 12%; left: 4%; width: 30px; height: 30px; animation-delay: 1.4s; }

.hero-card {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 32px;
  padding: 0 44px 46px;
  box-shadow: 0 50px 90px -40px rgba(6, 20, 34, 0.55);
  overflow: visible;
}
.hero-nav-row { padding-top: 4px; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  padding-top: 56px;
}
.hero h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  animation: fadeInUp .8s cubic-bezier(.2,.7,.3,1) .1s both;
}
.eyebrow-inline {
  font-size: .98rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
  animation: fadeInUp .7s cubic-bezier(.2,.7,.3,1) both;
}
.eyebrow-inline span { color: var(--blue); font-weight: 700; }

.underline-accent { position: relative; display: inline-block; }
.underline-accent::after {
  content: '';
  position: absolute;
  left: 2px; right: 6px; bottom: -8px;
  height: 4px;
  background: var(--blue);
  border-radius: 3px;
  transform-origin: left;
  animation: drawUnderline .7s ease .9s both;
}

.hero-sub {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 500px;
  margin-top: 22px;
  animation: fadeInUp .8s cubic-bezier(.2,.7,.3,1) .22s both;
}
.hero-actions {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 26px 0 4px;
  animation: fadeInUp .8s cubic-bezier(.2,.7,.3,1) .34s both;
}
.hero-mail-link { font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.hero-mail-link:hover { color: var(--blue); border-color: var(--blue); }

/* ---- Visual circular (reemplaza la fotografía del modelo de referencia
   por una pieza gráfica abstracta: no usamos una foto de una persona real
   sin vínculo con EPAC) ---- */
.hero-visual {
  position: relative; display: flex; flex-direction: column; align-items: center;
  animation: fadeInUp .9s cubic-bezier(.2,.7,.3,1) .3s both;
}

/* ---- Ilustración vectorial (mockups + nodos conectados) ----
   Hecha a medida en SVG con la paleta institucional de EPAC: no es una
   imagen generada por IA (esta sesión no tiene esa herramienta), es una
   pieza gráfica propia que sigue la misma idea compositiva de referencia. */
.hero-illustration { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.illu-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  fill: var(--navy);
}
.illu-label-sm { font-size: 12.5px; }

.illu-laptop { animation: floatY 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.illu-phone { animation: floatY 6s ease-in-out infinite 1.1s; transform-box: fill-box; transform-origin: center; }
.illu-node { animation: fadeInUp .7s cubic-bezier(.2,.7,.3,1) both, floatY 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.illu-node-hub { animation-delay: .5s, 2s; }
.illu-node-left { animation-delay: .62s, 0s; }
.illu-node-right { animation-delay: .74s, .8s; }
.illu-links path {
  stroke-dasharray: 6 6;
  animation: dashFlow 3.5s linear infinite;
  opacity: .7;
}
@keyframes dashFlow { to { stroke-dashoffset: -24; } }

.visual-caption {
  margin-top: 30px;
  font-size: .92rem;
  color: var(--muted);
  text-align: center;
  max-width: 34ch;
  animation: fadeInUp .8s ease .5s both;
}

/* ---- Franja de pilares superpuesta al borde inferior de la tarjeta ---- */
.hero-pillars-strip {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 0;
  transform: translateY(50%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.strip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 24px 40px -26px rgba(10, 33, 54, 0.35);
  animation: fadeInUp .7s cubic-bezier(.2,.7,.3,1) both;
  transition: transform .25s ease, box-shadow .25s ease;
}
.strip-card:hover { transform: translateY(-5px); box-shadow: 0 28px 46px -22px rgba(10, 33, 54, 0.45); }
.strip-card:nth-child(1) { animation-delay: .55s; }
.strip-card:nth-child(2) { animation-delay: .65s; }
.strip-card:nth-child(3) { animation-delay: .75s; }
.strip-card svg { width: 22px; height: 22px; color: var(--blue); flex: none; transition: transform .3s ease; }
.strip-card:hover svg { transform: scale(1.15); }

/* ---------- Pillars (Nuestra visión) ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 32px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -26px rgba(10, 33, 54, 0.3);
}
.pillar-card h3 {
  text-transform: uppercase;
  font-size: 1.02rem;
  letter-spacing: .04em;
}
.pillar-card p { color: var(--muted); margin: 0; }
.pillar-a { border-left-color: var(--navy); }
.pillar-b { border-left-color: var(--blue); }
.pillar-c { border-left-color: #6fa8c9; }

.vision-microcopy {
  text-align: center;
  font-style: italic;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 600;
  max-width: 640px;
  margin: 48px auto 0;
}

/* ---------- Entorno ---------- */
.entorno-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.entorno-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.entorno-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.entorno-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 18px;
  font-weight: 600;
  color: var(--navy);
  font-size: .95rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.entorno-chip:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 18px 30px -20px rgba(10, 33, 54, 0.25);
}
.entorno-chip svg { width: 26px; height: 26px; color: var(--blue); flex: none; transition: transform .3s ease; }
.entorno-chip:hover svg { transform: scale(1.12) rotate(-4deg); }

/* ---------- Queremos escucharte (CTA + form) ---------- */
.cta-section {
  position: relative;
  background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-deep-2) 100%);
  background-size: 200% 200%;
  animation: gradientShift 20s ease-in-out infinite;
  color: #fff;
  overflow: hidden;
}
.cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.cta-copy h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.cta-copy p { color: #c9d7e3; font-size: 1.05rem; max-width: 44ch; }

.contact-form {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}
.form-row { margin-bottom: 20px; }
.form-row legend {
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
  margin-bottom: 12px;
  padding: 0;
}
.form-row label:not(.radio-option) {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  color: var(--navy);
  margin-bottom: 6px;
}
fieldset.form-row { border: none; padding: 0; margin: 0 0 24px; }

.radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  color: var(--ink);
  cursor: pointer;
}
.radio-option input { accent-color: var(--blue); width: 16px; height: 16px; flex: none; }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--ivory);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 111, 182, .12);
}
textarea { resize: vertical; }
.radio-option { transition: color .2s ease; }
.radio-option:hover { color: var(--blue); }

.form-note { font-size: .8rem; color: var(--muted); text-align: center; margin: 14px 0 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: #cdd9e4;
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-logo { height: 34px; width: auto; }
.footer-col h4 {
  color: #fff;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-line { color: #a9bbcb; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-muted { opacity: .6; }

.disclaimer {
  font-size: .85rem;
  color: #9fb3c6;
  line-height: 1.6;
  max-width: 820px;
  margin: 32px 0;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 0 26px;
  font-size: .8rem;
  color: #7c90a3;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .entorno-grid, .cta-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; margin-bottom: 8px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

@media (max-width: 640px) {
  .hero-frame { padding: 28px 14px 56px; }
  .hero-card { padding: 0 22px 34px; border-radius: 24px; }
  .hero-nav-row { padding-top: 0; }
  .hero-grid { padding-top: 32px; gap: 36px; }
  .hero-pillars-strip {
    position: static;
    transform: none;
    left: auto; right: auto;
    grid-template-columns: 1fr;
    margin-top: 28px;
    gap: 12px;
  }
}

@media (max-width: 760px) {
  .nav, .header-mail { display: none; }
  .hero-nav-row { position: relative; }
  .hero-nav-row.nav-open .nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 4px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 30px -20px rgba(10,33,54,.25);
  }
  .hero-nav-row.nav-open .nav a { padding: 10px 0; width: 100%; }
  .hero-nav-row.nav-open .nav a.nav-cta { display: inline-flex; padding: 10px 20px; width: auto; margin-top: 4px; }
  .nav-toggle { display: flex; }
  .radio-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 26px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}