/* CSS EXTERNO CONECTADO */
:root{
  --navy:#071d3a;
  --navy2:#0d3453;
  --teal:#0f9895;
  --teal2:#1ba99c;
  --orange:#ff7a2f;
  --cream:#f5f0e7;
  --paper:#fbfaf7;
  --ink:#10243e;
  --muted:#687681;
  --header:86px;
  --max:1180px;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header);
}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 44px));margin-inline:auto}

/* Header */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header);
  z-index:100;
  background:rgba(251,250,247,.95);
  border-bottom:1px solid rgba(7,29,58,.08);
  backdrop-filter:blur(14px);
}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{height:72px;display:flex;align-items:center;min-width:0}
.brand img{
  display:block;
  max-height:66px;
  width:auto;
  object-fit:contain;
}
.main-nav{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:750}
.main-nav a{white-space:nowrap}
.nav-cta{color:var(--teal);border:1px solid var(--teal);border-radius:999px;padding:9px 16px}
.menu-toggle{display:none;border:0;background:none;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:4px}

/* Snap */
.snap-shell{
  padding-top:var(--header);
  scroll-snap-type:y proximity;
}
.screen{
  position:relative;
  min-height:calc(100vh - var(--header));
  display:flex;
  align-items:center;
  padding:44px 0;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  overflow:hidden;
}
.light{background:var(--paper)}
.cream{background:var(--cream)}
.dark{background:linear-gradient(135deg,var(--navy),#092b48 65%,#0c4056);color:white}
.conversation{background:linear-gradient(135deg,#edf6f2,#f8f3ea)}

/* Hero */
.hero{
  color:white;
  background:linear-gradient(135deg,var(--navy),#0a2d49 58%,#0a4056);
}
.hero-grid,.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:3;
}
.hero-copy,.hero-right,.intro{min-width:0}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sunrise{
  position:absolute;right:7%;top:8%;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 45% 45%,#ffd88a,var(--orange) 70%);
  opacity:.72;filter:blur(.2px)
}
.ridge{
  position:absolute;left:45%;right:-10%;bottom:-12%;
  height:62%;
  border-radius:50% 30% 0 0;
  transform:skewX(-8deg);
  opacity:.16;
}
.ridge-1{background:#d6efec;bottom:-20%;height:70%}
.ridge-2{background:#81c9c5;bottom:-28%;height:64%;left:55%}
.ridge-3{background:#1b7f8d;bottom:-36%;height:58%;left:64%;opacity:.2}

.eyebrow{margin:0 0 13px;font-size:.75rem;letter-spacing:.18em;font-weight:900;color:#77e4da}
.eyebrow.teal{color:var(--teal)}
.eyebrow.accent{color:#7be5db}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:1.03;letter-spacing:-.035em;margin:0 0 20px}
h1{font-size:clamp(3rem,5.5vw,5.4rem)}
h2{font-size:clamp(2.25rem,4.2vw,3.9rem)}
h3{margin:0}
.hero-lead,.lead{font-size:1.12rem;max-width:610px}
.hero-lead,.pale{color:#dbe7ed}
.hero-right{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero-statement{font-size:1rem;color:#e5eef2;max-width:560px;margin:0}
.button{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;border-radius:999px;font-weight:850;transition:.2s}
.primary{background:var(--teal);color:white}
.primary:hover{background:#0c817e;transform:translateY(-2px)}
.next-chapter{
  position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:.68rem;letter-spacing:.16em;color:#d8e5eb;opacity:.75
}

/* Hero system */
.system-graphic{
  width:min(390px,100%);
  aspect-ratio:1;
  position:relative;
  margin:0 auto 2px;
}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.o1{inset:3%}.o2{inset:19%;border-style:dashed}.o3{inset:34%;border-color:rgba(27,169,156,.72)}
.core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:45% 55% 60% 40%;
  background:radial-gradient(circle at 35% 35%,#ffd992,var(--orange) 64%);
  box-shadow:0 0 0 8px rgba(255,122,47,.08);
  z-index:3
}
.sg-node{
  position:absolute;z-index:4;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.13);
  font-size:.72rem;
  backdrop-filter:blur(4px)
}
.n-system{left:50%;top:0;transform:translateX(-50%)}
.n-context{right:-3%;top:34%}
.n-business{right:4%;bottom:12%}
.n-data{left:4%;bottom:12%}
.n-people{left:-3%;top:34%}
.n-results{left:50%;bottom:-1%;transform:translateX(-50%)}
.connections{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.connections path{fill:none;stroke:rgba(112,224,214,.28);stroke-width:1.3;stroke-dasharray:4 6}

/* General */
.muted{color:var(--muted)}
.intro{max-width:560px}
.palindrome{
  margin-top:34px;
  font-size:clamp(1.8rem,3.4vw,3.2rem);
  letter-spacing:.34em;
  font-weight:850;
  color:var(--navy)
}
.signals{display:flex;flex-direction:column;gap:9px}
.signal{
  display:grid;grid-template-columns:40px 1fr;gap:15px;
  padding:14px 0;border-bottom:1px solid rgba(16,36,62,.12)
}
.signal>span{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:#e4f4f1;color:var(--teal);font-size:.72rem;font-weight:900
}
.signal h3{font-size:1.02rem;margin-bottom:5px}
.signal p{margin:0;color:var(--muted);font-size:.9rem}
.connect{padding-top:12px}
.connect span{display:block;color:var(--muted);font-size:.92rem}
.connect strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;font-weight:500;color:var(--navy);margin-top:3px}

/* System map */
.system-map{
  min-height:430px;
  position:relative;
  border-radius:50%;
  border:1px solid rgba(15,152,149,.18);
  background:radial-gradient(circle,#fff 0 18%,rgba(255,255,255,.78) 19% 44%,rgba(15,152,149,.03) 45% 100%)
}
.context{position:absolute;left:50%;top:6%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.18em;color:var(--teal);font-weight:800}
.center,.map-node{position:absolute;display:grid;place-items:center;text-align:center;border-radius:50%;z-index:3;font-weight:850;letter-spacing:.04em}
.center{width:105px;height:105px;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--navy);color:white;font-size:.75rem}
.map-node{width:76px;height:76px;background:white;border:1px solid rgba(7,29,58,.13);box-shadow:0 10px 25px rgba(7,29,58,.05);font-size:.6rem}
.people{left:11%;top:25%}.business{right:10%;top:24%}.data{left:15%;bottom:15%}.results{right:13%;bottom:14%}
.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.r1{width:72%;height:72%;border:1px dashed rgba(15,152,149,.3)}
.r2{width:47%;height:47%;border:1px solid rgba(15,152,149,.15)}
.discovery{position:absolute;right:24%;top:48%;width:23px;height:23px;border-radius:45% 55% 58% 42%;background:radial-gradient(circle at 35% 35%,#ffd991,var(--orange));z-index:4}
.principles{display:grid;gap:8px;margin-top:24px}
.principles p{margin:0;padding:10px 0;border-bottom:1px solid rgba(16,36,62,.12)}

/* Cocrear */
.statement{font-family:Georgia,"Times New Roman",serif;font-size:1.55rem;color:white;margin-top:26px}
.cocrear-flow{display:flex;flex-direction:column;gap:24px}
.cloud{display:flex;flex-wrap:wrap;gap:9px}
.cloud span{padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.flow span,.flow strong{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.07);font-size:.86rem}
.flow b{color:#7fe1d7}
.flow strong{background:var(--orange)}
.small{font-size:.95rem}

/* Acompañar */
.section-head{margin-bottom:26px}
.territories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.territory{
  background:white;border:1px solid #e3e9ec;border-radius:18px;padding:22px;
  min-height:220px;position:relative;overflow:hidden
}
.territory::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--navy),var(--teal),var(--orange))}
.territory>span{font-size:.68rem;color:var(--muted);letter-spacing:.15em}
.territory h3{font-size:1.18rem;color:var(--navy);margin-top:14px}
.territory h4{margin:3px 0 10px;color:var(--teal);font-size:.94rem}
.territory p{margin:0;color:var(--muted);font-size:.86rem}
.territory-close{text-align:center;max-width:760px;margin:24px auto 0}

/* Conversation */
blockquote{
  margin:22px 0;padding:18px 22px;border-left:4px solid var(--orange);
  background:rgba(255,255,255,.68);border-radius:0 16px 16px 0;
  display:grid;gap:4px
}
blockquote span{color:#5b6974}
blockquote em{font-style:normal;color:var(--teal);font-weight:900;margin-top:4px}
.person{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:22px;
  align-items:start;
  background:white;border-radius:24px;padding:20px;box-shadow:0 18px 50px rgba(7,29,58,.08)
}
.photo{position:relative;border-radius:18px;overflow:hidden;background:#e7efed}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.photo-accent{position:absolute;right:13px;top:13px;width:23px;height:23px;border-radius:45% 55% 58% 42%;background:var(--orange)}
.bio h3{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:1.75rem}
.bio p{font-size:.9rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:6px 9px;border-radius:999px;background:#e5f4f2;color:#0b716f;font-size:.68rem;font-weight:800}

/* Progress */
.progress{
  position:fixed;right:13px;top:50%;transform:translateY(-50%);
  z-index:80;display:flex;flex-direction:column;gap:8px
}
.progress a{
  display:flex;justify-content:center;align-items:center;
  width:10px;height:10px;border-radius:999px;background:#c7d3da;
  transition:.25s;overflow:hidden;color:transparent;font-size:0
}
.progress a.active{height:28px;background:var(--orange)}
.progress a span{display:none}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.09s}.delay-2{transition-delay:.17s}.delay-3{transition-delay:.24s}

/* Desktop snap only */
@media (min-width:981px){
  html{scroll-snap-type:y proximity}
}

/* Tablet / mobile */
@media (max-width:980px){
  :root{--header:64px}
  html{scroll-snap-type:none}
  .screen{min-height:auto;padding:72px 0;scroll-snap-align:none}
  .hero-grid,.two-col{grid-template-columns:1fr}
  .hero{padding-top:58px}
  .system-graphic{max-width:420px}
  .system-map{max-width:520px;width:100%;margin-inline:auto}
  .territories{grid-template-columns:repeat(2,1fr)}
  .progress{display:none}
  .main-nav{
    display:none;position:absolute;left:18px;right:18px;top:64px;
    flex-direction:column;align-items:stretch;gap:16px;padding:18px;
    background:white;border-radius:16px;box-shadow:0 18px 50px rgba(7,29,58,.12)
  }
  .main-nav.open{display:flex}
  .nav-cta{text-align:center}
  .menu-toggle{display:block}
  .next-chapter{display:none}
}
@media (max-width:640px){
  :root{--header:58px}
  .container{width:min(var(--max),calc(100% - 28px))}
  .brand{height:48px}.brand img{max-height:46px}
  .screen{padding:62px 0}
  h1{font-size:clamp(2.65rem,13vw,4rem)}
  h2{font-size:clamp(2.15rem,10vw,3.2rem)}
  .territories{grid-template-columns:1fr}
  .system-map{min-height:390px}
  .center{width:92px;height:92px}
  .map-node{width:66px;height:66px}
  .person{grid-template-columns:1fr}
  .photo{max-width:300px}
  .palindrome{letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  .reveal{opacity:1;transform:none;transition:none}
}


/* V2.1 — stronger brand presence + evocative hero */
.positioning{
  margin:0 0 12px;
  color:#9fc3cd;
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.12em;
}
.hero .eyebrow{margin-bottom:10px}
.vision-graphic{
  position:relative;
  width:min(500px,100%);
  aspect-ratio:1.3/1;
  margin:0 auto 4px;
  isolation:isolate;
}
.vision-orbit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(122,225,216,.17)
}
.vo1{width:88%;height:88%}
.vo2{width:66%;height:66%;border-style:dashed}
.vo3{width:43%;height:43%;border-color:rgba(122,225,216,.3)}
.eye-stroke{
  position:absolute;left:50%;width:69%;height:42%;
  border:8px solid transparent;z-index:3;
}
.eye-top{
  top:25%;transform:translateX(-50%) rotate(-2deg);
  border-top-color:#d8f0ef;border-radius:60% 45% 0 0;
}
.eye-bottom{
  bottom:21%;transform:translateX(-50%) rotate(-5deg);
  border-bottom-color:#28a6a4;border-radius:0 0 60% 45%;
}
.spiral-core{
  position:absolute;left:50%;top:50%;width:116px;height:116px;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
  border:14px solid rgba(226,243,243,.94);
  border-right-color:transparent;
  border-bottom-color:#1ba99c;
  z-index:4;
}
.vision-sun{
  position:absolute;left:52%;top:48%;transform:translate(-50%,-50%);
  width:31px;height:31px;border-radius:44% 56% 60% 40%;
  background:radial-gradient(circle at 35% 35%,#ffe1a6,var(--orange) 64%);
  box-shadow:0 0 0 10px rgba(255,122,47,.06);
  z-index:5
}
.vision-node{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:#7be5db;box-shadow:0 0 0 5px rgba(123,229,219,.07);z-index:5
}
.vn1{left:14%;top:48%}.vn2{left:28%;top:28%}.vn3{left:31%;bottom:23%}
.vn4{right:27%;top:27%}.vn5{right:13%;top:50%}.vn6{right:28%;bottom:22%;background:var(--orange)}
.vision-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.vision-lines path{fill:none;stroke:rgba(122,225,216,.27);stroke-width:1.25}
.vision-caption{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;gap:20px;color:#a9c8d1;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase
}
@media (min-width:981px){
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:58px}
  .hero{padding-top:34px;padding-bottom:38px}
  .hero h1{font-size:clamp(3rem,5.25vw,5.15rem)}
}
@media (max-width:980px){
  :root{--header:72px}
  .brand{height:60px}.brand img{max-height:56px}
  .positioning{margin-bottom:10px}
}
@media (max-width:640px){
  :root{--header:64px}
  .brand{height:52px}.brand img{max-height:48px}
  .vision-graphic{max-width:430px}
  .vision-caption{gap:10px;font-size:.58rem}
}


/* =========================
   V3 — LESS, BUT MEANINGFUL
   ========================= */

/* Header: horizontal brand has presence, not weight */
.site-header{height:92px}
:root{--header:92px}
.brand{height:78px}
.brand img{max-height:72px;width:auto;object-fit:contain}

/* Hero: remove illustrative landscape and preserve only a subtle dawn */
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.dawn-glow{
  position:absolute;
  width:520px;height:520px;
  right:-110px;bottom:-260px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,
    rgba(255,189,104,.22) 0 8%,
    rgba(255,122,47,.09) 9% 28%,
    rgba(15,152,149,.035) 45%,
    transparent 70%);
}
.hero-grid{gap:78px}
.positioning{
  color:#7ed9d1;
  font-size:.67rem;
  letter-spacing:.145em;
  margin-bottom:22px;
}
.hero h1{
  max-width:690px;
  margin-bottom:26px;
}
.hero-lead{max-width:520px}
.hero-right{gap:24px}

/* New clean hero visual */
.clean-vision{
  width:min(470px,100%);
  aspect-ratio:1.32/1;
  position:relative;
  margin:auto;
}
.cv-orbit{
  position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);
  border-radius:50%;
}
.orbit-a{width:79%;height:92%;border:1px solid rgba(126,217,209,.18)}
.orbit-b{width:57%;height:67%;border:1px dashed rgba(126,217,209,.24)}
.cv-eye{
  position:absolute;left:50%;width:66%;height:40%;z-index:4;
  border:7px solid transparent;
}
.cv-eye.top{
  top:27%;transform:translateX(-50%) rotate(-3deg);
  border-top-color:rgba(233,247,246,.96);
  border-radius:60% 45% 0 0;
}
.cv-eye.bottom{
  bottom:23%;transform:translateX(-50%) rotate(-6deg);
  border-bottom-color:#20a39f;
  border-radius:0 0 60% 45%;
}
.cv-spiral{
  position:absolute;left:50%;top:49%;
  width:108px;height:108px;
  transform:translate(-50%,-50%) rotate(-20deg);
  border-radius:50%;
  border:13px solid rgba(235,247,246,.96);
  border-right-color:transparent;
  border-bottom-color:#1ba99c;
  z-index:5;
}
.cv-sun{
  position:absolute;left:52%;top:48%;transform:translate(-50%,-50%);
  width:29px;height:29px;border-radius:46% 54% 58% 42%;
  background:radial-gradient(circle at 35% 35%,#ffe3a8,var(--orange) 65%);
  z-index:6;box-shadow:0 0 0 9px rgba(255,122,47,.055);
}
.cv-node{
  position:absolute;width:8px;height:8px;border-radius:50%;z-index:6;
  background:#78dcd4;
}
.cv-node.a{left:17%;top:49%}.cv-node.b{left:31%;top:28%}
.cv-node.c{right:28%;bottom:24%;background:var(--orange)}
.cv-node.d{right:16%;top:48%}
.cv-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.cv-lines path{fill:none;stroke:rgba(126,217,209,.25);stroke-width:1.2}

/* RECONOCER — discovery, not explanation */
.recognize-discovery{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  margin-top:38px;
  cursor:default;
}
.recognize-word{
  display:flex;
  align-items:center;
  gap:.23em;
  font-size:clamp(1.75rem,3.2vw,3rem);
  font-weight:850;
  letter-spacing:.09em;
  color:var(--navy);
}
.recognize-word span{display:inline-block;transition:transform .75s cubic-bezier(.2,.8,.2,1),color .5s ease}
.recognize-word .last-r{
  color:var(--orange);
  transform-origin:center;
}
.reverse-hint{
  height:28px;
  padding-right:3px;
  margin-top:4px;
  color:var(--orange);
  font-size:1.45rem;
  opacity:0;
  transform:translateX(10px);
  transition:opacity .6s ease .55s,transform .6s ease .55s;
}
.recognize-discovery.discovered .last-r{
  transform:scaleX(-1);
}
.recognize-discovery.discovered .reverse-hint{
  opacity:1;
  transform:translateX(0);
}

/* More breathing room in the rest of the experience */
.signal{padding:16px 0}
.territories{gap:18px}
.territory{padding:24px;min-height:215px}
.section-head{margin-bottom:34px}
.person{padding:24px}

/* Desktop: one idea per screen, with slightly more negative space */
@media (min-width:981px){
  .screen{padding:54px 0}
  #reconocer .two-col,
  #mirada .two-col,
  #cocrear .two-col,
  #conversemos .two-col{gap:82px}
}

/* Tablet/mobile: no forced effects, natural scroll */
@media (max-width:980px){
  :root{--header:76px}
  .site-header{height:76px}
  .brand{height:64px}.brand img{max-height:58px}
  .hero-grid{gap:38px}
  .recognize-discovery{margin-top:28px}
}
@media (max-width:640px){
  :root{--header:66px}
  .site-header{height:66px}
  .brand{height:54px}.brand img{max-height:49px}
  .positioning{font-size:.58rem;line-height:1.5}
  .recognize-word{gap:.12em;letter-spacing:.04em}
}


/* ============================================
   V3.1 — LIGHT AS BASE / DEPTH / DISCOVERY
   ============================================ */

.hero{
  color:var(--navy);
  background:
    radial-gradient(circle at 78% 54%, rgba(255,185,95,.12), transparent 26%),
    linear-gradient(105deg,#fbf8f1 0%,#fbfaf7 46%,#eef6f4 100%);
}
.hero-bg{opacity:1}
.light-field{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 72% 36%,rgba(255,255,255,.9),transparent 28%),
    radial-gradient(circle at 88% 70%,rgba(255,197,116,.16),transparent 22%);
}
.dawn-glow{
  width:460px;height:460px;
  right:-80px;bottom:-250px;
  background:radial-gradient(circle at 42% 38%,
    rgba(255,198,119,.42) 0 6%,
    rgba(255,122,47,.11) 7% 25%,
    rgba(15,152,149,.035) 42%,
    transparent 70%);
}
.soft-horizon{
  position:absolute;
  right:-5%;
  bottom:-18%;
  width:63%;
  height:45%;
  border-radius:55% 45% 0 0;
  transform:rotate(-3deg);
  opacity:.12;
}
.soft-horizon.h1{background:#8bc4c2}
.soft-horizon.h2{background:#2f7786;bottom:-29%;right:-10%;opacity:.09}

.hero .positioning{color:#0d8585}
.hero h1{color:var(--navy)}
.hero h1 .teal-word{color:var(--teal)}
.hero-lead{color:#33485c}
.hero-statement{color:#536875}
.next-chapter{color:#5f7a84}
.hero .primary{box-shadow:0 10px 25px rgba(15,152,149,.12)}

.constellation-vision{
  width:min(530px,100%);
  aspect-ratio:1.3/1;
  position:relative;
  margin:auto;
}
.constellation-ring{
  position:absolute;left:50%;top:48%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.cr1{width:80%;height:92%;border:1px solid rgba(12,72,99,.16)}
.cr2{width:61%;height:70%;border:1px dashed rgba(15,152,149,.23)}
.cr3{width:42%;height:49%;border:1px solid rgba(15,152,149,.12)}

.hero-mark{
  position:absolute;
  left:50%;top:48%;
  transform:translate(-50%,-50%);
  width:150px;height:150px;
  object-fit:contain;
  transform-origin:center;
  z-index:4;
}
.const-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.const-lines path{fill:none;stroke:rgba(16,88,111,.23);stroke-width:1.1}
.const-node{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:#16999b;z-index:5;
  box-shadow:0 0 0 5px rgba(22,153,155,.055);
}
.const-node.orange{
  background:var(--orange);
  box-shadow:0 0 0 6px rgba(255,122,47,.07);
}
.c1{left:14%;top:45%}.c2{left:27%;top:21%}.c3{left:25%;bottom:20%}
.c4{right:27%;top:18%}.c5{right:16%;top:43%}.c6{right:27%;bottom:19%}
.c7{left:47%;top:8%}.c8{left:50%;bottom:6%}

/* Keep the header light and make the horizontal brand unmistakable */
.site-header{
  background:rgba(251,250,247,.97);
  box-shadow:0 5px 24px rgba(7,29,58,.045);
}
.brand img{max-height:74px}

/* Preserve breathing room */
@media (min-width:981px){
  .hero-grid{grid-template-columns:1.03fr .97fr;gap:70px}
  .hero{padding-top:48px;padding-bottom:48px}
}
@media (max-width:980px){
  .hero{background:linear-gradient(160deg,#fbf8f1,#eef6f4)}
  .constellation-vision{max-width:500px}
  .hero-statement{max-width:600px}
}


/* V3.2 — The client reality, not our logo, is the hero */
.client-perspective{
  position:relative;
  width:min(560px,100%);
  margin:0;
  border-radius:32px 8px 32px 8px;
  overflow:hidden;
  background:#f4f2eb;
  box-shadow:0 22px 55px rgba(7,29,58,.09);
}
.client-perspective::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(251,248,241,.24),transparent 45%,rgba(15,152,149,.035));
  pointer-events:none;
}
.client-perspective img{
  width:100%;
  aspect-ratio:1.42/1;
  object-fit:cover;
  display:block;
}
.perspective-glow{
  position:absolute;right:13%;bottom:18%;
  width:16px;height:16px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 9px rgba(255,122,47,.08),0 0 28px rgba(255,151,69,.34);
  z-index:3;
}
@media(max-width:980px){
  .client-perspective{max-width:620px;margin-inline:auto}
}

.recognize-discovery.second-pass .last-r{
  transition-duration:1.15s;
}
.recognize-discovery.second-pass .reverse-hint{
  transition-duration:.9s;
}


/* V3.3 */
.hero-right{position:relative;align-self:stretch;justify-content:center;min-width:0}
.hero-river{
 position:absolute;z-index:1;top:-12%;right:-12%;bottom:-14%;width:118%;margin:0;overflow:hidden;pointer-events:none;opacity:.94;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.16) 11%,#000 34%,#000 100%);
 mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.16) 11%,#000 34%,#000 100%);
}
.hero-river img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block;filter:saturate(.88) contrast(.96) brightness(1.06)}
.hero-river::after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(251,248,241,.94) 0%,rgba(251,248,241,.50) 22%,transparent 51%),
 linear-gradient(180deg,rgba(251,248,241,.18),transparent 24%,transparent 76%,rgba(251,248,241,.16));
}
.hero-right .hero-statement,.hero-right .button{position:relative;z-index:3}
.hero-right .hero-statement{
 margin-top:auto;max-width:430px;padding:15px 18px;border-radius:16px;
 background:rgba(251,248,241,.80);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)
}
.recognize-word .last-r{color:var(--navy)!important}
.recognize-discovery.discovered .last-r{
  color:var(--orange)!important;
  transform:scaleX(-1);
  text-shadow:0 0 14px rgba(255,122,47,.16);
}
.recognize-discovery .reverse-hint{color:var(--orange)}
@media(max-width:980px){
 .hero-right{min-height:520px}.hero-river{top:0;right:-5%;bottom:auto;width:110%;height:430px}
 .hero-right .hero-statement{margin-top:365px}
}
@media(max-width:640px){
 .hero-right{min-height:460px}.hero-river{height:350px;width:112%;right:-6%}.hero-right .hero-statement{margin-top:300px}
}


/* V3.4 — contacto visible y retrato con mayor presencia */
.photo{
  aspect-ratio:4/4.6;
}
.photo img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:50% 18%;
  transform:scale(1.12);
  transform-origin:center 22%;
}
.contact-mini{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(16,36,62,.10);
  display:flex;
  flex-wrap:wrap;
  gap:9px 14px;
}
.contact-mini a{
  color:var(--teal);
  font-size:.78rem;
  font-weight:800;
  line-height:1.35;
  text-decoration:none;
  position:relative;
}
.contact-mini a:not(:last-child)::after{
  content:"·";
  color:#9aa7ad;
  position:absolute;
  right:-10px;
}
.contact-mini a:hover{
  color:var(--navy);
}
@media(max-width:640px){
  .photo{
    max-width:290px;
    margin-inline:auto;
  }
  .contact-mini{
    justify-content:center;
    text-align:center;
  }
  .contact-mini a:not(:last-child)::after{
    display:none;
  }
}