/* La promoción de la landing: la franja de arriba del menú y la etiqueta que
 * se despega en #precios *(2026-10-09, D-040)*.
 *
 * **Solo se carga cuando hay promoción**: la pone el Worker en el `<head>`
 * junto con el HTML de los dos (ver `landing/promocion.mjs`). Sin promoción
 * este archivo ni se pide.
 *
 * Los colores son los del sitio —`index.html` y `paginas.css` los definen—;
 * aquí solo se nombran los de este componente, una vez. Ni verde ni rojo:
 * son de los estatus de lote.
 */
:root {
  --promo-fondo: var(--acento-suave, #0B3E50);            /* petróleo */
  --promo-texto: var(--texto, #EEF8FA);
  --promo-enlace: var(--acento, #9CF2FF);                 /* celeste */
  --promo-borde: var(--borde, #0F3D4D);
  --promo-turquesa: var(--acento-oscuro, #0092A8);
  --promo-papel: var(--superficie-alta, #052A38);
  /* Turquesa más hondo para texto blanco encima: 5.4:1 (el de la marca da 3.7). */
  --promo-turquesa-fuerte: #00758A;
  /* **Violeta, a propósito fuera de la paleta** *(Eduardo, 2026-10-09)*: en
     turquesa la etiqueta se perdía entre los botones, el menú y los precios,
     que son de ese color. Una promoción tiene que ser lo único de su color en
     la página. Ni verde ni rojo (estatus de lote) ni ámbar («reservado»); el
     violeta es vecino frío del turquesa y ya está, como lavanda, en el confeti.
     Blanco sobre #7C5CFA: 4.8:1. */
  --promo-violeta: #7C5CFA;
  --promo-violeta-borde: #9F86FF;
  --promo-violeta-texto: #D6CAFF;
}

/* ── Franja ─────────────────────────────────────────────────
 * En el flujo normal, encima de la barra pegajosa: al desplazarse se va y la
 * barra queda en `top: 0` como siempre. Ni `sticky` ni `fixed`: así no tapa
 * nada ni empuja lo que el visitante ya estaba mirando. */
.franja-promocion {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 38px;
  padding: 4px 56px 4px 16px;
  /* Violeta, como la etiqueta: la promoción es lo único de ese color en la
     página (Eduardo, 2026-10-09). Blanco encima: 4.8:1. */
  background: var(--promo-violeta);
  color: #fff;
  border-bottom: 1px solid #6A48EE;
  font-size: 14px; line-height: 1.35; font-weight: 600;
}
.franja-cerrada .franja-promocion { display: none; }

.franja-contenido {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; column-gap: 14px; row-gap: 0;
  min-width: 0;
}
.franja-texto {
  margin: 0; min-width: 0; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.franja-detalle { font-weight: 500; color: rgba(255, 255, 255, .85); }
.franja-enlace {
  /* Blanco y subrayado: el celeste sobre violeta no llega a 4.5:1. */
  color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
  border-radius: 4px;
}
.franja-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.franja-cerrar {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent;
  color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.franja-cerrar:hover { background: rgba(255,255,255,.16); }
.franja-enlace:focus-visible,
.franja-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
  .franja-promocion { padding: 4px 52px 4px 14px; font-size: 13.5px; }
  /* En el teléfono se dice lo principal y nada más: sin tope ni caducidad. */
  .franja-detalle { display: none; }
  .franja-cerrar { width: 40px; height: 40px; right: 4px; }
  .franja-contenido { column-gap: 10px; }
}

/* ── Etiqueta que se despega ─────────────────────────────────
 * Basada en «CouponRevealButton» de 21st.dev *(Eduardo, 2026-10-09)*. Debajo,
 * el recuadro punteado con el código; encima, el papel, que lo tapa todo
 * menos una esquina doblada a la derecha.
 *  - Reposo: asoma la esquina punteada (24 px).
 *  - Cursor encima: el papel se levanta un poco más (48 px), suave.
 *  - Pulsar: se hunde un poco (`scale`) y el papel se va entero; vuelve a su
 *    tamaño ya con el código a la vista.
 *  - Pulsar otra vez: se hunde, copia y cambia de color con «Copiado»; a los
 *    2 s vuelve sola al color del código.
 * El papel se recorta con `clip-path` en píxeles desde la derecha, así que
 * funciona a cualquier ancho sin medir nada con JavaScript. */
.etiqueta-promocion-caja {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0 0 28px;
}
.etiqueta-promocion {
  position: relative; display: block;
  width: min(100%, 300px); height: 52px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--promo-texto);
  font: inherit; cursor: pointer; overflow: visible;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* El hundimiento, como el original de 21st.dev: **mientras se presiona**, no
   después del clic —el clic llega al soltar, y hundirse ahí se sentía
   retrasado (Eduardo, 2026-10-09)—. `data-presionado` lo pone el guion al
   bajar el dedo o el botón del ratón y lo quita al soltar: en el teléfono
   `:active` casi no dura. Misma curva que el original: 200 ms. */
.etiqueta-promocion:active,
.etiqueta-promocion[data-presionado] { transform: scale(.98); }
.etiqueta-promocion:focus-visible { outline: 2px solid var(--promo-enlace); outline-offset: 3px; }

/* Debajo: el recuadro punteado. */
.etiqueta-codigo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--promo-violeta-borde); border-radius: 10px;
  background: rgba(124, 92, 250, .16); color: var(--promo-violeta-texto);
  transition: background-color 300ms, border-color 300ms, color 300ms, clip-path 400ms cubic-bezier(0.22, 1, 0.36, 1);
  clip-path: polygon(calc(100% - 28px) 0, 100% 0, 100% 100%, calc(100% - 52px) 100%);
}
/* El recuadro punteado solo existe donde el papel no lo tapa —4 px más allá
   del doblez, para que no quede hueco—. Dibujado entero debajo, su línea se
   colaba por el borde del papel (Eduardo, 2026-10-09). Se recorta igual que
   el papel, con el mismo tiempo. */
.etiqueta-ver, .etiqueta-listo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 200ms;
}
.etiqueta-listo { opacity: 0; font-weight: 700; font-size: 15px; }
.etiqueta-texto {
  padding: 3px 8px; border-radius: 5px; background: rgba(214, 202, 255, .1);
  font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; color: var(--promo-violeta-texto);
}
.etiqueta-icono { width: 16px; height: 16px; flex: none; opacity: .8; }
.etiqueta-promocion[data-revelada] .etiqueta-ver .etiqueta-icono { animation: etiqueta-latido 1.6s ease-in-out infinite; }
@keyframes etiqueta-latido { 50% { opacity: .35; } }

/* Copiado: otro color —celeste— y vuelve solo a los 2 s. */
.etiqueta-promocion[data-copiado] .etiqueta-codigo {
  border-color: var(--promo-enlace); background: rgba(156, 242, 255, .16); color: var(--promo-enlace);
}
.etiqueta-promocion[data-copiado] .etiqueta-ver { opacity: 0; }
.etiqueta-promocion[data-copiado] .etiqueta-listo { opacity: 1; }

/* Encima: el papel. */
.etiqueta-frente {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px 0 22px; border-radius: 10px;
  background: var(--promo-violeta);
  color: #fff; font-size: 15.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 24px) 0, calc(100% - 48px) 100%, 0 100%);
  transition: clip-path 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.etiqueta-pico {
  position: absolute; top: -4px; width: 48px; height: 56px;
  left: calc(100% - 63px);
  transform-origin: bottom left;
  filter: drop-shadow(-3px 4px 5px rgba(0, 0, 0, .28));
  transition: left 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease-out;
  pointer-events: none;
}
/* Un poco más grande que su caja: el original mide 48 px de alto y este
   botón 52, así que con el mismo triángulo la punta no sobresalía por abajo
   ni la base se veía tan ancha. 8% más ancho y 4 px más alto, y sobresale
   como en el original. */
.etiqueta-pico svg { display: block; transform: scale(1.08, 1.07); transform-origin: top left; }

/* Cursor encima, sin despegar todavía: se levanta un poco más. */
@media (hover: hover) {
  .etiqueta-promocion:not([data-revelada]):hover .etiqueta-frente {
    clip-path: polygon(0 0, calc(100% - 48px) 0, calc(100% - 72px) 100%, 0 100%);
  }
  .etiqueta-promocion:not([data-revelada]):hover .etiqueta-pico { left: calc(100% - 87px); }
  .etiqueta-promocion:not([data-revelada]):hover .etiqueta-codigo { clip-path: polygon(calc(100% - 52px) 0, 100% 0, 100% 100%, calc(100% - 76px) 100%); }
  /* Sin crecer al levantarse: con `scale` la punta se salía del borde y se
     separaba del papel; tiene que parecer una sola hoja que se dobla. */
}

/* Despegada: pulsada, o sin JavaScript, que no tiene cómo pulsarla. */
.etiqueta-promocion[data-revelada] .etiqueta-frente,
html:not(.con-js) .etiqueta-frente { clip-path: polygon(0 0, -48px 0, -72px 100%, 0 100%); }
.etiqueta-promocion[data-revelada] .etiqueta-codigo,
html:not(.con-js) .etiqueta-codigo { clip-path: polygon(-48px 0, 100% 0, 100% 100%, -72px 100%); }
.etiqueta-promocion[data-revelada] .etiqueta-pico,
html:not(.con-js) .etiqueta-pico { left: -36px; opacity: 0; transform: scale(.8); }
html:not(.con-js) .etiqueta-promocion { cursor: default; }
html:not(.con-js) .etiqueta-icono { display: none; }

/* El tope y la caducidad, siempre a la vista, una sola vez. */
.etiqueta-condiciones { font-size: 13.5px; font-weight: 600; color: var(--promo-violeta-texto); }
/* «Pulsa de nuevo para copiarlo» ocupa su renglón solo después de despegar. */
.etiqueta-estado {
  min-height: 0; font-size: 13.5px; font-weight: 600; color: var(--texto-suave, #9FC0C9);
}
.etiqueta-promocion-caja:has([data-revelada]) .etiqueta-estado { min-height: 20px; }
/* Mientras dice «Copiado» dentro del recuadro, abajo no se repite: sigue
   ahí para el lector de pantalla, pero sin color. */
.etiqueta-promocion-caja:has([data-copiado]) .etiqueta-estado { color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .etiqueta-promocion, .etiqueta-frente, .etiqueta-pico, .etiqueta-codigo, .etiqueta-ver, .etiqueta-listo { transition: none; }
  .etiqueta-promocion:active, .etiqueta-promocion[data-presionado] { transform: none; }
  .etiqueta-promocion[data-revelada] .etiqueta-ver .etiqueta-icono { animation: none; }
}