/* Diseño de nyxel.es (portada «La centralita en vivo» y resto de páginas)
   Se carga después de /styles.css: hereda marca, cabecera, botones y pie. */

.ln {
  --night: #0B0F1A;
  --night-2: #141A2B;
  --night-3: #1B2236;
  --violet: #7C5CFF;
  --violet-2: #6A4CF0;
  --violet-soft: rgba(124, 92, 255, .16);
  --day: #F6F5F9;
  --white: #FFFFFF;
  --ink: #0B0F1A;
  --ink-2: #4A4656;
  --ink-3: #6E6979;
  --hair: #E6E2EC;
  --hair-2: #CFC9D6;
  --ok: #0F6E4C; --ok-bg: #E8F5EE; --ok-n: #3DDC97;
  --warn-n: #F5C451;
  --wa: #1FA855;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --sec: clamp(88px, 11vw, 152px);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow: 0 1px 2px rgba(11, 15, 26, .06), 0 12px 24px -14px rgba(44, 28, 120, .3);
  --shadow-n: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 28px -16px rgba(0, 0, 0, .75);
}
.ln ::selection { background: rgba(124, 92, 255, .35); color: inherit; }
.ln { scrollbar-color: #2a3150 var(--night); }

/* cabecera fija con fondo al bajar */
.ln-nav { position: sticky; top: 0; z-index: 30; background: rgba(11, 15, 26, .78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.ln-nav.is-scrolled { border-bottom-color: var(--line); }

/* tipografía de la página */
.ln-h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.ln-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); max-width: 46ch; margin-top: 18px; text-wrap: pretty; }

/* ============ PORTADA ============ */
.hero-ln { position: relative; padding: clamp(28px, 3vw, 40px) 0 clamp(72px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.hero-ln::before { content: ""; position: absolute; inset: -20% -10% auto 40%; height: 120%; background: radial-gradient(closest-side, rgba(124, 92, 255, .22), transparent 70%); z-index: -1; pointer-events: none; }
.hero-ln__copy { max-width: 1200px; }
.hero-ln__h { font-family: var(--font-head); font-weight: 800; font-size: clamp(42px, 5.2vw, 74px); line-height: 1; letter-spacing: -.04em; }
.hero-ln__h span { display: block; color: rgba(242, 242, 245, .46); }
.hero-ln__lead { margin-top: 18px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 64ch; }
.hero-ln__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-ln__actions .btn { min-height: 52px; }

/* la centralita */
.sw { margin-top: clamp(24px, 2vw, 28px); display: grid; gap: 12px; grid-template-columns: 1fr; }
.sw__rail { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.sw__live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); font-size: 13px; letter-spacing: .02em; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(61, 220, 151, .1); }
.sw__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-n); box-shadow: 0 0 0 0 rgba(61, 220, 151, .5); animation: sw-pulse 2.4s var(--ease-out) infinite; }
@keyframes sw-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.sw__ch { background: var(--night-2); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; min-height: 268px; overflow: hidden; transition: border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.sw__ch.is-active { border-color: rgba(124, 92, 255, .6); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .9); }
.sw__head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.sw__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--violet-soft); color: #B9A6FF; flex: none; }
.sw__icon svg { width: 20px; height: 20px; }
.sw__icon--wa { background: rgba(31, 168, 85, .14); color: #4FD486; }
.sw__title { display: grid; line-height: 1.25; flex: 1; min-width: 0; }
.sw__title b { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.sw__title small { font-size: 13px; color: var(--faint); }
.sw__timer { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.sw__body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; justify-content: flex-start; }
.sw__cta { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); transition: background-color 160ms, color 160ms; }
.sw__cta::after { content: ""; width: 18px; height: 18px; flex: none; margin-left: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform 200ms var(--ease-out); }
.sw__cta span { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--faint); }
.sw__cta:hover { background: rgba(124, 92, 255, .1); }
.sw__cta:hover::after { transform: translateX(3px); }
.sw__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sw__ch--wa .sw__cta { color: #fff; background: var(--violet-2); border-top-color: transparent; }
.sw__ch--wa .sw__cta span { color: rgba(255, 255, 255, .75); }
.sw__ch--wa .sw__cta:hover { background: #5236D6; }

/* mensajes de WhatsApp (centralita y banda) */
.wa__m { position: relative; max-width: 86%; padding: 8px 12px 19px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; }
.wa__m time { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wa__m--in { align-self: flex-start; background: var(--night-3); border-bottom-left-radius: 4px; }
.wa__m--out { align-self: flex-end; background: rgba(124, 92, 255, .22); border-bottom-right-radius: 4px; }
.wa__m--out time { color: rgba(242, 242, 245, .55); }
.wa__typing { align-self: flex-end; display: none; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(124, 92, 255, .14); }
.wa__typing.is-on { display: inline-flex; }
.wa__typing i { width: 6px; height: 6px; border-radius: 50%; background: #B9A6FF; animation: typing 1.1s infinite ease-in-out; }
.wa__typing i:nth-child(2) { animation-delay: .15s; } .wa__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* llamada */
.call { justify-content: flex-start; }
.call__wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; margin-bottom: 4px; }
.call__wave i { width: 4px; height: calc(var(--h, .5) * 52px); border-radius: 4px; background: #B9A6FF; opacity: .7; transform-origin: center; }
.sw__ch--call.is-active .call__wave i { animation: wave 1.1s ease-in-out infinite; opacity: .95; }
.call__wave i:nth-child(3n) { animation-delay: -.3s; } .call__wave i:nth-child(3n+1) { animation-delay: -.6s; } .call__wave i:nth-child(4n) { animation-delay: -.85s; }
@keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.call__l { font-size: 15px; line-height: 1.45; color: var(--muted); }
.call__l b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--faint); margin-bottom: 2px; }
.call__l--a { color: var(--text); }
.call__l--a b { color: #B9A6FF; }

/* chat web */
.chat__m { align-self: flex-start; max-width: 90%; padding: 10px 13px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--night-3); font-size: 15px; line-height: 1.45; }
.chat__m--u { align-self: flex-end; background: var(--violet-2); color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; }

/* aparición de pasos (solo con JS; sin JS todo está visible) */
.js .sw [data-step] { opacity: 0; transform: translateY(8px); filter: blur(3px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), filter 420ms var(--ease-out); }
.js .sw [data-step].is-in { opacity: 1; transform: none; filter: none; }

@media (min-width: 1000px) {
  .sw { grid-template-columns: 5fr 4fr 3fr; }
  .sw__rail { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
  .sw { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86vw, 420px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .sw::-webkit-scrollbar { display: none; }
  .sw__rail { grid-column: 1 / -1; grid-row: 1; position: sticky; left: 0; width: calc(100vw - 2 * var(--gutter)); }
  .sw__ch { scroll-snap-align: start; grid-row: 2; min-height: 380px; }
}

/* ============ PRODUCTOS ============ */
.prods { background: var(--day); color: var(--ink); }
.prods__intro { padding-top: var(--sec); padding-bottom: 0; }
.prods__intro + .band { padding-top: clamp(48px, 6vw, 80px); }
.prods__intro .ln-lead { color: var(--ink-2); }
.band { padding: clamp(64px, 8vw, 112px) 0; position: relative; overflow: hidden; }
.band--light { background: var(--day); color: var(--ink); }
.band--light + .band--light { border-top: 1px solid var(--hair); }
.band--dark { background: var(--night); color: var(--text); }
.band__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) {
  .band__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 96px); }
  .band__grid--rev { grid-template-columns: 7fr 5fr; }
  .band__grid--rev .band__copy { order: 2; }
}
.band__h { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.03em; }
.band__h2 { display: block; font-weight: 600; font-size: .5em; letter-spacing: -.01em; color: var(--muted); margin-top: 6px; }
.band__p { margin-top: 18px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.band--dark .band__p { color: var(--muted); }
.band__facts { margin-top: 24px; display: grid; gap: 12px; }
.band__facts li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.band--dark .band__facts li { color: rgba(242, 242, 245, .78); }
.band__facts li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--violet-soft); box-shadow: inset 0 0 0 5px var(--day); border: 1.5px solid var(--violet); }
.band--dark .band__facts li::before { box-shadow: inset 0 0 0 5px var(--night); }
.band__demo { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--faint); max-width: 46ch; }
.band__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--violet-2); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.band--dark .band__link { color: #B9A6FF; }
.band__link::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--arrow) center/contain no-repeat; mask: var(--arrow) center/contain no-repeat; transition: transform 200ms var(--ease-out); }
.band__link:hover::after { transform: translateX(3px); }

/* lienzo de cada producto */
.band__ui { position: relative; min-height: 420px; display: grid; place-items: center; padding: 28px 0; }
.band__ui--pair { grid-template-columns: 1fr 1fr; gap: 18px; place-items: start center; }
.tag-ej { position: absolute; z-index: 3; top: -11px; right: 18px; background: var(--day); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 999px; padding: 4px 8px; }
.tag-ej--n { color: rgba(242, 242, 245, .62); border-color: var(--line-strong); background: var(--night-2); }

/* pastillas de estado (las del panel) */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--ok-n { background: rgba(61, 220, 151, .12); color: var(--ok-n); }
.pill--violet { background: #EFEBFD; color: #5B3FD9; }
.pill--muted { background: #EEECF2; color: var(--ink-2); }
.pill--muted-n { background: rgba(255, 255, 255, .08); color: #D9D6E2; }
.pill--warn-n { background: rgba(245, 196, 81, .12); color: var(--warn-n); }
.pill--violet-n { background: rgba(124, 92, 255, .2); color: #C9BBFF; }

/* tarjeta flotante de aviso */
.note { display: grid; gap: 4px; justify-items: start; background: var(--white); color: var(--ink); border: 1px solid var(--hair); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 240px; }
.note b { font-family: var(--font-head); font-weight: 700; font-size: 15px; margin-top: 6px; }
.note small { font-size: 13px; color: var(--ink-3); }
.note--dark { background: var(--night-2); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-n); }
.note--dark small { color: var(--faint); }
@media (min-width: 960px) {
  .band__ui--offset { padding-left: 4%; }
  .band__ui--offset > .phone { justify-self: start; }
}
.js [data-pop] { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js [data-pop].is-in { opacity: 1; transform: none; }

/* móvil dibujado */
.phone { width: min(330px, 86vw); border-radius: 40px; padding: 12px; background: #05070D; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(11, 15, 26, .55); }
.phone--light { background: #11141F; }
.phone--sm { width: min(250px, 42vw); border-radius: 32px; padding: 9px; }

/* agenda */
.agenda { width: 100%; max-width: 640px; background: var(--night-2); border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-n); }
.agenda__top { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.agenda__top b { font-family: var(--font-head); font-size: 18px; }
.agenda__top span { font-size: 13px; color: var(--faint); }
.agenda__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.agenda__col { background: var(--night-2); display: grid; grid-template-rows: auto repeat(8, 44px); gap: 6px; padding: 12px 10px 14px; }
.agenda__who { grid-row: 1; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 4px 4px; }
.ag { grid-row: var(--r); align-self: stretch; display: grid; align-content: start; gap: 2px; font-size: 12.5px; line-height: 1.3; color: rgba(242, 242, 245, .82); padding: 8px 9px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); overflow: hidden; }
.ag b { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text); }
.ag--a { background: rgba(124, 92, 255, .14); border-color: rgba(124, 92, 255, .3); }
.ag--new { background: rgba(124, 92, 255, .26); border-color: var(--violet); }
.ag .pill { justify-self: start; margin-top: 4px; font-size: 11.5px; padding: 4px 7px; }
.agenda__cols .ag--new .pill { background: rgba(255, 255, 255, .9); }

/* tarjeta de llamada */
.callcard { width: 100%; max-width: 520px; background: var(--white); border: 1px solid var(--hair); border-radius: 22px; padding: 22px 24px 18px; box-shadow: var(--shadow); }
.callcard__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.callcard__top b { font-family: var(--font-head); font-size: 18px; }
.callcard__top span:last-child { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.callcard__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.callcard__dl { margin: 18px 0 0; display: grid; gap: 0; }
.callcard__dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.callcard__dl dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.callcard__dl dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.callcard__wave { display: flex; align-items: center; gap: 3px; height: 40px; margin-top: 10px; }
.callcard__wave i { flex: 1; height: 30%; border-radius: 3px; background: #CFC4FF; }
.callcard__wave i:nth-child(odd) { height: 70%; } .callcard__wave i:nth-child(3n) { height: 45%; } .callcard__wave i:nth-child(5n) { height: 92%; background: var(--violet); }

/* checkin */
.ck { background: #FAF8FB; border-radius: 30px; padding: 22px 18px 26px; color: var(--ink); min-height: 470px; }

/* parte de trabajo */
.parte, .ped { background: #F4F5F7; border-radius: 24px; padding: 18px 14px 20px; color: var(--ink); min-height: 400px; display: grid; align-content: start; gap: 10px; }
.parte__sign { background: #fff; border: 1.5px dashed var(--hair-2); border-radius: 14px; padding: 12px 8px; }
.parte__sign svg { width: 100%; height: auto; }
.js .parte__sign path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .parte__sign.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .2s; }

/* bandeja */
.inbox { width: 100%; max-width: 600px; background: var(--night-2); border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-n); }
.inbox__top { display: flex; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.inbox__top b { font-family: var(--font-head); font-size: 17px; }
.inbox__top span { font-size: 13px; color: var(--faint); }
.inbox__row { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.inbox__row:last-child { border-bottom: 0; }
.inbox__row b { display: block; color: var(--text); font-size: 15px; }
.inbox__t { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--faint); }
.inbox__row--hot { background: rgba(245, 196, 81, .07); }
.inbox__row--hot b { color: var(--warn-n); }

/* ============ MIENTRAS DUERMES ============ */
.night { background: radial-gradient(120% 80% at 80% 0%, #1A1640 0%, var(--night) 55%); padding: var(--sec) 0; }
.night__grid { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .night__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
  .night__clockwrap { position: sticky; top: 120px; }
}
.night__clock { font-family: var(--font-head); font-weight: 800; font-size: clamp(88px, 13vw, 184px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin-top: 28px; color: var(--text); }
.night__clock span { display: inline-block; transition: opacity 260ms, filter 260ms; }
.night__clock span.is-tick { opacity: .25; filter: blur(4px); }
.night__lead { margin-top: 20px; }
.night__list { display: grid; gap: 0; counter-reset: none; }
.night__list li { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--line); transition: opacity 400ms var(--ease-out); }
.night__list li:last-child { border-bottom: 1px solid var(--line); }
.js .night__list li { opacity: .38; }
.js .night__list li.is-now { opacity: 1; }
.night__list time { font-family: var(--font-head); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: #B9A6FF; padding-top: 2px; }
.night__list p { font-size: 17px; line-height: 1.5; color: var(--muted); }
.night__list b { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -.015em; color: var(--text); margin-bottom: 6px; }

/* ============ QUIÉN ============ */
.fran { background: var(--day); color: var(--ink); padding: var(--sec) 0; }
.fran .ln-lead { color: var(--ink-2); }
.fran__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .fran__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 112px); } }
.fran__photo { margin: 0; border-radius: 26px; overflow: hidden; background: var(--night); aspect-ratio: 4 / 5; max-width: 520px; box-shadow: var(--shadow); }
.fran__photo img { width: 100%; height: 100%; object-fit: cover; }
.fran__nums { display: flex; gap: clamp(28px, 4vw, 56px); margin: 34px 0 0; }
.fran__nums dt { font-family: var(--font-head); font-weight: 800; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fran__nums dd { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); }
.proof { margin-top: 36px; display: grid; grid-template-columns: 150px 1fr; gap: 0; background: var(--white); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; max-width: 560px; box-shadow: var(--shadow); }
.proof img { width: 100%; height: 100%; object-fit: cover; }
.proof__body { padding: 16px 18px; display: grid; gap: 4px; justify-items: start; }
.proof__body b { font-family: var(--font-head); font-size: 16px; margin-top: 6px; }
.proof__body small { font-size: 13px; color: var(--ink-3); }
.proof__resp { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.proof time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); }

/* ============ CÓMO Y PRECIO ============ */
.how { background: var(--white); color: var(--ink); padding: var(--sec) 0; border-top: 1px solid var(--hair); }
.how__line { margin-top: 48px; display: grid; gap: 28px; position: relative; align-items: start; }
@media (min-width: 860px) {
  .how__line { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .how__line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--violet) 0 33%, var(--hair) 33%); }
}
.how__line li { position: relative; padding-top: 34px; display: grid; gap: 8px; }
.how__line li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--violet); }
.how__line li:first-child::before { background: var(--violet); }
.how__line b { font-family: var(--font-head); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.how__line span { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.how__price { margin-top: clamp(56px, 7vw, 88px); padding-top: 32px; border-top: 1px solid var(--hair); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.how__price b { color: var(--ink); font-family: var(--font-head); }

/* ============ CIERRE ============ */
.close-ln { background: var(--night); padding: var(--sec) 0; position: relative; overflow: hidden; isolation: isolate; }
.close-ln::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(closest-side, rgba(124, 92, 255, .26), transparent 70%); z-index: -1; }
.close-ln__h { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; text-wrap: balance; }

/* pie: separación de la última banda */
.ln .footer { border-top: 1px solid var(--line); }

@media (max-width: 959px) {
  .band__ui { min-height: 0; padding-top: 36px; }
}
@media (max-width: 520px) {
  .agenda__cols { grid-template-columns: repeat(2, 1fr); }
  .agenda__col:nth-child(3) { display: none; }
  .inbox__row { grid-template-columns: 44px 1fr; }
  .inbox__row .pill { grid-column: 2; justify-self: start; }
  .callcard__dl > div { grid-template-columns: 1fr; gap: 2px; }
  .proof { grid-template-columns: 1fr; }
  .proof img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .ln *, .ln *::before, .ln *::after { animation: none !important; transition: none !important; }
  .js .sw [data-step], .js [data-pop], .js .night__list li { opacity: 1; transform: none; filter: none; }
  .js .parte__sign path { stroke-dashoffset: 0; }
}

/* botón principal: el violeta de acción de la familia (contraste AA con texto blanco) */
.ln .btn--primary { background: var(--violet-2); }   /* #6A4CF0 aprobado por el usuario (24-oct-2026) */
.ln .btn--primary:hover { background: #5236D6; }

/* móvil estrecho: los dos móviles de «Apps a medida», uno bajo otro */
@media (max-width: 600px) {
  .band__ui--pair { grid-template-columns: 1fr; }
  .phone--sm { width: min(300px, 80vw); }
  .phone--b { margin-top: 18px; justify-self: end; }
}

.band__demo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fran__note { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-3); max-width: 46ch; }

/* ---------- segunda pasada (revisión) ---------- */

/* bandas: título, una línea y enlace; en móvil la pieza va justo después del título */
@media (max-width: 959px) {
  .band__grid { gap: 0; }
  .band__copy { display: contents; }
  .band__h { order: 1; }
  .band__ui { order: 2; margin: 28px 0 8px; }
  .band__p { order: 3; }
  .band__demo { order: 4; }
  .band__link { order: 5; justify-self: start; }
}

/* móviles con proporción real y un leve giro */
.phone { position: relative; }
.ck { min-height: 540px; }
.phone--tilt { transform: rotate(-2deg); }

/* aviso junto a la pieza, sin tapar su contenido */
.band__ui--offset { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding-left: 0; }
.note--side { position: relative; z-index: 2; }
.band__ui--offset .note--side { margin: 0 0 72px -14px; }
.band__ui:not(.band__ui--offset) .note--side { justify-self: end; margin-top: -8px; margin-right: -12px; }
@media (max-width: 959px) {
  .band__ui--offset { flex-direction: column; align-items: center; }
  .band__ui--offset .note--side { margin: -36px 0 0 auto; }
  .band__ui:not(.band__ui--offset) .note--side { margin: 14px 0 0 auto; }
}

/* agenda: pie con lo que no cabe en la rejilla */
.agenda { position: relative; overflow: visible; }
.agenda__cols { overflow: hidden; }
.agenda__foot { padding: 12px 20px 16px; font-size: 13px; line-height: 1.5; color: var(--faint); border-top: 1px solid var(--line); }
.inbox { position: relative; overflow: visible; }
.inbox > .inbox__row:last-child { border-radius: 0 0 20px 20px; }
.callcard { position: relative; }
.callcard__wave { margin: 16px 0 4px; }

/* apps: dos móviles con su pie */
.band__ui--pair { align-items: start; }
.pair { margin: 0; display: grid; justify-items: center; gap: 14px; }
.pair--b { margin-top: 56px; }
.pair figcaption { font-size: 14px; line-height: 1.45; color: var(--ink-2); text-align: center; max-width: 26ch; }
.phone--sm { width: min(260px, 40vw); }
@media (max-width: 600px) {
  .pair--b { margin-top: 28px; }
  .phone--sm { width: min(290px, 78vw); }
}

/* checkin sobre la casa real */
.band--photo { isolation: isolate; }
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.band--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 15, 26, .35) 0%, rgba(11, 15, 26, .55) 45%, rgba(11, 15, 26, .92) 62%, var(--night) 100%); }
.band--photo .band__p { color: rgba(242, 242, 245, .82); }
@media (max-width: 959px) {
  .band--photo::before { background: linear-gradient(180deg, rgba(11, 15, 26, .92) 0%, rgba(11, 15, 26, .5) 38%, rgba(11, 15, 26, .6) 70%, var(--night) 100%); }
}

/* cómo trabajo en móvil: línea vertical con el punto junto al título */
@media (max-width: 859px) {
  .how__line { gap: 0; }
  .how__line li { padding: 0 0 28px 34px; }
  .how__line li::before { top: 6px; }
  .how__line li::after { content: ""; position: absolute; left: 7px; top: 26px; bottom: 4px; width: 2px; background: var(--hair); }
  .how__line li:last-child { padding-bottom: 0; }
  .how__line li:last-child::after { display: none; }
}
.close-ln .ln-lead { margin-top: 14px; }
.band--light .band__demo { color: var(--ink-3); }

/* checkin dinámico: el registro del huésped (página actual del huésped) y su reserva en el panel (lista actual) */
.ckd { display: grid; place-items: center; position: relative; }
.ckd__phone { width: min(330px, 86vw); }
.ckg { background: #FAF8FB; border-radius: 30px; padding: 18px 14px 20px; color: #16151A; font-family: var(--font-body); min-height: 560px; }
.ckg__bar { display: flex; align-items: center; justify-content: space-between; }
.ckg__brand { font-family: var(--font-head); font-size: 12px; font-weight: 500; letter-spacing: .2em; color: #55505C; }
.ckg__brand b { font-weight: 700; color: #16151A; }
.ckg__langs { font-size: 10.5px; color: #55505C; word-spacing: 3px; }
.ckg__langs b { color: #16151A; }
.ckg__pre { margin-top: 18px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #55505C; }
.ckg__house { font-family: var(--font-head); font-weight: 800; font-size: 25px; letter-spacing: -.02em; margin-top: 2px; }
.ckg__tiles { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 6px; margin-top: 12px; }
.ckg__tiles span { background: #16151A; color: #FAF8FB; border-radius: 10px; padding: 8px 9px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.ckg__tiles small { display: block; font-size: 10.5px; font-weight: 400; opacity: .8; }
.ckg__card { margin-top: 12px; background: #fff; border: 1px solid #E4DFE6; border-radius: 10px; padding: 14px 12px; display: grid; gap: 9px; }
.ckg__h { font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.ckg__estado { font-size: 13px; font-weight: 600; background: #FAF8FB; border-radius: 8px; padding: 7px 10px; transition: background-color 300ms, color 300ms; }
.ckg__estado.is-ok { background: rgba(61, 220, 151, .14); color: #0F6E4C; }
.ckg__count { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ckg__slots { display: grid; gap: 6px; }
.ckg__slots li { display: flex; align-items: center; gap: 9px; border: 1.5px dashed #C9BBFF; border-radius: 10px; padding: 7px 9px; font-size: 13px; color: #7C5CFF; transition: border-color 300ms, background-color 300ms; }
.ckg__slots i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; border: 1px dashed #B8B2BF; color: #55505C; background: #fff; transition: background-color 300ms, color 300ms, border-color 300ms; }
.ckg__slots b { display: block; font-weight: 600; color: #16151A; }
.ckg__slots small { display: block; font-size: 11px; color: #55505C; }
.ckg__slots li:not(.is-in) span { visibility: hidden; position: relative; }
.ckg__slots li:not(.is-in)::after { content: "+ Registrar huésped"; font-weight: 600; margin-left: -4px; position: absolute; transform: translateX(31px); }
.ckg__slots li { position: relative; }
.ckg__slots li:not(.is-in) { justify-content: flex-start; }
.ckg__slots li.is-in { border-style: solid; border-color: #E4DFE6; background: #fff; }
.ckg__slots li.is-in i { background: #16151A; border-color: #16151A; color: #FAF8FB; }
.ckg__slots b em { font-style: normal; font-size: 10px; font-weight: 700; color: #6A4CF0; background: rgba(124, 92, 255, .14); border-radius: 999px; padding: 2px 6px; margin-left: 4px; vertical-align: 1px; }

.ckr { position: absolute; z-index: 3; right: -10px; bottom: 22px; width: min(400px, 92%); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; background: #fff; color: #0B0F1A; border: 1px solid rgba(11, 15, 26, .09); border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 15, 26, .1), 0 18px 32px -18px rgba(0, 0, 0, .6); font-family: var(--font-body); }
.ckr__fecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(124, 92, 255, .1); color: #6A4CF0; line-height: 1; }
.ckr__fecha strong { font-size: 18px; } .ckr__fecha small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: -8px; }
.ckr__texto { min-width: 0; }
.ckr__texto strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckr__texto small { display: block; margin-top: 2px; font-size: 13px; color: rgba(11, 15, 26, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckr__reg { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ckr__reg small { font-size: 12px; color: rgba(11, 15, 26, .62); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckr__pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: rgba(11, 15, 26, .62); background: rgba(11, 15, 26, .05); transition: background-color 300ms, color 300ms; }
.ckr__pill[data-s="completado"] { color: #6A4CF0; background: rgba(124, 92, 255, .15); }
.ckr__pill[data-s="enviado"] { color: #A86B00; background: rgba(245, 196, 81, .16); }
.ckr__pill[data-s="aceptado"] { color: #14805A; background: rgba(61, 220, 151, .14); }
.ckr.is-bump { animation: ckr-bump 520ms var(--ease-out); }
@keyframes ckr-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@media (max-width: 959px) {
  .ckr { position: relative; right: auto; bottom: auto; margin-top: -54px; justify-self: end; }
}
@media (max-width: 520px) {
  .ckr { grid-template-columns: 44px minmax(0, 1fr); width: 100%; }
  .ckr__reg { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
}

/* checkin: invitar a los demás por WhatsApp (bloque real de la página del huésped) */
.ckg__inv { display: none; padding: 10px 11px; border: 1px solid #E4DFE6; border-radius: 10px; background: #fff; }
.ckg__inv.is-on { display: grid; gap: 8px; animation: ckg-in 360ms var(--ease-out); }
.ckg__inv p { font-size: 12px; line-height: 1.45; color: #55505C; }
.ckg__inv strong { color: #16151A; }
.ckg__wa { display: flex; align-items: center; justify-content: center; gap: 7px; background: #1FA855; color: #fff; font-weight: 700; font-size: 13px; border-radius: 9px; padding: 9px; transition: transform 140ms var(--ease-out), filter 140ms; }
.ckg__wa svg { width: 16px; height: 16px; }
.ckg__wa.is-press { transform: scale(.96); filter: brightness(.92); }
@keyframes ckg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* agenda: de dónde viene cada cita y aviso en directo del asistente */
.agenda__auto { font-style: normal; color: #C9BBFF; }
.agenda__col { grid-template-rows: auto repeat(8, 64px); }
.ag { gap: 1px; padding: 7px 9px; }
.ag__src { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; font-weight: 600; color: rgba(242, 242, 245, .6); }
.ag__src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ag__src--wa { color: #7FE0A6; }
.ag__src--tel { color: #C9BBFF; }
.ag__src--web { color: rgba(242, 242, 245, .55); }
.agenda__push { position: absolute; z-index: 4; left: 50%; top: 58px; width: min(420px, calc(100% - 24px)); transform: translate(-50%, 0); display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .97); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 22px 40px -22px rgba(0, 0, 0, .8); }
.agenda__push-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(31, 168, 85, .14); color: #17733F; }
.agenda__push-ic svg { width: 20px; height: 20px; }
.agenda__push b { display: block; font-family: var(--font-head); font-size: 14px; }
.agenda__push small { display: block; font-size: 12.5px; color: var(--ink-3); }
.agenda__push time { font-size: 12px; color: var(--ink-3); }
.js .agenda__push { opacity: 0; transform: translate(-50%, -14px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.js .agenda__push.is-in { opacity: 1; transform: translate(-50%, 0); }
.js .agenda__push.is-out { opacity: 0; transform: translate(-50%, -8px); }
.js .ag--new { opacity: 0; transform: scale(.94); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), box-shadow 600ms; }
.js .ag--new.is-on { opacity: 1; transform: none; box-shadow: 0 0 0 3px rgba(124, 92, 255, .35); }
@media (max-width: 600px) {
  .agenda__top { flex-wrap: wrap; gap: 2px 12px; }
  .agenda__top > span { flex-basis: 100%; }
  .agenda__push { top: 76px; grid-template-columns: 32px 1fr; }
  .agenda__push time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .ag--new { opacity: 1; transform: none; } .js .agenda__push { display: none; } }

/* frutería: vista de envío de la app actual (tokens de la app: sistema, verde #1E8E4E) */
.fr { background: #F5F5F7; border-radius: 24px; padding: 16px 12px 18px; min-height: 420px; display: grid; align-content: start; gap: 10px; color: #1D1D1F; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.fr__back { font-size: 13px; color: #1E8E4E; }
.fr__h { font-size: 21px; font-weight: 600; letter-spacing: -.5px; }
.fr__trans { background: #E4F4EA; border-radius: 14px; padding: 12px 13px; display: grid; gap: 7px; }
.fr__t { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.fr__t svg { width: 18px; height: 18px; color: #155F35; }
.fr__s { font-size: 12px; line-height: 1.4; color: #155F35; }
.fr__btn { display: block; text-align: center; background: #1E8E4E; color: #fff; border-radius: 10px; padding: 10px 8px; font-size: 13px; font-weight: 500; }
.fr__prov { background: #fff; border-radius: 14px; padding: 12px 13px; display: grid; gap: 2px; }
.fr__name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.fr__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.fr__row em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.fr__prov .fr__btn { margin-top: 8px; }
.fr__wa { text-align: center; margin-top: 8px; font-size: 12px; color: #1E8E4E; }
/* el móvil de checkin no cambia de tamaño al aparecer el aviso de WhatsApp: el contenido se desplaza dentro de la pantalla */
.ckg { height: 614px; min-height: 0; overflow: hidden; }

/* ---------- móviles con proporción real (9:19,5), barra de estado e isla ---------- */
.phone { width: min(300px, 78vw); aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 48px; background: #0A0B10; display: flex; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 2px #23252d, 0 40px 80px -40px rgba(11, 15, 26, .6); }
.phone--sm { width: min(250px, 40vw); padding: 9px; border-radius: 42px; }
.scr { position: relative; flex: 1; min-width: 0; min-height: 0; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; background: #FAF8FB; }
.phone--sm .scr { border-radius: 33px; }
.scr > :last-child { flex: 1; min-height: 0; }
.sb { position: relative; flex: none; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 2px 20px 0 26px; font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -.01em; color: #0e161f; background: inherit; }
.phone--sm .sb { height: 30px; padding: 2px 16px 0 22px; font-size: 11px; }
.sb--d { color: #E9EDEF; background: #1F2C34; }
.sb__island { position: absolute; left: 50%; top: 8px; width: 30%; height: 21px; transform: translateX(-50%); border-radius: 12px; background: #000; }
.phone--sm .sb__island { top: 7px; height: 18px; }
.sb__ic { display: flex; align-items: center; gap: 4px; }
.sb__sig { width: 15px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 100% / 3px 35% no-repeat, linear-gradient(currentColor, currentColor) 4px 100% / 3px 55% no-repeat, linear-gradient(currentColor, currentColor) 8px 100% / 3px 78% no-repeat, linear-gradient(currentColor, currentColor) 12px 100% / 3px 100% no-repeat; }
.sb__wifi { width: 13px; height: 10px; background: currentColor; -webkit-mask: var(--ic-wifi) center / contain no-repeat; mask: var(--ic-wifi) center / contain no-repeat; }
.sb__bat { position: relative; width: 22px; height: 11px; border: 1.4px solid currentColor; border-radius: 3.5px; opacity: .95; }
.sb__bat::before { content: ""; position: absolute; inset: 1.4px; right: 4px; border-radius: 1.5px; background: currentColor; }
.sb__bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .6; }

/* WhatsApp (modo oscuro de la app) */
.scr--wa { background: #0B141A; }
.wah { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 12px 10px 6px; background: #1F2C34; color: #E9EDEF; }
.wah__back { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--chev) center / 14px no-repeat; mask: var(--chev) center / 14px no-repeat; }
.wah__av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2A6B4A; color: #E9F5EE; font-weight: 700; font-size: 14px; }
.wah__who { flex: 1; min-width: 0; line-height: 1.25; }
.wah__who b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wah__who small { display: block; font-size: 11px; color: #8696A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wah__ic { display: flex; gap: 14px; color: #AEBAC1; }
.wah__ic i { width: 18px; height: 18px; background: currentColor; }
.wah__video { -webkit-mask: var(--ic-video) center / contain no-repeat; mask: var(--ic-video) center / contain no-repeat; }
.wah__call { -webkit-mask: var(--ic-call) center / contain no-repeat; mask: var(--ic-call) center / contain no-repeat; }
.wac { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 10px 6px; overflow: hidden; background: #0B141A radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px) 0 0 / 14px 14px; }
.wac__day { align-self: center; margin-bottom: auto; background: #182229; color: #8696A0; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 7px; }
.wac .wa__m { max-width: 84%; font-size: 13.5px; line-height: 1.38; color: #E9EDEF; border-radius: 9px; padding: 6px 9px 17px; box-shadow: 0 1px .5px rgba(0, 0, 0, .25); }
.wac .wa__m--in { background: #202C33; border-top-left-radius: 2px; }
.wac .wa__m--out { background: #005C4B; border-top-right-radius: 2px; }
.wac .wa__m time { font-size: 10.5px; color: rgba(233, 237, 239, .62); right: 8px; bottom: 4px; }
.wac .wa__sys { align-self: center; margin-top: 4px; font-size: 11px; color: #8696A0; background: #182229; border-radius: 7px; padding: 5px 10px; }
.wai { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 8px 14px; background: #0B141A; }
.wai span { flex: 1; background: #202C33; color: #8696A0; border-radius: 22px; padding: 10px 14px; font-size: 13.5px; }
.wai i { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #00A884 var(--ic-mic) center / 18px no-repeat; }
.scr--wa > :last-child { flex: none; }
.scr--wa .wac { flex: 1; min-height: 0; }

/* checkin dentro de la pantalla */
.ckd__phone { width: min(300px, 78vw); }
.scr .ckg { height: auto; border-radius: 0; padding-top: 6px; overflow: hidden; }

/* parte de trabajo (diseño actual de la app, empresa de ejemplo con el azul por defecto) */
.scr:has(.pt) { background: #fff; }
.pt { display: flex; flex-direction: column; background: #f3f5f7; color: #0e161f; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.pt__hd { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px 8px; background: #fff; border-bottom: 1px solid #e3e8ec; }
.pt__hd b { flex: 1; font-size: 14px; font-weight: 700; }
.pt__bell { width: 17px; height: 17px; background: #0e161f; -webkit-mask: var(--ic-bell) center / contain no-repeat; mask: var(--ic-bell) center / contain no-repeat; }
.pt__av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0b5cab; color: #fff; font-size: 10.5px; font-weight: 800; }
.pt__steps { flex: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 9px 4px 2px; }
.pt__line { position: absolute; left: 10%; right: 10%; top: 18px; height: 3px; border-radius: 2px; background: #0b5cab; }
.pt__st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 650; color: #4a5664; }
.pt__st b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #0b5cab; color: #fff; font-size: 10px; font-weight: 700; }
.pt__st:not(.pt__st--cur) b::before { content: ""; width: 8px; height: 4.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.pt__st--cur { color: #0e161f; }
.pt__st--cur b { box-shadow: 0 0 0 3px rgba(11, 92, 171, .24); }
.pt__saved { flex: none; display: flex; align-items: center; gap: 5px; padding: 2px 12px 7px; font-size: 10px; font-weight: 650; color: #12683a; border-bottom: 1px solid #e3e8ec; }
.pt__saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12683a; }
.pt__body { flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 8px; padding: 10px 12px; }
.pt__h { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.pt__ok { position: relative; padding: 7px 9px 7px 24px; border: 1px solid #12683a; border-radius: 8px; background: #e2f3e8; color: #12683a; font-size: 11px; font-weight: 650; }
.pt__ok::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #12683a; }
.pt__send { display: block; text-align: center; padding: 10px; border-radius: 8px; background: #0b5cab; color: #fff; font-size: 12.5px; font-weight: 700; }
.pt__nota { font-family: var(--font-body); font-size: 10px; line-height: 1.4; color: #4a5664; }
.pt__card { display: grid; gap: 6px; padding: 9px; border: 1px solid #e3e8ec; border-radius: 10px; background: #fff; }
.pt__card > b { font-size: 11.5px; }
.pt__card small { font-family: var(--font-body); font-size: 9.5px; color: #4a5664; }
.pt__sign { padding: 4px 6px; border: 1px solid #e3e8ec; border-style: solid; border-radius: 8px; background: #fff; }

/* frutería dentro de la pantalla */
.scr:has(.fr) { background: #F5F5F7; }
.scr .fr { border-radius: 0; min-height: 0; overflow: hidden; padding-top: 8px; }

/* iconos dibujados para las pantallas */
.ln {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='13' height='12' rx='2.5' fill='black'/%3E%3Cpath d='M16 10.5l6-3.5v10l-6-3.5z' fill='black'/%3E%3C/svg%3E");
  --ic-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.5 9 3l1.6 4-1.9 1.3a10.5 10.5 0 0 0 5 5l1.3-1.9 4 1.6-.5 2.4A2.5 2.5 0 0 1 16 17.5 13.5 13.5 0 0 1 4.5 6 2.5 2.5 0 0 1 6.6 3.5Z' fill='black'/%3E%3C/svg%3E");
  --ic-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3' fill='white'/%3E%3Cpath d='M6 11a6 6 0 0 0 12 0M12 17v4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15L6 16Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  --ic-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 11.5 5.6 9a3.4 3.4 0 0 1 4.8 0zM3.3 6.7a6.6 6.6 0 0 1 9.4 0l-1.4 1.4a4.6 4.6 0 0 0-6.6 0zM1 4.4a9.9 9.9 0 0 1 14 0l-1.4 1.4a7.9 7.9 0 0 0-11.2 0z' fill='black'/%3E%3C/svg%3E");
}
@media (max-width: 600px) { .phone--sm { width: min(280px, 76vw); } }
.wah__who b { font-size: 13.5px; }
.wah__ic { gap: 12px; }
/* móvil: el teléfono de checkin entero y la reserva del panel debajo, sin taparlo */
@media (max-width: 959px) {
  .ckd { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .ckd__phone { width: min(290px, 74vw); }
  .ckd .phone--tilt { transform: none; }
  .ckr { position: relative; right: auto; bottom: auto; margin-top: 14px; width: min(400px, 100%); justify-self: auto; align-self: stretch; }
}
/* móvil: los teléfonos a escala (mismo diseño y proporción) para que las bandas no se hagan eternas */
@media (max-width: 600px) {
  .band__ui--offset > .phone, #p-whatsapp .phone { zoom: .82; }
  .ckd__phone { zoom: .8; }
  .band__ui--pair { grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .band__ui--pair .phone--sm { width: 250px; zoom: .6; }
  .pair--b { margin-top: 36px; }
  .pair figcaption { font-size: 12.5px; max-width: 20ch; }
  .band__ui--pair .phone--b { justify-self: auto; margin-top: 0; }
}
@media (max-width: 959px) { .band__ui--offset .note--side { margin: 12px 0 0 auto; } }

/* ---------- /whatsapp con el diseño de la portada ---------- */
.wp-hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .wp-hero__grid { grid-template-columns: 7fr 5fr; gap: clamp(32px, 4vw, 64px); } }
.wp-hero__h { font-family: var(--font-head); font-weight: 800; font-size: clamp(42px, 5vw, 70px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.wp-hero__micro { margin-top: 18px; font-size: 14px; color: var(--faint); }
.wp-hero__ui { min-height: 0; padding: 12px 0 0; }
.wp-band { padding: var(--sec) 0; }
.wp-band--light { background: var(--day); color: var(--ink); }
.wp-band--white { background: var(--white); color: var(--ink); }
.wp-band--dark { background: var(--night); color: var(--text); }
.wp-band--light .ln-lead, .wp-band--white .ln-lead { color: var(--ink-2); }
.wp-band--light .ln-lead a, .wp-band--white .ln-lead a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }

/* tres cosas: cada una con su conversación de WhatsApp */
.wp-doors { margin-top: 48px; display: grid; gap: 18px; }
@media (min-width: 900px) { .wp-doors { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.wp-door { display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--hair); border-radius: 20px; padding: 24px 22px 22px; }
.wp-door__h { font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.wp-door__h span { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--violet-2); margin-bottom: 6px; }
.wp-door p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.wp-door__chat { margin-top: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 14px; background: #0B141A radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px) 0 0 / 14px 14px; }
.wp-door__chat .wa__m { max-width: 88%; font-size: 13.5px; line-height: 1.38; color: #E9EDEF; border-radius: 9px; padding: 6px 9px 17px; }
.wp-door__chat .wa__m--in { background: #202C33; border-top-left-radius: 2px; }
.wp-door__chat .wa__m--out { background: #005C4B; border-top-right-radius: 2px; }
.wp-door__chat .wa__m time { font-size: 10.5px; color: rgba(233, 237, 239, .62); right: 8px; bottom: 4px; }

/* casos por sector */
.wp-sect { margin-top: 40px; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .wp-sect { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.wp-sect li { display: grid; align-content: start; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.wp-sect b { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.wp-sect span { color: var(--muted); line-height: 1.55; }
.wp-sect a { color: #B9A6FF; border-bottom: 1px solid currentColor; }

/* datos y cómo empezamos */
.wp-datos { display: grid; gap: 48px; }
@media (min-width: 960px) { .wp-datos { grid-template-columns: 6fr 5fr; gap: clamp(48px, 6vw, 96px); align-items: start; } }
.wp-datos__p { max-width: 52ch; }
.wp-pasos { background: var(--day); border: 1px solid var(--hair); border-radius: 20px; padding: 28px 26px; }
.wp-pasos__h { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.wp-pasos__line { margin-top: 24px; grid-template-columns: 1fr !important; gap: 0; }
.wp-pasos__line::before { display: none; }
.wp-pasos__line li { padding: 0 0 22px 34px; }
.wp-pasos__line li::before { top: 4px; background: var(--day); }
.wp-pasos__line li:first-child::before { background: var(--violet); }
.wp-pasos__line li::after { content: ""; position: absolute; left: 7px; top: 24px; bottom: 2px; width: 2px; background: var(--hair); }
.wp-pasos__line li:last-child { padding-bottom: 0; }
.wp-pasos__line li:last-child::after { display: none; }
.wp-pasos__line b { font-size: 18px; }
@media (max-width: 600px) { .wp-hero__ui > .phone { zoom: .82; } }

/* ---------- /citas con el diseño de la portada ---------- */
@media (min-width: 960px) { .ct-hero__grid { grid-template-columns: 5fr 7fr; } }
.ct-hero__grid .band__ui { padding-top: 12px; }
.wp-hero__micro a { color: #B9A6FF; border-bottom: 1px solid currentColor; }
.ct-web { position: relative; margin-top: auto; display: grid; gap: 10px; padding: 16px 14px 14px; border-radius: 14px; background: var(--day); border: 1px solid var(--hair); }
.ct-web .tag-ej { top: -11px; right: 14px; }
.ct-web__row { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 14px; color: var(--ink-2); }
.ct-web__row b { grid-row: span 2; align-self: center; font-family: var(--font-head); font-size: 15px; color: var(--ink); padding: 8px 12px; background: var(--white); border: 1px solid var(--hair); border-radius: 10px; }
.ct-web__ok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--hair); }
.ct-call { margin-top: auto; display: grid; gap: 10px; padding: 16px 14px; border-radius: 14px; background: var(--night-2); }
.ct-call .call__l { font-size: 14px; }
.wp-door .ct-call p { color: rgba(242, 242, 245, .72); font-size: 14px; line-height: 1.45; }
.wp-door .ct-call p.call__l--a { color: #F2F2F5; }
.wp-door .ct-web p { font-size: 14px; }

/* ---------- /llamar con el diseño de la portada (la llamada es la de verdad: vozweb.js) ---------- */
.lm-grid { display: grid; gap: 32px; grid-template-areas: "copy" "call" "try"; align-items: start; }
.lm-copy { grid-area: copy; } .lm { grid-area: call; } .lm-try { grid-area: try; }
@media (min-width: 960px) {
  .lm-grid { grid-template-columns: 6fr 5fr; column-gap: clamp(40px, 5vw, 80px); row-gap: 0; grid-template-areas: "copy call" "try call"; }
  .lm-copy { align-self: end; padding-top: 24px; }
  .lm-try { align-self: start; margin-top: 36px; }
}
.lm-copy .wp-hero__h { max-width: 13ch; }
.lm-copy .hero-ln__lead { max-width: 46ch; }

.lm-try { display: grid; gap: 10px; max-width: 52ch; }
.lm-try li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.lm-try span { font-size: 13px; color: var(--faint); }
.lm-try q { color: var(--text); font-size: 16px; line-height: 1.45; quotes: "«" "»"; }

.lm { position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--night-2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-n); transition: border-color 400ms var(--ease-out); }
.lm.on { border-color: rgba(124, 92, 255, .6); }
.lm__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); padding: 5px 10px 5px 9px; border-radius: 999px; background: rgba(61, 220, 151, .1); }
.lm__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-n); }
.lm .sw__timer { min-width: 40px; text-align: right; }
.lm:not(.on) .sw__timer { color: var(--faint); }

.lm__stage { position: relative; display: grid; justify-items: center; gap: 22px; padding: 28px 24px 26px; text-align: center; }
.lm__stage::before { content: ""; position: absolute; inset: -30% -10% 10%; z-index: -1; background: radial-gradient(closest-side, rgba(124, 92, 255, .2), transparent); opacity: .7; pointer-events: none; transition: opacity .6s var(--ease-out); }
.lm.on .lm__stage::before { opacity: 1; }
.lm__wave { width: 100%; max-width: 300px; margin: 0; height: 48px; }
.lm__wave i { opacity: .28; transition: opacity .3s var(--ease-out); }
.lm.on .lm__wave i { opacity: .55; }
.lm.talking .lm__wave i { opacity: .95; animation: wave 1.1s ease-in-out infinite; }

.lm .ring { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--violet-2); color: #fff; box-shadow: 0 18px 40px -16px rgba(106, 76, 240, .9); transition: transform .16s var(--ease-out), background-color .3s var(--ease-out); }
.lm .ring:hover { background: #5236D6; }
.lm .ring:active { transform: scale(.96); }
.lm .ring:focus-visible { outline: 3px solid var(--text); outline-offset: 6px; }
.lm .ring svg { width: 44px; height: 44px; }
.lm .ring.on { background: #E5484D; box-shadow: 0 18px 40px -16px rgba(229, 72, 77, .8); }
.lm .ring.on .i-call { display: none; } .lm .ring:not(.on) .i-end { display: none; }
.lm .ring.wait { pointer-events: none; opacity: .85; }
/* el aro respira cuando habla el asistente */
.lm .ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--violet); opacity: 0; transform: scale(.92); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.lm.talking .ring::after { opacity: .7; animation: breathe 1.1s var(--ease-out) infinite alternate; }
@keyframes breathe { from { transform: scale(.94); opacity: .75; } to { transform: scale(1.12); opacity: .15; } }
/* en reposo, el botón late despacio: una luz difusa detrás que se aviva en un doble pulso suave */
.lm .ring::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(146, 120, 255, .55) 0%, rgba(124, 92, 255, .22) 38%, rgba(124, 92, 255, 0) 68%); filter: blur(14px); opacity: .3; transform: scale(.9); transition: opacity .4s var(--ease-out); }
.lm .ring:not(.on):not(.wait)::before { animation: luz 3.6s ease-in-out infinite; }
.lm .ring:not(.on):not(.wait) { animation: latido 3.6s ease-in-out infinite; }
.lm .ring.on::before { opacity: 0; }
@keyframes luz { 0% { opacity: .28; transform: scale(.9); } 13% { opacity: .62; transform: scale(1); } 24% { opacity: .4; transform: scale(.95); } 34% { opacity: .52; transform: scale(.98); } 65%, 100% { opacity: .28; transform: scale(.9); } }
@keyframes latido { 0%, 24%, 65%, 100% { transform: scale(1); } 13% { transform: scale(1.025); } 34% { transform: scale(1.012); } }
.lm .ring:not(.on):not(.wait):active { animation: none; transform: scale(.96); }

.lm__st { min-height: 24px; font-weight: 600; font-size: 16px; }
.lm__st.err { color: #FF8A8F; }
.lm__log { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; padding: 0 18px 16px; scrollbar-width: thin; }
.lm__log:empty { display: none; }
.lm__log p { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; }
.lm__log p.agent { justify-self: start; background: rgba(255, 255, 255, .06); }
.lm__log p.user { justify-self: end; background: var(--violet-soft); }
.lm__fine { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--faint); }
.lm__fine a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* lo que hace en tu negocio */
.lm-hace { margin-top: 32px; display: grid; border-top: 1px solid var(--hair); }
.lm-hace li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.lm-hace b { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.lm-hace span { color: var(--ink-2); line-height: 1.55; }
.lm-tuyo__ui { display: grid; justify-items: center; }
@media (min-width: 960px) { .lm-tuyo { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .lm.talking .ring::after, .lm.talking .lm__wave i, .lm .ring:not(.on):not(.wait), .lm .ring:not(.on):not(.wait)::before { animation: none; } }
@media (min-width: 960px) { .lm { align-self: center; } .lm__stage { padding: 44px 24px 36px; gap: 26px; } }
@media (max-width: 480px) { .lm__live { display: none; } }

/* ---------- /reservar y /en/book: solo aspecto (el calendario y su script no se tocan) ---------- */
.rv { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 88px) clamp(88px, 10vw, 144px); }
.rv::before { content: ""; position: absolute; inset: -20% -10% auto 45%; height: 110%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(124, 92, 255, .2), transparent 70%); }
.rv__h { font-size: clamp(40px, 4.8vw, 64px); margin: 14px 0 18px; }
.rv .book__intro .lead { color: var(--muted); }
.rv .book__points { margin-top: 32px; gap: 0; border-top: 1px solid var(--line); }
.rv .book__points li { padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.rv .book__points li::before { top: 1.45em; width: 7px; height: 7px; border-radius: 2px; background: var(--violet); }
.rv .book__panel { background: var(--night-2); border-radius: 22px; box-shadow: var(--shadow-n); }
.rv .book__h { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.rv .book__sel { color: #B9A6FF; font-weight: 600; }
.rv .book__day, .rv .book__slot, .rv .book__mode label { background: var(--night); border-radius: 12px; transition: border-color 160ms, background-color 160ms, transform 160ms var(--ease-out); }
.rv .book__day:hover, .rv .book__slot:hover { border-color: var(--violet); background: rgba(124, 92, 255, .08); }
.rv .book__day:active, .rv .book__slot:active { transform: scale(.98); }
.rv .book__day:focus-visible, .rv .book__slot:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.rv .book__mode label:has(input:checked) { border-color: var(--violet); background: rgba(124, 92, 255, .08); }
.rv .field input, .rv .field textarea { background: var(--night); border-radius: 12px; }
.rv .field input:focus, .rv .field textarea:focus { border-color: var(--violet); }
.rv .book__back { font-weight: 500; }
/* días: fecha arriba y huecos debajo, en dos columnas también en el móvil */
.rv .book__days { grid-template-columns: 1fr 1fr; }
.rv .book__day { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 14px 16px; font-weight: 600; line-height: 1.3; }
.rv .book__day small { font-weight: 500; font-size: 13px; color: #B9A6FF; }
@media (min-width: 1100px) { .rv .book__days { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .rv .book__panel { padding: 22px 16px; } .rv .book__days { gap: 8px; } .rv .book__day { padding: 12px 12px; font-size: 15px; } }

/* ---------- /fruterias con el diseño de la portada: pantallas de la app dibujadas ---------- */
.fp-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B9A6FF; margin-bottom: 18px; }
.fp-hero__ui { min-height: 0; padding: 12px 0 0; }
.fp-scr { background: #F5F5F7; color: #1D1D1F; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.fp-scr .sb--l { background: #F5F5F7; }
.fp-scr > :last-child { overflow: hidden; }

/* inicio */
.fi { display: flex; flex-direction: column; gap: 9px; padding: 0 12px 14px; }
.fi__top { display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; margin: 0 -12px 2px; border-bottom: 1px solid #E3E3E8; }
.fi__top b { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.fi__top small { font-size: 11.5px; color: #8A8A90; }
.fi__user { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.fi__user small { color: #8A8A90; font-size: 12px; }
.fi__main, .fi__alt { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border-radius: 16px; }
.fi__main { background: #1E8E4E; color: #fff; }
.fi__alt { background: #fff; }
.fi__main i, .fi__alt i { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.fi__main i { background: rgba(255, 255, 255, .18); }
.fi__alt i { background: #E4F4EA; color: #155F35; }
.fi svg { width: 21px; height: 21px; }
.fi__main span, .fi__alt span { display: grid; gap: 1px; }
.fi__main b, .fi__alt b { font-size: 15.5px; font-weight: 600; }
.fi__main small { font-size: 12px; color: rgba(255, 255, 255, .85); }
.fi__alt small { font-size: 12px; color: #8A8A90; }
.fi__prep { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 13px; background: #E4F4EA; color: #155F35; font-size: 12px; font-weight: 500; line-height: 1.3; }
.fi__prep i { flex: none; display: grid; } .fi__prep svg { width: 17px; height: 17px; }
.fi__prep em { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-weight: 600; }
.fi__prep em::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--arrow) center/contain no-repeat; mask: var(--arrow) center/contain no-repeat; }
.fi__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fi__stats p { display: grid; justify-items: center; gap: 2px; padding: 11px 6px; border-radius: 13px; background: #fff; }
.fi__stats b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.fi__stats small { font-size: 10.5px; color: #8A8A90; }
.fi__last { text-align: center; font-size: 11px; color: #8A8A90; }
.fi__last b { color: #6E6E73; }
.fi__sheet { text-align: center; padding: 9px; border-radius: 12px; background: #E4F4EA; color: #155F35; font-size: 12.5px; font-weight: 500; }

/* conteo */
.fc { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 0; }
.fc__search { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 11px; background: #E9E9EE; color: #8A8A90; font-size: 13px; }
.fc__search::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid currentColor; }
.fc__chips { display: flex; gap: 6px; overflow: hidden; white-space: nowrap; }
.fc__chips > * { flex: none; padding: 6px 11px; border-radius: 999px; font-size: 11.5px; background: #fff; }
.fc__chips b { background: #1E8E4E; color: #fff; font-weight: 600; }
.fc__it { background: #fff; border-radius: 14px; padding: 10px 11px; display: grid; gap: 6px; }
.fc__name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fc__name b { font-size: 14px; font-weight: 600; }
.fc__name small { font-size: 11px; color: #8A8A90; }
.fc__unit { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8A8A90; }
.fc__unit span { display: inline-flex; padding: 2px; border-radius: 7px; background: #E9E9EE; }
.fc__unit span > * { padding: 2px 7px; }
.fc__unit span b { background: #fff; border-radius: 5px; color: #1D1D1F; font-weight: 600; }
.fc__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fc__nums span { display: grid; justify-items: center; padding: 4px 0 6px; border-radius: 9px; background: #F0F0F4; font-size: 14px; font-variant-numeric: tabular-nums; }
.fc__nums small { font-size: 9.5px; color: #8A8A90; }
.fc__nums .fc__ok { background: #E4F4EA; color: #155F35; font-weight: 600; }
.fc__bar { position: sticky; bottom: 0; margin: auto -12px 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px 14px; background: #fff; border-top: 1px solid #E3E3E8; }
.fc__bar small { font-size: 11.5px; color: #8A8A90; white-space: nowrap; }
.fc__bar b { flex: 1; text-align: center; padding: 10px; border-radius: 11px; background: #1E8E4E; color: #fff; font-size: 13.5px; font-weight: 600; }
.fp-scr:has(.fc) > .fc { overflow: hidden; }

/* ajustes */
.fa { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 14px; }
.fa__grp { background: #fff; border-radius: 14px; padding: 2px 12px; }
.fa__grp p { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #EEEEF2; }
.fa__grp p:last-child { border-bottom: 0; }
.fa__grp p::after { content: "›"; margin-left: auto; color: #B0B0B6; font-size: 18px; line-height: 1; }
.fa__grp span { display: grid; gap: 1px; }
.fa__grp b { font-size: 14px; font-weight: 600; }
.fa__grp small { font-size: 11px; color: #8A8A90; line-height: 1.3; }
.fa__sheet { display: grid; gap: 2px; padding: 11px 12px; border-radius: 13px; background: #E4F4EA; color: #155F35; }
.fa__sheet b { font-size: 13px; font-weight: 600; }
.fa__sheet small { font-size: 11px; }

/* el problema */
.fp-pain { display: grid; gap: 18px; max-width: 30ch; font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.fp-pain p + p { color: var(--ink-3); }
@media (min-width: 960px) { .fp-pain { max-width: 34ch; } }

/* filas de «Lo que hace hoy» */
.fp-row .band__h { font-size: clamp(26px, 2.8vw, 36px); }
.fp-row .band__facts b { color: var(--ink); }
.prods .fp-row:first-of-type { padding-top: clamp(48px, 6vw, 80px); }

/* cifras */
.fp-nums { margin-top: 48px; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .fp-nums { grid-template-columns: repeat(3, 1fr); } .fp-nums p + p { border-left: 1px solid var(--line); padding-left: 32px; } }
.fp-nums p { display: grid; gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.fp-nums b { font-family: var(--font-head); font-weight: 800; font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-nums span { color: var(--muted); font-size: 17px; }
.fp-nums__note { margin-top: 24px; font-size: 14px; color: var(--faint); max-width: 60ch; }

/* lo siguiente */
.fp-next { margin-top: 48px; display: grid; gap: 18px; }
@media (min-width: 900px) { .fp-next { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.fp-next__c { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 24px 22px; border-radius: 20px; background: var(--white); border: 1px solid var(--hair); }
.fp-next__c h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.fp-next__c p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 600px) { .fp-row .band__ui > .phone, .fp-hero__ui > .phone { zoom: .86; } }
.fc > *, .fi > *, .fa > * { flex: none; }
.fc__bar { margin-top: auto; }
.fc__unit span > i { font-style: normal; }
.fp-pain { gap: 20px; max-width: 40ch; font-size: clamp(30px, 3.6vw, 48px); }
.fp-pain p + p { font-family: var(--font-body); font-weight: 400; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.55; letter-spacing: 0; color: var(--ink-2); max-width: 52ch; }
.fp-pain p:nth-child(2) { margin-top: 8px; }
@media (max-width: 959px) { .fp-row .band__facts { order: 4; } .fp-row .band__p { margin-top: 8px; } }
@media (max-width: 759px) { .fp-nums { grid-template-columns: repeat(3, 1fr); } .fp-nums p + p { border-left: 1px solid var(--line); padding-left: 14px; } .fp-nums p { padding: 22px 0; } .fp-nums b { font-size: 46px; } .fp-nums span { font-size: 14px; line-height: 1.35; } }

/* ---------- textos legales y condiciones con el diseño de la portada (el texto no se toca) ---------- */
.lg { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 88px) clamp(88px, 10vw, 144px); }
.lg::before { content: ""; position: absolute; inset: -30% -10% auto 45%; height: 70vh; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(124, 92, 255, .18), transparent 70%); }
.lg .legal__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.lg__h { font-size: clamp(40px, 5vw, 68px); margin: 14px 0 16px; }
.lg .legal__date { font-size: 15px; line-height: 1.5; color: var(--faint); }
.lg .legal__body { max-width: 72ch; font-size: 17px; line-height: 1.7; color: rgba(242, 242, 245, .74); }
.lg .legal__body h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -.02em; color: var(--text); margin: 48px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); }
.lg .legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg .legal__body h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--text); margin: 28px 0 8px; }
.lg .legal__body ul { padding-left: 0; list-style: none; }
.lg .legal__body li { position: relative; padding-left: 20px; }
.lg .legal__body li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--violet); }
.lg .legal__body a { color: #B9A6FF; border-bottom: 1px solid rgba(185, 166, 255, .4); }
.lg .legal__body a:hover { border-color: #B9A6FF; }
.lg .legal__table { font-size: 15px; }
.lg .legal__table th { font-family: var(--font-head); font-weight: 700; }
.lg .legal__nav { gap: 10px; margin-top: 72px; padding-top: 28px; }
.lg .legal__nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transition: border-color 160ms, color 160ms; }
.lg .legal__nav a:hover { color: var(--text); border-color: var(--line-strong); }
.lg .legal__nav a[aria-current="page"] { color: var(--text); border-color: rgba(124, 92, 255, .6); background: rgba(124, 92, 255, .12); font-weight: 600; }

/* ---------- /citas · tours y actividades (demo de tours sin marca, piezas dibujadas) ---------- */
.tr-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .tr-grid { grid-template-columns: 5fr 6fr; gap: clamp(48px, 6vw, 88px); } }
.tr-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-2); margin-bottom: 14px; }
.tr-facts b { color: var(--ink); }
.tr-copy .hero-ln__actions { margin-top: 28px; }
.tr-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 46ch; }
.tr-ui { display: grid; gap: 16px; }
.tr-sync, .tr-mail { position: relative; background: var(--white); border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--shadow); color: var(--ink); }
.tr-sync { padding: 18px 18px 8px; }
.tr-sync__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-sync__top b { font-family: var(--font-head); font-size: 18px; }
.tr-cities { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--day); font-size: 12.5px; }
.tr-cities span { padding: 5px 10px; border-radius: 999px; color: var(--ink-3); }
.tr-cities .is-on { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 15, 26, .1); }
.tr-src { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tr-src p { display: grid; gap: 2px; padding: 10px 11px; border-radius: 12px; background: var(--day); }
.tr-src small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-src b { font-family: var(--font-head); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tr-src span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ok); }
.tr-src span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tr-list { margin-top: 10px; }
.tr-list li { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.tr-list time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tr-list span { display: grid; gap: 1px; min-width: 0; }
.tr-list b { font-size: 14.5px; font-weight: 600; }
.tr-list small { font-size: 12.5px; color: var(--ink-3); }
.tr-p { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.tr-p--gyg { background: #FFEFE6; color: #B4410F; }
.tr-p--via { background: #E6F4F1; color: #0B6B5A; }
.tr-p--wa { background: #E8F7EE; color: #127A3E; }
.tr-p--web { background: #EFEBFD; color: #5B3FD9; }
.tr-mail { padding: 16px 18px 18px; margin-left: clamp(0px, 4vw, 48px); }
.tr-mail__from { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.tr-mail__from time { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.tr-mail__q { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tr-mail__a { margin-top: 12px; border: 1.5px solid var(--violet); border-radius: 14px; overflow: hidden; }
.tr-mail__a small { display: block; padding: 8px 12px; background: #EFEBFD; color: #4A33B8; font-size: 12px; font-weight: 700; }
.tr-mail__a p { padding: 10px 12px 4px; font-size: 14px; line-height: 1.5; }
.tr-mail__btns { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 12px; font-size: 13px; font-weight: 600; }
.tr-mail__btns i { font-style: normal; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--hair-2); }
.tr-mail__btns b { padding: 7px 14px; border-radius: 10px; background: var(--violet-2); color: #fff; }
@media (max-width: 600px) { .tr-src { grid-template-columns: repeat(2, 1fr); } .tr-sync, .tr-mail { border-radius: 16px; } .tr-mail { margin-left: 0; } }

/* ---------- /citas · «Tu agenda, en tu bolsillo»: cuatro puntos y la pantalla de bloqueo con los avisos ---------- */
.bl-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .bl-grid { grid-template-columns: 6fr 5fr; gap: clamp(48px, 6vw, 96px); } }
.bl-feats { margin-top: 36px; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .bl-feats { grid-template-columns: 1fr 1fr; column-gap: 36px; } }
.bl-feats li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); align-content: start; }
.bl-feats b { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.bl-feats span { color: var(--muted); line-height: 1.5; }
.bl-extras { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.bl-extras span { font-size: 13.5px; color: rgba(242, 242, 245, .8); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.bl-ui { min-height: 0; padding: 12px 0; }
.lk { background: radial-gradient(120% 70% at 20% 0%, #4B36B8 0%, #241A5C 45%, #0E0B24 100%); color: #fff; }
.lk__sb { background: transparent !important; color: #fff; }
.lk__in { display: flex; flex-direction: column; align-items: stretch; padding: 10px 12px 18px; }
.lk__date { text-align: center; font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: rgba(255, 255, 255, .85); margin-top: 8px; }
.lk__time { text-align: center; font: 700 76px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: -2px; color: rgba(255, 255, 255, .95); margin-top: 2px; }
.lk__list { margin-top: auto; padding-top: 28px; display: grid; gap: 8px; }
.lk__n { display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 10px; padding: 11px 12px; border-radius: 18px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: rgba(255, 255, 255, .88); }
.lk__n b { display: block; font-weight: 600; color: #fff; }
.lk__n small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.lk__ic { width: 34px; height: 34px; border-radius: 9px; background: #7C5CFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='15' rx='3' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.js .lk__n.reveal { transition-delay: calc(var(--d) * 220ms); }
@media (max-width: 600px) { .bl-ui > .phone { zoom: .82; } }

/* los móviles dibujados mantienen siempre 9:19,5: sin esto, el mínimo automático de aspect-ratio deja crecer el móvil
   cuando el contenido de la pantalla es más alto (p. ej. al aparecer la invitación por WhatsApp de checkin en Android) */
.phone { min-height: 0; }
.phone > .scr { min-height: 0; overflow: hidden; }

/* ---------- /glop: agentes de ChatGPT o Claude sobre el TPV Glop (gen_glop.py). Verde de Glop solo como acento ---------- */
.gp { --glop: #2BBA68; --glop-2: #5FD68F; }
.gp-glop { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: .42em; background: var(--glop); color: #fff; font: 700 .62em/1 var(--font-head); font-style: normal; letter-spacing: -.02em; vertical-align: middle; flex: none; }
.gp-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.gp-eyebrow .gp-glop { width: 24px; height: 24px; font-size: 11px; border-radius: 7px; }
.gp .wp-hero__h em { font-style: normal; color: var(--glop-2); }
.gp-hero::before { background: radial-gradient(closest-side, rgba(43, 186, 104, .16), transparent 70%); }
.gp-num { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--glop); margin-bottom: 14px; }
.band--dark .gp-num { color: var(--glop-2); }

/* móvil con el chat del agente (aspecto de ChatGPT, sin logos) */
.gc { background: #161616; color: #ECECEC; font-family: var(--font-body); }
.sb--g { color: #ECECEC; background: #161616; }
.gc__hd { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.gc__hd .gp-glop { width: 32px; height: 32px; font-size: 12px; border-radius: 9px; }
.gc__hd b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.15; }
.gc__hd small { display: block; font-size: 11.5px; color: #9A9A9A; margin-top: 2px; }
.gc__voice { flex: none; display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 8px 14px; border-radius: 999px; background: #1F1F1F; color: #B9B9B9; font-size: 11.5px; white-space: nowrap; }
.gc__voice i { width: 8px; height: 8px; border-radius: 50%; background: var(--glop); box-shadow: 0 0 0 4px rgba(43, 186, 104, .18); }
.gc__voice b { color: #fff; font-weight: 600; }
.gc__voice svg { width: 14px; height: 14px; color: var(--glop-2); margin-left: auto; flex: none; }
.gc__msgs { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 18px; font-size: 13.5px; line-height: 1.4; overflow: hidden; }
.gc__u { align-self: flex-end; max-width: 86%; display: flex; gap: 8px; align-items: flex-start; padding: 9px 13px; border-radius: 16px; background: #2F2F2F; }
.gc__u svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--glop-2); }
.gc__tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; font-size: 11px; color: #B9B9B9; background: #1F1F1F; border: 1px solid rgba(255, 255, 255, .08); }
.gc__tool .gp-glop { width: 16px; height: 16px; font-size: 6.5px; border-radius: 4px; }
.gc__tool i:not(.gp-glop) { width: 6px; height: 6px; border-radius: 50%; background: var(--glop); }
.gc__a { align-self: flex-start; max-width: 96%; padding: 2px 4px; }
.gc__a b { color: #fff; }
.gc__kp { display: flex; gap: 6px; margin-top: 8px; }
.gc__kp div { flex: 1; padding: 7px 8px; border-radius: 10px; background: #1F1F1F; }
.gc__kp b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.gc__kp small { font-size: 10px; color: #9A9A9A; }
.gc__bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 8px 2px 18px; }
.gc__bars div { flex: 1; position: relative; border-radius: 5px 5px 2px 2px; background: #3A3A3A; }
.gc__bars div.g { background: var(--glop); }
.gc__bars span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: 9.5px; color: #9A9A9A; }
.gc__prev { border-radius: 12px; padding: 10px 12px; background: #1F1F1F; border: 1px solid rgba(255, 255, 255, .1); }
.gc__prev .t { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #9A9A9A; font-weight: 600; margin-bottom: 6px; }
.gc__prev .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12.5px; }
.gc__prev .row b { font-family: var(--font-head); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.gc__prev .row b.g { color: var(--glop-2); }
.gc__prev .row s { color: #8A8A8A; }
.gc__prev .btns { display: flex; gap: 6px; margin-top: 8px; }
.gc__prev .btns span { flex: 1; text-align: center; padding: 8px; border-radius: 9px; font-size: 12px; font-weight: 600; background: #2A2A2A; color: #CFCFCF; }
.gc__prev .btns span.ok { background: var(--glop); color: #0B0F1A; }
.gc__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--glop-2); font-weight: 600; }
.gc__ok svg { width: 14px; height: 14px; flex: none; }

/* factura leída del correo + flujo en tres pasos */
.gp-ui--doc { display: grid; gap: 18px; place-items: stretch; }
.gp-doc { position: relative; background: var(--white); color: var(--ink); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow-n); max-width: 560px; width: 100%; justify-self: center; }
.gp-doc__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.gp-doc__hd b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.gp-doc__hd small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.gp-doc__hd .pill svg { width: 13px; height: 13px; }
.gp-doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gp-doc th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 4px 0; border-bottom: 1px solid var(--hair); font-weight: 600; }
.gp-doc td { padding: 7px 0; border-bottom: 1px solid #F0EDF3; }
.gp-doc td:last-child, .gp-doc th:last-child { text-align: right; }
.gp-doc tr.tot td { font-weight: 700; border-bottom: 0; padding-top: 9px; }
.gp-doc__src { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.gp-doc__src svg { width: 15px; height: 15px; flex: none; }
.gp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 560px; width: 100%; justify-self: center; }
.gp-flow p { display: grid; gap: 4px; justify-items: start; padding: 12px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--line-strong); }
.gp-flow i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: #fff; margin-bottom: 4px; }
.gp-flow i svg { width: 18px; height: 18px; }
.gp-flow i.g { background: rgba(43, 186, 104, .18); color: var(--glop-2); }
.gp-flow i .gp-glop { width: 20px; height: 20px; font-size: 7.5px; border-radius: 5px; }
.gp-flow b { font-family: var(--font-head); font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; }
.gp-flow small { font-size: 12px; line-height: 1.4; color: rgba(242, 242, 245, .62); }
@media (max-width: 599px) { .gp-doc { padding: 16px; } .gp-doc table { font-size: 12px; } .gp-doc__hd { flex-direction: column; } .gp-flow { grid-template-columns: 1fr; } }

/* estado real, sectores, qué necesitas, pasos */
.gp-estado { margin-top: 40px; display: grid; gap: 14px; }
.gp-estado li { display: grid; gap: 8px; justify-items: start; padding: 22px 22px 24px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--line-strong); }
.gp-estado b { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin-top: 4px; }
.gp-estado p { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
@media (min-width: 900px) { .gp-estado { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gp-quien { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .gp-quien { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
.gp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gp-chips li { font-family: var(--font-head); font-weight: 700; font-size: 15px; padding: 11px 16px; border-radius: 999px; background: var(--white); color: var(--ink); border: 1px solid var(--hair); }
.gp-chips li:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.gp-need { margin-top: 44px; display: grid; gap: 16px; }
@media (min-width: 900px) { .gp-need { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gp-need__c { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 24px 22px 26px; border-radius: 20px; background: var(--day); border: 1px solid var(--hair); }
.gp-need__c .pill--violet-n { background: #EFEBFD; color: #5B3FD9; }
.gp-need__c h3 { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.gp-need__c p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.gp-need__c a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }
.gp-legal { margin-top: 28px; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 70ch; }
.gp-steps { margin-top: 44px; display: grid; gap: 18px; }
@media (min-width: 900px) { .gp-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.gp-steps li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.gp-step__n { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--violet-2); }
.gp-steps h3 { font-family: var(--font-head); font-weight: 800; font-size: 24px; letter-spacing: -.025em; color: var(--ink); }
.gp-steps p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.gp-precio { margin-top: 36px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.band__link + .gp-link { margin-left: 22px; }
.gp-glop { text-transform: none; }
.gp-row .band__h { font-size: clamp(26px, 2.8vw, 36px); }
.gp-row .band__facts b { color: inherit; }
@media (max-width: 959px) { .gp-num { order: 0; } .gp-row .band__facts { order: 4; } .gp-row .band__p { margin-top: 8px; } }
@media (max-width: 600px) { .gp-row .band__ui > .phone, .gp-hero__ui > .phone { zoom: .86; } }
@media (max-width: 959px) { .band__link + .gp-link { margin-left: 0; margin-top: 12px; } }