/* ============================================================================
   v11 — la portada del canal: «Benalmádena, en tu WhatsApp».
   Capa propia sobre styles.css, cargada solo por / y /en/.
   Dirección: referencia/web-campana/diseno-raiz.md
   ========================================================================== */

.portada--canal { min-height: min(94vh, 900px); --foco: var(--foco-claro); }
.portada--canal .fondo-foto::after {
  background:
    linear-gradient(100deg, rgba(12, 42, 62, .90) 0%, rgba(12, 42, 62, .62) 52%, rgba(12, 42, 62, .30) 100%),
    linear-gradient(0deg, rgba(12, 42, 62, .60), transparent 45%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada--canal .fondo-foto img { animation: kenburns 16s ease-out forwards; }
}
@keyframes kenburns { to { transform: scale(1.06); } }

.portada--canal .etiqueta { color: rgba(255, 255, 255, .85); }
.portada--canal h1 { font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem); }
.portada--canal h1 .palabra { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .portada--canal h1 .palabra { animation: palabra 500ms cubic-bezier(.2, .7, .2, 1) both; }
  .portada--canal h1 .palabra:nth-of-type(2) { animation-delay: 70ms; }
  .portada--canal h1 .palabra:nth-of-type(3) { animation-delay: 140ms; }
  .portada--canal h1 .palabra:nth-of-type(4) { animation-delay: 210ms; }
  .portada--canal .barra-canal { animation: sube-barra 400ms cubic-bezier(.2, .7, .2, 1) 350ms both; }
}
@keyframes palabra { from { opacity: 0; transform: translateY(.4em); } }
@keyframes sube-barra { from { opacity: 0; transform: translateY(16px); } }

/* Nav transparente sobre la foto, sólido al hacer scroll */
.nav--vidrio { background: transparent; border-bottom-color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease; }
.nav--vidrio:not(.is-solida) .nav-links a:not(.btn) { color: var(--blanco); }
.nav--vidrio:not(.is-solida) .logo { color: var(--blanco); }
.nav--vidrio:not(.is-solida) .lang { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.nav--vidrio:not(.is-solida) .lang a { color: rgba(255, 255, 255, .85); }
.nav--vidrio:not(.is-solida) .lang a[aria-current="true"] { background: rgba(255, 255, 255, .92); color: var(--azul-tinta); }
.nav--vidrio.is-solida { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom-color: var(--linea-fria); }

/* -------------------------------------------------- la barra del canal - */

.barra-canal { max-width: 640px; margin-top: var(--e-6); }
.barra-canal .campo-falso {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 64px; padding: var(--e-3) var(--e-4);
  background: var(--blanco); border-radius: var(--radio-xl);
  box-shadow: 0 8px 40px rgba(12, 42, 62, .28);
}
.campo-falso .avatar { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.campo-falso .texto-vivo {
  font: 500 var(--paso-md)/1.3 var(--texto); color: var(--azul-tinta);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
}
.campo-falso .texto-vivo:empty::before { content: attr(data-reposo); color: var(--muted-fuerte); }
.campo-falso .caret { flex: none; width: 2px; height: 1.3em; margin-left: 1px;
  background: var(--mar-vivo); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .campo-falso .caret { display: none; } }

.chips-canal { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.chips-canal .chip-respuesta {
  background: rgba(255, 255, 255, .12); color: var(--blanco);
  border-color: rgba(255, 255, 255, .38); backdrop-filter: blur(8px);
}
@media (hover: hover) { .chips-canal .chip-respuesta:hover { background: rgba(255, 255, 255, .24); color: var(--blanco); } }
.chips-canal .chip-respuesta[aria-expanded="true"] {
  background: var(--ocre); border-color: var(--ocre); color: var(--azul-tinta);
}

/* Sin JS: entrevista completa y legible. Con JS: plegadas y desplegables. */
.respuesta-canal .pregunta { margin: var(--e-4) 0 var(--e-2); color: var(--blanco); }
html.js .respuesta-canal .pregunta { display: none; }
html.js .respuesta-canal { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(.2, .7, .2, 1); }
html.js .respuesta-canal.is-abierta { grid-template-rows: 1fr; }
html.js .respuesta-canal > .tarjeta { overflow: hidden; }
.respuesta-canal .tarjeta-int {
  margin-top: var(--e-3); padding: var(--e-5);
  display: grid; gap: var(--e-4); grid-template-columns: 1fr auto; align-items: center;
  background: var(--blanco); color: var(--azul-tinta);
  border-radius: var(--radio-xl); box-shadow: var(--sombra-suave);
}
html.js .respuesta-canal .tarjeta-int { opacity: 0; transform: translateY(6px);
  transition: opacity 250ms ease 120ms, transform 250ms ease 120ms; }
html.js .respuesta-canal.is-abierta .tarjeta-int { opacity: 1; transform: none; }
.respuesta-canal .tarjeta-int p { margin: 0; max-width: 52ch; }
.respuesta-canal .tarjeta-int p + p { margin-top: var(--e-2); }
.respuesta-canal .mini-foto { width: 96px; height: 96px; border-radius: var(--radio-btn); object-fit: cover; }
.respuesta-canal a { font-weight: 600; color: var(--mar-vivo); }
@media (max-width: 560px) {
  .respuesta-canal .tarjeta-int { grid-template-columns: 1fr; }
  .respuesta-canal .mini-foto { display: none; }
}

.nota-demo { margin-top: var(--e-3); font-size: var(--paso-xs); color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------- cinta del canal - */

.cinta-canal { overflow: hidden; padding-block: var(--e-3);
  background: var(--cielo); border-block: 1px solid var(--linea-fria); }
.cinta-canal .pista { display: flex; gap: 2.5ch; width: max-content; white-space: nowrap;
  font: 700 var(--paso-sm)/1 var(--display); letter-spacing: .12em; color: var(--azul-tinta);
  animation: cinta-canal 40s linear infinite; }
.cinta-canal .pista span { flex: none; }
.cinta-canal .pista span::after { content: " \2726"; color: var(--ocre-texto); }
@keyframes cinta-canal { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta-canal .pista { animation: none; } }

/* ------------------------------------------------------------- escenas - */

.escenas { display: grid; gap: var(--hueco); }
@media (min-width: 880px) {
  .escenas { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .escenas > :nth-child(2) { margin-top: 32px; }
  .escenas > :nth-child(3) { margin-top: -16px; }
}
.escena { position: relative; overflow: hidden; border-radius: var(--radio-xl); aspect-ratio: 4 / 5; }
.escena img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.18) contrast(1.05) brightness(1.03); }
.escena .velo { position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12, 42, 62, .88) 0%, rgba(12, 42, 62, .25) 45%, transparent 65%); }
.escena .texto { position: absolute; inset-inline: 0; bottom: 0; padding: var(--e-5); color: var(--blanco); }
.escena .verbo { display: block; font: 800 var(--paso-lg)/1 var(--display);
  letter-spacing: .04em; text-transform: uppercase; }
.escena .texto p { margin: var(--e-2) 0 0; font-size: var(--paso-sm); color: rgba(255, 255, 255, .88); max-width: 32ch; }
@media (hover: hover) {
  .escena { transition: transform 180ms ease, box-shadow 180ms ease; }
  .escena:hover { transform: scale(1.02); box-shadow: var(--sombra-suave); }
}
@media (max-width: 879px) {
  .escenas { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: var(--e-2); }
  .escena { scroll-snap-align: start; }
}

/* -------------------------------------------------------------- la cita - */

.cita { background:
  radial-gradient(65% 60% at 50% 35%, var(--ocre-luz), transparent 75%),
  var(--arena-luz); }
.cita .cita-fecha { display: block;
  font: 800 var(--paso-3xl)/0.9 var(--display); letter-spacing: -.03em;
  color: var(--ocre-texto); }
.cita .dias { font-size: var(--paso-sm); color: var(--muted-fuerte); }

/* Scroll: CSS puro; los navegadores sin soporte ven el estado final. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .escena { animation: sube linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    .escenas > :nth-child(2) { animation-range: entry 8% cover 40%; }
    .escenas > :nth-child(3) { animation-range: entry 16% cover 48%; }
    .cita-fecha { animation: enciende linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes sube     { from { opacity: .4; transform: translateY(28px); } }
@keyframes enciende { from { clip-path: inset(0 100% 0 0); } }

/* ============================================================================
   v11.1 — apuntes de Tania: chips en filas parejas, escenas contenidas,
   la cita con aire de otoño + QR «Próximamente», menú con las dos puertas.
   ========================================================================== */

/* Chips en rejilla: 2×3 en móvil, 3+3 en pantalla ancha. Nunca 3+1. */
.chips-canal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
@media (min-width: 680px) { .chips-canal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chips-canal .chip-respuesta { width: 100%; text-align: center; padding-inline: 10px; }

/* Escenas más contenidas: el trío cabe en pantalla. */
.escenas { max-width: 940px; margin-inline: auto; }
.escena { aspect-ratio: 4 / 4.4; }
@media (min-width: 880px) {
  .escenas > :nth-child(2) { margin-top: 24px; }
  .escenas > :nth-child(3) { margin-top: -12px; }
}

/* La cita, en otoño: hojas que caen despacio (solo decorativas, se apagan
   con reduced-motion) y el fondo un punto más cálido y profundo. */
.cita { position: relative; overflow: hidden;
  background:
    radial-gradient(70% 65% at 30% 30%, var(--ocre-luz), transparent 70%),
    radial-gradient(50% 55% at 85% 75%, rgba(232, 166, 88, .22), transparent 70%),
    var(--arena-luz); }
.hojas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cita .container { position: relative; z-index: 1; }
.hoja { position: absolute; top: -6%; opacity: 0; }
.hoja svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .hoja { animation: hoja-cae linear infinite; }
}
@keyframes hoja-cae {
  0%   { transform: translate(0, -4vh) rotate(0deg); opacity: 0; }
  8%   { opacity: .55; }
  50%  { transform: translate(3vw, 55vh) rotate(160deg); }
  92%  { opacity: .5; }
  100% { transform: translate(-2vw, 115vh) rotate(320deg); opacity: 0; }
}
.hoja:nth-child(1) { left: 6%;  width: 22px; height: 22px; animation-duration: 11s; animation-delay: 0s;   color: var(--ocre); }
.hoja:nth-child(2) { left: 22%; width: 16px; height: 16px; animation-duration: 14s; animation-delay: 3s;   color: var(--ocre-tostado); }
.hoja:nth-child(3) { left: 45%; width: 26px; height: 26px; animation-duration: 12s; animation-delay: 6s;   color: var(--ocre); }
.hoja:nth-child(4) { left: 64%; width: 18px; height: 18px; animation-duration: 15s; animation-delay: 1.5s; color: var(--ocre-texto); }
.hoja:nth-child(5) { left: 80%; width: 24px; height: 24px; animation-duration: 13s; animation-delay: 8s;   color: var(--ocre-tostado); }
.hoja:nth-child(6) { left: 92%; width: 15px; height: 15px; animation-duration: 16s; animation-delay: 4.5s; color: var(--ocre); }

/* El QR de la conversación, con su faja de PRÓXIMAMENTE. */
.qr-prox { position: relative; max-width: 300px; margin-inline: auto;
  padding: var(--e-5); text-align: center;
  background: var(--blanco); border: 1px solid var(--linea-fria);
  border-radius: var(--radio-xl); box-shadow: var(--sombra-suave); }
.qr-prox img { width: min(200px, 55vw); margin-inline: auto; opacity: .45;
  border-radius: var(--radio-btn); }
.qr-prox .faja { position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 8px 22px; white-space: nowrap;
  font: 800 var(--paso-base)/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--blanco); background: var(--azul); border-radius: var(--radio-pill);
  box-shadow: var(--sombra-suave); }
.qr-prox p { margin: var(--e-4) 0 0; font-size: var(--paso-xs); color: var(--muted-fuerte); max-width: 26ch; margin-inline: auto; }

/* El menú con las dos puertas, también sobre la foto. */
@media (max-width: 480px) {
  .nav-links a.enlace-negocio { display: none; }   /* en muy estrecho, manda el CTA */
}

/* El logo sobre la foto: icono en negativo (cuadrado arena) + palabra en blanco.
   Los fills del SVG inline se pisan desde CSS; al ganar fondo sólido, vuelven solos. */
.nav--vidrio:not(.is-solida) .logo > svg rect:first-of-type { fill: var(--arena); }
.nav--vidrio:not(.is-solida) .logo > svg rect:not(:first-of-type) { fill: var(--azul); }
.nav--vidrio:not(.is-solida) .logo span { color: var(--blanco); }

/* Estas páginas no tienen hamburguesa: su menú se ve SIEMPRE, también en
   móvil (anula el patrón desplegable heredado de styles.css). */
@media (max-width: 860px) {
  .nav--vidrio .nav-links, .nav--fila .nav-links {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: var(--e-2); padding: 0; background: transparent; border: 0; box-shadow: none;
  }
  .nav--vidrio .nav-links a, .nav--fila .nav-links a { padding: 0; font-size: var(--paso-xs); }
  .nav--vidrio .nav-links .btn, .nav--fila .nav-links .btn { padding: 8px 12px; min-height: 38px; margin-top: 0; }
  /* En pantallas pequeñas, el enlace de la página en la que ya estás sobra. */
  .nav-links a[aria-current="page"] { display: none; }
}

/* El menú lleva a las tres webs; la actual, subrayada en ocre. */
.nav-links a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--ocre); }

/* ============================================================================
   v11.2 — más apuntes de Tania: menú legible arriba del todo, portada que
   cabe sin bajar, cinta sin costura, escenas con el título en línea.
   ========================================================================== */

/* El menú, legible también arriba: cristal oscuro plano, sin degradado. */
.nav--vidrio:not(.is-solida) {
  background: rgba(12, 42, 62, .38);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* La portada cabe en la pantalla: todo un punto más recogido. */
.portada--canal { min-height: calc(100svh - 64px); padding-block: var(--e-5); }
.portada--canal h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.4rem); margin-bottom: var(--e-4); }
.portada--canal .lead { font-size: var(--paso-base); max-width: 46ch; }
.portada--canal .barra-canal { margin-top: var(--e-5); }
.barra-canal .campo-falso { min-height: 54px; padding: var(--e-2) var(--e-4); }
.chips-canal .chip-respuesta { min-height: 40px; padding-block: 8px; font-size: var(--paso-xs); }
.nota-demo { margin-top: var(--e-3); }

/* La cinta, sin costura: el hueco vive DENTRO de cada pieza, así la mitad
   duplicada mide exactamente lo mismo y el bucle no se nota jamás. */
.cinta-canal .pista { gap: 0; }
.cinta-canal .pista span { margin-right: 2.5ch; }

/* Las escenas: el título en UNA sola línea y el subtítulo justo debajo. */
.escenas-cabecera { margin-bottom: var(--e-4); }
.escenas-cabecera h2 { margin: 0; max-width: none; }
.escenas-cabecera .seccion-lead { margin: var(--e-2) 0 0; }
.escena { aspect-ratio: 4 / 4.1; }

/* ============================================================================
   v12 — negocios: «El canal que habla de tu comercio».
   Dirección: referencia/web-campana/diseno-negocios-v2.md
   ========================================================================== */

/* El sello de «gratis»: el único ocre-fondo que no es botón (7,1:1 con tinta). */
.pill--gratis { background: var(--ocre); color: var(--azul-tinta); border-color: var(--ocre);
  font-weight: 700; }

/* El chat «habla de ti»: la tarjeta de conversación del hero, personalizable. */
.habla-de-ti { max-width: 400px; margin-inline: auto;
  padding: var(--e-5); background: var(--blanco);
  border-radius: var(--radio-xl); box-shadow: 0 8px 40px rgba(12, 42, 62, .28); }
.habla-de-ti .burbuja { max-width: 100%; margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4); font-size: var(--paso-sm); line-height: 1.45;
  background: var(--cielo); color: var(--azul-tinta);
  border-radius: var(--radio-burbuja); border-end-start-radius: 6px; }
.habla-de-ti .burbuja--usuario { background: var(--azul); color: var(--blanco);
  border-end-start-radius: var(--radio-burbuja); border-end-end-radius: 6px;
  margin-inline-start: var(--e-6); }
.habla-de-ti .nombre-comercio { font-weight: 700; color: var(--ocre-texto); }
.habla-de-ti .burbuja--usuario .nombre-comercio { color: var(--blanco); }
@media (prefers-reduced-motion: no-preference) {
  .habla-de-ti .burbuja { animation: sube-barra 400ms cubic-bezier(.2, .7, .2, 1) both; }
  .habla-de-ti .burbuja:nth-child(2) { animation-delay: 250ms; }
  .habla-de-ti .burbuja:nth-child(3) { animation-delay: 500ms; }
}
.habla-de-ti .prueba { margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid var(--linea-fria); }
.habla-de-ti .prueba label { display: block; margin-bottom: var(--e-2);
  font: 600 var(--paso-xs)/1.3 var(--texto); color: var(--muted-fuerte); }
.habla-de-ti .prueba input { width: 100%; min-height: 44px; padding: 10px 14px;
  font: 500 var(--paso-base)/1.3 var(--texto); color: var(--azul-tinta);
  border: 1.5px solid var(--linea-fria); border-radius: var(--radio-btn);
  background: var(--fondo); transition: border-color 120ms ease; }
.habla-de-ti .prueba input::placeholder { font-size: var(--paso-sm); }

/* ============================================================================
   v12.6 — la invitación del ejemplo (negocios): fuera el tercer chat, dentro
   una tarjeta directa y divertida que pide el nombre del comercio.
   ========================================================================== */

.invita-ejemplo { position: relative; max-width: 400px; margin-inline: auto;
  padding: var(--e-6) var(--e-5); overflow: hidden;
  background: var(--blanco); border-radius: var(--radio-xl);
  box-shadow: 0 8px 40px rgba(12, 42, 62, .28);
  transform: rotate(-1.5deg); }
.invita-ejemplo::before {   /* la cinta de color arriba, mar → sol */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--mar-claro), var(--ocre)); }
.invita-ejemplo .titulo { margin: 0;
  font: 800 var(--paso-lg)/1.15 var(--display); letter-spacing: -.01em;
  color: var(--azul-tinta); }
.invita-ejemplo .sub { margin: var(--e-2) 0 0; font-size: var(--paso-sm);
  color: var(--muted-fuerte); }
.invita-ejemplo label { display: block; margin: var(--e-4) 0 var(--e-2);
  font: 700 var(--paso-base)/1.3 var(--display); color: var(--azul-tinta); }
.invita-ejemplo .prueba { display: block; margin: 0; padding: 0; border: 0; }
.invita-ejemplo .prueba input { width: 100%; min-height: 46px; padding: 11px 14px;
  font: 500 1rem/1.3 var(--texto); color: var(--azul-tinta);
  border: 2px solid var(--linea-fria); border-radius: var(--radio-btn);
  background: var(--fondo); transition: border-color 120ms ease; }
.invita-ejemplo .prueba input:focus { border-color: var(--ocre-tostado); }
.invita-ejemplo .prueba input::placeholder { font-size: var(--paso-sm); color: var(--muted); }
.invita-ejemplo .nota { margin: var(--e-3) 0 0; font-size: var(--paso-xs);
  color: var(--muted-fuerte); }
.invita-ejemplo .nota .nombre-comercio { font-weight: 700; color: var(--ocre-texto); }
/* La letra al escribir se mantiene a 16px (iOS no hace zoom); solo el
   placeholder baja para leerse entero. */
.habla-de-ti .prueba input:focus { border-color: var(--mar-vivo); }
.habla-de-ti .nota { margin: var(--e-3) 0 0; font-size: var(--paso-xs); color: var(--muted-fuerte); }

/* El alta en tres pasos; el ticket de muestra es la noticia. */
.pasos-alta { display: grid; gap: var(--hueco); counter-reset: alta; margin: 0; padding: 0; list-style: none; }
@media (min-width: 880px) { .pasos-alta { grid-template-columns: 1fr 1.4fr 1fr; align-items: stretch; } }
.paso-alta { position: relative; padding: var(--e-5); counter-increment: alta; margin: 0;
  background: var(--blanco); border: 1px solid var(--linea-fria); border-radius: var(--radio-xl); }
.paso-alta::before { content: "0" counter(alta); display: block; margin-bottom: var(--e-3);
  font: 800 var(--paso-xl)/1 var(--display); color: var(--ocre-texto); }
.paso-alta h3 { margin-bottom: var(--e-2); }
.paso-alta p { margin: 0; font-size: var(--paso-sm); color: var(--muted-fuerte); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .paso-alta { animation: sube linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    .paso-alta:nth-child(2) { animation-range: entry 8% cover 40%; }
    .paso-alta:nth-child(3) { animation-range: entry 16% cover 48%; }
  }
}

.ticket-demo { position: relative; width: 120px; margin: var(--e-4) auto;
  padding: var(--e-4) var(--e-3); background: var(--arena-luz);
  border: 1px solid var(--linea-fria); border-radius: 6px; overflow: hidden; }
.ticket-demo i { display: block; height: 6px; margin-bottom: 8px; border-radius: 3px;
  background: var(--linea-fria); }
.ticket-demo i:nth-child(2) { width: 70%; }
.ticket-demo i:last-child { width: 55%; height: 8px; background: var(--muted); margin-bottom: 0; }
.ticket-demo::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--mar-claro); box-shadow: 0 0 12px 2px rgba(43, 135, 196, .45);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ticket-demo::after { animation: escanea 3.2s ease-in-out infinite; }
}
@keyframes escanea {
  0%, 12%  { transform: translateY(0);      opacity: 0; }
  18%      { opacity: 1; }
  55%      { transform: translateY(110px);  opacity: 1; }
  62%,100% { transform: translateY(110px);  opacity: 0; }
}
.ticket-leido { margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  font-size: var(--paso-sm); background: var(--cielo); color: var(--azul-tinta);
  border-radius: var(--radio-burbuja); border-end-start-radius: 6px; }
.ticket-leido strong { color: var(--ok); }
.ticket-leido .nombre-comercio { font-weight: 700; color: var(--ocre-texto); }

/* El panel en tiempo real, honesto: mock con faja de datos ficticios. */
.panel-mock { max-width: 420px; margin-inline: auto; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--linea-fria);
  border-radius: var(--radio-xl); box-shadow: var(--sombra-suave); }
.panel-mock .marco { display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); background: var(--arena-luz);
  border-bottom: 1px solid var(--linea-fria); font-size: var(--paso-xs); color: var(--muted-fuerte); }
.panel-mock .marco i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fria); }
.panel-mock .faja-demo { padding: 6px var(--e-4); text-align: center;
  font: 600 var(--paso-xs)/1.4 var(--texto); letter-spacing: .04em;
  color: var(--ocre-texto); background: var(--ocre-luz); }
.panel-mock .metricas { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.panel-mock .metrica { padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linea-fria); }
.panel-mock .metrica:nth-child(odd) { border-right: 1px solid var(--linea-fria); }
.panel-mock .metrica dt { font: 600 var(--paso-xs)/1.3 var(--texto);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-fuerte); }
.panel-mock .metrica dd { margin: 2px 0 0;
  font: 800 var(--paso-xl)/1 var(--display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--azul-tinta); }
.panel-mock .barras { display: flex; gap: 6px; align-items: flex-end;
  height: 64px; padding: var(--e-4) var(--e-5) var(--e-5); }
.panel-mock .barras i { flex: 1; border-radius: 4px 4px 0 0; background: var(--mar-claro);
  transform-origin: bottom; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel-mock .barras i { animation: crece linear both;
      animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes crece { from { transform: scaleY(.25); } }

/* Las tres fechas del comerciante, compactas. */
.fechas-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.fechas-mini li { display: flex; gap: var(--e-3); align-items: baseline; margin: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--blanco); border: 1px solid var(--linea-fria); border-radius: var(--radio-btn); }
.fechas-mini .f { font: 800 var(--paso-md)/1 var(--display); color: var(--mar-vivo);
  min-width: 6.5ch; font-variant-numeric: tabular-nums; }
.fechas-mini li:first-child .f { color: var(--ocre-texto); }
.fechas-mini li span:last-child { font-size: var(--paso-sm); }

/* Las dos puertas del formulario: la intención, a lo grande. */
.intencion--puertas .opcion { min-height: 96px; padding: var(--e-5);
  border-width: 2px; border-radius: var(--radio-xl); }
.intencion--puertas .opcion .titulo { font: 700 var(--paso-md)/1.2 var(--display); }
.intencion--puertas .opcion .detalle { margin-top: var(--e-1); }
.intencion--puertas .opcion:has(input:checked), .intencion--puertas .opcion.is-sel {
  border-color: var(--ocre-tostado); background: var(--ocre-luz);
  box-shadow: inset 0 0 0 1px var(--ocre-tostado), var(--sombra-suave); }
.contacto-humano { margin-top: var(--e-4); font-size: var(--paso-sm); color: var(--muted-fuerte); }
.contacto-humano a { font-weight: 600; color: var(--mar-vivo); }

/* ============================================================================
   v12.1 — la vuelta de Tania a negocios: formulario compacto, la prueba del
   nombre como barra de chat, ticket ficticio de verdad, sin FAQ.
   ========================================================================== */

/* El formulario, fácil: dos columnas, letra contenida, sin ayudas que estorben. */
.cita .form-tarjeta { max-width: 600px; padding: var(--e-5); }
.campos-grid { display: grid; gap: 0 var(--e-4); }
@media (min-width: 680px) { .campos-grid { grid-template-columns: 1fr 1fr; } }
.campos-grid .campo--full { grid-column: 1 / -1; }
.cita .campo { margin-bottom: var(--e-3); }
.cita .campo label { font-size: var(--paso-xs); margin-bottom: 4px; }
.cita .campo input, .cita .campo textarea { min-height: 42px; padding: 9px 12px; font-size: 1rem; }
.cita .campo textarea { min-height: 64px; }
.cita .campo .hint { display: none; }   /* las etiquetas bastan; menos ruido */
.cita .intencion { margin-bottom: var(--e-4); }
.cita .intencion legend { font-size: var(--paso-xs); margin-bottom: var(--e-2); }
.intencion--puertas .opcion { min-height: 64px; padding: var(--e-3) var(--e-4);
  border-radius: var(--radio-btn); }
.intencion--puertas .opcion .titulo { font-size: var(--paso-base); }
.intencion--puertas .opcion .detalle { font-size: var(--paso-xs); }
.cita .campo-check { margin-bottom: var(--e-4); }
.cita .campo-check label { font-size: var(--paso-xs); }
.cita .form-legal { font-size: var(--paso-xs); margin-top: var(--e-3); }
.cita .contacto-humano { margin-top: var(--e-3); font-size: var(--paso-xs); }

/* La prueba del nombre, como se merece: una barra de chat, sin sermón. */
.habla-de-ti .prueba { display: flex; align-items: center; gap: 8px; }
.habla-de-ti .prueba input { flex: 1; }
.habla-de-ti .prueba .enviar { flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--azul); display: flex; align-items: center; justify-content: center; }
.habla-de-ti .prueba .enviar svg { width: 18px; height: 18px; fill: var(--blanco); }

/* El ticket ficticio: un recibo de verdad, en miniatura, con su borde rasgado. */
.ticket-ficticio { width: 180px; margin: var(--e-4) auto; position: relative; overflow: hidden;
  padding: var(--e-3) var(--e-3) var(--e-5);
  background: var(--blanco); border: 1px solid var(--linea-fria);
  box-shadow: var(--sombra-chat);
  font-family: "Courier New", Courier, monospace; font-size: 11px; line-height: 1.6;
  color: var(--azul-tinta);
  -webkit-mask-image: radial-gradient(circle at 8px 100%, transparent 5px, black 5.5px);
  -webkit-mask-size: 16px 100%; -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 8px 100%, transparent 5px, black 5.5px);
  mask-size: 16px 100%; mask-repeat: repeat-x; }
.ticket-ficticio .cab { text-align: center; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 2px; }
.ticket-ficticio .sub { text-align: center; font-size: 10px; color: var(--muted-fuerte);
  margin-bottom: 6px; border-bottom: 1px dashed var(--linea-fria); padding-bottom: 6px; }
.ticket-ficticio .lin { display: flex; justify-content: space-between; gap: 8px; }
.ticket-ficticio .tot { display: flex; justify-content: space-between; gap: 8px;
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--muted); font-weight: 700; }
.ticket-ficticio::after {   /* la línea de escaneo, ahora sobre el recibo real */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--mar-claro); box-shadow: 0 0 12px 2px rgba(43, 135, 196, .45);
  opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ticket-ficticio::after { animation: escanea-t 3.4s ease-in-out infinite; }
}
@keyframes escanea-t {
  0%, 12%  { transform: translateY(0);      opacity: 0; }
  18%      { opacity: 1; }
  58%      { transform: translateY(130px);  opacity: 1; }
  65%,100% { transform: translateY(130px);  opacity: 0; }
}

/* ============================================================================
   v12.2 — segunda vuelta de Tania: alta compacta, formulario-escenario,
   sección de donación de premios.
   ========================================================================== */

/* El alta, recogida: los tres pasos caben en pantalla con el ticket dentro. */
.pasos-alta { gap: var(--e-3); }
.paso-alta { padding: var(--e-4); }
.paso-alta::before { margin-bottom: var(--e-2); font-size: var(--paso-lg); }
.ticket-ficticio { width: 150px; font-size: 10px; margin: var(--e-3) auto; line-height: 1.5; }
.ticket-leido { font-size: var(--paso-xs); padding: var(--e-2) var(--e-3); margin-top: var(--e-2); }

/* El formulario como escenario: la oportunidad a la izquierda, el alta a la
   derecha. Nada de columna vacía. */
.form-escena { display: grid; gap: var(--hueco); }
@media (min-width: 880px) { .form-escena { grid-template-columns: 5fr 7fr; align-items: stretch; } }
.form-pitch { position: relative; overflow: hidden; isolation: isolate;
  padding: var(--e-6);
  background: linear-gradient(160deg, var(--azul) 0%, #0B3049 100%);
  color: var(--arena); border-radius: var(--radio-xl); box-shadow: var(--sombra-suave); }
.form-pitch::after { content: ""; position: absolute; top: -30%; right: -30%;
  width: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, rgba(232, 166, 88, .30), transparent 70%); }
.form-pitch h3 { color: var(--blanco); font-size: var(--paso-xl);
  font-variation-settings: "opsz" 96; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.05; max-width: 14ch; }
.form-pitch ul { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.form-pitch li { display: flex; gap: 10px; margin: 0; font-size: var(--paso-sm);
  color: rgba(245, 238, 225, .92); }
.form-pitch li::before { content: "✓"; flex: none; font-weight: 700; color: var(--ocre); }
.form-pitch .plazo-sello { display: inline-block; margin-top: var(--e-5);
  padding: 8px 16px; transform: rotate(-2deg);
  font: 700 var(--paso-sm)/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--azul-tinta); background: var(--ocre); border-radius: var(--radio-pill); }
.cita .form-escena .form-tarjeta { max-width: none; margin: 0; }

/* La tarjeta del sorteo con nombre propio: dona un premio, protagoniza un sorteo. */
.tarjeta-sorteo { max-width: 360px; margin-inline: auto; padding: var(--e-5);
  text-align: center; background: var(--blanco);
  border: 2px dashed var(--ocre-tostado); border-radius: var(--radio-xl);
  box-shadow: var(--sombra-suave); }
.tarjeta-sorteo .etiq { font: 700 var(--paso-xs)/1.4 var(--texto);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ocre-texto); }
.tarjeta-sorteo .nombre { display: block; margin: var(--e-2) 0;
  font: 800 var(--paso-xl)/1.05 var(--display); letter-spacing: -.02em;
  color: var(--azul-tinta); overflow-wrap: anywhere; }
.tarjeta-sorteo p { margin: 0; font-size: var(--paso-sm); color: var(--muted-fuerte); }
.tarjeta-sorteo .pre { display: block; margin-top: var(--e-3);
  font: 700 var(--paso-xs)/1.3 var(--texto); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-fuerte); }
.tarjeta-sorteo .nombre { margin-top: 2px; }

/* ============================================================================
   v12.3 — tercera vuelta: ficha y kit ficticios como el ticket, formulario
   aún más pequeño, «Sorteo de» y el nombre en dos líneas.
   ========================================================================== */

/* La ficha de datos, en miniatura: como la rellenaremos en la visita. */
.ficha-ficticia { width: 170px; margin: var(--e-3) auto; padding: var(--e-3);
  background: var(--blanco); border: 1px solid var(--linea-fria); border-radius: 8px;
  box-shadow: var(--sombra-chat); text-align: left; }
.ficha-ficticia .fila { margin: 0 0 7px; }
.ficha-ficticia .fila:last-child { margin-bottom: 0; }
.ficha-ficticia .eti { display: block;
  font: 700 8.5px/1.3 var(--texto); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-fuerte); }
.ficha-ficticia .val { display: block; font: 500 11px/1.4 var(--texto);
  color: var(--azul-tinta); border-bottom: 1px dashed var(--linea-fria);
  padding-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ficha-ficticia .val .nombre-comercio { font-weight: 700; color: var(--ocre-texto); }

/* La pegatina del kit, en miniatura: el escaparate en pequeño. */
.kit-ficticio { width: 150px; margin: var(--e-3) auto; padding: var(--e-3);
  text-align: center; background: var(--azul); color: var(--arena);
  border-radius: 14px; box-shadow: var(--sombra-chat); }
.kit-ficticio .marca { display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 11px/1.2 var(--display); color: var(--blanco); }
.kit-ficticio .marca svg { width: 18px; height: 18px; border-radius: 4px; }
.kit-ficticio img { width: 64px; height: 64px; margin: 8px auto 6px; border-radius: 6px;
  background: var(--blanco); padding: 3px; }
.kit-ficticio .eti { display: block; font: 700 8px/1.3 var(--texto);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ocre); }

/* El formulario, otro punto más pequeño: sin descripciones en las puertas,
   campos aún más recogidos. */
.cita .form-tarjeta { padding: var(--e-4); }
.intencion--puertas .opcion { min-height: 48px; padding: var(--e-2) var(--e-3);
  align-items: center; }
.intencion--puertas .opcion .detalle { display: none; }
.intencion--puertas .opcion .marca { margin-top: 0; width: 18px; height: 18px; }
.intencion--puertas .opcion .titulo { font-size: var(--paso-sm); }
.cita .intencion { margin-bottom: var(--e-3); }
.cita .campo { margin-bottom: var(--e-2); }
.cita .campo input, .cita .campo textarea { min-height: 38px; padding: 7px 11px; }
.cita .campo textarea { min-height: 52px; }
.cita .campo-check { margin-bottom: var(--e-3); }
.cita .campo-check input { width: 18px; height: 18px; }
.cita .form-tarjeta .btn-block { min-height: 44px; }

/* ============================================================================
   v12.5 — el alta simétrica: tres cajas gemelas, creatividad + texto,
   misma anchura, misma altura, mocks centrados en zonas iguales.
   ========================================================================== */

@media (min-width: 880px) { .pasos-alta { grid-template-columns: repeat(3, 1fr); } }
.paso-alta { display: flex; flex-direction: column; }
.paso-visual { height: 180px; display: flex; align-items: center; justify-content: center;
  margin: var(--e-2) 0 var(--e-3); }
.paso-visual .ficha-ficticia, .paso-visual .ticket-ficticio, .paso-visual .kit-ficticio {
  margin: 0; }
.paso-alta p { margin-top: auto; }   /* los textos, alineados por abajo */

/* ============================================================================
   v12.7 — el mapa de la zona de campaña, incrustado (OpenStreetMap: sin
   claves y sin cookies de terceros).
   ========================================================================== */

.mapa-campana { position: relative; overflow: hidden;
  border-radius: var(--radio-xl); border: 1px solid var(--linea-fria);
  box-shadow: var(--sombra-suave); background: var(--cielo); }
.mapa-campana iframe { display: block; width: 100%; height: 340px; border: 0; }
.mapa-campana .sello { position: absolute; top: var(--e-3); right: var(--e-3);
  background: var(--blanco); box-shadow: var(--sombra-chat); }
.mapa-pie { margin: var(--e-3) 0 0; font-size: var(--paso-xs); color: var(--muted-fuerte); }

/* El mapa vivo (Leaflet): lienzo, pins de comercio y fichas con la marca. */
#mapa-lienzo { height: 340px; background: var(--cielo); z-index: 0; }
html:not(.js) #mapa-lienzo { display: none; }
.pin-comercio span { display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ocre); border: 3px solid var(--blanco);
  box-shadow: 0 2px 10px rgba(12, 42, 62, .45); }
@media (prefers-reduced-motion: no-preference) {
  .pin-comercio span { animation: pin-late 2.4s ease-in-out infinite; }
  @keyframes pin-late { 50% { transform: scale(1.18); } }
}
.leaflet-popup-content-wrapper { border-radius: var(--radio-btn);
  font-family: var(--texto); color: var(--azul-tinta); box-shadow: var(--sombra-suave); }
.leaflet-popup-content strong { font-family: var(--display); }

/* La hamburguesa en blanco mientras la barra va transparente sobre la foto */
.nav--vidrio:not(.is-solida):not(.nav-abierta) .nav-burger span { background: var(--blanco); }