/* =========================================================
   VALÍA — página "Visión Valía"
   Usa las variables y componentes de styles.css
   ========================================================= */
.page-vision{background:var(--blanco)}
/* Encabezado siempre sólido: la portada de esta página es clara */
.page-vision .site-header{background:rgba(5,21,47,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ---------- Portada ---------- */
.v-hero{position:relative;overflow:hidden;color:var(--azul-hondo);padding:170px 0 120px;min-height:640px;
  background:linear-gradient(180deg,#EEF5FF 0%,#E8F0FC 100%)}
.v-hero-img{position:absolute;right:0;bottom:0;width:min(60vw,980px);display:flex;align-items:flex-end;pointer-events:none}
.v-hero-img img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 22%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 22%,#000 94%,transparent 100%);mask-composite:intersect;
  transform-origin:right bottom;animation:grow 9s ease-in-out infinite alternate}
@keyframes grow{from{transform:scale(1)}to{transform:scale(1.04)}}
.v-hero-in{position:relative;z-index:2}
.crumb-l{font-size:13px;color:var(--muted);margin-bottom:28px}
.crumb-l a{border-bottom:1px solid rgba(11,42,91,.3)}
.crumb-l a:hover{color:var(--turquesa)}
.crumb-l b{color:var(--turquesa);font-weight:500}
.v-title{font-weight:500;font-size:clamp(48px,6.8vw,100px);line-height:1;letter-spacing:-.04em;margin:22px 0 26px}
.v-lead{font-size:clamp(17px,1.6vw,21px);color:var(--muted);max-width:470px;line-height:1.5}

/* ---------- Nuestra visión + etapas ---------- */
.v-story{padding:110px 0 120px;background:#fff}
.v-h2{font-weight:500;font-size:clamp(34px,4.2vw,58px);line-height:1.06;letter-spacing:-.03em;margin-top:18px}
.v-story .v-h2{color:var(--azul-hondo)}
.v-story-head{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;margin-bottom:72px}
.v-story-copy{border-left:1px solid var(--linea-clara);padding-left:40px;color:var(--muted);font-size:17px;line-height:1.6}
.v-story-copy p + p{margin-top:16px}
.v-story-copy em{color:var(--azul);font-style:italic}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stage-card{position:relative}
.stage-n{font-size:15px;color:var(--turquesa);font-weight:500}
.stage-card h3{display:flex;align-items:center;gap:14px;font-size:24px;font-weight:600;color:var(--azul-hondo);margin:4px 0 12px}
/* línea con punto que conecta cada etapa con la siguiente */
.stage-card:not(:last-child) h3::after{content:"";flex:1;height:1.5px;margin-right:-14px;background:linear-gradient(90deg,var(--turq-claro),var(--turquesa));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * .25s + .3s)}
.stage-card:not(:last-child) h3::before{content:"";position:absolute;right:-20px;top:41px;width:8px;height:8px;border-radius:50%;background:var(--turquesa);opacity:0;transition:opacity .4s;transition-delay:calc(var(--i) * .25s + 1.2s)}
.stage-card.in h3::after{transform:scaleX(1)}
.stage-card.in h3::before{opacity:1}
.stage-p{color:var(--muted);font-size:15.5px;line-height:1.5;min-height:72px}
.stage-card figure{position:relative;margin-top:20px;border-radius:12px;overflow:hidden;aspect-ratio:4/3.1;cursor:default}
.stage-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.stage-card figcaption{position:absolute;inset:auto 0 0 0;padding:16px;color:#fff;font-size:13.5px;line-height:1.45;
  background:linear-gradient(180deg,transparent,rgba(6,40,83,.92) 45%);transform:translateY(101%);transition:transform .45s var(--ease)}
.stage-card figcaption b{display:block;color:var(--turq-claro);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
.stage-card:hover figure img{transform:scale(1.07)}
.stage-card:hover figcaption{transform:none}

/* ---------- Manifiesto ---------- */
.v-manifest{padding:100px 0 96px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='128'%3E%3Cpath d='M0 64H228M114 0V128' stroke='rgba(120,170,255,.08)' stroke-width='1' fill='none'/%3E%3C/svg%3E") -74px -64px/228px 128px repeat,
  radial-gradient(ellipse 50% 70% at 100% 0%,rgba(92,108,255,.25),transparent 60%),
  radial-gradient(ellipse 40% 60% at 0% 100%,rgba(47,211,203,.14),transparent 60%),
  var(--azul-hondo)}
.v-manifest-head{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;margin-bottom:64px}
.v-manifest-head > p{color:#DCE6F7;font-size:18px;line-height:1.6;font-weight:300}
.beliefs{display:grid;grid-template-columns:repeat(4,1fr)}
.belief{display:flex;gap:18px;align-items:flex-start;padding:6px 28px;border-left:1px solid rgba(255,255,255,.18)}
.belief:first-child{border-left:0;padding-left:0}
.belief svg{flex:none;width:38px;height:38px;fill:none;stroke:var(--turq-claro);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.belief p{font-size:18px;line-height:1.45;color:#fff}
.belief:hover svg{transform:scale(1.12) rotate(-6deg)}

/* ---------- Cierre ---------- */
.v-cta{position:relative;overflow:hidden;padding:140px 0;min-height:560px;color:var(--azul-hondo);background:linear-gradient(180deg,#EEF3FC,#E6EEFB)}
.v-cta .ribbon{width:64%}
.v-cta .wrap{position:relative;z-index:2}
.v-cta .v-h2{margin-top:0}
.v-cta p{font-size:18px;color:var(--muted);margin:18px 0 30px;max-width:420px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .stages{grid-template-columns:1fr 1fr;gap:44px 28px}
  .stage-card:nth-child(2) h3::after,.stage-card:nth-child(2) h3::before{display:none}
  .beliefs{grid-template-columns:1fr 1fr;gap:28px 0}
  .belief:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:760px){
  .v-hero{padding:130px 0 260px;min-height:0}
  .v-hero-img{width:100%}
  .v-story-head,.v-manifest-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .v-story-copy{border-left:0;padding-left:0}
  .stages{grid-template-columns:1fr}
  .stage-card h3::after,.stage-card h3::before{display:none}
  .stage-p{min-height:0}
  .stage-card figcaption{transform:none}
  .beliefs{grid-template-columns:1fr;gap:24px}
  .belief{border-left:0;padding:0}
  .v-cta{padding:90px 0;min-height:0}
  .v-cta .ribbon{width:100%;opacity:.4}
}