/* ================================================================
   LEALTAD CUÍDATE MUCHO — CSS
   Arquitectura: HTML solo estructura · CSS gestiona imágenes de fondo
   JS gestiona enlaces y comportamiento interactivo.

   PARA ACTUALIZAR IMÁGENES:
   - Edita las rutas en las reglas background-image de este archivo.
   - Busca: "img/" para encontrar todas las referencias a assets.

   BREAKPOINTS (design reference widths):
   - Desktop  ≥ 1024px  → ref: 1440px
   - Tablet   541–1023px → ref:  744px
   - Mobile   ≤  540px  → ref:  360px

   SISTEMA DE ESPACIADO: múltiplos de 8px (--lc-sp-*)
   ================================================================ */

/* ----------------------------------------------------------------
   TOKENS DE DISEÑO
   ---------------------------------------------------------------- */
:root {
  /* Colores de marca */
  --lc-blue:        #00248b;
  --lc-green:       #2ed331;
  --lc-green-hover: #27be2e;
  --lc-green-dark:  #005b2b;
  --lc-soft-blue:   #b7e7ff;
  --lc-text:        #00248b;
  --lc-gray-card:   #f1f1f3;

  /* Tipografía */
  --lc-font-sans:   'Nunito', Arial, Helvetica, sans-serif;
  --lc-font-serif:  Georgia, 'Times New Roman', serif;

  /* Espaciado (sistema de 8 px) */
  --lc-sp-1:  8px;
  --lc-sp-2:  16px;
  --lc-sp-3:  24px;
  --lc-sp-4:  32px;
  --lc-sp-6:  48px;

  /* Transiciones */
  --lc-t-fast:   0.15s ease;
  --lc-t-base:   0.25s ease;
  --lc-t-slow:   0.45s ease;
}

/* ----------------------------------------------------------------
   BASE
   ---------------------------------------------------------------- */
body {
  margin: 0;
  background: #ffffff;
}

.lc-root,
.lc-root * {
  box-sizing: border-box;
}

.lc-root {
  width: 100%;
  min-width: 0;
  color: var(--lc-text);
  font-family: var(--lc-font-sans);
}

.lc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   ARTBOARD  (contenedor relativo donde se posicionan los overlays)
   ---------------------------------------------------------------- */
.lc-artboard {
  container-type: inline-size;
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  /* Fade-in suave al cargar la página */
  animation: lc-page-fadein 0.4s ease both;
}

@keyframes lc-page-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----------------------------------------------------------------
   IMAGEN BASE DE PÁGINA
   (El PNG pre-renderizado del diseño completo)
   ---------------------------------------------------------------- */
.lc-page-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* Covers the baked carousel hair that protrudes above the live carousel. */
.lc-artboard::before {
  position: absolute;
  top: calc(100cqw * 2258 / 1440);
  right: 0;
  left: 0;
  z-index: 3;
  height: calc(100cqw * 32 / 1440);
  background: var(--lc-soft-blue);
  pointer-events: none;
  content: "";
}

/* The base PNG still contains the original mascot. This cover hides the
   leftover hand/shadow fragments that sit just below the rebuilt calendar. */
.lc-artboard::after {
  position: absolute;
  top: calc(100cqw * 1822 / 1440);
  right: 0;
  left: 0;
  z-index: 3;
  height: calc(100cqw * 64 / 1440);
  background: var(--lc-soft-blue);
  pointer-events: none;
  content: "";
}

/* ----------------------------------------------------------------
   SCROLL REVEAL
   Agrega clase .lc-reveal via JS a secciones que deben aparecer
   al hacer scroll. JS añade .is-visible cuando entran al viewport.
   ---------------------------------------------------------------- */
.lc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lc-t-slow), transform var(--lc-t-slow);
}

.lc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------
   SECCIÓN CALENDARIO
   ---------------------------------------------------------------- */
.lc-calendar {
  position: absolute;
  z-index: 2;
  top: calc(100cqw * 690 / 1440);
  left: 0;
  width: 100%;
  height: calc(100cqw * 1132 / 1440);
  overflow: hidden;
  background: #ffffff;
  scroll-margin-top: var(--lc-sp-2);
}

.lc-calendar:focus {
  outline: none;
}

.lc-calendar__inner {
  position: absolute;
  inset: 0;
}

.lc-calendar__title,
.lc-calendar__subtitle {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
  text-align: center;
}

.lc-calendar__title {
  top: calc(100cqw * 54 / 1440);
  color: var(--lc-blue);
  font-size: calc(100cqw * 54 / 1440);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.lc-calendar__subtitle {
  top: calc(100cqw * 142 / 1440);
  color: var(--lc-blue);
  font-family: var(--lc-font-serif);
  font-size: calc(100cqw * 24 / 1440);
  line-height: 1.2;
}

/* ----------------------------------------------------------------
   TABS DE DÍAS (desktop / tablet)
   ---------------------------------------------------------------- */
.lc-days {
  position: absolute;
  top: calc(100cqw * 272 / 1440);
  left: calc(100cqw * 120 / 1440);
  z-index: 4;
  display: flex;
  width: calc(100cqw * 1200 / 1440);
  gap: calc(100cqw * 8 / 1440);
}

.lc-day {
  flex: 1 1 0;
  height: calc(100cqw * 54 / 1440);
  padding: 0;
  border: calc(100cqw * 2 / 1440) solid #111111;
  border-radius: calc(100cqw * 30 / 1440);
  background: #f7f7f8;
  color: #111111;
  cursor: pointer;
  font-family: var(--lc-font-serif);
  font-size: calc(100cqw * 24 / 1440);
  line-height: 1;
  letter-spacing: 0;
  /* Transición en hover */
  transition: background var(--lc-t-fast), color var(--lc-t-fast), border-color var(--lc-t-fast), transform var(--lc-t-fast);
}

.lc-day:hover:not([aria-pressed="true"]) {
  background: #e8e8ea;
  transform: translateY(-1px);
}

.lc-day[aria-pressed="true"] {
  border-color: var(--lc-green);
  background: var(--lc-green);
  color: #ffffff;
}

.lc-day__short {
  display: none;
}

/* ----------------------------------------------------------------
   NAV MÓVIL (selector de día con flechas)
   ---------------------------------------------------------------- */
.lc-mobile-nav {
  display: none;
}

/* ----------------------------------------------------------------
   BANNER DIARIO
   ---------------------------------------------------------------- */
.lc-daily-banner {
  position: absolute;
  top: calc(100cqw * 350 / 1440);
  left: calc(100cqw * 120 / 1440);
  z-index: 3;
  display: flex;
  width: calc(100cqw * 1200 / 1440);
  min-height: calc(100cqw * 137 / 1440);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(100cqw * 16 / 1440);
  border-radius: calc(100cqw * 20 / 1440);
  background: var(--lc-soft-blue);
  text-align: center;
}

.lc-daily-banner strong {
  display: block;
  color: var(--lc-green);
  font-size: calc(100cqw * 34 / 1440);
  line-height: 1.05;
}

.lc-daily-banner span {
  display: block;
  color: var(--lc-blue);
  font-size: calc(100cqw * 34 / 1440);
  font-weight: 800;
  line-height: 1.05;
}

.lc-daily-banner b {
  font-size: 1.15em;
}

/* ----------------------------------------------------------------
   GRID DE PROMOCIONES
   ---------------------------------------------------------------- */
.lc-promo-grid {
  position: absolute;
  top: calc(100cqw * 496 / 1440);
  left: calc(100cqw * 120 / 1440);
  z-index: 3;
  display: grid;
  width: calc(100cqw * 1200 / 1440);
  grid-template-columns: 1fr;
}

.lc-promo-grid--week {
  display: flex;
  align-items: flex-start;
  gap: calc(100cqw * 8 / 1440);
}

.lc-promo-col {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: calc(100cqw * 10 / 1440);
}

/* Tarjeta de promoción */
.lc-promo-card {
  display: flex;
  min-height: calc(100cqw * 100 / 1440);
  flex-direction: column;
  justify-content: center;
  padding: calc(100cqw * 14 / 1440) calc(100cqw * 16 / 1440);
  border-radius: calc(100cqw * 16 / 1440);
  color: var(--lc-blue);
  text-decoration: none;
  transition: opacity var(--lc-t-base), filter var(--lc-t-base),
              transform var(--lc-t-base), box-shadow var(--lc-t-base);
}

.lc-promo-card:not(.lc-promo-card--dim):not([aria-disabled="true"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 36, 139, 0.14);
}

.lc-promo-card[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.lc-promo-card--dim {
  filter: grayscale(0.85);
  opacity: 0.45;
}

.lc-promo-card--dim:not([aria-disabled="true"]):hover,
.lc-promo-card--dim:not([aria-disabled="true"]):focus-visible {
  opacity: 0.75;
}

.lc-promo-placeholder {
  display: none;
}

/* Variantes de color de tarjeta */
.lc-promo-card--gray  { background: var(--lc-gray-card); }
.lc-promo-card--green { background: #b9f0c8; }
.lc-promo-card--blue  { background: #bccdf8; }
.lc-promo-card--sky   { background: #b7e7ff; }

.lc-promo-card__eyebrow {
  color: #101010;
  font-family: var(--lc-font-serif);
  font-size: calc(100cqw * 13 / 1440);
  line-height: 1.1;
}

.lc-promo-card strong {
  display: block;
  margin-top: calc(100cqw * 4 / 1440);
  font-size: calc(100cqw * 20 / 1440);
  font-weight: 500;
  line-height: 1;
}

.lc-promo-card span:last-child {
  margin-top: calc(100cqw * 4 / 1440);
  color: #101010;
  font-family: var(--lc-font-serif);
  font-size: calc(100cqw * 13 / 1440);
  line-height: 1.15;
}

/* ----------------------------------------------------------------
   BURBUJA DE DIÁLOGO + MASCOTA (Quetzy)
   ---------------------------------------------------------------- */
.lc-speech {
  position: absolute;
  top: calc(100cqw * 828 / 1440);
  left: calc(100cqw * 465 / 1440);
  z-index: 4;
  display: flex;
  width: calc(100cqw * 510 / 1440);
  min-height: calc(100cqw * 98 / 1440);
  align-items: center;
  padding: calc(100cqw * 18 / 1440) calc(100cqw * 24 / 1440);
  border: calc(100cqw * 2 / 1440) solid var(--lc-blue);
  border-radius: calc(100cqw * 20 / 1440);
  background: #ffffff;
  color: var(--lc-blue);
  font-family: var(--lc-font-serif);
  font-size: calc(100cqw * 23 / 1440);
  line-height: 1.12;
}

/* Colita: cuadrado rotado 45° a caballo del borde inferior de la
   burbuja (mismo grosor/color de borde) — se ve continua sin importar
   pequeños ajustes de posición, a diferencia de un "gancho" de esquina. */
.lc-speech::after {
  position: absolute;
  top: auto;
  left: auto;
  right: calc(100cqw * 50 / 1440);
  bottom: calc(100cqw * -15 / 1440);
  width: calc(100cqw * 30 / 1440);
  height: calc(100cqw * 30 / 1440);
  border-right: calc(100cqw * 2 / 1440) solid var(--lc-blue);
  border-bottom: calc(100cqw * 2 / 1440) solid var(--lc-blue);
  border-bottom-right-radius: calc(100cqw * 6 / 1440);
  background: #ffffff;
  transform: rotate(45deg);
  content: "";
}

.lc-mascot {
  position: absolute;
  right: calc(100cqw * 70 / 1440);
  bottom: calc(100cqw * -17 / 1440);
  z-index: 3;
  display: block;
  width: calc(100cqw * 514 / 1440);
}

.lc-calendar__strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: calc(100cqw * 52 / 1440);
  background: var(--lc-soft-blue);
}

/* ----------------------------------------------------------------
   CARRUSEL — DESKTOP
   Posición: edita los valores numéricos bajo "CARRUSEL DESKTOP"
   para ajustar la superposición sobre la imagen base.
   ---------------------------------------------------------------- */
/* === CARRUSEL DESKTOP: top=2287, left=112, width=1216, height=516 (ref 1440)
   Un poco más grande que la foto bakeada de referencia (margen de
   seguridad) para que "cover" no deje ver el fondo detrás. === */
.lc-carousel {
  --lc-carousel-bg-split: calc(100cqw * 258 / 1440);
  position: absolute;
  top: calc(100cqw * 2287 / 1440);
  left: calc(100cqw * 112 / 1440);
  z-index: 4;
  width: calc(100cqw * 1216 / 1440);
  height: calc(100cqw * 516 / 1440);
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      var(--lc-soft-blue) 0 var(--lc-carousel-bg-split),
      #ffffff var(--lc-carousel-bg-split) 100%
    );
}

.lc-carousel[hidden] {
  display: none;
}

/* Con un único slide no hay nada que navegar: se ocultan flechas y
   dots (la lógica de swipe/autoplay/dots sigue intacta para cuando
   se agreguen más slides). */
.lc-carousel--single .lc-carousel__arrow,
.lc-carousel--single .lc-carousel__dots {
  display: none;
}

/* Slide: fade-in/out al cambiar */
.lc-carousel__slide,
.lc-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.lc-carousel__slide img {
  object-fit: cover;
  transition: opacity 0.22s ease;
}

/* Clase temporal añadida por JS durante la transición */
.lc-carousel__slide--fading img {
  opacity: 0;
}

/* Flechas: botones transparentes sobre las flechas bakeadas en el PNG */
.lc-carousel__arrow {
  position: absolute;
  top: calc(100cqw * 246 / 1440);
  width: calc(100cqw * 72 / 1440);
  height: calc(100cqw * 72 / 1440);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: opacity var(--lc-t-fast);
}

.lc-carousel__arrow:hover {
  opacity: 0.75;
}

.lc-carousel__arrow--prev { left:  calc(100cqw * 30 / 1440); }
.lc-carousel__arrow--next { right: calc(100cqw * 30 / 1440); }

/* Indicadores de posición (dots) */
.lc-carousel__dots {
  position: absolute;
  right: 0;
  bottom: calc(100cqw * -48 / 1440);
  left: 0;
  display: flex;
  justify-content: center;
  gap: calc(100cqw * 14 / 1440);
}

.lc-carousel__dots button {
  width: calc(100cqw * 14 / 1440);
  height: calc(100cqw * 14 / 1440);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d9dc;
  cursor: pointer;
  transition: background var(--lc-t-fast), transform var(--lc-t-fast);
}

.lc-carousel__dots button:hover {
  background: #a0a0a4;
  transform: scale(1.2);
}

.lc-carousel__dots button[aria-current="true"] {
  background: var(--lc-green);
  transform: scale(1.15);
}

/* ----------------------------------------------------------------
   ACCIONES Y HOTSPOTS
   ---------------------------------------------------------------- */
.lc-actions,
.lc-hotspots {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.lc-action,
.lc-hotspot {
  position: absolute;
  display: flex;
  pointer-events: auto;
  text-decoration: none;
}

.lc-hotspot[data-hotspot="benefitPieces"] {
  top: calc(100cqw * 1950 / 1440);
  left: calc(100cqw * 140 / 1440);
  width: calc(100cqw * 360 / 1440);
  height: calc(100cqw * 210 / 1440);
}

.lc-hotspot[data-hotspot="benefitDiscounts"] {
  top: calc(100cqw * 1950 / 1440);
  left: calc(100cqw * 500 / 1440);
  width: calc(100cqw * 390 / 1440);
  height: calc(100cqw * 210 / 1440);
}

.lc-hotspot[data-hotspot="benefitMoney"] {
  top: calc(100cqw * 1950 / 1440);
  left: calc(100cqw * 900 / 1440);
  width: calc(100cqw * 390 / 1440);
  height: calc(100cqw * 210 / 1440);
}

/* Focus visible universal */
.lc-action:focus-visible,
.lc-hotspot:focus-visible,
.lc-day:focus-visible,
.lc-mobile-nav button:focus-visible,
.lc-carousel button:focus-visible,
.lc-carousel__slide:focus-visible,
.lc-promo-card:focus-visible {
  outline: calc(100cqw * 4 / 1440) solid rgba(46, 211, 49, 0.9);
  outline-offset: calc(100cqw * 3 / 1440);
  border-radius: calc(100cqw * 6 / 1440);
}

/* Botón primario (verde con chevron) */
.lc-action--primary {
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 16 / 1440);
  min-width: calc(100cqw * 348 / 1440);
  height: calc(100cqw * 67 / 1440);
  padding: 0 calc(100cqw * 24 / 1440);
  border-radius: calc(100cqw * 40 / 1440);
  background: var(--lc-green);
  color: #ffffff;
  font-size: calc(100cqw * 30 / 1440);
  font-weight: 700;
  line-height: 1;
  transition: background var(--lc-t-fast), transform var(--lc-t-fast), box-shadow var(--lc-t-fast);
}

.lc-action--primary:hover {
  background: var(--lc-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 211, 49, 0.38);
}

.lc-action--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.lc-action--primary::after {
  display: grid;
  width: calc(100cqw * 36 / 1440);
  height: calc(100cqw * 36 / 1440);
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--lc-green-dark);
  color: #ffffff;
  content: "›";
  font-size: calc(100cqw * 28 / 1440);
  font-weight: 800;
  line-height: 1;
  transition: background var(--lc-t-fast);
}

.lc-action--primary:hover::after {
  background: #004020;
}

/* Variante compacta */
.lc-action--compact {
  min-width: calc(100cqw * 196 / 1440);
  height: calc(100cqw * 44 / 1440);
  font-size: calc(100cqw * 18 / 1440);
}

.lc-action--compact::after {
  width: calc(100cqw * 24 / 1440);
  height: calc(100cqw * 24 / 1440);
  background: #ffffff;
  color: var(--lc-green-dark);
  font-size: calc(100cqw * 16 / 1440);
}

/* Botón de contacto (WhatsApp / Teléfono / App)
   El ícono y la etiqueta ya están bakeados en la imagen de fondo:
   este elemento es solo un hotspot invisible con texto transparente
   (accesible) para no duplicar/tapar el ícono real con uno falso. */
.lc-action--contact {
  align-items: center;
  min-height: calc(100cqw * 30 / 1440);
  padding: 0 calc(100cqw * 10 / 1440);
  border-radius: calc(100cqw * 14 / 1440);
  background: rgba(46, 211, 49, 0);
  color: transparent;
  font-family: var(--lc-font-serif);
  font-size: calc(100cqw * 24 / 1440);
  line-height: 1;
  transition: background var(--lc-t-fast);
}

.lc-action--contact:hover {
  background: rgba(0, 36, 139, 0.06);
}

/* ----------------------------------------------------------------
   POSICIONES DE BOTONES DE ACCIÓN — DESKTOP
   Edita los valores para mover cada botón.
   ---------------------------------------------------------------- */
.lc-action[data-action="registerTop"] {
  top:  calc(100cqw * 641 / 1440);
  left: calc(100cqw * 546 / 1440);
}

.lc-action[data-action="registerBanner"] {
  top:  calc(100cqw * 3573 / 1440);
  left: calc(100cqw * 546 / 1440);
}

.lc-action[data-action="footerBranches"] {
  top:  calc(100cqw * 3974 / 1440);
  left: calc(100cqw * 442 / 1440);
}

.lc-action[data-action="footerWhatsapp"] {
  top:  calc(100cqw * 3888 / 1440);
  left: calc(100cqw * 812 / 1440);
}

.lc-action[data-action="footerPhone"] {
  top:  calc(100cqw * 3933 / 1440);
  left: calc(100cqw * 812 / 1440);
}

.lc-action[data-action="footerWebApp"] {
  top:  calc(100cqw * 3975 / 1440);
  left: calc(100cqw * 812 / 1440);
}

/* ================================================================
   TABLET  (541–1023 px)  — ref: 744 px
   Ajusta los valores comentados como "TABLET" para afinar posiciones.
   ================================================================ */
@media (max-width: 1023px) {

  .lc-artboard::before {
    top: calc(100cqw * 1608 / 744);
    height: calc(100cqw * 18 / 744);
  }

  .lc-artboard::after {
    top: calc(100cqw * 1207 / 744);
    height: calc(100cqw * 52 / 744);
  }

  /* Calendario */
  .lc-calendar {
    top:    calc(100cqw * 372 / 744);
    height: calc(100cqw * 835 / 744);
  }

  .lc-calendar__title {
    top:       calc(100cqw * 31 / 744);
    font-size: calc(100cqw * 37 / 744);
    line-height: 1.05;
  }

  .lc-calendar__subtitle {
    top:       calc(100cqw * 88 / 744);
    font-size: calc(100cqw * 15 / 744);
    line-height: 1.25;
  }

  /* Tabs de días */
  .lc-days {
    top:   calc(100cqw * 155 / 744);
    left:  calc(100cqw * 32  / 744);
    width: calc(100cqw * 680 / 744);
    gap:   calc(100cqw * 16  / 744);
  }

  .lc-day {
    flex:          0 0 calc(100cqw * 71 / 744);
    height:        calc(100cqw * 55 / 744);
    border-width:  calc(100cqw * 2  / 744);
    border-radius: calc(100cqw * 30 / 744);
    font-size:     calc(100cqw * 25 / 744);
  }

  .lc-day[aria-pressed="true"] {
    flex-basis: calc(100cqw * 166 / 744);
  }

  .lc-day__short { display: inline; }
  .lc-day__full  { display: none; }

  .lc-day[aria-pressed="true"] .lc-day__short { display: none; }
  .lc-day[aria-pressed="true"] .lc-day__full  { display: inline; }

  /* Banner diario */
  .lc-daily-banner {
    top:        calc(100cqw * 228 / 744);
    left:       calc(100cqw * 32  / 744);
    width:      calc(100cqw * 680 / 744);
    min-height: calc(100cqw * 83  / 744);
    border-radius: calc(100cqw * 18 / 744);
  }

  .lc-daily-banner strong,
  .lc-daily-banner span {
    font-size: calc(100cqw * 23 / 744);
  }

  /* Grid de promos */
  .lc-promo-grid {
    top:   calc(100cqw * 321 / 744);
    left:  calc(100cqw * 32  / 744);
    width: calc(100cqw * 680 / 744);
  }

  .lc-promo-grid--week {
    gap: calc(100cqw * 16 / 744);
  }

  .lc-promo-col {
    gap: calc(100cqw * 8 / 744);
  }

  .lc-promo-card {
    min-height:    calc(100cqw * 60  / 744);
    padding:       calc(100cqw * 8   / 744) calc(100cqw * 10 / 744);
    border-radius: calc(100cqw * 12  / 744);
  }

  .lc-promo-card__eyebrow,
  .lc-promo-card span:last-child {
    font-size: calc(100cqw * 10 / 744);
  }

  .lc-promo-card strong {
    margin-top: calc(100cqw * 2  / 744);
    font-size:  calc(100cqw * 15 / 744);
  }

  .lc-promo-placeholder {
    display: block;
    width: 100%;
    height: calc(100cqw * 36 / 744);
    padding: 0;
    border: 0;
    border-radius: calc(100cqw * 12 / 744);
    background: var(--lc-gray-card);
    cursor: pointer;
    transition: background var(--lc-t-fast);
  }

  .lc-promo-placeholder:hover {
    background: #e2e2e5;
  }

  /* Burbuja de diálogo */
  .lc-speech {
    top:        calc(100cqw * 624 / 744);
    left:       calc(100cqw * 55  / 744);
    width:      calc(100cqw * 374 / 744);
    min-height: calc(100cqw * 82  / 744);
    padding:    calc(100cqw * 14  / 744) calc(100cqw * 20 / 744);
    border-width:  calc(100cqw * 1.5 / 744);
    border-radius: calc(100cqw * 17  / 744);
    font-size:  calc(100cqw * 15 / 744);
    line-height: 1.2;
  }

  .lc-speech::after {
    right:        calc(100cqw * 34  / 744);
    bottom:       calc(100cqw * -11 / 744);
    width:        calc(100cqw * 22  / 744);
    height:       calc(100cqw * 22  / 744);
    border-right-width:        calc(100cqw * 1.5 / 744);
    border-bottom-width:       calc(100cqw * 1.5 / 744);
    border-bottom-right-radius: calc(100cqw * 4 / 744);
  }

  .lc-mascot {
    right:  calc(100cqw * -20 / 744);
    bottom: calc(100cqw * -26 / 744);
    width:  calc(100cqw * 366 / 744);
  }

  .lc-calendar__strip {
    height: calc(100cqw * 60 / 744);
  }

  /* === CARRUSEL TABLET
     Un poco más grande que la foto bakeada (margen de seguridad),
     igual que en desktop. Las imágenes son las mismas que desktop
     (Group 192.*). === */
  .lc-carousel {
    --lc-carousel-bg-split: calc(100cqw * 136 / 744);
    top:    calc(100cqw * 1623 / 744);
    left:   calc(100cqw * 26   / 744);
    width:  calc(100cqw * 692  / 744);
    height: calc(100cqw * 294  / 744);
  }

  .lc-carousel__dots {
    bottom: calc(100cqw * -32 / 744);
    gap:    calc(100cqw * 12  / 744);
  }

  .lc-carousel__dots button {
    width:  calc(100cqw * 12 / 744);
    height: calc(100cqw * 12 / 744);
  }

  /* Focus visible */
  .lc-action:focus-visible,
  .lc-hotspot:focus-visible,
  .lc-day:focus-visible,
  .lc-mobile-nav button:focus-visible,
  .lc-promo-card:focus-visible {
    outline-width:  calc(100cqw * 3 / 744);
    outline-offset: calc(100cqw * 3 / 744);
  }

  .lc-hotspot[data-hotspot="benefitPieces"] {
    top: calc(100cqw * 1300 / 744);
    left: calc(100cqw * 34 / 744);
    width: calc(100cqw * 205 / 744);
    height: calc(100cqw * 245 / 744);
  }

  .lc-hotspot[data-hotspot="benefitDiscounts"] {
    top: calc(100cqw * 1300 / 744);
    left: calc(100cqw * 260 / 744);
    width: calc(100cqw * 225 / 744);
    height: calc(100cqw * 245 / 744);
  }

  .lc-hotspot[data-hotspot="benefitMoney"] {
    top: calc(100cqw * 1300 / 744);
    left: calc(100cqw * 500 / 744);
    width: calc(100cqw * 215 / 744);
    height: calc(100cqw * 245 / 744);
  }

  /* Botón primario tablet */
  .lc-action--primary {
    gap:           calc(100cqw * 10 / 744);
    min-width:     calc(100cqw * 230 / 744);
    height:        calc(100cqw * 51  / 744);
    padding:       0 calc(100cqw * 17 / 744);
    border-radius: calc(100cqw * 30  / 744);
    font-size:     calc(100cqw * 20  / 744);
  }

  .lc-action--primary::after {
    width:     calc(100cqw * 31 / 744);
    height:    calc(100cqw * 31 / 744);
    font-size: calc(100cqw * 22 / 744);
  }

  .lc-action--compact {
    min-width: calc(100cqw * 195 / 744);
    height:    calc(100cqw * 43  / 744);
  }

  .lc-action--compact::after {
    width:     calc(100cqw * 26 / 744);
    height:    calc(100cqw * 26 / 744);
    font-size: calc(100cqw * 16 / 744);
  }

  .lc-action--contact {
    min-height: calc(100cqw * 30 / 744);
    padding:    0 calc(100cqw * 6  / 744);
    font-size:  calc(100cqw * 15  / 744);
  }

  /* Posiciones de acciones — TABLET */
  .lc-action[data-action="registerTop"] {
    top:  calc(100cqw * 310 / 744);
    left: calc(100cqw * 257 / 744);
  }

  .lc-action[data-action="registerBanner"] {
    top:  calc(100cqw * 2539 / 744);
    left: calc(100cqw * 257  / 744);
  }

  .lc-action[data-action="footerBranches"] {
    top:  calc(100cqw * 2777 / 744);
    left: calc(100cqw * 99   / 744);
  }

  .lc-action[data-action="footerWhatsapp"] {
    top:  calc(100cqw * 2716 / 744);
    left: calc(100cqw * 406  / 744);
  }

  .lc-action[data-action="footerPhone"] {
    top:  calc(100cqw * 2716 / 744);
    left: calc(100cqw * 530  / 744);
  }

  .lc-action[data-action="footerWebApp"] {
    top:  calc(100cqw * 2747 / 744);
    left: calc(100cqw * 406  / 744);
  }
}

/* ================================================================
   MÓVIL  (≤ 540 px)  — ref: 360 px
   Ajusta los valores comentados como "MOBILE" para afinar posiciones.
   ================================================================ */
@media (max-width: 540px) {

  .lc-artboard::before {
    content: none;
  }

  .lc-artboard::after {
    content: none;
  }

  /* Calendario */
  .lc-calendar {
    top:    calc(100cqw * 417 / 360);
    height: calc(100cqw * 998 / 360);
  }

  .lc-calendar__title {
    top:       calc(100cqw * 36 / 360);
    width:     calc(100cqw * 328 / 360);
    max-width: calc(100% - 32px);
    margin:    0 auto;
    font-size: clamp(28px, calc(100cqw * 30 / 360), 34px);
    line-height: 1.05;
  }

  .lc-calendar__subtitle {
    top:       calc(100cqw * 116 / 360);
    font-size: calc(100cqw * 15  / 360);
    line-height: 1.25;
  }

  /* Tabs ocultos en móvil, sustituidos por nav con flechas */
  .lc-days { display: none; }

  .lc-mobile-nav {
    position: absolute;
    top:    calc(100cqw * 210 / 360);
    left:   calc(100cqw * 16  / 360);
    z-index: 4;
    display: flex;
    width:  calc(100cqw * 328 / 360);
    height: calc(100cqw * 55  / 360);
    gap:    calc(100cqw * 7   / 360);
  }

  .lc-mobile-nav__arrow,
  .lc-mobile-nav__day {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 0;
    border: calc(100cqw * 2 / 360) solid #111111;
    border-radius: calc(100cqw * 30 / 360);
    background: #f7f7f8;
    cursor: pointer;
    transition: background var(--lc-t-fast);
  }

  .lc-mobile-nav__arrow {
    position: relative;
    width: calc(100cqw * 79 / 360);
  }

  .lc-mobile-nav__arrow:hover { background: #e8e8ea; }

  .lc-mobile-nav__arrow::before {
    position: absolute;
    top: 50%; left: 50%;
    width:  calc(100cqw * 16 / 360);
    height: calc(100cqw * 16 / 360);
    border-bottom: calc(100cqw * 3 / 360) solid #767676;
    border-left:   calc(100cqw * 3 / 360) solid #767676;
    content: "";
    transform: translate(-30%, -50%) rotate(45deg);
  }

  .lc-mobile-nav__arrow--next::before {
    transform: translate(-70%, -50%) rotate(-135deg);
  }

  .lc-mobile-nav__day {
    width:       calc(100cqw * 156 / 360);
    border-color: var(--lc-green);
    background:  var(--lc-green);
    color:       #ffffff;
    font-family: var(--lc-font-serif);
    font-size:   calc(100cqw * 20 / 360);
    line-height: 1;
  }

  /* Banner diario */
  .lc-daily-banner {
    top:        calc(100cqw * 286 / 360);
    left:       calc(100cqw * 16  / 360);
    width:      calc(100cqw * 328 / 360);
    min-height: calc(100cqw * 122 / 360);
    padding:    calc(100cqw * 14  / 360);
    border-radius: calc(100cqw * 18 / 360);
  }

  .lc-daily-banner strong,
  .lc-daily-banner span {
    font-size:   calc(100cqw * 21 / 360);
    line-height: 1.04;
  }

  /* Grid de promos */
  .lc-promo-grid {
    top:   calc(100cqw * 430 / 360);
    left:  calc(100cqw * 16  / 360);
    display: grid;
    width: calc(100cqw * 328 / 360);
    grid-template-columns: 1fr;
    gap:   calc(100cqw * 11  / 360);
  }

  .lc-promo-card {
    min-height:    calc(100cqw * 78  / 360);
    padding:       calc(100cqw * 12  / 360) calc(100cqw * 13 / 360);
    border-radius: calc(100cqw * 18  / 360);
  }

  .lc-promo-card__eyebrow,
  .lc-promo-card span:last-child {
    font-size: calc(100cqw * 12 / 360);
  }

  .lc-promo-card strong {
    font-size: calc(100cqw * 18 / 360);
  }

  /* Burbuja de diálogo: en móvil va arriba de Quetzy (no a un lado),
     con la colita apuntando hacia abajo, centrada sobre su cabeza.
     El día activo puede tener 1 a 4 tarjetas de promoción (alto
     variable) — JS mide la altura real de la grilla y la publica en
     --lc-promo-bottom; con max() la burbuja nunca queda más arriba
     de donde termina la última tarjeta, sin importar el día. */
  .lc-speech {
    top: max(
      calc(100cqw * 585 / 360),
      calc(var(--lc-promo-bottom, 0px) + 100cqw * 24 / 360)
    );
    left:       calc(100cqw * 16  / 360);
    width:      calc(100cqw * 328 / 360);
    min-height: calc(100cqw * 80  / 360);
    padding:    calc(100cqw * 14  / 360) calc(100cqw * 20 / 360);
    border-width:  calc(100cqw * 1.5 / 360);
    border-radius: calc(100cqw * 16  / 360);
    font-size:  calc(100cqw * 15  / 360);
    line-height: 1.22;
  }

  .lc-speech::after {
    top:    auto;
    right:  auto;
    left:   50%;
    bottom: calc(100cqw * -12 / 360);
    width:  calc(100cqw * 22  / 360);
    height: calc(100cqw * 22  / 360);
    border-right-width:         calc(100cqw * 1.5 / 360);
    border-bottom-width:        calc(100cqw * 1.5 / 360);
    border-bottom-right-radius: 0;
    border-radius: 0 0 calc(100cqw * 4 / 360) 0;
    transform: translateX(-50%) rotate(45deg);
  }

  /* Posición por defecto: top=712 equivale al bottom:20 original
     (998 de alto de sección − 20 − 266 de alto natural de Quetzy).
     Si la burbuja creció por un día con muchas promos, Quetzy baja
     con ella para no taparla ni quedar detrás de su colita. */
  .lc-mascot {
    right:  0;
    top: max(
      calc(100cqw * 712 / 360),
      calc(var(--lc-speech-bottom, 0px) + 100cqw * 20 / 360)
    );
    bottom: auto;
    width:  100%;
  }

  .lc-calendar__strip {
    height: calc(100cqw * 93 / 360);
  }

  /* === CARRUSEL MÓVIL
     La imagen (Group 197.png) es cuadrada → height = width.
     Ajusta top si la superposición no coincide con el PNG base.  === */
  .lc-carousel {
    --lc-carousel-bg-split: calc(100cqw * 164 / 360);
    top:    calc(100cqw * 2180 / 360);
    left:   calc(100cqw * 16   / 360);
    width:  calc(100cqw * 327  / 360);
    height: calc(100cqw * 327  / 360);
  }

  /* En móvil no hay flechas bakeadas en la imagen: se ocultan */
  .lc-carousel__arrow { display: none; }

  .lc-carousel__dots {
    bottom: calc(100cqw * -30 / 360);
    gap:    calc(100cqw * 12  / 360);
  }

  .lc-carousel__dots button {
    width:  calc(100cqw * 11 / 360);
    height: calc(100cqw * 11 / 360);
  }

  /* Imagen de slide ajustada a cover en móvil (cuadrado) */
  .lc-carousel__slide img {
    object-fit: cover;
  }

  /* Botón primario móvil */
  .lc-action--primary {
    gap:           calc(100cqw * 9  / 360);
    min-width:     calc(100cqw * 230 / 360);
    height:        calc(100cqw * 51  / 360);
    padding:       0 calc(100cqw * 16 / 360);
    border-radius: calc(100cqw * 30  / 360);
    font-size:     calc(100cqw * 20  / 360);
  }

  .lc-action--primary::after {
    width:     calc(100cqw * 31 / 360);
    height:    calc(100cqw * 31 / 360);
    font-size: calc(100cqw * 22 / 360);
  }

  .lc-action--compact {
    min-width: calc(100cqw * 195 / 360);
    height:    calc(100cqw * 43  / 360);
  }

  .lc-action--contact {
    min-height: calc(100cqw * 34  / 360);
    padding:    0 calc(100cqw * 10 / 360);
    font-size:  calc(100cqw * 10  / 360);
  }

  /* Focus visible */
  .lc-action:focus-visible,
  .lc-hotspot:focus-visible,
  .lc-day:focus-visible,
  .lc-mobile-nav button:focus-visible,
  .lc-promo-card:focus-visible {
    outline-width:  calc(100cqw * 3 / 360);
    outline-offset: calc(100cqw * 3 / 360);
  }

  .lc-hotspot[data-hotspot="benefitPieces"] {
    top: calc(100cqw * 1515 / 360);
    left: calc(100cqw * 40 / 360);
    width: calc(100cqw * 280 / 360);
    height: calc(100cqw * 210 / 360);
  }

  .lc-hotspot[data-hotspot="benefitDiscounts"] {
    top: calc(100cqw * 1732 / 360);
    left: calc(100cqw * 40 / 360);
    width: calc(100cqw * 280 / 360);
    height: calc(100cqw * 245 / 360);
  }

  .lc-hotspot[data-hotspot="benefitMoney"] {
    top: calc(100cqw * 1980 / 360);
    left: calc(100cqw * 40 / 360);
    width: calc(100cqw * 280 / 360);
    height: calc(100cqw * 190 / 360);
  }

  /* Posiciones de acciones — MOBILE */
  .lc-action[data-action="registerTop"] {
    top:  calc(100cqw * 355 / 360);
    left: calc(100cqw * 65  / 360);
  }

  .lc-action[data-action="registerBanner"] {
    top:  calc(100cqw * 3977 / 360);
    left: calc(100cqw * 65   / 360);
  }

  .lc-action[data-action="footerBranches"] {
    top:  calc(100cqw * 4224 / 360);
    left: calc(100cqw * 82   / 360);
  }

  /* WhatsApp y Venta Telefónica van en la misma fila; Web & App debajo. */
  .lc-action[data-action="footerWhatsapp"] {
    top:  calc(100cqw * 4394 / 360);
    left: calc(100cqw * 41   / 360);
  }

  .lc-action[data-action="footerPhone"] {
    top:  calc(100cqw * 4394 / 360);
    left: calc(100cqw * 188  / 360);
  }

  .lc-action[data-action="footerWebApp"] {
    top:  calc(100cqw * 4423 / 360);
    left: calc(100cqw * 41   / 360);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-artboard {
    animation: none;
  }

  .lc-root *,
  .lc-root *::before,
  .lc-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .lc-reveal {
    opacity: 1;
    transform: none;
  }
}