/* Dirección 2 · Cuaderno. Papel blanco tibio con el cuadriculado del cuaderno
   universitario, tinta de lápiz pasta azul, correcciones en rojo y un
   resaltador durazno. Lo humano está en los materiales, no en adornos. Una
   sola apariencia a propósito: es una marca, no sigue el tema del visor.

   Este archivo es una vista previa: las siete páginas viven en un solo HTML y
   cada una se muestra en su propia dirección (#recepcionista, #contacto…).
   Al publicar se separan en siete archivos; ver el brief, §21. */
:root{
  --papel:#FCFAF6;
  --hoja:#FFFFFF;
  --cuadro:rgba(44,80,214,.075);
  --tinta:#1C2230;
  --tinta-2:#525B6B;
  --tinta-3:#646C7C;
  --pasta:#2C50D6;
  --pasta-osc:#2142B4;
  --pasta-velo:#EAEFFF;
  --rojo:#CF3E2D;
  --verde:#187A40;
  --resaltador:#FFD6A8;
  --durazno:#FFF1E2;
  --hilo:#E8E2D6;
  --f:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mano:'Caveat','Segoe Print','Bradley Hand',cursive;
  --gut:clamp(1rem,4vw,2.5rem);
  --alto-cab:4.25rem;
  --ease:cubic-bezier(.22,.7,.25,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
:focus-visible{outline:2.5px solid var(--pasta);outline-offset:3px;border-radius:6px}
h1[tabindex="-1"]:focus{outline:none}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gut)}
.resalta{background:linear-gradient(transparent 56%,var(--resaltador) 56%,var(--resaltador) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.06em}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pag[hidden]{display:none}
.ico{width:1em;height:1em;flex:none}

/* ─── cabecera ─── */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(252,250,246,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hilo)}
.head>.wrap{display:flex;align-items:center;gap:1rem;min-height:var(--alto-cab)}
/* el logo: el ícono «L2» (la L, el 2 y la marca de corrección en rojo) y, al lado,
   la palabra LeftTo con mayúsculas (decisión del 14/10/2026, brief §24.2) */
.marca{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:800;font-size:1.55rem;line-height:1;letter-spacing:-.04em;color:var(--tinta)}
.marca-ico{width:1.75em;height:1.75em;flex:none;overflow:visible}
.marca-pal{white-space:nowrap}
.nav{display:flex;align-items:center;gap:.25rem;margin-left:auto;font-size:.95rem;font-weight:500}
.nav>a,.nav-sub>button{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .75rem;border:0;border-radius:8px;background:none;font:inherit;color:var(--tinta-2);text-decoration:none;cursor:pointer}
.nav>a:hover,.nav-sub>button:hover,.nav>a[aria-current="page"],.nav-sub.is-actual>button{color:var(--pasta)}
.nav-sub{position:relative}
.nav-sub>button .ico{width:11px;height:11px;transition:transform .2s var(--ease)}
.nav-sub>button[aria-expanded="true"] .ico{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%);width:21rem;display:grid;gap:.1rem;padding:.45rem;background:var(--hoja);border:1px solid var(--hilo);border-radius:14px;box-shadow:0 24px 48px -28px rgba(28,34,48,.45)}
.menu[hidden]{display:none}
.menu a{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;padding:.55rem .6rem;border-radius:10px;text-decoration:none}
.menu a:hover,.menu a[aria-current="page"]{background:var(--papel)}
.menu b{display:block;font-weight:700;font-size:.93rem;line-height:1.25;color:var(--tinta)}
.menu small{display:block;font-size:.8rem;line-height:1.35;color:var(--tinta-2)}
.head-wa{margin-left:.5rem}
.hamb{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:1px solid var(--hilo);border-radius:12px;background:var(--hoja);cursor:pointer;place-items:center}
.hamb span{display:block;grid-area:1/1;width:18px;height:2px;border-radius:2px;background:var(--tinta);transition:transform .25s var(--ease),opacity .2s}
.hamb span:nth-child(1){transform:translateY(-6px)}
.hamb span:nth-child(3){transform:translateY(6px)}
.hamb[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.panel{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--alto-cab));overflow-y:auto;overscroll-behavior:contain;background:var(--papel);border-bottom:1px solid var(--hilo);box-shadow:0 24px 40px -30px rgba(28,34,48,.5)}
.panel[hidden]{display:none}
.panel nav{display:grid;padding-block:.75rem 1.5rem}
.panel-l{padding:.85rem 0;font-size:1.15rem;font-weight:700;text-decoration:none;border-bottom:1px solid var(--hilo)}
.panel-k{padding-top:1rem;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.panel-s{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;font-weight:600;text-decoration:none}
.panel-s:last-of-type{border-bottom:1px solid var(--hilo);padding-bottom:1rem}
.panel a[aria-current="page"]{color:var(--pasta)}
.panel .btn{justify-content:center;margin-top:1.25rem}
.panel .alt{justify-self:center}
.panel-n{margin-top:.1rem;text-align:center;font-size:.95rem;font-weight:700;color:var(--tinta)}

.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 .97rem/1 var(--f);text-decoration:none;border-radius:999px;padding:.95rem 1.45rem;border:1.5px solid transparent;white-space:nowrap;cursor:pointer;transition:background .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease)}
.btn .ico{width:14px;height:14px}
.btn--azul{background:var(--pasta);color:#fff}
.btn--azul:hover{background:var(--pasta-osc);transform:translateY(-1px)}
.btn--linea{border-color:var(--tinta);color:var(--tinta);background:var(--hoja)}
.btn--linea:hover{border-color:var(--pasta);color:var(--pasta)}
.btn--sm{padding:.65rem 1.05rem;font-size:.9rem}

/* ─── piezas comunes ─── */
.hero{position:relative;overflow-x:hidden;overflow-x:clip}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--cuadro) 1px,transparent 1px),linear-gradient(90deg,var(--cuadro) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);pointer-events:none}
.hero>.wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.tag{display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;color:var(--tinta-2);padding:.42rem .9rem .42rem .75rem;border-radius:999px;border:1px solid var(--hilo);background:var(--hoja)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pasta)}
.tag--srv{padding-left:.4rem}
.tag--srv::before{display:none}
.tag--srv .picto{width:24px;height:24px;border-radius:7px}
.tag--srv .picto svg{width:15px;height:15px}
.h1{font-size:clamp(2.5rem,5.5vw,4.4rem);font-weight:800;letter-spacing:-.045em;line-height:1.02;max-width:13ch}
.lede{font-size:clamp(1.02rem,1.3vw,1.125rem);line-height:1.65;color:var(--tinta-2);max-width:50ch}
.lede b{color:var(--tinta);font-weight:700}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin-top:1.8rem}
.nota{font-size:1rem;color:var(--tinta-2)}
.picto{flex:none;width:40px;height:40px;border-radius:11px;background:var(--pasta-velo);color:var(--pasta);display:grid;place-items:center}
.picto svg{width:22px;height:22px}
.k{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}

/* ─── inicio: título y accesos a la izquierda, mazo a la derecha ─── */
.hero--inicio{padding-block:clamp(1.75rem,4.5vw,3.25rem) clamp(2.25rem,5vw,3.5rem)}
.hero--inicio>.wrap{grid-template-areas:"t m" "a m";row-gap:2.25rem}
.hero-t{grid-area:t;align-self:end}
.hero--inicio .h1{font-size:clamp(2.4rem,4.9vw,3.9rem);max-width:14ch}
.accesos-wrap{grid-area:a;align-self:start}
.accesos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.7rem}
/* si quedan en número impar, el último va solo y al medio de su fila */
.acceso:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .3rem)}
.acceso{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;min-height:4.6rem;padding:.75rem .85rem;background:var(--hoja);border:1px solid var(--hilo);border-radius:14px;text-decoration:none;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.acceso:hover{border-color:#CFC6B4;transform:translateY(-2px);box-shadow:0 16px 30px -24px rgba(28,34,48,.45)}
.acceso b{display:block;font-size:.95rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.acceso small{display:block;margin-top:.15rem;font-size:.8rem;line-height:1.35;color:var(--tinta-2)}
.acceso>.ico{width:13px;height:13px;color:var(--pasta);transition:transform .2s var(--ease)}
.acceso:hover>.ico{transform:translate(2px,-2px)}

/* el mazo de la semana: tres cartas, una por día, abiertas en abanico. Todas
   ocupan la misma celda, así que miden lo que mide la más alta. Las de atrás
   muestran solo el borde; su texto aparece cuando pasan adelante. */
.mazo-wrap{grid-area:m;position:relative;padding-top:2.6rem}
/* la anotación va por encima de las cartas, como lápiz sobre el papel, y
   no estorba al tomar la carta de arriba */
.mano{position:absolute;top:0;left:1.2rem;font-family:var(--mano);font-weight:600;font-size:1.55rem;line-height:1;color:var(--pasta);display:flex;align-items:flex-end;gap:.3rem;transform:rotate(-3deg);z-index:5;pointer-events:none}
.mano svg{width:34px;height:30px;flex:none;transform:translateY(.55rem)}
.mazo{margin-inline:clamp(1.3rem,3vw,1.9rem)}
.mazo-pila{display:grid;isolation:isolate;touch-action:pan-y}
.carta{grid-area:1/1;position:relative;min-width:0;display:flex;flex-direction:column;background:var(--hoja);border:1px solid var(--hilo);border-radius:14px;padding:1.25rem 1.3rem 1rem;box-shadow:0 1px 0 var(--hilo),0 26px 50px -30px rgba(28,34,48,.38);transform-origin:50% 100%;transition:transform .46s var(--ease),box-shadow .3s,background-color .3s;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.carta:focus-visible{border-radius:14px}
.carta[data-pos="0"]{z-index:3;cursor:grab}
.carta[data-pos="1"]{z-index:2;transform:translate(-4px,2px) rotate(-3.2deg);background:#FEFCF8;box-shadow:0 1px 0 var(--hilo),0 16px 32px -26px rgba(28,34,48,.3)}
.carta[data-pos="2"]{z-index:1;transform:translate(4px,4px) rotate(3.2deg);background:#FAF6EE;box-shadow:0 1px 0 var(--hilo),0 12px 26px -24px rgba(28,34,48,.28)}
.carta>*{transition:opacity .25s var(--ease)}
.carta[data-pos="1"]>*,.carta[data-pos="2"]>*{opacity:0}
.is-drag .carta[data-pos="1"]>*{opacity:1}
.is-drag .carta{transition:none;cursor:grabbing}
.sin-anim .carta,.sin-anim .carta>*{transition:none}
.carta-k{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);padding-bottom:.8rem;border-bottom:1.5px solid var(--pasta-velo)}
.dia{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin-top:1rem}
.dia span{font-size:clamp(1.8rem,3vw,2.15rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.dia b{font-weight:600;font-size:.8rem;color:var(--pasta);font-variant-numeric:tabular-nums;background:var(--pasta-velo);border-radius:6px;padding:.08rem .45rem}
.que{margin-top:.35rem;font-weight:700;font-size:1.02rem}
.cambio{margin-top:.9rem;padding-top:.85rem;border-top:1px dashed var(--hilo)}
/* martes y sábado miden lo mismo que el jueves: su espacio libre se reparte
   entre arriba y abajo del cambio, en vez de quedar todo al fondo */
.carta--corta .cambio{margin-top:auto}
.antes{font-size:1rem;color:var(--tinta-3)}
.antes s{text-decoration-color:var(--rojo);text-decoration-thickness:2px}
.ahora{margin-top:.2rem;font-size:1rem;color:var(--tinta);display:grid;grid-template-columns:1.1rem 1fr;gap:.3rem}
.ahora::before{content:"✓";color:var(--verde);font-weight:800}
.gratis{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:600;color:var(--tinta);background:var(--durazno);border:1px solid #F5D9B8;border-radius:8px;padding:.25rem .55rem}
.carta-pie{margin-top:auto;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;font-weight:600;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.carta-pie span+span{color:var(--pasta)}
.mazo-nav{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:1.35rem}
.flecha{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--hilo);background:var(--hoja);color:var(--tinta-2);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.flecha:hover{border-color:var(--pasta);color:var(--pasta)}
.flecha svg{width:13px;height:13px}
.puntos{display:flex}
.puntos button{width:30px;height:34px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.puntos button::before{content:"";width:8px;height:8px;border-radius:999px;background:#D5CEC0;transition:width .3s var(--ease),background-color .3s}
.puntos button:hover::before{background:var(--tinta-3)}
.puntos button[aria-current="true"]::before{width:22px;background:var(--pasta)}
.cap{font-size:1rem;color:var(--tinta-3);margin-top:.9rem;text-align:center}


/* ─── páginas de servicio ─── */
.hero--srv{padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,5.5vw,4.25rem)}
.h1--srv{margin-top:1.1rem;font-size:clamp(2.2rem,4.4vw,3.5rem);max-width:17ch}
.hace{margin-top:1.4rem}
.hace .lede{margin-top:.35rem}
.demo{position:relative;background:var(--hoja);border:1px solid var(--hilo);border-radius:16px;padding:1.2rem 1.25rem 1.1rem;box-shadow:0 1px 0 var(--hilo),0 26px 50px -30px rgba(28,34,48,.38);transform:rotate(.6deg)}
.demo-k{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.75rem;border-bottom:1.5px solid var(--pasta-velo)}
.ej{flex:none;font-size:.72rem;font-weight:600;color:var(--tinta-2);border:1px solid var(--hilo);border-radius:999px;padding:.1rem .55rem;background:var(--papel);letter-spacing:0;text-transform:none}
.demo-cap{margin-top:.95rem;font-size:1rem;line-height:1.5;color:var(--tinta-3)}
.paso-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin-top:1rem;font-size:.82rem;font-weight:700;color:var(--tinta)}
.paso-k small{font-weight:500;color:var(--tinta-3)}
.burbuja{width:fit-content;max-width:90%;margin-top:.45rem;padding:.55rem .75rem;border-radius:14px;font-size:.86rem;line-height:1.45}
.burbuja--in{background:var(--pasta-velo);border-bottom-left-radius:4px}
.burbuja--out{margin-left:auto;background:var(--durazno);border-bottom-right-radius:4px}
.resena{margin-top:.9rem}
.estrellas{font-size:.95rem;letter-spacing:.1em;color:#D5CEC0}
.estrellas span{color:var(--tinta)}
.estrellas small{margin-left:.4rem;font-size:.76rem;letter-spacing:0;color:var(--tinta-3)}
.cita{margin-top:.3rem;font-size:.92rem;line-height:1.5}
.respuesta{margin-top:.45rem;padding-left:.8rem;border-left:3px solid var(--pasta-velo);font-size:.86rem;line-height:1.5;color:var(--tinta-2)}
.repite{margin-top:.6rem}
.repite li{display:grid;grid-template-columns:1.2rem 1fr;gap:.6rem;align-items:center;padding-block:.7rem;border-bottom:1px dashed var(--hilo);font-size:.95rem}
.repite li::before{content:"";width:1.05rem;height:1.05rem;border:1.5px solid var(--pasta);border-radius:4px}
.repite li:last-child{border-bottom:0;font-weight:700;color:var(--pasta)}
.web-fila{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:1.1rem;align-items:center;margin-top:1rem}
.tel{border:1.5px solid var(--tinta);border-radius:22px;padding:.5rem;background:var(--papel)}
.tel-pag{display:grid;gap:.45rem;padding:.55rem .5rem .6rem;border-radius:15px;background:var(--hoja);font-size:.72rem;line-height:1.35}
.tel-nombre{font-weight:800;font-size:.85rem;letter-spacing:-.02em}
.tel-foto{height:4.2rem;border-radius:8px;background:repeating-linear-gradient(135deg,var(--pasta-velo) 0 8px,#F4F6FF 8px 16px);display:grid;place-items:center;color:var(--pasta);font-weight:600}
.tel-linea{color:var(--tinta-2)}
.tel-linea b{color:var(--tinta)}
.tel-btn{display:block;text-align:center;padding:.45rem;border-radius:999px;background:var(--pasta);color:#fff;font-weight:700}
.gc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1rem;align-items:end;max-width:20rem;aspect-ratio:1.7;margin-top:1rem;padding:1rem 1.05rem;border-radius:14px;background:var(--tinta);color:#fff}
.gc-marca{align-self:start;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;line-height:1.2}
.gc-marca small{display:block;font-weight:500;font-size:.75rem;letter-spacing:0;opacity:.7}
.gc-monto{grid-column:1;font-weight:800;font-size:1.7rem;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.gc-cod{grid-column:1;font-size:.72rem;letter-spacing:.08em;opacity:.7;font-variant-numeric:tabular-nums}
.gc-qr{grid-column:2;grid-row:1/4;align-self:center;width:4.4rem;height:4.4rem;padding:.3rem;border-radius:8px;background:#fff;color:var(--tinta)}
.gc-qr svg{width:100%;height:100%;display:block}
.saldo{display:flex;justify-content:space-between;gap:1rem;margin-top:.45rem;font-size:.86rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.saldo b{color:var(--tinta)}

.cuerpo{padding-block:clamp(2.5rem,6vw,4.5rem);background:var(--hoja);border-top:1px solid var(--hilo)}
.cuerpo>.wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.bloque{min-width:0;background:var(--papel);border:1px solid var(--hilo);border-radius:16px;padding:clamp(1.3rem,2.6vw,1.85rem)}
.bloque--ancho{grid-column:1/-1}
.bloque h2{margin-top:.35rem;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.035em}
.bloque>p:not(.k){margin-top:.8rem;color:var(--tinta-2);max-width:62ch}
.bloque>p b{color:var(--tinta)}
.bloque>p.sub{margin-top:1.2rem;font-size:.82rem;font-weight:700;color:var(--pasta)}
.si,.no{display:grid;gap:.6rem;margin-top:.9rem;font-size:1rem}
.sub+.si{margin-top:.5rem}
.si li,.no li{display:grid;grid-template-columns:1.25rem 1fr;gap:.45rem}
.si li::before{content:"✓";color:var(--verde);font-weight:800}
.no li{color:var(--tinta-2)}
.no li::before{content:"✕";color:var(--tinta-3);font-weight:800}
.si b,.no b{font-weight:700;color:var(--tinta)}
.reglas{margin-top:1.2rem;padding:.9rem 1rem;border-radius:12px;background:var(--pasta-velo);font-size:1rem}
.reglas p+p{margin-top:.35rem}
.reglas b{color:var(--pasta-osc)}
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem 1.6rem;margin-top:1.4rem}
.pasos li{counter-increment:paso;position:relative;padding-top:2.75rem;font-size:1rem;color:var(--tinta-2)}
.pasos li::before{content:counter(paso);position:absolute;top:0;left:0;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--pasta);background:var(--hoja);color:var(--pasta);display:grid;place-items:center;font-weight:800;font-size:.92rem}
.pasos b{display:block;margin-bottom:.15rem;color:var(--tinta);font-weight:700}
.bloque--cotiza{background:var(--durazno);border-color:#F2D7B8}
.bloque--cotiza .fila{margin-top:1.4rem}
/* lo que importa que se lea junto a un botón: en negrita, más grande y en
   su propia línea, no en gris al lado */
.promesa,.bloque>p.promesa{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:1.02rem;font-weight:700;line-height:1.35;color:var(--tinta)}
.promesa .ico{width:19px;height:19px;color:var(--pasta)}
.hero--contacto .promesa{font-size:1.12rem}
/* la otra vía, más discreta que el botón: WhatsApp */
.alt{display:inline-flex;align-items:center;min-height:44px;font-size:.93rem;font-weight:600;color:var(--tinta-2);text-decoration:underline;text-decoration-color:#CFC6B4;text-underline-offset:3px}
.alt:hover{color:var(--pasta);text-decoration-color:currentColor}

/* ─── contacto ─── */
.hero--contacto{padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,5.5vw,4.25rem)}
.hero--contacto .h1{margin-top:1.1rem;font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:15ch}
.hero--contacto .lede{margin-top:1.3rem}
.lineas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1.5px solid var(--hilo);font-size:.95rem;color:var(--tinta-2);max-width:34rem}
.lineas b{display:block;margin-bottom:.2rem;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3)}
.lineas a{color:var(--tinta);font-weight:600;text-decoration:none}
.lineas-ancho{grid-column:1/-1}
.dir{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.dir a{overflow-wrap:anywhere}
.copiar{min-height:36px;padding:.3rem .8rem;border:1px solid var(--hilo);border-radius:999px;background:var(--hoja);font:600 .8rem/1 var(--f);color:var(--tinta-2);cursor:pointer;touch-action:manipulation}
.copiar:hover{border-color:var(--pasta);color:var(--pasta)}
.cot-alt{margin-top:.9rem;font-size:1rem;color:var(--tinta-2)}
.cot-l{margin-top:.8rem;font-size:1rem;color:var(--tinta-2)}
.cot{display:grid;gap:.5rem;margin-top:.9rem}
.cot a{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.6rem .7rem;border:1px solid var(--hilo);border-radius:12px;background:var(--papel);text-decoration:none;transition:border-color .2s}
.cot a:hover{border-color:var(--pasta)}
.cot .picto{width:36px;height:36px;border-radius:10px}
.cot .picto svg{width:19px;height:19px}
.cot b{display:block;font-size:.93rem;line-height:1.25}
.cot small{display:block;font-size:.78rem;line-height:1.35;color:var(--tinta-2)}
.cot a>.ico{width:13px;height:13px;color:var(--pasta)}
.cobro{display:grid;gap:.9rem;margin-top:1rem}
.cobro p{color:var(--tinta-2);font-size:1rem}
.cobro b{color:var(--tinta)}

/* ─── pie ─── */
.pie-sitio{background:var(--durazno);border-top:1.5px solid #F2D7B8;padding-block:clamp(2.5rem,5vw,3.5rem) 0;font-size:1rem;color:var(--tinta-2)}
.pie-a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);gap:2rem}
.pie-a p{margin-top:.8rem;max-width:36ch}
.pie-a p b{color:var(--tinta)}
.pie-a a{text-decoration:none}
.pie-a a:hover{color:var(--pasta)}
.pie-col p{margin:0 0 .5rem;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3)}
.pie-col a{display:block;padding-block:.2rem;font-weight:600;color:var(--tinta)}
.pie-b{margin-top:2.5rem;padding-block:1.4rem 2rem;border-top:1.5px solid #F2D7B8;font-size:1rem}

/* ─── botón flotante ─── */
.flota{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:.65rem;background:var(--hoja);color:var(--tinta);border:1px solid var(--hilo);border-radius:999px;padding:.4rem 1.05rem .4rem .4rem;text-decoration:none;font-size:.9rem;font-weight:700;box-shadow:0 18px 40px -18px rgba(28,34,48,.45)}
.flota{transition:opacity .25s var(--ease),visibility .25s}
.flota--fuera{opacity:0;visibility:hidden;pointer-events:none}
.flota svg{width:36px;height:36px;flex:none}
.flota small{display:block;font-weight:500;font-size:.72rem;color:var(--tinta-2)}

/* ─── tablet y celular ─── */
@media (max-width:900px){
  .hero>.wrap{grid-template-columns:minmax(0,1fr)}
  .hero--inicio>.wrap{grid-template-areas:"t" "m" "a";row-gap:1.6rem}
  .mazo-wrap,.demo{max-width:30rem}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-a{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pie-a>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .nav,.head-wa{display:none}
  .hamb{display:grid}
  .menu-abierto .flota{display:none}
}
@media (max-width:720px){
  .cuerpo>.wrap,.lineas{grid-template-columns:minmax(0,1fr)}
  .pasos{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .pasos li{padding:0 0 0 3rem}
  .pasos li::before{top:-.15rem}
  .demo{transform:none}
}
@media (max-width:520px){
  .acceso small{display:none}
  .web-fila{grid-template-columns:minmax(0,1fr)}
  .tel{max-width:12rem}
  .pie-a{grid-template-columns:minmax(0,1fr)}
  /* el inicio, lo más cerca posible de una pantalla */
  .hero--inicio{padding-top:1.1rem}
  .hero--inicio>.wrap{row-gap:.9rem}
  .hero--inicio .h1{font-size:2rem}
  .mazo-wrap{padding-top:2.25rem}
  .carta{padding:1rem 1.05rem .85rem}
  .carta-k{display:none}
  .dia{margin-top:0}
  .dia span{font-size:1.65rem}
  .cambio{margin-top:.7rem;padding-top:.7rem}
  /* en el celular, el día y la posición los dicen los puntos de abajo */
  .carta-pie{display:none}
  .carta--corta .cambio{margin-bottom:auto}
  .mazo-nav{margin-top:.75rem}
  .cap{margin-top:.5rem;font-size:1rem}
  /* el botón flotante, solo el ícono: tapa lo menos posible; el nombre queda para lectores de pantalla */
  .flota{padding:.35rem}
  .flota span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* los cuatro accesos, dos por fila */
  .accesos{gap:.5rem;margin-top:.45rem}
  .acceso{grid-template-columns:auto minmax(0,1fr);gap:.55rem;min-height:3.4rem;padding:.5rem .6rem .5rem .5rem}
  .acceso .picto{width:32px;height:32px;border-radius:9px}
  .acceso .picto svg{width:18px;height:18px}
  .acceso b{font-size:.88rem;line-height:1.2}
  .acceso>.ico{display:none}
}
@media (max-width:420px){
  .flota small{display:none}
  .carta-k{font-size:.68rem;letter-spacing:.05em}
  .btn{padding:.9rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
/* ─── demo: ficha ─── */
.demo--ficha{container-type:inline-size}
.demo--ficha button{touch-action:manipulation}
.demo--ficha .f-pestanas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;margin-top:.8rem}
.demo--ficha .f-pest{min-height:44px;padding:.4rem .5rem;border:1.5px solid var(--hilo);border-radius:12px;background:var(--papel);color:var(--tinta-2);font:600 .9rem/1.2 var(--f);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.demo--ficha .f-pest[aria-pressed="true"]{background:var(--pasta-velo);border-color:var(--pasta);color:var(--pasta)}
.demo--ficha .f-escena{display:grid;margin-top:.8rem}
.demo--ficha .f-parte{grid-area:1/1;min-width:0;transition:opacity .3s var(--ease),visibility .3s}
.demo--ficha .f-parte[data-on="0"]{opacity:0;visibility:hidden;pointer-events:none}
.demo--ficha .f-p2:focus{outline:none}

/* parte 1: la ficha */
.demo--ficha .f-card{background:var(--papel);border:1px solid var(--hilo);border-radius:12px;padding:.6rem .85rem .2rem}
.demo--ficha .f-nombre{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.demo--ficha .f-calif{margin-top:.1rem;font-size:.84rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.demo--ficha .f-filas{margin-top:.4rem}
.demo--ficha .f-fila{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem .6rem;padding:.3rem 0;border-top:1px dashed var(--hilo)}
.demo--ficha .f-fila:first-child{border-top:0}
.demo--ficha .f-rot{line-height:1.6}
.demo--ficha .f-cont{display:grid;gap:.05rem;min-width:0}
.demo--ficha .f-mal{min-height:1.4rem;font-size:.93rem;line-height:1.5;color:var(--tinta);overflow-wrap:anywhere;transition:font-size .3s var(--ease),color .3s var(--ease)}
.demo--ficha .f-fila.is-ok .f-mal{font-size:.8rem;color:var(--tinta-2);text-decoration:line-through;text-decoration-color:var(--rojo);text-decoration-thickness:2px}
.demo--ficha .f-bien{display:block;min-height:1.4rem;font-size:.92rem;line-height:1.45;font-weight:600;color:var(--pasta);overflow-wrap:anywhere;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility .3s}
.demo--ficha .f-bien::before{content:"✓";margin-right:.45rem;color:var(--verde);font-weight:800}
.demo--ficha .f-fila.is-ok .f-bien{visibility:inherit;opacity:1}
.demo--ficha .f-mano{position:absolute;right:.2rem;top:.25rem;font-family:var(--mano);font-size:1.2rem;line-height:1.1;color:var(--pasta);visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility .3s}
.demo--ficha .f-fila.is-ok .f-mano{visibility:inherit;opacity:1}
.demo--ficha .f-fotos{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .35rem}
.demo--ficha .f-fotos svg{display:block;flex:none;width:3.6rem;height:2.7rem}
.demo--ficha .f-dib{fill:none;stroke:var(--pasta);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo--ficha .f-dib *{vector-effect:non-scaling-stroke}

.demo--ficha .f-control{margin-top:.8rem}
.demo--ficha .f-rango-l{display:block;font-size:.84rem;font-weight:700;color:var(--tinta)}
.demo--ficha .f-rango{display:block;width:100%;height:44px;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y}
.demo--ficha .f-rango::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--pasta) var(--p,0px),var(--hilo) var(--p,0px))}
.demo--ficha .f-rango::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:#fff;border:2px solid var(--pasta);box-sizing:border-box}
.demo--ficha .f-rango::-moz-range-track{height:4px;border-radius:4px;background:var(--hilo)}
.demo--ficha .f-rango::-moz-range-progress{height:4px;border-radius:4px;background:var(--pasta)}
.demo--ficha .f-rango::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--pasta);box-sizing:border-box}
.demo--ficha .f-acc{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin-top:.4rem}
.demo--ficha .btn{min-height:44px}
.demo--ficha .btn:disabled{opacity:.55;cursor:default;transform:none}
.demo--ficha .f-cuenta{font-size:.86rem;font-weight:600;color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* parte 2: la reseña. El borrador y la respuesta publicada comparten celda */
.demo--ficha .f-cajon{display:grid;margin-top:.1rem}
.demo--ficha .f-cajon>*{grid-area:1/1;min-width:0}
.demo--ficha .f-globo{display:grid;width:fit-content;max-width:90%}
.demo--ficha .f-globo>*{grid-area:1/1;min-width:0;overflow-wrap:anywhere}
.demo--ficha .f-resv{visibility:hidden}
.demo--ficha .f-pregunta{margin-top:.7rem}
.demo--ficha .f-preg{font-size:.88rem;font-weight:700;color:var(--tinta)}
.demo--ficha .f-botones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem}
.demo--ficha .f-vista-pub .respuesta{margin-top:.4rem}
.demo--ficha .f-p2[data-estado="escribiendo"] .f-pregunta{visibility:hidden}
.demo--ficha .f-p2[data-estado="publicada"] .f-vista-borr{visibility:hidden}
.demo--ficha .f-p2:not([data-estado="publicada"]) .f-vista-pub{visibility:hidden}

/* en pantallas anchas, cada fila lleva la etiqueta a la izquierda */
@container (min-width:400px){
  .demo--ficha .f-fila{grid-template-columns:4.9rem minmax(0,1fr);align-items:start}
  .demo--ficha .f-mano{position:static}
  .demo--ficha .f-fotos svg{width:4rem;height:3rem}
}
@media (prefers-reduced-motion:reduce){.demo--ficha *,.demo--ficha *::before,.demo--ficha *::after{animation:none!important;transition:none!important}}
/* ─── demo: recepcionista ─── */
.demo--recepcionista{container-type:inline-size}
.demo--recepcionista .rc-cuerpo{display:grid;gap:1.1rem;margin-top:.95rem}
.demo--recepcionista .rc-cuerpo>*{min-width:0}
.demo--recepcionista .rc-caja{height:11rem;overflow-y:auto;overscroll-behavior:contain;margin-top:.6rem;padding-right:.25rem;font-size:.86rem;line-height:1.45;color:var(--tinta-2);overflow-wrap:anywhere}
.demo--recepcionista .rc-toca{color:var(--tinta-3)}
.demo--recepcionista .rc-play{width:100%;justify-content:center;touch-action:manipulation}
.demo--recepcionista.rc-inicio .rc-caja{height:auto;overflow:visible}
.demo--recepcionista .rc-l{margin:0 0 .5rem;color:var(--tinta-2)}
.demo--recepcionista .rc-l.rc-ahora{color:var(--tinta)}
.demo--recepcionista .rc-l b{font-weight:700;margin-right:.3rem;color:inherit}
.demo--recepcionista .rc-agenda{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;margin-top:.5rem}
.demo--recepcionista .rc-agenda th{font-size:.7rem;font-weight:600;color:var(--tinta-3);text-align:center;padding:0;height:1.45rem;vertical-align:bottom}
.demo--recepcionista .rc-agenda .rc-hora{width:1.75rem}
.demo--recepcionista .rc-agenda th[scope=row]{font-size:.62rem;text-align:right;padding-right:.15rem;vertical-align:middle;font-variant-numeric:tabular-nums}
.demo--recepcionista .rc-agenda td{position:relative;height:2.2rem;padding:.1rem 1px;border:1px solid var(--hilo);border-radius:7px;background:var(--hoja);font-size:.7rem;line-height:1.15;color:var(--tinta-3);text-align:center;vertical-align:middle;overflow-wrap:anywhere;transition:background-color .3s var(--ease)}
.demo--recepcionista .rc-agenda td.rc-ocupada{background:var(--papel)}
.demo--recepcionista .rc-trazo{position:absolute;inset:2px;border:2px solid var(--pasta);border-radius:50% 46% 52% 48% / 46% 54% 46% 54%;clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease);pointer-events:none}
.demo--recepcionista td.rc-marca .rc-trazo{clip-path:inset(0 0 0 0)}
.demo--recepcionista td.rc-hecha{background:var(--resaltador)}
.demo--recepcionista .rc-toby{position:relative;display:block;font-family:var(--mano);font-size:1.2rem;line-height:1;color:var(--pasta);white-space:nowrap;opacity:0;transition:opacity .3s var(--ease)}
.demo--recepcionista td.rc-hecha .rc-toby{opacity:1}
.demo--recepcionista .rc-ok{margin-top:.6rem;font-size:.86rem;line-height:1.4;color:var(--tinta);visibility:hidden}
.demo--recepcionista .rc-ok.rc-listo{visibility:visible}
.demo--recepcionista .rc-check{color:var(--verde);font-weight:700}
.demo--recepcionista .rc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo--recepcionista .rc-corta{display:none}
@container (min-width:420px){
  .demo--recepcionista .rc-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1rem;align-items:start}
    .demo--recepcionista .rc-agenda td{font-size:.66rem}
  .demo--recepcionista .rc-larga{display:none}
  .demo--recepcionista .rc-corta{display:inline}
}
@media (prefers-reduced-motion:reduce){.demo--recepcionista *,.demo--recepcionista *::before,.demo--recepcionista *::after{animation:none!important;transition:none!important}}
/* ─── demo: automatizaciones ─── */
.demo--automatizaciones{container-type:inline-size}
.demo--automatizaciones .au-tareas{display:grid;gap:.45rem;margin-top:.8rem}
.demo--automatizaciones .au-tarea{display:flex;align-items:center;gap:.6rem;width:100%;min-height:44px;margin:0;padding:.5rem .7rem;border:1px solid var(--hilo);border-radius:12px;background:var(--hoja);color:var(--tinta);font:600 .9rem/1.3 var(--f);text-align:left;cursor:pointer;touch-action:manipulation;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.demo--automatizaciones .au-tarea[aria-pressed="true"]{background:var(--pasta-velo);border-color:var(--pasta)}
.demo--automatizaciones .au-caja{position:relative;flex:none;width:1.05rem;height:1.05rem;border:1.5px solid var(--pasta);border-radius:4px;background:var(--hoja)}
.demo--automatizaciones .au-tarea[aria-pressed="true"] .au-caja::after{content:"";position:absolute;left:.26rem;top:0;width:.28rem;height:.55rem;border-right:2px solid var(--pasta);border-bottom:2px solid var(--pasta);transform:rotate(45deg)}
.demo--automatizaciones .au-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.demo--automatizaciones .au-tira{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.9rem}
.demo--automatizaciones .au-paso{display:flex;align-items:flex-end;justify-content:center;min-height:2.3rem;padding:.2rem .2rem .35rem;border-bottom:2.5px solid var(--hilo);font-size:.78rem;font-weight:600;line-height:1.25;text-align:center;color:var(--tinta-3);overflow-wrap:anywhere;transition:border-color .3s var(--ease),color .3s var(--ease)}
.demo--automatizaciones .au-paso[aria-current="step"]{border-bottom-color:var(--pasta);color:var(--pasta);font-weight:700}
.demo--automatizaciones .au-zona{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;height:7.2rem;margin-top:.6rem}
.demo--automatizaciones .au-zona .burbuja{margin-top:0;padding:.45rem .7rem;line-height:1.35;animation:automatizaciones-entra .3s var(--ease) both}
.demo--automatizaciones .au-zona .burbuja--in.au-nada{background:var(--hilo);color:var(--tinta-2)}
.demo--automatizaciones .au-zona:empty{justify-content:center;align-items:center}
.demo--automatizaciones .au-zona:empty::before{content:"toca una tarea y mira cómo se hace sola";max-width:16rem;text-wrap:balance;font-family:var(--mano);font-weight:600;font-size:1.3rem;line-height:1.15;text-align:center;color:var(--pasta)}
@keyframes automatizaciones-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.demo--automatizaciones .au-planilla{width:100%;margin-top:.7rem;border-collapse:collapse;table-layout:fixed;font-size:.84rem;line-height:1.3}
.demo--automatizaciones .au-planilla col:first-child{width:50%}
.demo--automatizaciones .au-planilla.t-responder col:first-child{width:55%}
.demo--automatizaciones .au-planilla.t-confirmar col:first-child,.demo--automatizaciones .au-planilla.t-seguir col:first-child{width:30%}
.demo--automatizaciones .au-planilla th,.demo--automatizaciones .au-planilla td{border:1px solid var(--hilo);padding:.2rem .45rem;text-align:left;vertical-align:middle;overflow-wrap:anywhere;text-wrap:pretty}
.demo--automatizaciones .au-planilla thead th{height:1.7rem;padding-block:.15rem}
.demo--automatizaciones .au-planilla tbody td{height:2.75rem}
.demo--automatizaciones .au-ok{color:var(--verde);font-weight:800}
.demo--automatizaciones .au-avisa{color:var(--rojo);font-weight:700}
.demo--automatizaciones .au-pasta{color:var(--pasta);font-weight:700}
.demo--automatizaciones .au-planilla tr.nueva td{animation:automatizaciones-resalta 1.2s var(--ease)}
@keyframes automatizaciones-resalta{from{background-color:var(--resaltador)}to{background-color:transparent}}
.demo--automatizaciones .demo-cap{margin-top:.4rem}
@container (min-width:400px){
  .demo--automatizaciones .au-zona{height:5.6rem}
}
@media (prefers-reduced-motion:reduce){.demo--automatizaciones *,.demo--automatizaciones *::before,.demo--automatizaciones *::after{animation:none!important;transition:none!important}}
/* ─── demo: web ─── */
.demo--web{container-type:inline-size}
.demo--web label.k,.demo--web legend.k{display:block;margin:0;padding:0}
.demo--web .web-cuerpo{display:grid;justify-items:center;gap:1.1rem;margin-top:1rem}
.demo--web .web-ed{display:grid;align-content:start;gap:.85rem;width:100%;max-width:20rem;min-width:0}
.demo--web .web-campo{display:grid;gap:.4rem;min-width:0}
.demo--web .web-nombre{display:block;width:100%;min-width:0;height:44px;margin:0;padding:0 .8rem;border:1px solid var(--tinta-3);border-radius:10px;background:var(--papel);color:var(--tinta);font-family:var(--f);font-size:16px;font-weight:600;touch-action:manipulation}
.demo--web .web-color{display:grid;gap:.45rem;margin:0;padding:0;border:0;min-width:0}
.demo--web .w-sws{display:grid;grid-template-columns:repeat(5,44px);gap:.5rem;justify-content:start;padding:2px}
.demo--web .w-sw{width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.demo--web .w-sw--azul{background:#2C50D6}
.demo--web .w-sw--verde{background:#187A40}
.demo--web .w-sw--burdeo{background:#8C2F4B}
.demo--web .w-sw--terracota{background:#B8532A}
.demo--web .w-sw--grafito{background:#1C2230}
.demo--web .w-sw[aria-pressed="true"]{outline:2px solid var(--tinta);outline-offset:2px}
.demo--web .w-sw:focus-visible{outline:2.5px solid var(--pasta);outline-offset:4px}
.demo--web .web-nota{display:flex;flex-direction:column;align-items:center;gap:.1rem;justify-self:center;margin:0;font-family:var(--mano);font-weight:600;font-size:1.25rem;line-height:1.1;color:var(--pasta)}
.demo--web .web-flecha{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo--web .web-flecha--der{display:none;width:36px;height:20px}
.demo--web .web-flecha--abajo{display:block;width:20px;height:30px}

/* el teléfono: el color vive en --c y el JS solo cambia esa variable */
.demo--web .web-tel{position:relative;flex:none;width:240px;height:480px;max-width:100%;overflow:hidden;--c:#2C50D6}
.demo--web .web-pant{position:relative;height:100%}
.demo--web .web-pag,.demo--web .web-chat{position:absolute;inset:0;display:flex;flex-direction:column;gap:.45rem;padding:.55rem .5rem .6rem;border-radius:15px;background:var(--hoja);font-size:.78rem;line-height:1.35}
.demo--web[data-vista="pagina"] .web-chat{display:none}
.demo--web[data-vista="chat"] .web-pag{display:none}
.demo--web .web-nom,.demo--web .web-chat-nom{margin:0;font-weight:800;font-size:.9rem;line-height:1.2;letter-spacing:-.02em;color:var(--c);overflow-wrap:anywhere;transition:color .25s var(--ease)}
.demo--web .web-nom{flex:none;min-height:2.4em}
.demo--web .web-busca{flex:none;display:block;width:100%;min-width:0;height:40px;margin:0;padding:0 .6rem;border:1px solid var(--tinta-3);border-radius:10px;background:var(--papel);color:var(--tinta);font-family:var(--f);font-size:16px;touch-action:manipulation}
.demo--web .web-fam{flex:none;display:flex;flex-wrap:wrap;gap:.3rem}
.demo--web .web-chip{flex:1 1 auto;min-height:44px;margin:0;padding:0 .3rem;border:1px solid var(--hilo);border-radius:999px;background:var(--papel);color:var(--tinta-2);font-family:var(--f);font-size:.68rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:background-color .25s var(--ease),color .25s var(--ease)}
.demo--web .web-chip[aria-pressed="true"]{border-color:var(--c);background:var(--c);color:#fff}
.demo--web .web-lista{flex:1;min-height:0;display:grid;align-content:start;gap:.4rem;margin:0;padding:0;list-style:none;overflow-y:auto}
.demo--web .web-prod{display:grid;gap:.15rem;padding:.5rem;border:1px solid var(--hilo);border-radius:10px;background:var(--papel)}
.demo--web .web-pcod{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--c)}
.demo--web .web-pnom{margin:0;font-weight:700;font-size:.76rem;line-height:1.25;color:var(--tinta)}
.demo--web .web-pnom small{display:block;font-weight:500;font-size:.68rem;color:var(--tinta-3)}
.demo--web .web-agrega{min-height:44px;margin:.2rem 0 0;padding:0 .5rem;border:1px solid var(--c);border-radius:999px;background:none;color:var(--c);font-family:var(--f);font-size:.72rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:background-color .25s var(--ease),color .25s var(--ease)}
.demo--web .web-agrega[aria-pressed="true"]{background:var(--c);color:#fff}
.demo--web .web-vacio{padding:.6rem .2rem;color:var(--tinta-3);font-size:.74rem}
.demo--web .web-reservar{flex:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0;padding:.4rem .5rem;border:0;border-radius:999px;background:var(--c);color:#fff;font-family:var(--f);font-size:.76rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer;touch-action:manipulation;transition:background-color .25s var(--ease),opacity .25s var(--ease)}
.demo--web .web-reservar:disabled{opacity:.4;cursor:default}

/* la pantalla del correo que le llega */
.demo--web .web-chat{animation:web-entra .25s var(--ease)}
.demo--web .web-chat-top{display:grid;gap:0}
.demo--web .web-volver{justify-self:start;min-height:44px;margin:0;padding:0 .4rem 0 0;border:0;background:none;color:var(--tinta-2);font-family:var(--f);font-size:.74rem;font-weight:600;text-align:left;cursor:pointer;touch-action:manipulation}
.demo--web .web-hilo{flex:1;min-height:0;display:flex;flex-direction:column;gap:.45rem;overflow-y:auto}
.demo--web .web-correo{display:grid;gap:.3rem;padding:.6rem;border:1px solid var(--hilo);border-radius:12px;background:var(--papel);animation:web-sube .3s var(--ease) both}
.demo--web .web-asunto{margin:0;font-weight:800;font-size:.8rem;color:var(--tinta)}
.demo--web .web-de{margin:0;font-size:.68rem;color:var(--tinta-3)}
.demo--web .web-correo ul{display:grid;gap:.3rem;margin:.2rem 0 0;padding:0;list-style:none;font-size:.72rem;line-height:1.3;color:var(--tinta-2)}
.demo--web .web-correo b{color:var(--tinta)}
.demo--web .web-llega{margin:0 .15rem 0 auto;font-size:.7rem;line-height:1.2;color:var(--tinta-3);animation:web-aparece .3s var(--ease) .25s both}
@keyframes web-entra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes web-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes web-aparece{from{opacity:0}to{opacity:1}}

@container (min-width:400px){
  .demo--web .web-cuerpo{grid-template-columns:minmax(0,1fr) 240px;align-items:center;justify-items:stretch;gap:1.2rem}
  .demo--web .web-ed{max-width:none}
  .demo--web .w-sws{grid-template-columns:repeat(3,44px)}
  .demo--web .web-nota{flex-direction:row;justify-self:start;gap:.4rem}
  .demo--web .web-flecha--der{display:block}
  .demo--web .web-flecha--abajo{display:none}
  .demo--web .web-tel{justify-self:end}
}
@media (prefers-reduced-motion:reduce){.demo--web *,.demo--web *::before,.demo--web *::after{animation:none!important;transition:none!important}}
/* ─── demo: giftcards ─── */
.demo--giftcards{container-type:inline-size}
.demo--giftcards .demo-k{flex-wrap:wrap;row-gap:.35rem}

/* la tarjeta: el aspecto de .gc de la página, con el QR a la derecha */
.demo--giftcards .gcd-gc{position:relative;margin-top:.9rem;padding:.85rem .95rem;grid-template-rows:auto auto 1fr auto;align-items:stretch;gap:.3rem 1rem}
.demo--giftcards .gcd-gc .gc-marca{font-size:.95rem;line-height:1.15}
.demo--giftcards .gcd-gc .gc-marca small{font-size:.7rem;line-height:1.4;margin-top:.1rem}
.demo--giftcards .gcd-para{min-height:1.4em;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo--giftcards .gcd-gc .gc-monto{align-self:end;font-size:1.6rem}
.demo--giftcards .gcd-gc .gc-cod{align-self:end;font-size:.7rem;line-height:1.4}
.demo--giftcards .gcd-gc .gc-qr{grid-row:1/5;align-self:center;width:104px;height:104px;padding:5px}
.demo--giftcards .gcd-gc .gc-qr path{fill:var(--tinta)}

/* el timbre de goma, sobre la tarjeta cuando el saldo llega a cero */
.demo--giftcards .gcd-timbre{position:absolute;left:50%;top:50%;z-index:2;padding:.2rem .65rem .25rem;border:2.5px solid var(--rojo);border-radius:6px;background:rgba(252,250,246,.88);color:var(--rojo);font-size:1.3rem;font-weight:800;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-50%) rotate(-8deg) scale(1.2);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.demo--giftcards .gcd-timbre.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}

/* una fase a la vez: la demo crece recién cuando se envía la gift card */
.demo--giftcards .gcd-pila{margin-top:1rem}
.demo--giftcards .gcd-f{min-width:0}
.demo--giftcards:not(.is-enviada) .gcd-f2,.demo--giftcards.is-enviada .gcd-f1{display:none}
.demo--giftcards.is-enviada .gcd-f2{animation:gcdEntra .3s var(--ease)}
.demo--giftcards .gcd-f2>.paso-k:first-child{margin-top:0}
.demo--giftcards .btn{min-height:44px;touch-action:manipulation}

/* fase 1: armar */
.demo--giftcards .gcd-montos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.5rem}
.demo--giftcards .gcd-monto-b{min-height:44px;padding:.4rem .25rem;border:1.5px solid var(--hilo);border-radius:10px;background:var(--papel);color:var(--tinta);font:600 .95rem/1 var(--f);font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;transition:border-color .2s,background-color .2s,color .2s}
.demo--giftcards .gcd-monto-b[aria-pressed="true"]{border-color:var(--pasta);background:var(--pasta-velo);color:var(--pasta-osc);font-weight:800}
.demo--giftcards .gcd-campo{display:grid;gap:.35rem;margin-top:.9rem;font-size:.84rem;font-weight:700;color:var(--tinta)}
.demo--giftcards .gcd-campo input{width:100%;min-width:0;height:44px;padding:0 .8rem;border:1.5px solid var(--hilo);border-radius:10px;background:var(--papel);color:var(--tinta);font:500 16px/1.2 var(--f)}
.demo--giftcards .gcd-campo input::placeholder{color:var(--tinta-3)}
.demo--giftcards .gcd-lista{width:100%;justify-content:center;margin-top:.9rem}

/* fase 2: enviada y canjes */
.demo--giftcards .gcd-burbuja{display:flex;flex-direction:column;justify-content:center;min-height:calc(5.8em + 1.1rem);max-width:100%;overflow-wrap:anywhere}
.demo--giftcards .gcd-servicios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.5rem}
.demo--giftcards .gcd-srv{display:grid;align-content:center;justify-items:center;gap:.1rem;min-height:56px;padding:.35rem .3rem;border:1.5px solid var(--tinta);border-radius:10px;background:var(--hoja);color:var(--tinta);font:600 .8rem/1.2 var(--f);text-align:center;cursor:pointer;touch-action:manipulation;transition:border-color .2s,color .2s,background-color .2s}
.demo--giftcards .gcd-srv b{font-size:.9rem;font-weight:800;font-variant-numeric:tabular-nums}
.demo--giftcards .gcd-srv:disabled{border-color:var(--hilo);background:var(--papel);color:var(--tinta-3);cursor:default}
.demo--giftcards .gcd-hist{display:grid;align-content:start;gap:.3em;min-height:6.4em;margin-top:.5rem;font-size:.82rem;line-height:1.45;color:var(--tinta);font-variant-numeric:tabular-nums}
.demo--giftcards .gcd-hist li{min-width:0;overflow-wrap:anywhere;animation:gcdEntra .3s var(--ease)}
.demo--giftcards .gcd-hist li:not(:first-child){color:var(--tinta-2)}
@keyframes gcdEntra{from{opacity:0}to{opacity:1}}
.demo--giftcards .gcd-otra{display:flex;justify-content:center;min-height:44px;margin-top:.5rem;visibility:hidden}
.demo--giftcards.is-usada .gcd-otra{visibility:visible}

/* lo que solo lee el lector de pantalla */
.demo--giftcards .gcd-vivo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@container (min-width:400px){
  .demo--giftcards .gcd-burbuja{min-height:calc(4.35em + 1.1rem)}
  .demo--giftcards .gcd-hist{min-height:4.95em}
  .demo--giftcards .gcd-srv{min-height:48px}
  .demo--giftcards .gcd-otra{margin-top:.25rem}
}
@media (prefers-reduced-motion:reduce){
  .demo--giftcards *,.demo--giftcards *::before,.demo--giftcards *::after{animation:none!important;transition:none!important}
}