/* Benemeo Studio — celular de la portada que se puede usar (2026-11-02).
   Reemplaza a "Mira tu negocio aquí": precios → día y hora → mensaje de WhatsApp listo. */

.tv__hint { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; max-width: 22rem; font-size: var(--fs-small); font-weight: 600; color: var(--white); text-align: left; line-height: 1.35; }
.tv__tap { flex: none; position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-hi); }
.tv__tap::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent-hi); animation: tv-ping 1.8s ease-out infinite; }
@keyframes tv-ping { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.tv.is-live .tv__tap::after { animation: none; opacity: 0; }

/* Al tocarlo, el celular se endereza para leerlo mejor */
.tv .phone { transition: transform .6s var(--ease); }
.tv.is-live .phone { --ry: -6deg; --rx: 2deg; }

.tv button { font: inherit; cursor: pointer; }
.tv .s-spa__btn { border: 0; animation: tv-glow 2.2s ease-in-out infinite; }
@keyframes tv-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(108,84,180,.45); } 50% { box-shadow: 0 0 0 .5em rgba(108,84,180,0); } }
.tv.is-live .s-spa__btn { animation: none; }
.tv__end a, .tv__cap a { white-space: nowrap; }
.tv__end { max-width: 24rem; color: rgba(255,255,255,.85); line-height: 1.45; }
.tv__end[hidden], .tv__cap[hidden] { display: none; }

/* Pantallas internas (colores del ejemplo Esencia) */
.tv-s { background: #f6fcfb; color: #2d2450; gap: .7em; }
.tv-s__top { display: flex; align-items: center; gap: .5em; padding-bottom: .5em; border-bottom: 1px solid #e3f4f1; font-size: 1.05em; }
.tv__back { width: 2.2em; height: 2.2em; border-radius: 50%; border: 0; background: #e3f4f1; color: #6c54b4; font-size: 1em; line-height: 1; display: grid; place-items: center; }
.tv-s__k { margin: .2em 0 0; font-size: .72em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6c54b4; }
.tv-list { display: flex; flex-direction: column; gap: .5em; }
.tv-svc { display: flex; align-items: center; justify-content: space-between; gap: .6em; text-align: left; padding: .75em .9em; border-radius: .9em; border: 1.5px solid transparent; background: #fff; color: #2d2450; box-shadow: 0 .4em 1em -.7em rgba(0,0,0,.35); font-size: .88em; transition: border-color .25s, background .25s; }
.tv-svc span { font-weight: 600; line-height: 1.2; }
.tv-svc small { display: block; font-weight: 400; color: #5b5478; font-size: .85em; }
.tv-svc b { color: #6c54b4; white-space: nowrap; font-size: .95em; }
.tv-svc[aria-checked="true"] { border-color: #6c54b4; background: #f1edfb; }
.tv-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.tv-day { padding: .7em 0; border-radius: .8em; border: 1.5px solid #d9e9e6; background: #fff; color: #2d2450; font-weight: 600; font-size: .85em; transition: background .25s, color .25s, border-color .25s; }
.tv-day[aria-checked="true"] { background: #6c54b4; border-color: #6c54b4; color: #fff; }
.tv-hours { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.tv-hour { padding: .65em 0; border-radius: .8em; border: 1.5px solid #bfe3dc; background: #e3f4f1; color: #1f6b5e; font-weight: 600; font-size: .82em; text-align: center; transition: background .25s, color .25s, border-color .25s; }
.tv-hour[aria-checked="true"] { background: #6c54b4; border-color: #6c54b4; color: #fff; }
.tv-hour.is-busy { background: transparent; border-color: #ece9f3; color: #b3adc6; text-decoration: line-through; cursor: default; }
.tv-s__note { margin: auto 0 0; font-size: .75em; color: #5b5478; text-align: center; }
.tv-s__note + .tv-btn { margin-top: 0; }
.tv-wa__day { align-self: center; margin-top: 1em; padding: .25em .8em; border-radius: .6em; background: #fff; color: #54656f; font-size: .68em; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tv-btn { margin-top: auto; border: 0; border-radius: 99px; padding: .8em 1em; background: #6c54b4; color: #fff; font-weight: 600; font-size: .9em; }
.tv-btn--wa { background: #25d366; color: #0b3d22; }

/* Pantalla de WhatsApp */
.tv-wa { padding: 0; gap: 0; background: #efe7de; }
.tv-wa__top { display: flex; align-items: center; gap: .55em; padding: 3em 1em .8em; background: #075e54; color: #fff; }
.tv-wa__top img { width: 2.4em; height: 2.4em; border-radius: 50%; background: #fff; }
.tv-wa__top b { display: block; font-size: .85em; line-height: 1.2; }
.tv-wa__top small { font-size: .7em; opacity: .8; }
.tv-wa__msg { align-self: flex-end; max-width: 82%; margin: 1.2em .9em 0; padding: .6em .8em .5em; border-radius: .9em .9em .25em .9em; background: #d9fdd3; color: #111b21; font-size: .88em; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.tv-wa__msg i { display: block; text-align: right; font-style: normal; font-size: .75em; color: #53bdeb; margin-top: .15em; }
.tv-wa.is-in .tv-wa__msg { animation: s-swap .5s var(--ease) .25s both; }
.tv__again { margin: auto auto 1.4em; border: 0; background: rgba(255,255,255,.7); color: #075e54; border-radius: 99px; padding: .55em 1.1em; font-size: .78em; font-weight: 600; }

.tv button:focus-visible { outline: 2px solid #6c54b4; outline-offset: 2px; }

/* Sin el cuadro de abajo, el celular de la portada puede ser un poco más grande */
@media (min-width: 961px) { .hero__stage.tv .phone { --w: min(280px, calc((100svh - 17rem) / 2.05)); } }
@media (max-width: 960px) { .tv__hint { margin-inline: auto; justify-content: center; text-align: center; } }

html.rm .tv .phone { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tv__tap::after, .tv .s-spa__btn, .tv-wa.is-in .tv-wa__msg { animation: none; }
  .tv .phone { transition: none; }
}

/* 2026-11-02: celular más grande, letras más grandes y flechita "Toca aquí" junto a "Ver precios". */

/* Celular y letras más grandes */
@media (min-width: 961px) {
  .hero__stage.tv .phone { --w: min(330px, calc((100svh - 11rem) / 2.05)); font-size: calc(var(--w) / 18); }
}
@media (max-width: 960px) {
  .hero__stage.tv .phone { --w: min(330px, 82vw); }
  .hero__stage.tv #hero-phone { font-size: calc(var(--w) / 17); }
}
.tv__hint { font-size: 1.05rem; max-width: 24rem; }

/* Flechita que se mueve junto a "Ver precios" */
.tv__row { display: flex; align-items: center; gap: .6em; }
.tv__arrow { display: inline-flex; align-items: center; gap: .3em; color: #6c54b4; font-weight: 700; font-size: .85em; white-space: nowrap; animation: tv-nudge 1.1s ease-in-out infinite; }
.tv__arrow b { font-size: 1.4em; line-height: 1; }
@keyframes tv-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-.5em); } }
.tv.is-live .tv__arrow { display: none; }
@media (prefers-reduced-motion: reduce) { .tv__arrow { animation: none; } }
html.rm .tv__arrow { animation: none; }