/* ============================================================
   TRIBU CONNECTION — Landing
   Paleta tomada del logo (las 5 manos = las 5 tribus)
   ============================================================ */
:root{
  color-scheme: dark;
  accent-color: var(--teal);
  /* Base oscura (cinematográfica) */
  --ink:        #0C0D10;
  --ink-1:      #101218;
  --ink-2:      #15171F;
  --ink-3:      #1E212B;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  /* Texto */
  --cream:      #F4F1EA;   /* texto principal */
  --soft:       #C7C9D1;   /* texto secundario */
  --muted:      #8A8D98;   /* texto terciario / labels */

  /* Las 5 manos de la marca */
  --green:  #9BCB46;
  --teal:   #36B7C4;
  --purple: #9B7CB8;
  --red:    #D24B62;
  --amber:  #F4A623;

  /* Espectro (rojo → ámbar → verde → turquesa → violeta) */
  --spectrum: linear-gradient(100deg, var(--red) 0%, var(--amber) 27%, var(--green) 52%, var(--teal) 76%, var(--purple) 100%);
  /* Igual a --spectrum pero NO lo pisan las páginas con color propio: para
     lo que tiene que verse igual en todo el sitio (ej. "Sumate" del header). */
  --rainbow: linear-gradient(100deg, #D24B62 0%, #F4A623 27%, #9BCB46 52%, #36B7C4 76%, #9B7CB8 100%);
  --btn-grad: linear-gradient(100deg, #F9AC30 0%, #E8753F 22%, #C13E54 55%, #76558F 100%);
  --btn-fg: #fff;

  --maxw: 1560px;
  --pad:  clamp(20px, 4vw, 64px);
  --r:    18px;

  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-accent: 'Protest Strike', sans-serif;
  --font-hand: 'Caveat', cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* overflow-x:hidden en html Y body: en iOS Safari el scroll horizontal lo maneja
   el <html>, así que ponerlo solo en body no alcanza para evitar el corrimiento
   lateral. Con los dos, la página nunca se corre de costado (el scroll de los
   reels es un contenedor propio con su propio overflow, no se ve afectado). */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%; }

body{
  font-family:var(--font-sans);
  background:var(--ink);
  color:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}

/* Evita que quede una sola palabra huérfana al final de un párrafo (ej: un
   punto seguido de una palabra sola que salta de renglón). Los navegadores
   que todavía no soportan text-wrap:pretty simplemente lo ignoran. */
p, li, .lead, .modal-sub, .field-error{ text-wrap:pretty; }

/* Aurora ambiental de fondo (manchas de color muy tenues) */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.16;
  animation:drift 26s ease-in-out infinite alternate;
}
.aurora .a1{ width:46vw; height:46vw; top:-12vw; left:-8vw; background:var(--amber); }
.aurora .a2{ width:42vw; height:42vw; top:18vw; right:-12vw; background:var(--teal); animation-delay:-6s; }
.aurora .a3{ width:40vw; height:40vw; bottom:-10vw; left:24vw; background:var(--purple); animation-delay:-12s; }
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(0,-40px,0) scale(1.12); }
}


/* Layout */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; z-index:1; padding-block:clamp(26px,3.8vw,46px); }
section[id]{ scroll-margin-top:82px; }
.section--tight{ padding-block:clamp(14px,2vw,26px); }

/* Tipografía */
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-.02em; }
.display{ font-family:var(--font-accent); font-size:clamp(2.3rem, 5.8vw, 4.2rem); font-weight:400; letter-spacing:normal; text-wrap:balance; }
/* Titular con quiebres manuales: el renglon mas largo mide ~13.8em, o sea 928px al
   tope de 4.2rem. Se libera el ancho del hero (hasta 1052px) para que los
   <br class="br-desk"> sean los unicos quiebres y no se cuele un wrap extra. */
.display--3l{ text-wrap:wrap; }
.hero-inner:has(.display--3l){ max-width:none; }
.h2{ font-family:var(--font-accent); font-weight:400; letter-spacing:normal; text-wrap:balance; font-size:clamp(1.7rem, 3.6vw, 2.6rem); }
.cal-title{ font-size:clamp(1.15rem, 2vw, 1.6rem); }
@media (min-width:640px){ .cal-title{ white-space:nowrap; } }
.h3{ font-size:clamp(1.2rem, 2vw, 1.45rem); letter-spacing:-.01em; }
.lead{ font-size:clamp(1rem, 1.4vw, 1.15rem); color:var(--soft); font-weight:400; }
.serif-it{ font-family:var(--font-display); font-style:italic; font-weight:400; }

.eyebrow{
  font-family:var(--font-hand); font-size:1.3rem; font-weight:600; letter-spacing:.01em; text-transform:none;
  color:var(--muted); display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--spectrum); border-radius:2px; }

.grad{
  background:var(--spectrum); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Botones */
.btn{
  --bg:var(--cream); --fg:var(--ink);
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:.95em 1.5em; border-radius:999px; border:1px solid transparent;
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
  /* El borde transparente de 1px queda debajo del fondo: sin esto el
     degradé se repite en ese borde y aparece el color del extremo opuesto
     en los costados del botón. */
  background-origin:border-box;
}
/* Botón principal: degradé rojizo de marca por defecto. En las páginas con
   color propio (Club Tribu, Creadores, Marcas, Comunidad) lo reemplaza un
   degradé de ese color (ver body[data-accent] más abajo). El multicolor
   queda solo para casos puntuales: .btn--rainbow. */
.btn--spectrum{ background:var(--btn-grad); color:var(--btn-fg); box-shadow:0 10px 34px -12px rgba(193,62,84,.55); }
.btn--spectrum:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(193,62,84,.6); }
.btn--spectrum svg{ color:currentColor; }
.btn--rainbow{ background:var(--rainbow); color:#15110f; box-shadow:0 10px 34px -12px rgba(210,75,98,.55); }
.btn--rainbow:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(54,183,196,.6); }
.btn--outline{ background:transparent; color:var(--cream); border-color:rgba(244,241,234,.7); }
.btn--outline:hover{ border-color:#fff; background:rgba(255,255,255,.05); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--cream); transform:translateY(-2px); }
.btn--icon{ display:inline-flex; align-items:center; gap:.5rem; }

/* Fila de pestañas (agenda, club, red tribu, cuenta, paneles del equipo).
   Igual que el footer: es de todo el sitio, no de la home. */
.tab-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1.6rem 0 2.2rem; }
.tab-btn{
  padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--line-2); background:transparent;
  color:var(--soft); font-family:var(--font-sans); font-size:.88rem; cursor:pointer; transition:.2s;
}
.tab-btn.active{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.tab-btn:not(.active):hover{ border-color:var(--cream); color:var(--cream); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(0,0,0,.6); }
.btn--tribu-cta{ background:linear-gradient(100deg, #F9AC30 0%, #E8753F 22%, #C13E54 55%, #76558F 100%); color:#fff; box-shadow:0 10px 34px -12px rgba(193,62,84,.55); }
.btn--tribu-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(193,62,84,.6); }
.btn--tribu-cta svg{ color:#fff; }
.btn .arr{ transition:transform .25s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* ============================ NAV ============================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:16px var(--pad); transition:background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom:1px solid transparent;
}
.nav .brand{ grid-column:1; justify-self:start; }
.nav .nav-cta{ grid-column:3; justify-self:end; }
.nav.scrolled{ background:rgba(10,11,14,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); padding-block:11px; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--cream); }
.brand img{ width:38px; height:38px; object-fit:contain; }
/* Logo completo (manos + palabra) en un solo archivo, blanco sobre el fondo
   oscuro del nav. Manda el alto: el ancho lo resuelve la proporción del PNG,
   que viene recortado a su caja real. */
.brand .brand-full{ width:auto; height:42px; }
@media (max-width:900px){ .brand .brand-full{ height:34px; } }
@media (max-width:400px){ .brand .brand-full{ height:30px; } }
.brand b{ font-family:var(--font-sans); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; line-height:1; }
.brand b span{ display:block; font-weight:500; font-size:.66rem; letter-spacing:.34em; color:var(--muted); text-transform:uppercase; margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:1.3rem; grid-column:2; justify-self:center; margin-right:3rem; }
.nav-links a{ color:var(--soft); text-decoration:none; font-size:.89rem; font-weight:500; white-space:nowrap; transition:color .2s ease; }
.nav-links a:hover{ color:var(--cream); }
.nav-cta{ display:flex; align-items:center; gap:1.1rem; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:24px; height:2px; background:var(--cream); border-radius:2px; transition:.3s; }
.burger span+span{ margin-top:5px; }

/* ============================ HERO ============================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:96px; padding-bottom:64px; overflow:hidden; }
.hero-star{
  position:absolute; right:-6vw; top:50%; translate:0 -50%;
  width:min(58vw,720px); aspect-ratio:1; opacity:.10; z-index:0; pointer-events:none;
  animation:spin 70s linear infinite;
}
.hero-star img{ width:100%; height:100%; object-fit:contain; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-inner{ position:relative; z-index:2; max-width:900px; margin-inline:auto; text-align:center; }
.hero .eyebrow{ margin-bottom:1.7rem; }
.hero h1{ margin-bottom:1.4rem; }
.hero .lead{ max-width:640px; margin:0 auto .6rem; }
/* Bajada de 2 renglones con quiebre manual: se libera el ancho para que el
   <br class="br-desk"> sea el unico corte y no se cuele un wrap extra. */
.hero .lead--2l{ max-width:none; }
.hero .sub{ max-width:600px; color:var(--muted); font-size:1.02rem; margin:0 auto 2.4rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.scrollcue{ position:absolute; left:var(--pad); bottom:30px; z-index:2; display:flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }
.scrollcue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--muted),transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.6); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }

/* ===================== LAS SEÑALES (eyebrow + stats) ===================== */
#senales{ padding-bottom:0; }
#senales + .stats{ border-top:none; }

/* ========================= STATS ========================= */
.stats{ border-block:1px solid var(--line); background:rgba(255,255,255,.015); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding-block:46px; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,4vw,3.1rem); line-height:1; letter-spacing:-.02em; }
.stat .lbl{ display:block; margin-top:.6rem; font-size:.82rem; color:var(--muted); letter-spacing:.04em; }
.stat:nth-child(1) .num{ color:var(--amber); }
.stat:nth-child(2) .num{ color:var(--teal); }
.stat:nth-child(3) .num{ color:var(--red); }
.stat:nth-child(4) .num{ color:var(--green); }

/* ===================== MOMENTOS (lo principal) ===================== */
.sec-head{ max-width:760px; margin-bottom:clamp(1.4rem,3vw,2.1rem); }
.sec-head .eyebrow{ margin-bottom:1.3rem; }
.sec-head h2{ margin-bottom:1.4rem; }
.sec-head--wide{ max-width:none; }
.sec-head--wide .lead{ max-width:none; font-size:clamp(1rem, 1.35vw, 1.18rem); }

.momento-quote{
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(1.1rem, 1.8vw, 1.5rem); line-height:1.35; color:var(--cream);
  max-width:none; margin-bottom:.3rem;
}
.momento-quote b{ font-style:normal; font-weight:560; }

.ejes{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:clamp(1rem,2vw,1.4rem); }
.eje{
  position:relative; padding:1.1rem 1.2rem 1.2rem; border-radius:var(--r);
  background:var(--ink-1); border:1px solid var(--line); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.eje::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c); opacity:.9; }
.eje:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--ink-2); }
.eje .dot{ width:12px; height:12px; border-radius:50%; background:var(--c); margin-bottom:1.1rem; box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%, transparent); }
.eje h3{ font-size:1.05rem; margin-bottom:.4rem; letter-spacing:-.01em; min-height:2em; display:flex; align-items:flex-start; }
.eje p{ font-size:.86rem; color:var(--soft); line-height:1.45; }
.eje.green{  --c:var(--green); }
.eje.teal{   --c:var(--teal); }
.eje.purple{ --c:var(--purple); }
.eje.amber{  --c:var(--amber); }

/* Galería de reels (placeholder editable) */
.reels{ margin-top:clamp(2.5rem,5vw,3.6rem); }
.reels-label{ display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.2rem; }
.reels-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.reel{
  position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background-color:var(--ink-2);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:1rem; transition:transform .3s ease, border-color .3s ease;
}
.reel::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78) 100%); z-index:1; }
.reel::after{ content:""; position:absolute; inset:0; background:var(--g); opacity:.10; mix-blend-mode:overlay; z-index:1; }
.reel:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.reel .play{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(244,241,234,.92); color:var(--ink); z-index:2;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.reel .play svg{ margin-left:3px; }
.reel small{ position:relative; z-index:2; color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.02em; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.reel:nth-child(1){ --g:var(--amber); }
.reel:nth-child(2){ --g:var(--teal); }
.reel:nth-child(3){ --g:var(--red); }
.reel:nth-child(4){ --g:var(--purple); }

/* ===================== NOSOTROS ===================== */
.about{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.018) 50%, transparent); }
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.about-grid--single{ grid-template-columns:1fr; }
/* Sin el círculo de marcas al costado, el texto se centra y respira en vez de dejar media
   pantalla vacía a la derecha. */
.about-grid--single .about-copy{ text-align:center; max-width:860px; margin-inline:auto; }
.about-grid--single .about-copy p{ max-width:62ch; margin-inline:auto; }
/* Párrafo con quiebre manual (<br>): tiene que entrar en 2 renglones exactos, así que no lo
   limita el max-width de lectura — el ancho del .wrap alcanza para el renglón más largo.
   Abajo de ~820px de viewport vuelve a envolver solo, que es lo deseado en mobile. */
.about-grid--single .about-copy p.p-2lines{ max-width:none; }
.about-copy p{ color:var(--soft); font-size:1.06rem; margin-bottom:1.2rem; max-width:46ch; }
.about-copy p .hl{ color:var(--cream); font-weight:500; }
.about-copy .bridge{ font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--cream); margin-top:1.8rem; }

.tribu-card{ background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.2rem); }
.tribu-card .cap{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem; }
.mnemo{ list-style:none; display:flex; flex-direction:column; gap:1.05rem; }
.mnemo li{ display:flex; align-items:baseline; gap:1.1rem; }
.mnemo .ltr{ font-family:var(--font-display); font-weight:600; font-size:2rem; line-height:1; width:1.4ch; flex:none; }
.mnemo .txt{ font-size:1.02rem; color:var(--cream); }
.mnemo .txt span{ display:block; font-size:.86rem; color:var(--muted); }
.mnemo li:nth-child(1) .ltr{ color:var(--red); }
.mnemo li:nth-child(2) .ltr{ color:var(--amber); }
.mnemo li:nth-child(3) .ltr{ color:var(--green); }
.mnemo li:nth-child(4) .ltr{ color:var(--teal); }
.mnemo li:nth-child(5) .ltr{ color:var(--purple); }
/* Variante en grilla de 2 columnas (landings organizas-experiencias/representas-marca); colapsa a 1 en mobile */
.mnemo.mnemo--grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 2rem; margin-top:1.6rem; }
@media (max-width:640px){ .mnemo.mnemo--grid{ grid-template-columns:1fr; } }

/* ===================== TRIBU PASS ===================== */
.pass-intro{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:end; margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }
.pass-intro > div{ flex:none; white-space:nowrap; }
.pass-copy{ font-size:.8rem; white-space:nowrap; line-height:1.55; }
.pass-intro p{ color:var(--soft); font-size:1.06rem; max-width:48ch; }
.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.plan{
  position:relative; border:1px solid var(--line); border-radius:20px; padding:1.2rem 1.3rem;
  background:var(--ink-1); display:flex; flex-direction:column;
}
.plan--plus{ border-color:transparent; background:
    linear-gradient(var(--ink-1),var(--ink-1)) padding-box,
    var(--spectrum) border-box; box-shadow:0 30px 80px -40px rgba(54,183,196,.4); }
.plan .badge{
  position:absolute; top:-11px; left:1.6rem; font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--spectrum); color:#15110f; padding:.35em .8em; border-radius:999px;
}
.plan .tier{ font-family:var(--font-display); font-size:1.25rem; font-weight:560; margin-bottom:.2rem; }
.plan .tier-sub{ color:var(--muted); font-size:.82rem; margin-bottom:.8rem; }
.plan .price{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.3rem; }
.plan .tier-note{ font-size:.76rem; color:var(--muted); margin-bottom:.8rem; font-style:italic; }
.plan .price b{ font-family:var(--font-display); font-weight:560; font-size:1.8rem; line-height:1; letter-spacing:-.02em; }
.plan .price s{ text-decoration:none; color:var(--muted); font-size:.88rem; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:.45rem; margin-bottom:1rem; flex:1; }
.plan li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; color:var(--soft); line-height:1.4; }
.plan li svg{ flex:none; margin-top:.2rem; }
.plan .check-green{ color:var(--green); }
.plan .check-amber{ color:var(--amber); }
.pack-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin:.2rem 0 1.1rem; }
@media (max-width:560px){ .pack-grid{ grid-template-columns:1fr; } }
.pack-card{ border:1px solid var(--line-2); border-radius:16px; background:var(--ink-2); padding:1.1rem .8rem; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; }
.pack-card .pack-title{ font-family:var(--font-display); font-size:.86rem; color:var(--cream); line-height:1.3; white-space:normal; }
.pack-card .pack-title br{ display:block; content:""; margin-top:.15rem; }
.pack-card .pack-desc{ font-size:.8rem; color:var(--soft); line-height:1.45; }
.cat-chip{ font-family:var(--font-sans); display:inline-flex; align-items:center; padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line-2); background:var(--ink-1); color:var(--soft); font-size:.85rem; cursor:pointer; transition:.15s; margin:0 .4rem .4rem 0; }
.cat-chip.sel{ background:var(--spectrum); color:#15110f; border-color:transparent; font-weight:600; }
.plan .btn{ width:100%; justify-content:center; }
.pass-note{ margin-top:1rem; font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.6rem; }
.profile-benefits{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.profile-benefits-title{ font-size:.95rem; color:var(--soft); margin-bottom:1.2rem; }
.profile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.profile-card{ border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.3rem; background:var(--ink-1); }
.profile-card b{ display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:.5rem; }
.profile-card p{ font-size:.88rem; color:var(--soft); line-height:1.5; }
@media (max-width:860px){ .profile-grid{ grid-template-columns:1fr; } }
.pass-note .pip{ width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none; }

/* ===================== CTA B2B ===================== */
.cta{ position:relative; overflow:hidden; padding-block:clamp(24px,3.5vw,44px) clamp(44px,7vw,84px); scroll-margin-top:100px; }
.cta-box{
  position:relative; border:1px solid var(--line); border-radius:28px; overflow:hidden;
  padding:clamp(1.9rem,4vw,3rem) clamp(2.4rem,6vw,4.5rem); background:
    radial-gradient(120% 130% at 100% 0%, rgba(155,124,184,.16), transparent 55%),
    radial-gradient(120% 130% at 0% 100%, rgba(244,166,35,.12), transparent 55%),
    var(--ink-1);
}
.cta-box .eyebrow{ margin-bottom:1rem; }
.cta-box h2{ max-width:16ch; margin-bottom:1rem; font-size:clamp(1.9rem,3.8vw,2.8rem); }
.cta-box .lead{ max-width:54ch; margin-bottom:1.7rem; }
.cta-box::after{
  content:""; position:absolute; top:50%; right:min(110px,8vw); transform:translateY(-50%);
  width:min(260px,22vw); height:min(260px,22vw);
  background:url(/assets/isotipo.png?v=3) no-repeat center/contain;
  opacity:.16; pointer-events:none;
}
@media (max-width:900px){ .cta-box::after{ display:none; } }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:1.8rem; }
.step{ border-top:1px solid var(--line); padding-top:1.1rem; }
.step .n{ font-family:var(--font-display); font-size:1rem; color:var(--muted); margin-bottom:.6rem; }
.step .n b{ background:var(--spectrum); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.step p{ font-size:.96rem; color:var(--soft); }
.cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.cta-actions .note{ font-size:.88rem; color:var(--muted); }
.cta-refs{ margin-top:1.6rem; font-size:.84rem; color:var(--muted); }
.cta-refs b{ color:var(--soft); font-weight:600; }

/* ===================== FOOTER ===================== */
.footer{ border-top:1px solid var(--line); padding-block:clamp(56px,8vw,84px) 40px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:start; }
.footer-logo img{ width:170px; max-width:60%; height:auto; margin-bottom:1.4rem; }
.footer-tag{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--cream); max-width:none; white-space:nowrap; margin-bottom:.3rem; }
.footer-right{ display:flex; flex-direction:column; gap:1.4rem; }

/* Footer de 4 columnas. Vive acá y no en home.css porque lo usan todas las
   páginas: las landings de creadores, comunidad y marcas solo cargan esta
   hoja, y con las reglas en home.css les quedaba el footer sin grilla, con
   los links apilados y subrayados. */
.footer-cols{ display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:1.6rem; }
.footer-col-title{ font-size:.85rem; font-weight:700; color:var(--cream); margin-bottom:.9rem; }
.footer-col a{ display:block; font-size:.85rem; color:var(--soft); text-decoration:none; margin-bottom:.65rem; }
.footer-col a:hover{ color:var(--cream); }
@media (max-width:980px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer-cols{ grid-template-columns:1fr; } }
.footer-right .col-cap{ font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.socials{ display:flex; flex-wrap:wrap; gap:.7rem; }
.soc{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  color:var(--soft); font-size:.92rem; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:.6em 1em;
  transition:border-color .25s ease, color .25s ease, transform .25s ease, background .25s ease;
}
.soc:hover{ color:var(--cream); border-color:var(--line-2); transform:translateY(-2px); }
.soc.ig:hover{ border-color:var(--red); background:rgba(210,75,98,.08); }
.soc.tt:hover{ border-color:var(--teal); background:rgba(54,183,196,.08); }
.soc.yt:hover{ border-color:var(--amber); background:rgba(244,166,35,.08); }
.soc.mail:hover{ border-color:var(--green); background:rgba(155,203,70,.08); }
.foot-bottom{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  color:var(--muted); font-size:.83rem;
}
.foot-bottom .dots{ display:flex; gap:6px; }
.foot-bottom .dots i{ width:8px; height:8px; border-radius:50%; }
.foot-legal{ display:flex; flex-wrap:wrap; gap:.4rem; }
.foot-legal a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; transition:.2s; }
.foot-legal a:hover{ color:var(--cream); }

/* En celular, todo el footer centrado (logo, slogan, Seguinos y Hablemos) */
@media (max-width:640px){
  .footer-grid{ justify-items:center; text-align:center; }
  .footer-logo{ display:flex; flex-direction:column; align-items:center; }
  .footer-logo img{ margin-inline:auto; }
  .footer-tag{ max-width:none; }
  .footer-right{ align-items:center; }
  .footer-right > div{ display:flex; flex-direction:column; align-items:center; }
  .socials{ justify-content:center; }
  .foot-bottom{ justify-content:center; text-align:center; }
  .foot-legal{ justify-content:center; }
}

/* ============ COOKIE BAR ============ */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; padding:16px var(--pad);
  transform:translateY(120%); transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.cookie-bar.show{ transform:translateY(0); }
.cookie-bar-inner{
  max-width:900px; margin-inline:auto; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:var(--ink-1); border:1px solid var(--line-2); border-radius:18px; padding:1.1rem 1.4rem;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.6);
}
.cookie-bar-text{ flex:1; min-width:240px; font-size:.86rem; color:var(--soft); line-height:1.55; }
.cookie-bar-text b{ color:var(--cream); }
.cookie-bar-text a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
.cookie-bar .btn{ flex:none; padding:.7rem 1.3rem; font-size:.9rem; }
@media (max-width:560px){ .cookie-bar-inner{ flex-direction:column; align-items:stretch; } .cookie-bar .btn{ width:100%; justify-content:center; } }

/* ============ MODAL LEGAL ============ */
.legal-tabs{ display:flex; gap:.5rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.legal-tabs button{ border:1px solid var(--line-2); background:var(--ink-2); color:var(--soft); font-family:var(--font-sans); font-size:.82rem; padding:.45rem .9rem; border-radius:999px; cursor:pointer; transition:.2s; }
.legal-tabs button.active{ background:var(--cream); color:var(--ink); border-color:var(--cream); font-weight:600; }
.legal-body{ max-height:52vh; overflow-y:auto; padding-right:.4rem; font-size:.92rem; color:var(--soft); line-height:1.65; }
.legal-body h3{ font-family:var(--font-display); font-size:1.05rem; color:var(--cream); margin:1.3rem 0 .5rem; }
.legal-body h3:first-child{ margin-top:0; }
.legal-body p{ margin-bottom:.9rem; }
.legal-body ul{ margin:0 0 .9rem 1.2rem; }
.legal-body li{ margin-bottom:.4rem; }
.legal-updated{ font-size:.78rem; color:var(--muted); margin-bottom:1.2rem; }

/* ===================== REVEAL (animación al scrollear) =====================
   El opacity:0 vive detrás de html.js (clase que pone un script inline en el
   <head>). Así, si el JS tarda o falla, el contenido se ve igual en vez de
   quedar invisible para siempre esperando a site.js. */
.reveal{ transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal{ opacity:0; transform:translateY(26px); }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* Lo que está arriba del fold usa .reveal-now: misma animación pero 100% CSS,
   sin esperar a site.js. Esto era el cuello de botella real del primer
   pintado: el hero quedaba en opacity:0 hasta que bajaban supabase-js y
   leaflet desde unpkg, o sea ~4,7s. */
.reveal-now{ animation:tc-reveal-in .8s cubic-bezier(.2,.7,.2,1) both; }
.reveal-now.d1{ animation-delay:.08s; } .reveal-now.d2{ animation-delay:.16s; }
.reveal-now.d3{ animation-delay:.24s; } .reveal-now.d4{ animation-delay:.32s; }
@keyframes tc-reveal-in{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .reveal-now{ animation:none; }
  html.js .reveal{ opacity:1; transform:none; }
}

:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1300px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-cta a[data-auth-nav]{ display:inline-flex; font-size:.82rem; padding:.55em 1.1em; }
  .burger{ display:block; }
  .nav-cta{ gap:.7rem; }
  .stats .wrap{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
  .ejes{ grid-template-columns:repeat(2,1fr); }
  .reels-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .pass-intro{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
  .pass-copy{ white-space:normal; font-size:.9rem; }
  .plans{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2.4rem; }
}
@media (max-width:560px){
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .ejes{ grid-template-columns:1fr; }
  .eje h3{ min-height:0; }
  .hero-star{ opacity:.07; right:-22vw; width:90vw; }
}

/* Menú mobile desplegable */
.mobile-menu{
  position:fixed; inset:0 0 auto 0; z-index:49; top:0; padding:90px var(--pad) 32px;
  background:rgba(10,11,14,.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transform:translateY(-110%); transition:transform .4s cubic-bezier(.4,0,.2,1); visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{ display:block; color:var(--cream); text-decoration:none; font-family:var(--font-display); font-size:1.6rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:1.4rem; width:100%; justify-content:center; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-star{ animation:none; }
}

/* ============ SERVICIOS ============ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:.5rem; }
.svc{ border:1px solid var(--line); border-radius:18px; background:var(--ink-1); padding:1.2rem; }
.svc h3{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; }
.svc h3 i{ width:9px; height:9px; border-radius:50%; flex:none; }
.svc ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.svc li{ font-size:.92rem; color:var(--soft); padding-left:1.1rem; position:relative; line-height:1.45; }
.svc li::before{ content:""; position:absolute; left:.15rem; top:.55rem; width:5px; height:5px; border-radius:50%; background:var(--muted); }
.svc-extra{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.2rem; }
/* Variante para landings con 4 servicios en una sola fila (solo desktop; en mobile respeta el 1fr de .svc-grid) */
@media (min-width:861px){ .svc-grid.svc-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ============ CALENDARIO ============ */
.cal-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem 2rem; flex-wrap:wrap; margin-bottom:2rem; }
.cal-nav{ display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.cal-nav > button.cal-arrow, .cdate-nav .cal-arrow{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:var(--ink-2); color:var(--cream); font-size:1.15rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s; line-height:0; padding:0; flex:none; }
.cal-nav > button.cal-arrow:hover, .cdate-nav .cal-arrow:hover{ border-color:var(--cream); background:var(--ink-3); }
.cal-month{ font-family:var(--font-display); font-size:clamp(1.15rem,2.6vw,1.5rem); text-transform:capitalize; min-width:7.5ch; text-align:center; line-height:1; }
.cal-today-btn{ margin-left:auto; font-size:.8rem; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem; cursor:pointer; transition:.2s; line-height:1; }
.cal-today-btn:hover{ color:var(--cream); border-color:var(--line-2); }
.cal-grid-wrap{ display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:1.2rem; align-items:start; }
.cal-card{ border:1px solid var(--line); border-radius:20px; background:var(--ink-1); padding:clamp(.7rem,1.3vw,1rem); }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin-bottom:.3rem; }
.cal-weekdays span{ text-align:center; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cal-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem; }
.cal-day{ position:relative; aspect-ratio:1/0.62; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--soft); font-size:.82rem; font-family:var(--font-sans); cursor:default; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; transition:.15s; padding:0; }
.cal-day > span:first-child{ line-height:1; }
.cal-day.other{ color:var(--muted); opacity:.35; }
.cal-day.today{ border-color:var(--line-2); color:var(--cream); }
.cal-day.has-ev{ cursor:pointer; background:var(--ink-2); color:var(--cream); border-color:var(--line); }
.cal-day.has-ev:hover{ border-color:var(--cream); transform:translateY(-2px); }
.cal-day.sel{ background:var(--ink-3); border-color:var(--cream); }
.cal-dots{ display:flex; gap:3px; }
.cal-dots i{ width:5px; height:5px; border-radius:50%; }
.cal-list{ display:flex; flex-direction:column; gap:.8rem; }
.cal-list h3{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:.1rem; }
.ev{ display:flex; align-items:center; gap:.75rem; padding:.65rem .85rem; border:1px solid var(--line); border-radius:14px; background:var(--ink-1); transition:.2s; text-decoration:none; color:inherit; }
.ev:hover{ border-color:var(--line-2); background:var(--ink-2); }
.ev-date{ flex:none; width:44px; text-align:center; }
.ev-date b{ display:block; font-family:var(--font-display); font-size:1.4rem; line-height:1; color:var(--cream); }
.ev-date span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
/* Evento de varios días: en vez de "20–24" apretado en 44px de ancho,
   lo apilamos en 3 renglones cortos, todo centrado. */
.ev-date b.ev-date-range{ font-size:1.05rem; line-height:1.15; }
.ev-date b.ev-date-range i{ display:block; font-style:normal; font-size:.6rem; font-family:var(--font-sans); font-weight:400; color:var(--muted); text-transform:lowercase; line-height:1.4; }
.ev-body{ flex:1; min-width:0; }
/* Foto del evento en la lista de la agenda (reunión del 13/10) */
.ev-img{ flex:none; width:64px; height:64px; border-radius:10px; background:#15171F center/cover no-repeat; }
@media (max-width:420px){ .ev-img{ width:52px; height:52px; } }
.ev-cat{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem; }
.ev-cat i{ width:7px; height:7px; border-radius:50%; }
.ev-title{ font-weight:600; color:var(--cream); font-size:.98rem; }
.ev-meta{ font-size:.84rem; color:var(--soft); margin-top:.1rem; }
.cal-empty{ color:var(--muted); font-size:.9rem; padding:.6rem 0; line-height:1.5; }
.cat-festival{ background:var(--amber); } .cat-taller{ background:var(--green); } .cat-feria{ background:var(--teal); } .cat-encuentro{ background:var(--purple); } .cat-ceremonia{ background:var(--red); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; margin-top:1.3rem; }
.cal-legend span{ display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--muted); }
.cal-legend i{ width:8px; height:8px; border-radius:50%; }

/* Calendario — toolbar, filtros, agenda */
.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.cal-filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cal-filter{ padding:.4rem .8rem; border:1px solid var(--line-2); border-radius:999px; background:var(--ink-1); color:var(--soft); font-size:.82rem; font-family:var(--font-sans); cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:.5rem; }
.cal-filter:hover{ border-color:var(--cream); }
.cal-filter i{ width:8px; height:8px; border-radius:50%; flex:none; }
.cal-filter.active{ background:var(--cream); color:var(--ink); border-color:var(--cream); font-weight:600; }
.cal-add{ padding:.6rem 1.1rem; font-size:.9rem; }
.cal-add span{ font-size:1.05rem; line-height:0; }
.cal-toolbar-right{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.cal-viewtoggle{ display:flex; border:1px solid var(--line-2); border-radius:999px; padding:3px; gap:2px; }
.cal-viewtoggle button{ border:0; background:none; color:var(--soft); font-family:var(--font-sans); font-size:.82rem; padding:.42rem .8rem; border-radius:999px; cursor:pointer; transition:.2s; }
.cal-viewtoggle button.active{ background:var(--cream); color:var(--ink); font-weight:600; }
.cal-map-wrap{ margin-top:.2rem; }
#calMap{ width:100%; height:400px; border-radius:20px; border:1px solid var(--line); overflow:hidden; background:var(--ink-1); }
.cal-map-note{ font-size:.8rem; color:var(--muted); margin-top:.9rem; }
/* Los tiles de Esri (World Street Map) vienen con un tono tostado bastante
   más cálido que la paleta clara y neutra de Google Maps. Este filtro no
   cambia el proveedor, solo empareja el color para que se vea parecido. */
.leaflet-tile-pane{ filter:saturate(.45) brightness(1.15) contrast(.93); }
.cal-pin-badge{ width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid var(--cream); box-shadow:0 2px 8px rgba(0,0,0,.5); }
.leaflet-popup-content-wrapper{ background:var(--ink-1); color:var(--cream); border-radius:14px; border:1px solid var(--line-2); }
.leaflet-popup-tip{ background:var(--ink-1); }
.leaflet-popup-content{ margin:.85rem 1rem; font-family:var(--font-sans); }
.map-pop-cat{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem; }
.map-pop-cat i{ width:7px; height:7px; border-radius:50%; }
.map-pop-title{ font-family:var(--font-display); font-size:1rem; margin-bottom:.2rem; }
.map-pop-meta{ font-size:.8rem; color:var(--soft); }
.leaflet-control-attribution{ background:rgba(12,13,16,.75) !important; color:var(--muted) !important; border-radius:8px 0 0 0 !important; font-size:.68rem !important; padding:.05rem .5rem !important; }
.leaflet-control-attribution a{ color:var(--soft) !important; }

/* Controles de zoom (+/-): por defecto Leaflet los dibuja cuadrados y blancos —
   los redondeamos y oscurecemos para que sigan el mismo lenguaje visual que el
   resto del sitio (botones, popups, tarjetas, todo con esquinas curvas). */
.leaflet-control-zoom{ border:1px solid var(--line-2) !important; border-radius:12px !important; overflow:hidden; box-shadow:0 6px 20px -6px rgba(0,0,0,.6) !important; }
.leaflet-control-zoom a{
  background:var(--ink-1) !important; color:var(--cream) !important; border:0 !important;
  width:32px !important; height:32px !important; line-height:32px !important;
}
.leaflet-control-zoom a:hover{ background:var(--ink-2) !important; }
.leaflet-control-zoom-in{ border-radius:11px 11px 0 0 !important; }
.leaflet-control-zoom-out{ border-radius:0 0 11px 11px !important; border-top:1px solid var(--line) !important; }
.leaflet-bar{ border:0 !important; }
@media (max-width:640px){ #calMap{ height:400px; } }
.mobile-br{ display:none; }
@media (max-width:640px){
  .mobile-br{ display:inline; }
  .cta-actions{ flex-direction:column; align-items:center; text-align:center; }
  .mobile-menu .btn{ text-align:center; }
}
.cal-list-wrap{ display:flex; flex-direction:column; }
.cal-agenda-title{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:.5rem; display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.cal-count{ font-size:.75rem; color:var(--muted); font-family:var(--font-sans); }
.cal-list-scroll{ position:relative; }
.cal-list{ display:flex; flex-direction:column; gap:.5rem; overflow-y:auto; scroll-behavior:smooth; padding-right:.2rem; scrollbar-width:none; }
.cal-list::-webkit-scrollbar{ display:none; }
.cal-list-arrows{ position:absolute; right:-.3rem; bottom:.4rem; display:flex; flex-direction:column; gap:.4rem; }
.cal-list-arrows.is-hidden{ display:none; }
.cal-list-arrow{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); background:var(--ink-2);
  color:var(--cream); font-size:.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6); transition:.15s;
}
.cal-list-arrow:hover{ border-color:var(--cream); background:var(--ink-3); }
.cal-list-arrow:disabled{ opacity:.3; cursor:default; }
.cal-list-arrow:disabled:hover{ border-color:var(--line-2); background:var(--ink-2); }
.ev-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.2rem; }
.ev-status{ font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; padding:.16rem .5rem; border-radius:999px; font-weight:700; flex:none; }
.st-conf{ background:color-mix(in srgb, var(--green) 22%, transparent); color:var(--green); }
.st-pend{ background:color-mix(in srgb, var(--amber) 22%, transparent); color:var(--amber); }
.ev-loc{ display:inline-flex; align-items:center; gap:.3rem; }

/* MODAL — select, file, filas */
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.field select{
  width:100%; background-color:var(--ink-2); border:1px solid var(--line); border-radius:12px;
  padding:.8rem 2.4rem .8rem 1rem; color:var(--cream); font-family:var(--font-sans); font-size:.98rem; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8D98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.field select:focus{ outline:none; border-color:var(--teal); }
.field select::-ms-expand{ display:none; }
.file-label{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1rem; border:1px dashed var(--line-2); border-radius:12px; color:var(--soft); font-size:.9rem; cursor:pointer; transition:.2s; text-align:center; }
.file-label:hover{ border-color:var(--cream); color:var(--cream); }
.file-in input[type=file]{ position:absolute; opacity:0; width:0; height:0; }
.file-name{ font-size:.8rem; color:var(--muted); margin-top:.4rem; text-align:center; word-break:break-word; }
@media (max-width:460px){ .row2{ grid-template-columns:1fr; } }

/* Select y date-picker personalizados (redondeados, estética Tribu) */
.cselect, .cdate{ position:relative; display:block; }
.cselect.cselect-disabled .cselect-btn{ opacity:.5; cursor:not-allowed; }
.cselect > select{ display:none; }
.cselect-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; color:var(--cream); font-family:var(--font-sans); font-size:.98rem; cursor:pointer; text-align:left; transition:.2s; }
.cselect-btn:hover{ border-color:var(--line-2); }
.cselect.open > .cselect-btn, .cdate.open > .cselect-btn{ border-color:var(--teal); background:var(--ink-3); }
.cselect-val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cselect-val.is-ph{ color:var(--muted); }
.cselect-chev{ flex:none; color:var(--muted); transition:transform .2s; }
.cselect.open .cselect-chev{ transform:rotate(180deg); }
.cselect-list{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:12; background:var(--ink-2); border:1px solid var(--line-2); border-radius:16px; padding:.4rem; box-shadow:0 20px 50px -16px rgba(0,0,0,.65); display:none; max-height:260px; overflow-y:auto; }
.cselect.open .cselect-list{ display:block; animation:cpop-in .18s ease; }
@keyframes cpop-in{ from{ opacity:0; transform:translateY(-5px);} to{ opacity:1; transform:none;} }
.cselect-list button{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--soft); font-family:var(--font-sans); font-size:.92rem; padding:.6rem .8rem; border-radius:10px; cursor:pointer; transition:.15s; }
.cselect-list button:hover, .cselect-list button.sel{ background:var(--ink-3); color:var(--cream); }
.cdate-pop{ position:absolute; right:0; left:auto; top:calc(100% + 6px); z-index:12; width:min(270px,80vw); background:var(--ink-2); border:1px solid var(--line-2); border-radius:18px; padding:.9rem; box-shadow:0 20px 50px -16px rgba(0,0,0,.65); display:none; }
.cdate.open .cdate-pop{ display:block; animation:cpop-in .18s ease; }
.cdate-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.cdate-nav .cal-arrow{ width:32px; height:32px; font-size:1rem; }
.cdate-month{ font-family:var(--font-display); font-size:.98rem; text-transform:capitalize; }
.cdate-nav--split{ flex-direction:column; align-items:stretch; gap:.5rem; }
.cdate-nav-row{ display:flex; align-items:center; gap:.5rem; }
.cdate-month-sel, .cdate-year-sel{
  flex:1; min-width:0; background-color:var(--ink-3); border:1px solid var(--line-2); border-radius:10px;
  color:var(--cream); font-family:var(--font-sans); font-size:.85rem; padding:.4rem .3rem; cursor:pointer;
  text-align:center; text-align-last:center; appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.cdate-month-sel:focus, .cdate-year-sel:focus{ outline:none; border-color:var(--teal); }
.cdate-month-sel::-ms-expand, .cdate-year-sel::-ms-expand{ display:none; }
#birthDateSel .cdate-pop{ width:min(300px,88vw); }
.cdate-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.cdate-week span{ text-align:center; font-size:.66rem; color:var(--muted); text-transform:uppercase; }
.cdate-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cdate-days button{ aspect-ratio:1; border:1px solid transparent; background:none; color:var(--soft); font-family:var(--font-sans); font-size:.84rem; border-radius:9px; cursor:pointer; transition:.15s; padding:0; }
.cdate-days button:hover{ background:var(--ink-3); color:var(--cream); }
.cdate-days button.today{ border-color:var(--line-2); color:var(--cream); }
.cdate-days button.sel{ background:var(--cream); color:var(--ink); font-weight:600; }
.cdate-days button.disabled{ color:var(--muted); opacity:.3; cursor:default; pointer-events:none; }
.cdate-days .empty{ visibility:hidden; }
.cdate-actions{ display:flex; justify-content:space-between; margin-top:.6rem; }
.cdate-actions button{ background:none; border:0; color:var(--teal); font-size:.82rem; font-family:var(--font-sans); cursor:pointer; padding:.2rem; }
.geo-field{ position:relative; }
.geo-suggest{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; background:var(--ink-2); border:1px solid var(--line-2); border-radius:12px; overflow:hidden; display:none; max-height:220px; overflow-y:auto; }
.geo-suggest.open{ display:block; }
.geo-suggest button{ display:block; width:100%; text-align:left; padding:.7rem .9rem; background:none; border:0; border-bottom:1px solid var(--line); color:var(--soft); font-size:.86rem; font-family:var(--font-sans); cursor:pointer; line-height:1.4; }
.geo-suggest button:last-child{ border-bottom:0; }
.geo-suggest button:hover{ background:var(--ink-3); color:var(--cream); }
.geo-suggest .geo-loading{ padding:.7rem .9rem; font-size:.82rem; color:var(--muted); }
.geo-preview{ width:100%; height:0; border-radius:14px; overflow:hidden; margin-top:0; opacity:0; transition:height .25s ease, opacity .25s ease, margin-top .25s ease; border:1px solid var(--line); }
.geo-preview.on{ height:180px; margin-top:.8rem; opacity:1; }

/* ============ MODAL SUMARSE ============ */
.modal-overlay{ position:fixed; inset:0; z-index:100; background:rgba(6,7,10,.74); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{ width:min(560px,100%); max-height:92vh; overflow-y:auto; background:var(--ink-1); border:1px solid var(--line-2); border-radius:24px; padding:clamp(1.6rem,4vw,2.6rem); position:relative; transform:translateY(16px) scale(.98); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.modal-overlay.open .modal{ transform:none; }
.modal-close{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--ink-2); color:var(--soft); font-size:1rem; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.modal-close:hover{ color:var(--cream); border-color:var(--cream); }
.modal h2{ font-size:clamp(1.5rem,3.5vw,2rem); margin-bottom:.35rem; }
.modal .modal-sub{ color:var(--soft); font-size:.95rem; margin-bottom:1.5rem; line-height:1.5; }
/* ===================== MODAL "SUMÁ TU PROPUESTA" (dos caminos) =====================
   Primer paso de "Sumá tu propuesta": en vez de tirar un formulario de una,
   muestra los dos perfiles (CREÁS / IMPULSÁS) y cada uno lleva a su landing.
   El markup lo arma site.js, así vive una sola vez para todo el sitio. */
.modal--caminos{ width:min(880px,100%); }
.caminos-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.camino-card{
  --c:var(--red);
  display:flex; flex-direction:column; text-align:left; text-decoration:none;
  padding:1.5rem 1.45rem 1.35rem; border-radius:20px;
  background:linear-gradient(165deg, color-mix(in srgb, var(--c) 16%, var(--ink-2)), var(--ink-2) 72%);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.camino-card:hover, .camino-card:focus-visible{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--c) 80%, transparent);
  box-shadow:0 20px 44px -22px var(--c);
}
.camino-ic{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center; flex:none;
  margin-bottom:1rem; color:#15110f;
  background:linear-gradient(140deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c));
}
.camino-card h3{
  font-family:var(--font-accent); font-weight:400; letter-spacing:.01em;
  font-size:1.5rem; color:var(--c); margin-bottom:.3rem;
}
.camino-card .camino-que{ font-size:.9rem; font-weight:600; color:var(--cream); margin-bottom:.5rem; line-height:1.35; }
.camino-card p{ font-size:.86rem; color:var(--soft); line-height:1.5; }
/* margin-top:auto empuja el CTA al pie de la tarjeta: los dos textos no miden
   lo mismo y, si no, cada flecha queda a distinta altura. */
.camino-cta{
  display:block; margin-top:auto; padding-top:1.15rem;
  font-size:.86rem; font-weight:600; color:var(--c); line-height:1.4;
}
/* La flecha va en el flujo del texto, no como hermana flex: si no, cuando el
   CTA se parte en dos líneas (pasa en mobile) queda flotando al costado. */
.camino-cta .arr{ display:inline-block; margin-left:.3rem; transition:transform .22s ease; }
.camino-card:hover .camino-cta .arr{ transform:translateX(4px); }
@media (max-width:720px){
  .caminos-grid{ grid-template-columns:1fr; }
  .camino-card{ padding:1.25rem 1.2rem 1.1rem; }
}

.field{ margin-bottom:1.05rem; }
.field > label{ display:block; font-size:.76rem; letter-spacing:.06em; color:var(--muted); margin-bottom:.5rem; text-transform:uppercase; }
.field input, .field textarea{ width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; color:var(--cream); font-family:var(--font-sans); font-size:.98rem; transition:.2s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--teal); background:var(--ink-3); }
/* Toggle de "mostrar/ocultar contraseña" (ícono de ojo) */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:2.7rem !important; }
.pw-toggle{ position:absolute; top:50%; right:.4rem; transform:translateY(-50%); width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; color:var(--muted); cursor:pointer; border-radius:8px; }
.pw-toggle:hover{ color:var(--cream); }
.pw-toggle svg{ width:19px; height:19px; }
.pw-toggle .eye-off{ display:none; }
.pw-toggle.is-visible .eye{ display:none; }
.pw-toggle.is-visible .eye-off{ display:block; }
.field textarea{ resize:vertical; min-height:76px; }
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{ display:inline-block; padding:.55rem 1rem; border:1px solid var(--line-2); border-radius:999px; font-size:.9rem; color:var(--soft); cursor:pointer; transition:.2s; user-select:none; }
.chip input:checked + span{ background:var(--cream); color:var(--ink); border-color:var(--cream); font-weight:600; }
.chip span:hover{ border-color:var(--cream); }
/* Mensaje de error de campo (ej: elegir una opción antes de enviar) */
.field-error{ display:none; margin-top:.55rem; font-size:.82rem; font-weight:500; color:var(--red); }
.field-error.show{ display:block; }
.chips.is-invalid .chip span{ border-color:color-mix(in srgb, var(--red) 60%, var(--line-2)); }
.modal .btn{ width:100%; justify-content:center; margin-top:.5rem; }
.modal-msg{ text-align:center; padding:1.5rem 0; color:var(--cream); font-size:1.05rem; line-height:1.5; display:none; }
#authModal h2, #authModal .modal-sub{ text-align:center; }
#authModal .field-error{ text-align:center; }
.modal-note{ font-size:.8rem; color:var(--muted); text-align:center; margin-top:1rem; line-height:1.5; }
@media (max-width:1300px){ .cal-grid-wrap{ grid-template-columns:1fr 1fr; } .cal-map-wrap{ grid-column:1 / -1; } }
@media (max-width:860px){ .cal-grid-wrap{ grid-template-columns:1fr; } .cal-map-wrap{ grid-column:auto; } .svc-grid{ grid-template-columns:1fr; } .svc-extra{ grid-template-columns:1fr; } }

/* ============================================================
   RESTRUCTURA MULTI-PÁGINA (Home hub + 3 landings)
   ============================================================ */

/* ===== Elegí tu camino — 3 tarjetas de camino (Home) ===== */
.paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:clamp(1.4rem,3vw,2.2rem); }
.path{
  position:relative; display:flex; flex-direction:column; gap:.85rem;
  padding:1.7rem 1.5rem 1.6rem; border-radius:var(--r);
  background:var(--ink-1); border:1px solid var(--line); overflow:hidden;
  text-decoration:none; color:var(--cream);
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.path::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c); }
.path:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--c) 45%, var(--line)); background:var(--ink-2); }
.path .path-ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-size:1.5rem; background:color-mix(in srgb,var(--c) 16%, transparent); border:1px solid color-mix(in srgb,var(--c) 30%, transparent); }
.path .path-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--c); }
.path h3{ font-size:1.3rem; }
.path p{ font-size:.92rem; color:var(--soft); line-height:1.5; }
.path ul{ list-style:none; display:flex; flex-direction:column; gap:.4rem; margin:.15rem 0 .35rem; }
.path ul li{ font-size:.86rem; color:var(--soft); padding-left:1.1rem; position:relative; }
.path ul li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--c); }
.path .path-go{ margin-top:auto; font-weight:600; font-size:.95rem; color:var(--c); display:inline-flex; align-items:center; gap:.4em; transition:gap .2s ease; }
.path:hover .path-go{ gap:.75em; }
.path.is-red{ --c:var(--red); }
.path.is-green{ --c:var(--green); }
.path.is-teal{ --c:var(--teal); }
.path.is-amber{ --c:var(--amber); }
@media (max-width:860px){ .paths{ grid-template-columns:1fr; } }
/* Siempre las 4 en una sola fila (se achican en vez de wrappear); minmax(0,1fr) evita que el contenido desborde el ancho de pantalla */
.paths.paths--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ===== Theming por landing (un acento en vez del espectro) ===== */
body[data-accent="red"]{ --spectrum:linear-gradient(100deg,#E0576E,#D24B62 55%,#b83b50); --btn-grad:linear-gradient(100deg,#F07A8B 0%,#D24B62 50%,#A83249 100%); --btn-fg:#fff; accent-color:var(--red); }
body[data-accent="green"]{ --spectrum:linear-gradient(100deg,#AEDB5C,#9BCB46 55%,#7fae2f); --btn-grad:linear-gradient(100deg,#C2E67A 0%,#9BCB46 50%,#6E9C2A 100%); --btn-fg:#15110f; accent-color:var(--green); }
body[data-accent="teal"]{ --spectrum:linear-gradient(100deg,#4CC7D3,#36B7C4 55%,#2795a1); --btn-grad:linear-gradient(100deg,#6FD7E1 0%,#36B7C4 50%,#1F7F8A 100%); --btn-fg:#fff; accent-color:var(--teal); }
body[data-accent="amber"]{ --spectrum:linear-gradient(100deg,#F7BB55,#F4A623 55%,#c9820f); --btn-grad:linear-gradient(100deg,#FBCB6E 0%,#F4A623 50%,#C9820F 100%); --btn-fg:#15110f; accent-color:var(--amber); }
body[data-accent] .eyebrow::before{ background:var(--spectrum); }

/* ===== Desafíos (fila de íconos) ===== */
.challenges{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:1.6rem; }
.challenge{ text-align:center; padding:1.2rem .8rem; border-radius:14px; background:var(--ink-1); border:1px solid var(--line); transition:transform .3s,border-color .3s; }
.challenge:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.challenge .ch-ic{ width:44px; height:44px; margin:0 auto .8rem; border-radius:50%; display:grid; place-items:center; color:var(--c,var(--teal)); background:color-mix(in srgb,var(--c,var(--teal)) 14%, transparent); border:1px solid color-mix(in srgb,var(--c,var(--teal)) 30%, transparent); }
.challenge.is-red{ --c:var(--red); } .challenge.is-amber{ --c:var(--amber); } .challenge.is-green{ --c:var(--green); }
.challenge b{ display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:.35rem; }
.challenge p{ font-size:.82rem; color:var(--soft); line-height:1.4; }
@media (max-width:860px){ .challenges{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:520px){ .challenges{ grid-template-columns:1fr 1fr; } }
/* Variante para grupos de exactamente 3 (ej. "El camino": Visibilidad/Conexión/Comunidad) */
.challenges.challenges--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:640px){ .challenges.challenges--3{ grid-template-columns:1fr; } }

/* ===== Casos reales ===== */
.cases{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.5rem; }
.case{ background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem; transition:transform .3s,border-color .3s; }
.case:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.case .tag{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-c,var(--teal)); background:color-mix(in srgb,var(--accent-c,var(--teal)) 14%,transparent); padding:.3em .7em; border-radius:999px; display:inline-block; margin-bottom:.85rem; }
.case h4{ font-family:var(--font-display); font-weight:560; font-size:1.08rem; margin-bottom:.5rem; letter-spacing:-.01em; line-height:1.15; }
.case p{ font-size:.85rem; color:var(--soft); line-height:1.5; }
@media (max-width:860px){ .cases{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cases{ grid-template-columns:1fr; } }

/* ===== Historias reales (carátula → click abre el reel en Instagram) ===== */
.stories{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.6rem; }
.story{
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); text-decoration:none; color:var(--cream);
  transition:border-color .3s ease;
}
.story:hover{ border-color:color-mix(in srgb,var(--c,var(--teal)) 45%, var(--line)); }
.story-cover{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  width:100%; aspect-ratio:9/16; color:var(--cream);
  background-size:cover; background-position:center; background-color:var(--ink-2);
  transition:transform .3s ease;
}
.story:hover .story-cover{ transform:translateY(-5px); }
.story-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(12,13,16,.9) 100%); pointer-events:none; }
.story-tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cream);
  background:rgba(12,13,16,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:.35em .8em; border-radius:999px;
}
.story-play{
  position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:2;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(244,241,234,.92); color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.story-play svg{ margin-left:3px; }
.story-body{ position:relative; z-index:2; padding:1rem 1.1rem 1.2rem; text-align:left; }
.story-body h4{ font-family:var(--font-display); font-weight:600; font-size:1rem; margin-bottom:.4rem; line-height:1.25; }
.story-body p{ font-size:.82rem; color:var(--soft); line-height:1.45; margin-bottom:.75rem; }
.story-link{ position:relative; font-size:.85rem; font-weight:600; color:var(--c,var(--teal)); display:inline-flex; align-items:center; gap:.4em; }
.story-link .arr{ transition:transform .25s ease; }
.story:hover .story-link .arr{ transform:translateX(3px); }
@media (max-width:860px){ .stories{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stories{ grid-template-columns:1fr; } }

/* Variante scrolleable: en vez de wrappear, las cards corren en una fila horizontal (para sumar más de 4 sin romper el layout) */
.stories--scroll{
  display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x proximity;
  gap:1rem; padding-bottom:.6rem; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.stories--scroll .story{ flex:0 0 clamp(200px,22vw,260px); scroll-snap-align:start; }
.stories--scroll::-webkit-scrollbar{ height:6px; }
.stories--scroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
@media (max-width:520px){ .stories--scroll .story{ flex-basis:74vw; } }

/* ===== FAQ acordeón ===== */
.faq{ display:flex; flex-direction:column; gap:.6rem; max-width:840px; margin-top:1.4rem; }
.faq details{ border:1px solid var(--line); border-radius:14px; background:var(--ink-1); overflow:hidden; }
.faq details[open]{ border-color:var(--line-2); }
.faq summary{ list-style:none; cursor:pointer; padding:1rem 1.2rem; font-weight:600; color:var(--cream); display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.98rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; color:var(--muted); font-weight:400; font-size:1.2rem; transition:transform .25s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq-a{ padding:0 1.2rem 1.1rem; color:var(--soft); font-size:.92rem; line-height:1.55; }

/* ===== Quienes confían en nosotros (círculo de logos, Nosotros) ===== */
.trust-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; padding-top:.4rem; }
.trust-label{ font-family:var(--font-hand); font-size:1.2rem; font-weight:600; color:var(--muted); text-align:center; }
.trust-circle{ --d:clamp(270px,29vw,410px); --chip:clamp(56px,6.8vw,76px); position:relative; width:var(--d); height:var(--d); }
.trust-circle-center{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.trust-circle-center img{ width:20%; opacity:.35; }
.trust-ring{ position:absolute; inset:0; animation:trust-spin 90s linear infinite; }
.trust-chip{
  position:absolute; top:50%; left:50%; width:var(--chip); height:var(--chip);
  margin-top:calc(var(--chip) / -2); margin-left:calc(var(--chip) / -2);
  /* posición fija en el círculo: no depende de animación, así que queda bien con animaciones apagadas */
  transform:rotate(calc(var(--i) * 36deg)) translateY(calc((var(--d) - var(--chip)) / -2));
}
.trust-chip-counter{
  width:100%; height:100%;
  /* contrarresta el rotate() de .trust-chip (estático, no animado) para que el logo arranque derecho */
  transform:rotate(calc(var(--i) * -36deg));
}
.trust-chip-inner{
  width:100%; height:100%; border-radius:50%; background:var(--ink-1); border:1px solid var(--line);
  display:grid; place-items:center; padding:12%;
  /* overflow:hidden recorta al círculo cualquier cosa que se quiera pasar del borde
     (seguro extra: con el texto bien dimensionado no llega a recortar nada) */
  overflow:hidden;
  /* contrarresta el giro animado del anillo; si prefers-reduced-motion la apaga, no pasa nada:
     ya queda derecho por .trust-chip-counter, solo deja de orbitar */
  animation:trust-spin-rev 90s linear infinite;
  transition:border-color .3s ease;
}
.trust-chip:hover .trust-chip-inner{ border-color:var(--line-2); }
.trust-circle:hover .trust-ring, .trust-circle:hover .trust-chip-inner{ animation-play-state:paused; }
.trust-chip img{ max-width:100%; max-height:100%; object-fit:contain; }
/* el texto se achica con la pantalla para que la palabra más larga ("Conciencia",
   "Comunidad") entre dentro del chip y no se salga del círculo en mobile */
.trust-chip-text{ max-width:100%; font-family:var(--font-display); font-weight:700; font-size:clamp(.47rem, 1.7vw, .62rem); letter-spacing:-.02em; text-align:center; line-height:1.12; color:var(--soft); }
@keyframes trust-spin{ to{ transform:rotate(360deg); } }
@keyframes trust-spin-rev{ to{ transform:rotate(-360deg); } }
@media (max-width:640px){ .trust-circle{ --d:min(86vw,312px); --chip:64px; } }

/* ===== Volver a la Home (breadcrumb landing) ===== */
.backhome{ display:inline-flex; align-items:center; gap:.5em; color:var(--muted); font-size:.85rem; font-weight:500; text-decoration:none; transition:color .2s; }
.backhome:hover{ color:var(--cream); }

/* ===== Agenda: al saltar desde el nav, dejar aire arriba y abajo ===== */
/* 74px + los 52px de padding dejan el eyebrow a ~126px del tope, igual que
   #historias, y asi entra mas calendario en pantalla al saltar desde el nav. */
#calendario{ scroll-margin-top:74px; padding-top:clamp(28px,3.5vw,52px); padding-bottom:clamp(48px,6vw,90px); }

/* ===== Fixes de alineación: svc / case grids con títulos de distinta altura ===== */
.svc{ display:flex; flex-direction:column; }
.svc h3{ align-items:flex-start; min-height:2.5rem; }
.case{ display:flex; flex-direction:column; }
.case h4{ min-height:2.5rem; display:flex; align-items:flex-start; }

/* ===== Headings de una sola línea (cuando el diseño lo pide explícito) ===== */
.h2--1line{ white-space:nowrap; max-width:none; }
@media (max-width:760px){ .h2--1line{ white-space:normal; } }

/* ===== Botones largos en mobile: permitir wrap para que no se corten ===== */
@media (max-width:480px){ .btn{ white-space:normal; text-align:center; } }

/* ===== Cards de caso clickeables ("Ver historia" — sección Marcas) ===== */
.case--link{ text-decoration:none; color:inherit; }
.case--link p{ margin-bottom:0; }
.case-go{ margin-top:auto; padding-top:1rem; font-size:.86rem; font-weight:600; color:var(--accent-c,var(--teal)); display:inline-flex; align-items:center; gap:.4em; }
.case-go .arr{ transition:transform .25s ease; }
.case--link:hover .case-go .arr{ transform:translateX(3px); }

/* ===== Cards de servicio con bajada + CTA propio (sección Marcas) ===== */
.svc-lead{ font-size:.9rem; color:var(--soft); line-height:1.5; margin-bottom:1rem; }
.svc-cta{ margin-top:auto; padding-top:1.1rem; font-size:.86rem; font-weight:600; text-decoration:none; color:var(--c,var(--teal)); display:inline-flex; align-items:center; gap:.4em; }
.svc-cta .arr{ transition:transform .25s ease; }
.svc-cta:hover .arr{ transform:translateX(3px); }

/* ===== Saltos de línea manuales solo en desktop (en mobile molestan) ===== */
br.br-desk{ display:none; }
@media (min-width:760px){ br.br-desk{ display:inline; } }

/* ===== Desafíos: títulos de distinta cantidad de líneas → alinear los párrafos ===== */
.challenges--eq .challenge b{ line-height:1.25; min-height:2.5em; }
@media (max-width:640px){ .challenges--eq .challenge b{ min-height:0; } }

/* ===== CTA de cada card de servicio: siempre en un renglón y a la misma altura ===== */
.svc-grid--4 .svc-cta{ white-space:nowrap; font-size:clamp(.72rem,.95vw,.78rem); letter-spacing:-.01em; }
@media (min-width:861px) and (max-width:1180px){ .svc-grid--4 .svc{ padding:1.2rem 1rem; } }

/* ============================================================
   FLOTANTES — WhatsApp + asistente "Tri"
   Markup y lógica en assets/tribu-chat.js (se auto-inyecta).
   ============================================================ */

/* ── Botón de WhatsApp (abajo) ── */
.tc-wa{
  position:fixed; right:28px; bottom:28px; z-index:998;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  background:linear-gradient(135deg,#25d366,#128c7e);
  box-shadow:0 10px 30px -6px rgba(37,211,102,.55);
  transition:transform .25s ease, box-shadow .25s ease, bottom .35s ease;
  animation:tc-pop .5s cubic-bezier(.2,1.5,.5,1) 1.4s both;
}
.tc-wa:hover{ transform:scale(1.09) translateY(-2px); box-shadow:0 16px 38px -8px rgba(37,211,102,.75); }
.tc-wa svg{ width:28px; height:28px; fill:#fff; }

/* ── Asistente: dock + burbuja (arriba del de WhatsApp) ── */
.tc-dock{
  position:fixed; right:28px; bottom:96px; z-index:999;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  transition:bottom .35s ease;
}
.tc-fab{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--line-2); cursor:pointer;
  position:relative; display:grid; place-items:center; padding:0;
  background:radial-gradient(120% 120% at 30% 20%, var(--ink-3), var(--ink) 70%);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation:tc-pop .5s cubic-bezier(.2,1.5,.5,1) 1.7s both;
}
/* Apagado en reposo, encendido al pasar por encima */
.tc-fab img{ width:32px; height:32px; object-fit:contain; opacity:.62; transition:opacity .25s ease, transform .25s ease; }
.tc-fab:hover{ transform:scale(1.09); border-color:transparent; box-shadow:0 0 0 2px rgba(54,183,196,.35), 0 14px 38px -8px rgba(54,183,196,.55); }
.tc-fab:hover img, .tc-fab.is-open img, .tc-fab.tc-pendiente img{ opacity:1; }
.tc-fab.is-open{ transform:scale(.94); }
.tc-fab::after{
  content:""; position:absolute; inset:-1px; border-radius:50%; padding:1px;
  background:var(--spectrum); opacity:0; transition:opacity .25s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
.tc-fab:hover::after, .tc-fab.is-open::after{ opacity:1; }
/* Charla minimizada: el circulo queda encendido para invitar a retomarla */
.tc-fab.tc-pendiente::after{ opacity:.55; }
.tc-dot{
  position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:var(--green); border:2px solid var(--ink);
}

/* ── Panel ── */
.tc-panel{
  width:320px; max-height:min(620px, 78vh, calc(100vh - 260px - var(--tc-lift,0px))); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--ink-1); border:1px solid var(--line);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85);
  /* Atenuado mientras no lo usas; se enciende al pasar por encima o al escribir */
  opacity:.72; transition:opacity .25s ease, box-shadow .25s ease;
  animation:tc-panel-in .22s cubic-bezier(.4,0,.2,1);
}
.tc-panel:hover, .tc-panel:focus-within{ opacity:1; box-shadow:0 26px 60px -18px rgba(0,0,0,.9), 0 0 0 1px var(--line-2); }
.tc-panel[hidden]{ display:none; }
/* Degradado al pie: avisa que la respuesta sigue mas abajo */
.tc-panel{ position:relative; }
.tc-panel .tc-msgs{ position:relative; }
.tc-panel.tc-more .tc-msgs::after{
  content:""; position:sticky; bottom:-12px; left:0; display:block; height:26px; margin-top:-26px;
  background:linear-gradient(to bottom, transparent, var(--ink-1)); pointer-events:none;
}
@keyframes tc-panel-in{ from{ opacity:0; transform:scale(.96) translateY(10px); } to{ opacity:.72; transform:none; } }
@keyframes tc-pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }

.tc-head{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; background:var(--ink-2); border-bottom:1px solid var(--line);
}
.tc-head::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--spectrum); }
.tc-head-info{ display:flex; align-items:center; gap:10px; min-width:0; }
.tc-avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--ink-3); border:1px solid var(--line-2);
}
.tc-avatar img{ width:22px; height:22px; object-fit:contain; }
.tc-head-txt{ display:flex; flex-direction:column; min-width:0; }
.tc-name{ font-size:.82rem; font-weight:600; color:var(--cream); line-height:1.3; }
.tc-status{ font-size:.7rem; color:var(--muted); display:flex; align-items:center; gap:5px; }
.tc-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.tc-close{
  flex:none; width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  background:none; color:var(--muted); font-size:.9rem; display:grid; place-items:center; transition:.15s;
}
.tc-close:hover{ background:var(--ink-3); color:var(--cream); }

.tc-msgs{
  flex:1; min-height:170px; overflow-y:auto; scroll-behavior:smooth;
  padding:12px; display:flex; flex-direction:column; gap:8px;
}
.tc-msgs::-webkit-scrollbar{ width:4px; }
.tc-msgs::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:4px; }
.tc-msg{
  max-width:92%; border-radius:13px; padding:9px 11px;
  font-size:.78rem; line-height:1.55; animation:tc-msg-in .2s ease-out both;
}
@keyframes tc-msg-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.tc-msg.bot{ background:var(--ink-2); border:1px solid var(--line); color:var(--soft); align-self:flex-start; border-bottom-left-radius:4px; }
.tc-msg.user{ background:var(--spectrum); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; font-weight:500; }
.tc-msg p{ margin:0 0 .45rem; }
.tc-msg p:last-child{ margin-bottom:0; }
.tc-msg strong{ color:var(--cream); font-weight:600; }
.tc-msg.user strong{ color:#fff; }
.tc-msg em{ color:var(--teal); font-style:italic; }
.tc-msg.user em{ color:rgba(255,255,255,.9); }
.tc-msg ul{ list-style:none; display:flex; flex-direction:column; gap:.3rem; margin:.45rem 0; }
.tc-msg ul li{ position:relative; padding-left:.95rem; }
.tc-msg ul li::before{ content:"✦"; position:absolute; left:0; top:0; font-size:.6rem; line-height:1.9; color:var(--amber); }
.tc-cta{
  display:inline-block; margin-top:.6rem; padding:.42rem .85rem; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.74rem; font-weight:600; color:var(--ink);
  background:var(--spectrum); border:none; transition:transform .15s ease, filter .15s ease;
}
.tc-cta:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.tc-cta--ghost{ background:none; color:var(--teal); border:1px solid var(--line-2); font-weight:500; }
.tc-cta--ghost:hover{ border-color:var(--teal); filter:none; }
.tc-hint{ margin-top:.5rem; font-family:var(--font-hand); font-size:.95rem; color:var(--amber); }
.tc-typing{ display:inline-flex; gap:4px; align-items:center; padding:2px 0; }
.tc-typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:tc-blink 1.2s infinite; }
.tc-typing i:nth-child(2){ animation-delay:.2s; }
.tc-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes tc-blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

.tc-chips{ display:flex; flex-wrap:wrap; gap:5px; padding:0 12px 8px; }
.tc-chip{
  font-family:inherit; font-size:.7rem; padding:.3rem .65rem; border-radius:999px; cursor:pointer;
  background:var(--ink-2); border:1px solid var(--line); color:var(--soft); transition:.15s; white-space:nowrap;
}
.tc-chip:hover{ border-color:var(--teal); color:var(--cream); }
.tc-bar{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid var(--line); }
.tc-input{
  flex:1; min-width:0; font-family:inherit; font-size:.78rem; color:var(--cream);
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; outline:none; transition:.15s;
}
.tc-input::placeholder{ color:var(--muted); }
.tc-input:focus{ border-color:var(--teal); }
.tc-send{
  flex:none; width:34px; height:34px; border-radius:10px; border:none; cursor:pointer;
  background:var(--spectrum); color:var(--ink); font-size:1rem; font-weight:700; display:grid; place-items:center;
  transition:transform .15s ease, filter .15s ease;
}
.tc-send:hover{ transform:scale(1.06); filter:brightness(1.08); }
.tc-foot{ padding:0 10px 10px; display:flex; justify-content:center; }
.tc-human{
  font-family:inherit; font-size:.72rem; color:var(--muted); cursor:pointer;
  background:none; border:1px dashed var(--line-2); border-radius:9px; padding:.4rem .8rem; transition:.15s;
}
.tc-human:hover{ color:var(--cream); border-color:var(--teal); }

/* La barra de cookies vive abajo de todo: mientras este, los flotantes suben */
body.tc-lift .tc-wa{ bottom:calc(28px + var(--tc-lift,118px)); }
body.tc-lift .tc-dock{ bottom:calc(96px + var(--tc-lift,118px)); }

@media (max-width:760px){
  .tc-wa{ right:16px; bottom:18px; width:50px; height:50px; }
  .tc-wa svg{ width:24px; height:24px; }
  .tc-dock{ right:16px; bottom:78px; left:16px; align-items:flex-end; }
  .tc-fab{ width:50px; height:50px; }
  .tc-fab img{ width:28px; height:28px; }
  .tc-panel{ width:100%; max-height:min(70vh, 420px, calc(100vh - 215px - var(--tc-lift,0px))); }
  body.tc-lift .tc-wa{ bottom:calc(18px + var(--tc-lift,180px)); }
  body.tc-lift .tc-dock{ bottom:calc(78px + var(--tc-lift,180px)); }
}
@media (prefers-reduced-motion:reduce){
  .tc-wa, .tc-fab, .tc-panel, .tc-msg{ animation:none; }
}

/* ============================================================
   REGISTRO "SUMATE" (paso 1 de 3) — modal inyectado por
   supabase-client.js en todas las páginas, + pastilla de usuario
   logueado en el header.
   ============================================================ */
#legalModal{ z-index:120; }
.su-overlay .modal{ width:min(920px,100%); max-width:none; padding:0; overflow:hidden auto; background:linear-gradient(160deg,#14161d,#0e1015 70%); border-color:rgba(244,166,35,.28); }
.su-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:1.6rem; padding:2.2rem 2.2rem 1.8rem; }
@media (max-width:820px){ .su-grid{ grid-template-columns:1fr; padding:1.8rem 1.3rem 1.4rem; } .su-side{ display:none; } }
.su-steps{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.su-steps b{ color:#F47A2A; font-weight:600; font-size:.9rem; font-family:var(--font-sans); }
.su-dots{ display:flex; align-items:center; }
.su-dots i{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-2); display:block; }
.su-dots i.on{ border-color:#F47A2A; background:radial-gradient(circle,#F47A2A 0 45%,transparent 50%); box-shadow:0 0 10px rgba(244,122,42,.6); }
.su-dots s{ width:42px; height:1.5px; background:var(--line-2); display:block; }
.su-dots s.on{ background:#F47A2A; }
.su-title{ font-family:var(--font-sans); font-weight:700; font-size:clamp(1.6rem,3.2vw,2.15rem); line-height:1.1; margin-bottom:.5rem; }
.su-sub{ color:var(--soft); font-size:.92rem; line-height:1.5; margin-bottom:1.3rem; }
.su-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:480px){ .su-row{ grid-template-columns:1fr; } }
.su-in{ position:relative; margin-bottom:.7rem; }
.su-in > svg{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none; }
.su-in input{ width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:12px; padding:.8rem 1rem .8rem 2.6rem; color:var(--cream); font-family:var(--font-sans); font-size:.92rem; transition:.2s; }
.su-in input:focus{ outline:none; border-color:#F47A2A; background:rgba(255,255,255,.05); }
.su-in.pw-wrap input{ padding-right:2.8rem !important; }
.su-check{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--soft); margin:.4rem 0 1.1rem; cursor:pointer; }
.su-check input{ width:17px; height:17px; accent-color:#F47A2A; flex:none; }
.su-check a{ color:#F47A2A; text-decoration:none; }
.su-check a:hover{ text-decoration:underline; }
.su-btn{ width:100%; justify-content:center; position:relative; font-size:.98rem; padding:.95em 1.5em; }
.su-btn .arr{ position:absolute; right:1.3rem; }
.su-alt{ width:100%; justify-content:center; margin-top:.7rem; }
.su-or{ display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.82rem; margin:1.1rem 0 .8rem; }
.su-or::before, .su-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.su-google{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin:0 auto; width:min(100%,320px); background:transparent; border:1px solid var(--line-2); color:var(--cream); border-radius:999px; padding:.75rem 1.2rem; font-family:var(--font-sans); font-size:.92rem; cursor:pointer; }
.su-google:hover{ border-color:var(--cream); }
.su-note{ display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--muted); font-size:.78rem; margin-top:1.1rem; text-align:center; }
.su-err{ color:var(--red); font-size:.84rem; margin:-.3rem 0 .8rem; display:none; }
.su-side{ position:relative; align-self:stretch; margin-top:2.8rem; }
.su-curve{ position:absolute; top:-20px; left:-24px; width:96%; height:130px; pointer-events:none; overflow:visible; filter:drop-shadow(0 0 6px rgba(244,122,42,.75)); }
.su-card{ position:relative; height:100%; border:1px solid rgba(244,122,42,.45); border-radius:24px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(244,122,42,.05)); padding:1.6rem 1.4rem; box-shadow:0 0 40px -18px rgba(244,122,42,.5) inset; }
.su-avatar{ position:relative; width:118px; height:118px; margin:0 auto 1.4rem; border-radius:50%; padding:2px; background:conic-gradient(from 200deg,#E0336E,#B03AE0,#E0336E 60%,#F47A2A); }
.su-avatar > div{ width:100%; height:100%; border-radius:50%; background:#121318; display:flex; align-items:center; justify-content:center; color:#E0336E; }
.su-avatar > div svg{ width:62px; height:62px; }
.su-avatar span{ position:absolute; right:-2px; bottom:4px; width:34px; height:34px; border-radius:50%; background:#1b1c22; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:#F4A623; }
.su-ben{ display:flex; align-items:center; gap:1rem; padding:1.05rem 0; border-top:1px solid var(--line); font-size:.9rem; line-height:1.4; color:var(--cream); }
.su-ben:first-of-type{ border-top:none; }
.su-ben svg{ width:30px; height:30px; flex:none; }
.su-done{ text-align:center; padding:2.4rem 1rem 1rem; }
.su-done .ic{ width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(244,122,42,.14); color:#F47A2A; }
.su-close{ position:absolute; top:1.1rem; right:1.1rem; z-index:3; }

/* Pastilla de usuario logueado (reemplaza Ingresar + Sumate) */
.nav-me{ position:relative; }
.nav-me-btn{ display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:999px; padding:.3rem .8rem .3rem .3rem; color:var(--cream); cursor:pointer; font-family:var(--font-sans); font-size:.88rem; font-weight:600; }
.nav-me-btn:hover{ border-color:var(--cream); }
.nav-me-av{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--btn-grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; font-weight:700; flex:none; overflow:hidden; }
.nav-me-av img{ width:100%; height:100%; object-fit:cover; }
.nav-me-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-me-btn svg{ color:var(--muted); transition:transform .15s; }
.nav-me.open .nav-me-btn svg{ transform:rotate(180deg); }
.nav-me-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:var(--ink-2); border:1px solid var(--line-2); border-radius:14px; padding:.4rem; box-shadow:0 20px 50px -16px rgba(0,0,0,.7); display:none; z-index:60; }
.nav-me.open .nav-me-menu{ display:block; }
.nav-me-menu a{ display:block; padding:.6rem .75rem; border-radius:9px; color:var(--soft); text-decoration:none; font-size:.88rem; }
.nav-me-menu a:hover{ background:var(--ink-3); color:var(--cream); }
.nav-me-menu hr{ border:0; border-top:1px solid var(--line); margin:.3rem 0; }
@media (max-width:1100px){ .nav-me-name{ display:none; } .nav-me-btn{ padding-right:.6rem; } }

/* ============ ONBOARDING (pasos 2 y 3) — misma estética que el registro ============ */
.onb-card{ position:relative; max-width:1100px; margin:0 auto; border:1px solid rgba(244,166,35,.28); border-radius:26px; background:linear-gradient(160deg,#14161d,#0e1015 70%); box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.onb-card .su-grid{ grid-template-columns:1.55fr 1fr; gap:2.2rem; padding:2.4rem 2.6rem 2.4rem; align-items:start; }
.onb-card .su-side{ align-self:start; }
.onb-card .su-card{ height:auto; }
@media (max-width:860px){ .onb-card .su-grid{ grid-template-columns:1fr; padding:1.8rem 1.3rem; } .onb-card .su-side{ display:block; margin-top:2rem; } }
.onb-opt{ position:relative; display:grid; grid-template-columns:22px 72px 1fr; gap:1rem; align-items:start; border:1px solid var(--line-2); border-radius:20px; padding:1.3rem 1.3rem 1.2rem; margin-bottom:1rem; cursor:pointer; background:rgba(255,255,255,.015); transition:border-color .15s, box-shadow .15s; }
@media (max-width:520px){ .onb-opt{ grid-template-columns:22px 1fr; } .onb-opt .onb-ic{ display:none; } }
.onb-opt:hover{ border-color:rgba(244,241,234,.35); }
.onb-opt.sel{ border:1.5px solid transparent; background:linear-gradient(#121318,#121318) padding-box, linear-gradient(120deg,#F47A2A,#E0336E 60%,#B03AE0) border-box; box-shadow:0 0 32px -12px rgba(224,51,110,.55); }
.onb-radio{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-2); margin-top:.15rem; display:flex; align-items:center; justify-content:center; }
.onb-opt.sel .onb-radio{ border-color:#F47A2A; }
.onb-opt.sel .onb-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:#F47A2A; box-shadow:0 0 8px #F47A2A; }
.onb-ic{ width:72px; height:72px; border-radius:50%; padding:1.5px; background:var(--g); }
.onb-ic > span{ width:100%; height:100%; border-radius:50%; background:#121318; display:flex; align-items:center; justify-content:center; color:var(--c); }
.onb-ic svg{ width:34px; height:34px; }
.onb-opt h3{ font-family:var(--font-sans); font-size:1.08rem; font-weight:600; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.onb-opt .onb-kicker{ color:#F47A2A; font-size:.86rem; font-weight:500; margin-top:.15rem; }
.onb-opt p{ color:var(--soft); font-size:.86rem; line-height:1.5; margin-top:.35rem; }
.onb-opt ul{ list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.5rem; }
.onb-opt li{ display:flex; align-items:center; gap:.55rem; color:var(--cream); font-size:.88rem; }
.onb-opt li svg{ width:18px; height:18px; flex:none; color:#F47A2A; }
.onb-badge{ font-size:.72rem; font-weight:500; color:var(--soft); border:1px solid var(--line-2); border-radius:999px; padding:.15rem .6rem; background:rgba(255,255,255,.03); }
.onb-check{ position:absolute; top:-10px; right:-10px; width:30px; height:30px; border-radius:50%; background:#F47A2A; color:#fff; display:none; align-items:center; justify-content:center; box-shadow:0 0 14px rgba(244,122,42,.7); }
.onb-opt.sel .onb-check{ display:flex; }
.onb-roles{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.onb-role{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line-2); border-radius:12px; padding:.5rem .8rem; background:rgba(255,255,255,.02); color:var(--cream); font-family:var(--font-sans); font-size:.84rem; cursor:pointer; transition:.15s; }
.onb-role svg{ width:17px; height:17px; color:var(--c); flex:none; }
.onb-role:hover{ border-color:var(--c); }
.onb-role.sel{ border-color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.onb-later{ color:var(--muted); font-size:.82rem; margin-top:.8rem; }
.onb-foot{ display:flex; align-items:flex-start; gap:.6rem; color:var(--muted); font-size:.82rem; line-height:1.5; margin:.4rem 0 1.2rem; }
.onb-foot svg{ flex:none; margin-top:.15rem; }
.onb-actions2{ display:grid; gap:.7rem; }
.onb-actions2 .btn{ width:100%; justify-content:center; position:relative; }
.onb-actions2 .btn .arr{ position:absolute; right:1.3rem; }
.onb-sum{ display:flex; align-items:flex-start; gap:.9rem; padding:.95rem 0; border-top:1px solid var(--line); font-size:.86rem; line-height:1.45; }
.onb-sum svg{ width:24px; height:24px; flex:none; }
.onb-sum b{ display:block; font-weight:500; color:var(--soft); }
.onb-sum span{ color:var(--cream); }
.onb-sum span.vacio{ color:var(--muted); font-style:italic; }
.onb-side-title{ text-align:center; font-family:var(--font-sans); font-weight:600; font-size:1.05rem; margin:-.4rem 0 1rem; }
.onb-side-note{ display:flex; gap:.6rem; color:var(--muted); font-size:.78rem; line-height:1.5; padding-top:.9rem; border-top:1px solid var(--line); }
.onb-side-note svg{ width:18px; height:18px; flex:none; color:var(--soft); }
.onb-label{ display:block; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:1.1rem 0 .55rem; }
.onb-chip{ display:inline-flex; align-items:center; padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:var(--soft); font-family:var(--font-sans); font-size:.84rem; cursor:pointer; transition:.15s; margin:0 .4rem .45rem 0; }
.onb-chip:hover{ border-color:rgba(244,122,42,.6); }
.onb-chip.sel{ border-color:#F47A2A; background:rgba(244,122,42,.14); color:var(--cream); }
.onb-seg{ display:flex; gap:.5rem; }
.onb-seg button{ flex:1; padding:.7rem; border-radius:12px; border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:var(--soft); cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:.86rem; }
.onb-seg button.active{ border-color:#F47A2A; background:rgba(244,122,42,.14); color:var(--cream); }

/* ===================== Landings Creadores / Marcas — ronda 3 ===================== */
/* Historias destacadas con imagen: la foto arriba, el texto abajo. */
.cases--foto .case--foto{ padding:0; overflow:hidden; color:inherit; text-decoration:none; }
.case--foto h4{ color:var(--cream); }
.case--foto img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .5s ease; }
.case--foto:hover img{ transform:scale(1.04); }
.case--foto .tag{ margin:1rem 1.2rem .6rem; align-self:flex-start; }
.case--foto h4{ padding:0 1.2rem; min-height:0; }
.case--foto p{ padding:0 1.2rem; }
.case--foto .case-go{ padding:1rem 1.2rem 1.2rem; }
@media (max-width:980px){ .cases--foto{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .cases--foto{ grid-template-columns:1fr; } .case--foto img{ aspect-ratio:4/3; } }

/* Formas de trabajo numeradas (1, 2, 3) */
.forma-n{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--cream); margin-bottom:.9rem; }
.plan .tier{ margin-bottom:.8rem; }
.plan-sub{ color:var(--cream); font-weight:600; font-size:.92rem; margin-bottom:.7rem; }
.plan-lead{ color:var(--soft); font-size:.88rem; line-height:1.55; margin-bottom:1rem; }
.packs-titulo{ color:var(--cream); font-weight:600; font-size:.95rem; margin:.6rem 0 .3rem; }
.valor{ display:flex; align-items:baseline; gap:.45rem; margin:.2rem 0 .2rem; color:var(--muted); font-size:.9rem; }
.valor b{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; color:var(--cream); letter-spacing:-.02em; }
.valor--2{ margin-top:0; }
.valor + .btn, .valor--2 + .btn{ margin-top:.9rem; }
.valor--2 b{ font-size:1.3rem; }
.pack-grid--texto .pack-card{ text-align:left; align-items:flex-start; justify-content:flex-start; padding:1.1rem 1rem; }
.pack-grid--texto .pack-title{ font-size:.92rem; }
.pack-combo{ font-size:.82rem; font-weight:600; color:var(--amber); line-height:1.4; }
.pack-grid--texto .pack-desc{ font-size:.8rem; }
@media (max-width:640px){ .pack-grid--texto{ grid-template-columns:1fr; } }
.plan-continua{ margin-top:1.4rem; }
.plan-continua .tier{ font-family:var(--font-display); font-size:1.25rem; font-weight:560; margin-bottom:.6rem; }
.plan-continua h3{ font-family:var(--font-display); font-size:1.12rem; margin-bottom:.5rem; }
.plan-continua p{ color:var(--soft); line-height:1.6; margin-bottom:.7rem; max-width:80ch; }
.plan-continua .plan-combo{ color:var(--cream); font-weight:600; }
.plan-continua .plan-nota{ color:var(--muted); font-size:.88rem; margin-bottom:.35rem; }
.plan-continua .plan-nota b{ color:var(--cream); font-weight:600; }
.plan-continua .btn{ margin-top:.9rem; }
.paths--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .paths--2{ grid-template-columns:1fr; } }

/* Formulario "Quiero cotizar…" (servicios especiales / plan continuo) */
.cot-ok{ text-align:center; padding:1.6rem 0 .6rem; }
.cot-ok b{ display:block; font-family:var(--font-display); font-size:1.4rem; margin-bottom:.4rem; }
.cot-ok p{ color:var(--soft); }

/* Modal "Crear perfil": foto, contador de la mini bio y categorías con buscador */
.sol-foto{ display:flex; align-items:center; gap:.9rem; border:1px dashed var(--line-2); border-radius:14px; padding:.8rem 1rem; cursor:pointer; color:var(--soft); font-size:.88rem; }
.sol-foto:hover{ border-color:var(--cream); color:var(--cream); }
.sol-foto img{ width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; }
.sol-cuenta{ color:var(--muted); font-size:.76rem; margin-top:.25rem; text-align:right; }
.sol-buscar{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--line-2); border-radius:10px; padding:.5rem .75rem; margin-bottom:.6rem; color:var(--muted); }
.sol-buscar input{ flex:1; min-width:0; background:none; border:0; outline:0; color:var(--cream); font:inherit; font-size:.85rem; padding:0; }
.sol-cats{ max-height:190px; overflow-y:auto; display:flex; flex-wrap:wrap; gap:.4rem; padding-right:.3rem; scrollbar-width:thin; }
.sol-listo{ text-align:center; }
.sol-listo b{ display:block; font-family:var(--font-display); font-size:1.4rem; margin-bottom:.5rem; }
.sol-listo p{ color:var(--soft); margin-bottom:1.1rem; }

/* ===================== Tarjetas con foto real =====================
   Las tarjetas de ícono en un círculo con texto centrado se veían como una
   plantilla genérica. Ahora llevan una foto de la propia Tribu arriba
   (fotogramas de las coberturas) y el texto alineado a la izquierda. */
.challenge.con-foto{ padding:0; overflow:hidden; text-align:left; display:flex; flex-direction:column; }
.challenge.con-foto .ch-img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border-bottom:3px solid var(--c,var(--teal)); }
.challenge.con-foto b{ margin:1.05rem 1.2rem .45rem; min-height:0 !important; }
.challenge.con-foto p{ margin:0 1.2rem 1.3rem; font-size:.88rem; line-height:1.55; }
.challenge.con-foto p:first-of-type:last-child{ margin-top:1rem; }
.challenges:not(.challenges--3) .challenge.con-foto .ch-img{ aspect-ratio:1/1; }

.perk-lg.con-foto{ padding:0; overflow:hidden; text-align:left; display:flex; flex-direction:column; }
.perk-lg.con-foto .perk-img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border-bottom:3px solid var(--c,var(--amber)); }
.perk-lg.con-foto h4{ margin:1.05rem 1.3rem .4rem; }
.perk-lg.con-foto p{ margin:0 1.3rem 1.4rem; }

.svc.con-foto{ padding:0; overflow:hidden; }
.svc.con-foto .svc-img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
.svc.con-foto > :not(.svc-img){ margin-left:1.2rem; margin-right:1.2rem; }
.svc.con-foto h3{ margin-top:1.1rem; }
.svc.con-foto > :last-child{ margin-bottom:1.2rem; }

.path.con-foto{ padding-top:0; }
.path.con-foto .path-img{ width:calc(100% + 3rem); height:auto; margin:0 -1.5rem .2rem; aspect-ratio:16/9; object-fit:cover; display:block; }
.path.con-foto::before{ z-index:1; }

.camino-card.con-foto{ padding-top:0; overflow:hidden; }
.camino-card.con-foto .camino-img{ width:calc(100% + 2.9rem); height:auto; margin:0 -1.45rem 1.1rem; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:3px solid var(--c); }
@media (max-width:640px){ .camino-card.con-foto .camino-img{ width:calc(100% + 2.4rem); margin:0 -1.2rem .9rem; aspect-ratio:21/9; } }

/* ===================== Landings: ajustes del 14/10 ===================== */
/* Lista de Comunidad de Creadores / Aliados: se reparte en todo el alto de la
   tarjeta en lugar de dejar un hueco debajo. */
.plan--plus ul{ justify-content:space-between; }
/* Packs centrados */
.pack-grid--texto .pack-card{ text-align:center; align-items:center; }
/* Plan de Comunicación Continua: el isotipo grande y tenue de la derecha, el
   mismo recurso de las cajas de cierre (.cta-box). */
.plan-continua{ position:relative; overflow:hidden; }
.plan-continua > *{ position:relative; z-index:1; }
.plan-continua::after{
  content:""; position:absolute; top:50%; right:min(110px,8vw); transform:translateY(-50%);
  width:min(300px,24vw); height:min(300px,24vw);
  background:url(/assets/isotipo.png?v=3) no-repeat center/contain; opacity:.16; pointer-events:none;
}
@media (max-width:900px){ .plan-continua::after{ display:none; } }
/* Preguntas frecuentes en dos columnas */
.faq.faq--2col{ max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.1rem; align-items:start; }
.faq.faq--2col details{ margin:0; }
@media (max-width:860px){ .faq.faq--2col{ grid-template-columns:1fr; } }
/* Botón destacado (Plan de Comunicación Continua) */
.btn--destacado{ padding:1rem 1.7rem; font-size:1rem; box-shadow:0 14px 36px -14px rgba(232,69,122,.75); }
.h2--cierre{ max-width:none !important; }
/* FAQ en dos columnas: las dos tarjetas de cada fila con el mismo alto.
   Desde 1200px cada pregunta va en un solo renglón: cada columna toma el ancho
   de su pregunta más larga y site.js achica apenas la letra si las dos no
   entran juntas (si ni así entran, recién ahí se permite partir la línea). */
@media (min-width:861px){ .faq.faq--2col{ align-items:stretch; } }
@media (min-width:1200px){
  .faq.faq--2col{ grid-template-columns:auto auto; }
  .faq.faq--2col summary{ white-space:nowrap; font-size:var(--faq-fs,.98rem); }
  .faq.faq--2col.parte summary{ white-space:normal; }
}

/* ===================== Ajustes móvil (revisión 16/10) ===================== */
/* Títulos de bloques chicos: más aire entre renglones */
.mini-cta h3, .plan-continua h3{ line-height:1.28; }
@media (max-width:760px){
  /* El pie termina por encima de los botones flotantes (chat y WhatsApp) */
  .footer{ padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); }
  /* Historias destacadas: carrusel horizontal en lugar de cuatro fotos
     enormes una debajo de otra (la página se hacía eterna) */
  .cases.cases--foto{
    display:flex; overflow-x:auto; gap:.8rem; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad)); padding:0 var(--pad) .6rem; scrollbar-width:none;
  }
  .cases.cases--foto::-webkit-scrollbar{ display:none; }
  .cases.cases--foto .case--foto{ flex:0 0 72%; scroll-snap-align:start; }
  /* Tarjetas con foto: la foto más baja para que no ocupe toda la pantalla */
  .challenge.con-foto .ch-img{ aspect-ratio:16/9; }
}
/* El título de un modal no pasa por debajo de la ✕ */
.modal h2{ padding-right:2.6rem; }
/* Con un modal, el menú del celular, la hoja "Conectar" o el panel de
   filtros abiertos, los botones flotantes (chat y WhatsApp) se esconden:
   si no, tapan campos y botones. */
body:has(.modal-overlay.open) :is(.tc-wa, .tc-dock),
body:has(.mobile-menu.open) :is(.tc-wa, .tc-dock),
body:has(.pp-sheet.open) :is(.tc-wa, .tc-dock),
body[style*="overflow: hidden"] :is(.tc-wa, .tc-dock){ opacity:0; pointer-events:none; transform:translateY(12px); animation:none; }
@media (max-width:760px){
  body:has(#panelFiltros:not([hidden])) :is(.tc-wa, .tc-dock){ opacity:0; pointer-events:none; animation:none; }
}
.tc-wa, .tc-dock{ transition:opacity .2s ease, transform .2s ease; }

/* ===== Tarjetas con ícono (landing de creadores, ronda 20/10) =====
   Sin fotos: el texto manda y un ícono alusivo acompaña. */
.challenge.con-icono{
  text-align:left; padding:1.7rem 1.6rem 1.8rem; display:flex; flex-direction:column;
  border-top:3px solid var(--c,var(--teal));
  background:linear-gradient(180deg, color-mix(in srgb, var(--c,var(--teal)) 7%, var(--ink-1)), var(--ink-1) 55%);
}
.challenge.con-icono .ch-icono{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center; flex:none; margin-bottom:1.25rem;
  color:var(--c,var(--teal)); background:color-mix(in srgb, var(--c,var(--teal)) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--c,var(--teal)) 34%, transparent);
}
.challenge.con-icono .ch-icono svg{ width:31px; height:31px; }
.challenges--eq .challenge.con-icono b{ font-size:1.22rem; line-height:1.28; min-height:0; margin-bottom:.75rem; color:var(--cream); }
.challenge.con-icono p{ font-size:1rem; line-height:1.68; color:var(--soft); margin:0; }
.challenge.con-icono:hover .ch-icono{ transform:translateY(-2px); }
.challenge.con-icono .ch-icono{ transition:transform .3s ease; }
/* 9:16 como en Instagram (las portadas de reels traen texto abajo) */
.cases--reel .case--foto img{ aspect-ratio:9/16; }
@media (max-width:760px){
  .challenge.con-icono{ padding:1.4rem 1.3rem 1.5rem; }
  .challenge.con-icono .ch-icono{ width:52px; height:52px; border-radius:15px; margin-bottom:1rem; }
  .challenge.con-icono .ch-icono svg{ width:27px; height:27px; }
  .challenges--eq .challenge.con-icono b{ font-size:1.12rem; }
  .challenge.con-icono p{ font-size:.95rem; }
  .cases--reel.cases--foto .case--foto{ flex-basis:62%; }
}

/* =====================================================================
   REFINAMIENTO VISUAL (25/10) — más compacto y sin "estética de IA".
   Referencias: Resident Advisor, Dice y Luma (sitios de eventos y comunidad
   compactos, donde mandan la foto y la información, con pocos efectos).
   - Escala más chica: base 15px, títulos y botones más contenidos, contenido
     con ancho máximo de 1240px (antes 1560: todo se estiraba y agrandaba).
   - Sin texto con degradé, sin brillos de color en botones, sin "aurora"
     animada, sin el mismo fade+slide grande en cada sección.
   ===================================================================== */
html{ font-size:93.75%; }
:root{ --maxw:1240px; --r:14px; }

/* Títulos */
.display{ font-size:clamp(2.1rem, 4.6vw, 3.25rem); }
.h2{ font-size:clamp(1.5rem, 2.6vw, 2.05rem); }
.h3{ font-size:clamp(1.1rem, 1.6vw, 1.28rem); }
.lead{ font-size:clamp(.98rem, 1.15vw, 1.06rem); }
.cta-box h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
.stat .num{ font-size:clamp(1.8rem, 3vw, 2.5rem); }
.eyebrow{ font-size:1.15rem; }

/* Texto con degradé (el gesto más típico de la IA) -> color liso con un
   subrayado fino en el espectro de la marca */
.grad{
  background:var(--spectrum) no-repeat 0 92% / 100% .11em;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:currentColor; color:var(--cream); padding-bottom:.02em;
}

/* Botones: más chicos, sin halo de color ni salto al pasar el mouse */
.btn{ font-size:.9rem; padding:.74em 1.3em; }
.btn--spectrum, .btn--rainbow, .btn--tribu-cta{ box-shadow:none; }
.btn--spectrum:hover, .btn--rainbow:hover, .btn--tribu-cta:hover, .btn--outline:hover, .btn--ghost:hover, .btn--light:hover{
  transform:none; box-shadow:none; filter:brightness(1.08);
}

/* Fondo: el degradé de color queda (lo pidió el equipo) pero quieto y más tenue */
.aurora span{ animation:none; opacity:.11; }

/* Entrada de secciones: más corta y sutil */
.reveal{ transition:opacity .45s ease, transform .45s ease; }
html.js .reveal{ transform:translateY(10px); }

/* Tarjetas: sin elevarse ni brillar al pasar el mouse */
.challenge:hover, .case:hover, .path:hover, .benef-card:hover, .directory-card:hover{ transform:none; box-shadow:none; }
.ic-pin{ display:inline-block; vertical-align:-1px; margin-right:.3em; opacity:.75; flex:none; }
/* El menú se alinea con el contenido (antes iba de borde a borde) */
.nav{ padding-inline:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))); padding-block:12px; }
/* Mapas en tono oscuro, integrados al sitio (las teselas claras quedaban
   pegadas). Solo se invierten las teselas; los marcadores mantienen color. */
.leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.6); }
.leaflet-container{ background:#14161c; }
.ev-card-loc, .ev-loc, .map-pop-meta{ align-items:flex-start; }
.ev-card-loc .ic-pin, .ev-loc .ic-pin{ margin-top:.28em; }