/* =====================================================================
   Lorena Valencia — Perfil Ejecutivo
   Diseño: editorial moderno · portada industrial · 5 bloques · claro
   ===================================================================== */

:root{
  --bg:#FCFCFD; --surface:#F4F6F9; --card:#FFFFFF;
  --line:rgba(15,23,42,.08); --line-strong:rgba(15,23,42,.16);
  --ink:#0E1424; --ink-2:#525B6E; --ink-3:#8A93A6; --slate:#3D4A66;
  --azul:#1F55E8; --azul-soft:#2E6CFF; --azul-glow:rgba(31,85,232,.22);
  --oro:#A9853C;
  --noche:#0B1020; /* portada y bloque 100 días */
  --sombra:0 1px 2px rgba(15,20,40,.04), 0 16px 40px -12px rgba(15,20,40,.14);
  --display:"Sora",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --maxw:1180px; --pad:clamp(20px,5vw,64px); --r:16px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; color-scheme:light }
section[id]{ scroll-margin-top:70px }
a:focus-visible, button:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; border-radius:6px }
body{ font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--azul); color:#fff }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.section{ padding-block:clamp(48px,6vw,72px) }
.eyebrow{
  font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--azul); display:inline-flex; align-items:center; gap:.6em; margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--azul) }
.h2{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.7rem,4vw,2.7rem); line-height:1.1; max-width:20ch }
.lead{ color:var(--ink-2); font-size:clamp(1rem,1.5vw,1.12rem); max-width:58ch; margin-top:1rem }

/* Reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.1s } .reveal[data-d="2"]{ transition-delay:.2s }

/* Cascada: los hijos entran escalonados (índice --i lo pone el JS) */
.metric.reveal{ transition-delay:calc(var(--i,0) * 70ms) }
.sellos .sello{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1),
             border-color .3s, box-shadow .3s;
  transition-delay:calc(var(--i,0) * 60ms);
}
.sellos.in .sello{ opacity:1; transform:none }

/* Entrada animada del contenido al cambiar pestañas */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.tray-panel > *{ animation:fadeUp .45s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 45ms) }

@media (prefers-reduced-motion:reduce){
  .reveal, .sellos .sello{ opacity:1; transform:none; transition:none }
  .tray-panel > *{ animation:none }
  html{ scroll-behavior:auto }
}

/* ---------- Progreso de lectura ---------- */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; background:transparent }
.progress span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--azul),var(--azul-soft)); transform:scaleX(0); transform-origin:left }

/* ---------- NAV (transparente sobre portada oscura → blanco al bajar) ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); border-bottom:1px solid transparent; color:#fff;
  transition:background .4s, border-color .4s, padding .4s, color .4s;
}
.nav.scrolled{
  background:rgba(252,252,253,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--line); padding-block:11px; color:var(--ink);
}
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:700; letter-spacing:.02em }
.monogram{
  width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(145deg,var(--azul-soft),#1746c9); color:#fff;
  font-family:var(--display); font-weight:700; font-size:1.05rem; box-shadow:0 6px 18px var(--azul-glow);
}
.brand small{ display:block; font-family:var(--body); font-weight:600; font-size:.62rem; letter-spacing:.22em; opacity:.65; margin-top:1px }
.nav-links{ display:flex; gap:2rem; font-size:.86rem; opacity:.92 }
.nav-links a{ position:relative; transition:opacity .25s }
.nav-links a:hover{ opacity:1 }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:currentColor; transition:width .3s }
.nav-links a:hover::after{ width:100% }
/* Scrollspy: la sección activa queda marcada */
.nav-links a[aria-current="true"]{ opacity:1; font-weight:700 }
.nav-links a[aria-current="true"]::after{ width:100%; background:var(--azul-soft) }
.nav.scrolled .nav-links a[aria-current="true"]::after{ background:var(--azul) }
@media (max-width:860px){ .nav-links{ display:none } }

.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:10px; border-radius:10px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); cursor:pointer;
}
.nav.scrolled .nav-burger{ background:var(--card); border-color:var(--line-strong) }
.nav-burger span{ display:block; height:2px; width:100%; background:currentColor; border-radius:2px; transition:transform .3s }
body.menu-open .nav-burger span:first-child{ transform:translateY(3.5px) rotate(45deg) }
body.menu-open .nav-burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }
@media (max-width:860px){ .nav-burger{ display:flex } }

.mobile-menu{
  position:fixed; inset:0; z-index:45; background:rgba(252,252,253,.97);
  display:flex; flex-direction:column; justify-content:center; padding:0 9vw;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .35s, visibility 0s .35s;
}
body.menu-open .mobile-menu{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .35s }
body.menu-open{ overflow:hidden }
.mobile-menu a{
  font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,7vw,2.1rem); letter-spacing:-.02em;
  padding:.55em 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:.8em; color:var(--ink);
}
.mobile-menu a i{ font-style:normal; font-size:.7rem; color:var(--azul); font-family:var(--body); font-weight:600; letter-spacing:.14em }

/* ---------- PORTADA (foto de planta full-bleed) ---------- */
.cover{ position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--noche); overflow:hidden }
.cover-img{ position:absolute; inset:0; width:100%; height:112%; object-fit:cover; object-position:72% 30%; will-change:transform }
.cover-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,16,32,.95) 0%, rgba(11,16,32,.74) 40%, rgba(11,16,32,.22) 68%, rgba(11,16,32,0) 82%),
    linear-gradient(0deg, rgba(11,16,32,.6) 0%, transparent 36%);
}
.cover-content{ position:relative; z-index:2; color:#fff; padding-bottom:clamp(48px,9vh,96px); padding-top:120px }
.cover .eyebrow{ color:#9DB9FF; font-size:.8rem } .cover .eyebrow::before{ background:#9DB9FF }
.cover h1{
  font-family:var(--display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(3rem,9vw,6.2rem); line-height:.94;
}
.cover .tagline{
  font-family:var(--display); font-weight:600; color:#E8EDF8;
  font-size:clamp(1.2rem,2.6vw,1.8rem); margin-top:1.3rem; letter-spacing:-.01em; max-width:26ch; line-height:1.35;
}
.cover .valor{ color:#B9C4DB; margin-top:1rem; max-width:46ch; font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.55 }
.cover-proof{ display:flex; flex-wrap:wrap; gap:.4em 1.15em; align-items:center; margin-top:1.7rem }
.cover-proof span{
  font-size:.9rem; color:#D3DCEE; letter-spacing:.04em; font-weight:600;
  display:inline-flex; align-items:center; gap:1.15em;
}
.cover-proof span + span::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--oro); flex:none }
.cover-cta{ display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap }

/* Móvil: la foto arriba y el texto DEBAJO sobre fondo sólido —
   sin superposición texto/fotografía, contraste garantizado */
@media (max-width:860px){
  .cover{ display:block; min-height:auto }
  .cover-img{
    position:relative; inset:auto; width:100%;
    height:min(50svh,430px); object-fit:cover; object-position:70% 22%;
    display:block;
  }
  .cover-scrim{
    inset:0 0 auto 0; height:min(50svh,430px);
    background:
      linear-gradient(180deg, rgba(11,16,32,.55), transparent 24%),
      linear-gradient(0deg, var(--noche) 2%, rgba(11,16,32,0) 30%);
  }
  .cover-content{ padding-top:8px; padding-bottom:44px }
  .cover .tagline{ max-width:none }
  /* El botón del menú debe leerse sobre la pared blanca de la foto */
  .nav:not(.scrolled) .nav-burger{ background:rgba(11,16,32,.5); border-color:rgba(255,255,255,.4) }
}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.95em 1.55em; border-radius:100px; display:inline-flex; align-items:center; gap:.6em;
  transition:transform .25s, box-shadow .3s, background .3s, border-color .3s; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--ink); appearance:none; -webkit-appearance:none;
}
.btn svg{ width:18px; height:18px }
.btn-primary{ background:var(--azul); color:#fff; box-shadow:0 10px 26px var(--azul-glow) }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 36px var(--azul-glow) }
.btn-glass{ border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.btn-glass:hover{ background:rgba(255,255,255,.16); transform:translateY(-3px) }
.btn-ghost{ border-color:rgba(15,23,42,.22); color:var(--ink); background:var(--card) }
.btn-ghost:hover{ border-color:var(--azul); background:rgba(46,108,255,.06); transform:translateY(-3px) }

/* ---------- MÉTRICAS ---------- */
.metrics{ border-block:1px solid var(--line); background:var(--surface) }
.metrics .wrap{ padding-block:clamp(30px,4.5vw,48px) }
.metric-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra) }
.metric{
  background:var(--card); padding:clamp(18px,2.2vw,28px) clamp(14px,1.8vw,24px);
  position:relative; transition:background .3s;
}
/* Línea de acento al pasar el mouse: la banda se siente viva */
.metric::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--azul),var(--azul-soft));
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.metric:hover{ background:radial-gradient(220px at var(--mx,50%) var(--my,50%), rgba(46,108,255,.07), transparent 65%), #FAFBFE }
.metric:hover::after{ transform:scaleX(1) }
.metric .num{
  font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.03em; line-height:1;
  background:linear-gradient(160deg,var(--ink),var(--azul)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metric .label{ font-size:.8rem; color:var(--ink); margin-top:.6rem; font-weight:600; line-height:1.25 }
.metric .note{ font-size:.7rem; color:var(--ink-3); margin-top:.2rem }
@media (max-width:980px){ .metric-grid{ grid-template-columns:repeat(3,1fr) } .metric:nth-last-child(-n+2){ grid-column:span 1 } }
@media (max-width:520px){
  .metric-grid{ grid-template-columns:repeat(2,1fr) }
  .metric:last-child{ grid-column:1/-1 } /* la 5ª ocupa la fila completa */
}

/* ---------- PERFIL ---------- */
.perfil-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center }
.bio p{ color:var(--ink-2); margin-top:1rem; font-size:1.02rem }
.bio p:first-child{ color:var(--ink); font-size:clamp(1.05rem,1.7vw,1.22rem); font-weight:500; line-height:1.55 }
.sellos{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:1.8rem }
.sello{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 15px 12px;
  transition:border-color .3s, transform .3s, box-shadow .3s; position:relative; overflow:hidden;
}
.sello::before{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:linear-gradient(90deg,var(--azul),transparent); opacity:0; transition:opacity .3s }
.sello:hover{
  transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--line-strong);
  background:radial-gradient(200px at var(--mx,50%) var(--my,50%), rgba(46,108,255,.08), transparent 65%), var(--card);
}
.sello:hover::before{ opacity:1 }
.sello b{ font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:-.01em; display:block }
.sello span{ font-size:.7rem; color:var(--ink-2); line-height:1.3; display:block; margin-top:.3rem }
.sello i{ font-style:normal; font-size:.64rem; color:var(--oro); font-family:var(--display); font-weight:600; margin-top:.35rem; display:block }
.aliados{ margin-top:1.6rem; font-size:.78rem; color:var(--ink-3); line-height:1.6; max-width:58ch }
@media (max-width:920px){ .perfil-grid{ grid-template-columns:1fr } .sellos{ grid-template-columns:repeat(2,1fr) } }

/* Foto de perfil (sede + ISO) */
.perfil-photo{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sombra); background:var(--card); margin-bottom:14px; max-width:370px;
}
.perfil-photo img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; object-position:center 22% }
.perfil-photo figcaption{ padding:10px 14px; font-size:.72rem; color:var(--ink-3); border-top:1px solid var(--line) }

/* Mapa */
.map-col{ }
.map-stage{
  position:relative; aspect-ratio:4/5; max-width:300px; border:1px solid var(--line); border-radius:var(--r);
  background:radial-gradient(120% 100% at 50% 0%, rgba(46,108,255,.05), transparent 60%), var(--card);
  overflow:hidden; box-shadow:var(--sombra);
}
.map-stage svg{ position:absolute; inset:0; width:100%; height:100% }
.geo-dot{ fill:rgba(15,23,42,.10) }
.node{ fill:#C3CAD9; transition:fill .5s }
.node.on{ fill:var(--azul) }
.node-glow{ fill:var(--azul-soft); opacity:0; transition:opacity .8s }
.node-glow.on{ opacity:.14 }
/* Latido suave tras encenderse (solo si el usuario no pide movimiento reducido) */
@media (prefers-reduced-motion:no-preference){
  .node-glow.on{ animation:latido 3.6s ease-in-out infinite; animation-delay:calc(var(--i,0) * .3s) }
  @keyframes latido{ 0%,100%{ opacity:.10 } 50%{ opacity:.22 } }
}
.map-link{ stroke:var(--azul); stroke-width:.5; opacity:0; transition:opacity .6s }
.map-link.on{ opacity:.18 }
.map-count{ position:absolute; left:16px; bottom:14px; font-family:var(--display); font-weight:700 }
.map-count b{ font-size:2.1rem; background:linear-gradient(160deg,var(--ink),var(--azul)); -webkit-background-clip:text; background-clip:text; color:transparent }
.map-count span{ display:block; font-size:.72rem; color:var(--ink-2); font-weight:600; letter-spacing:.04em }
.map-note{ color:var(--ink-3); font-size:.78rem; margin-top:1rem; max-width:40ch; line-height:1.55 }
@media (max-width:920px){ .map-col{ position:static; max-width:400px } }

/* ---------- PRODUCTOS (explorador con pestañas) ---------- */
.prods{ background:var(--surface); border-block:1px solid var(--line) }
.prod-explorer{ margin-top:2rem }
.prod-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px }
@media (max-width:640px){ .prod-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin } }
.prod-tab{
  font-family:var(--display); font-weight:600; font-size:.84rem; letter-spacing:.01em;
  padding:.7em 1.2em; border-radius:100px; cursor:pointer; white-space:nowrap;
  background:var(--card); color:var(--ink-2); border:1px solid var(--line);
  transition:color .25s, background .25s, border-color .25s, box-shadow .25s;
  appearance:none; -webkit-appearance:none;
}
.prod-tab:hover{ color:var(--ink); border-color:var(--line-strong) }
.prod-tab[aria-selected="true"]{ background:var(--azul); color:#fff; border-color:var(--azul); box-shadow:0 8px 20px var(--azul-glow) }

.prod-panel{
  display:grid; grid-template-columns:1.1fr .9fr; min-height:440px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra);
}
.prod-visual{ position:relative; background:radial-gradient(120% 100% at 50% 0%, rgba(46,108,255,.07), var(--surface)); min-height:280px; transition:background-color .35s }
.prod-visual img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .35s;
}
/* Renders de estudio (fondo negro): producto flotando en panel azul-noche */
.prod-visual.dark{
  background:radial-gradient(110% 90% at 50% 8%, rgba(46,108,255,.22), transparent 55%), #0B1020;
}
.prod-visual.dark img{ object-fit:contain; padding:clamp(18px,3vw,36px); mix-blend-mode:lighten }
/* Láminas oficiales del catálogo (rombo morado sobre fondo claro):
   contain sin relleno — el fondo del panel replica el de la lámina */
.prod-visual.deck{ background:#F0F1F5 }
.prod-visual.deck img{ object-fit:contain }
.prod-visual .big-icon{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--azul);
  transition:opacity .35s;
}
.prod-visual .big-icon svg{ width:110px; height:110px; opacity:.9 }
.prod-visual.fading img, .prod-visual.fading .big-icon{ opacity:0 }
.prod-info{ padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; justify-content:center }
.prod-flag{
  align-self:flex-start; font-family:var(--display); font-size:.64rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--azul); background:rgba(46,108,255,.07); border:1px solid rgba(46,108,255,.22); padding:.45em .9em; border-radius:100px;
}
.prod-info h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.7rem); letter-spacing:-.01em; margin-top:1rem }
.prod-info p{ color:var(--ink-2); margin-top:.8rem; font-size:.98rem; max-width:44ch }
@media (max-width:820px){ .prod-panel{ grid-template-columns:1fr } .prod-visual{ min-height:240px } }

/* ---------- TRAYECTORIA (pestañas: formación / élite / experiencia) ---------- */
/* Banda gris: marca el inicio de sección sin exigir aire blanco extra */
#trayectoria{ background:var(--surface); border-top:1px solid var(--line) }
.tray{ margin-top:2rem }
.tray-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sombra); padding:clamp(20px,3.2vw,40px);
}
/* Altura fija en desktop: evita que el layout salte al cambiar de pestaña */
@media (min-width:860px){ .tray-panel{ min-height:530px } }
.tray-item{ display:grid; grid-template-columns:60px 1fr; gap:1.2rem; padding:.9rem 0; border-bottom:1px solid var(--line); align-items:baseline }
.tray-item:last-child{ border-bottom:none }
.tray-item b{ font-family:var(--display); font-weight:700; color:var(--azul); font-size:.9rem; letter-spacing:.04em }
.tray-item h4{ font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:-.01em; color:var(--ink); line-height:1.35 }
.tray-item span{ display:block; color:var(--ink-3); font-size:.8rem; margin-top:.15rem }
.tray-grupo{ padding:1rem 0; border-bottom:1px solid var(--line) }
.tray-grupo:last-child{ border-bottom:none }
.tray-grupo h4{
  font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); margin-bottom:.4rem;
}
.tray-grupo p{ color:var(--ink-2); font-size:.92rem; line-height:1.65 }
@media (max-width:560px){ .tray-item{ grid-template-columns:48px 1fr; gap:.8rem } }

/* ---------- LIDERAZGO (acordeón oscuro) ---------- */
.dias{
  --ink:#F4F6FA; --ink-2:#A9B1C4; --ink-3:#7E88A0;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --azul-soft:#7FA5FF;
  background-color:var(--noche);
  background-image:
    radial-gradient(900px 500px at 80% -10%, rgba(46,108,255,.18), transparent 60%),
    linear-gradient(180deg,#0B1020,#0D1328 60%,#0B1020);
  border-block:1px solid rgba(255,255,255,.06);
  color:var(--ink);
}
.dias .eyebrow{ color:var(--azul-soft) } .dias .eyebrow::before{ background:var(--azul-soft) }
.dias-head{ text-align:center; max-width:60ch; margin-inline:auto }
.dias-head .lead{ margin-inline:auto; color:var(--ink-2); font-style:italic; font-family:var(--display); font-weight:500 }
/* Remate de acción bajo el acordeón */
.dias-cta{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.8rem;
  font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--azul-soft);
  border-bottom:1px solid rgba(127,165,255,.4); padding-bottom:.2em; transition:gap .25s, border-color .25s;
}
.dias-cta:hover{ gap:.8em; border-color:var(--azul-soft) }
/* Columnas: foto de conferencia + acordeón */
.dias-cols{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(28px,4.5vw,64px); align-items:center; margin-top:2.8rem }
.dias-photo{
  border-radius:var(--r); overflow:hidden; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px rgba(0,0,0,.45); background:rgba(255,255,255,.03); max-width:390px;
}
.dias-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover }
.dias-photo figcaption{ padding:12px 16px; font-size:.74rem; color:var(--ink-3); border-top:1px solid var(--line); line-height:1.4 }
@media (max-width:820px){
  .dias-cols{ grid-template-columns:1fr }
  .dias-photo{ max-width:380px; margin-inline:auto }
}

.acordeon{ border-top:1px solid var(--line) }
.pilar{ border-bottom:1px solid var(--line) }
.pilar-btn{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.3rem;
  padding:1.35rem 4px; background:none; border:none; cursor:pointer; color:var(--ink); text-align:left;
  appearance:none; -webkit-appearance:none;
}
.pilar-btn .n{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--azul-soft); letter-spacing:.04em }
.pilar-btn h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,2vw,1.3rem); letter-spacing:-.01em }
.pilar-btn .chev{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; transition:transform .35s, border-color .3s, background .3s; flex:none }
.pilar-btn .chev svg{ width:14px; height:14px }
.pilar-btn:hover .chev{ border-color:var(--azul-soft) }
.pilar[data-open="true"] .chev{ transform:rotate(180deg); background:rgba(46,108,255,.15); border-color:var(--azul-soft) }
.pilar-body{ overflow:hidden; max-height:0; transition:max-height .45s cubic-bezier(.2,.7,.2,1) }
.pilar-body p{ color:var(--ink-2); font-size:.98rem; max-width:60ch; padding:0 4px 1.4rem calc(1rem + 1.3rem + 14px) }
@media (max-width:640px){ .pilar-body p{ padding-left:4px } }

/* ---------- CONTACTO (foto + contenido) ---------- */
.cta-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(32px,5vw,72px); align-items:center }
.cta-photo{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sombra); max-width:380px; justify-self:end;
}
.cta-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top }
@media (max-width:860px){
  .cta-grid{ grid-template-columns:1fr }
  .cta-photo{ max-width:300px; justify-self:start }
}
.cta h2{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.03em; line-height:1 }
.cta .lead{ margin-top:1.1rem }
.cta-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem }
.cta-meta{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:2.2rem; color:var(--ink-2); font-size:.86rem }
.cta-meta a:hover{ color:var(--azul) }
.cta-meta span{ display:flex; align-items:center; gap:.5em }
.cta-meta svg{ width:15px; height:15px; color:var(--azul) }

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line); padding:30px var(--pad); display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap; color:var(--ink-3); font-size:.78rem; background:var(--surface);
}
.footer .brand{ color:var(--ink) } .footer .brand small{ color:var(--ink-3) }