/* ========================================
   HOME.CSS — Home (referencia: supafeedback.com)
   Fondo blanco/slate, titulares sans en dos tonos,
   tarjetas grises con mini-interfaces, acento teal.
   El hero (gato -> tigre) usa hero.css sin cambios.
======================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --font-display: 'Audiowide', sans-serif;      /* solo el hero */
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --bg: #ffffff;
  --slate: #f8fafc;
  --wash: #f4f7f6;
  --wash-2: #edf1ef;
  --line: #e4eae8;
  --ink: #0c1513;
  --ink-2: #1f2a27;
  --body: #505d59;
  --muted: #7b8884;
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --mint: #e6f5f2;
  --mint-2: #b9efdf;
  --lime: #e4f89c;
  --lavender: #e3dcff;
  --sky: #d7e8fb;

  --wrap: 1216px;
  --pad-x: 3rem;
  --pad-x-sm: 1.25rem;
  --section-y: clamp(80px, 9vw, 128px);
  --r-card: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }

/* ── Tipografia ── */
.h1, .h2 { font-weight: 500; color: var(--ink); line-height: 1.04; }
.h1 { font-size: clamp(2.6rem, 4.6vw, 3.75rem); letter-spacing: -.04em; }
.h2 { font-size: clamp(2.1rem, 3.4vw, 2.75rem); letter-spacing: -.035em; }
.h1 .soft, .h2 .soft { color: var(--muted); }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--body); line-height: 1.65; max-width: 34rem; }
.label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.micro { font-size: .85rem; color: var(--muted); }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 48px; padding: 0 1.4rem; border-radius: 999px;
  font-size: .95rem; font-weight: 500; border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #c9d2cf; }
.btn-sm { height: 40px; padding: 0 1rem; font-size: .88rem; }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; } .d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ========================================
   NAV
======================================== */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0 max(var(--pad-x), calc((100vw - var(--wrap)) / 2 + var(--pad-x)));
  color: #fff; border-bottom: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s;
}
.site-nav.solid { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); border-color: var(--line); }
.site-nav .logo { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; }
.site-nav .logo img { height: 26px; width: auto; }
.site-nav .logo .logo-dark { display: none; }
.site-nav.solid .logo .logo-light, body.menu-open .site-nav .logo .logo-light { display: none; }
.site-nav.solid .logo .logo-dark, body.menu-open .site-nav .logo .logo-dark { display: block; }
.nav-links { display: flex; gap: 1.9rem; margin-right: auto; margin-left: 1.5rem; }
.nav-links a { font-size: .92rem; opacity: .8; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
.nav-right .nav-mail { font-size: .92rem; opacity: .85; }
.nav-cta { height: 40px; padding: 0 1rem; border-radius: 999px; display: inline-flex; align-items: center; font-size: .9rem; font-weight: 500; background: #fff; color: var(--ink); transition: background .3s, color .3s; }
.site-nav.solid .nav-cta { background: var(--ink); color: #fff; }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; color: inherit; }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile-menu { position: fixed; inset: 0; z-index: 99; background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 0 var(--pad-x-sm); opacity: 0; pointer-events: none; transition: opacity .3s; }
.nav-mobile-menu.open { opacity: 1; pointer-events: auto; }
.nav-mobile-menu a { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 500; letter-spacing: -.04em; color: var(--ink); }
.nav-mobile-menu a.btn { font-size: 1rem; letter-spacing: 0; margin-top: 1.5rem; width: fit-content; }
body.menu-open .site-nav { color: var(--ink); }

/* ========================================
   STRIP DE CLIENTES
======================================== */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; position: relative; z-index: 2; }
.strip-inner { display: flex; align-items: center; gap: 3rem; min-height: 104px; }
.strip-label { font-size: .85rem; color: var(--body); line-height: 1.5; max-width: 13rem; flex-shrink: 0; }
.marquee { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 4rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.client { display: flex; align-items: center; height: 64px; flex-shrink: 0; }
.client img { height: 100%; width: auto; max-width: 170px; object-fit: contain; opacity: .55; transition: opacity .25s; }
.client img:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ========================================
   INTRO (estilo hero de supafeedback)
======================================== */
.intro { background: #fff; }
.intro-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.announce {
  display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .8rem .3rem .3rem;
  border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--ink-2);
  margin-bottom: 1.6rem; background: #fff; transition: border-color .2s;
}
.announce:hover { border-color: #c9d2cf; }
.announce b { font-family: var(--font-mono); font-weight: 500; font-size: .68rem; background: var(--teal); color: #fff; padding: .2rem .5rem; border-radius: 999px; letter-spacing: .04em; }
.intro .h1 { margin-bottom: 1.4rem; }
.intro .lead { margin-bottom: 2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.1rem; }

.stage {
  position: relative; border-radius: 28px; min-height: 470px; padding: 2.2rem;
  background: linear-gradient(140deg, var(--mint) 0%, #cdeee6 45%, #9fdccd 100%);
  overflow: hidden;
}
.stage .win { position: absolute; left: 2.2rem; top: 2.6rem; width: 66%; }
.stage .agent { position: absolute; right: 1.6rem; top: 1.4rem; width: 46%; }
.stage .toast { position: absolute; left: 1.6rem; bottom: 1.6rem; }

/* Ventanas / mini UI compartidas */
.win { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(12, 21, 19, .35); }
.win-bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.win-bar i { width: 7px; height: 7px; border-radius: 50%; background: #dfe5e3; }
.win-url { margin-left: .7rem; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); border: 1px solid var(--line); padding: .15rem .55rem; border-radius: 6px; }
.win-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.sk { height: 9px; border-radius: 5px; background: var(--wash-2); }
.sk-dark { height: 30px; border-radius: 8px; background: var(--ink); margin-top: .4rem; }
.sk-box { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .45rem; }

.agent { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1rem; box-shadow: 0 24px 48px -26px rgba(12, 21, 19, .4); display: flex; flex-direction: column; gap: .5rem; }
.agent-head { display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 500; margin-bottom: .2rem; }
.agent-head i { width: 28px; height: 28px; border-radius: 9px; background: var(--teal); display: grid; place-items: center; color: #fff; font-style: normal; font-size: .75rem; font-weight: 600; }
.agent-head small { display: block; font-size: .66rem; color: var(--teal); font-weight: 400; }
.bubble { font-size: .74rem; line-height: 1.4; padding: .5rem .7rem; border-radius: 12px; max-width: 88%; }
.bubble.in { background: var(--wash); align-self: flex-start; border-top-left-radius: 4px; }
.bubble.out { background: var(--ink); color: #fff; align-self: flex-end; border-top-right-radius: 4px; }

.toast { display: inline-flex; align-items: center; gap: .6rem; background: var(--ink); color: #fff; font-size: .8rem; padding: .6rem 1rem .6rem .6rem; border-radius: 999px; box-shadow: 0 16px 30px -14px rgba(12, 21, 19, .5); }
.toast i { width: 22px; height: 22px; border-radius: 50%; background: #14b8a6; display: grid; place-items: center; }
.toast svg { width: 12px; height: 12px; }

.pill { font-size: .66rem; padding: .15rem .5rem; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.pill-teal { background: var(--mint); color: var(--teal-dark); }
.pill-gray { background: var(--wash-2); color: var(--body); }

/* ========================================
   SERVICIOS: frase grande + ver mas
======================================== */
.services { background: #fff; padding-top: 0; }
.ask {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 32px; padding: clamp(4rem, 9vw, 7.5rem) clamp(1.4rem, 5vw, 4rem);
  background: linear-gradient(160deg, var(--mint) 0%, #d6f1ea 45%, #a8e2d4 100%);
  display: flex; flex-direction: column; align-items: center;
}
.ask::before, .ask::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.ask::before { width: 420px; height: 420px; left: -140px; top: -180px; background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 65%); }
.ask::after { width: 520px; height: 520px; right: -200px; bottom: -260px; background: radial-gradient(circle, rgba(13, 148, 136, .22), transparent 65%); }
.ask > * { position: relative; }
.ask .label { margin-bottom: 1.8rem; font-size: clamp(.95rem, 1.3vw, 1.15rem); letter-spacing: .28em; font-weight: 500; color: var(--teal-dark); }
.ask-title {
  font-family: var(--font-body);
  font-weight: 600; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -.045em;
  color: var(--ink); max-width: 16ch; margin-bottom: 1.6rem;
}
.ask .lead { margin: 0 auto 2.4rem; max-width: 32rem; color: var(--ink-2); }
.ask .btn { height: 54px; padding: 0 1.8rem; font-size: 1rem; }
.ask .btn span { transition: transform .2s; }
.ask .btn:hover span { transform: translateX(3px); }

/* ========================================
   OFERTA: menos tiempo operativo
======================================== */
.offer { background: #fff; }
.offer-head { max-width: 62rem; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.offer-head .h1 { margin-bottom: 1.4rem; }
.offer-head .lead { margin-bottom: 2rem; }
.offer .announce { cursor: default; }
.circled { position: relative; display: inline-block; font-size: 1.35em; font-weight: 600; padding: 0 .12em; line-height: 1; }
.circled svg { position: absolute; left: -14%; top: -18%; width: 128%; height: 136%; overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: #dc2626; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .5s; }
.reveal.in .circled path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .circled path { stroke-dashoffset: 0; transition: none; } }

/* Infografia: dos escenarios */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.scene { border-radius: var(--r-card); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; overflow: hidden; }
.scene-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: relative; z-index: 2; }
.scene-cap { font-size: .92rem; color: var(--body); }
.pill-on { background: rgba(45, 212, 191, .14); color: #5eead4; }

/* — Caos — */
.scene-mess { background: var(--wash); }
.mess { position: relative; height: 400px; }
.m {
  position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r));
  box-shadow: 0 10px 24px -14px rgba(12, 21, 19, .45);
  animation: wobble 5s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes wobble { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) * -.4)) translateY(-4px); } }
.hand { font-family: 'Caveat', cursive; }

.notebook {
  width: 44%; padding: 1rem 1rem 1.2rem 1.6rem; border-radius: 6px; background: #fff;
  background-image: repeating-linear-gradient(transparent 0 25px, #dbe6f2 25px 26px);
  background-position: 0 38px; border-left: 3px solid #f3b7b7;
  display: flex; flex-direction: column; gap: 2px; font-family: 'Caveat', cursive; font-size: 1.2rem; line-height: 1.3; color: #2b3a8c;
}
.notebook b { font-size: 1.45rem; font-weight: 600; color: #1e2a6b; }
.notebook .ink { color: #9aa3c7; }
.sticky { width: 30%; padding: .8rem .9rem; font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.15; color: #3d3a1f; border-radius: 2px; }
.sticky.yellow { background: #fdf3a7; }
.sticky.pink { background: #fbd3e0; color: #4a2433; width: 26%; }
.call { display: flex; gap: .6rem; align-items: center; background: #fff; border-radius: 12px; padding: .55rem .8rem; font-size: .76rem; width: 38%; }
.call .x { width: 26px; height: 26px; border-radius: 50%; background: #fde2e2; color: #dc2626; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.call b { display: block; color: #dc2626; font-weight: 600; }
.call span { color: var(--muted); }
.chat { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 14px; padding: .6rem .8rem; font-size: .76rem; color: var(--body); line-height: 1.25; }
.chat .wa { width: 34px; height: 34px; border-radius: 50%; background: #25d366; display: grid; place-items: center; position: relative; }
.chat .wa svg { width: 18px; height: 18px; }
.chat .wa u { position: absolute; top: -6px; right: -8px; text-decoration: none; background: #dc2626; color: #fff; font-size: .62rem; font-weight: 700; padding: .05rem .35rem; border-radius: 999px; }
.receipt { width: 22%; background: #fff; padding: .7rem .7rem 1rem; font-size: .7rem; color: var(--body); display: flex; flex-direction: column; gap: .2rem; font-family: var(--font-mono);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) bottom / 12px 8px repeat-x; }
.receipt b { color: var(--ink); font-size: .74rem; }
.sheet-chip { background: #fff; border-radius: 8px; padding: .45rem .7rem; font-size: .7rem; font-family: var(--font-mono); border: 1px solid #cfe3d6; }
.sheet-chip b { display: block; font-weight: 500; color: #1d6b3b; }
.sheet-chip span { color: #dc2626; font-weight: 600; }
.clock { background: var(--ink); color: #fff; border-radius: 12px; padding: .55rem .8rem; font-size: .72rem; line-height: 1.3; }
.clock b { display: block; font-size: .95rem; font-weight: 500; }
.clock span { color: #a9b5b1; }

/* — Orden — */
.scene-order { background: var(--ink); color: #fff; }
.scene-order .label { color: #a9b5b1; }
.order {
  display: grid; grid-template-columns: 1fr 1fr .9fr; grid-template-rows: auto auto; gap: .7rem; height: 400px;
  grid-template-areas: "orders stock phone" "suppliers bot phone";
}
.o { background: #16201e; border: 1px solid #23302d; border-radius: 14px; padding: .85rem; display: flex; flex-direction: column; gap: .45rem; font-size: .74rem; color: #c6d1ce;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.compare.in .o { opacity: 1; transform: none; }
.compare.in .o:nth-child(2) { transition-delay: .1s; } .compare.in .o:nth-child(3) { transition-delay: .2s; }
.compare.in .o:nth-child(4) { transition-delay: .3s; } .compare.in .o:nth-child(5) { transition-delay: .4s; }
.o-orders { grid-area: orders; } .o-stock { grid-area: stock; } .o-phone { grid-area: phone; } .o-suppliers { grid-area: suppliers; } .o-bot { grid-area: bot; }
.o-h { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 500; color: #fff; margin-bottom: .15rem; }
.o-h svg { width: 15px; height: 15px; color: #5eead4; }
.o-row { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-top: 1px solid #23302d; }
.o-row em { font-style: normal; color: #a9b5b1; white-space: nowrap; }
.o-row em.ok { color: #5eead4; }
.o-bar { display: grid; gap: .25rem; }
.o-bar i { display: block; height: 6px; border-radius: 999px; background: #23302d; position: relative; overflow: hidden; }
.o-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #14b8a6, #5eead4); transition: width 1.2s var(--ease) .3s; }
.compare.in .o-bar i::after { width: var(--w); }
.o-phone { padding: .6rem; align-items: center; justify-content: center; }
.mini-phone { width: 100%; max-width: 150px; background: #fff; border: 5px solid #000; border-radius: 22px; padding: .6rem .45rem; display: flex; flex-direction: column; gap: .35rem; }
.mini-phone .notch { width: 36px; height: 4px; border-radius: 3px; background: var(--wash-2); margin: 0 auto .2rem; }
.nt { display: flex; gap: .4rem; align-items: center; background: var(--wash); border-radius: 9px; padding: .4rem; font-size: .58rem; line-height: 1.25; color: var(--body); }
.nt i { width: 16px; height: 16px; border-radius: 5px; background: var(--teal); flex-shrink: 0; }
.nt i.b { background: var(--ink); }
.nt b { display: block; color: var(--ink); font-weight: 500; font-size: .62rem; }
.bot-b { padding: .4rem .6rem; border-radius: 10px; max-width: 90%; line-height: 1.35; }
.bot-b.in { background: #23302d; align-self: flex-start; }
.bot-b.out { background: #fff; color: var(--ink); align-self: flex-end; }

.cmp-result { display: flex; align-items: baseline; gap: .9rem; border-top: 1px solid #23302d; padding-top: 1.1rem; }
.cmp-result b { font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: #fff; }
.cmp-result span { color: #a9b5b1; font-size: .95rem; max-width: 14rem; }

@media (max-width: 768px) {
  .mess { height: 420px; }
  .notebook { width: 58%; font-size: 1.05rem; }
  .sticky { width: 40%; font-size: 1.05rem; }
  .sticky.pink { width: 38%; }
  .call { width: 52%; }
  .receipt { width: 30%; left: 64%; top: 70%; }
  .call { left: 44%; }
  .hide-sm { display: none; }
  .order { height: auto; grid-template-columns: 1fr 1fr; grid-template-areas: "orders orders" "stock phone" "suppliers phone" "bot bot"; }
}
@media (prefers-reduced-motion: reduce) { .m { animation: none; } }

/* Pasos como camino serpenteante */
.snake { position: relative; margin: clamp(3rem, 5vw, 4.5rem) 64px 0; }
.snake-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.snake-line path { fill: none; stroke: url(#snakeGrad); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.65, 0, .35, 1) .2s; }
.snake.in .snake-line path { stroke-dashoffset: 0; }
.s-step { position: relative; height: 240px; display: flex; align-items: center; }
.s-node {
  position: absolute; top: 50%; width: 104px; height: 104px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 36px -18px rgba(12, 21, 19, .35), inset 0 -6px 12px rgba(12, 21, 19, .04);
  display: grid; place-items: center; color: var(--teal); z-index: 1;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.s-node svg { width: 40px; height: 40px; }
.s-left .s-node { left: 0; }
.s-right .s-node { left: 100%; }
.snake.in .s-node { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.snake.in .s-step:nth-of-type(2) .s-node { transition-delay: .8s; }
.snake.in .s-step:nth-of-type(3) .s-node { transition-delay: 1.5s; }
.snake.in .s-step:first-of-type .s-node { transition-delay: .2s; }
.s-text { max-width: 30rem; }
.s-left .s-text { margin-left: 120px; }
.s-right .s-text { margin-left: auto; margin-right: 120px; text-align: right; }
.s-text .label { color: var(--teal-dark); }
.s-text h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; margin: .5rem 0 .5rem; }
.s-text p { color: var(--body); font-size: .97rem; }
@media (max-width: 768px) {
  .snake { margin: 2.5rem 0 0; padding-left: 0; }
  .snake-line { display: none; }
  .snake::before { content: ''; position: absolute; left: 28px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(#5eead4, #0d9488); }
  .s-step { height: auto; padding: 0 0 2.2rem; align-items: flex-start; }
  .s-node { position: relative; top: auto; left: auto !important; width: 56px; height: 56px; flex-shrink: 0; transform: scale(.6); }
  .snake.in .s-node { transform: scale(1); }
  .s-node svg { width: 24px; height: 24px; }
  .s-left .s-text, .s-right .s-text { margin: .3rem 0 0 1rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .snake-line path { stroke-dashoffset: 0; transition: none; } .s-node { opacity: 1; transform: translate(-50%, -50%); } }

/* ========================================
   PRUEBA (cifras + carrusel de clientes)
======================================== */
.proof { background: var(--slate); border-top: 1px solid var(--line); overflow-x: clip; }
.proof-head { padding-top: var(--section-y); padding-bottom: clamp(2rem, 4vw, 3rem); }
.proof .strip { border-bottom: none; background: transparent; }
.proof .strip-inner { padding-block: 1.6rem; }
.proof .marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.proof .stats { border-bottom: none; }

/* ========================================
   QUIENES SOMOS
======================================== */
.about { background: #fff; border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.about-mark {
  background: var(--ink); border-radius: 28px; aspect-ratio: 1 / 1;
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.about-mark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 80% 10%, rgba(20, 184, 166, .28), transparent 70%), radial-gradient(50% 40% at 10% 95%, rgba(185, 239, 223, .16), transparent 70%);
}
.about-title { font-family: 'BBH Bogle', var(--font-body); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.05; color: var(--ink); }
.brand-shade { display: block; white-space: nowrap; font-family: 'Bungee Shade', var(--font-body); font-size: min(.92em, 8.6vw); letter-spacing: .02em; margin-top: .15em; }
.about-sub { display: block; margin-top: .7rem; font-family: var(--font-body); text-transform: none; font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; color: var(--muted); }
.about-rotator { margin-top: .4rem; }
.ar-stage { display: grid; }
.ar-text { grid-area: 1 / 1; max-width: 34rem; opacity: 0; pointer-events: none; transform-origin: top center; }
.ar-text.is-active { opacity: 1; pointer-events: auto; }
.ar-text.is-leaving { animation: venomOut 1.15s cubic-bezier(.55, 0, .45, 1) forwards; }
.ar-text.is-entering { animation: venomIn 1.1s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes venomOut {
  0% { opacity: 1; filter: blur(0); transform: none; }
  50% { opacity: 1; filter: blur(3.5px); transform: translateY(8px) scaleY(1.12); }
  100% { opacity: 0; filter: blur(9px); transform: translateY(26px) scaleY(1.35) scaleX(.94); }
}
@keyframes venomIn {
  0% { opacity: 0; filter: blur(9px); transform: translateY(-16px) scaleY(1.25); }
  45% { opacity: 1; filter: blur(3.5px); transform: translateY(-4px) scaleY(1.08); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.ar-stage.morphing { filter: url(#venom); }
.ar-dots { display: flex; gap: .5rem; margin-top: 1.6rem; }
.ar-dot { width: 26px; height: 6px; border-radius: 999px; border: 0; background: var(--wash-2); cursor: pointer; padding: 0; transition: background .3s, width .3s; }
.ar-dot.on { background: var(--ink); width: 44px; }
@media (prefers-reduced-motion: reduce) { .ar-text.is-leaving, .ar-text.is-entering { animation: none; } .ar-stage.morphing { filter: none; } }
.about-mark img { width: 52%; height: auto; position: relative; }
.values { list-style: none; display: flex; flex-direction: column; margin-top: 2rem; border-top: 1px solid var(--line); }
.values li { display: flex; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--body); font-size: .97rem; }
.values svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; margin-top: .25rem; }
.values b { color: var(--ink); font-weight: 500; }

/* ========================================
   CIFRAS
======================================== */

.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--slate); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.stats .wrap.stats-grid { padding-inline: 0; max-width: calc(var(--wrap) - 2 * var(--pad-x)); }
@media (max-width: 768px) { .stats .wrap.stats-grid { margin-inline: 0; max-width: none; } }
.stat { padding: 2.4rem 1.8rem; background: var(--slate); }
.stat b { display: block; font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .7rem; font-size: .92rem; color: var(--body); }
.stat b .count { display: inline; margin: 0; font-size: inherit; color: inherit; }
.stat b { font-family: 'Story Script', cursive; font-weight: 400; letter-spacing: 0; font-size: clamp(2.8rem, 4.2vw, 3.8rem); }
.stat span { font-family: 'Story Script', cursive; font-size: 1.15rem; line-height: 1.35; }
.stats .stat.reveal { transform: translateX(-70px); transition-duration: .9s; }
.stats .stat.reveal:nth-child(n+4) { transform: translateX(70px); }
.stats .stat.reveal.in { transform: none; }
@media (max-width: 768px) { .stats .stat.reveal:nth-child(odd) { transform: translateX(-50px); } .stats .stat.reveal:nth-child(even) { transform: translateX(50px); } .stats .stat.reveal.in { transform: none; } }
.proof-title { font-family: 'Young Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

/* ========================================
   PROCESO (tarjetas pastel)
======================================== */
.steps-title { font-family: 'Boogaloo', var(--font-body); font-weight: 400; letter-spacing: 0; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 1.02; }
.jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; perspective: 1400px; padding: 1rem 0 2rem; }
.job {
  --rx: 10deg; --ry: 0deg; --mx: 50%; --my: 0%; --lift: 0px;
  position: relative; border-radius: var(--r-card); padding: 1.6rem 1.6rem 0; min-height: 380px;
  display: flex; flex-direction: column; transform-style: preserve-3d; will-change: transform;
  transform: translateY(calc(40px - var(--lift))) rotateX(calc(var(--rx) + 25deg)) rotateY(var(--ry));
  opacity: 0;
  transition: transform .9s var(--ease), opacity .7s var(--ease), box-shadow .4s var(--ease);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 -2px 0 rgba(12, 21, 19, .06) inset,
    0 8px 0 var(--edge),
    0 22px 30px -12px rgba(12, 21, 19, .28),
    0 46px 70px -30px rgba(12, 21, 19, .35);
}
.jobs.in .job { opacity: 1; transform: translateY(calc(0px - var(--lift))) rotateX(var(--rx)) rotateY(var(--ry)); }
.jobs.in .job:nth-child(2) { transition-delay: .1s; } .jobs.in .job:nth-child(3) { transition-delay: .2s; } .jobs.in .job:nth-child(4) { transition-delay: .3s; }
.job.tilting { transition: transform .15s linear, opacity .7s var(--ease), box-shadow .4s var(--ease); transition-delay: 0s !important; }
.job:hover { --lift: 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(12, 21, 19, .06) inset, 0 8px 0 var(--edge), 0 34px 40px -14px rgba(12, 21, 19, .3), 0 70px 90px -34px rgba(12, 21, 19, .4); }
/* brillo que sigue al cursor */
.job::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 55%);
  opacity: .35; transition: opacity .3s; transform: translateZ(1px);
}
.job:hover::after { opacity: .8; }
/* capas a distinta profundidad */
.job .label { margin-bottom: .9rem; transform: translateZ(28px); }
.job h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; transform: translateZ(46px); }
.job-panel {
  margin-top: auto; background: #fff; border-radius: 16px 16px 0 0; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem; font-size: .8rem; color: var(--body);
  transform: translateZ(64px); box-shadow: 0 -10px 24px -14px rgba(12, 21, 19, .25);
}
.job-emoji { align-self: center; margin: auto 0; font-size: 4rem; line-height: 1; transform: translateZ(90px); filter: drop-shadow(0 14px 12px rgba(12, 21, 19, .25)); animation: emojiFloat 4s ease-in-out infinite; }
.job:nth-child(2) .job-emoji { animation-delay: -1s; } .job:nth-child(3) .job-emoji { animation-delay: -2s; } .job:nth-child(4) .job-emoji { animation-delay: -3s; }
@keyframes emojiFloat { 0%, 100% { transform: translateZ(90px) translateY(0) rotate(-4deg); } 50% { transform: translateZ(90px) translateY(-8px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .job-emoji { animation: none; } }
.job-panel div { display: flex; justify-content: space-between; gap: .5rem; }
.job-panel b { font-weight: 500; color: var(--ink); }
.bg-lime { background: linear-gradient(160deg, #eefcba, var(--lime) 60%); --edge: #bfd66a; }
.bg-lavender { background: linear-gradient(160deg, #efeaff, var(--lavender) 60%); --edge: #bdb1ef; }
.bg-mint { background: linear-gradient(160deg, #d6f7ec, var(--mint-2) 60%); --edge: #86d6bd; }
.bg-sky { background: linear-gradient(160deg, #e9f2fd, var(--sky) 60%); --edge: #a8c6ec; }
@media (prefers-reduced-motion: reduce) { .job, .jobs.in .job { transition: none; opacity: 1; transform: rotateX(8deg); } }
.ok { color: #5eead4; }
.o-bar { display: grid; gap: .25rem; }
.o-bar i { display: block; height: 6px; border-radius: 999px; background: #23302d; position: relative; overflow: hidden; }
.o-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #14b8a6, #5eead4); transition: width 1.2s var(--ease) .3s; }
.compare.in .o-bar i::after { width: var(--w); }
.o-phone { padding: .6rem; align-items: center; justify-content: center; }
.mini-phone { width: 100%; max-width: 150px; background: #fff; border: 5px solid #000; border-radius: 22px; padding: .6rem .45rem; display: flex; flex-direction: column; gap: .35rem; }
.mini-phone .notch { width: 36px; height: 4px; border-radius: 3px; background: var(--wash-2); margin: 0 auto .2rem; }
.nt { display: flex; gap: .4rem; align-items: center; background: var(--wash); border-radius: 9px; padding: .4rem; font-size: .58rem; line-height: 1.25; color: var(--body); }
.nt i { width: 16px; height: 16px; border-radius: 5px; background: var(--teal); flex-shrink: 0; }
.nt i.b { background: var(--ink); }
.nt b { display: block; color: var(--ink); font-weight: 500; font-size: .62rem; }
.bot-b { padding: .4rem .6rem; border-radius: 10px; max-width: 90%; line-height: 1.35; }
.bot-b.in { background: #23302d; align-self: flex-start; }
.bot-b.out { background: #fff; color: var(--ink); align-self: flex-end; }

.cmp-result { display: flex; align-items: baseline; gap: .9rem; border-top: 1px solid #23302d; padding-top: 1.1rem; }
.cmp-result b { font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: #fff; }
.cmp-result span { color: #a9b5b1; font-size: .95rem; max-width: 14rem; }

@media (max-width: 768px) {
  .mess { height: 420px; }
  .notebook { width: 58%; font-size: 1.05rem; }
  .sticky { width: 40%; font-size: 1.05rem; }
  .sticky.pink { width: 38%; }
  .call { width: 52%; }
  .receipt { width: 30%; left: 64%; top: 70%; }
  .call { left: 44%; }
  .hide-sm { display: none; }
  .order { height: auto; grid-template-columns: 1fr 1fr; grid-template-areas: "orders orders" "stock phone" "suppliers phone" "bot bot"; }
}
@media (prefers-reduced-motion: reduce) { .m { animation: none; } }

/* Pasos como camino serpenteante */
.snake { position: relative; margin: clamp(3rem, 5vw, 4.5rem) 64px 0; }
.snake-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.snake-line path { fill: none; stroke: url(#snakeGrad); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.65, 0, .35, 1) .2s; }
.snake.in .snake-line path { stroke-dashoffset: 0; }
.s-step { position: relative; height: 240px; display: flex; align-items: center; }
.s-node {
  position: absolute; top: 50%; width: 104px; height: 104px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 36px -18px rgba(12, 21, 19, .35), inset 0 -6px 12px rgba(12, 21, 19, .04);
  display: grid; place-items: center; color: var(--teal); z-index: 1;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.s-node svg { width: 40px; height: 40px; }
.s-left .s-node { left: 0; }
.s-right .s-node { left: 100%; }
.snake.in .s-node { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.snake.in .s-step:nth-of-type(2) .s-node { transition-delay: .8s; }
.snake.in .s-step:nth-of-type(3) .s-node { transition-delay: 1.5s; }
.snake.in .s-step:first-of-type .s-node { transition-delay: .2s; }
.s-text { max-width: 30rem; }
.s-left .s-text { margin-left: 120px; }
.s-right .s-text { margin-left: auto; margin-right: 120px; text-align: right; }
.s-text .label { color: var(--teal-dark); }
.s-text h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; margin: .5rem 0 .5rem; }
.s-text p { color: var(--body); font-size: .97rem; }
@media (max-width: 768px) {
  .snake { margin: 2.5rem 0 0; padding-left: 0; }
  .snake-line { display: none; }
  .snake::before { content: ''; position: absolute; left: 28px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(#5eead4, #0d9488); }
  .s-step { height: auto; padding: 0 0 2.2rem; align-items: flex-start; }
  .s-node { position: relative; top: auto; left: auto !important; width: 56px; height: 56px; flex-shrink: 0; transform: scale(.6); }
  .snake.in .s-node { transform: scale(1); }
  .s-node svg { width: 24px; height: 24px; }
  .s-left .s-text, .s-right .s-text { margin: .3rem 0 0 1rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .snake-line path { stroke-dashoffset: 0; transition: none; } .s-node { opacity: 1; transform: translate(-50%, -50%); } }

/* ========================================
   PRUEBA (cifras + carrusel de clientes)
======================================== */
.proof { background: var(--slate); border-top: 1px solid var(--line); overflow-x: clip; }
.proof-head { padding-top: var(--section-y); padding-bottom: clamp(2rem, 4vw, 3rem); }
.proof .strip { border-bottom: none; background: transparent; }
.proof .stats { border-bottom: none; }

/* ========================================
   QUIENES SOMOS
======================================== */
.about { background: #fff; border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.about-mark {
  background: var(--ink); border-radius: 28px; aspect-ratio: 1 / 1;
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.about-mark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 80% 10%, rgba(20, 184, 166, .28), transparent 70%), radial-gradient(50% 40% at 10% 95%, rgba(185, 239, 223, .16), transparent 70%);
}
.about-mark img { width: 52%; height: auto; position: relative; }
.values { list-style: none; display: flex; flex-direction: column; margin-top: 2rem; border-top: 1px solid var(--line); }
.values li { display: flex; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--body); font-size: .97rem; }
.values svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; margin-top: .25rem; }
.values b { color: var(--ink); font-weight: 500; }

/* ========================================
   CIFRAS
======================================== */

/* ========================================
   PROCESO (tarjetas pastel)
======================================== */
.jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.job { border-radius: var(--r-card); padding: 1.6rem 1.6rem 0; min-height: 380px; display: flex; flex-direction: column; overflow: hidden; }
.job .label { margin-bottom: .9rem; }
.job h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.job-panel { margin-top: auto; background: #fff; border-radius: 16px 16px 0 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .8rem; color: var(--body); }
.job-panel div { display: flex; justify-content: space-between; gap: .5rem; }
.job-panel b { font-weight: 500; color: var(--ink); }
.bg-lime { background: var(--lime); }
.bg-lavender { background: var(--lavender); }
.bg-mint { background: var(--mint-2); }
.bg-sky { background: var(--sky); }
.ok { color: var(--teal-dark); }
.wip { color: #6d5bd0; }

/* ========================================
   PROYECTOS
======================================== */
.work { background: #fff; }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); flex-wrap: wrap; }
.work-head .section-title { margin-bottom: 0; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.work-card { background: var(--wash); border-radius: var(--r-card); padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.work-shot { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.work-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; }
.work-cover { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 1.1rem; }
.work-cover strong { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.work-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 .3rem .2rem; }
.work-meta div { font-size: .92rem; font-weight: 500; }
.work-meta small { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }
.go { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, color .2s; }
.go svg { width: 12px; height: 12px; }
.work-card:hover .go { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ========================================
   FAQ
======================================== */
.faq { background: var(--wash); border-top: 1px solid var(--line); }
.faq { position: relative; overflow: hidden; }
.faq > .wrap { position: relative; z-index: 1; }
.faq-corner { position: absolute; width: clamp(150px, 20vw, 300px); height: auto; pointer-events: none; z-index: 0; color: var(--ink); }
.faq-corner.tl { top: 0; left: 0; }
.faq-corner.br { bottom: 0; right: 0; transform: rotate(180deg); }
.cn-fill, .cn-dot { fill: currentColor; }
.cn-line { fill: none; stroke: currentColor; stroke-width: 20; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1); }
.cn-dot { opacity: 0; transition: opacity .5s .9s; }
.faq.in-view .cn-line { stroke-dashoffset: 0; }
.faq.in-view .cn-dot { opacity: 1; }
@media (max-width: 768px) { .faq-corner { width: 110px; opacity: .9; } .faq-corner.tl { left: auto; right: 0; transform: scaleX(-1); } }
@media (prefers-reduced-motion: reduce) { .cn-line { stroke-dashoffset: 0; transition: none; } .cn-dot { opacity: 1; } }
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: start; }
.faq-side .micro { margin-top: 1.2rem; max-width: 18rem; }
.faq-side a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-list { border-top: 1px solid #dbe2df; }
.faq-item { border-bottom: 1px solid #dbe2df; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; font-size: 1.05rem; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.plus { width: 14px; height: 14px; position: relative; flex-shrink: 0; }
.plus::before, .plus::after { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; background: var(--muted); transform: translateY(-50%); transition: transform .3s var(--ease); }
.plus::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .plus::after { transform: translateY(-50%); }
.faq-item p { color: var(--body); padding-bottom: 1.3rem; max-width: 40rem; font-size: .97rem; }

/* ========================================
   CONTACTO (CTA final)
======================================== */
.contact { background: #fff; text-align: center; }
.contact .h1 { margin-bottom: 1.2rem; }
.contact-title { font-family: 'Anton', var(--font-body); font-weight: 400; font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: 1.04; letter-spacing: .005em; }
.contact .lead { margin: 0 auto 2.4rem; }
.contact-box {
  max-width: 760px; margin: 0 auto 14px; text-align: left; position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
  border: 1px solid #dfe6e3; border-radius: var(--r-card); overflow: hidden;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(12, 21, 19, .06),
    0 1px 0 #d3dcd9,
    0 2px 0 #cfd8d5,
    0 4px 0 #c9d3d0,
    0 6px 0 #c3cdca,
    0 8px 0 #bcc7c4,
    0 10px 2px rgba(12, 21, 19, .08),
    0 24px 30px -10px rgba(12, 21, 19, .22),
    0 50px 80px -30px rgba(12, 21, 19, .35);
}
.contact-form { padding: 1.6rem; display: flex; flex-direction: column; gap: .75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-input { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.contact-form .form-input { background: #f6f8f7; border-color: #dbe2df; box-shadow: inset 0 2px 4px rgba(12, 21, 19, .07), inset 0 1px 0 rgba(12, 21, 19, .04), 0 1px 0 #fff; }
.contact-form .form-input:focus { background: #fff; box-shadow: inset 0 2px 4px rgba(12, 21, 19, .05), 0 0 0 3px rgba(13, 148, 136, .14); }
.contact-form .btn-dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 #000, 0 10px 16px -6px rgba(12, 21, 19, .45); transform: translateY(-2px); transition: transform .12s, box-shadow .12s, background .2s; }
.contact-form .btn-dark:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 #000, 0 4px 8px -4px rgba(12, 21, 19, .4); }
.contact-direct { box-shadow: inset 0 1px 0 #fff; }
.form-input::placeholder { color: #9aa5a1; }
.form-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 148, 136, .12); }
textarea.form-input { min-height: 130px; resize: vertical; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-success { display: none; padding: .9rem 1rem; border-radius: 12px; background: var(--mint); color: var(--teal-dark); font-size: .92rem; }
.form-success.show { display: block; }
.contact-direct { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: var(--slate); }
.contact-direct a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.6rem; font-size: .92rem; transition: background .2s; }
.contact-direct a + a { border-left: 1px solid var(--line); }
.contact-direct a:hover { background: var(--wash); }
.contact-direct small { display: block; font-size: .75rem; color: var(--muted); }
.contact-direct svg { width: 16px; height: 16px; color: var(--muted); }

/* ========================================
   FOOTER
======================================== */
.site-footer { border-top: 1px solid var(--line); padding: 4rem 0 0; background: #fff; }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.f-social { display: flex; gap: .6rem; align-items: center; }
.f-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); transition: background .25s, color .25s, transform .25s; }
.f-social a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.f-social svg { width: 17px; height: 17px; }
.footer-brand .logo { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: .9rem; }
.footer-brand .logo img { height: 26px; }
.footer-brand p { color: var(--body); font-size: .92rem; max-width: 16rem; }
.footer-col h4 { font-size: .92rem; font-weight: 500; margin-bottom: 1rem; }
.footer-col a { display: block; width: fit-content; font-size: .92rem; color: var(--body); margin-bottom: .55rem; transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding: 1.6rem 0; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.footer-bottom a:hover { color: var(--ink); }

/* ========================================
   COOKIES
======================================== */
.cookie-banner { position: fixed; left: 1rem; bottom: 1rem; z-index: 9999; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(12, 21, 19, .35); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; transform: translateY(calc(100% + 2rem)); transition: transform .5s var(--ease); }
.cookie-banner.visible { transform: none; }
.cookie-banner-text { font-size: .85rem; color: var(--body); line-height: 1.55; }
.cookie-banner-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; gap: .5rem; }
.cookie-btn { height: 38px; padding: 0 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.cookie-btn-accept { background: var(--ink); color: #fff; }
.cookie-btn-decline { background: #fff; color: var(--body); border-color: var(--line); }

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .intro-grid, .about-grid { grid-template-columns: 1fr; }
  .about-mark { aspect-ratio: 16 / 9; }
  .about-mark img { width: 30%; }
  .jobs { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr auto; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 768px) {
  .wrap { padding-inline: var(--pad-x-sm); }
  .site-nav { padding: 0 var(--pad-x-sm); height: 64px; }
  .nav-right .nav-mail, .nav-right .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .strip-inner { flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 1.6rem; }
  .strip-label { max-width: none; }
  .marquee { width: 100%; }
  .stage { min-height: 400px; padding: 1.2rem; }
  .stage .win { left: 1.2rem; top: 1.4rem; width: 78%; }
  .stage .agent { right: 1rem; top: auto; bottom: 4.6rem; width: 68%; }
  .stage .toast { left: 1rem; bottom: 1rem; font-size: .72rem; }
  .jobs, .work-grid, .faq-grid, .compare { grid-template-columns: 1fr; }
  .about-mark img { width: 40%; }
  .job { min-height: 280px; --rx: 4deg; }
  .jobs { gap: 2rem; }
  .form-row, .contact-direct { grid-template-columns: 1fr; }
  .contact-direct a + a { border-left: none; border-top: 1px solid var(--line); }
  .cookie-banner { left: .75rem; right: .75rem; max-width: none; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}

[hidden] { display: none !important; }