/* =========================================================================
   home.css — capítulos de la home. Depende de brand.css.
   ========================================================================= */

.hidden { display: none !important; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero__copy { position: relative; z-index: 3; }   /* el texto y los botones siempre por encima del naranja y la v */
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__art { position: relative; justify-self: end; width: min(620px, 100%); padding-bottom: 0; }
/* la imagen no va en una tarjeta: se desvanece hacia el fondo por los cuatro lados */
/* el borde de la imagen se deshace en grano (máscara tramada, sin óvalo ni cortes rectos) */
.feather, .dissolve { -webkit-mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; }
.glass-wrap { position: relative; aspect-ratio: 4 / 5; margin: -10% -8% 0 -4%; }
.glass-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #161311 url("../img/art/ember-night.webp") 0 0 / 100% 100% no-repeat; }
/* el código se ve solo sobre el naranja (máscara con su brillo) y se desplaza con el scroll (glass.js) */
.glass-code { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("../img/art/ember-night-mask.png") 0 0 / 100% 100% no-repeat; mask: url("../img/art/ember-night-mask.png") 0 0 / 100% 100% no-repeat; }
/* el naranja del giro, calcado al fondo de «Demo en vivo» (.art-stage--night): la misma imagen en naranja
   (ember-night.webp: el brillo a la derecha y el lado izquierdo negro), un poco más grande que la pieza y con el
   borde de grano de dissolve-mask.png */
.glass-stage.feather { inset: -10% -9%; }
@media (max-width: 960px) { .glass-stage.feather { inset: -1% -1% -10%; } }   /* en una columna no hay pantalla a los lados ni sube hacia los botones */
.glass-bg { position: absolute; left: 0; top: 0; width: 100%; height: 145%; display: block; will-change: transform; }
.glass-v { position: absolute; left: -25%; top: -25%; z-index: 3; width: 150%; max-width: none; height: 150%; display: block; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  /* si la v sale del recuadro al girar, se desvanece en vez de cortarse */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.glass-wrap.is-live .glass-v { opacity: 1; }
.hero__art .agentlog { position: absolute; z-index: 2; left: -40px; right: 40px; bottom: 26%; }
.hero__chatwin { transform: rotate(-2deg); }
.hero__chatwin .win__body { display: grid; gap: 8px; }
.hero__chatwin .msg { margin: 0; }
.hero__win { position: absolute; right: -40px; bottom: -24px; width: 200px; font-size: 12px; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: 26px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
.wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 8px; }
.wave i { flex: 1; min-width: 2px; background: var(--terra); border-radius: 2px; height: 30%; }
.on-dark .wave i, .stage--call .wave i { background: var(--cian); }

/* ---------- registro del agente (hero) ---------- */
.agentlog { background: var(--carbon-2); border: 1px solid var(--line-dark); border-radius: 12px; padding: 16px 18px; box-shadow: 10px 10px 0 rgba(0, 0, 0, .35); }
.agentlog.glass { font-size: .95em; background: linear-gradient(135deg, rgba(27, 26, 23, .55), rgba(27, 26, 23, .35)) !important; }
.agentlog.glass .agentlog__head, .agentlog.glass .agentlog__t { color: rgba(244, 241, 235, .72); }
.agentlog .agentlog__lines { font-size: 12.5px; line-height: 1.85; }
.agentlog__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-d); border-bottom: 1px solid var(--line-dark); padding-bottom: 10px; margin-bottom: 10px; }
.agentlog__lines { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 2; }
.agentlog__t { color: var(--muted-d); margin-right: 6px; }
.agentlog__ok { color: var(--cian); margin-top: 4px; }

/* ---------- qué es: el ciclo del agente ---------- */
.loop { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.loop__ring { width: 100%; height: auto; color: var(--carbon); }
.loop__core { font: italic 400 44px var(--f-serif); fill: var(--carbon); }
.loop__logo { color: var(--carbon); }
.loop__logo .wordmark__accent { fill: var(--cian-ink); }
.loop__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.loop__step { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; opacity: .35; transition: opacity .3s; }
.loop__step.is-on { opacity: 1; }
.loop__step span { color: var(--terra); font-size: 12px; padding-top: 5px; }
.loop__step b { font: 400 26px/1.1 var(--f-serif); }
.loop__step p { grid-column: 2; margin: 4px 0 0; color: var(--muted-l); font-size: 14.5px; }

/* ---------- índice + panel (qué hacemos, por qué, principios) ---------- */
/* títulos en renglones compactos; la descripción del elegido se escribe en un solo panel
   de alto fijo (site.js, initIndex), así la sección ocupa poco y nada salta */
.idx { --acc: var(--cian); --line: var(--line-dark); --pane: rgba(244, 241, 235, .04); --ink: var(--arcilla); --mut: var(--muted-d);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; }
.idx--light { --acc: var(--terra); --line: var(--line-light); --pane: var(--papel); --ink: var(--carbon); --mut: var(--muted-l); }
.idx__list { order: 1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.idx__pane { order: 2; position: sticky; top: 110px; min-height: var(--pane-h, 180px); padding: 20px 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--pane); color: var(--ink); }
.idx--light .idx__pane { border-color: var(--carbon); }
.idx__item { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: baseline; gap: 12px; width: 100%; padding: 11px 8px; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding .3s var(--ease), background .25s; }
.idx__item:hover, .idx__item.is-on { background: color-mix(in srgb, var(--acc) 7%, transparent); padding-left: 14px; }
.idx__item:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.idx__n { font-size: 12px; color: var(--acc); }
.idx__main { display: grid; gap: 3px; }
.idx__tag { display: none; }   /* la etiqueta va en el encabezado del panel */
.idx__t { font: 400 clamp(19px, 1.8vw, 23px)/1.2 var(--f-serif); }
.idx__arr { color: var(--acc); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease); }
.idx__item.is-on .idx__arr { opacity: 1; transform: none; }
.idx__bar { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); font-size: 11.5px; color: var(--mut); }
.idx--light .idx__bar { border-bottom-color: rgba(27, 26, 23, .25); }
.idx__led { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.idx__text { margin: 0; font: 400 14.5px/1.7 var(--f-mono); color: var(--ink); }
.idx__text::after { content: "▋"; margin-left: 2px; color: var(--acc); }
html.caret-off .idx__text:not(.is-typing)::after { opacity: 0; }

/* ---------- qué hacemos ---------- */

/* ---------- tecnología ---------- */
/* tecnología: el viaje de un mensaje por el stack */
.flow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; margin-top: 44px; min-height: 0; }
.flow__diagram { position: relative; padding-left: 34px; }
.flow__bus { position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(180deg, var(--carbon) 0 4px, transparent 4px 9px); opacity: .35; }
.flow__packet { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 5px rgba(168, 69, 42, .18); opacity: 0; }
.flow__packet.is-back { background: var(--cian-ink); box-shadow: 0 0 0 5px rgba(6, 97, 90, .2); }
.flow__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.slab { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 16px; min-height: 56px; padding: 10px 16px; border-radius: 12px; background: rgba(244, 241, 235, .7); border: 1px solid var(--line-light); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s; }
.slab__name { font-size: 12px; color: var(--terra); white-space: nowrap; }
.slab__vis { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.slab__txt { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted-l); }
.slab__txt b { display: block; font: 400 21px/1.2 var(--f-serif); color: var(--carbon); margin-bottom: 2px; }
.flow.is-live .slab__txt { display: none; }
.slab.is-on { background: var(--carbon); color: var(--papel); border-color: var(--carbon); transform: translateX(8px); }
.slab.is-on .slab__name { color: var(--cian); }
.slab.is-on .slab__txt { color: var(--muted-d); }
.slab.is-on .slab__txt b { color: var(--papel); }
.slab.is-done { border-color: rgba(168, 69, 42, .45); }
.flow.is-back .slab.is-on { background: var(--cian-ink); border-color: var(--cian-ink); }
.flow.is-back .slab.is-on .slab__name { color: var(--papel); }
.flow.is-back .flow__cap-n { color: var(--cian-ink); }
.tag { display: inline-flex; align-items: center; height: 24px; font: 500 11.5px/1 var(--f-sans); font-style: normal; padding: 0 10px; border-radius: 999px; border: 1px solid currentColor; opacity: .55; transition: opacity .3s, background .3s, color .3s; }
.slab.is-on .tag { opacity: .8; }
.slab--0.is-on .tag:first-child, .slab--6.is-on .tag:first-child, .slab--1.is-on .tag:first-child { background: var(--cian); border-color: var(--cian); color: var(--carbon); opacity: 1; }
.tokens, .docs { display: flex; align-items: center; gap: 3px; height: 26px; }
.slab__voice { display: block; width: min(260px, 100%); height: 34px; opacity: .35; transition: opacity .3s; }
.slab.is-on .slab__voice { opacity: 1; }
.tokens b { width: 18px; height: 10px; border-radius: 3px; border: 1px solid currentColor; opacity: .45; }
.slab.is-on .tokens b { animation: tok 1.4s steps(1) infinite; }
.tokens b:nth-child(2) { animation-delay: .15s !important; } .tokens b:nth-child(3) { animation-delay: .3s !important; } .tokens b:nth-child(4) { animation-delay: .45s !important; } .tokens b:nth-child(5) { animation-delay: .6s !important; } .tokens b:nth-child(6) { animation-delay: .75s !important; } .tokens b:nth-child(7) { animation-delay: .9s !important; }
@keyframes tok { 0% { opacity: .35; background: transparent; } 40%, 100% { opacity: 1; background: var(--cian); border-color: var(--cian); } }
.docs b { width: 16px; height: 20px; border-radius: 2px 6px 2px 2px; border: 1px solid currentColor; opacity: .45; }
.slab.is-on .docs b:nth-child(3) { opacity: 1; background: var(--cian); border-color: var(--cian); animation: pick .6s var(--ease); }
@keyframes pick { from { transform: translateY(6px); } }
.graph { width: 120px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; }
.graph circle { fill: var(--arcilla); }
.slab.is-on .graph { opacity: 1; stroke: var(--cian); }
.slab.is-on .graph circle { fill: var(--carbon); }
.slab.is-on .graph path { stroke-dasharray: 60; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -120; } }
.flow__side { display: grid; gap: 22px; align-content: center; }
.flow__msg { margin: 0; display: grid; gap: 4px; max-width: 320px; padding: 12px 16px; font-size: 16px; border-radius: 16px; }
.flow__msg .mono { font-size: 11px; opacity: .7; }
.flow__msg--in { background: var(--papel); border: 1px solid var(--line-light); border-bottom-left-radius: 4px; justify-self: start; }
.flow__msg--out { background: var(--carbon); color: var(--papel); border-bottom-right-radius: 4px; justify-self: end; }
.flow__msg--out .mono { color: var(--cian); opacity: 1; }
.flow__cap { display: grid; gap: 6px; padding: 20px 0; border-top: 1.5px solid var(--carbon); border-bottom: 1px solid var(--line-light); min-height: 150px; align-content: start; }
.flow__cap-n { font-size: 12px; color: var(--terra); }
.flow__cap-t { font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--f-serif); }
.flow__cap-d { color: var(--muted-l); font-size: 15.5px; }
.flow:not(.is-live) .flow__cap { display: none; }


/* ---------- por qué ---------- */
.porque__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(24px, 4vw, 56px); align-items: start; }
/* en «por qué» el panel va bajo el título y la lista a la derecha */
.porque__grid .idx { display: contents; }
.porque__grid > header { grid-column: 1; }
.porque__grid .idx__pane { grid-column: 1; grid-row: 2; margin-top: 28px; }
.porque__grid .idx__list { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- oferta ---------- */
/* lo que recibes: tres pasos en fila, todo el texto a la vista, unidos por una línea */
.value { list-style: none; margin: 30px 0 44px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vstep { position: relative; padding: 26px 20px 20px; background: #FBF9F4; border: 1px solid rgba(27, 26, 23, .1); border-radius: 3px; box-shadow: 0 1px 0 rgba(27, 26, 23, .06), 0 18px 30px -22px rgba(27, 26, 23, .55); rotate: -.8deg; }
.vstep:nth-child(2) { rotate: .6deg; }
.vstep:nth-child(3) { rotate: -.3deg; }
/* cinta de papel (PNG) que sostiene cada nota */
.vstep__tape { position: absolute; top: -18px; left: 50%; width: 118px; height: auto; translate: -50% 0; rotate: -4deg; filter: drop-shadow(0 1px 1px rgba(27, 26, 23, .18)); pointer-events: none; }
.vstep:nth-child(2) .vstep__tape { rotate: 3deg; }
.vstep__n { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--terra); }
.vstep__n i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--terra) 0 4px, transparent 4px 8px); opacity: .6; }
.vstep:last-child .vstep__n i { background: none; }
.vstep__t { margin: 10px 0 8px; font: 400 clamp(21px, 1.8vw, 25px)/1.12 var(--f-serif); }
.vstep__d { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted-l); }
.value__hint { display: none; }
.vstep:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; z-index: 1; width: 22px; height: 22px; margin-top: -11px; display: grid; place-items: center; border-radius: 50%; background: var(--carbon); color: var(--papel); font-size: 12px; }
}
.precios__head { scroll-margin-top: 90px; }
.precios__head .kicker { margin-bottom: 10px; }
.precios__h { font: 400 clamp(30px, 3.2vw, 42px) var(--f-serif); margin: 0; }

/* ---------- página nosotros ---------- */
.equipo__grid { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
.member { position: relative; }
.member__photo { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--carbon); display: grid; place-items: center; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.01); transition: filter .5s var(--ease), transform .6s var(--ease); }
.member:hover .member__photo img { filter: none; transform: scale(1.05); }
.member__initials { font: italic 400 clamp(3rem, 6vw, 4.5rem)/1 var(--f-serif); color: var(--cian); }
.member__name { margin: 14px 0 2px; font: 400 24px/1.15 var(--f-serif); }
.member__role { margin: 0; font-size: 12px; color: var(--terra); letter-spacing: .04em; }
.member__in { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); color: var(--carbon); font: 700 13px var(--f-sans); text-decoration: none; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s var(--ease); }
.member:hover .member__in, .member__in:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .member__photo img { filter: none; } .member__in { opacity: 1; transform: none; } }
.about-cta .btn { margin-top: 26px; }
.about-cta .t-lead { color: var(--arcilla); opacity: .9; }

/* ---------- clientes ---------- */
.clientes { padding-bottom: 100px; }
.clientes .t-title { margin-bottom: 30px; }
.marquee { overflow: hidden; padding: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); margin: 10px 0 36px; }
/* tres copias iguales; el recorrido es exactamente una copia (un tercio), sin brinco en el empalme.
   Arranca con el primer logo ya visible y solo corre cuando la franja está en pantalla (home-scenes.js). */
.marquee__track { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; width: max-content; --o: 10vw; transform: translateX(calc(-100% / 3 + var(--o))); animation: marquee 60s linear infinite paused; }
.marquee.is-run .marquee__track { animation-play-state: running; }
.marquee.is-run:hover .marquee__track { animation-play-state: paused; }
.marquee__track > li { flex: none; margin-right: 58px; }
.marquee__track img { display: block; }
@keyframes marquee { from { transform: translateX(calc(-100% / 3 + var(--o))); } to { transform: translateX(calc(-200% / 3 + var(--o))); } }
@media (max-width: 640px) { .marquee__track { --o: 6vw; animation-duration: 45s; } .marquee__track > li { margin-right: 36px; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.logo { padding: 10px 14px; border-radius: 10px; opacity: .5; filter: brightness(0) invert(1); transition: opacity .25s, filter .25s, background .25s; }
.logo:hover { opacity: 1; filter: none; }
/* los logos oscuros no se leen en color sobre el carbón: se quedan en blanco pleno, sin ficha detrás */
.logo--dark:hover { filter: brightness(0) invert(1); }
.logo img { width: auto; }

/* ---------- capítulos ---------- */
.chapter { min-height: 100svh; display: flex; align-items: center; }
.chapter > .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); }
.chapter__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.chapter__grid--rev .chapter__copy { order: 2; }
.chapter__copy--wide { max-width: 900px; margin-bottom: 40px; }
.counter { margin-top: 26px; font-size: 14px; display: inline-flex; gap: 8px; padding: 8px 12px; border: 1.5px solid currentColor; border-radius: 999px; }
.counter span { font-weight: 700; color: #A8452A; }
.on-dark .counter span { color: var(--cian); }
.stamp { margin-top: 24px; font-size: 14px; color: var(--cian); }
.stage { position: relative; }

/* reloj fijo de los capítulos */

/* burbujas (dibujo a mano) */

/* teléfono: marco PNG (assets/img/art/phone.png) con la pantalla real debajo */
.device { position: relative; width: min(330px, 86vw); aspect-ratio: 780 / 1580; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .35)) drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.device__screen { position: absolute; top: 2.66%; bottom: 2.66%; left: 5.38%; right: 5.38%; border-radius: calc(min(330px, 86vw) * .118); overflow: hidden; }
.device__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 38%, transparent 42%); }
.device__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* chat 03:12 */
.stage--chat { display: grid; justify-items: center; }
.phone { background: #EFEAE1 url("../img/tex/fibers.webp") repeat; background-size: 380px; color: var(--carbon); padding: 58px 14px 20px; }
.phone__top { text-align: center; font-size: 11px; opacity: .6; margin: 0 -14px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-light); }
.phone__msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.msg { font-size: 14px; line-height: 1.35; padding: 9px 12px; border-radius: 16px; max-width: 85%; }
.msg--in { background: #fff; border: 1.5px solid var(--line-light); justify-self: start; border-bottom-left-radius: 4px; }
.msg--out { background: var(--terra); color: var(--arcilla); justify-self: end; border-bottom-right-radius: 4px; }
.msg--sys { justify-self: center; font-size: 12px; border: 1.5px dashed var(--terra); color: var(--terra); background: transparent; }

/* llamada 09:00 */
.stage--call { display: grid; justify-items: center; }
.call { width: min(440px, 100%); align-self: center; }
.call__card { background: var(--carbon); color: var(--arcilla); border-radius: 22px; padding: 18px 18px 16px; box-shadow: 0 30px 50px -26px rgba(27, 26, 23, .55); border: 1px solid rgba(244, 241, 235, .08); }
.call__head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.call__head b { display: block; font-size: 16px; font-weight: 600; }
.call__head span.mono { font-size: 12.5px; color: var(--muted-d); }
.call__avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon-2); color: var(--papel); border: 1px solid rgba(244, 241, 235, .14); }
.call__avatar .isotype { width: 28px; height: auto; }
.live { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cian); }
.call__wave { display: block; width: 100%; height: 72px; margin: 16px 0 6px; }
.call__legend { display: flex; gap: 16px; font-size: 11px; color: var(--muted-d); }
.call__legend .is-agent::first-letter { color: var(--cian); }
.call__legend .is-caller::first-letter { color: #E0A48F; }
.call__reply { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(244, 241, 235, .16); display: grid; gap: 10px; }
.call__said { margin: 0; justify-self: start; display: grid; gap: 3px; background: var(--carbon-2); border: 1px solid rgba(244, 241, 235, .1); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 16px; }
.call__said .mono { font-size: 11px; color: #E0A48F; }
.call__done { margin: 0; font-size: 12px; color: var(--cian); }
.call__dims { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }

/* pantalla bloqueada 23:40 */
.stage--lock { display: grid; justify-items: center; }
.lock { background: #10201e url("../img/art/night.webp") center / cover; color: var(--arcilla); padding: 54px 12px 16px; }
.lock__time { font: 400 54px/1 var(--f-serif); text-align: center; margin: 0; }
.lock__date { text-align: center; font-size: 11.5px; color: var(--muted-d); margin: 4px 0 14px; }
.notifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notif { background: rgba(244, 241, 235, .13); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(244, 241, 235, .16); border-radius: 16px; padding: 8px 11px; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: 12.5px; line-height: 1.3; }
.notif b { font-weight: 600; }
.notif__txt { grid-column: 1 / -1; color: rgba(244, 241, 235, .75); }
.notif__app { font-size: 10px; color: var(--muted-d); letter-spacing: .04em; align-self: center; }

/* capas 09:01 */
.stage--layers { display: grid; gap: 16px; justify-items: center; padding-top: 10px; }
.layer { width: min(360px, 90%); text-align: center; padding: 16px; border: 1.5px solid currentColor; border-radius: 8px; transform: skewX(-12deg); font-size: 14px; }
.layer--2 { background: var(--carbon); color: var(--cian); border-color: var(--carbon); }
.lead-dot { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 0 6px rgba(5, 242, 219, .25); opacity: 0; }
.crm { width: min(360px, 90%); margin-top: 10px; font-size: 13px; }
.crm__row { padding: 8px 0; border-bottom: 1px dashed var(--line-light); }
.crm__row:last-child { border-bottom: 0; }
.crm__row b { background: var(--cian); color: var(--carbon); padding: 1px 6px; border-radius: 4px; font-weight: 600; margin-left: 6px; }

/* carrera 12:00 */
.stage--race { display: grid; gap: 28px; }
.lane { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 20px; }
.lane__who { margin: 0; font-size: 14px; }
.lane__who--vimy { color: var(--cian); }
.lane__track { border-bottom: 1.5px dashed var(--line-dark); padding-bottom: 12px; }
.lane__label { font-size: 13px; color: var(--muted-d); }
.lane__label b { color: var(--arcilla); }
.dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 22px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(244, 241, 235, .5); }
.dots i.on { background: var(--cian); }
.dots--done i { background: var(--cian); }

/* ---------- pruébalo (webchat) ---------- */
.art-stage { position: relative; padding: clamp(18px, 4vw, 44px); isolation: isolate; }
.art-stage::before { content: ""; position: absolute; inset: -10% -9%; z-index: -1; background: center / cover; -webkit-mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; pointer-events: none; }
.art-stage--night::before { background-image: url("../img/art/night.webp"); }
.art-stage--night .chatwin { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.pruebalo__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; }
.chatwin { color: var(--carbon); }
.chatwin__body { display: grid; grid-template-rows: 1fr auto; height: 460px; background: var(--papel); }
.chatwin__scroll { overflow-y: auto; padding: 18px; }
.chatwin__welcome p { margin: 0 0 14px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: #fff; border: 1.5px solid var(--carbon); border-radius: 999px; padding: 9px 14px; font-size: 14px; min-height: 40px; }
.chip:hover { background: var(--arcilla); }
.chatwin__form { display: flex; gap: 8px; padding: 12px; border-top: 1.5px solid var(--carbon); }
.chatwin__form input { flex: 1; font: 16px var(--f-sans); border: 1.5px solid var(--carbon); border-radius: 999px; padding: 10px 16px; min-height: 46px; }
.chatwin__form .btn { min-height: 46px; padding: 10px 18px; }
/* mensajes que genera webchat.js (usa clases de Tailwind; aquí se traducen) */
#chatbot-messages > div { display: flex; margin-bottom: 10px; }
#chatbot-messages > div[class*="justify-end"] { justify-content: flex-end; }
#chatbot-messages > div > div { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; border: 1.5px solid var(--line-light); background: #fff; }
#chatbot-messages > div[class*="justify-end"] > div { background: var(--terra); color: var(--arcilla); border-color: var(--terra); border-bottom-right-radius: 4px; }
#chatbot-messages > div[class*="justify-start"] > div { border-bottom-left-radius: 4px; }
#typing-indicator > div { display: flex; gap: 4px; }
#typing-indicator > div > div { width: 7px; height: 7px; border-radius: 50%; background: var(--terra); animation: bounce 1s infinite; }
@keyframes bounce { 50% { transform: translateY(-4px); } }

/* ---------- tu caso ---------- */
.tabs { margin-top: 40px; display: grid; }
.tabs > * { grid-column: 1; }
.tabs.is-stacked .tabs__panel { grid-row: 3; }
.tabs.is-stacked .tabs__panel:not(.is-on) { visibility: hidden; opacity: 0; }
.tabs__agent { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; letter-spacing: .04em; color: rgba(244, 241, 235, .8); }
.tabs__hint { margin: 0 0 14px; font-size: 12px; letter-spacing: .06em; opacity: .75; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 10px; }
.tabs__list button { display: inline-flex; align-items: center; gap: 0; min-height: 46px; padding: 0 18px 0 16px; border-radius: 999px; font: 500 15px var(--f-sans); cursor: pointer; background: transparent; color: var(--papel); border: 1px solid rgba(244, 241, 235, .45); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.tab__dot { flex: none; margin-right: 10px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .3s, border-color .3s; }
.tabs__list button:hover { background: rgba(244, 241, 235, .1); border-color: rgba(244, 241, 235, .8); }
.tabs__list button[aria-selected="true"] { background: var(--papel); color: var(--carbon); border-color: var(--papel); }
.tabs__list button[aria-selected="true"] .tab__dot { background: var(--terra); border-color: var(--terra); }
.tabs__list button:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.tabs__panel:not([hidden]) .tabs__text { animation: tab-in .45s var(--ease) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }
.tabs__text { margin: 34px 0 0; max-width: 30ch; font-size: clamp(1.5rem, 2.7vw, 2.3rem); line-height: 1.15; }

/* ---------- precios ---------- */
/* delgadita, como las pills de la barra de arriba: 40px de alto y borde fino */
.switch { position: relative; display: inline-flex; align-items: center; height: 40px; margin: 32px 0 26px; border: 1px solid color-mix(in srgb, var(--carbon) 22%, transparent); border-radius: 999px; padding: 3px; }
.switch button { position: relative; z-index: 1; background: none; border: 0; padding: 0 14px; height: 32px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer; transition: color .35s var(--ease); }
.switch button[aria-selected="true"] { color: var(--arcilla); }
.switch:not(.is-ready) button[aria-selected="true"] { background: var(--carbon); }   /* sin JS */
/* la píldora oscura se desliza hasta la opción elegida */
.switch__pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--carbon); transition: transform .5s cubic-bezier(.65, 0, .25, 1), width .5s cubic-bezier(.65, 0, .25, 1); }
.switch:not(.is-ready) .switch__pill { display: none; }
.plans.is-entering .plan { animation: plan-in .55s var(--ease) both; }
.plans.is-entering .plan:nth-child(2) { animation-delay: .07s; }
.plans.is-entering .plan:nth-child(3) { animation-delay: .14s; }
@keyframes plan-in { from { opacity: 0; transform: translateY(14px); } }
.plans-stack { display: grid; }
.plans-stack > .plans { grid-area: 1 / 1; }
.plans-stack.is-stacked > .plans:not(.is-on) { visibility: hidden; opacity: 0; pointer-events: none; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* cada plan es una ficha de dos caras: el frente con el precio y el respaldo con todo lo incluido. Las dos
   ocupan la misma celda, así que la ficha toma el alto de la más larga y nada se tiene que desplazar */
.plan { position: relative; display: grid; gap: 16px; perspective: 1800px; }
.plan__face { background: var(--papel); border: 1.5px solid var(--carbon); border-radius: 6px; padding: 26px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.plan--featured .plan__face { box-shadow: 8px 8px 0 var(--carbon); }
.plan__name { font: 400 32px/1 var(--f-serif); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan__tag { font-size: 11px; background: var(--cian); padding: 3px 8px; border-radius: 4px; }
.plan__for { margin: 8px 0 0; color: var(--muted-l); font-size: 14.5px; }
.plan__price { margin: 12px 0 0; }
.plan__amount { font: 400 48px/1 var(--f-serif); }
.plan__amount--quote { font-size: 32px; }
.plan__prices { display: grid; gap: 10px; margin: 14px 0 0; }
.plan__prices div { padding-top: 9px; border-top: 1px solid var(--line-light); }
.plan__prices dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-l); }
.plan__prices dd { margin: 3px 0 0; }
.plan__prices .plan__amount { font-size: clamp(26px, 2.4vw, 32px); }
.plan__prices .mono { font-size: 12px; }
.plan__lead, .plan__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.plan__lead li { font-weight: 600; }
.plan__lead li::before { content: "▸ "; color: var(--terra); }
.plan__items { color: #3A3631; }
/* el giro: la ficha da media vuelta sobre su eje vertical. La cara que queda de espaldas se oculta a mitad
   del giro (justo cuando está de canto), para que no se pueda tocar ni la lea el lector de pantalla */
.js .plan__face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .75s cubic-bezier(.65, 0, .25, 1), visibility 0s linear .37s; }
.js .plan__back { transform: rotateY(-180deg); visibility: hidden; }
.js .plan.is-flipped .plan__front { transform: rotateY(180deg); visibility: hidden; }
.js .plan.is-flipped .plan__back { transform: rotateY(0deg); visibility: visible; }
.plan.is-flipped { z-index: 2; }
.plans-stack.is-stacked > .plans:not(.is-on) .plan__face { visibility: hidden !important; }   /* el otro producto sigue oculto aunque tenga una ficha volteada */
/* frente */
.plan__more { align-self: flex-start; margin: 0 0 auto; padding: 0; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--f-sans); color: var(--terra); text-align: left; }
.plan__more::before { content: "+"; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font: 14px/1 var(--f-mono); transition: transform .35s var(--ease); }
.plan__more:hover::before, .plan__more:focus-visible::before { transform: rotate(90deg); }
.plan__more .mono { font-weight: 400; opacity: .7; }
/* respaldo: encabezado con la ×, la lista y el mismo botón del frente */
.plan__back { gap: 0; padding: 0; overflow: hidden; }
.plan__back-top { position: relative; flex: none; padding: 20px 60px 12px 22px; border-bottom: 1px solid var(--line-light); }
.plan__back-h { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--terra); }
.plan__back-name { margin: 3px 0 0; font: 400 28px/1 var(--f-serif); }
/* la ×: plana, sin fondo; entra girando cuando la ficha termina de voltearse y gira otra vez al cerrarla */
.plan__x { position: absolute; top: 14px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--carbon); font: 400 28px/1 var(--f-mono); cursor: pointer; }
.plan__x span { display: block; transform: rotate(-180deg); opacity: 0; transition: transform .6s var(--ease) .4s, opacity .3s ease .4s, color .2s; }
.plan.is-flipped .plan__x span { transform: none; opacity: 1; }
.plan.is-flipped .plan__x:hover span, .plan.is-flipped .plan__x:focus-visible span { transform: rotate(90deg); color: var(--terra); transition-delay: 0s; }
.plan.is-unflipping .plan__x span, .plan.is-unflipping .plan__x:is(:hover, :focus-visible) span { transform: rotate(270deg); opacity: 1; color: var(--terra); transition: transform .5s var(--ease), color .2s; }
.plan__x:focus:not(:focus-visible) { outline: none; }
.plan__items { flex: 1; padding: 2px 22px 12px; gap: 0; font-size: 13.5px; line-height: 1.4; color: #3A3631;
 }
.plan__items li { position: relative; padding: 8px 0 8px 27px; border-bottom: 1px solid var(--line-light); }
.plan__items li:last-child { border-bottom: 0; }
.plan__items li b { color: var(--carbon); font-weight: 600; }
/* la marca: un cuadrito terracota con el visto */
.plan__items li::before { content: ""; position: absolute; left: 0; top: 9.5px; width: 16px; height: 16px; border-radius: 4px; background: var(--terra); }
.plan__items li::after { content: ""; position: absolute; left: 5.5px; top: 12px; width: 4px; height: 8px; border: solid var(--papel); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.plan__back > .btn { flex: none; margin: 0 22px 22px; }
/* al terminar de voltearse, los puntos entran uno tras otro */
.plan.is-flipped .plan__items li { animation: sheet-item .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.42s + var(--i, 0) * 45ms); }
@keyframes sheet-item { from { opacity: 0; transform: translateY(10px); } }
/* sin JS: el respaldo va debajo del frente, sin giro ni × */
html:not(.js) .plan__x, html:not(.js) .plan__more, html:not(.js) .plan__front > .btn { display: none; }
/* con movimiento reducido: sin giro, una cara se funde en la otra */
@media (prefers-reduced-motion: reduce) {
  .js .plan__face { transform: none !important; transition: opacity .2s ease, visibility 0s linear .2s; }
  .js .plan__back { opacity: 0; }
  .js .plan.is-flipped .plan__back { opacity: 1; transition-delay: 0s; }
  .js .plan.is-flipped .plan__front { opacity: 0; }
  .js .plan:not(.is-flipped) .plan__front { transition-delay: 0s; }   /* el frente vuelve ya enfocable */
  .plan__x span, .plan.is-flipped .plan__items li { transition: none !important; animation: none !important; }
}
.plan .btn { justify-content: center; min-height: 40px; padding: 0 18px; font-size: 13.5px; }   /* como los botones de la barra */

/* ---------- proceso (paneles apilados) ---------- */

/* ---------- faq ---------- */
.faq__item { border-bottom: 1.5px solid var(--line-light); }
.on-dark .faq__item { border-color: var(--line-dark); }
.on-dark .faq__item p { color: var(--muted-d); }
.faq__item summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.2 var(--f-serif); position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 24px var(--f-mono); transition: transform .35s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--cian); }
.faq__a { overflow: hidden; }
.faq__item p { margin: 0 0 22px; color: #3A3631; max-width: 60ch; }

/* ---------- cierre ---------- */
/* cierre en terracota con la textura suavizada (una capa de terracota encima): separa los precios
   (claros) del FAQ (carbón) y cierra en un color cálido */
.cierre { background: linear-gradient(rgba(168, 69, 42, .74), rgba(168, 69, 42, .74)), #3a1f17 url("../img/art/ember.webp") center / cover; }
.cierre .booking { color: var(--carbon); }
/* en la página de agendar (agenda.php) el fondo es el de «Demo en vivo»: carbón, y detrás de la tarjeta la
   imagen nocturna que se deshace en el borde (la misma máscara de .art-stage). La imagen sobresale siempre lo
   mismo por arriba y por abajo (no un porcentaje: la tarjeta crece con cada respuesta y con el calendario), y la
   sección deja más espacio abajo, para que el footer nunca la corte en recto */
.agenda-page .cierre { background: var(--carbon); padding-bottom: max(200px, 22vh); }
.agenda-page .cierre .wrap { position: relative; isolation: isolate; }
.agenda-page .booking::before { content: ""; position: absolute; inset: -90px -12%; z-index: -1; background: url("../img/art/night.webp") center / cover;
  -webkit-mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; pointer-events: none; }
.agenda-page .booking { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.agenda-page .cierre .t-title em { color: var(--cian); }
.cierre__lead { max-width: 52ch; margin: 18px 0 44px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--papel) !important; opacity: 1 !important; }
.booking { position: relative; background: var(--papel); border: 1px solid rgba(27, 26, 23, .12); border-radius: 4px; padding: clamp(20px, 3vw, 34px); box-shadow: 0 1px 0 rgba(27, 26, 23, .06), 0 30px 50px -28px rgba(27, 26, 23, .7); }
.booking__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; }
.booking__h { font: 400 26px/1.1 var(--f-serif); margin: 0 0 16px; }
.muted-l { font-size: 12px; color: var(--muted-l); }
.booking__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--full { grid-column: 1 / -1; }
.phone-row { display: flex; gap: 8px; }
.phone-row > input { flex: 1; }
.phone-selector-wrapper { position: relative; width: 104px; flex-shrink: 0; }
.phone-selector-wrapper > div:first-of-type { height: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 12px; border: 1.5px solid var(--carbon); border-radius: 10px; background: var(--papel); font: 15px var(--f-mono); cursor: pointer; }
.phone-selector-wrapper svg { width: 12px; height: 12px; }
body > div[class*="max-h-60"] { width: 260px; max-height: 260px; background: var(--papel); color: var(--carbon); border: 1.5px solid var(--carbon); border-radius: 10px; z-index: 600; flex-direction: column; overflow: hidden; box-shadow: 6px 6px 0 var(--carbon); }
body > div[class*="max-h-60"].flex { display: flex; }
body > div[class*="max-h-60"] input { border: 0; border-bottom: 1.5px solid var(--line-light); padding: 10px 12px; font: 14px var(--f-sans); }
body > div[class*="max-h-60"] > div { overflow-y: auto; }
body > div[class*="max-h-60"] > div > div { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line-light); }
body > div[class*="max-h-60"] > div > div:hover { background: var(--arcilla); }
.cal { border: 1.5px solid var(--carbon); border-radius: 8px; padding: 14px; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__nav button { background: none; border: 1.5px solid var(--carbon); border-radius: 8px; width: 40px; height: 40px; }
.cal__head, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.scheduler-day-header { font: 11px var(--f-mono); color: var(--muted-l); padding: 4px 0; }
.scheduler-day { font: 14px var(--f-mono); padding: 9px 0; border-radius: 8px; cursor: pointer; border: 1.5px solid transparent; }
.scheduler-day:hover { border-color: var(--carbon); }
.scheduler-day--disabled { opacity: .3; cursor: default; pointer-events: none; }
.scheduler-day--today { text-decoration: underline; text-decoration-color: var(--cian); text-decoration-thickness: 3px; }
.scheduler-day--selected { background: var(--carbon); color: var(--cian); }
.scheduler-day--empty { pointer-events: none; }
.slots { margin-top: 14px; }
.slots__t { font-size: 12px; color: var(--muted-l); margin: 0 0 8px; }
.slots__list { display: flex; flex-wrap: wrap; gap: 8px; }
.scheduler-slot { font: 14px var(--f-mono); background: #fff; border: 1.5px solid var(--carbon); border-radius: 999px; padding: 8px 12px; min-height: 40px; }
.scheduler-slot--selected { background: var(--cian); }
.booking__foot { margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed var(--line-light); display: grid; gap: 10px; justify-items: center; text-align: center; }
.booking__confirm { width: 100%; justify-content: center; }
.booking__note { font-size: 12px; color: var(--muted-l); margin: 0; }
.booking__wa { font-size: 14px; color: var(--terra); font-weight: 600; text-decoration: none; }
.booking__done { text-align: center; padding: 30px 0; transition: opacity .5s; }
.booking__check { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--cian); display: grid; place-items: center; font-size: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__grid, .chapter__grid, .pruebalo__grid, .faq__grid, .booking__grid, .loop, .porque__grid, .nosotros__grid { grid-template-columns: 1fr; }
  /* lo que recibes: carrusel lateral con imán; las flechas quedan entre tarjeta y tarjeta */
  .value { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 8px calc(-1 * var(--gutter)) 36px; padding: 30px var(--gutter) 26px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .value::-webkit-scrollbar { display: none; }
  .vstep { flex: 0 0 min(80%, 320px); scroll-snap-align: start; }
  .value__hint { display: block; margin: 22px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-l); }
  /* en móvil los títulos son fichas en una fila que se ajusta y el panel va debajo */
  .idx, .porque__grid .idx { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .idx__list, .porque__grid .idx__list { order: 1; grid-column: auto; grid-row: auto; display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .idx__pane, .porque__grid .idx__pane { order: 2; grid-column: auto; grid-row: auto; position: static; margin-top: 0; padding: 14px 16px 16px; }
  .idx__item { display: inline-flex; gap: 6px; width: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; }
  .idx--light .idx__item { border-color: rgba(27, 26, 23, .3); }
  .idx__item:hover, .idx__item.is-on { padding-left: 12px; }
  .idx__item.is-on { background: var(--acc); border-color: var(--acc); color: var(--carbon); }
  .idx--light .idx__item.is-on { color: var(--papel); }
  .idx__item.is-on .idx__n { color: inherit; }
  .idx__t { font: 500 13.5px/1.2 var(--f-sans); }
  .idx__n { font-size: 10.5px; }
  .idx__arr { display: none; }
  .idx__text { font-size: 13.5px; }
    .porque__grid { display: block; }
  .vstep:not(:last-child)::after { right: -22px; }
  .flow { grid-template-columns: 1fr; gap: 24px; }
  .flow__side { display: none; }
  .flow.is-live .slab__txt { display: block; }
  .slab { grid-template-columns: 1fr; gap: 8px; }
  .nosotros__intro { position: static; }
    .loop__ring { max-width: 300px; margin: 0 auto; }
  .chapter__grid--rev .chapter__copy { order: 0; }
  .hero__art { width: min(420px, 100%); justify-self: center; margin-top: 20px; }
  .hero__art { padding-bottom: 0; }
  /* sobresale a los lados, pero nunca más allá de la pantalla (menos 8 px): así el grano del borde se ve
     entero y no lo corta el borde de la sección en línea recta */
  .glass-wrap { aspect-ratio: 1 / 1; margin: -6% max(-10%, calc((100% - 100vw) / 2 + 8px)) 0; }
  .hero__art .agentlog { position: relative; z-index: 2; left: auto; right: auto; bottom: auto; margin: -34% 14px 0; }
  .plans { grid-template-columns: 1fr; }
          }
@media (max-width: 560px) {
  .booking__form { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 1fr; gap: 6px; }
}

/* clip (PNG) sujetando la hoja de la agenda */
.booking__clip { position: absolute; top: -36px; right: 64px; z-index: 2; width: 36px; height: auto; rotate: 4deg; pointer-events: none; }

/* ---------- así piensa y actúa un agente (sceneThink) ---------- */
.think__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.think__steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }
.think__step { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 10px 12px; border-radius: 10px; transition: background .35s, opacity .35s; }
.think__step span { font-size: 11.5px; color: var(--terra); padding-top: 3px; }
.think__step b { font: 400 22px/1.15 var(--f-serif); }
.think__step p { grid-column: 2; margin: 3px 0 0; font-size: 14px; color: var(--muted-l); }
.think.is-live .think__step { opacity: .35; }
.think.is-live .think__step p { display: none; }
.think.is-live .think__step.is-on { opacity: 1; background: var(--papel); box-shadow: 0 10px 24px -18px rgba(27, 26, 23, .5); }
.think.is-live .think__step.is-on p { display: block; }
.think__step--act b { color: var(--terra); }

/* escenario: cada etapa es una capa; sin JS van una debajo de otra, con JS se turnan
   en el mismo sitio (alto fijo) y cada una se centra, así no se descuadra en móvil */
.tk { --int: #A8452A; --day: #06615A; --hour: #D9663B;
  position: relative; display: grid; gap: 28px; padding: 26px; border-radius: 18px; background: var(--papel); border: 1px solid var(--line-light); box-shadow: 0 30px 60px -40px rgba(27, 26, 23, .6); overflow: hidden; }
.tk::before { content: ""; position: absolute; inset: 0; background: url("../img/tex/fibers.webp"); background-size: 420px; opacity: .45; pointer-events: none; }
.tk__stage { position: relative; display: grid; gap: 18px; align-content: center; }
.tk.is-live { display: block; height: 470px; }
.tk.is-live .tk__stage { position: absolute; inset: 26px; }
.tk__bubble { justify-self: start; max-width: 88%; margin: 0; display: grid; gap: 4px; padding: 11px 15px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line-light); font-size: 17px; box-shadow: 0 12px 24px -18px rgba(27, 26, 23, .45); }
.tk__bubble .mono { font-size: 10.5px; color: var(--muted-l); }
.tk__tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 6px; }
.tk__tok { display: grid; justify-items: center; gap: 4px; transition: opacity .3s; }
.tk__tok b { font: 500 14px var(--f-mono); padding: 5px 8px; border-radius: 7px; background: #fff; border: 1px solid var(--line-light); transition: background .3s, color .3s, border-color .3s; }
.tk__tok span { font: 10px var(--f-mono); color: var(--muted-l); }
.tk.is-grouped .tk__tok:not(.tk__tok--int):not(.tk__tok--day):not(.tk__tok--hour) { opacity: .28; }
.tk.is-grouped .tk__tok--int b { background: var(--int); border-color: var(--int); color: #fff; }
.tk.is-grouped .tk__tok--day b { background: var(--day); border-color: var(--day); color: #fff; }
.tk.is-grouped .tk__tok--hour b { background: var(--hour); border-color: var(--hour); color: #fff; }
.tk__data { display: flex; flex-wrap: wrap; gap: 8px; }
.tk__field { margin: 0; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--carbon); color: var(--papel); border-left: 4px solid var(--c, var(--terra)); }
.tk__field--int { --c: var(--int); } .tk__field--day { --c: var(--day); } .tk__field--hour { --c: var(--hour); }
.tk__field .mono { font-size: 10px; color: var(--muted-d); text-transform: uppercase; letter-spacing: .06em; }
.tk__field b { font: 500 15px var(--f-mono); }
.tk__label { margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--terra); }
.tk__cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tk__slot { display: grid; gap: 2px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line-light); transition: background .3s, border-color .3s, transform .3s; }
.tk__slot .mono { font-size: 15px; }
.tk__slot em { font: normal 11px var(--f-sans); color: var(--muted-l); }
.tk__slot.is-busy { background: repeating-linear-gradient(135deg, #EFE9DF 0 6px, #F7F3EC 6px 12px); }
.tk__slot.is-busy .mono { color: var(--muted-l); text-decoration: line-through; }
.tk.is-found .tk__slot.is-target { background: var(--cian-ink); border-color: var(--cian-ink); color: #fff; transform: scale(1.05); }
.tk.is-found .tk__slot.is-target em { color: #BFEDE6; }
.tk__call { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--carbon); color: var(--arcilla); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk__fn { color: var(--cian); }
.tk__ok { color: #9BE3C9; margin-left: 6px; }
.tk__reply { justify-self: end; max-width: 88%; margin: 4px 0 0; display: grid; gap: 3px; padding: 11px 14px; border-radius: 16px 16px 4px 16px; background: var(--terra); color: var(--papel); font-size: 15px; }
.tk__reply .mono { font-size: 10.5px; opacity: .8; }
.tk__time { margin: 0; justify-self: end; font-size: 12px; color: var(--cian-ink); }
@media (max-width: 960px) {
  .think__grid { grid-template-columns: 1fr; gap: 20px; }
  .think.is-live .think__steps { margin-top: 14px; }
  .think.is-live .think__step:not(.is-on) { display: none; }
  .tk { padding: 16px; }
  .tk.is-live { height: 420px; }
  .tk.is-live .tk__stage { inset: 16px; }
  .tk__bubble { font-size: 15px; }
  .tk__tok b { font-size: 12.5px; padding: 4px 6px; }
  .tk__cal { grid-template-columns: repeat(2, 1fr); }
  .tk__slot { padding: 9px 10px; }
}

/* aliados y respaldos (dentro de «Quiénes confían»): logos oficiales */
/* Aliados y respaldos (referente: typesafe.ai). Sin tarjetas: esquinas de registro, guía punteada,
   columnas con filete a la izquierda y la privacidad en letras de puntos gigantes. */
.allies { position: relative; margin-top: 96px; padding: 34px 28px 40px; }
/* marco de cuatro esquinas: rodea el bloque y, al pasar sobre un aliado, viaja hasta él en cian (home-scenes.js, alliesFrame) */
.allies__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; --c: rgba(244, 241, 235, .4); --s: 12px; transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1), width .55s cubic-bezier(.2,.8,.2,1), height .55s cubic-bezier(.2,.8,.2,1); }
.allies__frame.is-on { --c: var(--cian); --s: 22px; }
.allies__frame i { position: absolute; width: var(--s); height: var(--s); border: 0 solid var(--c); transition: width .4s, height .4s, border-color .3s; }
.allies__frame i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.allies__frame i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.allies__frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
.allies__frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
.allies__lead { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.allies__lead .kicker { margin: 0; flex: none; }
.allies__lead .mono { flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-d); }
.allies__dots { flex: 1; min-width: 30px; height: 1px; background: radial-gradient(circle, rgba(244, 241, 235, .45) 1px, transparent 1.3px) 0 50% / 6px 3px repeat-x; align-self: center; }

.allies__row { list-style: none; margin: 26px -26px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8px; }
.ally { position: relative; padding: 24px 26px 26px; text-align: center; }
.ally__logo { height: 56px; display: flex; align-items: center; justify-content: center; }
.ally__logo img { display: block; width: auto; height: auto; max-width: 100%; }
.ally--meta .ally__logo img { max-height: 26px; }
.ally--anthropic .ally__logo img { max-height: 19px; }
.ally--nido .ally__logo img { max-height: 23px; }
.ally--ccc .ally__logo img { max-height: 44px; }
.ally__what { margin: 30px 0 0; font: 500 19px/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--papel); }
.ally__why { margin: 8px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-d); max-width: 30ch; text-wrap: balance; }

/* regulación: la serif de la marca como portada de revista, con notas al pie */
.law { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--line-dark); text-align: center; }
.law__stack { margin: 0; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0 .1em; font-family: var(--f-serif); font-weight: 400; line-height: .85; color: var(--papel); }
.law__w, .law__amp { display: inline-block; }
.law__w { font-size: clamp(84px, 15.5vw, 250px); letter-spacing: -.02em; }
.law__w--i { font-style: italic; }
.law__w--i sup { margin-left: .4em; font-style: normal; }
.law__w sup { position: relative; top: .5em; margin-left: .15em; font-size: .1em; letter-spacing: 0; vertical-align: top; color: var(--cian); }
.law__amp { font-style: italic; font-size: clamp(100px, 19vw, 305px); color: var(--terra); cursor: pointer; transform-origin: 50% 60%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.law__notes { display: flex; justify-content: center; gap: 22px 56px; flex-wrap: wrap; margin: 44px auto 0; max-width: 840px; text-align: left; }
.law__notes p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--muted-d); }
.law__notes .mono { margin-right: 8px; color: var(--cian); }
@media (max-width: 1100px) { .allies__row { grid-template-columns: 1fr 1fr; row-gap: 8px; } }
@media (max-width: 640px) {
  .allies { padding: 26px 16px 30px; margin-top: 70px; }
  .allies__lead { flex-wrap: wrap; row-gap: 8px; } .allies__dots { display: none; }
  .allies__row { row-gap: 10px; }
  .allies__row { margin: 18px -12px 0; column-gap: 0; } .ally { padding: 14px 12px; }
  .ally__logo { height: 44px; }
  .ally--meta .ally__logo img { max-height: 19px; } .ally--anthropic .ally__logo img { max-height: 13px; } .ally--nido .ally__logo img { max-height: 17px; } .ally--ccc .ally__logo img { max-height: 32px; }
  .ally__what { margin-top: 18px; font-size: 16px; } .ally__why { font-size: 13px; }
  .law { margin-top: 56px; padding-top: 40px; }
  .law__stack { flex-direction: column; align-items: center; line-height: .9; }
  .law__w { font-size: 27vw; } .law__amp { font-size: 30vw; margin: -.08em 0; }
  .law__notes { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .allies__frame, .allies__frame i { transition: none; } }

/* ---------- tecnología: cerrada hasta que alguien la abre ---------- */
.tech__toggle { margin-top: 28px; }
.tech__toggle .arr { display: inline-block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tech__toggle[aria-expanded="true"] .arr { transform: rotate(180deg); }
.tech__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .75s cubic-bezier(.2,.7,.2,1); }
.tech__body > div { min-height: 0; overflow: hidden; }
.tech.is-collapsed .tech__body { grid-template-rows: 0fr; }
.tech__body .flow { transition: opacity .5s .15s; }
.tech.is-collapsed .tech__body .flow { opacity: 0; transition-delay: 0s; }

/* ---------- noche → madrugada: un teléfono, dos pantallas lado a lado (sceneDuo) ---------- */
.chapter--duo { transition: background-color .7s ease, color .7s ease; }
.stage--duo { display: grid; justify-items: center; gap: 14px; }
.duo__screens { position: absolute; top: 2.66%; bottom: 2.66%; left: 5.38%; right: 5.38%; border-radius: calc(min(330px, 86vw) * .118); overflow: hidden; isolation: isolate; }
.duo__screens .device__screen { top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; }
.chapter--duo:not(.is-duo) .duo__screens .phone { display: none; }
.duo__dots { display: flex; gap: 6px; margin: 0; }
.duo__dots i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .3; transition: width .4s, opacity .4s; }
.duo__dots i.is-on { width: 18px; opacity: .9; }
.chapter--duo.is-duo .duo__copy { display: grid; }
.chapter--duo.is-duo .duo__a, .chapter--duo.is-duo .duo__b { grid-area: 1 / 1; }
.chapter--duo:not(.is-duo) .duo__b { margin-top: 48px; }
/* en móvil el teléfono conserva su tamaño: el texto de la noche va arriba, el de la madrugada
   debajo, y solo el teléfono se queda fijo mientras cambia de pantalla */
@media (max-width: 960px) {
  .chapter--duo .chapter__grid { gap: 34px; }
  .chapter--duo .duo__copy, .chapter--duo.is-duo .duo__copy { display: contents; }
  .chapter--duo .duo__a { order: 0; }
  .chapter--duo .stage--duo { order: 1; }
  .chapter--duo .duo__b, .chapter--duo.is-duo .duo__b { order: 2; grid-area: auto; margin-top: 0; }
}

/* ---------- qué hacemos, por sector (initSectors en site.js) ---------- */
.sect__menu { position: relative; }
.sect__pick { display: none; width: 100%; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 14px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(244, 241, 235, .45); background: rgba(244, 241, 235, .06); color: var(--papel); font: 500 16px var(--f-sans); text-align: left; cursor: pointer; }
.sect__pick .mono { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cian); }
.sect__pick b { flex: 1; font-weight: 500; }
.sect__caret { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.sect__menu.is-open .sect__caret { transform: translateY(2px) rotate(-135deg); }
.sect__pick:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.sect { margin-top: 38px; }
.sect__chips { margin-bottom: 22px; }
.sect__term { position: relative; max-width: 980px; min-height: var(--term-h, 250px); padding: 20px 24px 24px; border-radius: 14px; background: var(--carbon); border: 1px solid var(--line-dark); color: var(--arcilla); box-shadow: 0 30px 50px -26px rgba(27, 26, 23, .6); }
.sect__bar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-dark); font-size: 11.5px; color: var(--muted-d); }
.sect__bar b { font-weight: 400; color: var(--cian); }
.sect__bar .idx__led { background: var(--cian); }
.sect__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sect__lines[hidden] { display: none; }
.sect__lines li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
.sect__area { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cian); }
.sect__area::before { content: "› "; color: var(--muted-d); }
.sect__txt { font: 400 15px/1.55 var(--f-mono); color: var(--arcilla); }
.sect__txt.is-typing::after, .sect__lines li:last-child .sect__txt.is-done::after { content: "▋"; margin-left: 2px; color: var(--cian); }
html.caret-off .sect__lines li:last-child .sect__txt.is-done::after { opacity: 0; }
.sect__lines li.is-wait { visibility: hidden; }
/* el documento que entrega el agente: la última salida de la terminal, como un archivo */
.sect__out { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line-dark); }
.sect__file { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(5, 242, 219, .35); background: rgba(5, 242, 219, .06); }
.sect__file b { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--cian); }
.sect__file b i { flex: none; width: 11px; height: 14px; border: 1.5px solid currentColor; border-radius: 1px 5px 1px 1px; }
.sect__out .sect__txt { font-size: 14px; }
.sect__more { margin: 22px 0 0; font-size: 15px; color: rgba(244, 241, 235, .85); }
.sect__more a { color: var(--papel); font-weight: 600; text-underline-offset: 4px; }
.anchor { position: absolute; top: 0; }
@media (max-width: 640px) {
  /* en móvil los sectores van en un menú desplegable que flota sobre la terminal (no empuja nada) */
  .sect__pick { display: flex; }
  .sect__chips { position: absolute; z-index: 6; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 8px; border-radius: 28px; background: var(--carbon); border: 1px solid var(--line-dark); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: opacity .22s, transform .3s var(--ease), visibility 0s .3s; }
  .sect__menu.is-open .sect__chips { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .3s var(--ease), visibility 0s; }
  .sect__chips button { width: 100%; justify-content: flex-start; min-height: 46px; border-color: transparent; border-radius: 999px; font-size: 15px; }
  .sect__chips button:hover { border-color: transparent; }
  .sect__term { padding: 16px 16px 18px; }
  .sect__lines li { grid-template-columns: 1fr; gap: 2px; }
  .sect__txt { font-size: 13.5px; }
}

/* ---------- agendar conversando (initIntake en forms.js) ----------
   Vindam pregunta de a una cosa con animación de terminal y por dentro llena #contact-form.
   Cada dato que se completa enciende su punto en la fila de progreso (recompensa). */
.booking.is-chat { max-width: 820px; }
.booking.is-chat .booking__grid { display: none; }
.booking.is-chat .booking__foot { display: none; }
.booking.is-chat.is-ready .booking__foot { display: grid; animation: intake-in .5s var(--ease) both; }
.intake__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed rgba(27, 26, 23, .22); padding-right: 96px; }
.intake__bar { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted-l); }
.intake__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(27, 26, 23, .4); }
.intake__steps li { position: relative; display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.intake__steps i { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .3s, border-color .3s; }
.intake__steps li.is-now { color: var(--carbon); }
.intake__steps li.is-done { color: var(--cian-ink); }
.intake__steps li.is-done i { background: var(--cian); border-color: var(--cian-ink); animation: intake-pop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
/* destellos de la recompensa: puntitos que salen del punto encendido */
.intake__spark { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--cian); pointer-events: none; animation: intake-spark .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.intake__spark:nth-child(3n) { background: var(--terra); }
@keyframes intake-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes intake-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes intake-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intake__thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.intake__msg { max-width: 88%; animation: intake-in .35s var(--ease) both; }
.intake__msg--bot { justify-self: start; font: 400 15px/1.6 var(--f-mono); color: var(--carbon); }
.intake__msg--bot::before { content: "› "; color: var(--terra); }
.intake__msg--bot.is-typing::after { content: "▋"; margin-left: 2px; color: var(--terra); }
.intake__dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.intake__dots b { width: 6px; height: 6px; border-radius: 50%; background: rgba(27, 26, 23, .45); animation: intake-dot 1s infinite; }
.intake__dots b:nth-child(2) { animation-delay: .15s; } .intake__dots b:nth-child(3) { animation-delay: .3s; }
@keyframes intake-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.intake__msg--me { position: relative; justify-self: end; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--carbon); color: var(--papel); font-size: 15px; line-height: 1.4; }
.intake__msg--me .intake__ok { position: absolute; left: -10px; top: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cian); color: var(--carbon); font-size: 12px; font-weight: 700; animation: intake-pop .55s cubic-bezier(.3, 1.8, .5, 1) .1s both; }
.intake__msg--cal { max-width: none; width: 100%; }
/* opción múltiple (Contacto: ¿reunión sí o no?) */
.intake__msg--choice { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 4px 0 14px; }   /* aire para que no quede pegada al borde */
.intake__msg--choice .btn { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
.intake__composer { margin-top: 18px; }
.intake__composer[hidden] { display: none; }
.intake__prefix { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted-l); }
.intake__row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 24px; border: 1.5px solid rgba(27, 26, 23, .55); border-radius: 999px; background: #fff; cursor: text; transition: box-shadow .2s, border-color .2s; }
.intake__row .btn { border-radius: 999px; }
.intake__row:focus-within { border-color: var(--carbon); box-shadow: 0 0 0 3px var(--cian); }
.intake__row input { flex: 1; min-width: 0; border: 0; background: transparent; font: italic 400 clamp(1.2rem, 2.2vw, 1.5rem) var(--f-serif); color: var(--carbon); min-height: 46px; }
.intake__row input:focus { outline: none; }
.intake__row input::placeholder { color: rgba(27, 26, 23, .42); }
.intake__err { margin: 8px 0 0; min-height: 1em; font-size: 13px; color: var(--terra); }
.intake__row.is-shake { animation: intake-shake .4s; }
@keyframes intake-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (max-width: 640px) {
  .intake__top { padding-right: 40px; }
  /* en móvil el clip se corre a la esquina y sujeta solo el borde de la hoja */
  .booking__clip { right: 14px; top: -26px; width: 28px; }
  .intake__row input { font-size: 1.05rem; }
  .intake__row .btn { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .intake__send { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .intake__steps { gap: 6px 10px; font-size: 9.5px; }
  .intake__msg--bot { font-size: 14px; }
  .intake__row .btn { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .intake__msg, .intake__steps i, .intake__ok, .intake__spark, .intake__row.is-shake { animation: none !important; } }

/* ---------- FAQ: encabezado a lo ancho y preguntas en dos columnas numeradas ---------- */
.faq__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: 44px; }
.faq__head .t-title { margin-bottom: 0; }
.faq__ask { font-size: 16px; color: var(--muted-d); text-decoration: none; padding-bottom: 6px; }
.faq__ask b { color: var(--papel); font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgba(244, 241, 235, .35); transition: color .2s, border-color .2s; }
.faq__ask:hover b { color: var(--cian); border-color: var(--cian); }
.faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.faq__col { border-top: 1.5px solid var(--line-dark); }
.faq__item summary { display: grid; grid-template-columns: 38px 1fr; align-items: baseline; }
.faq__n { font-size: 12px; color: var(--cian); }
.faq__item .faq__a p { padding-left: 38px; }
@media (max-width: 960px) {
  .faq__cols { grid-template-columns: 1fr; }
  .faq__col + .faq__col { border-top: 0; }
  .faq__head { margin-bottom: 28px; }
}


/* ---------- nosotros: hero a la manera de la «virtual gallery» de Okey Studio (sceneAboutHero) ---------- */
.about-hero { position: relative; height: 100svh; min-height: 620px; padding: 0; overflow: hidden; }
.about-hero__in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 104px var(--gutter) 26px; }
.about-hero__top { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-light); font: 600 11px/1.2 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted-l); }
.about-hero__mid { text-align: center; margin-bottom: 6vh; }
/* el cursor de escritura del sitio (parpadea al unísono con el del logo de la nav), en terracota */
/* no cuenta para el centrado: «Somos» queda centrado y el cursor cuelga a su derecha (el espaciado de letras ya deja aire) */
.about-hero__caret { width: 7.7px; height: 15.4px; margin: 0 -7.7px 0 0; vertical-align: -2.5px; background: var(--terra); }   /* las medidas del cursor del logo de la nav */
.about-hero__title { margin: 16px 0 0; font: 400 clamp(4.4rem, 14vw, 14rem)/.84 var(--f-serif); letter-spacing: -.035em; color: var(--carbon); }
.about-hero__title span { display: block; margin-bottom: 14px; font: 600 12px/1 var(--f-sans); letter-spacing: .34em; text-transform: uppercase; }
/* el hueco del logo: ahí se ve la Cybertruck (el clip se encuadra en su «vindam_») */
/* ancho: 92vw, así la foto registrada en el logo ya es más ancha que la
   pantalla y la Cybertruck nunca muestra los lados cortados; en pantallas bajas manda el alto */
.about-hero__slot { position: relative; display: block; width: min(92vw, (100svh - 380px) * 4); min-width: min(92vw, 520px); aspect-ratio: 4 / 1; margin: 6px auto 0; }
/* el logo ocupa el hueco; al bajar, la Cybertruck aparece encima con su logo en el mismo sitio */
.about-hero__slot .logo-original { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); color: var(--carbon); }
/* la frase que invita a bajar: serif, con el giro en terracota, como las frases de la galería */
.about-hero__lead { max-width: 34ch; margin: 26px auto 0; text-wrap: balance; font: 400 clamp(1.35rem, 2.1vw, 1.9rem)/1.2 var(--f-serif); letter-spacing: -.005em; color: var(--carbon); }
.about-hero__lead em { color: var(--terra); }
.about-hero__visit { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 11px/1.2 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; }
.about-hero__visit i { width: 13px; height: 13px; border: 1.5px dashed currentColor; border-radius: 50%; animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rec { 50% { opacity: 0; } }
/* la Cybertruck: el escenario tiene el tamaño de la foto y JS lo coloca con una matriz 3D (la
   homografía que pone el logo pintado bajo el logo del hueco). Encima va el logo vectorial en las
   mismas coordenadas: en carbón fuera de la mancha y en blanco dentro. Sin JS queda oculta. */
.about-hero__photo { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; visibility: hidden; }
/* las franjas del error de la matrix: una máscara de filas (un lienzo de 1 px de ancho que JS dibuja y el
   navegador estira sin suavizar, así los bordes quedan nítidos). Antes de JS no se ve nada */
.about-hero__reveal { position: absolute; inset: 0; image-rendering: pixelated;
  -webkit-mask: linear-gradient(transparent, transparent); mask: linear-gradient(transparent, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; }
.about-hero__reveal.is-open { -webkit-mask: none; mask: none; }
/* «error de la matrix»: copias de la foto que JS recorta en una franja y corre de lado un instante;
   dos van teñidas (cian y roja) para el corrimiento de color */
.about-hero__tear { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.about-hero__tear--c { mix-blend-mode: screen; opacity: .55; filter: grayscale(1) sepia(1) saturate(9) hue-rotate(125deg); }
.about-hero__tear--r { mix-blend-mode: screen; opacity: .45; filter: grayscale(1) sepia(1) saturate(9) hue-rotate(-40deg); }
.about-hero__stage { position: absolute; left: 0; top: 0; width: 960px; height: 1680px; transform-origin: 0 0; will-change: transform; }
.about-hero__media { display: block; width: 960px; height: 1680px; max-width: none; }
/* el logo va a 4× (1600×400) y la matriz lo reduce: así queda nítido aunque la foto se agrande */
.about-hero__paint { position: absolute; left: 0; top: 0; width: 1600px; height: 400px; transform-origin: 0 0; color: var(--carbon); }
.about-hero__paint .logo-original { display: block; width: 100%; height: 100%; }
.about-hero__paint--cyber { color: #EDEEEC; }   /* el blanco de la pintura de la puerta */
@media (max-width: 700px) {
  .about-hero__top span:last-child { display: none; }
  .about-hero__slot { width: 86vw; aspect-ratio: 3 / 1; }
}
@media (prefers-reduced-motion: reduce) { .about-hero__visit i { animation: none; } }

/* ---------- nosotros: galería de momentos (sceneGallery) ----------
   Sin clase .is-h se lee de arriba abajo (móvil, sin JS, movimiento reducido). Con .is-h
   (computador) la sección se fija y la pista corre de lado. */
.galeria figure { margin: 0; overflow: hidden; border-radius: 3px; background: #d6cfc3; }
.galeria figure img, .galeria figure video { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__track { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.g-panel { position: relative; margin-bottom: clamp(56px, 9vw, 110px); }
.g-panel:last-child { margin-bottom: 0; }
.g-open__title { margin: 18px 0 0; font: 400 clamp(2.8rem, 6.2vw, 6.4rem)/.95 var(--f-serif); letter-spacing: -.02em; }
.g-open__title em { color: var(--terra); }
.g-cap { margin: 0; max-width: 32ch; font: 500 12.5px/1.65 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; }
/* la frase grande de cada escena: serif, y el giro en cursiva terracota (como los títulos) */
.g-say { margin: 0; max-width: 22ch; font: 400 clamp(1.6rem, 4.4vw, 3.4rem)/1.05 var(--f-serif); letter-spacing: -.01em; }
.g-say em { color: var(--terra); }
/* Leo y Christian en sus escritorios, lado a lado y a la misma altura */
.g-big__main { display: flex; gap: 10px; }
.g-big__main figure { flex: var(--ar) 1 0; aspect-ratio: var(--ar); }
.g-big__side { display: grid; grid-template-columns: 38% 1fr; gap: 18px; align-items: end; margin-top: 18px; }
.g-print { aspect-ratio: var(--ar); }
.g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.g-pair__a { aspect-ratio: 9 / 16; }
.g-pair__b { aspect-ratio: 9 / 16; }
.g-pair__cap { grid-column: 1 / -1; margin-top: 6px; line-height: 1.8; }
/* cada oración en su propio bloque, con aire entre una y otra */
.g-pair__cap span { display: block; }
.g-pair__cap span + span { margin-top: .9em; }
/* «NOSOTROS» enorme; el bloque carbón lo cruza y lo que tapa se ve en claro (una copia recortada) */
.g-word { height: clamp(300px, 62vw, 620px); margin-inline: calc(50% - 50vw); overflow: hidden; display: flex; align-items: center; }
.g-word__txt { display: block; margin: 0; padding-left: var(--gutter); font: 400 clamp(8rem, 30vw, 26rem)/.8 var(--f-serif); letter-spacing: -.035em; white-space: nowrap; color: var(--carbon); translate: var(--w, 0px) 0; }
.g-word__ink { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 44%; overflow: hidden; background: var(--carbon); transform: translateX(var(--x, 60vw)); }
.g-word__ink .g-word__txt { position: absolute; top: 50%; left: 0; color: var(--arcilla); translate: var(--w, 0px) -50%; transform: translateX(calc(-1 * var(--x, 60vw))); }
.g-float { position: absolute; z-index: 2; width: clamp(100px, 20vw, 180px); aspect-ratio: var(--ar); box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .55); }
.g-float--1 { left: 6%; top: 6%; rotate: -6deg; }
.g-float--2 { right: 8%; bottom: 5%; rotate: 5deg; }
.g-float--3 { left: 46%; top: 10%; rotate: -2deg; }
.g-clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-clip { position: relative; aspect-ratio: 9 / 16; }
.g-clip--2 { translate: 0 22px; }
.g-clips .g-say { grid-column: 1 / -1; margin-top: 40px; }
.g-rec { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: .08em; color: var(--papel); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.g-rec i { width: 6px; height: 6px; border-radius: 50%; background: #ff4a3d; animation: rec 1.2s steps(1) infinite; }
/* un dato en grande: el número manda y la frase lo explica */
.g-stat { display: grid; grid-template-columns: 1fr 34%; gap: 14px 20px; align-items: end; }
.g-stat__n { grid-column: 1; margin: 0; font: 400 clamp(9rem, 38vw, 22rem)/.78 var(--f-serif); letter-spacing: -.04em; color: var(--terra); }
.g-stat__n span { font: italic 400 .3em/1 var(--f-serif); letter-spacing: -.01em; color: var(--carbon); }
.g-stat__txt { grid-column: 1; margin: 0; max-width: 26ch; font: 400 clamp(1.15rem, 1.9vw, 1.6rem)/1.3 var(--f-serif); letter-spacing: -.005em; color: var(--carbon); }
.g-stat figure { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: var(--ar); }
/* una frase en grande junto a una sola pieza. En celular y tableta la pieza va arriba y la frase
   debajo, las dos desde el mismo margen que el resto; en computador van lado a lado y --flip invierte */
.g-note { display: grid; grid-template-columns: 1fr; gap: 20px; }
.g-note__media { display: flex; gap: 10px; max-width: 540px; }
.g-note__media figure { flex: var(--ar) 1 0; aspect-ratio: var(--ar); }
.g-note__media figure:only-child { flex: none; width: min(72%, 380px); }
.g-wall__lead { margin-bottom: 26px; }
/* la pared va por filas; cada pieza crece según su proporción, así ninguna se recorta */
.g-wall__row { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 8px; }
.g-wall__row li { flex: var(--ar) 1 0; aspect-ratio: var(--ar); overflow: hidden; border-radius: 3px; background: #d6cfc3; }
.g-wall__row img, .g-wall__row video { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__bar { display: none; }
/* las fotos que flotan sobre «NOSOTROS» respetan el margen de la página */
.g-float--1 { left: calc(max(6%, var(--gutter)) + 8px); }   /* +8: la rotación asoma la esquina */
.g-float--2 { right: calc(max(8%, var(--gutter)) + 8px); }
@media (max-width: 699px) { .g-float--3 { display: none; } }
@media (prefers-reduced-motion: reduce) { .g-rec i { animation: none; } }

/* computador: una pared que corre de lado */
.galeria.is-h { padding: 0; }
.is-h .galeria__view { height: 100svh; overflow: hidden; }
/* alto útil: la pantalla menos la barra de arriba (88 px) y la barra de avance de abajo (36 px);
   todas las medidas de la pared salen de aquí, así nada queda bajo la nav en pantallas bajitas */
.galeria.is-h { --gh: calc(100svh - 124px); }
.is-h .galeria__track { display: flex; width: max-content; height: 100%; margin: 0; padding: 88px 0 36px; box-sizing: border-box; will-change: transform; }
.is-h .g-panel { flex: none; height: 100%; margin: 0; }
.is-h .g-open { width: 46vw; padding: 0 5vw 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.is-h .g-big { display: flex; align-items: center; gap: 3.4vw; padding: 0 4vw; }
.is-h .g-big__main { flex: none; height: calc(var(--gh) * .8); gap: 1.2vw; }
.is-h .g-big__main figure { flex: none; height: 100%; }
.is-h .g-big__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin: 0; width: 22vw; }
.is-h .g-print { width: 15vw; }
.is-h .g-pair { display: block; width: max(74vw, calc(var(--gh) * 1.25)); }
.is-h .g-pair__a { position: absolute; left: 4vw; top: 2%; height: calc(var(--gh) * .74); }
.is-h .g-pair__b { position: absolute; right: 6vw; bottom: 2%; height: calc(var(--gh) * .68); }
.is-h .g-pair__cap { position: absolute; right: 6vw; top: 4%; margin: 0; max-width: 28ch; }
.is-h .g-word { height: 100%; margin: 0; padding-right: 8vw; }
.is-h .g-word__txt { padding-left: 8vw; font-size: calc(var(--gh) * .56); }
.is-h .g-word__ink { top: -88px; bottom: -36px; width: 38vw; }   /* el bloque sí va de arriba abajo */
/* el bloque sube 88 px y baja 36: su centro queda 26 px más arriba que el del panel */
.is-h .g-word__ink .g-word__txt { top: calc(50% + 26px); }
/* la frase que se completa con «NOSOTROS» */
.is-h .g-bridge { display: flex; align-items: center; width: 34vw; padding-left: 6vw; }
.is-h .g-bridge .g-say { max-width: none; }
.is-h .g-turn { width: 44vw; padding: 0 5vw 0 6vw; }
.is-h .g-float { width: auto; height: calc(var(--gh) * .4); }
.is-h .g-float--1 { left: 16vw; top: 2%; }
.is-h .g-float--2 { left: 58vw; right: auto; bottom: 2%; }
.is-h .g-float--3 { left: 96vw; top: 6%; }
.is-h .g-clips { display: flex; align-items: center; gap: 3vw; padding: 0 6vw; }
.is-h .g-clip { flex: none; height: calc(var(--gh) * .68); }
.is-h .g-clip--1 { translate: 0 calc(var(--gh) * -.12); } .is-h .g-clip--2 { translate: 0 calc(var(--gh) * .12); } .is-h .g-clip--3 { translate: 0 calc(var(--gh) * -.04); }
.is-h .g-clips .g-say { flex: none; width: 24vw; align-self: flex-end; margin: 0 0 calc(var(--gh) * .08) 2vw; }
.is-h .g-stat { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; align-items: end; gap: calc(var(--gh) * .04) 5vw; padding: 0 7vw 0 6vw; }
.is-h .g-stat__n { grid-column: 1; grid-row: 1; font-size: calc(var(--gh) * .56); white-space: nowrap; }
.is-h .g-stat__txt { grid-column: 1; grid-row: 2; align-self: start; max-width: 24ch; font-size: clamp(1.25rem, 1.75vw, 1.75rem); }
.is-h .g-stat figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: calc(var(--gh) * .66); }
.is-h .g-note { display: flex; align-items: center; gap: 4vw; padding: 0 6vw; }
.is-h .g-note--flip .g-note__media { order: 2; }
.is-h .g-note__media figure:only-child { width: auto; }
.is-h .g-note__media { flex: none; max-width: none; height: calc(var(--gh) * .8); gap: 1.2vw; }
.is-h .g-note__media figure { flex: none; height: 100%; }
.is-h .g-say { font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
.is-h .g-note .g-say { width: 30vw; }
.is-h .g-note__cap { width: 24vw; }
.is-h .g-wall__lead { flex: none; width: 22vw; margin: 0; }
.is-h .g-wall { display: flex; align-items: center; gap: 5vw; padding: 0 8vw 0 4vw; }
.g-wall__lanes { display: none; }
.is-h .g-wall__rows { display: none; }
.is-h .g-wall__lanes { display: flex; flex-direction: column; gap: calc(var(--gh) * .02); }
.is-h .g-wall__lane { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(var(--gh) * .02); }
.is-h .g-wall__lane li { flex: none; height: calc(var(--gh) * .47); aspect-ratio: var(--ar); overflow: hidden; border-radius: 3px; background: #d6cfc3; }
.is-h .g-wall__lane img, .is-h .g-wall__lane video { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-h .galeria__bar { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; height: 1px; background: var(--line-light); }
.galeria__bar i { display: block; height: 100%; background: var(--carbon); transform: scaleX(0); transform-origin: left; }