/* ============================================================
   SOFTDINAMIC — sistema visual
   Base oscura sobria, un solo acento azul. Sin degradados de marca,
   sin cuadrículas ni neón. Manrope (títulos) + Inter (texto).
   ============================================================ */

:root {
  --bg: #0a0c12;
  --bg-2: #0d1017;
  --panel: #141824;
  --panel-2: #191e2c;

  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);

  --accent: #5b8cff;
  --accent-dk: #4471e8;
  --accent-lt: #8fb0ff;
  --accent-soft: rgba(91, 140, 255, 0.11);

  --tx: #eceef4;
  --tx-dim: #a2a9ba;
  --tx-mute: #727a8d;

  /* El fondo claro va un escalón más oscuro que el blanco de las tarjetas:
     antes eran casi iguales (#f5f6f9 contra #fff) y las tarjetas no se veían. */
  --paper: #e3e7ef;
  --paper-2: #d9dee8;
  --paper-ink: #11141c;
  --paper-tx: #4a5263;
  --paper-line: rgba(17, 20, 28, 0.13);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 18px 44px -22px rgba(0, 0, 0, 0.75);

  --wrap: 1140px;
  --hdr-h: 70px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx-dim);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0125rem;
  line-height: 1.68;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  color: var(--tx);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 3.5rem); letter-spacing: -0.034em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Tamaño mínimo de cualquier objetivo táctil (Fitts). */
:root { --tap: 44px; }

/* ───────────── SALTAR AL CONTENIDO ───────────── */
.skip {
  position: fixed;
  top: .6rem; left: .6rem;
  z-index: 300;
  padding: .7rem 1rem;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip:focus { transform: none; }

/* ───────────── PROGRESO ───────────── */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  opacity: .8;
  z-index: 120;
  transition: width .12s linear;
}

/* ───────────── HEADER ─────────────
   Cápsula de vidrio flotando arriba (Jakob: logo a la izquierda, menú y acción a la derecha). */
.hdr {
  position: fixed;
  top: 10px; left: 0; right: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
/* El vidrio de la barra lleva un tinte oscuro: así el logo y el menú se leen
   igual sobre las secciones oscuras y sobre las claras. */
.hdr__inner.glass {
  background: linear-gradient(135deg, rgba(22, 26, 38, .72), rgba(12, 15, 23, .58));
}
.hdr__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 58px;
  /* 7 px alrededor del botón (58 − 44 = 14): queda concéntrico con la cápsula */
  padding: 0 7px 0 1.25rem;
  border-radius: 999px;
}

/* Logo SoftDinamic (el de Lucas, sin el monograma): Montserrat extra gruesa inclinada,
   "Soft" claro y "Dinamic" en el naranja del logo. Es texto real: vectorial y sin fondo. */
/* El logo es el archivo de Canva, no texto con fuente. La versión para fondo oscuro
   ("Soft" en blanco) es la que va en la web; la de fondo claro queda para imprenta.
   Arriba va solo la marca, porque el lockup con la bajada no entra en 58 px de alto;
   en el pie va el completo. */
.logo { display: inline-flex; align-items: center; margin-right: auto; line-height: 0; }
.logo__img { display: block; height: 1.45rem; width: auto; }
.logo--sm .logo__img { height: 2.5rem; }

.burger { display: none; }

/* ───────────── VIDRIO LÍQUIDO (estilo iPhone) ─────────────
   Vidrio que deja ver lo de atrás desenfocado y saturado, con un canto
   brillante arriba-izquierda y sombra abajo-derecha. Siempre va DETRÁS del
   texto: nunca se deforma ni se desenfoca lo que hay que leer. */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .38),
    inset -1px -1px 0 rgba(255, 255, 255, .08),
    inset 0 0 18px rgba(255, 255, 255, .05),
    0 10px 30px -12px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ───────────── SELECTOR CON GOTA ─────────────
   La gota es una pastilla de vidrio que va DEBAJO del texto: brillo arriba,
   canto claro y sombra suave, sin filtros que deformen ni desenfoquen las letras.
   Al moverse, el borde que va adelante corre rápido y el de atrás llega tarde:
   se estira y se vuelve a juntar como una gota (clases .go-right / .go-left). */
.seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  isolation: isolate;
}
.seg > a, .seg > button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.05rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 500;
  color: var(--tx-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s ease;
}
.seg > a:hover, .seg > button:hover, .seg > .is-under { color: #fff; }
.seg__drop {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  left: var(--l, 3px);
  right: var(--r, 100%);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  /* Una sola pastilla: degradado parejo y un borde fino. Antes tenía además una
     sombra negra por fuera que, sobre fondo oscuro, no se leía como sombra sino como
     una mancha redonda detrás de la gota. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .085));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: left .42s cubic-bezier(.3,1.35,.5,1), right .42s cubic-bezier(.3,1.35,.5,1), opacity .25s ease;
}
/* Reflejo de arriba. Se apaga en transparente y sigue la forma de la pastilla: antes
   cortaba con un borde duro a media altura y parecía una segunda capa adentro. */
.seg__drop::after {
  content: '';
  position: absolute;
  inset: 1px 1px auto;
  height: 58%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}
.seg.has-drop .seg__drop { opacity: 1; }
.seg.go-right .seg__drop { transition: right .24s cubic-bezier(.3,1.3,.5,1), left .52s cubic-bezier(.3,1.2,.5,1) .05s, opacity .25s ease; }
.seg.go-left .seg__drop { transition: left .24s cubic-bezier(.3,1.3,.5,1), right .52s cubic-bezier(.3,1.2,.5,1) .05s, opacity .25s ease; }

/* El WhatsApp de la barra se esconde mientras se ve el botón grande del inicio:
   nunca dos botones iguales en pantalla (Hick). */
.hdr__cta,
.btn.hdr__cta {              /* .btn llega después en la hoja y con la misma fuerza:
                                sin esto le pisaba el redondeo y el botón quedaba
                                cuadrado adentro de la cápsula de la barra. */
  border-radius: 999px;
  max-width: 220px;
  white-space: nowrap;
  transition: max-width .45s cubic-bezier(.22,1,.36,1), padding .45s cubic-bezier(.22,1,.36,1), margin .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.js .hdr.in-hero .hdr__cta { max-width: 0; padding-left: 0; padding-right: 0; margin-left: -1rem; opacity: 0; pointer-events: none; border-width: 0; }

/* ───────────── BOTÓN DE WHATSAPP ─────────────
   Verde WhatsApp para que se reconozca al instante. Texto verde muy oscuro:
   el blanco sobre este verde no llega a leerse bien (contraste 1,9:1). */
.btn--wa {
  background: #25d366;
  color: #052e16;
  box-shadow: 0 8px 22px -12px rgba(37, 211, 102, .7);
}
.btn--wa:hover { background: #1fc35d; transform: translateY(-1px); }
.btn--wa:active { transform: none; }
.wa-ico { width: 18px; height: 18px; flex: none; }



/* ───────────── BOTONES ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: 9px;
  min-height: var(--tap);
  padding: .6rem 1.4rem;
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn--lg { min-height: 52px; padding: .8rem 1.7rem; }
.btn--full { width: 100%; }

.btn--ghost { color: var(--tx); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); }

/* ───────────── INICIO: DISPOSITIVOS 3D ─────────────
   La sección mide 390vh (345vh en celular) y su contenido queda fijo mientras se baja.
   El JS traduce el avance del scroll en giros y cambios de pantalla.
   Cada dispositivo tiene su propia cámara (perspective en .dev) para que la
   opacidad de entrada y salida no aplaste el 3D. */
.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;
}

:root {
  /* 1em de cada dispositivo = 1 % de su ancho. */
  --lpu: min(4.8px, .4vw);
  --phu: min(2.3px, .19vw);
  --tbu: min(4.9px, .4vw);
  --metal: linear-gradient(150deg, #4b5263 0%, #2a2f3a 46%, #363c49 100%);
  --edge: #3b414e;
  --bezel: #06070a;
}

.story { position: relative; }
/* Alto del recorrido = cuánta ruedita hace falta para recorrerlo entero.
   La ruedita ya no cubre el arranque (lo hace el reloj de la entrada, INTRO en
   main.js): cubre de .27 a 1. Sobre eso, un 20 % menos para que no haya que girar
   tanto. En celular, lo mismo (abajo de todo, en la consulta de 860px). */
.js .story { height: 390vh; }
.story__pin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--hdr-h) + 1rem) 0 2rem;
}
.js .story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.story__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.glow { position: absolute; border-radius: 50%; filter: blur(110px); }
.glow--1 { width: 44vw; height: 44vw; min-width: 380px; min-height: 380px; top: -18%; left: -10%; background: rgba(60, 96, 200, .3); }
.glow--2 { width: 34vw; height: 34vw; min-width: 300px; min-height: 300px; top: 22%; right: -8%; background: rgba(50, 72, 150, .26); }
.glow--3 { width: 46vw; height: 46vw; min-width: 360px; min-height: 360px; top: -24%; left: 54%; background: rgba(60, 96, 200, .24); }

/* Luz que sigue al cursor */
.spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 30%), rgba(120, 160, 255, 0.11), transparent 68%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.spot.is-on { opacity: 1; }

.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  /* Proximidad: la etiqueta va pegada al título que nombra. */
  margin-bottom: .55rem;
}
.eyebrow--dark { color: var(--accent-dk); }

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}

.story__h {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--tx);
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.story__h span { color: #ff5a1a; }
.story__nav { margin: 1.5rem 0 0; }

.story__texts { display: grid; margin-top: 1.1rem; }
.st {
  grid-area: 1 / 1;
  max-width: 42ch;
  font-size: 1.06rem;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s;
}
.st.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
/* Mientras la notebook está sola en el centro, el texto espera escondido (el JS lo muestra). */
.js .story__copy { opacity: 0; }
.story__copy { will-change: opacity, transform; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

.story__stage { position: relative; height: min(64vh, 560px); display: grid; place-items: center; }

/* ── Dispositivo genérico ── */
.dev { grid-area: 1 / 1; position: relative; perspective: 1500px; will-change: transform, opacity; }
.dev__float { position: relative; transform-style: preserve-3d; animation: floaty 6.5s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
.dev__shadow {
  position: absolute;
  left: 50%; bottom: -2%;
  width: 60%; height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);
  filter: blur(5px);
  transform: translateX(-50%);
  animation: shadowy 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadowy { 0%, 100% { transform: translateX(-50%) scale(.9); opacity: .85; } 50% { transform: translateX(-50%) scale(1.05); opacity: .55; } }

/* Cantos de celular y tablet: cuatro tiras que cierran la caja (W, H, T = ancho, alto, espesor). */
.side { position: absolute; background: linear-gradient(90deg, #262a33, #5a6171 50%, #262a33); }
.side--l, .side--r { top: var(--R); bottom: var(--R); left: 50%; width: var(--T); margin-left: calc(var(--T) / -2); }
.side--t, .side--b { left: var(--R); right: var(--R); top: 50%; height: var(--T); margin-top: calc(var(--T) / -2); background: linear-gradient(180deg, #262a33, #5a6171 50%, #262a33); }
.side--l { transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)); }
.side--r { transform: rotateY(90deg) translateZ(calc(var(--W) / 2)); }
.side--t { transform: rotateX(90deg) translateZ(calc(var(--H) / 2)); }
.side--b { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)); }

/* ── Laptop ── */
.dev--laptop { font-size: var(--lpu); }
.dev--laptop .dev__float { padding: 66em 5em 46em; }
.lp { position: relative; width: 100em; height: 0; transform-style: preserve-3d; }

.lp__lid {
  position: absolute;
  left: 0; bottom: 0;
  width: 100em; height: 64em;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.lp__face, .lp__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 3.2em 3.2em 1em 1em; }
.lp__face {
  transform: translateZ(.6em);
  background: var(--bezel);
  padding: 2.4em 2.4em 3.6em;
  box-shadow: inset 0 0 0 .3em #2d323d;
}
.lp__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: .7em; background: #0b1747; }
.lp__cam { position: absolute; top: 1em; left: 50%; width: .9em; height: .9em; margin-left: -.45em; border-radius: 50%; background: #1e2330; }
.lp__real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0 0 100% 0); }
.lp__back {
  transform: rotateY(180deg) translateZ(.6em);
  background: var(--metal);
  box-shadow: inset 0 0 0 .3em rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
}
.lp__lidedge { position: absolute; background: var(--edge); }
.lp__lidedge--t { left: 3em; right: 3em; top: 0; height: 1.2em; margin-top: -.6em; transform: rotateX(90deg); }
.lp__lidedge--l, .lp__lidedge--r { top: 3em; bottom: 0; width: 1.2em; }
.lp__lidedge--l { left: 0; margin-left: -.6em; transform: rotateY(90deg); }
.lp__lidedge--r { right: 0; margin-right: -.6em; transform: rotateY(90deg); }

/* Esqueleto de la web que se arma en la pantalla (colores de tacticrisk.com). */
.wf { position: absolute; inset: 0; background: linear-gradient(160deg, #0d1d5c, #081240); }
.wf i {
  position: absolute;
  display: block;
  border-radius: .5em;
  background: rgba(255, 255, 255, .16);
  transform-origin: left center;
  transform: scaleX(var(--k, 0));
  opacity: var(--k, 0);
}
.wf .wf__nav { left: 0; right: 0; top: 0; height: 10%; border-radius: 0; background: #f4f5f8; transform-origin: top center; transform: scaleY(var(--k, 0)); }
.wf .wf__h { left: 8%; height: 7%; background: rgba(255, 255, 255, .9); }
.wf .wf__h--1 { top: 26%; width: 32%; }
.wf .wf__h--2 { top: 35.5%; width: 24%; }
.wf .wf__p { left: 8%; height: 2.6%; }
.wf .wf__p--1 { top: 48%; width: 36%; }
.wf .wf__p--2 { top: 53%; width: 30%; }
.wf .wf__btn { left: 50%; top: 74%; width: 15%; height: 6%; border-radius: 3em; background: #c0262b; }
.wf .wf__img { left: 50%; top: 22%; width: 42%; height: 37%; border-radius: 1.2em; background: rgba(255, 255, 255, .22); }

.lp__base {
  position: absolute;
  left: -3em; top: 0;
  width: 106em; height: 68em;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  transform-style: preserve-3d;
}
.lp__deck { position: absolute; inset: 0; border-radius: .8em .8em 3.4em 3.4em; background: linear-gradient(180deg, #3f4552, #2b303b); box-shadow: inset 0 0 0 .3em rgba(255, 255, 255, .05); }
.lp__keys {
  position: absolute;
  left: 9em; right: 9em; top: 6em;
  height: 30em;
  border-radius: 1em;
  background-color: #14171e;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 5.6em, #30353f 5.6em 6.4em),
    repeating-linear-gradient(0deg, transparent 0 5.2em, #30353f 5.2em 6em);
}
.lp__pad { position: absolute; left: 36em; right: 36em; top: 41em; height: 21em; border-radius: 1.6em; background: #353b47; box-shadow: inset 0 0 0 .25em rgba(255, 255, 255, .06); }
.lp__under { position: absolute; inset: 0; transform: translateZ(-2.4em); border-radius: .8em .8em 3.4em 3.4em; background: #15181e; }
.lp__edge { position: absolute; background: linear-gradient(90deg, #2c313b, #4c5363 50%, #2c313b); }
.lp__edge--front { left: 3em; right: 3em; bottom: 0; height: 2.4em; transform-origin: 50% 100%; transform: rotateX(90deg); }
.lp__edge--l { left: 0; top: 1em; bottom: 3em; width: 2.4em; transform-origin: 0 50%; transform: rotateY(90deg); }
.lp__edge--r { right: 0; top: 1em; bottom: 3em; width: 2.4em; transform-origin: 100% 50%; transform: rotateY(-90deg); }

/* ── Celular ── */
.dev--phone { font-size: var(--phu); }
.dev--phone .dev__float { padding: 6em; }
.ph {
  --W: 100em; --H: 212em; --T: 8.4em; --R: 16em;
  position: relative;
  width: var(--W); height: var(--H);
  transform-style: preserve-3d;
}
.ph__face, .ph__back { position: absolute; inset: 0; border-radius: 16em; backface-visibility: hidden; }
.ph__face {
  transform: translateZ(4.2em);
  background: var(--bezel);
  padding: 3.6em;
  /* canto de metal + borde negro fino, como el de la referencia */
  box-shadow: inset 0 0 0 .9em #3c4250, inset 0 0 0 1.5em #08090c;
}
.ph__screen { position: relative; width: 100%; height: 100%; border-radius: 12.6em; overflow: hidden; background: #e9edf4; }
.ph__screen .scr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; will-change: transform; }
.ph__island { position: absolute; top: 7.4em; left: 50%; width: 30em; height: 8.6em; margin-left: -15em; border-radius: 99em; background: #000; }
.ph__back {
  transform: rotateY(180deg) translateZ(4.2em);
  background: var(--metal);
  box-shadow: inset 0 0 0 .9em #3c4250;
  display: grid;
  place-items: center;
}
.ph__cams {
  position: absolute;
  top: 9em; left: 9em;
  width: 36em; height: 36em;
  border-radius: 10em;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 .5em rgba(255, 255, 255, .08);
}
.ph__cams i { position: absolute; width: 13em; height: 13em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3b4c70, #07080b 62%); box-shadow: 0 0 0 .8em #22262e; }
.ph__cams i:first-child { top: 4.5em; left: 4.5em; }
.ph__cams i:last-child { bottom: 4.5em; left: 4.5em; }

/* ── Tablet ── */
.dev--tablet { font-size: var(--tbu); }
.dev--tablet .dev__float { padding: 8em 4em; }
.tb {
  --W: 100em; --H: 70em; --T: 3.6em; --R: 6.5em;
  position: relative;
  width: var(--W); height: var(--H);
  transform-style: preserve-3d;
}
.tb__face, .tb__back { position: absolute; inset: 0; border-radius: 6.5em; backface-visibility: hidden; }
.tb__face {
  transform: translateZ(1.8em);
  background: var(--bezel);
  padding: 3.4em;
  box-shadow: inset 0 0 0 .5em #3c4250, inset 0 0 0 .8em #08090c;
}
.tb__screen { position: relative; width: 100%; height: 100%; border-radius: 3.2em; overflow: hidden; background: #0e1530; }
.tb__screen .scr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.tb__back {
  transform: rotateY(180deg) translateZ(1.8em);
  background: var(--metal);
  box-shadow: inset 0 0 0 .5em #3c4250;
  display: grid;
  place-items: center;
}
.tb__cam { position: absolute; top: 5em; left: 5em; width: 7em; height: 7em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3b4c70, #07080b 62%); box-shadow: 0 0 0 .6em #22262e; }

/* ── Materiales realistas ──────────────────────────────────
   Aluminio con reflejo que se corre al girar (--glint, lo calcula el JS según el
   ángulo), vidrio con brillo en las pantallas, cantos de titanio en el celular, botones
   laterales y lentes de cámara de vidrio. --shade oscurece la cara que se aleja de la luz. */
.dev { perspective: 1900px; }
.lp, .ph, .tb { --glint: 50%; --shade: 0; }

/* Brillo de vidrio sobre todas las pantallas */
.lp__screen::after, .ph__screen::after, .tb__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .13) 47%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, 0) 66%) var(--glint) 0 / 280% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%);
}
/* Sombra de la cara que se aleja de la luz */
.lp__back::after, .ph__back::after, .tb__back::after, .lp__face::after, .ph__face::after, .tb__face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: #000;
  opacity: var(--shade);
  pointer-events: none;
}

/* ── Notebook: aluminio gris espacial ── */
.lp__face {
  background: linear-gradient(180deg, #121419, #060709);
  box-shadow:
    inset 0 0 0 .16em rgba(255, 255, 255, .28),   /* canto de aluminio pulido */
    inset 0 0 0 .5em #23262d,
    inset 0 0 0 .62em #060709;
}
.lp__cam { background: radial-gradient(circle at 35% 35%, #4b5a7a, #0a0c10 60%); box-shadow: 0 0 0 .2em #15171c; }
.lp__back {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, .06) 53%, rgba(255, 255, 255, 0) 66%) var(--glint) 0 / 260% 100% no-repeat,
    radial-gradient(130% 100% at 25% 15%, #686e7a, #464b55 50%, #30343c);
  box-shadow: inset 0 0 0 .16em rgba(255, 255, 255, .3), inset 0 0 0 .5em rgba(0, 0, 0, .12);
}
.lp__lidedge { background: linear-gradient(90deg, #3b3f47, #8d929c 50%, #3b3f47); }
.lp__deck {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, 0) 62%) var(--glint) 0 / 260% 100% no-repeat,
    linear-gradient(180deg, #626873 0%, #4c515b 45%, #3e424b 100%);
  box-shadow: inset 0 0 0 .16em rgba(255, 255, 255, .3), inset 0 .5em .6em -.3em rgba(255, 255, 255, .18);
}
.lp__keys {
  background-color: #0c0d11;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 5.6em, #4a4f59 5.6em 6.4em),
    repeating-linear-gradient(0deg, transparent 0 5.2em, #4a4f59 5.2em 6em),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 .35em #3c414a, inset 0 .4em .6em rgba(0, 0, 0, .55);
}
.lp__pad {
  background: linear-gradient(180deg, #555b66, #464b55);
  box-shadow: inset 0 0 0 .16em rgba(255, 255, 255, .18), inset 0 .4em .5em -.2em rgba(255, 255, 255, .12), 0 .2em .3em rgba(0, 0, 0, .25);
}
.lp__under { background: linear-gradient(180deg, #2a2d34, #15171b); }
.lp__edge { background: linear-gradient(90deg, #3a3e46, #9aa0aa 50%, #3a3e46); }
.lp__edge--front { background: linear-gradient(180deg, #a3a9b3, #5c616b 45%, #2f3239); }

/* ── Celular: vidrio adelante, marco de titanio, dorso de vidrio esmerilado ── */
.ph__face {
  background: #040506;
  box-shadow:
    inset 0 0 0 .55em #9da3ad,     /* titanio */
    inset 0 0 0 .9em #4a4f58,
    inset 0 0 0 1.5em #040506;
}
.ph__island { background: #000; box-shadow: inset 0 0 0 .3em #0b0c0f; }
.ph__island::after { content: ''; position: absolute; right: 18%; top: 28%; width: 3.2em; height: 3.2em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3d4a66, #050608 65%); }
.ph__back {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .04) 54%, rgba(255, 255, 255, 0) 66%) var(--glint) 0 / 260% 100% no-repeat,
    radial-gradient(120% 90% at 30% 20%, #4b5160, #2b2f38 55%, #1e2128);
  box-shadow: inset 0 0 0 .55em #9da3ad, inset 0 0 0 .9em #4a4f58;
}
.ph__cams {
  top: 7em; left: 7em;
  width: 40em; height: 40em;
  border-radius: 11em;
  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 0 .5em rgba(255, 255, 255, .14), 0 .8em 1.6em rgba(0, 0, 0, .35);
}
.ph__cams i, .ph__cams::before {
  position: absolute;
  width: 15em; height: 15em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .55) 0 6%, transparent 9%),
    radial-gradient(circle, #233050 0 28%, #0a0d14 30% 52%, #1c1f26 54% 60%, #0b0c10 62%);
  box-shadow: 0 0 0 .9em #2c3038, 0 0 0 1.4em #8f959f;
}
.ph__cams i:first-child { top: 4em; left: 4em; }
.ph__cams i:last-child { top: auto; bottom: 4em; left: 4em; }
.ph__cams::before { content: ''; right: 4em; top: 12.5em; }
.ph__cams::after { content: ''; position: absolute; right: 7em; top: 5em; width: 5em; height: 5em; border-radius: 50%; background: radial-gradient(circle, #fff7d8, #c9b98b 70%); }
.ph .side { background: linear-gradient(90deg, #474c55, #c3c8d0 46%, #7a808a 56%, #3b3f47); transform-style: preserve-3d; }
.ph .side--t, .ph .side--b { background: linear-gradient(180deg, #474c55, #c3c8d0 46%, #7a808a 56%, #3b3f47); }
/* Botones laterales que sobresalen del canto */
.ph .side--l::before, .ph .side--l::after, .ph .side--r::before {
  content: '';
  position: absolute;
  left: 15%; right: 15%;
  border-radius: 1em;
  background: linear-gradient(90deg, #5a5f68, #d0d4db 50%, #5a5f68);
  transform: translateZ(.7em);
}
.ph .side--l::before { top: 18%; height: 11%; }
.ph .side--l::after { top: 32%; height: 11%; }
.ph .side--r::before { top: 22%; height: 17%; }

/* ── Tablet: igual que el celular, en aluminio ── */
.tb__face {
  background: #040506;
  box-shadow: inset 0 0 0 .35em #9da3ad, inset 0 0 0 .6em #3f444d, inset 0 0 0 .9em #040506;
}
.tb__back {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, .05) 53%, rgba(255, 255, 255, 0) 66%) var(--glint) 0 / 260% 100% no-repeat,
    radial-gradient(130% 100% at 25% 15%, #6a707c, #474c56 50%, #30343c);
  box-shadow: inset 0 0 0 .35em #9da3ad;
}
.tb__cam { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .5) 0 8%, transparent 11%), radial-gradient(circle, #233050 0 30%, #0a0d14 34%); box-shadow: 0 0 0 .5em #2c3038, 0 0 0 .8em #8f959f; }
.tb .side { background: linear-gradient(90deg, #474c55, #b9bec7 46%, #7a808a 56%, #3b3f47); }
.tb .side--t, .tb .side--b { background: linear-gradient(180deg, #474c55, #b9bec7 46%, #7a808a 56%, #3b3f47); }

/* Sombra de contacto más suave y más real */
.dev__shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25) 55%, transparent); filter: blur(7px); }


/* ── Escena 3D (three.js) ──
   El lienzo ocupa toda la pantalla fija del inicio, detrás del texto. Cuando la escena
   3D arranca (html.three-on), los aparatos hechos en CSS se esconden: quedan solo como
   respaldo para navegadores sin WebGL. */
.story__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.story__grid { position: relative; z-index: 1; }
.three-on .story__stage .dev { visibility: hidden !important; }

/* ── Pantallas inventadas (hechas con HTML, no son fotos) ──
   Todo se mide en em: escala con el tamaño de cada dispositivo. */

/* Esqueleto de la laptop: tarjetas de abajo */
.wf .wf__card { top: 72%; width: 27%; height: 18%; border-radius: 1em; background: rgba(255, 255, 255, .14); }
.wf .wf__card--1 { left: 5%; } .wf .wf__card--2 { left: 36.5%; } .wf .wf__card--3 { left: 68%; }

/* Web del café */
.site {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1d2433;
  font-family: 'Inter', sans-serif;
  font-size: 1.45em;
  line-height: 1.3;
}
.site i { font-style: normal; }
.site__nav { flex: none; height: 11%; display: flex; align-items: center; gap: 2.2em; padding: 0 5%; border-bottom: .1em solid #eef0f3; font-size: .82em; color: #5a6274; }
.site__nav b { font-family: 'Manrope', sans-serif; font-size: 1.25em; font-weight: 800; color: #1d2433; letter-spacing: -0.02em; margin-right: auto; }
.site__nav i { margin-left: .4em; padding: .45em 1.2em; border-radius: 99em; background: #e8572a; color: #fff; font-weight: 600; }
.site__hero { flex: none; height: 54%; display: flex; gap: 5%; padding: 3.5% 5% 0; }
.site__copy { flex: 1.15; display: flex; flex-direction: column; justify-content: center; }
.site__kick { font-size: .62em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e8572a; }
.site__h { margin-top: .3em; font-family: 'Manrope', sans-serif; font-size: 2.15em; font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.site__p { margin-top: .7em; font-size: .74em; line-height: 1.45; color: #5a6274; max-width: 26em; }
.site__btns { margin-top: 1.1em; display: flex; gap: .6em; font-size: .7em; font-weight: 600; }
.site__btns i { padding: .7em 1.3em; border-radius: 99em; }
.site__b1 { background: #1d2433; color: #fff; }
.site__b2 { box-shadow: inset 0 0 0 .13em #1d2433; }
.site__art {
  flex: 1;
  position: relative;
  border-radius: 1.4em;
  overflow: hidden;
  background: radial-gradient(70% 60% at 70% 20%, #ffe7d3, transparent 70%), linear-gradient(150deg, #ffcfac, #ea7b4c);
}
.site__cup {
  position: absolute;
  left: 50%; top: 52%;
  width: 52%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1.4em 2.2em -1em rgba(120, 50, 20, .55), inset 0 -.3em .6em rgba(0, 0, 0, .06);
}
.site__cup::before { content: ''; position: absolute; right: -16%; top: 38%; width: 22%; height: 24%; border-radius: 50%; box-shadow: inset 0 0 0 .55em #fff; }
.site__cup::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #e2b48a 0 18%, #8a4e2c 40%, #4a2616 75%); }
.site__bean { position: absolute; left: 14%; top: 18%; width: 9%; aspect-ratio: .7; border-radius: 50%; background: #5a3220; transform: rotate(-30deg); box-shadow: inset -.15em 0 0 #3a1e12; }
.site__bean--2 { left: 78%; top: 74%; transform: rotate(40deg); }
.site__cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 3.5% 5% 4%; }
.site__card { display: flex; align-items: center; gap: .6em; padding: 0 .7em; border-radius: .9em; background: #f5f6f8; font-size: .66em; }
.site__card i { flex: none; width: 2.6em; height: 2.6em; border-radius: .7em; background: linear-gradient(150deg, var(--a), var(--b)); }
.site__card b { font-weight: 600; }
.site__card span { margin-left: auto; font-weight: 700; color: #e8572a; }

/* App de la tienda (celular) */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4f5f7; color: #1d2433; font-family: 'Inter', sans-serif; font-size: 4.4em; line-height: 1.3; }
.app i { font-style: normal; }
.app__status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 2.9em; padding: .55em 1.5em 0; font-size: .82em; background: #fff; }
.app__status b { font-weight: 600; }
.app__icons { display: flex; gap: .25em; }
.app__icons i { width: .9em; height: .55em; border-radius: .15em; background: #1d2433; }
.app__view { position: relative; flex: 1; overflow: hidden; }
.app__feed { position: absolute; left: 0; right: 0; top: 0; padding: 0 .9em 4em; will-change: transform; }
.app__head { display: flex; align-items: center; gap: .6em; padding: .5em 0 .8em; margin: 0 -.9em; padding-left: .9em; padding-right: .9em; background: #fff; }
.app__head div { flex: 1; text-align: center; }
.app__head b { display: block; font-family: 'Manrope', sans-serif; font-size: 1.05em; font-weight: 800; }
.app__head small { display: block; font-size: .68em; color: #8a91a2; }
.app__round { width: 2em; height: 2em; display: grid; place-items: center; border-radius: 50%; background: #f1f2f5; font-size: .85em; color: #1d2433; }
.app__search { margin-top: .8em; padding: .65em .9em; border-radius: .8em; background: #fff; color: #9aa0ae; font-size: .78em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .04); }
.app__chips { display: flex; gap: .4em; margin-top: .7em; font-size: .72em; }
.app__chips i { padding: .4em .9em; border-radius: 99em; background: #fff; color: #5a6274; }
.app__chips i.on { background: #1d2433; color: #fff; }
.app__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: .8em; }
.pc b { display: block; margin-top: .35em; font-size: .7em; font-weight: 600; }
.pc__img { position: relative; aspect-ratio: .86; border-radius: .9em; background: radial-gradient(80% 70% at 50% 35%, #fff, var(--a)); overflow: hidden; }
.pc__img em { position: absolute; left: .45em; top: .45em; padding: .15em .45em; border-radius: .5em; background: rgba(29, 36, 51, .72); color: #fff; font-style: normal; font-size: .6em; font-weight: 600; }
.pc__fav { position: absolute; right: .45em; bottom: .45em; width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.pc__fav::after { content: '♥'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .75em; color: #b9bfcc; }

/* Productos dibujados */
.obj { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); background: linear-gradient(150deg, color-mix(in srgb, var(--b) 70%, #fff), var(--b)); }
.obj--mug { width: 36%; height: 34%; border-radius: .2em .2em .9em .9em; }
.obj--mug::after { content: ''; position: absolute; right: -32%; top: 22%; width: 36%; height: 44%; border-radius: 50%; box-shadow: inset 0 0 0 .32em var(--b); }
.obj--b { width: 40%; border-radius: 1em 1em 1.2em 1.2em; }
.obj--vase { width: 30%; height: 52%; border-radius: 40% 40% 32% 32% / 30% 30% 22% 22%; }
.obj--vase::before { content: ''; position: absolute; left: 30%; top: -10%; width: 40%; height: 16%; border-radius: .2em; background: var(--b); }
.obj--tall { width: 24%; height: 62%; }
.obj--plant { width: 34%; height: 26%; border-radius: .2em .2em 1em 1em; background: linear-gradient(150deg, #d9a27a, #b07048); }
.obj--plant::before { content: ''; position: absolute; left: -18%; bottom: 82%; width: 136%; height: 150%; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 35% 35%, #8bc47a, var(--b) 60%); }
.obj--plate { width: 60%; aspect-ratio: 1; height: auto; bottom: 18%; border-radius: 50%; background: radial-gradient(circle, #fff 0 44%, #ece4dc 46% 60%, var(--b) 62% 64%, #f2ebe4 66%); box-shadow: 0 .4em .8em -.3em rgba(0, 0, 0, .25); }
.obj--candle { width: 30%; height: 36%; border-radius: .3em; background: linear-gradient(150deg, #fff6e0, #efd9a8); box-shadow: inset 0 -.25em 0 var(--b); }
.obj--candle::before { content: ''; position: absolute; left: 42%; top: -32%; width: 16%; height: 26%; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 70%, #fff3b0, #f2a12d 70%); }
.obj--bowl { width: 58%; height: 26%; border-radius: 0 0 2em 2em / 0 0 2.4em 2.4em; }
.obj--bowl::before { content: ''; position: absolute; left: 0; right: 0; top: -.2em; height: .45em; border-radius: 50%; background: color-mix(in srgb, var(--b) 55%, #000); }

.app__cart {
  position: absolute;
  right: 1em; bottom: 1.3em;
  width: 2.9em; height: 2.9em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #6d5efc;
  box-shadow: 0 .6em 1.2em -.4em rgba(109, 94, 252, .8);
}
.app__cart svg { width: 1.3em; height: 1.3em; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app__badge { position: absolute; top: -.15em; right: -.15em; min-width: 1.2em; height: 1.2em; padding: 0 .25em; display: grid; place-items: center; border-radius: 99em; background: #ff4d6d; color: #fff; font-size: .62em; font-weight: 700; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.app__cart.has-item .app__badge { transform: scale(1); }

/* Panel de ventas (tablet) */
.dash { position: absolute; inset: 0; display: flex; background: #f5f6f9; color: #1d2433; font-family: 'Inter', sans-serif; font-size: 2.05em; line-height: 1.25; }
.dash small { display: block; font-size: .72em; color: #8a91a2; }
.dash__side { flex: none; width: 7%; display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding-top: 1em; background: #1d2433; }
.dash__side b { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: .5em; background: #6d5efc; color: #fff; font-size: .8em; }
.dash__side i { width: 1.1em; height: 1.1em; border-radius: .3em; background: rgba(255, 255, 255, .18); }
.dash__side i.on { background: rgba(255, 255, 255, .7); }
.dash__main { flex: 1; display: flex; flex-direction: column; gap: 3%; padding: 3% 3.5%; min-width: 0; }
.dash__top { display: flex; align-items: center; justify-content: space-between; }
.dash__top b { font-family: 'Manrope', sans-serif; font-size: 1.15em; font-weight: 800; letter-spacing: -0.02em; }
.dash__chip { padding: .35em .8em; border-radius: 99em; background: #fff; box-shadow: inset 0 0 0 .08em #e1e4ea; font-size: .7em; color: #5a6274; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5%; }
.kpi { padding: .6em .7em; border-radius: .7em; background: #fff; box-shadow: 0 .1em .3em rgba(0, 0, 0, .04); }
.kpi b { display: block; margin-top: .15em; font-family: 'Manrope', sans-serif; font-size: 1.15em; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.kpi em { font-style: normal; font-size: .64em; font-weight: 600; color: #16a34a; }
.dash__row { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5%; min-height: 0; }
.dcard { display: flex; flex-direction: column; padding: .6em .8em; border-radius: .7em; background: #fff; box-shadow: 0 .1em .3em rgba(0, 0, 0, .04); min-height: 0; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 6%; padding-top: .5em; }
.bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25em; font-size: .58em; color: #8a91a2; }
.bars i { width: 100%; height: calc(var(--h) * 78%); border-radius: .35em .35em .15em .15em; background: linear-gradient(180deg, #8b7dff, #6d5efc); transform-origin: bottom; transform: scaleY(var(--t, 0)); }
.top { margin-top: .4em; display: grid; gap: .45em; }
.top li { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5em; font-size: .7em; }
.top li i { grid-column: 1 / -1; order: 3; height: .38em; border-radius: 99em; background: #ece9ff; position: relative; overflow: hidden; }
.top li i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #6d5efc; transform-origin: left; transform: scaleX(calc(var(--w) * var(--t, 0))); }
.top li b { font-weight: 700; }
.dash__orders { flex: none; gap: .3em; }
.ord { display: grid; grid-template-columns: 3.4em 1fr auto auto; align-items: center; column-gap: .8em; font-size: .72em; padding: .25em 0; border-top: .08em solid #f0f1f4; }
.ord b { font-weight: 700; }
.ord em { font-style: normal; font-size: .9em; font-weight: 600; padding: .15em .6em; border-radius: 99em; }
.ord .ok { background: #dcfce7; color: #15803d; }
.ord .go { background: #e0e7ff; color: #4338ca; }

/* Hasta que el JS los ubique, solo se ve la laptop. */
.dev--phone, .dev--tablet { opacity: 0; }

/* ───────────── DE LA IDEA AL CÓDIGO ─────────────
   Otra sección fija de 300vh. A la izquierda una persona de perfil; al bajar se le
   prende una idea, de su cabeza salen líneas de código que cruzan la pantalla en curva
   y, a la derecha, cada línea que llega se convierte en una pieza de la app.
   Las "líneas de código" son barritas de colores (resaltado de sintaxis), sin letras. */
.idea { position: relative; background: var(--bg); }
.js .idea { height: 260vh; }   /* 20 % menos de ruedita */
.idea__pin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--hdr-h) + 1.5rem) 0 2rem;
}
.js .idea__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }

.idea__head { text-align: center; }
.idea__texts { display: grid; justify-items: center; }
.it {
  grid-area: 1 / 1;
  max-width: 22ch;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tx);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.it.is-on { opacity: 1; transform: none; }
.it em { font-style: normal; color: var(--accent-lt); }

.idea__stage {
  /* El alto manda: los dos teléfonos se miden contra él. Y el ancho es mucho menor
     que antes (eran 1100 px): así las líneas no cruzan un vacío enorme y el viaje
     se siente corto. */
  --stage-h: min(70vh, 600px);
  position: relative;
  width: min(100% - 2rem, 800px);
  height: var(--stage-h);
  margin: clamp(1rem, 3vh, 2.2rem) auto 0;
}

/* Líneas de código en viaje */
.idea__lines { position: absolute; inset: 0; pointer-events: none; }
.cl {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(20, 24, 36, .8);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 6px 16px -10px rgba(91, 140, 255, .55);
  opacity: 0;
  will-change: transform, opacity;
}
.cl i { display: block; height: 6px; border-radius: 3px; }

/* -- Aparatos de verdad -----------------------------------------------------
   El teléfono, la tablet y la notebook son fotos con fondo transparente
   (assets/devices/*.webp). Como están en perspectiva, la interfaz NO se puede pegar
   como un rectángulo: hay que deformarla igual que la pantalla de la foto. De eso se
   encarga fitScreen() en main.js, que arma la homografía desde las cuatro esquinas que
   vienen en data-screen y la aplica como matrix3d.
   Lo bueno de esto: adentro de .dv__screen se dibuja a tamaño de celular real
   (390 x 844, texto de 15 px), y la matriz lo achica y lo tuerce sola. */
/* --tilt endereza un poco el aparato: la foto viene girada y de costado no se lee la
   pantalla. Es una contrarrotación chica, lo justo para enfrentarla sin que la foto
   pierda su volumen. */
.dv { position: relative; display: block; transform: perspective(1500px) rotateY(var(--tilt, 0deg)); }
.dv__img { display: block; width: 100%; height: auto; }
.dv[data-flip] .dv__img { transform: scaleX(-1); }
.dv__screen {
  position: absolute;
  left: 0; top: 0;
  width: 390px; height: 844px;   /* lienzo de celular real; la matriz lo acomoda */
  transform-origin: 0 0;
  overflow: hidden;
  border-radius: 46px;
  background: #0b0f17;
  backface-visibility: hidden;
}
/* Hasta que el JS calcula la matriz, la pantalla no se dibuja fuera de lugar. */
.js .dv__screen:not([style*="matrix3d"]) { opacity: 0; }

/* -- Los dos teléfonos de la sección de la idea --
   Izquierda: el de la clienta con el mensaje. Derecha: la web de turnos andando.
   El de la derecha va espejado (data-flip) para que los dos se miren entre ellos. */
.idea__src, .idea__app { position: absolute; }
.idea__src { left: 0; bottom: 0; width: calc(var(--stage-h) * 620 / 1094 * .88); opacity: calc(.2 + var(--g, 0) * .8); transform: translateY(calc((1 - var(--g, 0)) * 16px)); }
.idea__app { right: 0; top: 0; width: calc(var(--stage-h) * 620 / 1094); opacity: calc(.2 + var(--a, 0) * .8); transform: translateY(calc((1 - var(--a, 0)) * -16px)); }
/* La foto mira a la derecha; espejada, a la izquierda. Cada una se endereza para su lado. */
.idea__src .dv { --tilt: -9deg; }
.idea__app .dv { --tilt: 9deg; }

/* El chat de la clienta, a tamaño real adentro de la pantalla. Sin logos: alcanza con
   el verde del botón de enviar, el mismo que usan los botones de la página. */
/* OJO con este font-size: el lienzo de 390 px se achica a ~0,5 al entrar en la pantalla
   de la foto, así que lo que se ve es la mitad. A 15 px el texto se dibujaba a 6 px y no
   se leía nada. */
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0f1621; color: #e8ecf4; font-family: 'Inter', sans-serif; font-size: 27px; }
.chat__bar { display: flex; align-items: center; gap: .6em; padding: 3.6em .9em .6em; background: #18222f; }
.chat__av { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: linear-gradient(140deg, #4b5670, #2b3243); }
.chat__bar b { font-family: 'Manrope', sans-serif; font-size: .95em; font-weight: 700; letter-spacing: -0.01em; }
.chat__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .7em; overflow: hidden; }
.cm {
  margin: 0;
  max-width: 86%;
  padding: .5em .7em;
  border-radius: .9em;
  border-bottom-left-radius: .25em;
  background: #1e2938;
  line-height: 1.35;
  opacity: var(--m, 0);
  transform: translateY(calc((1 - var(--m, 0)) * 8px));
}
.cm--me { align-self: flex-end; border-radius: .9em; border-bottom-right-radius: .25em; background: #1d6b43; color: #eafff2; }
.chat__in { display: flex; align-items: center; gap: .55em; padding: .6em .8em 2em; }
.chat__in span { flex: 1; padding: .5em .8em; border-radius: 99em; background: #1e2938; color: #69748a; font-size: .9em; }
.chat__in i { flex: none; width: 2em; height: 2em; border-radius: 50%; background: #25d366; }

/* La web de turnos. La hoja crece de arriba hacia abajo con --on, detrás de las piezas
   que van aterrizando: nunca se ve un blanco vacío esperando a llenarse. */
.idea__app .bk__page { position: absolute; inset: 0; background: #fff; clip-path: inset(0 0 calc((1 - var(--on, 0)) * 100%) 0); }
.idea__app .bk { position: absolute; inset: 0; font-size: 25px; }   /* idem: se ve a la mitad */
.bk { display: grid; align-content: start; gap: .55em; padding: 0 .9em .9em; color: #1d2433; font-family: 'Inter', sans-serif; }
.ab { opacity: var(--k, 0); transform: translateY(calc((1 - var(--k, 0)) * .6em)) scale(calc(.92 + var(--k, 0) * .08)); }
/* Para medir dónde va a quedar cada pieza hay que verlas en su lugar definitivo. */
.idea__app.is-measuring .ab { opacity: 1; transform: none; }
.bk__bar { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; margin: 0 -.9em .3em; padding: 3.6em .9em .7em; background: #1d2433; color: #fff; }
.bk__bar b { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.bk__bar span { font-size: .72em; opacity: .7; }
.bk__title b { display: block; font-family: 'Manrope', sans-serif; font-size: 1.2em; font-weight: 800; letter-spacing: -0.02em; }
.bk__title small { display: block; font-size: .8em; color: #6b7285; }
.bk__svc { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .05em .5em; padding: .55em .7em; border-radius: .7em; border: 1px solid #e3e6ec; font-size: .88em; }
.bk__svc small { grid-column: 1; }
.bk__svc small { color: #8a91a2; font-size: .9em; }
.bk__svc b { font-weight: 700; }
.bk__svc.is-on { border-color: #6d5efc; background: #f3f1ff; box-shadow: inset 3px 0 0 #6d5efc; }
.bk__chips { display: flex; gap: .4em; flex-wrap: wrap; }
.bk__chips i { font-style: normal; padding: .3em .6em; border-radius: 99px; border: 1px solid #e3e6ec; font-size: .72em; white-space: nowrap; color: #4a5263; }
.bk__chips i.on { border-color: #6d5efc; background: #6d5efc; color: #fff; }
.bk__btn { margin-top: .15em; padding: .6em; border-radius: .6em; background: #6d5efc; color: #fff; text-align: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .85em; }
.bk__note { font-size: .74em; color: #8a91a2; text-align: center; }

.idea__done {
  position: absolute;
  /* Entre los dos teléfonos, abajo del todo: no tapa ninguna pantalla. */
  left: 50%; bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tx);
  opacity: var(--d, 0);
  transform: translateX(-50%) translateY(calc((1 - var(--d, 0)) * 10px));
}
.idea__done i { width: 8px; height: 8px; border-radius: 50%; background: #25d366; }

/* Dónde estamos. Va escrito en la página (no solo en los metadatos) porque es lo
   que mira Google para las búsquedas con zona, y lo que mira el cliente para saber
   que la empresa existe en algún lado. */
.cta__where { margin-top: .8rem; color: var(--tx-dim); font-size: .95rem; }
.cta__where strong { color: var(--tx); font-weight: 600; }

/* ───────────── SECCIONES ───────────── */
.sec { position: relative; padding: clamp(4rem, 8vw, 6.5rem) 0; }
/* Secciones en claro. Estaba atado a .sec--svc; se separa para poder alternar
   claro y oscuro a lo largo de la página y que no sea todo oscuro de corrido. */
.sec--svc, .sec--paper { background: #f6f7fa; color: var(--paper-tx); overflow: hidden; isolation: isolate; }
.sec--svc h2, .sec--paper h2, .sec--paper h3 { color: var(--paper-ink); }
.sec--paper .lead { color: var(--paper-tx); }
.sec__head--c { text-align: center; margin-inline: auto; }

.sec__head { max-width: 60ch; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.lead { margin-top: .9rem; font-size: 1.03rem; }

/* ───────────── SERVICIOS: CARRUSEL EN RUEDA ─────────────
   Todas las tarjetas ocupan la misma celda de la grilla (misma altura, la de la más
   alta) y el JS las ubica con transform según su distancia a la del frente.
   Solo se anima transform y opacity: el navegador no recalcula el diseño al
   arrastrar, por eso responde al dedo sin demora. */
.cf { position: relative; }

/* Banda de rayas finas detrás de las tarjetas, de borde a borde de la pantalla. */
.cf__band {
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: 16%;
  height: 58%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(91, 140, 255, 0.20) 0 2px, transparent 2px 7px),
    linear-gradient(to bottom, rgba(91, 140, 255, 0) 0%, rgba(150, 170, 230, 0.35) 55%, rgba(91, 140, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.cf__stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  perspective: 1400px;
  padding: 1rem 0 2.2rem;
  /* El navegador se queda con el scroll vertical; el horizontal lo maneja el carrusel. */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf__stage.is-drag { cursor: grabbing; }

/* Cada tarjeta tiene su color (--c y --c2, en el HTML) y dos caras:
   el frente con la info y el dorso de color con el ícono. Al moverse de un lugar
   al siguiente da una vuelta completa sobre sí misma y queda otra vez de frente.
   La opacidad va en las caras (--op) y no en la tarjeta: si la tarjeta tuviera
   opacidad, el navegador aplastaría el 3D y se vería el frente espejado. */
.cf__card {
  --c: #3b6ff5;
  --c2: #22c1ee;
  grid-area: 1 / 1;
  position: relative;
  width: min(440px, 84vw);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.cf__card a, .cf__card svg { -webkit-user-drag: none; }

.cf__in, .cf__back {
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: var(--op, 1);
}
.cf__in {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem 1.75rem;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    #fff;
  /* Borde neutro: nada de filetes ni bordes de color (look de plantilla). */
  border: 1px solid rgba(17, 20, 28, .1);
  box-shadow: 0 2px 4px rgba(17, 20, 28, .04), 0 34px 64px -30px color-mix(in srgb, var(--c) 45%, rgba(17, 20, 28, .5));
}
/* Velo que apaga las tarjetas de los costados (el JS controla --veil). */
.cf__in::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #f6f7fa;
  opacity: var(--veil, 0);
  pointer-events: none;
}

/* Dorso: todo color, con el ícono grande y el nombre. */
.cf__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.1rem;
  padding: 2rem;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(90% 60% at 30% 15%, rgba(255, 255, 255, .28), transparent 60%),
    linear-gradient(150deg, var(--c), var(--c2));
  box-shadow: 0 34px 64px -30px color-mix(in srgb, var(--c) 60%, #000), inset 0 0 0 1px rgba(255, 255, 255, .25);
  overflow: hidden;
}
.cf__back svg { width: 96px; height: 96px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.cf__back p { font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.cf__back span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }

.cf__ico {
  width: 52px; height: 52px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(150deg, var(--c), var(--c2));
  box-shadow: 0 10px 22px -10px var(--c), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cf__ico svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cf__name {
  text-align: center;
  color: var(--paper-ink);
  font-size: clamp(1.3rem, 2.4vw, 1.5rem);
  letter-spacing: -0.025em;
}

.cf__lbl {
  margin-top: 1.25rem;
  font-family: 'Manrope', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--paper-ink);
}
.cf__lbl--c { text-align: center; margin-top: .9rem; color: color-mix(in srgb, var(--c) 78%, #000); }
.cf__for { margin-top: .2rem; text-align: center; font-size: .96rem; line-height: 1.5; color: #3c4456; }

.cf__list {
  margin-top: .45rem;
  display: grid;
  gap: .5rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(17, 20, 28, .1);
  border-radius: 11px;
  background: color-mix(in srgb, var(--c) 5%, #fff);
}
.cf__list li { position: relative; padding-left: 1.35rem; font-size: .9rem; line-height: 1.45; color: #3c4456; }
.cf__list li::before {
  content: '';
  position: absolute;
  left: 2px; top: .5em;
  width: 8px; height: 4.5px;
  border-left: 1.8px solid color-mix(in srgb, var(--c) 85%, #000);
  border-bottom: 1.8px solid color-mix(in srgb, var(--c) 85%, #000);
  transform: rotate(-45deg);
}

.cf__or {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.3rem 0 .5rem;
  font-family: 'Manrope', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 60%, #6b7285);
  white-space: nowrap;
}
.cf__or::before, .cf__or::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--c) 25%, rgba(17, 20, 28, .08)); }
.cf__prob { text-align: center; font-size: .92rem; line-height: 1.5; color: #3c4456; margin-bottom: 1.4rem; }

.cf__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  border-radius: 10px;
  background: #25d366;
  color: #052e16;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s ease, box-shadow .25s ease, transform .2s ease;
}
.cf__cta:hover { background: #1fc35d; }

/* Reflejo que cruza los botones de WhatsApp al pasar el mouse (y al llegar con Tab). */
.btn--wa, .cf__cta { position: relative; overflow: hidden; isolation: isolate; }
.btn--wa::after, .cf__cta::after {
  content: '';
  position: absolute;
  top: -40%; bottom: -40%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .7) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.btn--wa:hover::after, .btn--wa:focus-visible::after,
.cf__cta:hover::after, .cf__cta:focus-visible::after { animation: wa-shine .75s cubic-bezier(.4,0,.2,1); }
.btn--wa:hover, .cf__cta:hover {
  box-shadow: 0 0 0 4px rgba(37, 211, 102, .2), 0 12px 30px -10px rgba(37, 211, 102, .85);
}
@keyframes wa-shine {
  0%   { left: -70%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Controles: flechas, puntos y el nombre del servicio del frente. */
.cf__ctrl {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.cf__arrow {
  width: var(--tap); height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(17, 20, 28, 0.14);
  background: #fff;
  color: var(--paper-ink);
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.cf__arrow:hover { border-color: rgba(17, 20, 28, 0.32); }
.cf__arrow:active { transform: scale(.94); }
.cf__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cf__dots { display: flex; }
.cf__dot {
  width: 34px; height: var(--tap);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cf__dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 99px;
  background: rgba(17, 20, 28, 0.22);
  transition: width .25s ease, background .25s ease;
}
.cf__dot[aria-current="true"]::before { width: 20px; background: var(--paper-ink); }

.cf__now {
  margin-top: .3rem;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--paper-tx);
}

/* ───────────── BANDA "POR QUÉ" ───────────── */
.sec--band { background: var(--bg-2); overflow: hidden; isolation: isolate; border-block: 1px solid var(--line); }
.band__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.shape {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 28px;
  will-change: transform;
}
.shape--1 { width: 260px; height: 260px; top: -60px; right: 6%; transform: rotate(14deg); }
.shape--2 { width: 170px; height: 170px; bottom: -50px; right: 24%; transform: rotate(-9deg); border-radius: 20px; }

.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem 2.2rem; }
.why__item { position: relative; padding-left: 1.1rem; border-left: 2px solid var(--accent); }
.why__item h3 { margin-bottom: .45rem; }
.why__item p { font-size: .95rem; }

/* ───────────── PROCESO ───────────── */
/* Los pasos son una línea de tiempo, no tarjetas: la página ya tiene tarjetas en
   servicios, en rubros y en las preguntas, y repetir el mismo molde en cada sección
   la vuelve monótona. Acá no hay caja ni borde: un número, una línea que los une y
   el texto al lado. */
.steps {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.7rem, 3.5vw, 2.4rem);
  list-style: none;
  padding: 0;
}
/* La línea que baja uniendo los números. Arranca y termina en el centro del
   primero y del último, no en el borde de la lista. */
.steps::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--paper-line);
}
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.3rem; align-items: start; }
.step__n {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  /* Fondo opaco para que tape la línea que pasa por detrás. */
  background: #f6f7fa;
  box-shadow: inset 0 0 0 2px var(--paper-line);
  font-family: 'Manrope', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f04400;
}
.step__c { padding-top: .55rem; }
.step h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.step p { font-size: .95rem; color: var(--paper-tx); }

@media (max-width: 560px) {
  .steps::before { left: 21px; }
  .step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .step__n { width: 44px; height: 44px; font-size: .9rem; }
  .step__c { padding-top: .3rem; }
}

/* ───────────── CONTACTO ───────────── */
.sec--cta { overflow: hidden; isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta__inner { display: grid; justify-items: center; text-align: center; }
.cta__copy { max-width: 620px; display: grid; justify-items: center; }
.cta__copy p { margin-top: 1rem; max-width: 52ch; }
.cta__action { margin-top: 2rem; }
.cta__copy .ticks { justify-items: start; text-align: left; }

.ticks { margin-top: 1.6rem; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 4px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

/* ───────────── FOOTER ───────────── */
.ftr { border-top: 1px solid var(--line); padding: 2.4rem 0; background: var(--bg-2); }
.ftr__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: .2rem; margin-left: auto; font-size: .9rem; }
.ftr__nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .7rem; color: var(--tx-mute); transition: color .2s; }
.ftr__nav a:hover { color: var(--tx); }
.ftr__credit { width: 100%; font-size: .78rem; color: var(--tx-mute); }
.ftr__credit a { color: var(--tx-dim); text-decoration: underline; text-underline-offset: 2px; }
.ftr__legal { width: 100%; font-size: .8rem; color: var(--tx-mute); padding-top: .9rem; border-top: 1px solid var(--line); }

/* ───────────── VOLVER ARRIBA ───────────── */
.totop {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 90;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(20, 24, 36, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--tx-dim);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, color .2s;
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--tx); }

/* ───────────── BARRA DE ACCIÓN MÓVIL ─────────────
   Solo en celular. Aparece cuando el botón del hero sale de pantalla y se esconde
   al llegar al formulario, para no duplicar la acción que ya se ve. */
.mbar { display: none; }

/* ───────────── RUBROS ─────────────
   Cada tarjeta lleva su color en --c, como las del carrusel. El relieve sale de tres
   cosas sumadas: un degradado muy suave de arriba abajo, una línea clara en el borde
   de arriba (inset) y una sombra larga y baja. Y detrás, un resplandor del color del
   rubro que crece al pasar el mouse. */
.rubros { display: grid; grid-template-columns: repeat(auto-fit, minmax(278px, 1fr)); gap: 1.1rem; }
.rb {
  --c: var(--accent);
  /* En columna y con los chips empujados abajo (margin-top: auto), la línea
     separadora queda a la misma altura en todas las tarjetas de la fila, aunque los
     textos midan distinto. */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px -26px #000;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}
/* Un brillo neutro y muy tenue, no un color por tarjeta: con seis colores vivos las
   tarjetas parecían de juguete. El relieve lo dan el degradado, el canto y la sombra. */
.rb::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -28%; top: -70%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent);
  opacity: .05;
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.rb:hover {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 46px -26px #000;
}
.rb:hover::before { opacity: .09; transform: scale(1.15); }

/* Ícono al tono del texto, sobre un cuadrito apenas marcado. Sobrio a propósito. */
.rb__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: .9rem;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--tx-dim);
  transition: color .3s ease, border-color .3s ease;
}
.rb:hover .rb__ico { color: var(--tx); border-color: var(--line-2); }
.rb__ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rb h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.rb__who { margin-bottom: .7rem; font-size: .8rem; color: var(--tx-dim); opacity: .7; }
.rb__d { margin-bottom: 1.1rem; font-size: .92rem; color: var(--tx-dim); }

/* Lo concreto que se entrega, para que no quede todo en abstracto. */
.rb__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.rb__tags i {
  font-style: normal;
  padding: .26rem .6rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  font-size: .74rem;
  color: var(--tx);
}
.rubros__note { margin-top: 1.8rem; text-align: center; color: var(--tx-dim); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .rb, .rb::before { transition-duration: .01ms; }
  .rb:hover { transform: none; }
}

/* ───────────── PREGUNTAS ─────────────
   Acordeón sobre <details>: anda sin JavaScript, se abre con el teclado y lo anuncia
   el lector de pantalla. El alto lo anima main.js (details abre de golpe y queda
   duro); todo lo demás —la cruz, la raya del costado, el texto que se acomoda— es
   CSS, y arranca cuando el JS pone .is-open. */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: .55rem; }
.faq__i {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  transition: border-color .35s ease, background-color .35s ease;
}
.faq__i:hover { border-color: var(--line-2); }
.faq__i.is-open { border-color: var(--line-2); background: var(--bg-2); }

/* Raya de acento que crece por el costado al abrir. */
.faq__i::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.faq__i.is-open::before { transform: scaleY(1); }

.faq__i summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: .95rem 1.15rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--tx-dim);
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover, .faq__i.is-open summary { color: var(--tx); }
.faq__i summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 13px; }

/* La cruz que se vuelve raya: gira y la barra vertical se achica. El rebote del
   final es lo que le saca el aire de menú viejo. */
.faq__ico { position: relative; flex: none; width: 14px; height: 14px; }
.faq__ico::before, .faq__ico::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.faq__ico::after { transform: rotate(90deg); }
.faq__i.is-open .faq__ico::before { transform: rotate(180deg); }
.faq__i.is-open .faq__ico::after { transform: rotate(180deg) scaleX(0); }

/* El alto lo anima el JS, así que acá solo hay que recortar lo que sobra. */
.faq__a { overflow: hidden; }
.faq__a p {
  max-width: 68ch;
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  font-size: .95rem;
  color: var(--tx-dim);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease .1s, transform .45s cubic-bezier(.22,1,.36,1) .1s;
}
.faq__i.is-open .faq__a p { opacity: 1; transform: none; }
/* Sin JavaScript no hay .is-open: el texto tiene que verse igual. */
.no-js .faq__a p { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .faq__i::before, .faq__ico::before, .faq__ico::after, .faq__a p { transition-duration: .01ms; }
}

/* Con el menú abierto la página de atrás no se mueve. */
.nav-abierto, .nav-abierto body { overflow: hidden; touch-action: none; }

/* ───────────── REVELADO ───────────── */
/* Va con .js adelante a propósito: quien entre sin JavaScript tiene que ver el
   contenido igual. Sin esa guarda, media página quedaba invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 960px) {
}

@media (max-width: 860px) {
  :root { --lpu: min(2.8px, .74vw); --phu: min(1.3px, .35vw); --tbu: min(3px, .8vw); }
  .js .story { height: 345vh; }
  /* El escenario del aparato ocupa EXACTAMENTE lo que queda debajo del texto, no un
     porcentaje fijo de la pantalla. Antes medía 46svh: en un iPhone con la barra del
     navegador el texto ocupa más y el aparato se salía por abajo, cortado en seco.
     Columna flexible: el texto toma lo suyo y el escenario se estira con el resto. */
  .story__pin { flex-direction: column; align-items: stretch; padding: calc(var(--hdr-h) + 1.2rem) 0 .8rem; }
  .story__grid { flex: 1; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: .2rem; align-items: stretch; }
  .story__stage { height: auto; min-height: 0; }
  .story__nav { margin: .9rem 0 0; }
  .story__h { font-size: clamp(2rem, 9vw, 2.6rem); }
  .story__texts { margin-top: .7rem; }
  .story__nav > button { padding: 0 .85rem; font-size: .86rem; }
  .st { font-size: .96rem; }
  .hero__more { display: none; }
  .hero__cta { margin-top: 1.1rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .js .idea { height: 230vh; }
  /* En el celular: el mensaje arriba y la web de turnos abajo; el código baja entre los dos. */
  /* Los dos teléfonos no entran uno al lado del otro en 375 px: van en diagonal,
     el del mensaje arriba a la izquierda y el de la app abajo a la derecha, un poco
     superpuestos. Se lee como una escena y no como dos cosas apretadas. */
  .idea__stage { --stage-h: 64svh; height: var(--stage-h); margin-top: .6rem; }
  /* UN TELÉFONO POR VEZ. Dos teléfonos verticales no entran uno al lado del otro en
     375 px a un tamaño en el que se lea algo: o se pisan o el texto queda en 8 px.
     Así que acá se turnan. Primero el del mensaje, en el centro y grande. Cuando
     arrancan las líneas (--hand, que lo mueve el JS) se corre a la izquierda y se
     apaga, y el de la app toma el centro. Entra cada uno a su turno y se lee todo. */
  .idea__stage { --stage-h: 70svh; }
  .idea__src, .idea__app {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: calc(var(--stage-h) * 620 / 1094 * .86);
  }
  .idea__src {
    transform: translate(-50%, -50%) translateX(calc(var(--hand, 0) * -88%)) scale(calc(1 - var(--hand, 0) * .14));
    opacity: calc((.2 + var(--g, 0) * .8) * (1 - var(--hand, 0) * .9));
  }
  .idea__app {
    transform: translate(-50%, -50%) translateX(calc((1 - var(--hand, 0)) * 92%));
    /* Sin el .2 de piso del escritorio: acá tiene que estar invisible del todo hasta
       que le toca, si no se asoma por el costado desde el principio. */
    opacity: var(--a, 0);
  }
  /* El teléfono es más grande que en escritorio pero la pantalla sigue entrando a
     ~0,41, así que el texto del lienzo va más grande para terminar en unos 13 px. */
  .chat { font-size: 32px; }
  /* 27 y no 30: a 30 la lista medía 866 px en un lienzo de 844 y se comía el botón
     y la nota de abajo. */
  .idea__app .bk { font-size: 27px; }
  .bk { gap: .4em; padding: 0 .8em .8em; }
  /* En el lienzo de 844 px entra todo menos un servicio: se saca el tercero y el
     resto (días, horarios, botón y la nota) queda completo y legible. */
  .bk__svc:nth-child(5) { display: none; }
  .idea__done { display: none; }
}

@media (max-width: 760px) {
  :root { --hdr-h: 62px; }
  .wrap { width: min(100% - 2rem, var(--wrap)); }

  /* Sin recuadro: el botón medía 44 px adentro de una cápsula de 52 y se veía metido
     a la fuerza. Quedan las tres rayas solas; la zona que se toca sigue siendo de
     44 px, que es lo que importa para el dedo. */
  .burger {
    display: grid;
    gap: 5px;
    width: var(--tap); height: var(--tap);
    place-content: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
  }
  .burger span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: var(--tx); transition: transform .3s ease, opacity .25s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

  .hdr { top: 8px; }
  .hdr__inner { height: 52px; padding: 0 .35rem 0 .9rem; }
  .hdr__cta { display: none; }
  /* En el celular el menú es una lista que baja (Jakob): sin gota. */
  .nav {
    position: fixed;
    top: calc(var(--hdr-h) + 6px);
    left: 1rem; right: 1rem;
    flex-direction: column;
    align-items: stretch;
    padding: .4rem 1rem .8rem;
    border-radius: 20px;
    background: rgba(14, 17, 26, .96);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav > a { justify-content: flex-start; padding: .9rem .2rem; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav > a:last-of-type { border-bottom: 0; }
  .nav .seg__drop { display: none; }
  .cf__in { padding: 1.9rem 1.5rem 1.6rem; }
  .cf__band { top: 12%; height: 62%; }
  .shape { display: none; }

  /* Botón redondo en la esquina, no una barra de lado a lado: la barra ocupaba todo
     el ancho y tapaba el contenido mientras se baja. */
  .mbar {
    display: grid;
    place-items: center;
    position: fixed;
    right: 1rem;
    left: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 95;
    width: 56px; height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #052e16;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .14);
    /* Escondido hasta que el JS le pone .is-on: no aparece donde ya hay otro botón de
       WhatsApp a la vista (el del inicio, las tarjetas, contacto). */
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
    transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .mbar .wa-ico { width: 27px; height: 27px; }

  .mbar.is-on { opacity: 1; transform: none; pointer-events: auto; }
  /* Hick: con la barra fija abajo, el "volver arriba" es una opción de más. */
  .totop { display: none; }
  .ftr { padding-bottom: 6rem; }
}

/* ───────────── MOVIMIENTO REDUCIDO ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}