/* ==========================================================================
   AURYN SPACE — 2026
   Cosmic glass · violeta profundo + magenta neón + ámbar de vela
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --void:#04050d;
  --deep:#080a1a;
  --deep-2:#0c0f26;
  --nebula:#141036;
  --panel:rgba(26,21,68,.72);
  --panel-2:rgba(19,15,52,.66);

  --violet:#8b5cf6;
  --violet-lo:#6d40e8;
  --violet-hi:#b39bff;
  --magenta:#d946a6;
  --magenta-hi:#f472d0;
  --cyan:#2ee6d6;
  --amber:#ffb43d;
  --amber-hi:#ffd07a;

  --cream:#f3f0ea;
  --dim:#b9b2d6;
  --faint:#8079a6;
  --line:rgba(190,175,255,.14);
  --line-hi:rgba(190,175,255,.28);

  --display:'Outfit',-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',sans-serif;

  --wrap:1260px;
  --r:24px;
  --r-sm:14px;
  --ease:cubic-bezier(.16,.9,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --hdr-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;              /* clip, no hidden: no crea contenedor de scroll */
}

body{
  margin:0;
  background:var(--deep);
  color:var(--cream);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* height:auto es imprescindible: sin él, el atributo height="..." del HTML
   se impone sobre el ancho fluido y la imagen sale deformada. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--violet); color:#fff; }

h1,h2,h3,h4,h5{
  font-family:var(--display);
  margin:0;
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.025em;
}
h2{ font-size:clamp(2.1rem,5vw,3.6rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); letter-spacing:-.02em; }
h4{ font-size:1.05rem; letter-spacing:-.01em; }
em{ font-style:normal; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.15rem,4vw,2.5rem); }
.sec{ position:relative; padding:clamp(5rem,11vw,9.5rem) 0; z-index:1; overflow:hidden; }
.sec-alt{ background:linear-gradient(180deg,transparent,rgba(14,11,42,.55) 12%,rgba(14,11,42,.55) 88%,transparent); }

.sec-head{ max-width:62ch; margin-bottom:clamp(2.75rem,6vw,4.5rem); }
.sec-head-center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2{ margin:.85rem 0 1.1rem; }
.sec-head p{ color:var(--dim); font-size:1.06rem; max-width:56ch; }
.sec-head-center p{ margin-inline:auto; }

/* ---------- fondo cósmico ---------- */
#cosmos{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 12% -8%, rgba(109,64,232,.30), transparent 62%),
    radial-gradient(900px 640px at 88% 8%, rgba(217,70,166,.20), transparent 60%),
    radial-gradient(1000px 800px at 50% 105%, rgba(46,230,214,.10), transparent 62%),
    linear-gradient(180deg,var(--void),var(--deep) 42%,var(--deep-2));
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.07;
  /* sin mix-blend-mode: obligaba a recomponer toda la página en cada fotograma */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* orbes de luz */
.orb{
  position:absolute; z-index:0; pointer-events:none;
  left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  border-radius:50%;
  opacity:1;
  will-change:transform;
}
/* El degradado ya es suave por sí mismo: no hace falta filter:blur(),
   que obligaba a rasterizar nueve capas enormes en cada fotograma. */
.orb-violet{
  background:radial-gradient(circle closest-side,
    rgba(139,92,246,.42) 0%, rgba(133,88,240,.30) 22%, rgba(120,78,225,.17) 42%,
    rgba(104,66,205,.075) 62%, rgba(90,56,180,.025) 80%, transparent 100%);
}
.orb-magenta{
  background:radial-gradient(circle closest-side,
    rgba(217,70,166,.34) 0%, rgba(210,68,162,.24) 22%, rgba(190,62,150,.135) 42%,
    rgba(165,54,132,.06) 62%, rgba(140,46,112,.02) 80%, transparent 100%);
}
.orb-cyan{
  background:radial-gradient(circle closest-side,
    rgba(46,230,214,.20) 0%, rgba(44,220,205,.14) 22%, rgba(40,200,186,.08) 42%,
    rgba(35,175,163,.035) 62%, rgba(30,150,140,.012) 80%, transparent 100%);
}

/* ---------- reveal (con red de seguridad) ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.on{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
/* defensivo: el texto partido nunca debe quedar invisible */
.reveal[data-split]{ opacity:1; transform:none; }
.reveal[data-split] .ln{ opacity:0; transform:translateY(.5em); }
.reveal[data-split].on .ln{ opacity:1; transform:none; }
.ln{
  display:block;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal[data-split].on .ln:nth-child(2){ transition-delay:.12s; }

/* ---------- cursor: un honguito ---------- */
/* Se usa la propiedad nativa `cursor` (no un div que sigue al ratón): así el
   puntero nunca se retrasa, funciona sobre cualquier elemento, y si la imagen
   no cargara el navegador vuelve solo a la flecha del sistema. */
.cursor-ring{ display:none; }

@media (hover:hover) and (pointer:fine){
  body{ cursor:url("assets/logo/cursor-hongo.png?v=202608202104") 5 4, auto; }

  a, button, summary, label, [role="button"], .card, .event, .member, .qa summary{
    cursor:url("assets/logo/cursor-hongo-activo.png?v=202608202104") 6 4, pointer;
  }

  /* estela de esporas: un rastro tenue que sigue al honguito */
  .cursor-ring{
    display:block; position:fixed; top:0; left:0; z-index:9998;
    width:26px; height:26px; border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(179,155,255,.30),rgba(179,155,255,.07) 55%,transparent 72%);
    opacity:0;
    transition:opacity .35s var(--ease), transform .3s var(--ease);
  }
  .cursor-ring.vivo{ opacity:1; }
  .cursor-ring.big{
    transform:translate(-50%,-50%) scale(1.9);
    background:radial-gradient(circle,rgba(255,180,61,.30),rgba(255,180,61,.08) 55%,transparent 72%);
  }
}

/* barra de progreso de scroll */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200; pointer-events:none;
  background:rgba(255,255,255,.05);
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--violet),var(--magenta),var(--amber));
  box-shadow:0 0 14px rgba(217,70,166,.7);
}

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-content:center; justify-items:center; gap:2rem;
  background:var(--void);
  transition:opacity .6s var(--ease-soft);
  animation:preOut .1s linear 4.5s forwards;
}
@keyframes preOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.pre-mark{ position:relative; display:grid; place-items:center; width:150px; height:150px; }
.pre-mark img{ width:104px; height:auto; animation:breathe 2.6s var(--ease-soft) infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(.94); opacity:.75 } 50%{ transform:scale(1); opacity:1 } }
.pre-orbit{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(179,155,255,.25);
  border-top-color:var(--amber);
  animation:spin 2.2s linear infinite;
}
.pre-orbit-2{ inset:16px; border-top-color:transparent; border-left-color:var(--magenta); animation-duration:3.4s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.pre-bar{ width:150px; height:2px; background:rgba(255,255,255,.1); overflow:hidden; border-radius:2px; }
.pre-bar i{ display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--violet),var(--amber)); animation:slide 1.3s var(--ease-soft) infinite; }
@keyframes slide{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(320%) } }

/* ---------- header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--hdr-h);
  display:flex; align-items:center; gap:1.5rem;
  padding:0 clamp(1.15rem,4vw,2.5rem);
  transition:background .4s var(--ease-soft), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(8,10,26,.72);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
}
.brand{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.brand-mark{ width:44px; height:auto; filter:drop-shadow(0 0 12px rgba(139,92,246,.55)); }
.brand-word{ font-family:var(--display); font-size:1.12rem; font-weight:600; letter-spacing:-.02em; }
.brand-word em{ font-weight:200; opacity:.75; margin-left:.18em; }

.nav{ display:flex; gap:.35rem; margin-left:auto; }
.nav a{
  position:relative; padding:.5rem .8rem; border-radius:99px;
  font-size:.905rem; color:var(--dim);
  transition:color .25s, background .25s;
}
.nav a:hover{ color:var(--cream); background:rgba(255,255,255,.05); }

.hdr-right{ display:flex; align-items:center; gap:.85rem; }
.lang{ display:flex; padding:3px; border:1px solid var(--line); border-radius:99px; }
.lang button{
  padding:.28rem .62rem; border-radius:99px; font-size:.76rem; font-weight:600;
  letter-spacing:.06em; color:var(--faint); transition:.25s;
}
.lang button.on{ background:rgba(139,92,246,.24); color:var(--cream); }
.lang button:hover{ color:var(--cream); }

.burger{ display:none; width:42px; height:42px; position:relative; flex:0 0 auto; }
.burger span{
  position:absolute; left:11px; width:20px; height:1.5px; background:var(--cream); border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:24px; }
.burger.open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.86rem 1.55rem; border-radius:99px;
  font-family:var(--display); font-size:.95rem; font-weight:500; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s;
  will-change:transform;
}
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn-sm{ padding:.6rem 1.15rem; font-size:.875rem; }
.btn-lg{ padding:1.02rem 2rem; font-size:1.02rem; }

.btn-amber{
  background:linear-gradient(135deg,var(--amber),#ff9a2e);
  color:#2a1400; font-weight:600;
  box-shadow:0 8px 30px rgba(255,180,61,.28);
}
.btn-amber:hover{ box-shadow:0 14px 44px rgba(255,180,61,.42); }

.btn-glass{
  background:rgba(255,255,255,.045);
  border-color:var(--line-hi);
  color:var(--cream);
}
.btn-glass:hover{ background:rgba(255,255,255,.09); border-color:rgba(190,175,255,.45); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.9rem;
  font-family:var(--display); font-weight:500; color:var(--amber);
  border-bottom:1px solid rgba(255,180,61,.3); padding-bottom:.22rem;
  transition:gap .3s var(--ease), border-color .3s;
}
.link-arrow svg{ width:17px; height:17px; }
.link-arrow:hover{ gap:.85rem; border-color:var(--amber); }

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-size:.775rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--violet-hi);
}
.pip{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); flex:0 0 auto; }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hdr-h) + 3.5rem) clamp(1.15rem,4vw,2.5rem) 5rem;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-1; }
/* El vídeo se superpone a la imagen, que queda debajo como póster y respaldo:
   si el vídeo no carga —o el visitante pidió menos movimiento— se ve la foto. */
.hero-media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity 1.4s var(--ease);
  /* el atenuado va en el filtro, no en la opacidad: si fuera opacidad,
     la imagen de debajo se transparentaría y se verían las dos mezcladas */
  filter:saturate(.7) brightness(.5) contrast(1.06);
}
.hero-media video.visible{ opacity:1; }
/* cuando el vídeo entra, la imagen se retira con el mismo fundido */
.hero-media.con-video img{ opacity:0; transition:opacity 1.4s var(--ease); }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:.5;
  filter:saturate(1.15) contrast(1.05);
  will-change:transform;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    /* halo violeta: es lo que ata el hero a la paleta aunque el vídeo sea diurno */
    radial-gradient(80% 70% at 30% 40%, rgba(109,64,232,.42), transparent 68%),
    radial-gradient(60% 60% at 85% 70%, rgba(217,70,166,.24), transparent 66%),
    radial-gradient(70% 60% at 22% 45%, rgba(8,10,26,.42), transparent 70%),
    linear-gradient(180deg, rgba(4,5,13,.86) 0%, rgba(4,5,13,.55) 38%, rgba(8,10,26,.88) 88%, var(--deep) 100%),
    linear-gradient(96deg, rgba(4,5,13,.9) 8%, transparent 62%);
}
.hero-inner{ position:relative; max-width:var(--wrap); margin:0 auto; width:100%; }

.hero-title{
  font-size:clamp(2.9rem,8.4vw,6.6rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.04em;
  margin:1.4rem 0 0;
  max-width:16ch;
}
.hero-title em{
  font-weight:500;
  background:linear-gradient(104deg,var(--violet-hi) 0%,var(--magenta-hi) 44%,var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.taglines{
  display:flex; flex-wrap:wrap; gap:.5rem .75rem;
  margin:1.7rem 0 0;
}
.taglines li{
  font-family:var(--display); font-size:clamp(.86rem,1.5vw,.98rem); font-weight:500;
  padding:.42rem 1rem; border-radius:99px;
  border:1px solid var(--line-hi);
  background:rgba(20,16,54,.5);
  color:var(--cream);
}
.hero-sub{
  margin-top:1.7rem; max-width:52ch;
  font-size:clamp(1.02rem,1.9vw,1.2rem);
  color:var(--dim); line-height:1.68;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem; }

.stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.6rem,5vw,3.75rem);
  margin:3.6rem 0 0; padding-top:2.1rem;
  border-top:1px solid var(--line);
}
.stats div{ display:flex; flex-direction:column; gap:.15rem; }
.stats dt{
  font-family:var(--display); font-size:clamp(2rem,4.4vw,2.9rem); font-weight:300;
  letter-spacing:-.045em; line-height:1;
  background:linear-gradient(140deg,var(--cream),var(--violet-hi));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.stats dd{ margin:0; font-size:.83rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; }

.scroll-cue{
  position:absolute; right:clamp(1.15rem,4vw,2.5rem); bottom:1.9rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.scroll-cue i{ width:1px; height:34px; background:linear-gradient(var(--faint),transparent); animation:cue 2.2s var(--ease-soft) infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }

/* ═══════════ TRUST TICKER ═══════════ */
.trust{
  position:relative; z-index:1;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(10,8,30,.5);
  overflow:hidden; padding:1.05rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.trust-track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:ticker 46s linear infinite;
}
.trust-track span{ font-family:var(--display); font-size:.855rem; font-weight:400; color:var(--dim); white-space:nowrap; letter-spacing:.01em; }
.trust-track i{ color:var(--amber); font-style:normal; opacity:.7; }
@keyframes ticker{ to{ transform:translateX(-50%) } }
.trust:hover .trust-track{ animation-play-state:paused; }

/* ═══════════ SPLIT (texto + imagen) ═══════════ */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
.split-rev .split-copy{ order:2; }
.split-rev .split-media{ order:1; }
.split-copy h2{ margin:.9rem 0 1.5rem; }
.prose p{ color:var(--dim); font-size:1.055rem; line-height:1.78; }
.prose p + p{ margin-top:1.05rem; }

.split-media{ margin:0; position:relative; }
.split-media img{
  width:100%; border-radius:var(--r);
  aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--line-hi);
  box-shadow:0 32px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.08);
}
/* el vídeo de «Quiénes somos» comparte el marco de las fotos */
.split-video video{
  width:100%; display:block;
  /* height:auto es imprescindible: sin él, el atributo height="1280" del HTML
     se impone y el navegador ignora el aspect-ratio */
  height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 50%;
  border-radius:var(--r);
  border:1px solid var(--line-hi);
  box-shadow:0 32px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.08);
  background:var(--nebula);
}
.split-media figcaption{
  margin-top:.9rem; font-size:.83rem; color:var(--faint);
  letter-spacing:.05em; text-transform:uppercase;
}

/* ═══════════ CEREMONIA DESTACADA ═══════════ */
.sec-feature{ padding-top:clamp(3rem,7vw,5rem); }
.feature-card{
  display:grid; grid-template-columns:.85fr 1.15fr;
  border-radius:calc(var(--r) + 6px);
  overflow:hidden;
  border:1px solid var(--line-hi);
  background:linear-gradient(150deg,rgba(40,29,100,.86),rgba(13,10,36,.94));
  box-shadow:0 40px 110px rgba(0,0,0,.55);
  position:relative;
}
.feature-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(217,70,166,.5),transparent 42%,rgba(255,180,61,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.feature-media{ position:relative; min-height:100%; }
.feature-media img{
  width:100%; height:100%; object-fit:cover; min-height:420px;
  /* imagen apaisada: encuadre centrado */
  object-position:50% 50%;
}
.feature-copy{ padding:clamp(2rem,4vw,3.4rem); display:flex; flex-direction:column; }
.badge{
  align-self:flex-start;
  font-family:var(--display); font-size:.755rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:99px;
  background:linear-gradient(120deg,rgba(217,70,166,.28),rgba(139,92,246,.28));
  border:1px solid rgba(244,114,208,.35); color:var(--magenta-hi);
}
.feature-copy h2{ margin:1.1rem 0 1rem; font-size:clamp(1.9rem,3.7vw,2.9rem); }
.lead{ color:var(--dim); font-size:1.06rem; line-height:1.72; }

.ticks{ margin:1.7rem 0 0; display:grid; gap:.72rem; }
.ticks li{
  position:relative; padding-left:1.9rem;
  font-size:.955rem; color:var(--cream); line-height:1.55;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:9px; height:9px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 12px rgba(255,180,61,.75);
}
.price-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }
.price{
  padding:.85rem 1.2rem; border-radius:var(--r-sm);
  border:1px solid var(--line-hi); background:rgba(255,255,255,.04);
  display:flex; flex-direction:column;
}
.price b{ font-family:var(--display); font-size:1.32rem; font-weight:500; letter-spacing:-.03em; color:var(--amber-hi); }
.price span{ font-size:.78rem; color:var(--faint); letter-spacing:.05em; }
.feature-cta{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:2rem; }
.cta-note{ font-size:.85rem; color:var(--faint); }

/* la navecita del titular de servicios: la misma que recorre la franja del eslogan */
.nave-titulo{
  display:inline-block; vertical-align:baseline;
  width:.72em; height:.72em; margin-left:.32em;
  color:var(--amber);
  filter:drop-shadow(0 0 10px rgba(255,180,61,.55));
  animation:naveFlota 3.6s var(--ease-soft) infinite;
}
.nave-titulo svg{ width:100%; height:100%; display:block; }
@keyframes naveFlota{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%    { transform:translateY(-.16em) rotate(6deg) }
}
@media (prefers-reduced-motion:reduce){
  .nave-titulo{ animation:none; }
}

/* ═══════════ CARDS (servicios) ═══════════ */
/* 3 tarjetas normales + 1 ancha: con dos columnas quedaría un hueco,
   así que la fila superior lleva las tres. */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.card{
  position:relative; overflow:hidden;
  padding:clamp(1.7rem,3vw,2.4rem);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  /* display:block (no flex): los flotados no funcionan dentro de un flex,
     y el retrato circular necesita flotar para que el texto lo rodee.
     El overflow:hidden de esta misma regla contiene el flotado. */
  display:block;
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
/* Retrato circular flotando arriba a la derecha: el número, el título y las
   primeras líneas lo rodean, y el texto sigue a lo ancho por debajo.
   shape-outside hace que el texto siga la curva y no la caja cuadrada. */
.card-media{
  position:relative; z-index:2;
  float:right;
  width:clamp(116px, 34%, 172px);
  aspect-ratio:1;
  margin:.15rem 0 1.1rem 1.6rem;
  shape-outside:circle(52%);
}
.card-media::before{
  content:''; position:absolute; inset:-17%; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(139,92,246,.34), rgba(217,70,166,.10) 55%, transparent 72%);
  pointer-events:none;
}
.card-media::after{
  content:''; position:absolute; inset:-9%; border-radius:50%;
  border:1px dashed rgba(179,155,255,.42);
  animation:orbitaTarjeta 44s linear infinite;
  pointer-events:none;
}
@keyframes orbitaTarjeta{ to{ transform:rotate(360deg); } }

.card-media img{
  position:relative; z-index:1;
  width:100%; height:100%;
  border-radius:50%; object-fit:cover; object-position:50% 42%;
  display:block;
  border:1px solid var(--line-hi);
  box-shadow:0 0 0 6px rgba(10,8,30,.85), 0 16px 38px rgba(0,0,0,.55);
  filter:saturate(.9) brightness(.92);
  transition:transform .6s var(--ease), filter .6s;
}
/* En escritorio las tarjetas tienen anchos distintos (tres en fila + una ancha),
   así que un porcentaje daría círculos desiguales. Se fija el mismo tamaño. */
@media (min-width:921px){
  .card-media{ width:144px; }
}

.card:hover .card-media img{ transform:scale(1.04); filter:saturate(1.04) brightness(1); }
.card:hover .card-media::after{ border-color:rgba(255,180,61,.5); }

/* Las fotos ya oscuras y en la paleta del sitio no necesitan que se las apague:
   el filtro de arriba está pensado para fotos diurnas y claras. */
.card-media.en-paleta img{ filter:saturate(1.06) brightness(1.04); }
.card:hover .card-media.en-paleta img{ filter:saturate(1.14) brightness(1.1); }

/* el bloque de precios y el enlace arrancan siempre por debajo del círculo,
   para que sus líneas divisorias no queden cortadas */
.cards .card .card-price,
.cards .card .card-cta{ clear:right; }
.cards .card .card-cta{ margin-top:1.6rem; }

@media (prefers-reduced-motion:reduce){
  .card-media::after{ animation:none; }
}

.card::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(179,155,255,.15), transparent 62%);
  transition:opacity .4s;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line-hi);
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}
.card:hover::after{ opacity:1; }
.card-hi{ border-color:rgba(244,114,208,.34); background:linear-gradient(160deg,rgba(74,27,90,.78),rgba(24,16,58,.8)); }
.card-num{
  font-family:var(--display); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; color:var(--faint); margin-bottom:1.1rem;
}
.card h3{ margin-bottom:.45rem; }
.card-tag{ font-family:var(--display); font-size:.9rem; color:var(--magenta-hi); margin-bottom:1rem; }
.card > p:not(.card-tag){ color:var(--dim); font-size:.99rem; line-height:1.7; }
/* frase de entrada de una descripción larga: destaca sin competir con el subtítulo */
.card-lead{
  font-family:var(--display);
  font-size:1.06rem; font-weight:400; line-height:1.45;
  letter-spacing:-.015em;
  color:var(--cream) !important;
  margin-bottom:.9rem;
}
.card > p + p{ margin-top:.85rem; }

/* frase que hace bisagra dentro de una descripción larga */
.card-remark{
  font-family:var(--display);
  font-size:1.02rem !important; font-weight:400; line-height:1.5;
  color:var(--violet-hi) !important;
  padding-left:1rem; border-left:2px solid rgba(179,155,255,.4);
}

.card-price{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:grid; gap:.42rem;
}
.card-price span{ font-size:.9rem; color:var(--dim); line-height:1.5; }
.card-price b{ font-family:var(--display); font-weight:600; color:var(--amber-hi); letter-spacing:-.01em; }
/* ---- paquetes de precio con su detalle ---- */
.paquetes{
  clear:right;
  margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--line);
  display:grid; gap:1rem;
}
.paquete{
  padding:1.1rem 1.25rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.paquete-ampliado{
  position:relative;
  padding-top:1.6rem;
  border-color:rgba(255,180,61,.45);
  background:linear-gradient(140deg,rgba(255,180,61,.10),rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(255,180,61,.10), 0 10px 30px rgba(255,180,61,.07);
}
/* sello sobre el borde superior */
.paquete-sello{
  position:absolute; top:0; right:1.1rem; transform:translateY(-50%);
  padding:.3rem .8rem; border-radius:99px;
  font-family:var(--display); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#2a1400;
  background:linear-gradient(135deg,var(--amber),#ff9a2e);
  box-shadow:0 4px 16px rgba(255,180,61,.4);
  white-space:nowrap;
}
.paquete-precio{
  display:block; margin-bottom:.75rem;
  font-family:var(--display); font-weight:500;
  font-size:1.42rem; letter-spacing:-.03em; line-height:1;
  color:var(--amber-hi);
}
.paquete-precio span{ font-size:.62em; letter-spacing:.06em; color:var(--faint); margin-left:.25em; }
.paquete-incluye{ display:grid; gap:.5rem; }
.paquete-incluye li{
  position:relative; padding-left:1.3rem;
  font-size:.9rem; color:var(--dim); line-height:1.5;
}
.paquete-incluye li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:5px; height:5px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 7px rgba(255,180,61,.6);
}
.paquete-ampliado p{ font-size:.9rem; color:var(--cream); line-height:1.55; }

/* encabezado y lista de productos */
.lista-titulo{
  display:block; margin-bottom:.7rem;
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--violet-hi);
}
.lista-productos{ display:grid; gap:.48rem; }
.lista-productos li{
  position:relative; padding-left:1.3rem;
  font-size:.92rem; color:var(--dim); line-height:1.5;
}
.lista-productos li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:5px; height:5px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 7px rgba(255,180,61,.6);
}

.card-cta{
  margin-top:auto; padding-top:1.5rem;
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-family:var(--display); font-size:.94rem; font-weight:500; color:var(--cream);
  transition:gap .3s var(--ease), color .3s;
}
.card-cta svg{ width:16px; height:16px; }
.card-cta:hover{ gap:.85rem; color:var(--amber); }

.card-wide{ grid-column:1 / -1; }

/* aviso de contraindicaciones */
.warn{
  display:flex; gap:1.1rem; align-items:flex-start;
  margin-top:2rem; padding:1.5rem 1.7rem;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,180,61,.24);
  background:rgba(255,180,61,.055);
}
.warn svg{ width:22px; height:22px; flex:0 0 auto; color:var(--amber); margin-top:.15rem; }
.warn p{ font-size:.925rem; color:var(--dim); line-height:1.7; }

/* ═══════════ PROCESO — diagrama de tres etapas ═══════════ */
.flow{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);
}

/* el hilo de micelio que une las tres etapas */
.flow-line{
  position:absolute; left:12%; right:12%; top:56px; height:2px;
  z-index:0; pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-hi) 0 8px,transparent 8px 16px);
  background-size:16px 2px;
}
.flow-line i{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--violet),var(--magenta) 55%,var(--amber));
  box-shadow:0 0 14px rgba(217,70,166,.5);
  border-radius:2px;
  transition:width .25s linear;
}

.flow-step{ position:relative; z-index:1; display:flex; flex-direction:column; }

/* --- los glifos --- */
.glyph{
  width:112px; height:112px; margin-bottom:1.6rem;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--violet-hi);
  background:radial-gradient(circle at 50% 40%, rgba(30,22,78,.95), rgba(10,8,30,.95));
  border:1px solid var(--line-hi);
  box-shadow:0 0 0 8px rgba(8,10,26,.9), 0 18px 44px rgba(0,0,0,.5);
}
.glyph svg{ width:74px; height:74px; }
.glyph-hi{
  color:var(--amber);
  border-color:rgba(255,180,61,.4);
  background:radial-gradient(circle at 50% 40%, rgba(62,34,18,.9), rgba(14,9,30,.95));
}

/* trazos que se dibujan solos al aparecer */
.g-draw{
  stroke-dasharray:120; stroke-dashoffset:120;
  transition:stroke-dashoffset 1.2s var(--ease);
}
.reveal.on .g-draw{ stroke-dashoffset:0; }
.reveal.on .g-draw:nth-of-type(3){ transition-delay:.2s; }
.reveal.on .g-draw:nth-of-type(4){ transition-delay:.35s; }

.g-ring{ transform-origin:50% 50%; }
.reveal.on .g-ring{ animation:girar 34s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg) } }

.g-pulse{ opacity:0; transition:opacity .5s var(--ease) .8s; }
.reveal.on .g-pulse{ opacity:1; animation:latir 2.6s var(--ease-soft) infinite .8s; }
@keyframes latir{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.28); opacity:.5 } }

/* ondas expansivas de la ceremonia */
.g-wave{ transform-origin:48px 52px; opacity:0; }
.reveal.on .g-wave{ animation:expandir 3.4s var(--ease-soft) infinite; }
.reveal.on .g-wave-2{ animation-delay:.7s; }
.reveal.on .g-wave-3{ animation-delay:1.4s; }
@keyframes expandir{
  0%{ transform:scale(.5); opacity:.6 }
  70%{ opacity:.12 }
  100%{ transform:scale(1.25); opacity:0 }
}

/* esporas que suben */
.g-spore{ opacity:0; transform-origin:50% 50%; }
.reveal.on .g-spore{ animation:flotar 3.2s var(--ease-soft) infinite; }
.reveal.on .g-spore:nth-of-type(5){ animation-delay:.5s; }
.reveal.on .g-spore:nth-of-type(6){ animation-delay:1s; }
@keyframes flotar{
  0%{ opacity:0; transform:translateY(10px) scale(.6) }
  40%{ opacity:.95 }
  100%{ opacity:0; transform:translateY(-12px) scale(1) }
}

/* la red que se teje */
.g-net{
  stroke-dasharray:300; stroke-dashoffset:300;
  transition:stroke-dashoffset 1.6s var(--ease) .2s;
}
.reveal.on .g-net{ stroke-dashoffset:0; }
.g-dot{ opacity:0; transition:opacity .5s var(--ease); }
.reveal.on .g-dot{ opacity:1; }
.reveal.on .g-dot:nth-of-type(2){ transition-delay:.5s; }
.reveal.on .g-dot:nth-of-type(3){ transition-delay:.65s; }
.reveal.on .g-dot:nth-of-type(4){ transition-delay:.8s; }
.reveal.on .g-dot:nth-of-type(5){ transition-delay:.95s; }
.reveal.on .g-dot-core{ transition-delay:1.2s; animation:latir 3s var(--ease-soft) infinite 1.4s; transform-origin:48px 48px; }

/* --- texto de cada etapa --- */
.flow-n{
  font-family:var(--display); font-size:.8rem; font-weight:600;
  letter-spacing:.18em; color:var(--faint); margin-bottom:.55rem;
}
.flow-step h3{ margin-bottom:.35rem; }
.flow-when{
  font-family:var(--display); font-size:.885rem; color:var(--magenta-hi);
  margin-bottom:.9rem;
}
.flow-step > p:not(.flow-when){ color:var(--dim); font-size:.98rem; line-height:1.7; }
.flow-list{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); display:grid; gap:.6rem; }
.flow-list li{
  position:relative; padding-left:1.4rem;
  font-size:.91rem; color:var(--cream); line-height:1.5;
}
.flow-list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--violet-hi); box-shadow:0 0 8px rgba(179,155,255,.6);
}

/* ═══════════ POR QUÉ ELEGIRNOS ═══════════ */
/* Sección larga de argumentación: se ordena en cuatro tiempos —manifiesto,
   el puente, las tres dimensiones y el cierre— con ritmos de espacio
   distintos para que no se lea como un muro de texto. */

.pq-manifiesto{ text-align:center; margin-bottom:clamp(2.2rem,5vw,3.4rem); }
.pq-claim{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  line-height:1.2; letter-spacing:-.03em;
  max-width:22ch; margin:0 auto;
  color:var(--cream);
}
.pq-claim em{
  background:linear-gradient(100deg,var(--violet-hi) 10%,var(--magenta-hi) 90%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.pq-claim-sub{
  max-width:48ch; margin:1.1rem auto 0;
  color:var(--dim); font-size:1.02rem; line-height:1.7;
}

/* Dos columnas de lectura: el texto largo cansa menos partido en dos
   que en una sola medida ancha. */
.pq-texto{
  columns:2; column-gap:clamp(2rem,4vw,3.4rem);
  max-width:var(--medida, 78ch); margin:0 auto;
}
.pq-texto p{
  color:var(--dim); font-size:1.02rem; line-height:1.8;
  break-inside:avoid; margin-bottom:1.1rem;
}
.pq-texto p:last-child{ margin-bottom:0; }

.pq-sub{
  text-align:center; margin:clamp(3.4rem,7vw,5.5rem) auto 1rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.85rem); letter-spacing:-.02em;
  max-width:24ch;
}
.pq-sub-p{
  text-align:center; max-width:56ch; margin:0 auto clamp(2.2rem,5vw,3.2rem);
  color:var(--dim); font-size:1.02rem; line-height:1.7;
}

/* --- el puente --- */
.puente{
  display:grid; grid-template-columns:1fr minmax(120px,220px) 1fr;
  /* stretch, no center: así las dos tarjetas miden lo mismo aunque un texto
     sea más largo que el otro. El arco se centra por su cuenta. */
  align-items:stretch; gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(1.5rem,4vw,2.5rem);
}
.puente-lado{
  padding:clamp(1.5rem,2.6vw,2.2rem);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  transition:border-color .4s, transform .4s var(--ease);
}
.puente-lado:hover{ border-color:var(--line-hi); transform:translateY(-4px); }
.puente-glifo{
  display:grid; place-items:center;
  width:64px; height:64px; margin-bottom:1.1rem;
  border-radius:50%;
  color:var(--violet-hi);
  background:radial-gradient(circle at 50% 40%, rgba(30,22,78,.95), rgba(10,8,30,.95));
  border:1px solid var(--line-hi);
}
.puente-lado:last-of-type .puente-glifo{ color:var(--amber); border-color:rgba(255,180,61,.38); }
.puente-glifo svg{ width:38px; height:38px; }
.puente-lado h4{ font-family:var(--display); font-size:1.08rem; margin-bottom:.55rem; }
.puente-lado p{ color:var(--dim); font-size:.98rem; line-height:1.72; }

/* El arco que une los dos lados: se dibuja solo al entrar en pantalla y
   lleva un punto de luz en la cúspide. */
.puente-arco{ position:relative; align-self:center; color:var(--violet-hi); }
.puente-arco svg{ display:block; width:100%; height:96px; opacity:.65; }
.arco-draw{
  stroke-dasharray:320; stroke-dashoffset:320;
  transition:stroke-dashoffset 1.6s var(--ease) .2s;
}
.reveal.on .arco-draw{ stroke-dashoffset:0; }
.arco-punto{
  position:absolute; left:50%; top:6px; width:9px; height:9px;
  margin-left:-4.5px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 14px rgba(255,180,61,.85);
  opacity:0; transition:opacity .5s var(--ease) 1.4s;
}
.reveal.on .arco-punto{ opacity:1; animation:arcoLatido 3.2s var(--ease-soft) infinite 1.4s; }
@keyframes arcoLatido{ 0%,100%{ transform:scale(1); opacity:.95 } 50%{ transform:scale(1.35); opacity:.5 } }

/* --- las tres dimensiones --- */
.dimensiones{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,3vw,2.2rem); }
.dim{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.dim h4{ font-family:var(--display); font-size:1.15rem; margin-bottom:.5rem; }
.dim p{ color:var(--dim); font-size:.98rem; line-height:1.72; max-width:34ch; }

/* --- cierre --- */
.pq-cierre{
  position:relative;
  max-width:62ch; margin:clamp(3.4rem,7vw,5.5rem) auto 0;
  padding:clamp(1.8rem,4vw,2.8rem);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(30,20,72,.55),rgba(14,11,42,.6));
  text-align:center;
}
.pq-cierre h3{ font-family:var(--display); font-weight:400; margin-bottom:1.2rem; }
.pq-cierre p{ color:var(--dim); font-size:1.02rem; line-height:1.8; margin-bottom:1rem; }
.pq-remate{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.3; letter-spacing:-.02em;
  color:var(--cream) !important;
  margin:1.6rem auto !important;
  max-width:26ch;
}
.pq-final{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2.8vw,1.9rem); letter-spacing:-.02em;
  margin:1.4rem 0 0 !important;
  background:linear-gradient(100deg,var(--cream) 6%,var(--violet-hi) 50%,var(--magenta-hi) 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
}

@media (prefers-reduced-motion:reduce){
  .reveal.on .arco-punto{ animation:none; }
}

/* ═══════════ FRANJA DEL ESLOGAN ═══════════ */
.slogan-band{
  position:relative; z-index:1; overflow:hidden;
  padding:clamp(5.5rem,12vw,10rem) 0;
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(139,92,246,.18), transparent 62%),
    linear-gradient(180deg, transparent, rgba(9,7,28,.72) 22%, rgba(9,7,28,.72) 78%, transparent);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* --- el carril que recorre la nave --- */
.slogan-rail{
  position:relative; height:44px;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.rail-track{
  position:absolute; left:0; right:0; top:50%;
  height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--line-hi) 18%,var(--line-hi) 82%,transparent);
}
.rail-trail{
  position:absolute; left:0; top:50%; height:2px; width:0;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(217,70,166,.5),var(--amber));
  box-shadow:0 0 16px rgba(255,180,61,.55);
  border-radius:2px;
}
.rail-ship{
  position:absolute; top:50%; left:0;
  width:34px; height:34px;
  transform:translate(-50%,-50%) rotate(90deg);
  color:var(--amber);
  filter:drop-shadow(0 0 12px rgba(255,180,61,.75));
}
.rail-ship svg{ width:100%; height:100%; }

/* --- el eslogan, palabra por palabra --- */
.slogan{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(2rem,5.6vw,4.2rem);
  line-height:1.1; letter-spacing:-.035em;
  max-width:18ch; margin:0 auto;
  color:var(--cream);
}
.slogan .w{
  display:inline-block;
  opacity:0; transform:translateY(.55em) rotate(2deg);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.slogan.on .w{ opacity:1; transform:none; }
.slogan .w-hi{
  font-weight:500;
  background:linear-gradient(104deg,var(--violet-hi) 0%,var(--magenta-hi) 48%,var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* defensivo: si el JS no llega a partir el texto, el eslogan se ve igual */
.slogan:not(:has(.w)){ opacity:1; }

.slogan-cta{ margin-top:clamp(2rem,4vw,2.8rem); }

@media (max-width:640px){
  .slogan{ max-width:14ch; }
  .slogan-rail{ height:34px; margin-bottom:1.8rem; }
  .rail-ship{ width:26px; height:26px; }
  .slogan-cta{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .slogan .w{ opacity:1; transform:none; }
}

/* ═══════════ EQUIPO ═══════════ */
/* Cada persona ocupa una fila entera, con el retrato en grande al lado.
   Se alternan los lados para dar ritmo editorial. */
.team{ display:grid; grid-template-columns:1fr; gap:1.5rem; }

.member{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,420px) 1fr;
  gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center;
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  transition:border-color .4s, transform .4s var(--ease);
}
.member::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,180,61,.09), transparent 60%);
  transition:opacity .4s;
}
.member:hover{ border-color:var(--line-hi); transform:translateY(-4px); }
.member:hover::after{ opacity:1; }

/* La segunda ficha invierte el orden. Hay que invertir también la definición
   de columnas: si no, la foto cae en la columna 1fr y sale más grande que la
   de la primera ficha. */
.member:nth-child(even){ grid-template-columns:1fr minmax(0,420px); }
.member:nth-child(even) .member-foto{ order:2; }
.member:nth-child(even) .member-info{ order:1; }

.member-foto{ margin:0; position:relative; }
.member-foto::before{
  content:''; position:absolute; inset:-14px; border-radius:calc(var(--r) + 8px);
  background:radial-gradient(circle at 50% 30%, rgba(139,92,246,.22), transparent 68%);
  pointer-events:none;
}
.retrato{
  position:relative;
  width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  border-radius:var(--r);
  border:1px solid var(--line-hi);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:transform .6s var(--ease);
}
.member:hover .retrato{ transform:scale(1.02); }

.member-info h3{ font-size:clamp(1.5rem,2.8vw,2.05rem); margin-bottom:.35rem; }
.role{ font-size:.95rem; color:var(--magenta-hi); margin-bottom:1.5rem; }
.creds{ display:grid; gap:.72rem; }
.creds li{
  position:relative; padding-left:1.5rem;
  font-size:1rem; color:var(--dim); line-height:1.6;
}
.creds li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:6px; height:6px; border-radius:50%;
  background:var(--violet-hi); box-shadow:0 0 8px rgba(179,155,255,.55);
}

/* Bloque destacado y centrado: cierra la presentación del equipo */
.team-extra{
  position:relative; overflow:hidden;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(2.4rem,5vw,3.4rem) clamp(1.6rem,4vw,3rem);
  text-align:center;
  border-radius:var(--r);
  border:1px solid var(--line-hi);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(139,92,246,.20), transparent 62%),
    linear-gradient(160deg,rgba(30,22,78,.55),rgba(14,11,38,.55));
}
/* resplandor que respira detrás */
.team-extra::before{
  content:''; position:absolute; left:50%; top:-40%;
  width:min(560px,90%); aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(217,70,166,.20), transparent 66%);
  animation:redLatido 7s var(--ease-soft) infinite;
}
@keyframes redLatido{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

.red-frase{
  position:relative;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.22; letter-spacing:-.03em;
  max-width:24ch; margin:0 auto;
  background:linear-gradient(104deg,var(--cream) 8%,var(--violet-hi) 52%,var(--magenta-hi) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.red-sub{
  position:relative;
  max-width:56ch; margin:1.1rem auto 0;
  font-size:.98rem;
}

@media (prefers-reduced-motion:reduce){
  .team-extra::before{ animation:none; }
}
.team-extra h4{ margin-bottom:.6rem; }
.muted{ color:var(--faint); font-size:.94rem; line-height:1.7; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.chips span{
  padding:.42rem .95rem; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  font-size:.87rem; color:var(--dim);
  transition:border-color .3s, color .3s;
}
.chips span:hover{ border-color:var(--line-hi); color:var(--cream); }

/* referencias científicas */
.refs{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.9rem; }
.refs span{
  padding:.45rem 1rem; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-family:var(--display); font-size:.82rem; letter-spacing:.04em; color:var(--dim);
}

/* ═══════════ EVIDENCIA CIENTÍFICA ═══════════ */
.studies{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem;
}
.study{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.1rem);
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.study::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(46,230,214,.13), transparent 62%);
  transition:opacity .4s;
}
.study:hover{ transform:translateY(-5px); border-color:var(--line-hi); box-shadow:0 26px 66px rgba(0,0,0,.5); }
.study:hover::after{ opacity:1; }
.study-hi{ border-color:rgba(46,230,214,.32); background:linear-gradient(160deg,rgba(16,58,66,.6),rgba(16,14,46,.72)); }

.study-area{
  font-family:var(--display); font-size:.755rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cyan);
  line-height:1.45; margin-bottom:1.05rem;
}
.study-hi .study-area{ color:var(--teal, #5fe8d6); }

.study-figure{
  display:flex; flex-direction:column; gap:.2rem;
  padding-bottom:1.05rem; margin-bottom:1.05rem;
  border-bottom:1px solid var(--line);
}
.study-figure b span{ font:inherit; color:inherit; letter-spacing:inherit; }
.study-figure b{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2rem,3.6vw,2.7rem); line-height:1; letter-spacing:-.045em;
  background:linear-gradient(140deg,var(--cream),var(--violet-hi));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.study-figure > span{ font-size:.845rem; color:var(--faint); line-height:1.45; }

.study-desc{ font-size:.945rem; color:var(--dim); line-height:1.68; margin-bottom:1.2rem; }

.study-cite{
  /* margin-top:auto empuja la cita y el enlace al pie de la tarjeta,
     para que queden alineados aunque los textos tengan distinto largo */
  display:block; margin-top:auto; padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.79rem; font-style:normal; color:var(--faint); line-height:1.55;
}
.study-cite em{ font-style:italic; color:var(--dim); }

.study-link{
  margin-top:1rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--display); font-size:.885rem; font-weight:500; color:var(--cream);
  transition:gap .3s var(--ease), color .3s;
}
.study-link svg{ width:15px; height:15px; }
.study-link:hover{ gap:.75rem; color:var(--cyan); }

.meta-line{
  margin-top:1.15rem;
  padding:1.5rem 1.7rem; border-radius:var(--r-sm);
  border:1px solid var(--line-hi);
  background:linear-gradient(120deg,rgba(46,230,214,.07),rgba(139,92,246,.07));
}
.meta-line p{ font-size:1.005rem; color:var(--cream); line-height:1.66; }
.meta-line cite{
  display:block; margin-top:.6rem;
  font-size:.79rem; font-style:normal; color:var(--faint);
}
.meta-line cite em{ font-style:italic; color:var(--dim); }

/* ═══════════ CARRUSEL DE TERAPEUTAS ═══════════ */
.ter-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-top:clamp(2.5rem,5vw,3.5rem); margin-bottom:1.5rem;
  padding-top:clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--line);
}
.ter-head h4{
  margin-bottom:.6rem;
  font-size:clamp(1.4rem,2.6vw,1.95rem);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.12;
}
.ter-head .muted{ max-width:48ch; }

.car-nav{ display:flex; gap:.5rem; flex:0 0 auto; }
.car-nav button{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-hi); background:rgba(255,255,255,.04);
  color:var(--cream);
  transition:background .3s, border-color .3s, opacity .3s, transform .3s var(--ease);
}
.car-nav button svg{ width:18px; height:18px; }
.car-nav button:hover:not(:disabled){ background:rgba(139,92,246,.22); border-color:var(--violet-hi); transform:translateY(-2px); }
.car-nav button:disabled{ opacity:.25; cursor:default; }

/* desplazamiento nativo con anclaje: funciona con dedo, trackpad y teclado */
.ter-carrusel{
  display:grid; grid-auto-flow:column; grid-auto-columns:264px;
  gap:1.1rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding-bottom:1rem;
  scrollbar-width:thin; scrollbar-color:var(--line-hi) transparent;
}
.ter-carrusel::-webkit-scrollbar{ height:6px; }
.ter-carrusel::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:99px; }
.ter-carrusel::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:99px; }
.ter-carrusel::-webkit-scrollbar-thumb:hover{ background:var(--violet-hi); }

.terapeuta{
  scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:1.6rem;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  transition:border-color .4s, transform .4s var(--ease);
}
.terapeuta:hover{ border-color:var(--line-hi); transform:translateY(-4px); }

.terapeuta img,
.ter-mono{
  width:76px; height:76px; flex:0 0 auto;
  border-radius:50%; margin-bottom:1.1rem;
  border:1px solid var(--line-hi);
  object-fit:cover;
}
.ter-mono{
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.15rem; font-weight:600; letter-spacing:.04em;
  background:linear-gradient(140deg,rgba(139,92,246,.38),rgba(217,70,166,.28));
  color:var(--cream);
}
.terapeuta h5{
  font-family:var(--display); font-size:1.06rem; font-weight:500;
  letter-spacing:-.015em; margin-bottom:.3rem;
}
.ter-esp{ font-size:.875rem; color:var(--magenta-hi); line-height:1.45; }
.ter-desc{
  margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--dim); line-height:1.6;
}

/* enlace a Instagram: se ancla abajo con margin-top:auto, así todas las
   fichas lo alinean a la misma altura aunque la especialidad ocupe más
   líneas en unas que en otras */
.ter-ig{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:auto; padding-top:1.15rem;
  font-size:.82rem; color:var(--dim); text-decoration:none;
  transition:color .3s;
}
.ter-ig svg{
  width:16px; height:16px; flex:0 0 auto;
  padding:5px; box-sizing:content-box;
  border-radius:9px;
  border:1px solid var(--line-hi);
  background:linear-gradient(140deg,rgba(139,92,246,.30),rgba(217,70,166,.22));
  color:var(--cream);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.ter-ig:hover{ color:var(--cream); }
.ter-ig:hover svg{
  border-color:var(--violet-hi);
  background:linear-gradient(140deg,rgba(139,92,246,.55),rgba(217,70,166,.42));
  transform:translateY(-1px);
}
.ter-ig:focus-visible{ outline:2px solid var(--violet-hi); outline-offset:4px; border-radius:6px; }

@media (max-width:640px){
  .ter-head{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .ter-carrusel{ grid-auto-columns:78%; }
}

/* ═══════════ TESTIMONIOS ═══════════ */
.sec-quote{ text-align:left; }

.tst-carrusel{
  display:grid; grid-auto-flow:column; grid-auto-columns:380px;
  gap:1.25rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  scrollbar-width:thin; scrollbar-color:var(--line-hi) transparent;
}
.tst-carrusel::-webkit-scrollbar{ height:6px; }
.tst-carrusel::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:99px; }
.tst-carrusel::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:99px; }
.tst-carrusel::-webkit-scrollbar-thumb:hover{ background:var(--violet-hi); }

.tst{
  scroll-snap-align:start;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  transition:border-color .4s, transform .4s var(--ease);
}
.tst:hover{ border-color:var(--line-hi); transform:translateY(-4px); }

/* --- testimonio escrito --- */
.tst-texto{ padding:2rem 1.9rem 1.7rem; }
.tst-comilla{
  font-family:var(--display); font-size:4rem; line-height:.7; font-weight:300;
  color:var(--violet-hi); opacity:.5; display:block; margin-bottom:.4rem;
}
.tst-texto blockquote{
  margin:0; flex:1;
  font-family:var(--display); font-weight:300;
  font-size:1.16rem; line-height:1.5; letter-spacing:-.015em;
  color:var(--cream);
}
.tst footer{
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.15rem;
}
.tst footer b{ font-family:var(--display); font-weight:500; font-size:.97rem; color:var(--cream); }
.tst footer span{ font-size:.83rem; color:var(--faint); }

/* --- testimonio en vídeo --- */
.tst-video{ padding:0; }
.tst-media{
  position:relative; margin:0;
  background:var(--nebula);
  aspect-ratio:9/13; overflow:hidden;
}
.tst-media img,
.tst-media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.tst-play{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; gap:0;
  border:0; background:linear-gradient(180deg,rgba(4,5,13,.15),rgba(4,5,13,.62));
  cursor:pointer; transition:background .35s;
}
.tst-play:hover{ background:linear-gradient(180deg,rgba(4,5,13,.05),rgba(4,5,13,.5)); }
.tst-play i{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--amber),#ff9a2e);
  box-shadow:0 8px 30px rgba(255,180,61,.45);
  transition:transform .35s var(--ease);
}
.tst-play:hover i{ transform:scale(1.08); }
.tst-play svg{ width:22px; height:22px; margin-left:3px; color:#2a1400; }
.tst-play.oculto{ display:none; }
.tst-video footer{ margin-top:0; padding:1.2rem 1.6rem 1.5rem; border-top:0; }

@media (max-width:640px){
  .tst-carrusel{ grid-auto-columns:82%; }
}

/* ═══════════ EVENTOS — coverflow de carteles ═══════════ */
.cover{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(420px, 56vw, 620px);
  perspective:1600px;
  margin-bottom:1.6rem;
}
.cover-pista{
  position:relative;
  width:100%; height:100%;
  display:grid; place-items:center;
  transform-style:preserve-3d;
}

.cover-item{
  position:absolute;
  width:clamp(240px, 30vw, 400px);
  aspect-ratio:3/4;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line-hi);
  background:var(--nebula);
  cursor:pointer;
  /* estas tres las escribe el JS según la distancia al centro */
  transform:translateX(var(--x,0)) rotateY(var(--rot,0deg)) scale(var(--sc,1));
  filter:blur(var(--bl,0px)) brightness(var(--br,1));
  opacity:var(--op,1);
  z-index:var(--z,1);
  transition:transform .62s var(--ease), filter .62s var(--ease),
             opacity .62s var(--ease), box-shadow .62s var(--ease);
  will-change:transform;
}
.cover-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* el cartel activo manda: sombra profunda y halo de color */
.cover-item.activo{
  cursor:default;
  box-shadow:0 40px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(139,92,246,.22);
}
.cover-item.activo::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 60px rgba(139,92,246,.18);
}

/* --- flechas --- */
.cover-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-hi);
  background:rgba(10,8,30,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--cream);
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.cover-nav svg{ width:20px; height:20px; }
.cover-nav:hover{ background:rgba(139,92,246,.3); border-color:var(--violet-hi); }
.cover-prev{ left:clamp(0px,2vw,2rem); }
.cover-next{ right:clamp(0px,2vw,2rem); }
.cover-prev:hover{ transform:translateY(-50%) translateX(-3px); }
.cover-next:hover{ transform:translateY(-50%) translateX(3px); }

/* --- puntos --- */
.cover-puntos{ display:flex; justify-content:center; gap:.5rem; margin-bottom:2rem; }
.cover-puntos button{
  width:30px; height:4px; border-radius:99px; border:0;
  background:rgba(190,175,255,.26);
  transition:background .35s, width .35s var(--ease);
}
.cover-puntos button.on{ width:46px; background:linear-gradient(90deg,var(--violet),var(--amber)); }

/* --- datos del cartel activo --- */
.cover-datos{ text-align:center; max-width:52ch; margin:0 auto; }
.cover-datos .event-city{
  font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:400; letter-spacing:-.03em;
  margin-bottom:.5rem; padding:0; border:0;
}
.cover-datos .event-date{
  font-family:var(--display); font-size:1.1rem; font-weight:500;
  color:var(--amber-hi); margin-bottom:.3rem;
}
.cover-datos .event-time,
.cover-datos .event-place{ font-size:.96rem; color:var(--dim); line-height:1.55; }
.cover-datos .btn{ margin-top:1.6rem; }
/* el texto se refresca con un fundido cuando cambias de cartel */
.cover-datos.cambiando > *{ opacity:0; transform:translateY(6px); }
.cover-datos > *{ transition:opacity .3s var(--ease), transform .3s var(--ease); }

@media (max-width:640px){
  .cover{ min-height:440px; }
  .cover-item{ width:clamp(200px,62vw,280px); }
  .cover-nav{ width:44px; height:44px; }
  .cover-prev{ left:0; }
  .cover-next{ right:0; }
}
@media (prefers-reduced-motion:reduce){
  .cover-item{ transition:none; }
}


/* ═══════════ FAQ ═══════════ */
.faq{ max-width:900px; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0;
  font-family:var(--display); font-size:clamp(1.02rem,1.9vw,1.2rem); font-weight:400;
  letter-spacing:-.015em; color:var(--cream);
  transition:color .3s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--amber); }
.plus{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.plus::before,.plus::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--amber);
  transform:translate(-50%,-50%); transition:transform .38s var(--ease), opacity .28s;
}
.plus::before{ width:16px; height:1.5px; }
.plus::after{ width:1.5px; height:16px; }
.qa[open] .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.qa-body{ padding:0 0 1.7rem; max-width:72ch; animation:qaIn .45s var(--ease); }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.qa-body p{ color:var(--dim); font-size:1rem; line-height:1.78; }

/* ═══════════ FINAL / COMUNIDAD ═══════════ */
.sec-final .wrap{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.final-media{ margin:0; }
.final-media img{
  width:100%; border-radius:var(--r);
  aspect-ratio:16/11; object-fit:cover;
  border:1px solid var(--line-hi);
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}
.final-copy h2{ margin:.9rem 0 1.3rem; }
.final-copy .lead{ margin-bottom:1rem; }
.final-copy > p{ color:var(--dim); line-height:1.75; }

/* ═══════════ FOOTER ═══════════ */
.ftr{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:rgba(4,5,13,.6);
  padding:clamp(3.5rem,7vw,5rem) 0 2.2rem;
}
.ftr-grid{ display:grid; grid-template-columns:1.6fr .7fr .9fr; gap:clamp(2rem,5vw,4rem); }
.ftr-brand p{ margin-top:1.1rem; color:var(--faint); font-size:.94rem; line-height:1.7; max-width:38ch; }
.ftr-col{ display:flex; flex-direction:column; gap:.62rem; }
.ftr-col h5{
  font-size:.77rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--violet-hi); margin-bottom:.5rem; font-weight:500;
}
.ftr-col a{ color:var(--dim); font-size:.94rem; transition:color .25s; width:fit-content; }
.ftr-col a:hover{ color:var(--amber); }
.ftr-bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--faint);
}
.ftr-legal{ font-size:.8rem; max-width:52ch; }

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
.wa{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:600;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.2rem; border-radius:99px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff; font-family:var(--display); font-weight:600; font-size:.93rem;
  box-shadow:0 10px 34px rgba(18,140,126,.4);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.wa:hover{ transform:translateY(-3px); box-shadow:0 16px 44px rgba(37,211,102,.5); }
.wa svg{ width:22px; height:22px; flex:0 0 auto; }
.wa-pulse{
  position:absolute; inset:0; border-radius:99px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:pulse 2.6s var(--ease-soft) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }

/* ═══════════════════════════════════════════
   RESPONSIVE — el móvil es otra composición
   ═══════════════════════════════════════════ */

@media (max-width:1080px){
  .studies{ grid-template-columns:repeat(2,1fr); }
  .feature-card{ grid-template-columns:1fr; }
  .feature-media img{ min-height:320px; aspect-ratio:16/10; }
  .ftr-grid{ grid-template-columns:1fr 1fr; }
  .ftr-brand{ grid-column:1 / -1; }
}

@media (max-width:920px){
  :root{ --hdr-h:66px; }

  /* nav a panel deslizante */
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0;
    flex-direction:column; gap:0; margin:0;
    padding:1.4rem clamp(1.15rem,4vw,2.5rem) 2rem;
    background:rgba(8,10,26,.96);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-120%); opacity:0; visibility:hidden;
    transition:transform .45s var(--ease), opacity .3s, visibility .3s;
  }
  .nav.open{ transform:none; opacity:1; visibility:visible; }
  .nav a{
    padding:.95rem 0; border-radius:0; font-size:1.12rem;
    font-family:var(--display); color:var(--cream);
    border-bottom:1px solid var(--line);
  }
  .nav a:hover{ background:none; color:var(--amber); }
  .burger{ display:block; order:3; }
  .hdr-right{ margin-left:auto; }
  .hdr-right .btn{ display:none; }

  /* Las dos fichas se apilan. Hay que repetir el selector de la ficha par:
     `.member:nth-child(even)` pesa más que `.member`, y las media queries no
     añaden peso, así que sin esta línea la segunda ficha seguía en dos
     columnas y su foto se quedaba en 2px de ancho (invisible en el móvil). */
  .member,
  .member:nth-child(even){ grid-template-columns:1fr; gap:1.6rem; }
  .member-foto{ max-width:340px; }
  .member:nth-child(even) .member-foto{ order:1; }
  .member:nth-child(even) .member-info{ order:2; }

  .split,.sec-final .wrap{ grid-template-columns:1fr; gap:2.5rem; }
  .split-rev .split-copy{ order:1; }
  .split-rev .split-media{ order:2; }
  .split-media img{ aspect-ratio:3/2; }
  .split-video video{ aspect-ratio:4/5; height:auto; width:100%; }
  .final-media{ order:2; }
  .final-copy{ order:1; }

  .cards{ grid-template-columns:1fr; }
  .studies{ grid-template-columns:1fr; }

  /* Por qué elegirnos: una sola columna de lectura y el puente en vertical.
     El arco horizontal no cabe, así que se cambia por un hilo de luz. */
  .pq-texto{ columns:1; }
  .puente{ grid-template-columns:1fr; gap:1.6rem; }
  .puente-arco{
    justify-self:center; width:2px; height:54px;
    background:linear-gradient(180deg,transparent,var(--violet-hi),transparent);
    opacity:.7;
  }
  .puente-arco svg{ display:none; }
  .arco-punto{ top:-4px; }
  .dimensiones{ grid-template-columns:1fr; gap:2.6rem; }
  .flow{ grid-template-columns:1fr; gap:2.75rem; }
  /* en vertical el hilo no aporta y queda mal: se retira en móvil.
     Los glifos conservan su animación. */
  .flow-line{ display:none; }
  .glyph{ width:96px; height:96px; margin-bottom:1.2rem; }
  .glyph svg{ width:62px; height:62px; }
  .events{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  body{ font-size:15.8px; }

  /* En pantallas estrechas el retrato flotado deja al título una columna de
     unos 140px: lo parte en tres renglones y abre un hueco enorme a su
     derecha. Aquí el círculo pasa a su propia fila y el texto recupera todo
     el ancho de la tarjeta. */
  .card-media{
    float:none; shape-outside:none;
    width:128px;
    margin:0 0 1.35rem;
  }
  .card-num{ display:block; margin-bottom:.2rem; }

  .hero{ min-height:auto; padding-top:calc(var(--hdr-h) + 2.5rem); padding-bottom:3.5rem; }
  .hero-media img{ opacity:.4; object-position:56% 50%; }
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(4,5,13,.8) 0%, rgba(4,5,13,.6) 42%, rgba(8,10,26,.94) 90%, var(--deep) 100%);
  }
  .hero-title{ font-size:clamp(2.6rem,12vw,3.5rem); max-width:100%; }
  .hero-sub{ font-size:1rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .taglines{ gap:.4rem; }
  .taglines li{ font-size:.82rem; padding:.35rem .8rem; }
  .stats{ gap:1.5rem 2.2rem; margin-top:2.8rem; }
  .stats dt{ font-size:2.1rem; }
  .stats dd{ font-size:.75rem; }
  .scroll-cue{ display:none; }

  .sec{ padding:4.5rem 0; }
  .price-row{ flex-direction:column; }
  .price{ width:100%; }
  .feature-cta{ flex-direction:column; align-items:stretch; }
  .feature-cta .btn{ width:100%; }


  .ftr-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .ftr-bottom{ flex-direction:column; align-items:flex-start; }

  /* el flotante se reduce a burbuja para no tapar contenido */
  .wa{ right:.9rem; bottom:.9rem; padding:.85rem; }
  .wa-txt{ display:none; }
}

/* ---------- accesibilidad ---------- */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }

/* Sólo se detienen los movimientos continuos e intrusivos.
   El contenido SIEMPRE queda visible — nunca se oculta por esta consulta. */
@media (prefers-reduced-motion:reduce){
  .trust-track{ animation:none; }
  .pre-mark img,.pre-orbit,.pre-bar i,.scroll-cue i,.wa-pulse{ animation:none; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .reveal[data-split] .ln{ opacity:1; transform:none; }
}

@media print{
  #cosmos,.grain,.orb,.wa,#preloader,.scroll-progress,.cursor-ring{ display:none !important; }
  body{ background:#fff; color:#111; }
  .reveal{ opacity:1 !important; transform:none !important; }
}