/* ==========================================================================
   Klix Link v4 — funciones y animaciones dentro de las 12 miniaturas
   Todo usa las variables de color de cada diseño (--sb, --si, --sa, --sm, --sl)
   ========================================================================== */
.scr { --road: rgba(255,255,255,.85); }
.t-bruma, .t-navaja, .t-roble { --road: rgba(255,255,255,.1); }
.scr .pg { position: relative; }
.scr:not(.is-live):not(.in-modal) .pg * { animation-play-state: paused !important; }

/* Títulos de sección dentro de la página */
.s-h { font-family: var(--fb); font-size: .68em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sm); padding: 1.7em 5.5cqw .55em; }
.s-made { text-align: center; font-size: .62em; color: var(--sm); padding: 1em 1em 0; }

/* Contador que cambia solo (3 valores) */
.cyc { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: -.3em; text-align: left; }
.cyc i { display: block; height: 1.3em; font-style: normal; }
.cyc i:first-child { animation: sCyc 6s steps(1) infinite; }
@keyframes sCyc { 0% { margin-top: 0; } 33.33% { margin-top: -1.3em; } 66.66% { margin-top: -2.6em; } 100% { margin-top: 0; } }

/* Selección que va cambiando (horas, días, personas) */
.s-seq > * { background: var(--sl); color: var(--si); animation: sSeq4 8s steps(1) infinite; }
.s-seq > :nth-child(2) { animation-delay: 2s; } .s-seq > :nth-child(3) { animation-delay: 4s; } .s-seq > :nth-child(4) { animation-delay: 6s; } .s-seq > :nth-child(5) { animation-delay: 8s; }
.s-seq5 > * { animation-name: sSeq5; animation-duration: 10s; }
@keyframes sSeq4 { 0% { background: var(--sa); color: var(--sb); } 25% { background: var(--sl); color: var(--si); } 100% { background: var(--sl); color: var(--si); } }
@keyframes sSeq5 { 0% { background: var(--sa); color: var(--sb); } 20% { background: var(--sl); color: var(--si); } 100% { background: var(--sl); color: var(--si); } }

/* Conversación de WhatsApp */
.s-chat { margin: .3em 1em; padding: .8em; border-radius: 1.1em; background: var(--sl); display: grid; gap: .45em; }
.s-chat p { max-width: 86%; padding: .55em .8em; border-radius: 1em; font-size: .8em; line-height: 1.3; }
.s-chat .out { justify-self: end; background: #d9fdd3; color: #10331a; border-bottom-right-radius: .3em; animation: sMsg1 9s infinite; }
.s-chat .in { background: #fff; color: #1b1b1b; border-bottom-left-radius: .3em; }
.s-chat .m2 { animation: sMsg2 9s infinite; }
.s-chat .typing { display: flex; gap: .25em; width: 3.8em; padding: .75em .8em; animation: sTyp 9s infinite; }
.s-chat .typing i { width: .5em; height: .5em; border-radius: 50%; background: #999; animation: sDot 1.1s infinite; }
.s-chat .typing i:nth-child(2) { animation-delay: .18s; } .s-chat .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes sDot { 50% { transform: translateY(-.3em); opacity: .5; } }
@keyframes sMsg1 { 0% { opacity: 0; transform: translateY(.6em) scale(.96); } 6%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sMsg2 { 0%, 24% { opacity: 0; transform: translateY(.6em) scale(.96); } 30%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sTyp { 0%, 8% { opacity: 0; } 10%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }

/* Mapa */
.s-map { position: relative; margin: .5em 1em; height: 9.6em; border-radius: 1.1em; overflow: hidden; background: color-mix(in srgb, var(--sa) 13%, var(--sb)); box-shadow: inset 0 0 0 1px var(--sl); }
.s-map__bg { position: absolute; inset: -10%; background:
  linear-gradient(90deg, transparent 0 26%, var(--road) 26% 31%, transparent 31% 68%, var(--road) 68% 72%, transparent 72%),
  linear-gradient(0deg, transparent 0 38%, var(--road) 38% 44%, transparent 44% 76%, var(--road) 76% 80%, transparent 80%),
  linear-gradient(28deg, transparent 0 56%, var(--road) 56% 59%, transparent 59%),
  radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--sa) 24%, transparent) 0 13%, transparent 14%);
  animation: sPan 14s ease-in-out infinite alternate; }
@keyframes sPan { to { transform: translate(-3%, 2%) scale(1.05); } }
.s-pin { position: absolute; left: 50%; top: 40%; width: 1.7em; height: 1.7em; margin: -1.7em 0 0 -.85em; border-radius: 50% 50% 50% 0; background: var(--sa); transform: rotate(-45deg); animation: sDrop 3.6s ease-in infinite; box-shadow: 0 .4em .8em rgba(0,0,0,.25); }
.s-pin::after { content: ""; position: absolute; inset: .52em; border-radius: 50%; background: var(--sb); }
@keyframes sDrop { 0% { transform: translateY(-3em) rotate(-45deg); opacity: 0; } 15% { opacity: 1; } 28% { transform: translateY(0) rotate(-45deg); } 36% { transform: translateY(-.5em) rotate(-45deg); } 44%, 100% { transform: translateY(0) rotate(-45deg); opacity: 1; } }
.s-map__cap { position: absolute; left: .6em; right: .6em; bottom: .6em; padding: .55em .8em; border-radius: .8em; background: var(--sb); color: var(--si); display: grid; gap: .08em; box-shadow: 0 .3em .8em rgba(0,0,0,.18); }
.s-map__cap b { font-size: .84em; }
.s-map__cap small { font-size: .68em; color: var(--sm); }
.s-map__cap span { font-size: .7em; font-weight: 800; color: var(--sa); }
.t-navaja .s-map__cap span, .t-bruma .s-map__cap span { color: var(--si); }

/* Horario */
.s-hours { list-style: none; margin: .2em 1em; padding: .35em 1em; border-radius: 1em; background: var(--sl); }
.s-hours li { display: flex; justify-content: space-between; gap: .6em; padding: .5em 0; font-size: .8em; border-bottom: 1px solid color-mix(in srgb, var(--si) 10%, transparent); }
.s-hours li:last-child { border-bottom: 0; }
.s-hours b { font-weight: 700; font-variant-numeric: tabular-nums; }
.s-hours .today { font-weight: 800; }
.s-hours .today span { display: inline-flex; align-items: center; gap: .5em; }
.s-hours .today span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #27b35a; animation: sBlink 2s infinite; }

/* Preguntas */
.s-faq { margin: .2em 1em; display: grid; gap: .4em; }
.s-faq .q { padding: .7em .95em; border-radius: .9em; background: var(--sl); }
.s-faq .q > p { display: flex; justify-content: space-between; align-items: center; gap: .6em; font-size: .82em; line-height: 1.25; }
.s-faq i { width: .9em; height: .9em; flex: none; position: relative; }
.s-faq i::before, .s-faq i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--sa); border-radius: 2px; }
.s-faq i::after { transform: rotate(90deg); }
.s-faq .open i::after { transform: none; opacity: 0; }
.s-faq .q > div span { display: none; padding-top: .45em; font-size: .74em; line-height: 1.35; color: var(--sm); }
.s-faq .open > div span { display: block; }
.s-faq .q:nth-child(2) { animation: sGlowQ 6s ease-in-out infinite; }
@keyframes sGlowQ { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px var(--sa); } }

/* Compartir */
.s-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: 1.3em 1em .3em; }
.s-share span { text-align: center; padding: .8em .2em; border-radius: 99px; font-size: .68em; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--sl); line-height: 1.15; }
.s-share span:nth-child(2) { background: var(--sa); color: var(--sb); box-shadow: none; animation: sPulse 3s ease-in-out infinite; }

/* Pedido (café y taquería) */
.s-order { margin: .8em 1em; padding: .9em 1em; border-radius: 1.1em; background: #fff; color: #222; box-shadow: 0 .3em 1em rgba(0,0,0,.1); }
.s-order p { display: flex; justify-content: space-between; align-items: center; gap: .6em; font-size: .84em; padding: .25em 0; }
.s-order .s-order__h { font-size: .68em; text-transform: uppercase; letter-spacing: .12em; color: #777; font-weight: 800; }
.s-order .s-order__t { border-top: 1px dashed rgba(0,0,0,.22); margin-top: .35em; padding-top: .5em; font-weight: 800; }
.s-order b { font-variant-numeric: tabular-nums; }
.s-order__btn { display: block; margin-top: .6em; text-align: center; padding: .72em; border-radius: 99px; background: #25a244; color: #fff; font-weight: 800; font-size: .8em; animation: sPulse 3s ease-in-out infinite; }
.s-step { display: inline-flex; align-items: center; gap: .5em; font-style: normal; font-weight: 800; }
.s-step u { text-decoration: none; width: 1.55em; height: 1.55em; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.08); font-size: .9em; }
.s-step u:last-child { background: #222; color: #fff; }

/* Reservas y selectores */
.s-book { margin: .3em 1em; padding: .9em; border-radius: 1.1em; background: var(--sl); display: grid; gap: .5em; }
.s-book > p { font-size: .68em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sm); }
.s-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.s-chips span { font-size: .8em; font-weight: 700; padding: .55em .9em; border-radius: 99px; }
.s-book__btn { text-align: center; padding: .75em; margin-top: .3em; border-radius: 99px; background: var(--sa); color: var(--sb); font-weight: 800; font-size: .8em; animation: sPulse 3s ease-in-out infinite; }

/* Pasos */
.s-steps { list-style: none; margin: 0 1em; padding: 0 .5em; display: grid; gap: .1em; }
.s-steps li { display: flex; align-items: center; gap: .8em; font-size: .84em; padding: .5em 0; font-weight: 600; }
.s-steps b { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--sa); color: var(--sb); font-size: .9em; }

/* Destellos */
.s-spark { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.s-spark i { position: absolute; width: 1.2em; height: 1.2em; background: #fff; opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sTwinkle 3s ease-in-out infinite; }
.s-spark i:nth-child(1) { left: 20%; top: 24%; } .s-spark i:nth-child(2) { left: 68%; top: 42%; animation-delay: 1s; } .s-spark i:nth-child(3) { left: 42%; top: 68%; animation-delay: 2s; }
@keyframes sTwinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.t-lua .s-avatar { position: relative; }

/* 01 Café · vapor */
.s-steam { position: absolute; left: 50%; top: 30%; z-index: 2; width: 0; height: 0; }
.s-steam i { position: absolute; bottom: 0; left: -1.4em; width: .8em; height: 3.4em; border-radius: 50%; background: rgba(255,255,255,.8); filter: blur(.4em); opacity: 0; animation: sSteam 3.8s ease-out infinite; }
.s-steam i:nth-child(2) { left: 0; animation-delay: 1.3s; } .s-steam i:nth-child(3) { left: 1.4em; animation-delay: 2.5s; }
@keyframes sSteam { 0% { transform: translateY(1.2em) scaleX(1); opacity: 0; } 25% { opacity: .75; } 100% { transform: translateY(-3em) scaleX(1.9) skewX(8deg); opacity: 0; } }

/* 03 Bruma · vela */
.s-glow { position: absolute; inset: 0; background: radial-gradient(circle at 60% 58%, rgba(255,186,90,.42), transparent 58%); mix-blend-mode: screen; animation: sCandle 3.4s ease-in-out infinite; }
@keyframes sCandle { 0%, 100% { opacity: .45; transform: scale(1); } 40% { opacity: 1; transform: scale(1.08); } 70% { opacity: .65; } }

/* 04 Navaja · antes y después */
.s-compare { position: relative; margin: .3em 1em; height: 11.5em; border-radius: .3em; overflow: hidden; background: #000; }
.s-compare__a, .s-compare__b { position: absolute; inset: 0; display: block; }
.s-compare__a img { filter: grayscale(1) brightness(.6) contrast(.85) blur(.14em); }
.s-compare__b { clip-path: inset(0 0 0 8%); animation: sWipe 5.5s ease-in-out infinite alternate; }
.s-compare__bar { position: absolute; top: 0; bottom: 0; width: .22em; margin-left: -.11em; background: #ede6d6; box-shadow: 0 0 .8em rgba(237,230,214,.7); animation: sBar 5.5s ease-in-out infinite alternate; }
.s-compare__bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em; border-radius: 50%; background: #ede6d6; }
@keyframes sWipe { 0%, 8% { clip-path: inset(0 0 0 92%); } 92%, 100% { clip-path: inset(0 0 0 8%); } }
@keyframes sBar { 0%, 8% { left: 92%; } 92%, 100% { left: 8%; } }
.s-compare figcaption { position: absolute; inset: auto .6em .5em; display: flex; justify-content: space-between; z-index: 2; }
.s-compare small { padding: .25em .6em; border-radius: 99px; background: rgba(0,0,0,.6); color: #ede6d6; font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.t-navaja .s-slots span { border-width: 0; }

/* 05 Sonríe · calendario */
.s-cal .s-seq > span { background: var(--sl); color: var(--sm); }
.s-cal .s-seq > span b { color: inherit; }
.s-cal--flat { margin: .3em 1em 0; padding: .5em; background: transparent; box-shadow: none; }
.s-cal--flat > div { display: flex; justify-content: space-between; gap: .3em; }
.s-cal--flat span { flex: 1; display: grid; justify-items: center; font-size: .66em; padding: .5em 0; border-radius: .7em; }
.s-cal--flat span b { font-size: 1.5em; }
.s-cal .s-seq > span { animation-name: sSeqC; animation-duration: 10s; }
@keyframes sSeqC { 0% { background: var(--sa); color: #fff; } 20% { background: var(--sl); color: var(--sm); } 100% { background: var(--sl); color: var(--sm); } }
.t-jurica .s-cal--flat span, .t-ortega .s-cal--flat span { animation-name: sSeqC; animation-duration: 10s; }

/* 07 Inmueble · galería */
.s-hero--duo img:nth-of-type(2) { position: absolute; inset: 0; animation: sFade 8s ease-in-out infinite; }
@keyframes sFade { 0%, 38% { opacity: 0; } 48%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
.s-dots { position: absolute; left: 50%; bottom: .9em; z-index: 2; display: flex; gap: .4em; transform: translateX(-50%); }
.s-dots i { width: .55em; height: .55em; border-radius: 50%; background: #fff; opacity: .5; }
.s-dots i:first-child { animation: sDotA 8s infinite; } .s-dots i:last-child { animation: sDotB 8s infinite; }
@keyframes sDotA { 0%, 38% { opacity: 1; } 48%, 88% { opacity: .4; } 98%, 100% { opacity: 1; } }
@keyframes sDotB { 0%, 38% { opacity: .4; } 48%, 88% { opacity: 1; } 98%, 100% { opacity: .4; } }
.s-agent { display: flex; align-items: center; gap: .8em; margin: .2em 1em; padding: .8em; border-radius: 1.1em; background: var(--sl); }
.s-agent i { flex: none; width: 3em; height: 3em; border-radius: 50%; background: var(--sa); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .9em; }
.s-agent b { display: block; font-size: .88em; }
.s-agent small { font-size: .7em; color: var(--sm); }
.t-jurica .s-pad .s-h { padding-left: 5.5cqw; }

/* 08 Roble */
.t-roble .s-specs li { background: rgba(255,255,255,.07); color: #a3a6ab; }
.t-roble .s-specs b { color: #ff6b1a; }
.t-roble .s-chat { background: rgba(255,255,255,.07); }
.t-roble .s-faq .q, .t-roble .s-hours, .t-roble .s-book { background: rgba(255,255,255,.07); }

/* 09 Flor · pétalos */
.s-petals { position: absolute; left: 0; right: 0; top: 0; height: 44em; z-index: 3; pointer-events: none; overflow: hidden; }
.s-petals i { position: absolute; top: -1.2em; width: .7em; height: 1.05em; border-radius: 80% 0 80% 0; background: #f4a3b6; opacity: .9; animation: sFall 7.5s linear infinite; }
.s-petals i:nth-child(1) { left: 8%; } .s-petals i:nth-child(2) { left: 30%; animation-delay: -2.5s; background: #f7c6d1; animation-duration: 9s; } .s-petals i:nth-child(3) { left: 52%; animation-delay: -5s; } .s-petals i:nth-child(4) { left: 72%; animation-delay: -1.2s; background: #f7c6d1; animation-duration: 8.5s; } .s-petals i:nth-child(5) { left: 90%; animation-delay: -3.6s; }
@keyframes sFall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1.4em, 21em) rotate(160deg); } 100% { transform: translate(-.4em, 43em) rotate(320deg); } }
.s-card-msg { margin: .3em 1em; padding: .8em .9em; border-radius: 1.1em; background: var(--sl); }
.s-card-msg p { font-size: .68em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sm); margin-bottom: .5em; }
.s-card-msg div { padding: .75em .9em; border-radius: .8em; background: #fff; font-size: .84em; line-height: 1.3; min-height: 3.4em; font-style: italic; }
.s-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; animation: sType 7s steps(30) infinite; }
@keyframes sType { 0% { width: 0; } 55%, 100% { width: 100%; } }
.s-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--sa); animation: sCaret 1s steps(1) infinite; }
@keyframes sCaret { 50% { opacity: 0; } }
.t-flor .s-book { margin-top: .5em; }

/* 10 Alba · respiración y cupo */
.s-breath { position: absolute; right: .9em; bottom: .9em; z-index: 2; width: 3.6em; height: 3.6em; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; animation: sBreath 5s ease-in-out infinite; }
.s-breath::after { content: "Respira"; font-size: .62em; font-weight: 800; color: #2b3326; }
@keyframes sBreath { 0%, 100% { transform: scale(.82); box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { transform: scale(1.1); box-shadow: 0 0 0 .8em rgba(255,255,255,0); } }
.s-cap { margin: .2em 1em; padding: .8em 1em; border-radius: 1.1em; background: #fff; }
.s-cap p { display: flex; justify-content: space-between; align-items: center; font-size: .84em; margin-bottom: .55em; }
.s-cap > div { height: .55em; border-radius: 99px; background: rgba(93,110,79,.18); overflow: hidden; }
.s-cap i { display: block; height: 100%; width: 60%; border-radius: inherit; background: #5d6e4f; animation: sFill 6s ease-in-out infinite alternate; }
@keyframes sFill { to { width: 90%; } }

/* 11 Evento · confeti y RSVP */
.s-confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.s-confetti i { position: absolute; top: -1em; width: .5em; height: .9em; background: #f0c9a8; animation: sConf 6s linear infinite; }
.s-confetti i:nth-child(1) { left: 12%; } .s-confetti i:nth-child(2) { left: 28%; background: #fff; animation-delay: -1.5s; } .s-confetti i:nth-child(3) { left: 46%; background: #d98c6a; animation-delay: -3s; } .s-confetti i:nth-child(4) { left: 62%; animation-delay: -4.2s; background: #fff; } .s-confetti i:nth-child(5) { left: 78%; animation-delay: -.8s; } .s-confetti i:nth-child(6) { left: 92%; animation-delay: -2.4s; background: #d98c6a; }
@keyframes sConf { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(1em, 24em) rotate(420deg); } }
.s-rsvp { margin: .3em 1em; padding: .9em; border-radius: 1.1em; background: #fff; display: grid; gap: .5em; }
.s-rsvp p { font-size: .68em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sm); }
.s-rsvp__f { padding: .7em .9em; border-radius: .8em; box-shadow: inset 0 0 0 1.5px var(--sl); font-size: .84em; }
.s-step--b u { background: var(--sl); } .s-step--b u:last-child { background: var(--sa); color: #fff; }
.s-rsvp__btn { text-align: center; padding: .75em; margin-top: .3em; border-radius: 99px; background: var(--sa); color: #fff; font-weight: 800; font-size: .8em; animation: sPulse 3s ease-in-out infinite; }
.s-links--b li { font-size: .8em; padding: .8em; }
.t-boda .s-links li { background: #fff; }

/* 12 Ortega · guardar contacto */
.s-save span { display: inline-block; position: relative; padding-left: 1.6em; }
.s-save span::before { content: ""; position: absolute; left: 0; top: 50%; width: 1em; height: 1em; margin-top: -.5em; background: currentColor; clip-path: polygon(35% 0, 65% 0, 65% 45%, 100% 45%, 50% 100%, 0 45%, 35% 45%); animation: sDown 1.6s ease-in-out infinite; }
@keyframes sDown { 0%, 100% { transform: translateY(-.15em); } 50% { transform: translateY(.2em); } }
.s-save { animation: sDash 3s ease-in-out infinite; }
@keyframes sDash { 50% { background: rgba(201,162,39,.16); } }

/* Teléfono en la ventana grande: todo se mueve */
.in-modal .pg * { animation-play-state: running; }