/* =========================================================
   soytara — Brand Identity System 2026
   Arena · Tinta bosque · Terracota (una sola brasa)
   Fraunces 500 · DM Sans · DM Mono
   ========================================================= */
:root {
  --arena: #F6F3EC;
  --arena-2: #EFE9DB;
  --duna: #E8E0CE;
  --fibra: #DDD3BC;
  --tinta: #1C2621;
  --musgo: #52584F;
  --liquen: #8A8B80;
  --terracota: #C1652E;
  --terracota-d: #A9541F;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;

  --r-pill: 100px;
  --r-card: 22px;
  --gutter: clamp(20px, 5.8vw, 90px);
  --max: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--arena);
  color: var(--tinta);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
em { font-style: italic; }
::selection { background: var(--terracota); color: var(--arena); }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--arena); padding: 10px 16px; border-radius: var(--r-pill); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.h2 {
  margin: 0;
  font: 500 clamp(36px, 4.4vw, 56px)/1.08 var(--serif);
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
}
.h2 em, .h3 em, .final__title em, .hero__title em, .footer__claim em, .mirror__closing em { color: var(--terracota); }
.h3 { margin: 0; font: 500 clamp(22px, 2vw, 26px)/1.25 var(--serif); letter-spacing: -.02em; }
.lead { margin: 0; max-width: 470px; color: var(--musgo); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.eyebrow {
  margin: 0 0 22px;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--musgo);
}
.eyebrow--pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: 1px solid var(--fibra); border-radius: var(--r-pill);
  background: rgba(239, 233, 219, .7);
  color: var(--tinta);
}
.eyebrow--light { color: var(--liquen); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(193,101,46,.45); } 60% { box-shadow: 0 0 0 7px rgba(193,101,46,0); } }

/* ---------- Botones ---------- */
.btn {
  --bg: transparent; --fg: var(--tinta); --bd: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1.5px solid var(--bd); border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  will-change: transform;
}
.btn .arr { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn--primary { --bg: var(--terracota); --fg: var(--arena); --bd: var(--terracota); }
.btn--primary:hover { --bg: var(--tinta); --bd: var(--tinta); }
.btn--ghost:hover { --bg: var(--tinta); --fg: var(--arena); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 62px; padding: 0 34px; font-size: 18px; }
.btn--link { border-color: transparent; padding-inline: 8px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--fibra); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.btn--link:hover { text-decoration-color: var(--terracota); }

.pill { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pill--soft { background: var(--duna); color: var(--tinta); }

/* ---------- Progreso (el hilo) ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--terracota); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Header ---------- */
.logo { font: 500 26px/1 var(--serif); letter-spacing: -.03em; text-decoration: none; color: var(--tinta); }
.logo span { color: var(--terracota); }
.logo--sm { font-size: 18px; }
.logo--light { color: var(--arena); font-size: 34px; }

.header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s, border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(246, 243, 236, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--fibra); }
.header.is-hidden { transform: translateY(-100%); }
.header__in { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav { display: flex; gap: 32px; }
.nav a { position: relative; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--tinta); padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--terracota); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.header__right { display: flex; align-items: center; gap: 14px; }

.lang { position: relative; display: flex; padding: 3px; border: 1px solid var(--fibra); border-radius: var(--r-pill); background: var(--arena-2); }
.lang button { position: relative; z-index: 1; border: 0; background: none; padding: 6px 10px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--musgo); border-radius: var(--r-pill); transition: color .3s, background .3s; }
.lang button[aria-pressed="true"] { background: var(--tinta); color: var(--arena); }
.lang button:hover:not([aria-pressed="true"]) { color: var(--tinta); }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--fibra); border-radius: 50%; background: var(--arena); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.75px; background: var(--tinta); border-radius: 2px; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 130px 0 90px; overflow: hidden; isolation: isolate; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__title { margin: 28px 0 26px; font: 500 clamp(64px, 10.4vw, 148px)/.95 var(--serif); letter-spacing: -.045em; font-variation-settings: "opsz" 144; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .word { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
.hero__title .line:nth-child(2) .word { animation-delay: .18s; }
@keyframes rise { to { transform: none; } }
.hero__brand { color: var(--tinta); }
.hero__brand span { color: var(--terracota); }
.hero__lead { margin: 0 0 36px; max-width: 470px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--tinta); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hero__badges { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }
.hero__badges li { display: flex; align-items: center; gap: 8px; }
.hero__badges li::before { content: ""; width: 14px; height: 1.75px; background: var(--terracota); border-radius: 2px; }

/* Ondas que se expanden (inspiradas en el fondo de ondas de arena) */
.hero__ripples, .final__ripples { position: absolute; z-index: -1; pointer-events: none; }
.hero__ripples { right: -12vw; top: 50%; width: 90vmin; height: 90vmin; transform: translateY(-50%); }
.hero__ripples i, .final__ripples i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--fibra); opacity: 0; animation: ripple 10s linear infinite; }
.hero__ripples i:nth-child(2), .final__ripples i:nth-child(2) { animation-delay: -2s; }
.hero__ripples i:nth-child(3), .final__ripples i:nth-child(3) { animation-delay: -4s; }
.hero__ripples i:nth-child(4), .final__ripples i:nth-child(4) { animation-delay: -6s; }
.hero__ripples i:nth-child(5) { animation-delay: -8s; }
@keyframes ripple { 0% { transform: scale(.15); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__thread { position: absolute; left: -38%; top: 50%; width: 120%; transform: translateY(-50%); color: var(--terracota); z-index: 0; }

.phone {
  position: relative; z-index: 1;
  width: min(100%, 340px); aspect-ratio: 9 / 17; max-height: 78vh;
  display: flex; flex-direction: column;
  background: var(--arena); border: 1.5px solid var(--tinta); border-radius: 40px;
  padding: 16px; overflow: hidden;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-12px) rotate(.4deg); } }
.phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 14px; border-bottom: 1px solid var(--fibra); }
.phone__status { display: flex; align-items: center; gap: 7px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--musgo); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); animation: pulse 2s infinite; }
.phone__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px 2px; overflow: hidden; }
.phone__input { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border: 1px solid var(--fibra); border-radius: var(--r-pill); color: var(--liquen); font-size: 14px; }
.phone__input span:last-child { color: var(--terracota); }

.msg { max-width: 86%; padding: 11px 15px; font-size: 14.5px; line-height: 1.45; border-radius: 18px; animation: msgIn .55s var(--ease) both; }
.msg--tara { align-self: flex-start; background: var(--arena-2); border: 1px solid var(--fibra); border-bottom-left-radius: 6px; }
.msg--me { align-self: flex-end; background: var(--tinta); color: var(--arena); border-bottom-right-radius: 6px; }
.msg.is-leaving { animation: msgOut .5s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes msgOut { to { opacity: 0; transform: translateY(-10px); } }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--liquen); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--musgo); }
.scroll-hint i { width: 1.75px; height: 40px; background: var(--fibra); position: relative; overflow: hidden; border-radius: 2px; }
.scroll-hint i::after { content: ""; position: absolute; inset: 0; background: var(--terracota); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* ---------- Marquee ---------- */
.quotes { padding: clamp(56px, 7vw, 90px) 0; border-block: 1px solid var(--fibra); background: var(--arena-2); overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 44px; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font: italic 500 clamp(30px, 4vw, 54px)/1.2 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.marquee__track i { width: 10px; height: 10px; border-radius: 50%; background: var(--terracota); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.section { padding: clamp(88px, 11vw, 150px) 0; position: relative; }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(44px, 5vw, 70px); }
.section__head .lead { flex: 0 1 440px; }

/* ---------- ¿Te suena? ---------- */
.mirror__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.mirror__head .lead { margin: 22px 0 34px; }
.mirror__grid > * { min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 12px 20px; border: 1px solid var(--fibra); border-radius: var(--r-pill);
  background: var(--arena); font: 500 16px/1.3 var(--sans); text-align: left;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover { border-color: var(--tinta); transform: translateY(-2px); }
.chip.is-active { background: var(--tinta); border-color: var(--tinta); color: var(--arena); }
.mirror__panel { position: sticky; top: 110px; }
.convo {
  min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: clamp(22px, 3vw, 34px); border: 1px solid var(--fibra); border-radius: var(--r-card);
  background: var(--arena-2);
}
.convo .msg { font-size: 16px; max-width: 88%; }
.convo__empty { margin: auto; text-align: center; color: var(--musgo); max-width: 280px; }
.convo__empty svg { width: 130px; margin: 0 auto 18px; color: var(--terracota); }
.convo__empty p { margin: 0; }
.convo__cta { align-self: flex-start; margin-top: 8px; animation: msgIn .55s var(--ease) both; }
.note { margin: 14px 4px 0; font-size: 13px; color: var(--musgo); }
.mirror__closing { margin-top: clamp(70px, 9vw, 120px); font: 500 clamp(28px, 3.4vw, 44px)/1.2 var(--serif); letter-spacing: -.03em; max-width: 980px; }

/* ---------- Método ---------- */
.method { background: var(--arena-2); border-block: 1px solid var(--fibra); }
.steps { position: relative; }
.steps__thread { position: absolute; left: 0; right: 0; top: 46px; width: 100%; height: 60px; color: var(--terracota); pointer-events: none; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px 30px; border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena);
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.step:hover { transform: translateY(-4px); border-color: var(--musgo); }
.step.is-active { border-color: var(--tinta); }
.step__n { font: 400 12px/1 var(--mono); letter-spacing: .14em; color: var(--musgo); }
.step__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--fibra); background: var(--arena); color: var(--tinta); transition: background .4s, color .4s, border-color .4s; }
.step.is-active .step__icon { background: var(--terracota); border-color: var(--terracota); color: var(--arena); }
.step__icon svg, .icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.step__t { font: 500 26px/1.15 var(--serif); letter-spacing: -.02em; }
.step__d { color: var(--musgo); font-size: 16px; line-height: 1.55; }

.example {
  margin-top: 26px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px 50px; align-items: center;
  padding: clamp(26px, 3.4vw, 44px); border-radius: var(--r-card); background: var(--tinta); color: var(--arena);
}
.example__label { grid-column: 1 / -1; margin: 0; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--liquen); }
.example__quote { margin: 0; font: italic 500 clamp(22px, 2.3vw, 30px)/1.3 var(--serif); letter-spacing: -.02em; }
.example__out { min-height: 130px; border-left: 1.75px solid var(--terracota); padding-left: 26px; }
.example__step { display: inline-block; margin-bottom: 10px; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #E0A27A; }
.example__text { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.example__out.swap .example__step, .example__out.swap .example__text { animation: msgIn .6s var(--ease) both; }
.example__dots { grid-column: 1 / -1; display: flex; gap: 8px; }
.example__dots i { height: 3px; flex: 0 0 26px; border-radius: 3px; background: rgba(246,243,236,.18); overflow: hidden; position: relative; }
.example__dots i.on::after { content: ""; position: absolute; inset: 0; background: var(--terracota); transform-origin: 0 50%; animation: fillbar var(--dur, 5s) linear forwards; }
.example__dots.paused i.on::after { animation: none; transform: none; }
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Nunca ---------- */
.never { background: var(--tinta); color: var(--arena); overflow: hidden; }
.never .h2 { max-width: 820px; margin-bottom: clamp(44px, 5vw, 70px); }
.never .h2 em { color: #E0A27A; }
.never__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ncard { padding: 30px 26px; border: 1px solid rgba(221, 211, 188, .18); border-radius: var(--r-card); transition: border-color .4s, background .4s; }
.ncard:hover { border-color: rgba(221, 211, 188, .45); background: rgba(246, 243, 236, .03); }
.ncard__x { position: relative; display: block; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(221, 211, 188, .35); margin-bottom: 26px; }
.ncard__x::before, .ncard__x::after { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 1.75px; background: var(--arena); border-radius: 2px; transform: rotate(45deg); }
.ncard__x::after { transform: rotate(-45deg); }
.ncard h3 { margin: 0 0 12px; font: 500 22px/1.25 var(--serif); letter-spacing: -.02em; }
.ncard p { margin: 0; color: #C9C6B9; font-size: 16px; line-height: 1.55; }

.safety { margin-top: 26px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: clamp(28px, 3.6vw, 48px); border-radius: var(--r-card); background: var(--arena); color: var(--tinta); }
.safety > *, .guarantee > *, .example > * { min-width: 0; }
.safety p { margin: 16px 0 0; color: var(--musgo); }
.safety__lines { display: grid; gap: 12px; }
.hotline { display: flex; align-items: center; gap: 20px; padding: 18px 24px; border: 1px solid var(--fibra); border-radius: 18px; text-decoration: none; transition: border-color .3s, transform .3s var(--ease); }
.hotline:hover { border-color: var(--tinta); transform: translateX(4px); }
.hotline__n { font: 500 30px/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.hotline__t { font-size: 14px; line-height: 1.4; color: var(--musgo); }

/* ---------- Comunidad ---------- */
.ccards { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.ccard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 3vw, 36px); border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena-2); transition: border-color .4s; transform-style: preserve-3d; }
.ccard:hover { border-color: var(--musgo); }
.ccard p { margin: 0; color: var(--musgo); }
.ccard__tag { font: 400 12px/1.6 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta) !important; }
.ccard--main { grid-row: span 1; background: var(--arena); }
.ccard--main .btn { align-self: flex-start; margin-top: auto; position: relative; z-index: 1; }
.ccard__list { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 10px; }
.ccard__list li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.ccard__list li::before { content: ""; flex: none; width: 14px; height: 1.75px; background: var(--terracota); transform: translateY(-4px); border-radius: 2px; }
.ccard__thread { position: absolute; right: -20px; bottom: 18px; width: 220px; color: var(--terracota); opacity: .9; pointer-events: none; }
.soon { margin: 30px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--musgo); }

/* ---------- Privacidad ---------- */
.privacy { background: var(--arena-2); border-top: 1px solid var(--fibra); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pcard { padding: 30px 28px; border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena); transition: transform .4s var(--ease), border-color .4s; }
.pcard:hover { transform: translateY(-4px); border-color: var(--musgo); }
.pcard h3 { margin: 22px 0 10px; font: 500 22px/1.25 var(--serif); letter-spacing: -.02em; }
.pcard p { margin: 0; color: var(--musgo); font-size: 16px; line-height: 1.55; }
.pcard--pending { border-style: dashed; }
.pcard--pending p { font-style: italic; }
.icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--fibra); color: var(--terracota); }
.inline-link { color: var(--tinta); font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--terracota); }
.guarantee { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; padding: clamp(28px, 3.6vw, 48px); border-radius: var(--r-card); background: var(--tinta); color: var(--arena); }
.guarantee .h3 em { color: #E0A27A; }
.guarantee p { margin: 0; color: #C9C6B9; }

/* ---------- Equipo (bloque ondas) ---------- */
.tara-equipo {
  position: relative; isolation: isolate;
  background: var(--arena) url("assets/img/fondo-ondas-arena.jpg") center / cover no-repeat;
}
.tara-equipo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246, 243, 236, .32); }
.te-wrap { padding-block: clamp(88px, 11vw, 150px); }
.te-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.te-heading .lead { color: var(--tinta); }
.te-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.te-card { grid-column: span 2; min-width: 0; padding: clamp(24px, 2.8vw, 32px); background: rgba(246, 243, 236, .93); border: 1px solid var(--fibra); border-radius: var(--r-card); transition: transform .45s var(--ease), border-color .45s; }
.te-card:hover { transform: translateY(-5px); border-color: var(--musgo); }
.te-card:nth-child(4) { grid-column: 2 / span 2; }
.te-card:nth-child(5) { grid-column: 4 / span 2; }
.te-top { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--fibra); }
.te-av { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--duna); border: 1px solid var(--fibra); font: italic 500 20px/1 var(--serif); color: var(--terracota); transition: background .4s, color .4s; overflow: hidden; }
.te-card:hover .te-av { background: var(--terracota); color: var(--arena); border-color: var(--terracota); }
.te-av--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.te-card:hover .te-av--photo { border-color: var(--terracota); }
.te-name { margin: 0 0 6px; font: 500 22px/1.2 var(--serif); letter-spacing: -.025em; }
.te-role { margin: 0; font: 400 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.te-bio { display: grid; gap: 14px; }
.te-bio p { margin: 0; font-size: 16px; line-height: 1.55; }
.te-thread { width: min(100%, 320px); height: 40px; margin: 44px auto 0; color: var(--terracota); }

/* ---------- CTA final ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; padding: clamp(110px, 14vw, 190px) 0; text-align: center; }
.final__ripples { left: 50%; top: 50%; width: 120vmin; height: 120vmin; transform: translate(-50%, -50%); }
.final__in { display: flex; flex-direction: column; align-items: center; }
.final__screen { width: min(100%, 360px); color: var(--terracota); margin-bottom: 34px; }
.final__title { margin: 0 0 44px; font: 500 clamp(44px, 7vw, 104px)/1.02 var(--serif); letter-spacing: -.045em; }
.final__note { margin: 22px 0 0; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }

/* ---------- Footer ---------- */
.footer { background: var(--tinta); color: var(--arena); padding: 80px 0 36px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer__claim { margin: 14px 0 0; font: 500 24px/1.3 var(--serif); letter-spacing: -.02em; }
.footer__claim em { color: #E0A27A !important; }
.footer__h { margin: 0 0 16px; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--liquen); }
.footer__grid a, .footer__lang { display: block; width: fit-content; margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--arena); text-decoration: none; font-size: 16px; text-align: left; opacity: .85; transition: opacity .25s, color .25s; }
.footer__grid a:hover, .footer__lang:hover { opacity: 1; color: #E0A27A; }
.footer__lang[aria-current="true"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--terracota); text-underline-offset: 5px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 60px; padding-top: 26px; border-top: 1px solid rgba(221, 211, 188, .16); font: 400 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--liquen); }

/* ---------- Toast (botones pendientes) ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; max-width: calc(100% - 32px); padding: 14px 22px; border-radius: var(--r-pill); background: var(--tinta); color: var(--arena); font-size: 15px; transition: transform .5s var(--ease), visibility .5s; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.js .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 2.4s var(--ease); }
.js .draw.is-drawn { stroke-dashoffset: 0; }

/* =========================================================
   VIDA EN LOS BLOQUES · movimientos sutiles
   ========================================================= */

/* Titulares: las palabras suben una a una */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.split.is-in .w > span, .split.is-done .w > span { transform: none; }

/* Eyebrows: una línea terracota crece antes del texto */
.eyebrow:not(.eyebrow--pill)::before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 1.75px; margin-right: 0; background: var(--terracota); border-radius: 2px; transition: width .9s var(--ease) .2s, margin-right .9s var(--ease) .2s; }
.eyebrow.is-in::before, .quotes .eyebrow::before { width: 22px; margin-right: 12px; }

/* Iconos que se dibujan al aparecer */
.js .icon svg *, .js .step__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .35s; }
.is-in .icon svg *, .steps.is-in .step__icon svg * { stroke-dashoffset: 0; }
.pcard .icon { transition: background .4s var(--ease), color .4s var(--ease), border-color .4s, transform .5s var(--ease); }
.pcard:hover .icon { background: var(--terracota); border-color: var(--terracota); color: var(--arena); transform: rotate(-8deg) scale(1.06); }
.pcard .icon { animation: breathe 5s ease-in-out infinite; }
.pcard:nth-child(2) .icon { animation-delay: -1s; } .pcard:nth-child(3) .icon { animation-delay: -2s; }
.pcard:nth-child(4) .icon { animation-delay: -3s; } .pcard:nth-child(5) .icon { animation-delay: -4s; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(193, 101, 46, 0); } 50% { box-shadow: 0 0 0 6px rgba(193, 101, 46, .09); } }

/* Tarjetas «pendiente»: el borde discontinuo avanza despacio */
.pcard--pending { border-color: transparent; background-image: repeating-linear-gradient(90deg, var(--fibra) 0 8px, transparent 8px 14px), repeating-linear-gradient(180deg, var(--fibra) 0 8px, transparent 8px 14px), repeating-linear-gradient(90deg, var(--fibra) 0 8px, transparent 8px 14px), repeating-linear-gradient(180deg, var(--fibra) 0 8px, transparent 8px 14px); background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; background-position: 0 0, 100% 0, 0 100%, 0 0; background-repeat: no-repeat; background-color: var(--arena); animation: ants 1.6s linear infinite; }
@keyframes ants { to { background-position: 14px 0, 100% 14px, -14px 100%, 0 -14px; } }

/* «Nunca»: trama de hilos en paralelo que ondula al fondo */
.never { isolation: isolate; }
.weave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .5; }
.weave path { stroke: rgba(221, 211, 188, .16); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.weave path.weave__accent { stroke: rgba(193, 101, 46, .55); stroke-width: 1.75; }
.weave__g { animation: weave 26s linear infinite; }
.weave__g--2 { animation-duration: 32s; animation-direction: reverse; }
.weave__g--3 { animation-duration: 22s; }
.weave__g--4 { animation-duration: 38s; animation-direction: reverse; }
.weave__g--5 { animation-duration: 18s; }
@keyframes weave { to { transform: translateX(720px); } }
.never .wrap { position: relative; }
.ncard__x { transition: transform 1s var(--ease) .3s, border-color .4s, background .4s; }
.js .ncard:not(.is-in) .ncard__x { transform: rotate(-90deg) scale(.6); }
.ncard.is-in .ncard__x { transform: none; }
.ncard:hover .ncard__x { background: var(--terracota); border-color: var(--terracota); transform: rotate(90deg); }

/* Teléfonos de ayuda: punto «en línea» */
.hotline { position: relative; }
.hotline::after { content: ""; position: absolute; right: 20px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); animation: pulse 2.4s infinite; }

/* Comunidad: el hilo de la tarjeta fluye sin parar */
.ccard__thread path { stroke-dasharray: 6 10; animation: flow 3s linear infinite; }
.js .ccard__thread .draw.is-drawn { stroke-dasharray: 6 10; stroke-dashoffset: 0; }
@keyframes flow { to { stroke-dashoffset: -64; } }
.ccard::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--terracota); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.ccard:hover::after { transform: scaleX(1); }

/* Equipo: las ondas del fondo respiran despacio */
.tara-equipo { overflow: hidden; background-image: none; }
.tara-equipo::after { content: ""; position: absolute; inset: -4%; z-index: -2; background: var(--arena) url("assets/img/fondo-ondas-arena.jpg") center / cover no-repeat; animation: kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.1) rotate(2deg); } }
.te-av { position: relative; }
.te-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px dashed var(--terracota); opacity: 0; transition: opacity .4s; animation: spin 10s linear infinite; }
.te-card:hover .te-av::after { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pie: el wordmark gigante aparece letra a letra */
.footer { overflow: hidden; }
.brandname { text-transform: none; letter-spacing: 0; }
.footer__mark { margin: 50px 0 0; white-space: nowrap; text-align: center; font: 500 clamp(80px, 24vw, 300px)/.85 var(--serif); letter-spacing: -.04em; color: rgba(246, 243, 236, .08); user-select: none; }
.footer__mark span { display: inline-block; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease), color .5s; transition-delay: calc(var(--i, 0) * 70ms); }
.footer__mark span.t { color: rgba(193, 101, 46, .35); }
.js .footer__mark:not(.is-in) span { transform: translateY(60%); opacity: 0; }
.js .footer__mark.reveal { opacity: 1; transform: none; }
.footer__mark span:hover { color: var(--arena); transition-delay: 0s; }
.footer__mark span.t:hover { color: var(--terracota); }

/* =========================================================
   TEMAS · franjas, raíl de temas, ayuda
   ========================================================= */
.marquee + .marquee { margin-top: 22px; }
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 140s; }
.marquee--reverse .marquee__track span { font: 400 clamp(17px, 1.6vw, 22px)/1.3 var(--sans); letter-spacing: 0; color: var(--musgo); padding: 12px 22px; border: 1px solid var(--fibra); border-radius: var(--r-pill); background: var(--arena); }
.marquee--reverse .marquee__track i { display: none; }
.marquee--reverse .marquee__track { gap: 12px; }
.marquee__track span { transition: color .35s var(--ease), border-color .35s, background .35s; }
.marquee__track span:hover { color: var(--terracota); }
.marquee--reverse .marquee__track span:hover { color: var(--arena); background: var(--tinta); border-color: var(--tinta); }
.marquee { pointer-events: auto; }
.marquee--reverse span[data-t] { cursor: pointer; }
.quotes__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; }
.quotes__count { margin: 0; display: flex; align-items: baseline; gap: 14px; color: var(--musgo); max-width: 520px; }
.quotes__num { font: 500 clamp(48px, 5vw, 68px)/1 var(--serif); color: var(--terracota); letter-spacing: -.04em; min-width: 1.2em; }

.rail { display: flex; gap: 8px; margin: 0 0 18px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.rail__tab { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border: 1px solid var(--fibra); border-radius: var(--r-pill); background: transparent; font: 500 14px/1.2 var(--sans); white-space: nowrap; transition: background .3s var(--ease), color .3s, border-color .3s; }
.rail__tab:hover { border-color: var(--tinta); }
.rail__n { font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--terracota); }
.rail__tab.is-active { background: var(--tinta); color: var(--arena); border-color: var(--tinta); }
.rail__tab.is-active .rail__n { color: #E0A27A; }
@media (min-width: 961px) {
  .rail { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.chips.is-swapping .chip { animation: chipIn .55s var(--ease) both; }
.chips.is-swapping .chip:nth-child(2) { animation-delay: .07s; }
.chips.is-swapping .chip:nth-child(3) { animation-delay: .14s; }
.chips.is-swapping .chip:nth-child(4) { animation-delay: .21s; }
.chips.is-swapping .chip:nth-child(5) { animation-delay: .28s; }
.chips.is-swapping .chip:nth-child(6) { animation-delay: .35s; }
.chips.is-swapping .chip:nth-child(7) { animation-delay: .42s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

.help { margin-top: 14px; padding: 22px 24px; border-radius: var(--r-card); background: var(--tinta); color: var(--arena); animation: msgIn .6s var(--ease) both; }
.help__label { margin: 0 0 8px; font: 400 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #E0A27A; }
.help__text { margin: 0; font-size: 16px; line-height: 1.55; }
.help__lines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.hotline--sm { padding: 12px 16px; gap: 12px; background: var(--arena); color: var(--tinta); border-color: var(--arena); }
.hotline--sm .hotline__n { font-size: 24px; }
.hotline--sm .hotline__t { font-size: 13px; }
.hotline--sm::after { top: 10px; right: 10px; }
.convo .msg--tara.is-care { background: var(--arena); border-color: var(--terracota); }

/* =========================================================
   MOVIMIENTOS PROPIOS DE CADA BLOQUE
   ========================================================= */

/* Método: una chispa recorre el hilo entre los pasos */
.steps__dot { position: absolute; z-index: 2; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 5px rgba(193, 101, 46, .16); pointer-events: none; opacity: 0; transition: opacity .6s; }
.steps.is-in .steps__dot { opacity: 1; }
@media (max-width: 960px) { .steps__dot { display: none; } }

/* Comunidad: ecosistema con pulsos que viajan por los hilos */
.eco { margin: 0 auto clamp(34px, 4vw, 54px); max-width: 860px; }
.eco svg { width: 100%; height: auto; overflow: visible; }
.eco__line { stroke: var(--fibra); stroke-width: 1.75; stroke-linecap: round; }
.eco__pulse { fill: var(--terracota); }
.eco__node circle { fill: var(--arena); stroke: var(--tinta); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: nodeBeat 4s ease-in-out infinite; }
.eco__node:nth-of-type(3) circle { animation-delay: -1s; } .eco__node:nth-of-type(4) circle { animation-delay: -2s; } .eco__node:nth-of-type(5) circle { animation-delay: -3s; }
.eco__node--you circle { fill: var(--tinta); }
@keyframes nodeBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.eco text { font: 500 15px var(--sans); fill: var(--tinta); text-anchor: middle; }
.eco text[text-anchor="start"] { text-anchor: start; }
.eco__tara rect { fill: var(--arena); stroke: var(--terracota); stroke-width: 1.75; }
.eco text.eco__brand { font: 500 19px var(--serif); letter-spacing: -.03em; }
.eco__brand tspan { fill: var(--terracota); }
@media (max-width: 640px) { .eco text { font-size: 27px; } .eco text.eco__brand { font-size: 21px; } }

/* Tara Orienta: una brújula que busca su norte */
.orienta { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.4vw, 44px); border: 1px dashed var(--musgo); border-radius: var(--r-card); }
.orienta__compass { width: clamp(110px, 12vw, 150px); }
.orienta__compass svg { width: 100%; height: auto; }
.orienta__compass circle, .orienta__ticks path { stroke: var(--musgo); stroke-width: 1.5; }
.orienta__ring { stroke: var(--tinta) !important; }
.orienta__ticks { stroke-linecap: round; }
.orienta__needle { transform-origin: 80px 80px; animation: seek 9s var(--ease) infinite; }
.orienta__needle path { fill: var(--duna); stroke: var(--tinta); stroke-width: 1.2; stroke-linejoin: round; }
.orienta__needle path.tip { fill: var(--terracota); stroke: var(--terracota); }
.orienta__pin { fill: var(--tinta); stroke: none !important; }
@keyframes seek { 0% { transform: rotate(-30deg); } 14% { transform: rotate(70deg); } 28% { transform: rotate(-55deg); } 40% { transform: rotate(130deg); } 54% { transform: rotate(20deg); } 66%, 92% { transform: rotate(38deg); } 100% { transform: rotate(-30deg); } }
.orienta__body { display: grid; gap: 10px; justify-items: start; }
.orienta__quote { margin: 4px 0 0; font: italic 500 clamp(22px, 2.3vw, 30px)/1.3 var(--serif); letter-spacing: -.02em; }
.orienta__text { margin: 0; color: var(--musgo); max-width: 620px; }

/* Privacidad: el nombre se tacha y el mensaje se cifra */
.redact, .cipher { margin: 18px 0 0 !important; padding: 10px 14px; border-radius: 12px; background: var(--arena-2); font: 400 13px/1.4 var(--mono) !important; color: var(--tinta) !important; overflow: hidden; white-space: nowrap; }
.redact span { position: relative; display: inline-block; }
.redact span::after { content: ""; position: absolute; left: -3px; right: -3px; top: -2px; bottom: -2px; background: var(--tinta); border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: redact 5s var(--ease) infinite; }
@keyframes redact { 0%, 15% { transform: scaleX(0); transform-origin: left; } 35%, 75% { transform: scaleX(1); transform-origin: left; } 76% { transform-origin: right; } 95%, 100% { transform: scaleX(0); transform-origin: right; } }
.cipher { color: var(--terracota) !important; letter-spacing: .04em; }

/* Equipo: tarjetas con inclinación 3D */
.te-card { transform-style: preserve-3d; }

/* Cierre: tocar la página deja ondas, como el agua */
.final__touch { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.final__touch i { position: absolute; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; border: 1.5px solid var(--terracota); opacity: .55; transform: scale(.05); animation: touchRipple 2.4s var(--ease) forwards; pointer-events: none; }
@keyframes touchRipple { to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 640px) {
  .orienta { grid-template-columns: 1fr; }
  .help__lines { grid-template-columns: 1fr; }
}

/* =========================================================
   V3 · ECOSISTEMA EDUCATIVO
   ========================================================= */

/* ---------- Hero: tres verbos y tres anillos ---------- */
.about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.about__title { margin: 0 0 28px; font: 500 clamp(40px, 5.4vw, 80px)/1.04 var(--serif); letter-spacing: -.04em; }
.about__title > * { display: block; }
.about__title em { color: var(--terracota); }
.about__title .reveal:nth-child(2) { transition-delay: .12s; } .about__title .reveal:nth-child(3) { transition-delay: .24s; }
.about .lead { max-width: 560px; margin-bottom: 22px; }
.about__principle { margin: 0 0 34px; padding-left: 18px; border-left: 1.75px solid var(--terracota); font: 500 clamp(19px, 1.7vw, 23px)/1.35 var(--serif); letter-spacing: -.015em; max-width: 520px; }
.about__principle em { color: var(--terracota); }
.about__visual { display: flex; flex-direction: column; align-items: center; }
.rings { width: 100%; max-width: 500px; margin: 0 auto; overflow: visible; }
.rings__thread { stroke: var(--terracota); stroke-width: 1.75; stroke-linecap: round; }
.ring circle { fill: rgba(246, 243, 236, .35); stroke: var(--tinta); stroke-width: 1.5; }
.ring--b circle { stroke: var(--musgo); }
.ring--c circle { stroke: var(--terracota); stroke-width: 1.75; }
.ring text, .rings__core text { font: 400 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--tinta); text-anchor: middle; }
.ring { transform-box: view-box; animation: orbitA 14s ease-in-out infinite; }
.ring--b { animation-name: orbitB; animation-duration: 17s; }
.ring--c { animation-name: orbitC; animation-duration: 15s; }
@keyframes orbitA { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-14px, 10px); } 66% { transform: translate(8px, -12px); } }
@keyframes orbitB { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(14px, 8px); } 66% { transform: translate(-10px, -10px); } }
@keyframes orbitC { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 16px); } }
.rings__core circle { fill: var(--arena); stroke: var(--terracota); stroke-width: 1.75; transform-box: fill-box; transform-origin: center; animation: nodeBeat 3.6s ease-in-out infinite; }
.rings__core text.rings__brand { font: 500 17px var(--serif); letter-spacing: -.03em; text-transform: none; }
.rings__brand tspan { fill: var(--terracota); }
.rings__tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rings__tags li { padding: 7px 14px; border: 1px solid var(--fibra); border-radius: var(--r-pill); background: var(--arena); font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; animation: tagFloat 6s ease-in-out infinite; }
.rings__tags li:nth-child(2) { animation-delay: -1.5s; } .rings__tags li:nth-child(3) { animation-delay: -3s; } .rings__tags li:nth-child(4) { animation-delay: -4.5s; }
@keyframes tagFloat { 50% { transform: translateY(-6px); } }

/* ---------- Dos puertas ---------- */
.doors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.door { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 38px); border-radius: var(--r-card); border: 1px solid var(--fibra); background: var(--arena-2); }
.door__head { display: flex; gap: 18px; align-items: flex-start; }
.door__n { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font: 400 12px/1 var(--mono); letter-spacing: .1em; }
.door__sub { margin: 6px 0 0; color: var(--musgo); }
.door .msg { max-width: 100%; font-size: 16px; }
.msg--static { animation: none; }
.door--try { background: var(--tinta); color: var(--arena); border-color: var(--tinta); }
.door--try .door__sub { color: #C9C6B9; }
.door--try .door__n { color: #E0A27A; }
.msg--onDark { background: rgba(246, 243, 236, .07); border-color: rgba(221, 211, 188, .2); color: var(--arena); }

/* FAQ en forma de conversación */
.faq { display: grid; gap: 8px; }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--fibra); border-radius: var(--r-pill); background: var(--arena); font: 500 16px/1.3 var(--sans); text-align: left; transition: background .3s var(--ease), color .3s, border-color .3s; }
.faq__q:hover { border-color: var(--tinta); }
.faq__q i { position: relative; flex: none; width: 14px; height: 14px; }
.faq__q i::before, .faq__q i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.75px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease); }
.faq__q i::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] { background: var(--tinta); color: var(--arena); border-color: var(--tinta); align-self: flex-end; }
.faq__q[aria-expanded="true"] i::after { transform: rotate(0deg); }
.faq__a { padding: 10px 0 6px; }
.faq__a .msg { margin: 0; animation: msgIn .55s var(--ease) both; }
.faq__a .typing { display: inline-flex; }

/* El espejo: una superficie que respira */
.mirror-orb { position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; pointer-events: none; }
.mirror-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(224, 162, 122, .45); animation: ripple 7s linear infinite; opacity: 0; }
.mirror-orb i:nth-child(2) { animation-delay: -2.3s; } .mirror-orb i:nth-child(3) { animation-delay: -4.6s; }
.mirror-orb span { position: absolute; inset: 34%; border-radius: 50%; border: 1.75px solid var(--terracota); animation: breatheOrb 5s ease-in-out infinite; }
@keyframes breatheOrb { 50% { transform: scale(1.15); opacity: .6; } }
.door--try > *:not(.mirror-orb) { position: relative; }
.try__meta { margin: -4px 0 0; font: 400 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #E0A27A; }
.try__input { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border: 1px dashed rgba(221, 211, 188, .35); border-radius: var(--r-pill); color: var(--liquen); cursor: not-allowed; }
.try__lock { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #E0A27A; }
.try__lock svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; animation: lockNudge 4s ease-in-out infinite; }
@keyframes lockNudge { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.try__status { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--arena); }
.try__status .live { flex: none; transform: translateY(-2px); }
.try__fine { margin: 0; padding-top: 16px; border-top: 1px solid rgba(221, 211, 188, .16); font-size: 14px; line-height: 1.55; color: #C9C6B9; }

/* ---------- Por qué existe ---------- */
.why { margin-bottom: clamp(36px, 4vw, 54px); }
.why .h2 { max-width: 900px; margin-bottom: 22px; }
.why .lead { max-width: 760px; }
.quotes__closing { margin: 0; font: 500 clamp(24px, 2.8vw, 36px)/1.25 var(--serif); letter-spacing: -.025em; max-width: 1000px; }
.quotes__closing em { color: var(--terracota); }

/* ---------- Diez temas ---------- */
.topics .quotes__num { display: inline-block; margin-right: .1em; font-size: 1.3em; line-height: .8; vertical-align: -.08em; }
.topics .rail { margin-bottom: 26px; }
.topic { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: stretch; }
.topic__quotes { display: grid; gap: 12px; align-content: start; }
.tq { position: relative; margin: 0; padding: 22px 26px 22px 58px; border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena-2); font: italic 500 clamp(19px, 1.7vw, 23px)/1.35 var(--serif); letter-spacing: -.015em; animation: tqIn .7s var(--ease) both; }
.tq::before { content: "«"; position: absolute; left: 22px; top: 14px; font: 500 34px/1 var(--serif); color: var(--terracota); }
.tq:nth-child(2) { animation-delay: .1s; margin-left: 4%; } .tq:nth-child(3) { animation-delay: .2s; margin-left: 8%; }
.tq.is-hl { border-color: var(--terracota); background: var(--arena); }
@keyframes tqIn { from { opacity: 0; transform: translateX(-24px); } }
.topic__help { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--tinta); color: var(--arena); animation: msgIn .6s var(--ease) both; }
.topic__help .h3 { color: var(--arena); }
.topic__help .help__text { color: #D9D5C8; }
.topic__help .help__lines { margin-top: auto; padding-top: 8px; }
.topic.is-crisis .topic__help { background: var(--arena); color: var(--tinta); border: 1.75px solid var(--terracota); }
.topic.is-crisis .topic__help .h3 { color: var(--tinta); }
.topic.is-crisis .topic__help .help__text { color: var(--musgo); }
.topic.is-crisis .hotline--sm { background: var(--arena-2); border-color: var(--fibra); }

/* ---------- Dentro de los centros ---------- */
.inside { margin: clamp(40px, 5vw, 64px) 0 16px; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }
.inside__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; align-items: stretch; }
.inside__grid .orienta { margin-top: 0; }
.docente { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena-2); }
.docente p { margin: 10px 0 0; color: var(--musgo); }
.docente__board { position: relative; width: 104px; height: 78px; border: 1.5px solid var(--tinta); border-radius: 12px; background: var(--arena); overflow: hidden; }
.docente__board i { position: absolute; left: 14px; height: 1.75px; border-radius: 2px; background: var(--musgo); transform-origin: left; animation: write 5s var(--ease) infinite; }
.docente__board i:nth-child(1) { top: 20px; width: 64px; } .docente__board i:nth-child(2) { top: 34px; width: 48px; animation-delay: .4s; } .docente__board i:nth-child(3) { top: 48px; width: 56px; animation-delay: .8s; background: var(--terracota); }
.docente__board span { position: absolute; right: 12px; bottom: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--terracota); animation: pulse 2.4s infinite; }
@keyframes write { 0% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(0); opacity: 0; } }

/* ---------- Implementación: escalera de cinco niveles ---------- */
.impl { background: var(--arena-2); border-block: 1px solid var(--fibra); }
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: lv; }
.level { position: relative; overflow: hidden; display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center; padding: 22px 26px; border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena); opacity: .45; transform: translateX(-14px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .6s; }
.level.is-on { opacity: 1; transform: none; }
.level:nth-child(2) { margin-left: 3%; } .level:nth-child(3) { margin-left: 6%; } .level:nth-child(4) { margin-left: 9%; } .level:nth-child(5) { margin-left: 12%; }
.level__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--terracota); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .2s; }
.level.is-on .level__bar { transform: scaleY(1); }
.level__n { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--fibra); font: 500 22px/1 var(--serif); transition: background .6s var(--ease), color .6s, border-color .6s; }
.level.is-on .level__n { border-color: var(--tinta); }
.level.is-current .level__n { background: var(--terracota); border-color: var(--terracota); color: var(--arena); }
.level__body h3 { margin: 0 0 4px; font: 500 21px/1.25 var(--serif); letter-spacing: -.02em; }
.level__body p { margin: 0; color: var(--musgo); font-size: 16px; line-height: 1.5; }
.level__tag { padding: 6px 12px; border-radius: var(--r-pill); background: var(--tinta); color: var(--arena); font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.js .levels:not(.is-ready) .level { opacity: 1; transform: none; }

.rule { margin-top: 26px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; padding: clamp(26px, 3.4vw, 44px); border-radius: var(--r-card); background: var(--tinta); color: var(--arena); }
.rule__label { margin: 0 0 12px; font: 400 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #E0A27A; }
.rule .h3 { color: var(--arena); }
.rule .h3 em { color: #E0A27A; }
.rule__note { margin: 16px 0 0; font-size: 14px; color: #C9C6B9; }
.rule__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rule__list li { position: relative; padding: 12px 14px 12px 44px; border: 1px solid rgba(221, 211, 188, .2); border-radius: 14px; font-size: 15px; transition: border-color .5s, background .5s; }
.rule__list li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1.5px solid rgba(221, 211, 188, .4); transition: background .4s var(--ease), border-color .4s; }
.rule__list li::after { content: ""; position: absolute; left: 20px; top: 50%; width: 6px; height: 10px; margin-top: -7px; border: solid var(--arena); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .4s var(--ease) .1s; }
.rule__list li.is-checked { border-color: rgba(224, 162, 122, .5); background: rgba(246, 243, 236, .04); }
.rule__list li.is-checked::before { background: var(--terracota); border-color: var(--terracota); }
.rule__list li.is-checked::after { transform: rotate(45deg) scale(1); }

/* ---------- Proyecto y validación ---------- */
.phases { position: relative; margin-bottom: clamp(30px, 4vw, 50px); padding-top: 34px; }
.phases__line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 40px; }
.phases__line path { stroke: var(--terracota); stroke-width: 1.75; stroke-linecap: round; }
.phases__spark { position: absolute; top: 14px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 6px rgba(193, 101, 46, .15); animation: spark 9s ease-in-out infinite; }
@keyframes spark { 0% { left: 0; } 50% { left: calc(100% - 12px); } 100% { left: 0; } }
.phases__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.phases__list li { padding-top: 16px; border-top: 1px solid var(--fibra); font: 400 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--musgo); }
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vcard { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena-2); }
.vcard h3 { margin: 10px 0 0; font: 500 21px/1.25 var(--serif); letter-spacing: -.02em; }
.vcard p { margin: 0; color: var(--musgo); font-size: 16px; line-height: 1.55; flex: 1; }
.vcard__state { align-self: flex-start; padding: 5px 12px; border: 1px dashed var(--musgo); border-radius: var(--r-pill); font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.gauge { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 1.5px dashed var(--fibra); animation: spin 14s linear infinite; }
.gauge i { position: absolute; inset: 8px; border-radius: 50%; border: 1.75px solid transparent; border-top-color: var(--terracota); animation: spin 2.8s cubic-bezier(.6, .1, .4, .9) infinite reverse; }
.vcard:nth-child(2) .gauge i { animation-duration: 3.4s; } .vcard:nth-child(3) .gauge i { animation-duration: 2.4s; } .vcard:nth-child(4) .gauge i { animation-duration: 3.8s; }
.valid__note { margin: 24px 0 0; font-size: 14px; color: var(--musgo); font-style: italic; }

/* ---------- Por qué existe: el puente que falta ---------- */
.why { background: var(--arena); margin-bottom: 0; }
.why__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.why .h2 { margin-bottom: 22px; }
.bridge { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 26px; }
.bridge::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.75px; background: repeating-linear-gradient(180deg, var(--fibra) 0 6px, transparent 6px 12px); }
.bridge__item { position: relative; padding: 10px 18px; border: 1px solid var(--fibra); border-radius: var(--r-pill); background: var(--arena-2); font: 500 15px/1.2 var(--sans); animation: bridgeIn 6s var(--ease) infinite; }
.bridge__item::before { content: ""; position: absolute; left: -24px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--arena); border: 1.5px solid var(--musgo); }
.bridge__item:nth-child(2) { animation-delay: .3s; } .bridge__item:nth-child(3) { animation-delay: .6s; } .bridge__item:nth-child(4) { animation-delay: .9s; }
@keyframes bridgeIn { 0%, 100% { transform: none; } 10% { transform: translateX(6px); } 20% { transform: none; } }
.bridge__gap { position: relative; display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.bridge__gap i { position: absolute; left: -26px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--terracota); animation: pulse 2s infinite; }
.bridge__gap b { padding: 12px 20px; border-radius: var(--r-pill); background: var(--terracota); color: var(--arena); font: 700 16px/1.2 var(--sans); animation: gapGrow 3s ease-in-out infinite; }
@keyframes gapGrow { 50% { transform: scale(1.06); } }
.bridge__item--end { background: var(--tinta); color: var(--arena); border-color: var(--tinta); animation: none; }
.bridge__item--end::before { background: var(--tinta); border-color: var(--tinta); }

/* ---------- Instituciones: dos hilos que se trenzan ---------- */
.alliance { margin-top: 18px; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.4vw, 44px); border-radius: var(--r-card); background: var(--tinta); color: var(--arena); }
.alliance .ccard__tag { color: #E0A27A !important; margin: 0 0 10px; }
.alliance .h3 { color: var(--arena); margin-bottom: 10px; }
.alliance p { margin: 0; color: #C9C6B9; }
.alliance__braid { width: 100%; height: auto; }
.braid { stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 10 8; animation: flow 2.6s linear infinite; }
.braid--a { stroke: var(--terracota); }
.braid--b { stroke: var(--fibra); animation-direction: reverse; }
.braid__knot { fill: var(--arena); animation: knot 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.braid__knot:last-of-type { animation-delay: -1.5s; }
@keyframes knot { 50% { transform: scale(1.6); fill: #E0A27A; } }
.valid__closing { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 1100px) {
  .vgrid { grid-template-columns: 1fr 1fr; }
  .inside__grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .doors__grid, .topic, .rule { grid-template-columns: 1fr; }
  .about__grid, .why__grid, .alliance { grid-template-columns: 1fr; }
  .rings { max-width: 420px; }
  .level { grid-template-columns: 52px 1fr; }
  .level__tag { grid-column: 2; justify-self: start; }
  .level:nth-child(n) { margin-left: 0; }
  .tq:nth-child(n) { margin-left: 0; }
}
@media (max-width: 640px) {
  .about__title { font-size: clamp(32px, 9.6vw, 42px); overflow-wrap: break-word; }
  .vgrid, .rule__list { grid-template-columns: 1fr; }
  .phases__list { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .level { padding: 18px; gap: 14px; }
  .level__n { width: 46px; height: 46px; font-size: 19px; }
  .docente { grid-template-columns: 1fr; }
  .door__head { gap: 14px; }
}

/* i18n: suaviza el cambio de idioma */
[data-i18n] { transition: opacity .25s ease; }
.i18n-fading [data-i18n] { opacity: .15; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .never__grid { grid-template-columns: repeat(2, 1fr); }
  .ccards { grid-template-columns: 1fr 1fr; }
  .ccard--main { grid-column: 1 / -1; }
  .te-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .te-card, .te-card:nth-child(4), .te-card:nth-child(5) { grid-column: auto; }
  .te-card:last-child { grid-column: 1 / -1; width: calc((100% - 20px) / 2); justify-self: center; }
}
.nav a { white-space: nowrap; }
@media (max-width: 1100px) {
  .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 8px; padding: 100px var(--gutter) 40px; background: var(--arena); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
  .nav a { font: 500 clamp(34px, 9vw, 48px)/1.25 var(--serif); letter-spacing: -.03em; }
  .nav.is-open { opacity: 1; visibility: visible; }
  .burger { display: block; }
  .header__cta { display: none; }
}
@media (max-width: 960px) {
  .hero { padding-top: 120px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { margin-top: 20px; }
  .hero__thread { left: -10%; width: 120%; }
  .hero__ripples { right: auto; left: 50%; top: 72%; transform: translate(-50%, -50%); width: 130vmin; height: 130vmin; }
  .scroll-hint { display: none; }
  .mirror__grid { grid-template-columns: 1fr; }
  .mirror__panel { position: relative; top: 0; }
  .section__head, .te-heading { flex-direction: column; align-items: start; gap: 20px; }
  .steps__list { grid-template-columns: 1fr 1fr; }
  .steps__thread { display: none; }
  .example, .safety, .guarantee { grid-template-columns: 1fr; gap: 24px; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header__in { padding-block: 14px; gap: 10px; }
  .logo { font-size: 23px; }
  .lang button { padding: 6px 8px; }
  .hero__title { font-size: clamp(60px, 19vw, 90px); }
  .phone { width: min(100%, 320px); }
  .hero__actions .btn--primary { width: 100%; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
  .chip { font-size: 15px; padding: 11px 16px; }
  .convo { min-height: 320px; }
  .steps__list, .never__grid, .ccards, .pgrid { grid-template-columns: 1fr; }
  .step { padding: 22px; }
  .te-grid { grid-template-columns: 1fr; gap: 16px; }
  .te-card:last-child { grid-column: auto; width: 100%; }
  .hotline { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__grid { grid-template-columns: 1fr; }
  .final__title br { display: none; }
}

/* Solo se reducen los efectos más intrusivos (Windows activa reduced-motion por defecto) */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation-duration: 120s; }
  .phone { animation: none; }
}

/* ---------- Página de política de privacidad y seguridad ---------- */
.policy { padding-top: clamp(140px, 16vw, 190px); }
.policy__wrap { max-width: 760px; }
.policy__intro { max-width: none; margin: 18px 0 clamp(50px, 6vw, 80px); color: var(--musgo); }
.policy__section { margin-bottom: clamp(36px, 4.5vw, 52px); }
.policy__section h2 { margin-bottom: 14px; }
.policy__section p { margin: 0 0 12px; color: var(--musgo); }
.policy__section p:last-child { margin-bottom: 0; }
.policy__section--pending { padding: 20px 24px; border: 1px solid var(--fibra); border-radius: var(--r-card); background: var(--arena-2); }
.policy__section--pending h2 { color: var(--terracota-d); }