/* =========================================================
   sethios · estudio de software — Guadalajara, MX
   Stylesheet
   ========================================================= */

/* ---------- design tokens (palma) ---------- */
:root{
  --bg: #F4F8F5;
  --bg-2: #E8F0EB;
  --card: #DCE9E0;
  --card-2: #CDE0D3;
  --ink: #0D2018;
  --ink-2: #3E6650;
  --ink-3: #6E9A80;
  --accent: #1E6B44;
  --accent-2: #155732;
  --accent-soft: #C8E6D3;
  --accent-glow: rgba(30,107,68,.28);
  --secondary: #2A8A58;
  --secondary-soft: #D4EDE0;
  --line: rgba(13,32,24,.10);
  --line-strong: rgba(13,32,24,.22);
  --on-accent: #F4F8F5;
  --on-ink: #F4F8F5;
  --cta-bg: #0D2018;
  --cta-fg: #F4F8F5;
  --shadow-1: 0 1px 2px rgba(13,32,24,.05), 0 8px 24px -12px rgba(13,32,24,.14);
  --shadow-2: 0 2px 4px rgba(13,32,24,.06), 0 30px 60px -24px rgba(13,32,24,.22);
  --radius: 20px;
  --radius-sm: 14px;
  --maxw: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x: hidden}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  position: relative;
}

/* ---------- ambient background (whole page — palma) ---------- */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -3;
  background:
    radial-gradient(60vw 55vw at 8% 6%,   rgba(30,107,68,.12)  0%, transparent 60%),
    radial-gradient(55vw 50vw at 94% 16%, rgba(42,138,88,.10)  0%, transparent 60%),
    radial-gradient(50vw 50vw at 75% 78%, rgba(21,87,50,.08)   0%, transparent 60%),
    radial-gradient(55vw 60vw at 16% 92%, rgba(200,230,211,.60) 0%, transparent 60%);
}
body::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -2;
  background:
    radial-gradient(45vw 45vw at 82% 8%,  rgba(30,107,68,.09)  0%, transparent 65%),
    radial-gradient(40vw 40vw at 8% 88%,  rgba(212,237,224,.45) 0%, transparent 65%);
}

::selection{background: var(--accent); color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px;border:2px solid var(--bg)}

a{color: inherit; text-decoration: none}
button{font: inherit; color: inherit; border:0; background:none; cursor:pointer}

/* iOS: prevent zoom-on-focus for form fields. iOS Safari zooms whenever a focused
   control reports a computed font-size < 16px. Keep these at 16px minimum, always. */
input, select, textarea, button{ font-size: 16px }
/* iOS: prevent double-tap zoom on taps, keep pinch zoom enabled for accessibility. */
a, button, [role="button"], .chip, .faq-item summary, .logo, .nav-cta{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

h1,h2,h3,h4{font-family:"Plus Jakarta Sans", system-ui, sans-serif; font-weight: 600; letter-spacing:-.02em; margin:0}
p{margin:0}

.accent{color: var(--accent)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.container{width:min(100% - 40px, var(--maxw)); margin-inline:auto}
@media (max-width: 640px){ .container{width:min(100% - 28px, var(--maxw))} }

.mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing:.18em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background: var(--ink-2); display:inline-block;
}

/* ---------- scroll progress ---------- */
.progress{
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.progress__bar{
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  will-change: transform;
}

/* ---------- navbar ---------- */
.nav{
  position: sticky; top:0; z-index: 60;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease), box-shadow .3s var(--ease);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.nav.scrolled{
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 4px 24px -12px rgba(24,20,17,.12);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 0;
  gap: 20px;
}
.logo{display:flex; align-items:center; gap:10px}
.logo svg{display:block; transition: transform .5s var(--ease-spring)}
.logo:hover svg{ transform: rotate(-12deg) scale(1.08) }
.logo .name{font-weight:600; font-size: 19px; letter-spacing:-.02em; transition: letter-spacing .4s var(--ease)}

.nav-links{
  display:flex; gap: 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-links a{
  position: relative;
  padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{ color: var(--ink) }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left }
@media (max-width: 820px){ .nav-links{ display:none } }

.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px; font-weight: 600;
  transform: translateY(0);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.nav-cta:hover{ background: var(--accent); transform: translateY(-1px) }
.nav-cta .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent-glow)}
  70%{box-shadow:0 0 0 8px rgba(30,107,68,0)}
  100%{box-shadow:0 0 0 0 rgba(30,107,68,0)}
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  padding: clamp(16px, 2.5vw, 40px) 0 clamp(60px, 8vw, 120px);
  overflow: clip;
  isolation: isolate;
}
/* keep sections transparent so the page-wide gradient shows through */
.hero, #logos, #counters, #servicios, #posibilidades, #proceso, #compara, #clientes, #porque, #cta, #precios, #faq{
  background: transparent;
}

.hero-bg{
  position:absolute; inset: -20% -10% -10% -10%;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
}
/* .hero-bg::before mesh removed — Sol uses clean blurred blobs only */
.hero-bg .blob{
  position:absolute;
  width: 55vw; height: 55vw;
  max-width: 780px; max-height: 780px;
  border-radius: 50%;
  /* parallax offsets set from JS; fall back a 0 */
  --px: 0px;
  --py: 0px;
  --sy: 0px; /* scroll parallax vertical */
  /* sin transition: el JS ya suaviza con lerp. Una transition encima
     causa "jelly" por doble amortiguación. */
}
.blob.b1{
  background: radial-gradient(circle at 30% 30%, rgba(30,107,68,.3) 0%, transparent 65%),
              rgba(200,230,211,.3);
  top:-10%; right:-10%;
  filter: blur(24px);
  transform: translate3d(var(--px), calc(var(--py) + var(--sy)), 0);
}
.blob.b2{
  width: 40vw; height: 40vw;
  max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at 40% 40%, rgba(21,87,50,.28) 0%, transparent 65%),
              rgba(200,230,211,.25);
  bottom:-18%; left:-8%;
  filter: blur(28px);
  transform: translate3d(var(--px), calc(var(--py) + var(--sy)), 0);
}
.blob.b3{
  width: 30vw; height: 30vw;
  max-width: 420px; max-height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(30,107,68,.22) 0%, transparent 65%),
              rgba(212,237,224,.35);
  top: 40%; left: 50%;
  /* preserva el centrado original (-50%, -30%) y suma el parallax */
  transform: translate3d(calc(-50% + var(--px)), calc(-30% + var(--py) + var(--sy)), 0);
  filter: blur(32px);
}

@keyframes heroMesh{
  from{ transform: translate3d(0,0,0) scale(1); filter: blur(50px) hue-rotate(0deg) }
  to  { transform: translate3d(-3vw, 2vw, 0) scale(1.08); filter: blur(58px) hue-rotate(-8deg) }
}
@keyframes blobDrift{
  from{ transform: translate3d(0,0,0) scale(1) }
  to  { transform: translate3d(-4vw, 3vw, 0) scale(1.1) }
}
.hero canvas#particles{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  padding-top: clamp(12px, 2vw, 28px);
  padding-bottom: clamp(20px, 4vw, 56px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero .meta{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-bottom: clamp(18px, 2.5vw, 36px);
  flex-wrap: wrap;
}
.hero .meta .loc{display:flex; align-items:center; gap:8px}
.hero .meta .loc .pin{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow: 0 0 0 4px rgba(30,107,68,.18);
}

.h1-line{
  font-size: clamp(40px, 7.5vw, 108px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
}
.h1-line .lead{ display:block; overflow:hidden }
.h1-line .lead > span{
  display:inline-block;
  transform: translateY(110%);
  animation: riseIn 1s var(--ease) .1s forwards;
}
.h1-line .trail{ display:block; overflow:hidden }
.h1-line:nth-of-type(2) .trail > span{
  display:inline-block;
  transform: translateY(110%);
  animation: riseIn 1s var(--ease) .3s forwards;
}
.h1-line:nth-of-type(3) .trail > span{
  display:inline-block;
  transform: translateY(110%);
  animation: riseIn 1s var(--ease) .5s forwards;
}
@keyframes riseIn{
  from{ transform: translateY(110%) }
  to  { transform: translateY(0) }
}

.hero-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 28px; flex-wrap: wrap;
  margin-top: clamp(30px, 5vw, 56px);
}
.hero-sub{
  max-width: 46ch; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px);
  opacity:0; transform: translateY(14px);
  animation: fadeUp .9s var(--ease) .9s forwards;
  font-weight: 400;
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(14px) }
  to  { opacity:1; transform: translateY(0) }
}

.btn-wa{
  position: relative;
  display:inline-flex; align-items:center; gap: 14px;
  padding: 18px 26px 18px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600; font-size: 16px; letter-spacing:.01em;
  box-shadow: var(--shadow-1);
  transform: translateY(0);
  transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.hero-foot .btn-wa{
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp .9s var(--ease) 1s forwards;
}
.btn-wa:hover{ background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 12px 28px -10px var(--accent-glow) }
.btn-wa .wa-icon{
  width: 28px; height: 28px; border-radius:50%;
  background:#fff; color: var(--accent);
  display:grid; place-items:center;
}
.btn-wa .arrow{
  display:inline-block; transition: transform .35s var(--ease);
}
.btn-wa:hover .arrow{ transform: translateX(4px) }

/* trust badges row */
.trust-row{
  display:flex; flex-wrap:wrap; gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
}
.trust-badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(44,24,16,.14);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  letter-spacing:.01em;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.trust-badge:hover{
  background: rgba(255,255,255,.55);
  border-color: var(--accent);
}
.trust-badge .tb-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.trust-badge.light{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.trust-badge.light .tb-dot{ background: var(--accent-soft) }

/* service chips — pill outline */
.hero-cats{
  display:flex; flex-wrap:wrap; gap: 10px;
  margin-top: clamp(24px, 3vw, 32px);
}
.chip{
  display:inline-flex; align-items:center;
  padding: 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--line-strong);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease-spring);
  cursor: default;
}
.chip:hover{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
  transform: translateY(-2px) scale(1.04);
}
/* staggered entry for chips */
.hero-cats .chip{
  opacity: 0;
  transform: translateY(10px);
  animation: chipIn .6s var(--ease) forwards;
}
.hero-cats .chip:nth-child(1){ animation-delay: 1.1s }
.hero-cats .chip:nth-child(2){ animation-delay: 1.2s }
.hero-cats .chip:nth-child(3){ animation-delay: 1.3s }
.hero-cats .chip:nth-child(4){ animation-delay: 1.4s }
@keyframes chipIn{
  from{ opacity:0; transform: translateY(10px) }
  to  { opacity:1; transform: translateY(0) }
}

/* hero — mobile tightening */
@media (max-width: 640px){
  .hero{ padding: 8px 0 48px }
  .hero-inner{ padding-top: 8px; padding-bottom: 12px }
  .hero .meta{ margin-bottom: 16px; gap: 10px }
  .hero .meta .loc{ font-size: 11px }
  .h1-line{ font-size: clamp(34px, 10vw, 48px); line-height: 1.05 }
  .hero-foot{ margin-top: 22px; gap: 18px }
  .hero-sub{ font-size: 14.5px }
  .btn-wa{ padding: 14px 20px 14px 16px; font-size: 14.5px; width: 100%; justify-content: center }
  .trust-row{ margin-top: 20px; gap: 8px }
  .trust-badge{ font-size: 11.5px; padding: 7px 12px }
  .hero-cats{ display: none }
  .cat{ font-size: 12.5px; padding: 8px 12px }
}

/* marquee strip */
.marquee{
  margin-top: clamp(40px, 6vw, 80px);
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  padding: 16px 0;
  overflow:hidden;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  position: relative;
}
.marquee::before,
.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width: 80px; z-index:2;
  pointer-events: none;
}
.marquee::before{ left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent) }
.marquee::after{ right: 0; background: linear-gradient(-90deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent) }
.marquee-track{
  display:flex; gap: 48px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  width: max-content;
}
.marquee-track span{
  font-family:"Plus Jakarta Sans", sans-serif; font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-2);
}
.marquee-track span .dot{ color: var(--accent); margin: 0 10px }
@keyframes scroll{ from{transform: translateX(0)} to{transform: translateX(-50%)} }

/* ---------- section helpers ---------- */
section{position: relative}

/* Mobile: tighter spacing between sections */
@media (max-width: 640px){
  #counters, #servicios, #posibilidades, #proceso,
  #precios, #clientes, #porque, #faq{
    padding-top: 36px;
    padding-bottom: 36px;
  }
  #cta{ margin: 22px 0 }
  .section-head{ margin-bottom: 26px; gap: 14px }
}

/* Section order (flex re-order without moving HTML blocks):
   hero → counters → servicios → posibilidades → proceso → clientes → precios → porque → cta → faq
   El <main> se convierte en flex column para usar `order`. */
main{ display: flex; flex-direction: column; }
.hero         { order: 1 }
#counters     { order: 2 }
#servicios    { order: 3 }
#posibilidades{ order: 4 }
#proceso      { order: 5 }
#clientes     { order: 6 }
#precios      { order: 7 }
#porque       { order: 8 }
#cta          { order: 9 }
#faq          { order: 10 }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 30px; margin-bottom: clamp(36px, 5vw, 72px);
  flex-wrap: wrap;
}
.section-title{
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing:-.03em;
  font-weight: 700;
  max-width: 18ch;
}

/* ---------- client logos ---------- */
#logos{ padding: clamp(60px, 7vw, 96px) 0 clamp(40px, 5vw, 60px) }
.logos-label{
  text-align:center;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing:.16em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.logos-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 14px 18px;
}
.logo-pill{
  min-width: 140px;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  display:grid; place-items:center;
  font-family:"JetBrains Mono", monospace;
  font-size: 13px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--ink-3);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.logo-pill:hover{ border-color: var(--accent); color: var(--accent) }

/* ---------- counters ---------- */
#counters{
  padding: clamp(40px, 5vw, 60px) 0 clamp(60px, 7vw, 96px);
}
.counters-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.counter{
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 8px;
}
.c-num{
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1;
}
.c-label{
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 900px){
  .counters-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 520px){
  .counters-grid{ grid-template-columns: 1fr }
}

/* ---------- servicios ---------- */
#servicios{ padding: clamp(48px, 8vw, 120px) 0 }
.svc-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}
.svc{
  position: relative;
  grid-column: span 4;
  padding: 34px 28px 30px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  isolation: isolate;
  min-height: 340px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.svc:hover{ transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-1) }
.svc .num{
  font-family:"JetBrains Mono", monospace;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
}
.svc .ico{
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--bg);
  display:grid; place-items:center;
  border: 1px solid var(--line);
  margin: 22px 0 28px;
  color: var(--ink);
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.svc:hover .ico{ transform: rotate(-6deg) scale(1.05); background: var(--accent-soft); border-color: var(--accent) }
.svc h3{
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing:-.02em;
  font-weight: 600;
  margin-bottom: 10px;
}
.svc p{color: var(--ink-2); font-size: 15px; line-height:1.55}
.svc .corner{
  position:absolute; right: 22px; top: 22px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; color: var(--ink-2); letter-spacing:.12em; text-transform: uppercase;
}

@media (max-width: 980px){
  .svc{ grid-column: span 12 }
}

/* ---------- posibilidades ---------- */
#posibilidades{
  padding: clamp(48px, 8vw, 120px) 0;
  background: transparent;
  position: relative;
}
.poss-head{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom: clamp(40px,5vw,72px) }

.poss-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.poss{
  grid-column: span 2;
  position: relative;
  padding: 28px 24px 26px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  aspect-ratio: 1/0.78;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  cursor: default;
  color: var(--ink);
}
.poss .ico-lg{
  width: 80px; height: 80px;
  display:grid; place-items:center;
  transition: transform .6s var(--ease);
}
.poss .ico-lg svg{ width:100%; height:100% }
.poss:hover{ background: var(--accent); border-color: var(--accent-2); color: #fff }
.poss:hover .ico-lg{ transform: translateY(-6px) rotate(-6deg) scale(1.08) }
.poss:hover h4, .poss:hover .num{ color: #fff }
.poss:hover .ico-lg svg [data-stroke]{ stroke: #fff }
.poss:hover .ico-lg svg [data-fill]{ fill: #fff }
.poss h4{
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600; letter-spacing:-.02em;
  transition: color .4s var(--ease);
}
.poss .num{
  font-family:"JetBrains Mono", monospace;
  font-size: 11px; letter-spacing:.14em;
  color: var(--ink-2);
  transition: color .4s var(--ease);
}
.poss::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.25), transparent 60%);
  opacity:0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.poss:hover::after{ opacity:1 }

@media (max-width: 900px){
  .poss-grid{ grid-template-columns: repeat(4, 1fr) }
  .poss{ grid-column: span 2 }
}
@media (max-width: 560px){
  .poss-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px }
  .poss{ grid-column: span 1; aspect-ratio: 1/1.1; padding: 22px 20px }
  .poss .ico-lg{ width: 60px; height: 60px }
}

/* ---------- proceso ---------- */
#proceso{ padding: clamp(48px, 8vw, 120px) 0 }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.step{
  position: relative;
  padding: 28px 24px 26px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 12px;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.step:hover{ border-color: var(--accent); transform: translateY(-4px) }
.step-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.step-num{
  font-family:"JetBrains Mono", monospace;
  font-size: 12px; letter-spacing:.14em;
  color: var(--accent); font-weight: 500;
  transform: scale(1);
}
.step-ico{
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-2);
  display:grid; place-items:center;
}
.step h4{
  font-size: 19px; font-weight: 600; letter-spacing:-.02em;
  color: var(--ink);
}
.step p{ color: var(--ink-2); font-size: 14.5px; line-height: 1.55 }
@media (max-width: 1020px){
  .steps{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 560px){
  .steps{ grid-template-columns: 1fr }
}

/* ---------- precios ---------- */
#precios{
  padding: clamp(48px, 8vw, 120px) 0;
}
.price-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.price-card{
  position: relative;
  padding: 36px 30px 32px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 18px;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.price-card:hover{ transform: translateY(-4px); border-color: var(--accent) }
.price-card.featured{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.price-card.featured .price-tier,
.price-card.featured .price-desc,
.price-card.featured .price-list li{ color: rgba(255,255,255,.82) }
.price-card.featured .amt{ color: #fff }
.price-card.featured .from,
.price-card.featured .cur{ color: rgba(255,255,255,.6) }
.price-badge{
  position:absolute; top: -12px; left: 24px;
  background: var(--accent);
  color:#fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.price-tier{
  font-family:"JetBrains Mono", monospace;
  font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.price-amount{
  display:flex; align-items:baseline; flex-wrap:wrap; gap: 8px;
}
.price-amount .from{
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.price-amount .amt{
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 700; letter-spacing: -.03em;
  color: var(--ink);
}
.price-amount .cur{
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.price-desc{ color: var(--ink-2); font-size: 15px; line-height: 1.5 }
.price-list{
  list-style:none; padding:0; margin: 0;
  display:flex; flex-direction:column; gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  flex: 1;
}
.price-list li{
  position: relative;
  padding-left: 24px;
}
.price-list li::before{
  content:""; position:absolute; left: 0; top: 7px;
  width: 14px; height: 9px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-card.featured .price-list li::before{
  border-color: var(--accent);
}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 14px; font-weight: 600;
  background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  margin-top: auto;
}
.btn-outline:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink) }
.btn-outline.accent{
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-outline.accent:hover{ background: var(--accent-2); border-color: var(--accent-2) }
.price-card.featured .btn-outline{ border-color: rgba(255,255,255,.35); color: #fff }
.price-card.featured .btn-outline:hover{ background: #fff; color: var(--ink) }
.price-card.featured .btn-outline.accent{ background: var(--accent); border-color: var(--accent) }
.price-card.featured .btn-outline.accent:hover{ background: #fff; color: var(--ink); border-color: #fff }
@media (max-width: 900px){
  .price-grid{ grid-template-columns: 1fr }
}

/* ---------- comparativa ---------- */
#compara{ padding: clamp(80px, 10vw, 140px) 0 }
.compare{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
}
.compare-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.compare-row:last-child{ border-bottom: 0 }
.compare-cell{
  padding: 20px 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  display:flex; align-items:center;
}
.compare-cell.compare-label{
  font-weight: 600; color: var(--ink);
  border-right: 1px solid var(--line);
}
.compare-cell.compare-generic{
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}
.compare-cell.compare-sethios{
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 500;
}
.compare-head .compare-cell{
  font-family:"JetBrains Mono", monospace;
  font-size: 12px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  padding: 18px 22px;
  background: var(--card-2);
}
.compare-head .compare-cell.compare-sethios{
  background: var(--accent); color: #fff;
}
.compare-head .compare-cell.compare-generic{
  background: var(--card-2);
}
@media (max-width: 720px){
  .compare-row{ grid-template-columns: 1fr }
  .compare-cell{ border-right: 0 !important }
  .compare-cell.compare-label{
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  .compare-head{ display:none }
  .compare-cell.compare-generic::before{ content: "Plantilla: "; font-weight: 600; color: var(--ink); margin-right: 6px }
  .compare-cell.compare-sethios::before{ content: "Sethios: "; font-weight: 600; margin-right: 6px }
}

/* ---------- clientes ---------- */
#clientes{ padding: clamp(48px, 8vw, 120px) 0 }
.cliente{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius);
  background: var(--card);
  border:1px solid var(--line);
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.cliente::before{
  content:""; position:absolute; right:-10%; top:-30%;
  width: 460px; height: 460px; border-radius:50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 60%);
  opacity: .5;
  z-index: 0;
}
.cliente > *{ position: relative; z-index: 1 }
.cliente .logo-box{
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--bg), var(--card-2));
  border:1px dashed var(--line-strong);
  display:grid; place-items:center;
  color: var(--ink-3);
  position: relative;
  overflow:hidden;
}
.cliente .logo-box.workflow-box{ color: var(--ink); background: linear-gradient(135deg, #FFF7FB, #FFE0EC 80%); border: 1px solid #FFD0E4 }
.workflow-svg{ width: 100%; height: 100%; display:block; overflow: visible }

/* =========================================================
   Yeha booking scene · 12s loop
   ---------------------------------------------------------
   Scene 1 · phone large (0 → 6.2s)
     0.0  idle / tap service card (Pilates Reformer)
     1.2  switch to teacher+time screen (hand to Sofía)
     2.2  tap time slot 18:00
     3.2  switch to confirm screen
     4.0  tap "Reservar clase"
     4.8  scene transition (shrink phone)
   Scene 2 · laptop large (6.2 → 12s)
     6.5  toast "Nueva reserva · María G." slides in
     7.2  new booking row highlights + counter ticks
     8.0  mouse moves to bar chart
     9.0  mouse moves to booking list
    10.0  mouse clicks new booking
    11.5  reset
   ========================================================= */

.yh-phone, .yh-laptop{
  transform-box: view-box;
  transform-origin: 0 0;
}

/* PHONE · position 50,30 big → 20,160 small */
.yh-phone{ animation: yhPhoneMove 12s cubic-bezier(.65,.05,.35,1) infinite }
@keyframes yhPhoneMove{
  0%,38%   { transform: translate(60px, 30px) scale(1.10) }
  44%      { transform: translate(55px, 80px) scale(.85) }
  50%,100% { transform: translate(6px, 178px) scale(.48) }
}

/* LAPTOP · position 230,80 small → 80,30 big */
.yh-laptop{ animation: yhLaptopMove 12s cubic-bezier(.65,.05,.35,1) infinite }
@keyframes yhLaptopMove{
  0%,38%   { transform: translate(238px, 92px) scale(.55) }
  44%      { transform: translate(180px, 70px) scale(.75) }
  50%,100% { transform: translate(80px, 30px) scale(1.05) }
}

/* screens inside phone */
.yh-screen{ opacity: 0 }
.yh-screen-a{ animation: yhScreenA 12s linear infinite }
.yh-screen-b{ animation: yhScreenB 12s linear infinite }
.yh-screen-c{ animation: yhScreenC 12s linear infinite }
@keyframes yhScreenA{ 0%,9%{opacity:1} 11%,100%{opacity:0} }
@keyframes yhScreenB{ 0%,9%{opacity:0} 11%,24%{opacity:1} 26%,100%{opacity:0} }
@keyframes yhScreenC{ 0%,24%{opacity:0} 26%,40%{opacity:1} 42%,100%{opacity:0} }

/* bottom CTA button pulses when selected */
.yh-cta{ transform-origin: 60px 180px; animation: yhCta 12s linear infinite }
@keyframes yhCta{
  0%,30%   { transform: scale(1); filter: brightness(1) }
  32%      { transform: scale(.94); filter: brightness(1.15) }
  34%,40%  { transform: scale(1); filter: brightness(1) }
  42%,100% { transform: scale(1); filter: brightness(1) }
}

/* highlight pilates reformer card when tapped */
.yh-card-1{ transform-origin: 60px 92px; animation: yhCardTap 12s linear infinite }
@keyframes yhCardTap{
  0%,6%   { transform: scale(1); filter: none }
  7%      { transform: scale(.97) }
  9%,100% { transform: scale(1) }
}

/* selected teacher ring */
.yh-t-1 circle:first-child{ animation: yhTeacherPick 12s linear infinite }
@keyframes yhTeacherPick{
  0%,14%   { stroke: transparent; stroke-width: 0 }
  16%,40%  { stroke: #EC4899; stroke-width: 2 }
  42%,100% { stroke: transparent; stroke-width: 0 }
}

/* selected time slot */
.yh-slot-4 rect{ animation: yhSlotPick 12s linear infinite }
.yh-slot-4 text{ animation: yhSlotText 12s linear infinite }
@keyframes yhSlotPick{
  0%,18%   { fill: #FFF7FB; stroke: #FFD0E4 }
  21%,40%  { fill: #EC4899; stroke: #EC4899 }
  42%,100% { fill: #FFF7FB; stroke: #FFD0E4 }
}
@keyframes yhSlotText{
  0%,18%   { fill: #2C1810 }
  21%,40%  { fill: #FFF7FB }
  42%,100% { fill: #2C1810 }
}

/* HAND · moves across phone UI */
.yh-hand{ transform-origin: 0 0; animation: yhHand 12s cubic-bezier(.55,.1,.3,1) infinite; opacity: 0 }
@keyframes yhHand{
  0%   { transform: translate(90px, 130px); opacity: 0 }
  3%   { opacity: 1 }
  6%   { transform: translate(60px, 92px) }     /* tap Pilates Reformer */
  8%   { transform: translate(62px, 94px) }
  12%  { transform: translate(25px, 92px) }     /* move to Sofía */
  14%  { transform: translate(27px, 94px) }
  18%  { transform: translate(25px, 160px) }    /* tap 18:00 slot */
  20%  { transform: translate(27px, 162px) }
  26%  { transform: translate(60px, 180px) }    /* tap Reservar */
  28%  { transform: translate(62px, 182px) }
  34%  { transform: translate(120px, 160px); opacity: 1 }
  38%  { opacity: 0 }
  100% { transform: translate(120px, 160px); opacity: 0 }
}
.yh-ripple{ animation: yhRipple 12s linear infinite }
@keyframes yhRipple{
  0%,6%    { r: 0; opacity: 0 }
  7%       { r: 2; opacity: .7 }
  9%       { r: 10; opacity: 0 }
  13%      { r: 0; opacity: 0 }
  14%      { r: 2; opacity: .7 }
  16%      { r: 10; opacity: 0 }
  19%      { r: 0; opacity: 0 }
  20%      { r: 2; opacity: .7 }
  22%      { r: 10; opacity: 0 }
  27%      { r: 0; opacity: 0 }
  28%      { r: 3; opacity: .8 }
  30%      { r: 14; opacity: 0 }
  100%     { r: 0; opacity: 0 }
}

/* wire between devices — during handoff */
.yh-wire{ animation: yhWire 12s linear infinite }
.yh-packet{ animation: yhPacket 12s linear infinite }
@keyframes yhWire{
  0%,40%   { opacity: 0 }
  42%,48%  { opacity: .6 }
  50%,100% { opacity: 0 }
}
@keyframes yhPacket{
  0%,40%   { opacity: 0 }
  42%      { opacity: 1 }
  50%      { opacity: 1 }
  52%,100% { opacity: 0 }
}

/* TOAST */
.yh-toast{ transform-origin: 150px 30px; opacity: 0; animation: yhToast 12s cubic-bezier(.34,1.56,.64,1) infinite }
@keyframes yhToast{
  0%,52%   { opacity: 0; transform: translate(30px, -10px) scale(.9) }
  54%      { opacity: 1; transform: translate(0,0) scale(1.04) }
  56%,78%  { opacity: 1; transform: translate(0,0) scale(1) }
  82%,100% { opacity: 0; transform: translate(30px, -6px) scale(.9) }
}

/* new booking row */
.yh-booking-new{ transform-origin: 25px 21px; animation: yhBookingNew 12s linear infinite }
.yh-booking-dot{ animation: yhBookingDot 12s ease-in-out infinite }
@keyframes yhBookingNew{
  0%,54%   { opacity: 0; transform: translateX(-4px) }
  58%      { opacity: 1; transform: translateX(0) }
  60%,96%  { opacity: 1; transform: translateX(0) }
  100%     { opacity: 0; transform: translateX(-4px) }
}
@keyframes yhBookingDot{
  0%,56%   { transform: scale(1); opacity: 0 }
  58%,90%  { opacity: 1 }
  60%      { transform: scale(1.6) }
  63%      { transform: scale(1) }
  72%      { transform: scale(1.6) }
  75%      { transform: scale(1) }
  100%     { opacity: 0; transform: scale(1) }
}

/* stat number counts up — via visibility swap using content swap is tricky;
   we emulate with a quick "pop" instead */
.yh-stat-bookings{ transform-origin: 55px 56px; animation: yhStatPop 12s linear infinite }
@keyframes yhStatPop{
  0%,56%   { transform: scale(1) }
  58%      { transform: scale(1.25); fill: #FF4F9A }
  62%,100% { transform: scale(1); fill: #EC4899 }
}

/* today bar jumps when booking arrives */
.yh-bar-today{ transform-origin: 48px 34px; animation: yhBarToday 12s linear infinite }
@keyframes yhBarToday{
  0%,56%   { transform: scaleY(.85) }
  60%,100% { transform: scaleY(1) }
}

/* MOUSE CURSOR */
.yh-cursor{ transform-origin: 0 0; animation: yhCursor 12s cubic-bezier(.45,.05,.3,1) infinite; opacity: 0 }
@keyframes yhCursor{
  0%,46%   { transform: translate(200px, 80px); opacity: 0 }
  50%      { transform: translate(180px, 70px); opacity: 1 }
  55%      { transform: translate(155px, 28px); opacity: 1 }     /* over toast */
  62%      { transform: translate(160px, 80px) }                 /* booking list new row */
  66%      { transform: translate(163px, 83px) }                 /* click */
  72%      { transform: translate(80px, 85px) }                  /* bar chart */
  76%      { transform: translate(95px, 72px) }                  /* today bar */
  84%      { transform: translate(70px, 50px) }                  /* bookings stat */
  90%      { transform: translate(70px, 50px); opacity: 1 }
  96%,100% { transform: translate(70px, 50px); opacity: 0 }
}

.cliente h3{
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 14px 0 6px;
}
.cliente .loc{ color: var(--ink-2); font-size: 14px; margin-bottom: 18px }
.cliente p{ font-size: 16px; line-height: 1.55; max-width: 46ch; color: var(--ink) }
.cliente .actions{ margin-top: 24px; display:flex; gap:12px; flex-wrap:wrap }
.cliente .actions--stacked{ flex-direction: column; align-items: flex-start; gap: 10px }
.actions--stacked .case-btn-primary,
.actions--stacked .case-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .25s, transform .3s var(--ease), background .25s, color .25s;
}
.actions--stacked .case-btn-primary {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}
.actions--stacked .case-btn-primary:hover {
  opacity: .85;
  transform: translateY(-2px);
}
.actions--stacked .case-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  font-size: 14px;
}
.actions--stacked .case-btn-secondary:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 820px){
  .cliente{ grid-template-columns: 1fr }
}

/* carrusel de casos — un negocio completo a la vez */
.case-carousel{
  position: relative;
  margin-bottom: 24px;
}
.case-track{ position: relative }
.case-slide{ display: none; margin-bottom: 0 }
.case-slide.is-active{
  display: grid;
  animation: caseIn .5s var(--ease) both;
}
@keyframes caseIn{
  from{ opacity: 0; transform: translateX(18px) }
  to  { opacity: 1; transform: translateX(0) }
}

/* testimonio anclado dentro del caso del negocio */
.case-quote{
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
  border-radius: 0 12px 12px 0;
}
.case-quote p{
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink); font-weight: 500;
  max-width: 46ch;
  margin: 0 0 12px;
}
.case-quote footer{ display:flex; align-items:center; gap: 12px }
.case-quote .testi-avatar{ width: 40px; height: 40px }
.case-quote.is-placeholder{ border-left-style: dashed; opacity: .85 }
.case-quote.is-placeholder p{ font-style: italic; color: var(--ink-2) }

.case-placeholder-box{
  display: grid !important; place-items: center;
  gap: 12px;
  color: var(--ink-2);
  background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, var(--card) 10px, var(--card) 20px) !important;
  border: 1px dashed var(--line-strong) !important;
}
.case-placeholder-box span{
  font-family: var(--font-mono, monospace);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}

.case-nav{
  position: absolute; top: 40%;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-spring);
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.case-prev{ left: -18px }
.case-next{ right: -18px }
.case-nav:hover{
  background: var(--accent); color: #fff; border-color: var(--accent);
  transform: translateY(-50%) scale(1.08);
}
.case-dots{
  display: flex; justify-content: center; gap: 10px;
  margin-top: 18px;
}
.case-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
  border: 0; padding: 0; cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.case-dot.is-active{ background: var(--accent); width: 26px; border-radius: 999px }
@media (max-width: 900px){
  .case-prev{ left: 6px }
  .case-next{ right: 6px }
  .case-nav{ width: 36px; height: 36px; top: 26%; }
}

/* legacy testimonial carousel (unused, kept inert) */
.testi-carousel{
  position: relative;
  margin-top: 28px;
  padding: clamp(24px, 3vw, 36px) clamp(48px, 6vw, 72px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display: none;
  grid-template-columns: 1fr;
  gap: 18px;
  overflow: hidden;
}
.testi-track{
  position: relative;
  min-height: 250px;
}
.testi-slide{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.testi-slide.is-active{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
.testi-slide .testi-quote{
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55;
  color: var(--ink); font-weight: 500;
  max-width: 62ch;
  position: relative;
  padding-left: 16px;
}
.testi-slide .testi-quote::before{
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px; background: var(--accent);
}
.testi-slide .testi-author{ display:flex; align-items:center; gap: 14px }
.testi-role{ display:block; font-size: 12.5px; color: var(--ink-2) }

/* business header inside slide — makes the testimonio belong to a specific negocio */
.testi-biz-head{
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.testi-biz-logo{
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), var(--secondary-soft));
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.testi-biz-logo.is-placeholder{
  color: var(--ink-2);
  background: var(--bg);
  border-style: dashed;
}
.testi-biz-meta{ display: flex; flex-direction: column; flex: 1; min-width: 0 }
.testi-biz-name{
  font-family: var(--font-display, inherit);
  font-weight: 700; font-size: 17px; color: var(--ink);
  line-height: 1.2;
}
.testi-biz-loc{
  font-family: var(--font-mono, monospace);
  font-size: 11.5px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 3px;
}
.testi-biz-tag{
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--accent); color: #fff;
  white-space: nowrap;
}
.testi-biz-tag.is-soon{
  background: transparent; color: var(--ink-2);
  border: 1px dashed var(--line-strong);
}
@media (max-width: 520px){
  .testi-biz-head{ flex-wrap: wrap; gap: 10px }
  .testi-biz-tag{ order: 3; margin-left: auto }
}

.testi-nav{
  position: absolute; top: 50%;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-spring);
  z-index: 2;
}
.testi-prev{ left: 10px }
.testi-next{ right: 10px }
.testi-nav:hover{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.06);
}
.testi-dots{
  display:flex; justify-content:center; gap: 8px;
  margin-top: 4px;
}
.testi-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  border: 0; padding: 0; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease-spring), width .3s var(--ease);
}
.testi-dot.is-active{
  background: var(--accent);
  width: 22px; border-radius: 999px;
}
@media (max-width: 640px){
  .testi-carousel{ padding: 20px 16px 18px }
  .testi-nav{ width: 32px; height: 32px }
  .testi-prev{ left: 6px } .testi-next{ right: 6px }
  .testi-track{ min-height: 320px }
}
.testi{
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 20px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.testi:hover{ border-color: var(--accent); transform: translateY(-3px) }
.testi-quote{
  font-size: 16px; line-height: 1.55; color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.testi-author{ display:flex; align-items:center; gap: 14px }
.testi-avatar{
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--secondary-soft));
  border: 1px dashed var(--line-strong);
  flex-shrink: 0;
}
.testi-name{ display:block; font-weight: 600; font-size: 14px; color: var(--ink) }
.testi-biz{ display:block; font-size: 12.5px; color: var(--ink-2) }
@media (max-width: 900px){
  .testi-grid{ grid-template-columns: 1fr }
}

/* ---------- por qué sethios ---------- */
#porque{
  padding: clamp(48px, 8vw, 120px) 0;
}
.reasons{
  display: flex;
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reason{
  flex: 1;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 2.5vw, 40px);
  position: relative;
  transition: background .4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  color: var(--ink);
}
.reason + .reason{ border-left: 1px solid var(--line) }
.reason::before{
  content:""; position:absolute; left:0; top:0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.reason:hover{ background: var(--card) }
.reason:hover::before{ transform: scaleX(1) }
.reason .idx{
  font-family:"JetBrains Mono", monospace;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
}
.reason .badge{
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg-2); border:1px solid var(--line);
  display:grid; place-items:center;
  position: relative;
  color: var(--ink);
}
.reason h4{
  font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing:-.02em;
  margin-top: 6px;
}
.reason p{ color: var(--ink-2); font-size: 15px; line-height: 1.55 }

@media (max-width: 820px){
  .reasons{ flex-direction: column; border-top: 0; border-bottom: 0 }
  .reason{ border-top: 1px solid var(--line); min-height: 0 }
  .reason + .reason{ border-left: 0 }
  .reason:last-child{ border-bottom: 1px solid var(--line) }
}

/* ---------- FAQ ---------- */
#faq{
  padding: clamp(48px, 8vw, 120px) 0;
}
.faq-list{
  display:flex; flex-direction:column; gap: 10px;
}
.faq-item{
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color .3s var(--ease);
}
.faq-item[open]{ border-color: var(--accent) }
.faq-item summary{
  list-style:none;
  cursor: pointer;
  padding: 22px 26px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px;
  font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-plus{
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq-plus::before, .faq-plus::after{
  content:""; position:absolute; inset:0; margin:auto;
  background: var(--accent);
  transition: transform .3s var(--ease);
}
.faq-plus::before{ width: 14px; height: 2px; top: 9px; left: 3px }
.faq-plus::after{ width: 2px; height: 14px; top: 3px; left: 9px }
.faq-item[open] .faq-plus::after{ transform: rotate(90deg) }
.faq-body{
  padding: 0 26px 22px;
  color: var(--ink-2);
  font-size: 15px; line-height: 1.6;
}

/* ---------- CTA final ---------- */
#cta{ margin: clamp(28px, 5vw, 72px) 0 }
.cta-card{
  position: relative;
  background: var(--cta-bg, #2C1810);
  color: var(--cta-fg, #fff);
  border-radius: clamp(24px, 3vw, 36px);
  padding: clamp(56px, 8vw, 120px) clamp(28px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
.cta-card::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 12% 20%, rgba(30,107,68,.5), transparent 60%),
    radial-gradient(500px 400px at 90% 110%, rgba(21,87,50,.4), transparent 60%);
  z-index: 0;
}
.cta-card > *{ position: relative; z-index: 1 }

.cta-card .huge{
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.02; letter-spacing:-.03em;
  font-weight: 700;
}
.cta-card .huge .under{ display:inline-block; position:relative; color: var(--accent) }
.cta-card .huge .under::after{
  content:""; position:absolute; left:0; right:0; bottom: .04em;
  height: .08em; background: rgba(30,107,68,.35);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease);
}
.cta-card.in .huge .under::after{ transform: scaleX(1) }

.cta-sub{
  margin-top: clamp(20px, 3vw, 28px);
  max-width: 48ch; font-size: 17px; color: rgba(255,255,255,.78);
  font-weight: 400;
}
.cta-foot{
  margin-top: clamp(32px, 4vw, 48px);
  display:flex; gap: 24px; align-items: center; flex-wrap:wrap;
}
.btn-wa-light{
  display:inline-flex; align-items:center; gap: 14px;
  padding: 18px 26px 18px 22px;
  border-radius: 999px;
  background: #fff; color: var(--ink);
  font-weight: 600; font-size: 16px;
  transition: transform .35s var(--ease), background .35s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}
.btn-wa-light:hover{ transform: translateY(-2px); background: var(--accent-soft) }
.btn-wa-light .wa-icon{
  width: 30px; height: 30px; border-radius:50%;
  background: var(--accent); color:#fff;
  display:grid; place-items:center;
}

.cta-note{ color: rgba(255,255,255,.65); font-size: 13.5px; max-width: 30ch }

.cta-trust{
  display:flex; flex-wrap:wrap; gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
}

/* orbiting decorative elements */
.orbit{
  position:absolute; pointer-events:none;
  width: 240px; height: 240px; border-radius:50%;
  border: 1px solid rgba(255,255,255,.18);
  z-index:0;
}
.orbit.o1, .orbit.o2{ animation-play-state: paused }
.cta-card.in .orbit.o1,
.cta-card.in .orbit.o2{ animation-play-state: running }
.orbit.o1{ right: -40px; top: -60px; animation: spin 40s linear infinite }
.orbit.o1::after{
  content:""; position:absolute; top: -6px; left: 50%;
  width: 10px; height: 10px; border-radius:50%; background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 22px var(--accent-glow);
}
.orbit.o2{ right: 60px; top: 40px; width: 360px; height: 360px; animation: spinR 60s linear infinite; border-style: dashed; opacity:.5 }
@keyframes spin{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
@keyframes spinR{ from{ transform: rotate(0deg) } to{ transform: rotate(-360deg) } }

/* ---------- footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 40px 0 36px;
  color: var(--ink-2);
  font-size: 13px;
}
.foot{
  display:flex; justify-content:space-between; align-items:center; gap: 20px; flex-wrap: wrap;
}
.foot .links{ display:flex; gap: 22px }
.foot .links a:hover{ color: var(--ink) }

/* ---------- reveal utility ---------- */
/* GPU-only: anima opacity + transform. Cubic decelerate para entradas. */
.reveal{
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity .7s cubic-bezier(0.22, 1, 0.36, 1),
    transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal.done{
  transition: none;
  transform: none;
}

/* elementos ya visibles al cargar la página: animan con un pequeño delay
   para que se vean aparecer sin "parpadeo" */
.reveal.instant{
  opacity: 1;
  transform: none;
}

/* stagger real — perceptible pero sin bloquear la lectura */
.reveal.delay-1{ transition-delay: .08s }
.reveal.delay-2{ transition-delay: .16s }
.reveal.delay-3{ transition-delay: .24s }
.reveal.delay-4{ transition-delay: .32s }
.reveal.delay-5{ transition-delay: .40s }
.reveal.delay-6{ transition-delay: .48s }
.reveal.instant[class*="delay-"]{ transition-delay: 0s }

/* ---------- slow-internet progressive loading ---------- */
/* Elements start as shimmering skeletons, then "load" with a flicker when revealed */
.reveal.slow{
  opacity: 1;
  transform: none;
  position: relative;
  color: transparent !important;
  background: linear-gradient(110deg,
      var(--card) 8%,
      var(--card-2) 18%,
      var(--card) 33%) !important;
  background-size: 200% 100% !important;
  animation: skelShimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
  overflow: hidden;
  pointer-events: none;
  box-shadow: none !important;
  border-color: transparent !important;
}
.reveal.slow *{
  visibility: hidden !important;
}
.reveal.slow::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: skelSweep 1.4s ease-in-out infinite;
}
@keyframes skelShimmer{
  from{ background-position: 200% 0 }
  to  { background-position: -200% 0 }
}
@keyframes skelSweep{
  from{ transform: translateX(-100%) }
  to  { transform: translateX(100%) }
}
/* when finishing load: flicker in */
.reveal.loaded{
  animation: netFlicker .55s var(--ease) both;
}
@keyframes netFlicker{
  0%   { opacity: 0; filter: blur(6px); transform: translateY(6px) }
  35%  { opacity: .5; filter: blur(2px) }
  55%  { opacity: .2 }
  75%  { opacity: .95; filter: blur(0) }
  100% { opacity: 1; transform: none }
}

/* ---------- extra animations across the page ---------- */

/* section title accent — color sólido, sin animación de gradiente */
.section-title .accent,
.h1-line .accent{
  color: var(--accent);
}

/* logo pills wiggle on hover row */
.logo-pill{ transition: transform .4s var(--ease-spring), border-color .3s var(--ease), color .3s var(--ease) }
.logo-pill:hover{ transform: translateY(-4px) rotate(-1.5deg) }

/* trust badge tick — estático */

/* marquee hover pause */
.marquee:hover .marquee-track{ animation-play-state: paused }

/* faq summary hover slide */
.faq-item summary{ transition: background .3s var(--ease), padding-left .3s var(--ease) }
.faq-item summary:hover{ background: rgba(30,107,68,.06); padding-left: 32px }

/* price card shimmer on hover — el clip lo hace el propio ::after
   via border-radius, no con overflow:hidden en el card, para que el
   box-shadow glow del hover pueda salirse de los bordes sin recorte. */
.price-card{ position: relative }
.price-card::after{
  content:""; position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 40%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1.1s var(--ease), opacity .3s var(--ease);
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
.price-card:hover::after{ transform: translateX(100%); opacity: 1 }

/* reveal: small directional variants */
.reveal-left{ opacity:0; transform: translate3d(-40px,0,0); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.reveal-right{ opacity:0; transform: translate3d(40px,0,0); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .9s var(--ease), transform .9s var(--ease-spring) }
.reveal-left.in, .reveal-right.in, .reveal-scale.in{ opacity:1; transform: none }

/* reveal: variante para cards en grid — entran con escala sutil */
.reveal-card{
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.96);
  transition: opacity .9s var(--ease), transform .9s var(--ease-spring);
}
.reveal-card.in{ opacity: 1; transform: translate3d(0,0,0) scale(1) }

/* btn-wa: anillo estático suave (sin loop) */
.btn-wa::after{
  content:""; position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--accent-glow);
  pointer-events: none;
  transition: box-shadow .4s var(--ease);
}
.btn-wa:hover::after{ box-shadow: 0 0 0 6px rgba(30,107,68,.18) }

/* poss card tilt base bump */
.poss .num{ transition: letter-spacing .4s var(--ease) }
.poss:hover .num{ letter-spacing: .22em }

/* scroll-top hint: hero subtle down arrow */
@keyframes bob{
  0%,100%{ transform: translateY(0); opacity:.5 }
  50%   { transform: translateY(6px); opacity:1 }
}

/* =========================================================
   Extra animation layer — polish pass
   ========================================================= */

/* nav links: underline sweep on hover */
.nav-links a{ position: relative }
.nav-links a::after{
  content:""; position:absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease-spring);
}
.nav-links a:hover::after{ transform: scaleX(1) }

/* logo: gentle rotate on hover */
.logo:hover svg{ transform: rotate(-8deg) scale(1.06) }
.logo .name{ transition: letter-spacing .4s var(--ease) }
.logo:hover .name{ letter-spacing: .04em }

/* WhatsApp icon wiggle on button hover */
@keyframes waWiggle{
  0%,100%{ transform: rotate(0) }
  25%    { transform: rotate(-14deg) }
  55%    { transform: rotate(10deg) }
  80%    { transform: rotate(-4deg) }
}
.btn-wa:hover .wa-icon,
.btn-wa-light:hover .wa-icon{
  animation: waWiggle .7s var(--ease-spring);
}

/* Arrow in CTA buttons slides on hover */
.btn-wa .arrow,
.btn-outline span[aria-hidden="true"],
.btn-ghost span[aria-hidden="true"],
.btn-wa-light span[aria-hidden="true"]{
  display:inline-block;
  transition: transform .35s var(--ease-spring);
}
.btn-wa:hover .arrow,
.btn-outline:hover span[aria-hidden="true"],
.btn-ghost:hover span[aria-hidden="true"],
.btn-wa-light:hover span[aria-hidden="true"]{
  transform: translateX(6px);
}

/* price cards: lift + subtle theme-aware glow only on hover */
.price-card{
  transition: transform .5s var(--ease-spring), border-color .4s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 0 0 0 transparent;
}
.price-card:hover{
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 16px 40px -24px var(--accent-glow),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.price-card.featured{ position: relative }
.price-card.featured::after{
  content:""; position:absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events:none;
  transition: transform 1.1s var(--ease);
  -webkit-mask-image: radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
.price-card.featured:hover::after{ transform: translateX(120%) }

/* logo pills: subtle pop + warm tint on hover */
.logo-pill{ position: relative; overflow: hidden }
.logo-pill::before{
  content:""; position:absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events:none;
}
.logo-pill:hover{ transform: translateY(-3px) scale(1.03); border-color: var(--accent); color: var(--ink) }
.logo-pill:hover::before{ opacity: 1 }

/* testimonial avatar: pop sólo en hover */
.testi-avatar{ transition: transform .4s var(--ease-spring) }
.testi:hover .testi-avatar{ transform: scale(1.08) }

.compare-cell.compare-sethios{ transition: background .4s var(--ease) }
.compare-row:hover .compare-cell.compare-sethios{ background: var(--accent); color: #fff }
.compare-row:hover .compare-cell{ color: var(--ink) }

/* FAQ: smooth open with rotating plus */
.faq-item{ transition: border-color .3s var(--ease) }
.faq-item:hover{ border-color: var(--accent) }
.faq-plus{
  display:inline-block; position: relative; width: 14px; height: 14px;
  transition: transform .4s var(--ease-spring);
}
.faq-plus::before,
.faq-plus::after{
  content:""; position:absolute; background: var(--ink);
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.faq-plus::before{ left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%) }
.faq-plus::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%) }
.faq-item[open] .faq-plus{ transform: rotate(180deg) }
.faq-item[open] .faq-plus::after{ transform: translateX(-50%) scaleY(0) }
.faq-item[open] .faq-plus::before{ background: var(--accent) }
.faq-body{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), padding .4s var(--ease);
}
.faq-item[open] .faq-body{
  /* tope alto de seguridad. El JS fija px exactos via scrollHeight;
     este valor solo entra si el inline-style se limpia (post-transition)
     y alguna FAQ futura tiene contenido muy largo. */
  max-height: 1200px;
  opacity: 1;
}

/* step cards: connector line draw-in */
.step{ position: relative; transition: transform .4s var(--ease-spring), border-color .4s var(--ease) }
.step:hover{ transform: translateY(-4px); border-color: var(--accent) }
.step-num{
  display:inline-block;
  transition: color .4s var(--ease), transform .4s var(--ease-spring);
}
.step:hover .step-num{ color: var(--accent); transform: scale(1.08) }

/* section title accent underline grows in when revealed */
.section-title .accent{ position: relative; display: inline-block }
.section-title .accent::after{
  content:""; position:absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease) .3s;
}
.reveal.in .section-title .accent::after,
.in .section-title .accent::after{ transform: scaleX(1) }

/* service cards: icon swings, title color shift */
.svc{ transition: transform .5s var(--ease-spring), border-color .4s var(--ease), box-shadow .5s var(--ease) }
.svc:hover{ transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 44px -22px rgba(24,20,17,.16) }
.svc .ico{ transition: transform .5s var(--ease-spring), color .4s var(--ease) }
.svc:hover .ico{ transform: rotate(-6deg) scale(1.08); color: var(--accent) }
.svc h3{ transition: color .3s var(--ease) }
.svc:hover h3{ color: var(--accent) }

/* reason cards: badge pops on hover */
.reason{ transition: transform .4s var(--ease-spring), border-color .4s var(--ease) }
.reason:hover{ transform: translateY(-4px); border-color: var(--accent) }
.reason .badge{ transition: transform .4s var(--ease-spring) }
.reason:hover .badge{ transform: scale(1.12) rotate(6deg) }

/* counters: underline sweep on enter */
.counter{ position: relative }
.counter::after{
  content:""; position:absolute; left: 0; bottom: -6px;
  width: 40px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--ease) .2s;
}
.counter.in::after{ transform: scaleX(1) }

/* trust badge hover */
.trust-badge{ transition: transform .3s var(--ease-spring), border-color .3s var(--ease), color .3s var(--ease) }
.trust-badge:hover{ transform: translateY(-2px); border-color: var(--accent); color: var(--accent) }

/* chips pulse border on hover */
.chip{ position: relative }
.chip::after{
  content:""; position:absolute; inset: -2px;
  border-radius: inherit; border: 2px solid var(--accent);
  opacity: 0; transform: scale(.96);
  transition: opacity .4s var(--ease), transform .4s var(--ease-spring);
  pointer-events: none;
}
.chip:hover::after{ opacity: .75; transform: scale(1.07) }
/* doble contorno en hover (desktop) — segundo anillo más externo */
.chip::before{
  content:""; position:absolute; inset: -6px;
  border-radius: inherit; border: 1px solid var(--accent);
  opacity: 0; transform: scale(.94);
  transition: opacity .45s var(--ease), transform .45s var(--ease-spring);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  .chip:hover::before{ opacity: .35; transform: scale(1.02) }
}

.cta-card{ box-shadow: 0 30px 80px -20px rgba(30,107,68,.4) }

/* marquee pause on hover */
.marquee:hover .marquee-track{ animation-play-state: paused }

/* poss cards: icon wiggle on enter */
@keyframes icoPop{
  0%  { transform: scale(.6) rotate(-8deg); opacity: 0 }
  60% { transform: scale(1.08) rotate(3deg); opacity: 1 }
  100%{ transform: scale(1) rotate(0); opacity: 1 }
}

/* hero WhatsApp ring-out intensification on hover */
.btn-wa:hover::after{ animation-duration: 1.2s }

/* =========================================================
   Scroll "peek" — activa brevemente el estado hover de una
   card al entrar al viewport. La clase .peek la añade JS tras
   el reveal y se remueve ~1.1s después, dejando la card en
   reposo pero con la sensación de que "respira" al aparecer.

   El truco: no repetir los estilos de :hover, sino aplicarlos
   vía animaciones que vuelven solas al estado base — así el
   cursor real sigue pudiendo disparar :hover después.
   ========================================================= */

/* ---------- POSS cards ---------- */
@keyframes possPeekBg{
  0%   { background: var(--card); border-color: var(--line); }
  35%  { background: var(--accent); border-color: var(--accent-2); }
  70%  { background: var(--accent); border-color: var(--accent-2); }
  100% { background: var(--card); border-color: var(--line); }
}
@keyframes possPeekIco{
  0%   { transform: translateY(0) rotate(0) scale(1); }
  45%  { transform: translateY(-8px) rotate(-10deg) scale(1.12); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes possPeekSweep{
  0%   { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
  40%  { opacity: .7; }
  100% { opacity: 0; transform: translateX(120%) skewX(-14deg); }
}
@keyframes possPeekInk{
  0%, 100% { color: var(--ink); }
  35%, 70% { color: #fff; }
}
@keyframes possPeekInkMuted{
  0%, 100% { color: var(--ink-2); letter-spacing: .14em; }
  35%, 70% { color: #fff; letter-spacing: .22em; }
}
@keyframes possPeekStroke{
  0%, 100% { stroke: currentColor; }
  35%, 70% { stroke: #fff; }
}
@keyframes possPeekFill{
  0%, 100% { fill: var(--accent); }
  35%, 70% { fill: #fff; }
}
.poss.peek{
  animation: possPeekBg 1.1s var(--ease) both;
}
.poss.peek .ico-lg{
  animation: possPeekIco 1.1s var(--ease-spring) both;
}
.poss.peek h4{
  animation: possPeekInk 1.1s var(--ease) both;
}
.poss.peek .num{
  animation: possPeekInkMuted 1.1s var(--ease) both;
}
.poss.peek .ico-lg svg [data-stroke]{
  animation: possPeekStroke 1.1s var(--ease) both;
}
.poss.peek .ico-lg svg [data-fill]{
  animation: possPeekFill 1.1s var(--ease) both;
}
/* barrido de luz diagonal durante el peek — hint visual de "toca aquí" */
.poss{ isolation: isolate }
.poss::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(255,255,255,.55) 50%,
    transparent 80%);
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.poss.peek::before{
  animation: possPeekSweep 1.1s cubic-bezier(.4,0,.2,1) both;
}

/* ---------- SVC (servicios) cards ----------
   Enfoque nuevo: en lugar de keyframes que vuelven al estado base, aplicamos
   las propiedades "hover" directamente en `.svc.peek` y las dejamos por X ms;
   la vuelta al estado base la hace la `transition` base del `.svc`. Así
   evitamos el bug donde Chrome/Safari "optimizan" keyframes cuyos 0% y 100%
   coinciden con el estado computado actual y saltan la animación.

   JS remueve la clase `.peek` a los 1100ms → la transition hace el return
   suavemente, misma sensación de "auto-hover" pero garantizada.
*/
.svc.peek{
  transform: translateY(-10px) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 22px 50px -18px rgba(30,107,68,.45),
    0 0 0 3px rgba(30,107,68,.18) !important;
}
.svc.peek .ico{
  transform: rotate(-14deg) scale(1.18) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.svc.peek .ico svg [stroke]{ stroke: #fff !important; }
.svc.peek .ico svg [fill]:not([fill="none"]){ fill: #fff !important; }
.svc.peek h3{ color: var(--accent) !important; }
.svc.peek .num{ letter-spacing: .22em !important; }
/* barrido de luz — este SÍ va como animation porque el delta es 100% claro
   (empieza fuera de la card, termina fuera) */
@keyframes svcPeekSweep{
  0%   { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
  40%  { opacity: .8; }
  100% { opacity: 0; transform: translateX(120%) skewX(-14deg); }
}
.svc{ isolation: isolate }
.svc::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(255,255,255,.55) 50%,
    transparent 80%);
  mix-blend-mode: overlay;
  opacity: 0; pointer-events: none;
  z-index: 0;
}
.svc.peek::before{ animation: svcPeekSweep 1.1s cubic-bezier(.4,0,.2,1) both; }
/* aseguramos que la transition del `.svc` base cubra todas las props que
   anima el peek — así el return se ve suave en vez de snap */
.svc{
  transition:
    transform .5s var(--ease-spring),
    border-color .4s var(--ease),
    box-shadow .5s var(--ease),
    background .4s var(--ease);
}
.svc .ico{
  transition:
    transform .5s var(--ease-spring),
    background .4s var(--ease),
    border-color .4s var(--ease),
    color .4s var(--ease);
}
.svc h3{ transition: color .4s var(--ease); }
.svc .num{ transition: letter-spacing .4s var(--ease); }

/* ---------- PRICE cards peek ---------- */
.price-card.peek{
  transform: translateY(-8px) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 22px 50px -18px var(--accent-glow),
    0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
.price-card.peek .price-tier{ color: var(--accent) !important; }
.price-card{ isolation: isolate; }
.price-card.peek::before{
  content:""; position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb, #fff 55%, transparent) 50%,
    transparent 80%);
  mix-blend-mode: overlay;
  opacity: 0; pointer-events: none; z-index: 0;
  animation: svcPeekSweep 1.1s cubic-bezier(.4,0,.2,1) both;
}

/* ---------- STEP cards peek ---------- */
.step.peek{
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 18px 40px -18px var(--accent-glow),
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.step.peek .step-num{ color: var(--accent) !important; transform: scale(1.1) !important; }

/* ---------- TESTI cards peek ---------- */
.testi.peek{
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 18px 40px -18px var(--accent-glow),
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.testi.peek .testi-avatar{ transform: scale(1.12) !important; }

/* ---------- COUNTER peek ---------- */
.counter.peek .c-num{
  color: var(--accent) !important;
  transform: scale(1.04) !important;
  letter-spacing: -.02em !important;
}
.counter .c-num{ transition: color .5s var(--ease), transform .5s var(--ease-spring), letter-spacing .5s var(--ease); display:inline-block; }

/* ---------- FAQ peek ---------- */
.faq-item.peek{
  border-color: var(--accent) !important;
  box-shadow:
    0 12px 28px -18px var(--accent-glow),
    0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

/* ---------- CLIENTE peek ---------- */
.cliente.peek{
  border-color: var(--accent) !important;
  box-shadow:
    0 26px 60px -20px var(--accent-glow),
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  transform: translateY(-4px) !important;
}

.price-card,
.step,
.testi,
.faq-item,
.cliente,
.counter{
  transition:
    transform .5s var(--ease-spring),
    border-color .4s var(--ease),
    box-shadow .5s var(--ease),
    background .4s var(--ease);
}

/* ---------- REASON cards ---------- */
.reason.peek{
  transform: translateY(-6px) !important;
  background: var(--card) !important;
  /* borde via box-shadow inset porque .reason base no tiene border */
  box-shadow: inset 0 2px 0 0 var(--accent), inset 0 0 0 1px var(--accent-soft, rgba(30,107,68,.2)) !important;
}
.reason.peek .badge{
  transform: scale(1.22) rotate(-6deg) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.reason.peek .badge svg [stroke]{ stroke: #fff !important; }
.reason.peek .idx{
  transform: scale(1.2) !important;
  letter-spacing: .22em !important;
}
.reason.peek h4{ color: var(--accent) !important; }
.reason.peek::before{ transform: scaleX(1) !important; }
.reason{
  transition:
    transform .4s var(--ease-spring),
    background .4s var(--ease),
    box-shadow .4s var(--ease);
}
.reason .badge{
  transition:
    transform .4s var(--ease-spring),
    background .4s var(--ease),
    border-color .4s var(--ease),
    color .4s var(--ease);
}
.reason .idx{
  transition: transform .4s var(--ease-spring), letter-spacing .4s var(--ease);
  display: inline-block;
}
.reason h4{ transition: color .4s var(--ease); }

/* ---------- SVG stroke draw al entrar al viewport ----------
   Los iconos de .poss dibujan sus trazos al aparecer via keyframes.
   Usamos animation (no transition) porque animation dispara de forma
   confiable al cambiar animation-name, incluso en navegadores que
   batchean estilos de forma agresiva (causa del bug histórico donde
   animaciones no aparecían en ciertos dispositivos).

   Además: NO ocultamos los SVG en estado base. Si JS falla o la card
   nunca recibe .in, el SVG se ve normal. La animación solo "redibuja"
   desde dashoffset al estado final. */
@keyframes possDrawStroke{
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}
@keyframes possPopFill{
  0%   { opacity: 0; transform: scale(.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.poss.in .ico-lg svg [data-stroke]{
  stroke-dasharray: 240;
  animation: possDrawStroke 1.1s cubic-bezier(.22,1,.36,1) .15s both;
}
.poss.in .ico-lg svg [data-fill]{
  transform-box: fill-box;
  transform-origin: center;
  animation: possPopFill .65s var(--ease-spring) .75s both;
}
/* nota: NO forzamos `animation: none` en .done — eso resetearía el
   keyframe a mitad y haría que el stroke-draw desaparezca en cards
   que entran "visibles al cargar" (donde .done llega ~700ms tras .in
   pero la animación del stroke dura ~1250ms). Dejamos que la animación
   termine sola; el fill-mode: both mantiene el estado final. */

/* ---------- Respeto por prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .poss.peek,
  .poss.peek .ico-lg,
  .poss.peek h4,
  .poss.peek .num,
  .poss.peek .ico-lg svg [data-stroke],
  .poss.peek .ico-lg svg [data-fill],
  .poss.peek::before,
  .svc.peek, .svc.peek .ico, .svc.peek h3, .svc.peek .num, .svc.peek::before, .svc.peek .ico svg [stroke],
  .reason.peek, .reason.peek .badge, .reason.peek .idx, .reason.peek::before{
    animation: none !important;
  }
  .poss .ico-lg svg [data-stroke]{
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .poss .ico-lg svg [data-fill]{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   SITE PREVIEW MODAL
   ========================================================= */
.site-modal{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.site-modal[hidden]{ display: none }
.site-modal.is-open .site-modal__backdrop{
  animation: fadeIn .2s ease forwards;
}
.site-modal.is-open .site-modal__window{
  animation: slideUp .25s cubic-bezier(.22,.68,0,1.2) forwards;
}

.site-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
}
.site-modal__window{
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px;
  height: min(90vh, 780px);
  background: var(--surf-2, #1a1a1a);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
  opacity: 0;
}
.site-modal__bar{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surf-1, #111);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  flex-shrink: 0;
}
.site-modal__url{
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--ink-2, #999);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-modal__close{
  background: none; border: none; cursor: pointer;
  color: var(--ink-2, #999);
  padding: 4px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.site-modal__close:hover{
  color: var(--ink, #fff);
  background: var(--surf-2, rgba(255,255,255,.08));
}
.site-modal__iframe{
  flex: 1; width: 100%; border: none;
}

/* closing animation */
.site-modal.is-closing .site-modal__backdrop{
  animation: fadeOut .18s ease forwards;
}
.site-modal.is-closing .site-modal__window{
  animation: slideDown .18s ease forwards;
}

@keyframes fadeIn  { from{ opacity:0 } to{ opacity:1 } }
@keyframes fadeOut { from{ opacity:1 } to{ opacity:0 } }
@keyframes slideUp {
  from{ opacity:0; transform: translateY(24px) scale(.97) }
  to  { opacity:1; transform: translateY(0) scale(1) }
}
@keyframes slideDown {
  from{ opacity:1; transform: translateY(0) scale(1) }
  to  { opacity:0; transform: translateY(16px) scale(.97) }
}

@media (max-width: 600px){
  .site-modal{ padding: 8px }
  .site-modal__window{ height: 92vh; border-radius: 12px }
}

/* =========================================================
   Peek OFF — neutralizamos cualquier resaltado al entrar al
   viewport. Solo dejamos el reveal (fade + rise) del contenedor
   y un leve movimiento interno del contenido.
   ========================================================= */
.poss.peek,
.svc.peek,
.price-card.peek,
.step.peek,
.testi.peek,
.counter.peek,
.faq-item.peek,
.cliente.peek,
.reason.peek{
  animation: none !important;
  transform: none !important;
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.poss.peek::before,
.svc.peek::before,
.price-card.peek::before,
.reason.peek::before{ animation: none !important; opacity: 0 !important; }
.svc.peek .ico,
.reason.peek .badge{
  transform: none !important;
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: inherit !important;
}
.svc.peek h3,
.reason.peek h4,
.price-card.peek .price-tier,
.counter.peek .c-num{ color: inherit !important; }
.svc.peek .num,
.reason.peek .idx{ letter-spacing: .14em !important; transform: none !important; }

/* =========================================================
   Micro-movimiento del contenido al entrar a la vista.
   Las cartas (.reveal) hacen el fade+rise del contenedor; el
   contenido interno hace un pequeño "settle" escalonado.
   ========================================================= */
@keyframes contentRise{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes iconPop{
  0%   { opacity: 0; transform: translateY(6px) scale(.92); }
  60%  { transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal.in .ico,
.reveal.in .ico-lg,
.reveal.in .badge,
.reveal.in .step-ico{
  animation: iconPop .6s cubic-bezier(.22,1,.36,1) .12s both;
}
.reveal.in h3,
.reveal.in h4,
.reveal.in .price-tier,
.reveal.in .step-num,
.reveal.in .num,
.reveal.in .idx{
  animation: contentRise .5s cubic-bezier(.22,1,.36,1) .18s both;
}
.reveal.in p,
.reveal.in .price-list,
.reveal.in .price-amount,
.reveal.in .c-num,
.reveal.in .c-label{
  animation: contentRise .5s cubic-bezier(.22,1,.36,1) .26s both;
}

@media (prefers-reduced-motion: reduce){
  .reveal.in .ico,
  .reveal.in .ico-lg,
  .reveal.in .badge,
  .reveal.in .step-ico,
  .reveal.in h3,
  .reveal.in h4,
  .reveal.in p,
  .reveal.in .price-tier,
  .reveal.in .price-list,
  .reveal.in .price-amount,
  .reveal.in .step-num,
  .reveal.in .num,
  .reveal.in .idx,
  .reveal.in .c-num,
  .reveal.in .c-label{ animation: none !important; }
}