/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --ink: #141A26;
  --ink-soft: #3D4459;
  --muted: #6B7290;
  --paper: #F7F7FB;
  --surface: #FFFFFF;
  --line: #E4E4F0;
  --accent: #5B2FD6;
  --accent-ink: #4423A8;
  --accent-soft: #EDE7FB;
  /* Texto que va ENCIMA del morado (pestaña elegida). En claro, casi blanco;
     en oscuro el morado se aclara y el texto claro dejaba de leerse (3,4:1),
     así que allí se vuelve tinta oscura. */
  --sobre-accent: #FBF3EF;
  --magenta: #C13B8D;
  --coral: #C14851;
  --gold: #D9A544;
  --success: #2F7A5C;
  --gradient-brand: linear-gradient(135deg, #4B31D3 0%, #952AC5 40%, #D43B8D 70%, #C14851 100%);
  --shadow: 0 1px 2px rgba(20, 26, 38, 0.05), 0 8px 24px rgba(20, 26, 38, 0.08);

  --status-pendiente-bg: #F3E9CE; --status-pendiente-ink: #8A6416;
  --status-aprobado-bg: #E1F0E7; --status-aprobado-ink: #2F7A5C;
  --status-rechazado-bg: #F4E1DE; --status-rechazado-ink: #A8453B;

  --font-display: "Familjen Grotesk", "Segoe UI", -apple-system, sans-serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F1F1F8;
    --ink-soft: #C9CBDA;
    --muted: #9297AF;
    --paper: #10121C;
    --surface: #191C2B;
    --line: #2C3044;
    --accent: #8B6EF0;
    --accent-ink: #C7B8FF;
    --accent-soft: #241C47;
    --sobre-accent: #191C2B;
    --magenta: #E37AB8;
    --coral: #E38086;
    --gold: #E8B458;
    --success: #5FB893;
    --gradient-brand: linear-gradient(135deg, #6C4FE8 0%, #A855D9 40%, #E37AB8 70%, #E38086 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);

    --status-pendiente-bg: #4A3B1C; --status-pendiente-ink: #E8C77C;
    --status-aprobado-bg: #1F3A2C; --status-aprobado-ink: #7FD3AA;
    --status-rechazado-bg: #452420; --status-rechazado-ink: #E39A90;
  }
}

:root[data-theme="dark"] {
  --ink: #F1F1F8;
  --ink-soft: #C9CBDA;
  --muted: #9297AF;
  --paper: #10121C;
  --surface: #191C2B;
  --line: #2C3044;
  --accent: #8B6EF0;
  --accent-ink: #C7B8FF;
  --accent-soft: #241C47;
  --sobre-accent: #191C2B;
  --magenta: #E37AB8;
  --coral: #E38086;
  --gold: #E8B458;
  --success: #5FB893;
  --gradient-brand: linear-gradient(135deg, #6C4FE8 0%, #A855D9 40%, #E37AB8 70%, #E38086 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);

  --status-pendiente-bg: #4A3B1C; --status-pendiente-ink: #E8C77C;
  --status-aprobado-bg: #1F3A2C; --status-aprobado-ink: #7FD3AA;
  --status-rechazado-bg: #452420; --status-rechazado-ink: #E39A90;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.015em; font-family: var(--font-display); font-weight: 600; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--surface); color: var(--ink);
  z-index: 9999; border-radius: var(--radius-s); font-weight: 600;
  box-shadow: var(--shadow);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gradient-brand); flex-shrink: 0;
}
.grad-text {
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.muted { color: var(--muted); }
.center { text-align: center; }

/* =============================================================
   4. Typography
   ============================================================= */
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 42ch; }

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--radius-s); font-weight: 700;
  font-size: .95rem; transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #FBF3EF; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-block { width: 100%; }

/* Botón de descarga. Antes era "ghost" (transparente con borde fino) y en el
   apartado del QR parecía apagado: está justo debajo del bloque de
   personalización, que en el plan gratis SÍ se atenúa, y el ojo lo leía como
   otra cosa bloqueada. Descargar el QR se puede siempre, con cualquier plan,
   así que el botón tiene que verse activo. Sólido y en color tinta: destaca
   sin competir con el morado de "Guardar", que es el que sí es de pago. */
.btn-descarga { background: var(--ink); color: var(--surface); border: 1px solid var(--ink); box-shadow: var(--shadow); }
.btn-descarga:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20, 26, 38, .22); }
.btn-descarga:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-danger { background: var(--status-rechazado-ink); color: #FBF3EF; }
.btn-danger:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1.75rem;
}
.card-danger { border-color: var(--status-rechazado-ink); }
.card-upsell {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-m); padding: 1.1rem 1.4rem; margin-bottom: 1.2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.card-upsell p { margin: 0; color: var(--accent-ink); font-size: .92rem; }
.card-upsell strong { color: var(--accent-ink); }

/* Aviso del límite de publicadas. Es la pantalla que más dinero decide, así
   que se trata como una oferta y no como un error del sistema.
   Todas las clases llevan el prefijo al-: el mismo bloque vive también en la
   consola de Shopify, y allí los nombres genéricos (.cuerpo, .aviso) chocaban
   con clases que ya existían. Mismo HTML en los dos sitios, mismo aspecto.
   El filete de la izquierda hace el trabajo del color: se distingue de un
   vistazo sin pintar un bloque saturado, que se lee como anuncio y se ignora. */
.al-caja {
  border-radius: var(--radius-m); margin-bottom: 1.2rem; overflow: hidden;
  display: flex; align-items: stretch;
  border: 1px solid var(--line); background: var(--surface);
}
.al-filete { width: 4px; flex: 0 0 4px; }
.al-interior {
  flex: 1; padding: .95rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .9rem 1.5rem;
}
.al-texto { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.al-titular { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.al-detalle { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }
.al-detalle strong { color: var(--ink); }
.al-acciones { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; flex: 0 0 auto; }
.al-apunte { font-size: .74rem; color: var(--muted); }
.al-enlace {
  background: none; border: 0; padding: 0; font: inherit; font-size: .76rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.al-enlace:hover { color: var(--ink); }

/* Ya hay reseñas escondidas: el momento de vender. */
.al-caja.al-urgente { background: var(--accent-soft); border-color: var(--accent); }
.al-caja.al-urgente .al-filete { flex-basis: 7px; width: 7px; }
.al-caja.al-urgente .al-filete { background: var(--accent); }
.al-caja.al-urgente .al-titular,
.al-caja.al-urgente .al-detalle strong { color: var(--accent-ink); }
.al-caja.al-urgente .al-detalle { color: var(--accent-ink); opacity: .9; }
.al-caja.al-urgente .al-apunte,
.al-caja.al-urgente .al-enlace { color: var(--accent-ink); opacity: .85; }

/* Mes de estreno: se avisa con tiempo, sin alarmar. En el morado de la marca,
   no en ámbar: el ámbar en este panel significa "cuidado", y esto no es una
   advertencia, es una oportunidad.
   Los dos avisos comparten color, así que se distinguen por PESO y no por
   tono: este va sin borde marcado y con el filete fino; el urgente lleva
   borde entero y filete grueso. Misma familia, dos intensidades. */
.al-caja.al-pronto { background: var(--accent-soft); border-color: var(--accent-soft); }
.al-caja.al-pronto .al-filete { background: var(--accent); }
.al-caja.al-pronto .al-titular,
.al-caja.al-pronto .al-detalle strong { color: var(--accent-ink); }
.al-caja.al-pronto .al-detalle { color: var(--accent-ink); opacity: .9; }
.al-caja.al-pronto .al-apunte { color: var(--accent-ink); opacity: .85; }
.al-caja.al-pronto .al-barra { background: color-mix(in srgb, currentColor 18%, transparent); color: var(--accent-ink); }
/* Sin color-mix (navegadores viejos) se ve un gris neutro, que sigue valiendo. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .al-caja.al-pronto .al-barra { background: rgba(128, 128, 128, .22); }
}
.al-caja.al-pronto .al-chip {
  color: var(--accent-ink); background: var(--surface); border-color: var(--accent-soft);
}

/* Barra del mes de estreno. Un número de días se lee y se olvida; una barra
   que se va llenando se entiende sin leer y da sensación de que corre el
   tiempo, que es justo lo que pasa. */
.al-barra {
  height: 5px; border-radius: 99px; margin-top: .45rem; overflow: hidden;
  background: rgba(0,0,0,.09);
}
.al-barra > span { display: block; height: 100%; border-radius: 99px; background: currentColor; opacity: .75; }

/* Lo que se llevaría con Pro, en tres golpes. Avisar de lo que se pierde
   asusta; decir lo que se gana da ganas de mirar. Hacen falta las dos cosas. */
.al-ventajas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.al-chip {
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: .2rem .55rem; border-radius: 99px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.08);
}

/* Botón del aviso de estreno: sólido, para que se vea que se puede pulsar.
   En hueco se confundía con el fondo amarillo y no invitaba a nada. */
/* Mismo degradado que el botón "Tu plan" del menú, y a propósito: este botón
   es el que LLEVA a Tu plan, así que compartir decoración le dice al ojo
   adónde va. Se probó antes poner el degradado solo en la palabra "Pro": no
   vale, porque el degradado arranca en el mismo morado del botón y la palabra
   desaparecía. Va sin el brillo que sí lleva "Tu plan": aquel es un botón del
   menú que se mira de reojo, y este está encima de la lista de reseñas, donde
   algo parpadeando acaba molestando mientras se trabaja. */
.al-caja.al-pronto .btn-estreno {
  background: var(--gradient-brand); color: #FFFFFF; border: 1px solid transparent;
  box-shadow: 0 3px 12px rgba(75, 49, 211, .3);
}
.al-caja.al-pronto .btn-estreno:hover { transform: translateY(-1px); filter: brightness(1.07); }

@media (max-width: 640px) { .al-acciones { flex: 1 1 100%; } }

/* Mapa de orígenes de la pantalla Importar. Cuatro tarjetas planas: no son
   botones que hagan nada, son un índice de lo que hay más abajo, para que el
   cliente sepa de un vistazo que su plataforma está cubierta. */
.rejilla-origenes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem; margin-top: 1rem;
}
.origen {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .85rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.origen:hover { border-color: var(--accent); transform: translateY(-1px); }
.origen .ico { font-size: 1.35rem; line-height: 1; margin-bottom: .2rem; }
.origen strong { font-size: .92rem; }
.origen .muted { font-size: .78rem; }

/* La nota de "ninguna plataforma se queda fuera". Los nombres en negrita
   hacen el trabajo: el cliente busca el suyo con la vista y lo encuentra. */
.nota-plataformas {
  margin-top: 1.1rem; padding: .95rem 1.1rem;
  background: var(--accent-soft); border-radius: var(--radius-m);
  display: flex; flex-direction: column; gap: .5rem;
}
.nota-plataformas p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--accent-ink); }
.nota-plataformas .lista-plataformas { font-size: .86rem; line-height: 1.9; }
.nota-plataformas .lista-plataformas strong { white-space: nowrap; }
.nota-plataformas .muted { color: var(--accent-ink); opacity: .8; }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-ink);
}
.badge-demo {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #2A2320; color: #F4EDE6; border: 1px solid #4A3F36;
  padding: .5rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.badge-demo::before { content: "⚠️"; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface); color: var(--ink);
  transition: border-color .2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%;
  border: 2px solid var(--line); cursor: pointer; background: none;
}
.field input[type="color"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.field input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.star-picker { display: flex; gap: .3rem; font-size: 1.6rem; }
.star-picker button { line-height: 1; color: var(--line); transition: color .15s var(--ease-out), transform .15s var(--ease-out); }
.star-picker button:hover { transform: scale(1.08); }
.color-swatch {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--line);
  cursor: pointer; padding: 0; transition: transform .15s var(--ease-out), border-color .15s var(--ease-out);
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; cursor: pointer;
  transition: border-color .15s var(--ease-out), color .15s var(--ease-out);
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); font-weight: 700; }
.forma-swatch {
  width: 2.7rem; height: 2.1rem; border: 2px solid var(--line); background: var(--surface);
  cursor: pointer; padding: 0; transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.forma-swatch:hover { transform: scale(1.05); }
.forma-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* ── Muestras de pago: se ven EN COLOR, pero no se pueden elegir ────────
   Rafael, 12/09/2026: «quiero que se vea los colores originales del diseño
   pero que sigan siendo no elegibles y que mantengan lo de pro».
   Apagar en gris un botón cuyo único contenido ES un color no enseña nada:
   el cliente no puede ver lo que se está perdiendo. Así que el color se
   queda tal cual y el candado se cuenta de otra manera: filo de puntos,
   cursor de prohibido y, al pulsarlo, un aviso de que eso es de Pro. */
/* Las muestras redondas y las de forma llevan el aro de puntos POR FUERA,
   sin tocarles el filo: el filo de la muestra de color forma parte de lo
   que hay que enseñar. El aro va en morado, el mismo de la chapa de Pro,
   para que se lea de un vistazo que las dos cosas hablan de lo mismo. */
.forma-swatch.is-disabled, .color-swatch.is-disabled {
  cursor: not-allowed;
  outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}
.forma-swatch.is-disabled:hover, .color-swatch.is-disabled:hover {
  transform: none; border-color: var(--line);
}
/* En las pastillas de texto el filo no enseña nada, así que ahí sí se pone
   de puntos directamente. */
.chip.is-disabled {
  cursor: not-allowed; border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.chip.is-disabled:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink-soft);
}
.plantilla-widget {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-m);
  padding: .8rem .6rem; cursor: pointer; transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.plantilla-widget:hover { transform: translateY(-2px); border-color: var(--accent); }
.plantilla-widget-muestra { width: 100%; height: 2.6rem; display: block; }
.plantilla-widget-nombre { font-size: .8rem; font-weight: 600; text-align: center; }
.plantilla-widget.is-disabled {
  cursor: not-allowed; border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.plantilla-widget.is-disabled:hover {
  transform: none; border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.field-error { font-size: .82rem; color: #A8453B; min-height: 1.2em; }
.form-msg { font-size: .88rem; padding: .7rem .9rem; border-radius: var(--radius-s); }
.form-msg-error { background: #FBEAE7; color: #8A2F26; }
.form-msg-ok { background: #E6F2EC; color: var(--success); }

.stars { color: var(--gold); letter-spacing: .1em; }

/* =============================================================
   6. Sections — nav
   ============================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.logo { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); font-weight: 600; display: flex; align-items: center; }
.logo span { color: var(--accent); }
.logo-img { height: 1.9rem; width: auto; display: block; }
.nav-links { display: none; gap: 2rem; font-weight: 600; font-size: .92rem; }
.nav-cta { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 720px) { .nav-links { display: flex; } }

/* hero */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 6vw, 4rem); overflow: visible; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }
.hero-copy { display: flex; flex-direction: column; gap: 1.3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.hero-note { font-size: .85rem; color: var(--muted); }

.hero-visual { position: relative; padding: 2rem 1rem 2.5rem; }
.hero-visual-label {
  display: block; text-align: center; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.2rem;
}
.hero-aurora {
  position: absolute; inset: -10% 5%; z-index: 0;
  background: var(--gradient-brand); filter: blur(70px); opacity: .32;
  border-radius: 50%; pointer-events: none;
}
.hero-stack { position: relative; z-index: 1; max-width: 380px; margin-inline: auto; }
.card-float { transition: transform .35s var(--ease-out); }
.card-float--back {
  position: absolute; top: -1.4rem; right: -1.2rem; width: 82%;
  transform: rotate(-5deg); opacity: .92; z-index: 0;
}
.card-float--front { position: relative; transform: rotate(2deg); z-index: 1; }
.hero-stack:hover .card-float--front { transform: rotate(0deg) translateY(-4px); }
.hero-stack:hover .card-float--back { transform: rotate(-7deg) translateY(2px); }
.stat-chip {
  position: absolute; left: -1rem; bottom: -1.2rem; z-index: 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .6rem 1rem; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700;
  font-family: var(--font-sans);
}
.stat-chip .stars { font-size: .82rem; }
@media (max-width: 480px) {
  .card-float--back { right: -.4rem; }
  .stat-chip { left: -.4rem; }
}

/* example widget preview */
.preview-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 1.75rem; box-shadow: var(--shadow); position: relative;
}
.preview-tag {
  position: absolute; top: -.75rem; left: 1.5rem;
  background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
}
.preview-quote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; margin-block: .9rem; }
.preview-person { display: flex; align-items: center; gap: .75rem; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-ink); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display); flex-shrink: 0;
}
.preview-person-name { font-weight: 700; font-size: .92rem; }
.preview-person-role { font-size: .82rem; color: var(--muted); }

/* pasos */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head { max-width: 640px; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: .8rem; }
.steps { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step-num {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent);
  color: #FBF3EF; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; margin-bottom: 1rem;
}

/* pricing */
.pricing-grid { display: grid; gap: 1.5rem; max-width: 1040px; margin-inline: auto; }
@media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 780px; } }
@media (min-width: 920px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); max-width: 1040px; } }
.plan-card { display: flex; flex-direction: column; gap: 1.1rem; }
.plan-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-name { font-weight: 700; font-size: 1.05rem; }
.plan-price { font-family: var(--font-display); font-size: 2.4rem; display: flex; align-items: baseline; gap: .35rem; }
.plan-price small { font-family: var(--font-sans); font-size: .95rem; font-weight: 600; color: var(--muted); }
.plan-price-wrap { display: flex; flex-direction: column; gap: .45rem; }
.badge-save {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--status-aprobado-bg); color: var(--status-aprobado-ink);
}
.plan-includes { display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; }
.plan-includes li { display: flex; gap: .55rem; align-items: flex-start; }
.plan-includes li::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* faq */
.faq-list { display: flex; flex-direction: column; gap: .8rem; max-width: 720px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.3rem; font-weight: 700; text-align: left;
}
.faq-q::after { content: "+"; font-size: 1.3rem; color: var(--accent); transition: transform .2s var(--ease-out); }
.faq-item[data-open="true"] .faq-q::after { transform: rotate(45deg); }
.faq-a { padding: 0 1.3rem 1.1rem; color: var(--ink-soft); font-size: .94rem; display: none; }
.faq-item[data-open="true"] .faq-a { display: block; }

/* footer */
.footer { border-top: 1px solid var(--line); padding-block: 2.5rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; font-size: .88rem; }
.footer-links a:hover { color: var(--accent); }

/* =============================================================
   7. App shell (app.html / cuenta.html)
   ============================================================= */
.app-topbar {
  position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--line);
}
.app-topbar-row { display: flex; align-items: center; justify-content: space-between; padding-block: .9rem; }
.app-topbar-right { display: flex; align-items: center; gap: 1rem; }
.pill {
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: .85rem;
  padding: .4rem .8rem; border-radius: 999px;
}
.account-menu { position: relative; }
.account-menu-btn {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent);
  color: #FBF3EF; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.account-menu-drop {
  position: absolute; right: 0; top: calc(100% + .6rem); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow);
  min-width: 180px; padding: .5rem; display: none;
}
.account-menu[data-open="true"] .account-menu-drop { display: block; }
.account-menu-drop a, .account-menu-drop button {
  display: block; width: 100%; text-align: left; padding: .6rem .7rem; border-radius: var(--radius-s); font-size: .9rem;
}
.account-menu-drop a:hover, .account-menu-drop button:hover { background: var(--paper); }

/* selector de espacios (plan Agencia) — reutiliza el patrón de .account-menu */
.espacio-switch-btn {
  display: flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: .85rem; max-width: 180px;
}
.espacio-switch-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espacio-switch-drop { min-width: 240px; max-height: 320px; overflow-y: auto; }
.espacio-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left; padding: .55rem .7rem; border-radius: var(--radius-s); font-size: .88rem;
}
.espacio-item:hover { background: var(--paper); }
.espacio-item[data-active="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.espacio-item-borrar { color: var(--status-rechazado-ink); font-size: .82rem; padding: .2rem .4rem; flex-shrink: 0; }
.espacio-menu-sep { border-top: 1px solid var(--line); margin: .4rem 0; }

.app-main { padding-block: clamp(2.5rem, 6vw, 4rem); min-height: 60vh; }
.empty-state {
  border: 1px dashed var(--line); border-radius: var(--radius-l); padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 560px; margin-inline: auto;
}
.empty-state-icon { font-size: 2.2rem; }

.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem;
}
.auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 1.3rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-switch { font-size: .9rem; text-align: center; }
.auth-switch a { color: var(--accent-ink); font-weight: 700; }

.account-block { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; }
.account-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .3rem; }
.history-list { display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; }
.history-item { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line); }

/* panel — compartir enlaces */
.copy-row { display: flex; gap: .6rem; margin-top: .5rem; }
.copy-row input {
  flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--paper); color: var(--muted);
  font: inherit; font-size: .85rem;
}
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--accent); }
details[open] > summary::before { content: "▾ "; }

/* panel — filtros */
.filter-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter-tab {
  padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  border: 1px solid var(--line); color: var(--muted);
}
.filter-tab[data-active="true"] { background: var(--accent); border-color: var(--accent); color: #FBF3EF; }
/* Filtro por estrellas. El número de cada nota se ve sin tener que filtrar:
   de un vistazo sabes cuántos 1 estrella tienes hoy. */
.ft-estrellas { color: var(--gold); letter-spacing: .06em; }
.filter-tab[data-active="true"] .ft-estrellas { color: #FBF3EF; }
.ft-cuenta {
  display: inline-block; min-width: 1.4em; text-align: center;
  margin-left: .15rem; padding: .05rem .4rem; border-radius: 999px;
  background: var(--line); color: var(--muted);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.filter-tab[data-active="true"] .ft-cuenta { background: rgba(255, 255, 255, .24); color: #FBF3EF; }
/* Una nota sin reseñas se apaga: pulsarla solo llevaría a una lista vacía. */
.filter-tab[data-vacio="true"]:not([data-active="true"]) { opacity: .42; cursor: default; }

/* Los desplegables de ordenar y de contenido. Con la misma forma de píldora
   que los filtros de al lado, para que la fila se lea como una sola cosa.
   Se deja la flechita nativa del navegador a propósito: dibujar una propia
   obliga a meterla como imagen de fondo, y una imagen de fondo no cambia de
   color con el tema — en modo noche quedaría una flecha negra invisible. */
.filtros-orden { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.select-filtro {
  font: inherit; font-size: .85rem; font-weight: 700;
  padding: .35rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer; max-width: 100%;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.select-filtro:hover { color: var(--ink); }
/* En morado cuando hay algo puesto: si no, es fácil dejarse "Con vídeo"
   filtrando y pensar que han desaparecido las reseñas. */
.select-filtro[data-activo="true"] { border-color: var(--accent); color: var(--accent); }
.select-filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 720px) {
  .filtros-orden { margin-left: 0; width: 100%; }
  .select-filtro { flex: 1 1 auto; }
}

/* Barra de la prueba gratis. Todo con el prefijo pr- : en una hoja de estilos
   compartida, un nombre genérico como .barra o .aviso hereda cosas de otro
   sitio y acaba midiendo mil píxeles de alto. Ya pasó una vez. */
.pr-barra {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; border-radius: var(--radius-m);
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent-ink);
}
.pr-texto { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 260px; min-width: 0; }
.pr-texto strong { font-size: .95rem; }
.pr-texto span { font-size: .85rem; opacity: .85; }
.pr-barra .btn { flex: 0 0 auto; }
/* Los dos últimos días cambia de tono: un aviso que se ve igual los siete
   días se deja de mirar el segundo. */
.pr-urgente { background: var(--status-pendiente-bg); border-color: var(--gold); color: var(--status-pendiente-ink); }
/* Y cuando ya se acabó, deja de ser un aviso y pasa a ser una explicación. */
.pr-fin { background: var(--paper); border-color: var(--line); color: var(--ink); }

/* Compra verificada. En morado y no en verde: el verde ya lo lleva "Aprobado",
   y dos píldoras verdes pegadas no se distinguen de un vistazo. */
.pill-verificada {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}

/* Aviso de que el texto y la nota no dicen lo mismo. Ámbar y no rojo: es una
   sugerencia de lectura, no un error — lo detecta una lista de palabras y
   puede equivocarse.

   Usa los tonos de "pendiente", que ya existen en los tres temas (claro,
   oscuro y el que elige el sistema). Poner un ámbar a mano habría quedado
   como una pegatina clara sobre una tarjeta oscura en cuanto alguien pusiera
   el modo noche. */
.aviso-tono {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--status-pendiente-bg); color: var(--status-pendiente-ink);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}

/* panel — lista de testimonios */
.testimonio-item {
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
  padding: 1.3rem; display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem;
}
/* Cuando se llega desde "Editar comentario en Loalia" (el botón del plugin de
   Shopify), la reseña buscada tiene que cantar: con sesenta reseñas en pantalla,
   si no, no hay forma de saber a cuál te ha traído el enlace.

   Tres cosas a la vez, y las tres hacen falta:
     - el borde late en morado suave, para localizarla de un vistazo;
     - la tarjeta queda CENTRADA en la pantalla (eso lo hace el JavaScript);
     - y su botón Editar parpadea, que es lo que se ha venido a hacer.
   Dura unos segundos y se apaga sola: un resaltado permanente cansa. */
.testimonio-resaltado {
  border-color: var(--accent);
  animation: resaltar-resena 7s var(--ease-out);
  position: relative;
  z-index: 1;
}
@keyframes resaltar-resena {
  0%   { box-shadow: 0 0 0 0 rgba(139, 110, 240, 0);   background: var(--accent-soft); }
  12%  { box-shadow: 0 0 0 6px rgba(139, 110, 240, .38); background: var(--accent-soft); }
  34%  { box-shadow: 0 0 0 2px rgba(139, 110, 240, .22); background: var(--accent-soft); }
  56%  { box-shadow: 0 0 0 6px rgba(139, 110, 240, .38); background: var(--accent-soft); }
  78%  { box-shadow: 0 0 0 2px rgba(139, 110, 240, .22); background: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 rgba(139, 110, 240, 0);   background: var(--surface); }
}

/* El botón Editar de ESA reseña, para que se vea qué hay que pulsar. */
.boton-resaltado {
  animation: latir-editar 7s var(--ease-out);
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 700;
}
@keyframes latir-editar {
  0%, 100% { background: transparent;         box-shadow: 0 0 0 0 rgba(139,110,240,0); }
  15%      { background: var(--accent-soft);  box-shadow: 0 0 0 5px rgba(139,110,240,.30); }
  30%      { background: transparent;         box-shadow: 0 0 0 0 rgba(139,110,240,0); }
  45%      { background: var(--accent-soft);  box-shadow: 0 0 0 5px rgba(139,110,240,.30); }
  60%      { background: transparent;         box-shadow: 0 0 0 0 rgba(139,110,240,0); }
  75%      { background: var(--accent-soft);  box-shadow: 0 0 0 5px rgba(139,110,240,.30); }
}

/* Quien tenga el sistema puesto en "menos animaciones" no ve el parpadeo,
   pero sí dónde está la reseña: se le deja el borde y el fondo fijos. */
@media (prefers-reduced-motion: reduce) {
  .testimonio-resaltado {
    animation: none;
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(139, 110, 240, .3);
  }
  .boton-resaltado { animation: none; background: var(--accent-soft); }
}

/* ── Cómo se ve la lista de testimonios ────────────────────────────────
   Cuatro formas, porque con sesenta reseñas la de por defecto cansa:
     cómodo   — la de siempre, todo a la vista
     compacto — la foto en pequeño al lado, el texto recortado
     rejilla  — en columnas, para ver muchas de un vistazo
     lista    — una línea por reseña, para moderar a toda velocidad
   Todo se hace con estilos sobre el MISMO HTML: la tarjeta se dibuja una
   sola vez y no hay cuatro versiones que puedan acabar distintas. */
/* La foto de perfil dentro del diálogo de editar: círculo grande, y debajo
   los botones de cambiarla o quitarla. */
.editar-foto { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.editar-foto-previa {
  width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--paper); border: 1px solid var(--line);
  color: var(--accent); font-weight: 700; font-size: 1.3rem;
}
.editar-foto-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Ver más" — solo aparece en las reseñas que se han quedado cortadas. Nace
   escondido y lo enciende revisarVerMas() después de medirlas. */
.ver-mas {
  display: none; align-self: flex-start;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.ver-mas[data-visible="true"] { display: inline-block; }
.ver-mas:hover { text-decoration: underline; }
.ver-mas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Abierta: se quita el recorte. Gana a las reglas de compacto y de rejilla
   porque lleva un atributo más. */
[data-lista-testimonios] .testimonio-item[data-texto-abierto="true"] .testimonio-texto {
  display: block; overflow: visible; white-space: normal;
  -webkit-line-clamp: unset; -webkit-box-orient: horizontal;
}

.selector-vista { display: inline-flex; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); }
.selector-vista button {
  width: 2.1rem; height: 1.9rem; border: 0; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.selector-vista button:hover { color: var(--ink); }
.selector-vista button[data-active="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.selector-vista button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Compacto ── */
[data-lista-testimonios][data-modo="compacto"] .testimonio-item { padding: .9rem 1rem; gap: .45rem; }
[data-lista-testimonios][data-modo="compacto"] img[src*="foto_ver"],
[data-lista-testimonios][data-modo="compacto"] video { max-width: 110px !important; float: left; margin: 0 .8rem .4rem 0 !important; }
[data-lista-testimonios][data-modo="compacto"] .testimonio-texto {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
[data-lista-testimonios][data-modo="compacto"] .testimonio-ia,
[data-lista-testimonios][data-modo="compacto"] .ia-bloque { display: none !important; }

/* ── Rejilla ── */
[data-lista-testimonios][data-modo="rejilla"] { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px)  { [data-lista-testimonios][data-modo="rejilla"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { [data-lista-testimonios][data-modo="rejilla"] { grid-template-columns: repeat(3, 1fr); } }
[data-lista-testimonios][data-modo="rejilla"] .testimonio-item { margin-bottom: 0; padding: 1rem; }
[data-lista-testimonios][data-modo="rejilla"] img[src*="foto_ver"],
[data-lista-testimonios][data-modo="rejilla"] video { max-width: 100% !important; max-height: 170px; object-fit: cover; }
[data-lista-testimonios][data-modo="rejilla"] .testimonio-texto {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.testimonio-ia > .btn { align-self: flex-start; }

/* 15/09/2026: en rejilla ya NO se esconden los botones de IA. Estaban
   escondidos en tres de las cuatro vistas, así que transcribir un vídeo o
   sacar la frase gancho —que son de pago— solo existía si acertabas con la
   vista "Cómodo", y en ningún sitio ponía que hubiera que cambiarla. En
   rejilla caben de sobra. En "compacto" y "lista" siguen escondidos: esas
   dos vistas son para moderar deprisa y ahí sí estorban. */

/* ── Lista ──
   Una línea por reseña, para moderar deprisa.

   El fallo que había: la tarjeta se dibuja como «nombre y estado juntos en una
   cajita» (.testimonio-head). Al ponerla en fila le di un ancho máximo, y como
   dentro caben hasta cuatro distintivos, se salían de la caja y caían encima de
   las estrellas y de la foto. Medido: la caja acababa en 227 píxeles y el
   distintivo «Aprobado» llegaba hasta 311.

   La solución no es apretar más la caja, es quitarla: con `display: contents`
   la cajita desaparece a efectos de colocación y su contenido pasa a ser una
   pieza más de la fila, al lado de las estrellas y del texto. Así nada puede
   desbordarse encima de nada: cada pieza ocupa su hueco y el que cede espacio
   cuando falta es el texto, que es el que puede permitírselo. */
[data-lista-testimonios][data-modo="lista"] .testimonio-item {
  flex-direction: row; align-items: center; flex-wrap: nowrap;
  padding: .5rem .8rem; gap: .7rem; margin-bottom: .4rem; border-radius: var(--radius-s);
}
/* La cajita del nombre deja de existir: sus hijos se colocan en la fila. */
[data-lista-testimonios][data-modo="lista"] .testimonio-head { display: contents; }
[data-lista-testimonios][data-modo="lista"] .testimonio-head > div {
  flex: 0 1 auto; min-width: 0; max-width: 190px;
}
[data-lista-testimonios][data-modo="lista"] .testimonio-avatar {
  width: 24px; height: 24px; font-size: .65rem;
}
[data-lista-testimonios][data-modo="lista"] .quien-largo { display: none; }
[data-lista-testimonios][data-modo="lista"] .quien-corto { display: inline; }
[data-lista-testimonios][data-modo="lista"] .testimonio-quien {
  font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* De los distintivos se queda el del estado, que es lo que se mira al moderar.
   El del ánimo y el de «Importado» se ven en las otras tres formas: en una
   sola línea le robarían el sitio al texto de la reseña. */
[data-lista-testimonios][data-modo="lista"] .testimonio-head .status-pill { flex: 0 0 auto; }
[data-lista-testimonios][data-modo="lista"] .testimonio-head .status-pill:not(.status-aprobado):not(.status-pendiente):not(.status-rechazado) { display: none; }
[data-lista-testimonios][data-modo="lista"] .stars { flex: 0 0 auto; font-size: .8rem; }
[data-lista-testimonios][data-modo="lista"] img[src*="foto_ver"],
[data-lista-testimonios][data-modo="lista"] video {
  width: 38px !important; height: 38px; max-width: 38px !important;
  object-fit: cover; float: none; flex: 0 0 auto; margin: 0 !important; border-radius: 8px;
}
/* El texto es la única pieza que cede sitio cuando falta: todo lo demás ocupa
   lo suyo y él se queda con lo que sobra. */
[data-lista-testimonios][data-modo="lista"] .testimonio-texto {
  flex: 1 1 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .85rem; margin: 0; color: var(--muted);
}
[data-lista-testimonios][data-modo="lista"] .testimonio-meta {
  flex: 0 0 auto; margin-left: auto; border: 0; padding: 0; margin-top: 0; flex-wrap: nowrap;
}
/* Cuando la pantalla no da para todo, se va soltando lo menos importante antes
   que dejar el texto de la reseña en tres puntos suspensivos: primero la fecha,
   después las estrellas. Lo que nunca se quita es el nombre, el estado y el
   texto, que es lo que se mira al moderar. */
@media (max-width: 1100px) {
  [data-lista-testimonios][data-modo="lista"] .testimonio-meta > span:first-child { display: none; }
}
@media (max-width: 900px) {
  [data-lista-testimonios][data-modo="lista"] .stars { display: none; }
}
/* Estos tres llevan `display:flex` escrito dentro del propio HTML, y un estilo
   escrito ahí gana siempre a la hoja de estilos. Por eso hace falta el
   `!important`: sin él seguían apareciendo y rompían la fila. */
[data-lista-testimonios][data-modo="lista"] .pill-verificada,
[data-lista-testimonios][data-modo="lista"] .aviso-tono,
[data-lista-testimonios][data-modo="lista"] .ver-mas,
[data-lista-testimonios][data-modo="lista"] .testimonio-ia,
[data-lista-testimonios][data-modo="lista"] .testimonio-etiquetas,
[data-lista-testimonios][data-modo="lista"] .loalia-respuesta-panel,
[data-lista-testimonios][data-modo="lista"] .ia-bloque,
[data-lista-testimonios][data-modo="lista"] .caja-responder { display: none !important; }

/* ...salvo en la reseña cuyo «⋯ Más» está abierto: esa despliega su bloque de
   IA entero, con los botones Y lo que generen. Así los botones de IA existen en
   esta vista (antes solo en «Cómodo») sin que la lista deje de ser una línea
   por reseña, que es para lo que sirve. (15/09/2026) */
[data-lista-testimonios][data-modo="lista"] .testimonio-item.mas-abierto {
  flex-wrap: wrap;                 /* para que el bloque se vaya a su propio renglón */
  align-items: flex-start;
}
[data-lista-testimonios][data-modo="lista"] .testimonio-item.mas-abierto .testimonio-ia {
  display: flex !important;
  flex-basis: 100%;                /* debajo de la línea, no en medio de ella */
  order: 99;                       /* y siempre el último */
  align-items: flex-start;
  margin-top: .5rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
}
[data-lista-testimonios][data-modo="lista"] .testimonio-item.mas-abierto .ia-bloque { display: block !important; }

/* En lista se dejan a la vista las acciones que se usan al moderar deprisa. El
   resto no desaparece: está en el botón «⋯ Más» de aquí abajo. Antes esto se
   hacía con una lista de excepciones, que además se dejaba fuera el enlace
   «Ver captura» por ser un <a> y no un <button>. */
[data-lista-testimonios][data-modo="lista"] .testimonio-acciones .btn { padding: .3rem .6rem; font-size: .78rem; }
/* El desplegable de "⋯ Más". Las acciones que no caben en la línea siguen
   estando, a un clic, en vez de desaparecer sin más. */
[data-lista-testimonios][data-modo="lista"] .testimonio-acciones { position: relative; }
[data-lista-testimonios][data-modo="lista"] .btn-mas { display: inline-flex; }
[data-lista-testimonios][data-modo="lista"] .acciones-extra { display: none; }
[data-lista-testimonios][data-modo="lista"] .acciones-extra.abierta {
  display: flex; flex-direction: column; align-items: stretch; gap: .25rem;
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  min-width: 230px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: 0 12px 30px rgba(20, 26, 38, .16);
}
[data-lista-testimonios][data-modo="lista"] .acciones-extra.abierta .btn {
  justify-content: flex-start;
  width: 100%; text-align: left; padding: .45rem .6rem; white-space: nowrap;
}

.testimonio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
/* La foto de quien opinó, junto a su nombre. Si no hay foto, el mismo círculo
   con sus iniciales: así todas las fichas tienen la misma forma y la lista no
   baila según quién puso foto y quién no. */
.testimonio-persona { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.testimonio-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--paper); border: 1px solid var(--line);
  color: var(--accent); font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.testimonio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Del nombre hay dos versiones en el HTML. Por defecto se ve la larga; en
   el modo lista se cambia a la corta ("Rafael O."). */
.quien-corto { display: none; }
.testimonio-quien { font-weight: 700; font-size: .95rem; }
.testimonio-cargo { font-size: .82rem; color: var(--muted); }
.testimonio-texto { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; }
.testimonio-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .78rem; color: var(--muted); }
.testimonio-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
/* El grupo de acciones "de menos uso". Por defecto es transparente: sus
   botones se colocan en la fila como si el grupo no existiera, así que en las
   vistas normales no se nota ningún cambio. En el modo lista se convierte en
   un desplegable. */
.acciones-extra { display: contents; }
.btn-mas { display: none; }
.btn-sm { padding: .45rem .8rem; font-size: .82rem; }
.status-pill { padding: .25rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.status-pendiente { background: var(--status-pendiente-bg); color: var(--status-pendiente-ink); }
.status-aprobado { background: var(--status-aprobado-bg); color: var(--status-aprobado-ink); }
.status-rechazado { background: var(--status-rechazado-bg); color: var(--status-rechazado-ink); }

.ia-bloque { background: var(--accent-soft); border-radius: var(--radius-s); padding: .7rem .85rem; }
.ia-bloque p { font-size: .86rem; color: var(--ink-soft); margin-top: .35rem; white-space: pre-line; }
.ia-etiqueta { font-size: .74rem; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .03em; }

/* modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 16, 13, .55); z-index: 900;
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay[data-open="true"] { display: flex; }
.modal {
  /* position:relative es obligatorio aquí, no decorativo: sin él, la X de
     cerrar (que va "arriba a la derecha" en posición absoluta) se coloca
     respecto a la CAPA de fondo, o sea respecto a la pantalla entera, y acaba
     en la esquina del navegador a medio metro del cuadro. Con esto se queda
     dentro del recuadro blanco, que es donde la busca cualquiera. */
  position: relative;
  background: var(--surface); border-radius: var(--radius-l); padding: 2rem; max-width: 420px; width: 100%;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1.1rem; max-height: 90vh; overflow-y: auto;
}

/* La X de cerrar. Antes era un botón fantasma que apenas se veía; ahora es un
   círculo con fondo propio, para que se distinga sobre cualquier contenido. */
.modal-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem; line-height: 1;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
  z-index: 2;
}
.modal-close:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* El cuadro de editar una reseña es el que más se usa y el que más texto
   lleva: 420 píxeles obligaban a escribir por una rendija. */
.modal-ancho { max-width: 720px; }
.modal-ancho textarea { min-height: 190px; resize: vertical; }
.fake-card {
  border: 1px dashed var(--line); border-radius: var(--radius-s); padding: .9rem;
  font-family: var(--font-sans); letter-spacing: .08em; color: var(--muted); font-size: .95rem;
}
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 950; display: flex; flex-direction: column; gap: .6rem; }
.toast {
  background: var(--ink); color: var(--paper); padding: .8rem 1.1rem; border-radius: var(--radius-s);
  font-size: .88rem; box-shadow: var(--shadow); max-width: 320px;
}
.toast-error { background: #8A2F26; }
.toast-ok { background: var(--success); }

.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2000;
  max-width: 480px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  font-size: .88rem; color: var(--ink-soft);
}
.cookie-banner a { color: var(--accent-ink); font-weight: 600; }
.cookie-banner-botones { display: flex; gap: .6rem; justify-content: flex-end; }

/* =============================================================
   8. Visor 360° (regalo QR físico)
   ============================================================= */
.visor360 {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1;
  border-radius: var(--radius-m); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--line) 22%, var(--surface));
  overflow: hidden;
}
.visor360-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; height: 100%; padding: 1.5rem; text-align: center;
  color: var(--muted); font-size: .85rem;
}
.visor360-placeholder-icon { font-size: 1.6rem; }
.visor360-stage {
  position: relative; width: 100%; height: 100%; cursor: grab;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.visor360-stage:active, .visor360-stage.is-dragging { cursor: grabbing; }
.visor360-frame {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  display: block; background: var(--surface);
}
.visor360-hint {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  font-size: .74rem; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line);
  pointer-events: none; transition: opacity .3s var(--ease-out); white-space: nowrap;
}
.visor360-stage.is-dragging .visor360-hint { opacity: 0; }
.visor360-controls {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 .5rem; pointer-events: none;
}
.visor360-btn {
  pointer-events: auto; width: 2.1rem; height: 2.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s var(--ease-out), background .15s var(--ease-out);
}
.visor360-btn:hover { transform: scale(1.08); background: var(--surface); }
.visor360-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =============================================================
   8b. Megabar — mega-menu de navegación (cabecera oscura tipo Senja)
   ============================================================= */
.megabar {
  --mb-bg: #100E22;
  --mb-surface: #17142E;
  --mb-line: rgba(255,255,255,.09);
  --mb-ink: #F4F2FB;
  --mb-muted: #9C97BE;
  --mb-accent: #B49CFF;
  --mb-soon-ink: #706C90;
  position: sticky; top: 0; z-index: 300;
  background: var(--mb-bg);
  color: var(--mb-ink);
}
.megabar-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: .8rem; }
.megabar-logo { display: flex; align-items: center; }
.megabar-logo .logo-img { height: 1.9rem; width: auto; display: block; }

.megabar-burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer; border-radius: 8px; flex-shrink: 0;
}
.megabar-burger:hover { background: rgba(255,255,255,.06); }
.megabar-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--mb-ink); transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }
.megabar[data-mobile-open="true"] .megabar-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.megabar[data-mobile-open="true"] .megabar-burger span:nth-child(2) { opacity: 0; }
.megabar[data-mobile-open="true"] .megabar-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.megabar-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 250;
  background: var(--mb-surface); max-height: 85vh; overflow-y: auto; padding: .5rem 1.1rem 2rem;
  border-top: 1px solid var(--mb-line);
}
.megabar[data-mobile-open="true"] .megabar-nav { display: block; }

.megabar-toplink {
  display: block; padding: .85rem .3rem; font-weight: 600; font-size: .98rem; color: var(--mb-ink);
  border-bottom: 1px solid var(--mb-line);
}

.megabar-item { border-bottom: 1px solid var(--mb-line); }
.megabar-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .85rem .3rem; background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .98rem; color: var(--mb-ink); text-align: left;
}
.megabar-chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--mb-muted); transition: transform .2s var(--ease-out); }
.megabar-trigger[aria-expanded="true"] .megabar-chev { transform: rotate(180deg); }

.megabar-panel {
  max-height: 0; overflow: hidden; transition: max-height .25s var(--ease-out);
}
.megabar-item[data-open="true"] .megabar-panel { max-height: 2000px; }
.megabar-panel-inner { padding: .2rem .3rem 1.1rem; display: flex; flex-direction: column; gap: 1.3rem; }

.megabar-group-head { display: flex; gap: .65rem; margin-bottom: .55rem; }
.megabar-group-icon {
  width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mb-accent);
}
.megabar-group-icon svg { width: 17px; height: 17px; }
.megabar-group-title { font-weight: 700; font-size: .88rem; color: var(--mb-ink); }
.megabar-group-desc { font-size: .78rem; color: var(--mb-muted); margin-top: .15rem; line-height: 1.4; }

.megabar-sublist { display: flex; flex-direction: column; gap: .1rem; }
.megabar-sublink, .megabar-soon {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .4rem; border-radius: 9px;
  font-size: .87rem; font-weight: 600;
}
.megabar-sublink { color: var(--mb-ink); }
.megabar-sublink:hover { background: rgba(255,255,255,.07); color: var(--mb-accent); }
.megabar-soon { color: var(--mb-soon-ink); cursor: default; }
.megabar-sub-icon {
  width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit;
}
.megabar-sub-icon svg { width: 14px; height: 14px; }
.megabar-soon-tag {
  margin-left: auto; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.06); color: var(--mb-soon-ink); padding: .18rem .42rem; border-radius: 99px;
  white-space: nowrap;
}

.megabar-panel-footer { padding-top: .2rem; }
.megabar-panel-footer .megabar-sublink { font-weight: 700; }

.megabar-mobile-cta { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.2rem; }
.megabar-mobile-cta .btn { width: 100%; }
.megabar-login {
  background: none; border: 1px solid var(--mb-line); color: var(--mb-ink); font-weight: 700;
  font-size: .92rem; cursor: pointer; padding: .75rem 1rem; border-radius: var(--radius-s);
}

.megabar-cta { display: none; align-items: center; gap: .6rem; }
.megabar-cta .megabar-login { padding: .6rem .85rem; border: none; }
.megabar-cta .megabar-login:hover { background: rgba(255,255,255,.07); }
.megabar-cta .btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: none; }
.megabar-cta .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(75,49,211,.35); }

@media (min-width: 960px) {
  .megabar-burger { display: none; }
  .megabar-cta { display: flex; }
  .megabar-mobile-cta { display: none; }
  .megabar-nav {
    display: flex; position: static; inset: auto; align-items: center; gap: .1rem;
    background: none; border-top: none; overflow: visible; padding: 0; flex: 1; justify-content: center;
  }
  .megabar-toplink { border-bottom: none; padding: .6rem .8rem; border-radius: 8px; }
  .megabar-toplink:hover { background: rgba(255,255,255,.07); }
  .megabar-item { position: relative; border-bottom: none; }
  .megabar-trigger { padding: .6rem .8rem; border-radius: 8px; width: auto; }
  .megabar-trigger:hover, .megabar-trigger[aria-expanded="true"] { background: rgba(255,255,255,.07); }
  .megabar-panel {
    position: absolute; top: calc(100% + .8rem); left: 0; width: 300px;
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    max-height: none; overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
    transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
  }
  .megabar-item[data-open="true"] .megabar-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .megabar-item--right .megabar-panel { left: auto; right: 0; }
  .megabar-panel--wide { width: 660px; }
  .megabar-panel-inner { padding: 1.3rem; flex-direction: row; gap: 0; }
  .megabar-panel--wide .megabar-panel-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .megabar-panel:not(.megabar-panel--wide) .megabar-panel-inner { flex-direction: column; gap: 0; }
  .megabar-panel-footer { border-top: 1px solid var(--mb-line); margin-top: .2rem; padding-top: .9rem; grid-column: 1 / -1; }
}

/* =============================================================
   9. Responsive helpers
   ============================================================= */
@media (min-width: 540px) {}
@media (min-width: 720px) {}
@media (min-width: 960px) {}
@media (min-width: 1280px) {}

/* =============================================================
   10. Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Panel con barra lateral tipo Senja (app.html)
   ============================================================ */
.panel-layout { display:flex; min-height:100vh; background:var(--paper); }
.panel-sidebar {
  width:232px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:.9rem .7rem; gap:.4rem; z-index:50;
}
.sidebar-usuario { position:relative; }
.sidebar-usuario-btn {
  display:flex; align-items:center; gap:.6rem; width:100%; background:transparent; border:none;
  padding:.45rem .5rem; border-radius:10px; cursor:pointer; font:inherit; text-align:left;
}
.sidebar-usuario-btn:hover { background:var(--paper); }
.sidebar-avatar {
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; flex-shrink:0;
}
.sidebar-usuario-textos { display:flex; flex-direction:column; min-width:0; flex:1; }
.sidebar-usuario-textos strong { font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-plan { font-size:.62rem; align-self:flex-start; margin-top:.15rem; color:var(--accent-ink); }
.sidebar-chevron { color:var(--muted); font-size:.7rem; }
.sidebar-drop {
  left:.3rem; right:auto; top:calc(100% + .3rem); min-width:230px;
}
.sidebar-drop-email { display:block; padding:.55rem .8rem .6rem; font-size:.75rem; border-bottom:1px solid var(--line); word-break:break-all; }
.sidebar-drop-pronto { display:block; padding:.5rem .8rem; font-size:.85rem; color:var(--muted); cursor:default; }
.sidebar-drop-pronto .pill { font-size:.6rem; }

/* «Mejorar plan»: el mismo degradado y el mismo destello que las chapas de
   Pro (.chapa-pro), para que se lea como la misma cosa (13/09/2026). */
.sidebar-upgrade {
  display:flex; align-items:center; justify-content:center; gap:.45rem; margin:.2rem .3rem; padding:.6rem .7rem;
  border-radius:999px; background:linear-gradient(100deg, var(--accent), #B63BDB); color:#fff; font-weight:800;
  font-size:.86rem; letter-spacing:.02em; text-decoration:none;
  box-shadow:0 4px 14px rgba(91, 47, 214, .28);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), filter .2s var(--ease-out);
}
.sidebar-upgrade svg { width:1rem; height:1rem; flex:0 0 auto; }
.sidebar-upgrade:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(91, 47, 214, .38); filter:brightness(1.05); }

.sidebar-nav { display:flex; flex-direction:column; gap:.1rem; margin-top:.3rem; flex:1; }
.sidebar-grupo {
  font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800;
  color:var(--muted); padding:.9rem .6rem .3rem;
}
.sidebar-item {
  display:flex; align-items:center; gap:.55rem; width:100%; background:transparent; border:none;
  padding:.48rem .6rem; border-radius:9px; cursor:pointer; font:inherit; font-size:.9rem;
  color:var(--ink-soft); text-align:left; font-weight:600;
}
.sidebar-item:hover { background:var(--paper); color:var(--ink); }
.sidebar-item[data-active="true"] { background:var(--accent-soft); color:var(--accent-ink); }
.sidebar-item .sidebar-icono { width:1.2rem; text-align:center; flex-shrink:0; }
.sidebar-badge {
  margin-left:auto; background:var(--accent); color:#fff; border-radius:999px;
  font-size:.66rem; font-weight:800; padding:.08rem .42rem;
}
.sidebar-pro { margin-left:auto; font-size:.7rem; opacity:.75; }
.sidebar-badge + .sidebar-pro { margin-left:.3rem; }

.sidebar-pie { border-top:1px solid var(--line); padding-top:.6rem; display:flex; flex-direction:column; gap:.4rem; }
/* El desplegable de espacios, dentro de la barra lateral, se ajusta a su ancho
   para no salirse por el borde izquierdo de la pantalla. */
.panel-sidebar .espacio-switch-drop { left:0; right:auto; min-width:0; width:100%; }
/* ══ LO PREMIUM, A LA VISTA PERO APAGADO ══════════════════════════════
   Lo pidió Rafael el 12/09/2026. La idea: quien está en el plan gratis VE
   todo lo que hace Loalia, pero lo de pago se le enseña apagado y con su
   distintivo. Lo que no se ve no se desea; esto es justo lo contrario.

   El distintivo es un destello de cuatro puntas, la forma del isotipo de
   Loalia — no una corona, que sería de otra marca.
   ══════════════════════════════════════════════════════════════════════ */
.chapa-pro {
  display: inline-flex; align-items: center; gap: .28rem;
  vertical-align: middle; margin-left: .45rem;
  padding: .16rem .5rem .16rem .38rem; border-radius: 999px;
  background: linear-gradient(100deg, var(--accent), #B63BDB);
  color: #fff; font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap;
}
.chapa-pro svg { width: .72rem; height: .72rem; flex: 0 0 auto; }
/* Sobre un botón morado (el «Personalizar el email» del plan gratis), la
   chapa va en blanco para que se lea (27/09/2026). */
.btn-brillo .chapa-pro { background: #fff; color: var(--accent); }

/* La zona apagada. Se ve entera, pero no se puede tocar ni seleccionar. */
.pro-apagado {
  position: relative;
  /* Bastante gris: lo que se quiere es que los colores se vean APAGADOS, no
     sólo un poco pálidos. Con 0,65 los círculos de color del soporte 3D
     seguían pareciendo elegibles. */
  opacity: .5; filter: grayscale(.88);
  pointer-events: none; user-select: none;
}
/* Un subtítulo para los grupos de pago que viven DENTRO de un bloque mixto
   —como personalizar el QR, que está en la misma tarjeta que el QR gratis—.
   Sin esto, la parte de pago sólo se veía apagada y parecía estropeada en
   vez de premium. */
.pro-subtitulo {
  display: flex; align-items: center; gap: .1rem; flex-wrap: wrap;
  margin: .2rem 0 .1rem; font-size: .82rem; font-weight: 700; color: var(--muted);
}

/* Y los campos de formulario, con el gris de «no se puede escribir aquí». */
.pro-apagado input, .pro-apagado textarea, .pro-apagado select, .pro-apagado button {
  background: var(--hueco, #F1F0F8) !important;
  cursor: default !important;
}
.pro-apagado::after {
  /* Un velo finísimo, para que se note que está apagado y no roto. */
  content: ""; position: absolute; inset: -.4rem; border-radius: 12px;
  background: repeating-linear-gradient(135deg,
    rgba(91,47,214,.05) 0 10px, rgba(91,47,214,0) 10px 20px);
}
@media (prefers-reduced-motion: no-preference) {
  .pro-apagado { transition: opacity .2s ease, filter .2s ease; }
}

/* La llamada que va justo encima de lo apagado. Ésta SÍ se puede pulsar. */
.pro-llamada {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: .9rem 0 0; padding: .7rem .85rem;
  border: 1px solid var(--accent-soft); border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .85rem; line-height: 1.45;
}
.pro-llamada strong { font-weight: 700; }
.pro-llamada .btn { margin-left: auto; }

/* El cambio de idioma del menú lateral. Va antes del logo y se ve siempre:
   antes sólo se podía cambiar escribiendo ?idioma= en la dirección, y quien
   caía en inglés se quedaba atrapado sin saber cómo volver. */
.sidebar-idioma {
  display:flex; align-items:center; gap:.25rem;
  padding:.3rem .5rem .45rem;
}
.sidebar-idioma-icono { font-size:.9rem; margin-right:.15rem; opacity:.75; }
.sidebar-idioma a {
  flex:0 0 auto; min-width:34px; text-align:center;
  padding:.22rem .45rem; border-radius:7px;
  font-size:.74rem; font-weight:800; letter-spacing:.04em;
  text-decoration:none; color:var(--muted);
  border:1px solid transparent;
}
.sidebar-idioma a:hover { background:var(--accent-soft); color:var(--accent-ink); }
.sidebar-idioma a[aria-current="true"] {
  background:var(--accent); color:#fff; border-color:var(--accent);
}

.sidebar-pie-fila { display:flex; align-items:center; gap:.5rem; padding:.3rem .5rem; }
.sidebar-pie-fila img.logo-img { height:20px; }
.sidebar-pie-fila a.sidebar-engranaje { margin-left:auto; text-decoration:none; font-size:1rem; }

.panel-contenido { flex:1; min-width:0; }
.panel-contenido .app-main { padding-top:1.4rem; }
/* 13/09/2026: de 960 a 1240 px. Rafael: «demasiado margen lateral y
   todo demasiado compacto». */
.panel-contenido .container { max-width:1240px; }
@media (min-width: 1100px) { .panel-contenido .card { padding: 2rem 2.2rem; } .panel-contenido .app-main { padding-top: 1.8rem; } }

/* Vistas: cada sección lleva data-vista; JS enseña solo la vista activa */
[data-vista] { display:none; }
[data-vista].vista-activa { display:block; }
section.card[data-vista].vista-activa { display:flex; flex-direction:column; }
/* Las secciones .card ya definen su layout interno; forzamos block salvo cards flex */
section[data-vista].vista-activa:not(.card) { display:block; }

/* ═══════════════════════════════════════════════════════════════════
   Pestañas de dentro de una vista (12/09/2026)

   La pantalla de Widgets se había hecho larguísima: la estética, la
   estética avanzada y el código para pegar, todo seguido. Rafael pidió
   partirla. Esto es la barra de arriba.

   No se parece a los filtros de píldora de las listas a propósito: allí
   se filtra una lista que sigue debajo; aquí se cambia de pantalla. Es
   un mando de un solo bloque, como los de un móvil.
   ═══════════════════════════════════════════════════════════════════ */
.pestanas-panel {
  gap: .25rem; flex-wrap: wrap;
  padding: .3rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
/* Más peso que [data-vista].vista-activa{display:block}, para que al
   enseñarse quede en fila y no en bloque. */
[data-vista].vista-activa.pestanas-panel { display: flex; }

.pestana-panel {
  flex: 1 1 10rem; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem .9rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.2;
  text-align: center; cursor: pointer;
}
.pestana-panel:hover { background: var(--accent-soft); color: var(--accent-ink); }
.pestana-panel[aria-selected="true"] { background: var(--accent); color: var(--sobre-accent); }
.pestana-panel[aria-selected="true"]:hover { background: var(--accent); color: var(--sobre-accent); }
/* El icono no encoge cuando el nombre es largo y la pestaña se estrecha. */
.pestana-panel span[aria-hidden] { flex: 0 0 auto; }
/* El punto de «aquí dentro tienes algo sin guardar». Antes ese aviso vivía
   dentro del bloque, así que al cambiar de pestaña se escondía con él y se
   podían perder cambios sin enterarse. Ámbar, que se ve sobre el blanco y
   sobre el morado de la pestaña elegida. */
.punto-pestana {
  flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%;
  background: #F59E0B; box-shadow: 0 0 0 2px var(--surface);
}
/* Sobre la pestaña elegida, el aro va del color del texto: en oscuro el
   morado se aclara y el ámbar se fundía con él (1,8:1); el aro lo recorta. */
.pestana-panel[aria-selected="true"] .punto-pestana { box-shadow: 0 0 0 2px var(--sobre-accent); }
@media (prefers-reduced-motion: no-preference) {
  .pestana-panel { transition: background .15s var(--ease-out), color .15s var(--ease-out); }
}
/* En pantallas estrechas, una debajo de otra antes que cortar los nombres. */
@media (max-width: 560px) {
  .pestanas-panel { border-radius: var(--radius-m); }
  .pestana-panel { flex: 1 1 100%; border-radius: calc(var(--radius-m) - .3rem); }
}

/* Los dos editores de estética: los mandos a la izquierda y la vista previa a
   la derecha. Estaba escrito a mano en el HTML con dos columnas fijas que
   sumaban más de 460 px, así que en un móvil la tarjeta se salía por la
   derecha y la vista previa quedaba cortada. Aquí, en una columna. */
.editor-con-vista {
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, 320px);
  gap: 2rem; align-items: start;
}
.editor-con-vista-ancha { grid-template-columns: minmax(260px, 1fr) minmax(260px, 440px); }
@media (max-width: 640px) {
  .editor-con-vista, .editor-con-vista-ancha { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Pegada arriba no sirve de nada cuando va debajo: molesta al desplazar. */
  .editor-con-vista > div { position: static !important; }
}

/* Bienvenida */
.bienvenida-hero h1 { font-size:1.7rem; }
.bienvenida-tarjetas {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:.9rem; margin-top:1.1rem;
}
.bienvenida-tarjeta {
  display:flex; flex-direction:column; gap:.35rem; border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface); padding:1rem; cursor:pointer; text-align:left; font:inherit;
  transition:transform .15s var(--ease-out), border-color .15s var(--ease-out);
}
.bienvenida-tarjeta:hover { transform:translateY(-2px); border-color:var(--accent); }
.bienvenida-tarjeta .icono, .bienvenida-tarjeta .bt-icono { font-size:1.4rem; }
.bienvenida-tarjeta strong { font-size:.95rem; }
.bienvenida-tarjeta span.muted { font-size:.8rem; }
.bienvenida-tarjeta .flecha { margin-left:auto; color:var(--accent); }

/* Móvil */
.sidebar-toggle {
  display:none; position:fixed; top:.8rem; left:.8rem; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:.45rem .6rem; font-size:1.05rem; cursor:pointer;
}
@media (max-width: 860px) {
  .sidebar-toggle { display:block; }
  .panel-sidebar {
    position:fixed; left:0; top:0; bottom:0; transform:translateX(-105%);
    transition:transform .2s var(--ease-out); box-shadow:0 0 30px rgba(10,10,20,.15);
  }
  .panel-layout[data-sidebar-abierto="true"] .panel-sidebar { transform:translateX(0); }
  .panel-contenido .app-main { padding-top:3.4rem; }
}

/* ============================================================
   Estudio Creativo (bloque 12) — pestañas, chips, galería de
   plantillas con vista previa en vivo y galería "Mis creaciones"
   ============================================================ */
.estudio-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.estudio-chips button {
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:.32rem .8rem; font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit;
}
.estudio-chips button[data-active="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }

.estudio-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem; margin-top:1.1rem; }
.plantilla-card {
  border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.plantilla-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.plantilla-preview { position:relative; background:var(--paper); border-bottom:1px solid var(--line); height:190px; overflow:hidden; }
.plantilla-preview iframe { width:200%; height:380px; border:0; transform:scale(.5); transform-origin:top left; pointer-events:none; display:block; }
.plantilla-preview .plantilla-mock { display:flex; align-items:center; justify-content:center; height:100%; font-size:2.4rem; }
.plantilla-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(20,26,38,.45); opacity:0; transition:opacity .15s var(--ease-out);
}
.plantilla-card:hover .plantilla-overlay, .plantilla-card:focus-within .plantilla-overlay { opacity:1; }
.plantilla-info { padding: .85rem 1rem 1rem; display:flex; flex-direction:column; gap:.3rem; }
.plantilla-info strong { font-size:.92rem; }
.plantilla-info .muted { font-size:.78rem; }
.plantilla-etiquetas { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }
.plantilla-etiquetas span { font-size:.66rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.1rem .5rem; color:var(--muted); font-weight:700; }
.plantilla-pro {
  position:absolute; top:.6rem; right:.6rem; z-index:2; background:var(--accent); color:#fff;
  font-size:.66rem; font-weight:800; border-radius:999px; padding:.18rem .55rem; letter-spacing:.03em;
}
.plantilla-pronto { opacity:.75; }
.plantilla-pronto .plantilla-preview { filter:grayscale(.4); }

.estudio-creaciones { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.9rem; margin-top:1rem; }
.creacion-card { border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; }
.creacion-card img, .creacion-card video { width:100%; height:140px; object-fit:cover; display:block; background:var(--paper); }
.creacion-meta { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.15rem; }
.creacion-meta strong { font-size:.78rem; }
.creacion-meta .muted { font-size:.7rem; }
.creacion-acciones { display:flex; gap:.4rem; padding:0 .7rem .7rem; }
.creacion-acciones a, .creacion-acciones button {
  flex:1; text-align:center; font-size:.72rem; font-weight:700; border-radius:8px; padding:.32rem .4rem;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer; text-decoration:none; font-family:inherit;
}
.creacion-acciones a:hover { border-color:var(--accent); color:var(--accent-ink); }
.creacion-acciones button:hover { border-color:#C0392B; color:#C0392B; }

/* =============================================================
   Precios — banda oscura con neón de marca
   -------------------------------------------------------------
   Esta sección va SIEMPRE en oscuro, tanto si el visitante tiene
   el tema claro como el oscuro: es una decisión de diseño, no un
   olvido. Por eso ningún color de aquí sale de las variables del
   tema — todos están escritos a mano y funcionan sobre su propio
   fondo negro.

   Cada plan tiene su color: azul el gratis, violeta el Pro y
   magenta-coral el Agencia. Son los tres tramos del degradado de
   marca (--gradient-brand), así que la escalera de planes se lee
   por el color antes que por el texto.

   REGLA: todo lleva el prefijo `pn-` (precios neón). Nombres
   genéricos como .card o .badge ya existen en esta hoja y chocan.
   ============================================================= */

.pn-seccion {
  position: relative;
  overflow: hidden;
  background: #08061A;
  color: #EDEBF7;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-block: 1px solid #211C3D;
}

/* Los tres resplandores del fondo — uno por color de plan. Puro
   adorno, así que no reciben eventos del ratón. */
.pn-seccion::before,
.pn-seccion::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

.pn-seccion::before {
  width: 620px; height: 620px;
  top: -230px; left: 50%;
  transform: translateX(-60%);
  opacity: .8;
  background: radial-gradient(circle, rgba(124, 77, 255, .75), transparent 68%);
}

.pn-seccion::after {
  width: 560px; height: 560px;
  bottom: -240px; right: -110px;
  opacity: .75;
  background: radial-gradient(circle, rgba(224, 60, 150, .7), transparent 68%);
}

.pn-seccion > .container { position: relative; z-index: 1; }

/* Un tercer resplandor, azul, a la izquierda: es el color del plan
   gratis y equilibra los otros dos. */
.pn-brillo-azul {
  position: absolute;
  pointer-events: none;
  width: 480px; height: 480px;
  bottom: -160px; left: -140px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .6;
  background: radial-gradient(circle, rgba(47, 111, 228, .7), transparent 68%);
}

/* ---------- variante: sobre el fondo normal de la web ----------
   Con la clase `pn-claro`, la sección deja de pintar su propio negro y usa
   el fondo del sitio (que cambia solo con el tema claro/oscuro del
   visitante). Las tarjetas siguen siendo oscuras y de colores: flotan
   sobre el fondo en vez de estar metidas en una franja.

   Aquí SÍ se usan las variables del tema, porque esta variante tiene que
   funcionar en claro y en oscuro. */

.pn-seccion.pn-claro {
  background: var(--paper);
  color: var(--ink);
  border-block: 1px solid var(--line);
}

/* Los resplandores se quedan, pero muy suaves: sobre blanco, un halo fuerte
   ensucia. */
.pn-seccion.pn-claro::before { opacity: .16; }
.pn-seccion.pn-claro::after { opacity: .14; }
.pn-seccion.pn-claro .pn-brillo-azul { opacity: .14; }

.pn-seccion.pn-claro .pn-titulo { color: var(--ink); }
.pn-seccion.pn-claro .pn-lede { color: var(--muted); }

.pn-seccion.pn-claro .pn-eyebrow {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pn-seccion.pn-claro .pn-toggle-et { color: var(--muted); }
.pn-seccion.pn-claro .pn-toggle-et[data-activo="true"] { color: var(--ink); }

.pn-seccion.pn-claro .pn-toggle-boton {
  background: var(--surface);
  border-color: var(--line);
}

.pn-seccion.pn-claro .pn-switch-nota {
  color: var(--muted);
  background: none;
}

.pn-seccion.pn-claro .pn-switch-nota b {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pn-seccion.pn-claro .pn-nota { color: var(--muted); }
.pn-seccion.pn-claro .pn-nota a { color: var(--accent); }

.pn-seccion.pn-claro .pn-demo {
  background: rgba(217, 165, 68, .14);
  border-color: rgba(217, 165, 68, .5);
  color: var(--gold);
}

/* ---------- cabecera ---------- */

.pn-cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: 2.6rem;
}

.pn-eyebrow {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #7BB0FF, #B98BFF 45%, #FF7FC4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pn-titulo {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  color: #FFFFFF;
  text-wrap: balance;
  max-width: 20ch;
}

.pn-lede {
  margin: 0;
  color: #B4B0CE;
  font-size: 1.12rem;
  line-height: 1.55;
  max-width: 52ch;
}

.pn-demo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: rgba(217, 165, 68, .16);
  border: 1px solid rgba(217, 165, 68, .45);
  color: #FFD483;
}

/* ---------- interruptor mensual / anual ----------
   Un interruptor de verdad, con su bolita, y las dos palabras fuera:
   la que está activa se pone en blanco. Es más claro que dos botones,
   porque se ve de un vistazo en qué posición está. */

.pn-toggle {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-inline: auto;
}

.pn-toggle-et {
  font-size: 1.05rem;
  font-weight: 700;
  color: #7E79A2;
  transition: color .18s var(--ease-out);
  user-select: none;
}

.pn-toggle-et[data-activo="true"] { color: #FFFFFF; }

.pn-toggle-boton {
  position: relative;
  width: 3.4rem;
  height: 1.85rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  padding: 0;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}

.pn-toggle-boton[aria-checked="true"] {
  background: linear-gradient(100deg, #7C4DFF, #E84A9E);
  border-color: transparent;
}

.pn-toggle-boton:focus-visible { outline: 2px solid #C7A6FF; outline-offset: 3px; }

.pn-toggle-bola {
  position: absolute;
  top: 50%;
  left: .22rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #FFFFFF;
  transform: translateY(-50%);
  transition: left .2s var(--ease-out);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.pn-toggle-boton[aria-checked="true"] .pn-toggle-bola { left: calc(100% - 1.52rem); }

/* El descuento no va dentro del interruptor: iría siempre encima de un
   fondo u otro y quedaba un parche de color. Va debajo, en su línea. */
.pn-switch-nota {
  margin: .1rem 0 0;
  font-size: .95rem;
  font-weight: 600;
  color: #ADA8CC;
}

.pn-switch-nota b {
  font-weight: 800;
  background: linear-gradient(100deg, #9DDBFF, #C7A6FF 55%, #FF9ED0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- rejilla ---------- */

.pn-grid {
  display: grid;
  gap: 1.2rem;
  max-width: 1140px;
  margin-inline: auto;
  /* start, no stretch: si no, al abrir el desplegable de una tarjeta las
     vecinas se estiran para igualarla y les queda un hueco feo. */
  align-items: start;
}

@media (min-width: 700px) { .pn-grid { grid-template-columns: repeat(2, 1fr); max-width: 780px; } }
@media (min-width: 1000px) { .pn-grid { grid-template-columns: repeat(3, 1fr); max-width: 1140px; } }

/* ---------- tarjeta ---------- */

.pn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: 1.8rem 1.6rem 1.7rem;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(165deg, #142A4A 0%, #142038 55%, #111A2E 100%);
  border: 1px solid rgba(90, 150, 255, .32);
  box-shadow: 0 0 0 1px rgba(90, 150, 255, .1), 0 18px 50px -24px rgba(47, 111, 228, .55);
  transition: transform .22s var(--ease-out), border-color .22s var(--ease-out);
}

/* El filete de color del borde superior: es lo que hace que las tres
   tarjetas se lean como una escalera de colores. */
.pn-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(100deg, #4F8CFF, #63C8FF);
}

.pn-card:hover { transform: translateY(-4px); }

.pn-card.pn-destacada {
  background: linear-gradient(165deg, #341A75 0%, #1F1245 55%, #170F33 100%);
  border-color: rgba(160, 128, 255, .6);
  box-shadow: 0 0 0 1px rgba(160, 128, 255, .28), 0 22px 60px -22px rgba(124, 77, 255, .8);
}

.pn-card.pn-destacada::before { background: linear-gradient(100deg, #7C4DFF, #C77DFF); }

.pn-card.pn-alta {
  background: linear-gradient(165deg, #4A1039 0%, #2C1033 55%, #1A0F2B 100%);
  border-color: rgba(232, 74, 158, .55);
  box-shadow: 0 0 0 1px rgba(232, 74, 158, .24), 0 22px 60px -24px rgba(232, 74, 158, .7);
}

.pn-card.pn-alta::before { background: linear-gradient(100deg, #E84A9E, #FF8A5C); }

/* ---------- distintivos ---------- */

.pn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  min-height: 1.55rem;
}

.pn-tag {
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .32rem .6rem;
  border-radius: 7px;
  white-space: nowrap;
}

.pn-tag-elegido { background: linear-gradient(100deg, #7C4DFF, #C77DFF); color: #FFFFFF; }
.pn-tag-ahorro { background: #C6FF4D; color: #1B3000; }
.pn-tag-completo { background: linear-gradient(100deg, #E84A9E, #FF8A5C); color: #FFFFFF; }

/* ---------- nombre y precio ---------- */

/* El nombre del plan y, pegado a él, el descuento del pago anual. Va ahí
   y no en la fila de distintivos de arriba porque así se lee de corrido:
   "Pro, 35% de descuento". */
.pn-nombre {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.08;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}

.pn-dto {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  padding: .28rem .55rem;
  border-radius: 7px;
  background: linear-gradient(100deg, #E84A9E, #FF6B5C);
  color: #FFFFFF;
  white-space: nowrap;
}

.pn-para {
  margin: -.55rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #ADA8CC;
}

.pn-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .25rem;
}

/* El precio viejo, tachado, en rosa vivo — no en gris. Tachar en gris
   parece un precio apagado; tachar en color se lee como una rebaja. */
.pn-antes {
  font-size: 1.6rem;
  font-weight: 800;
  color: #FF5C8A;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #FF5C8A;
}

.pn-num {
  font-family: var(--font-display);
  font-size: 3.3rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.pn-sufijo {
  font-size: .96rem;
  font-weight: 600;
  color: #ADA8CC;
}

/* ---------- la prueba de 7 días ----------
   Se anuncia en dos sitios: el propio botón («Probar 7 días gratis») y la
   frase de debajo. Hubo una tercera caja encima del botón repitiéndolo y se
   quitó: sobraba, porque el precio ya está arriba y grande.

   La frase que quita el miedo contesta la única duda que queda ante una
   prueba con tarjeta: "¿y si se me olvida cancelar?". */
.pn-tranquilidad {
  margin: -.35rem 0 0;
  text-align: center;
  font-size: .87rem;
  line-height: 1.4;
  color: #9C97BC;
}

.pn-tranquilidad b { color: #D8FF7E; font-weight: 700; }

/* ---------- botón ---------- */

.pn-cta {
  font: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  width: 100%;
  padding: .95rem 1rem;
  border-radius: 13px;
  border: 0;
  cursor: pointer;
  transition: filter .18s var(--ease-out), transform .18s var(--ease-out);
  color: #0E1A33;
  background: linear-gradient(100deg, #7BD3FF 0%, #A6E3FF 100%);
  box-shadow: 0 10px 30px -14px rgba(99, 200, 255, .9);
}

/* El botón del plan gratis es un enlace de verdad (lleva a crear cuenta),
   no un botón. Estas cuatro líneas lo dejan igualito que los otros dos. */
a.pn-cta {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.pn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pn-cta:focus-visible { outline: 2px solid #C6FF4D; outline-offset: 3px; }

.pn-card.pn-destacada .pn-cta {
  background: linear-gradient(100deg, #7C4DFF 0%, #C77DFF 100%);
  color: #FFFFFF;
  box-shadow: 0 12px 34px -12px rgba(124, 77, 255, 1);
}

.pn-card.pn-alta .pn-cta {
  background: linear-gradient(100deg, #E84A9E 0%, #FF8A5C 100%);
  color: #FFFFFF;
  box-shadow: 0 12px 34px -12px rgba(232, 74, 158, .95);
}

/* Franja de debajo del botón: lo que se ahorra pagando al año. Ocupa
   todo el ancho de la tarjeta, como una repisa, en vez de ser una
   pastilla suelta. */
.pn-ahorro {
  margin: -.55rem -1.6rem 0;
  padding: .7rem 1.6rem;
  text-align: center;
  font-size: .96rem;
  font-weight: 800;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .07);
  border-block: 1px solid rgba(255, 255, 255, .09);
  min-height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* En vista mensual la repisa invita a pasarse al año: mismo sitio, otro
   mensaje. Va más apagada que la de "ya lo estás ahorrando", porque es una
   sugerencia, no un logro. */
.pn-ahorro.pn-ahorro-invita {
  color: #C7A6FF;
  font-weight: 700;
  background: rgba(199, 166, 255, .09);
}

.pn-ahorro.pn-ahorro-vacio {
  color: #7E79A2;
  font-weight: 600;
  background: none;
  border-color: transparent;
}

/* ---------- listas ---------- */

.pn-grupo {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.pn-grupo-titulo {
  font-size: .81rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8FC4FF;
  margin: 0;
}

.pn-card.pn-destacada .pn-grupo-titulo { color: #CDB4FF; }
.pn-card.pn-alta .pn-grupo-titulo { color: #FFA8D2; }

.pn-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .62rem;
  font-size: 1.01rem;
  line-height: 1.45;
  color: #E2DFF2;
}

.pn-lista li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: .6rem;
  align-items: start;
}

.pn-lista li::before {
  content: "✓";
  color: #C6FF4D;
  font-weight: 900;
  font-size: 1.02rem;
  line-height: 1.4;
}

.pn-lista li.pn-no { color: #817CA5; }
.pn-lista li.pn-no::before { content: "✕"; color: #635E86; font-weight: 700; }

/* Las líneas que ya traen su propio icono no llevan ✓ delante. */
.pn-lista li.pn-propio { grid-template-columns: 1fr; }
.pn-lista li.pn-propio::before { content: none; }

/* ---------- «Ver todo lo que incluye» ----------
   La tarjeta enseña las 6 líneas más importantes y esconde el resto en un
   desplegable. Así se puede contar todo lo que da cada plan sin que la
   tarjeta se convierta en un ladrillo que nadie lee. Es un <details> de
   toda la vida: funciona sin JavaScript y el buscador ve el contenido. */

.pn-mas { margin-top: -.15rem; }

.pn-mas summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .96rem;
  font-weight: 800;
  color: #8FC4FF;
  padding: .3rem 0;
}

.pn-mas summary::-webkit-details-marker { display: none; }
.pn-mas summary:hover { color: #FFFFFF; }
.pn-mas summary:focus-visible { outline: 2px solid #C6FF4D; outline-offset: 3px; border-radius: 6px; }

.pn-card.pn-destacada .pn-mas summary { color: #CDB4FF; }
.pn-card.pn-alta .pn-mas summary { color: #FFA8D2; }

/* La flecha, dibujada con bordes: gira al abrir. */
.pn-mas summary .pn-flecha {
  width: .48rem; height: .48rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s var(--ease-out);
  margin-bottom: .18rem;
}

.pn-mas[open] summary .pn-flecha { transform: rotate(-135deg); margin-bottom: -.12rem; }

.pn-mas .pn-lista { margin-top: .8rem; }

.pn-cuenta {
  font-weight: 900;
  color: #0E1A33;
  background: #8FC4FF;
  padding: .1rem .4rem;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

.pn-card.pn-destacada .pn-cuenta { background: #CDB4FF; color: #1E1040; }
.pn-card.pn-alta .pn-cuenta { background: #FFA8D2; color: #3D0A24; }

.pn-nota {
  margin: 2.4rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .92rem;
  color: #8E89AE;
}

.pn-nota a { color: #B98BFF; }

@media (prefers-reduced-motion: reduce) {
  .pn-card, .pn-cta, .pn-switch button { transition: none; }
  .pn-card:hover, .pn-cta:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Botones de redes (13/09/2026): la página «Síguenos» (redes.php) y el paso
   «¿Nos sigues en redes?» de después de dejar la opinión (recoger.js).
   Un icono con el color de cada red, texto que puede partir en dos líneas
   (los .btn normales no lo dejan, y se salían del recuadro en el móvil) y
   al pasar el ratón se levantan con una sombra del color de su red.
   ═══════════════════════════════════════════════════════════════════ */
.red-boton {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 1rem; line-height: 1.3; text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.red-boton > span:nth-child(2) { flex: 1 1 auto; min-width: 0; white-space: normal; }
.red-boton .red-icono {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
  transition: transform .18s var(--ease-out);
}
.red-boton .red-flecha { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 1.3rem; transition: transform .18s var(--ease-out), color .18s var(--ease-out); }
.red-boton:hover { transform: translateY(-2px); }
.red-boton:hover .red-icono { transform: scale(1.08) rotate(-4deg); }
.red-boton:hover .red-flecha { transform: translateX(3px); color: var(--ink); }
.red-boton:active { transform: translateY(0) scale(.99); }
.red-facebook .red-icono { background: #1877F2; }
.red-facebook:hover { border-color: #1877F2; box-shadow: 0 12px 26px rgba(24, 119, 242, .25); }
.red-instagram .red-icono { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.red-instagram:hover { border-color: #DD2A7B; box-shadow: 0 12px 26px rgba(221, 42, 123, .25); }
.red-google .red-icono { background: #4285F4; }
.red-google:hover { border-color: #4285F4; box-shadow: 0 12px 26px rgba(66, 133, 244, .25); }
.red-loalia .red-icono { background: linear-gradient(100deg, var(--accent), #B63BDB); }
.red-loalia:hover { border-color: var(--accent); box-shadow: 0 12px 26px rgba(91, 47, 214, .25); }
@media (prefers-reduced-motion: reduce) {
  .red-boton, .red-boton .red-icono, .red-boton .red-flecha { transition: none; }
  .red-boton:hover, .red-boton:hover .red-icono, .red-boton:hover .red-flecha { transform: none; }
}

/* «Hecho con Loalia», al pie de la página «Síguenos» (13/09/2026): una
   firma discreta, con el logo a color sobre blanco — no puede robar
   protagonismo a los botones de las redes, que son lo que importa. */
.hecho-loalia {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.6rem; padding: .45rem .9rem .45rem .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; font-weight: 600;
  text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.hecho-loalia img { height: 1.05rem; width: auto; display: block; }
.hecho-loalia:hover { border-color: var(--accent); color: var(--ink); }
.hecho-loalia-pie { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   Apartado «Redes y Google» del panel (13/09/2026, rehecho): una tarjeta
   por red con su color, el estado de un vistazo, y un móvil de mentira con
   la vista previa de lo que verá el cliente. Antes era un formulario plano
   de cinco casillas y «se veían muchas letras».
   ═══════════════════════════════════════════════════════════════════ */
/* Las tarjetas y el móvil van en su propia rejilla (.redes-editor-arriba) y
   el interruptor y el botón, debajo, fuera de ella. Así el móvil pegajoso
   se para donde acaban las tarjetas y no pisa la frase del interruptor
   (Rafael, 13/09/2026: «que se quede al límite de la frase sin que la pise»). */
.redes-editor { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.2rem; }
.redes-editor-arriba { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem 1.6rem; align-items: start; }
.redes-lista { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.red-tarjeta {
  border: 1px solid var(--line); border-left-width: 5px; border-radius: 14px;
  background: var(--surface); padding: .9rem 1rem 1rem;
  transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.red-tarjeta:focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.red-tarjeta-facebook { border-left-color: #1877F2; }
.red-tarjeta-instagram { border-left-color: #DD2A7B; }
.red-tarjeta-google { border-left-color: #4285F4; }
.red-tarjeta .red-cabecera { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.red-tarjeta .red-icono {
  width: 2.3rem; height: 2.3rem; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.15rem; color: #fff; flex: 0 0 auto;
}
.red-tarjeta-facebook .red-icono { background: #1877F2; }
.red-tarjeta-instagram .red-icono { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.red-tarjeta-google .red-icono { background: #4285F4; }
.red-titulo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1rem; }
.red-estado {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 999px; background: var(--paper); color: var(--muted);
  border: 1px solid var(--line);
}
.red-estado[data-puesto="1"] { background: #E6F2EC; color: var(--success); border-color: transparent; }
.red-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem .9rem; }
.red-campos .field > span { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .3rem; }
.red-campos .field input { font-size: .88rem; }
.red-ayuda { grid-column: 1 / -1; font-size: .78rem; margin: 0; }

/* La vista previa: un móvil de mentira con la misma página «Síguenos». */
.redes-previa { position: sticky; top: 1rem; }
.redes-previa-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; text-align: center; }
.movil-previa {
  width: 100%; max-width: 300px; margin: 0 auto; border-radius: 30px; padding: .7rem;
  background: #141A26; box-shadow: 0 18px 40px rgba(20, 26, 38, .28), inset 0 0 0 2px #2A3244;
}
.movil-pantalla {
  border-radius: 22px; background: var(--paper); padding: 1.6rem .85rem 1.2rem; min-height: 380px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
}
.movil-pantalla .eyebrow { font-size: .62rem; }
.movil-h1 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0 0 .7rem; color: var(--ink); }
.movil-botones { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.movil-botones .red-boton { padding: .55rem .65rem; gap: .55rem; font-size: .78rem; border-radius: 12px; text-align: left; }
.movil-botones .red-boton .red-icono { width: 1.7rem; height: 1.7rem; font-size: .85rem; border-radius: 8px; }
.movil-botones .red-boton .red-flecha { font-size: 1rem; }
.movil-vacio { font-size: .75rem; margin: .4rem 0 0; }

/* El interruptor de «proponerlo al acabar», como un interruptor. */
.interruptor-fila { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.interruptor { position: relative; flex: 0 0 auto; width: 2.7rem; height: 1.55rem; margin-top: .1rem; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor-bola {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line);
  transition: background .2s var(--ease-out);
}
.interruptor-bola::after {
  content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease-out);
}
.interruptor input:checked + .interruptor-bola { background: var(--accent); }
.interruptor input:checked + .interruptor-bola::after { transform: translateX(1.15rem); }
.interruptor input:focus-visible + .interruptor-bola { outline: 2px solid var(--accent); outline-offset: 2px; }
.redes-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .redes-editor-arriba { grid-template-columns: 1fr; }
  .redes-previa { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════
   El editor del QR de redes (13/09/2026, tarde). Rafael: «que puedan
   editar el código QR de las redes sociales con todo tipo de lujo de
   detalles… y que pueda verlo en vivo». A la izquierda el QR, que se
   repinta con cada cambio; a la derecha los ajustes en grupos pequeños
   con su título, para que se vea de un vistazo qué toca cada cosa.
   ═══════════════════════════════════════════════════════════════════ */
.qr-editor { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.4rem 1.8rem; margin-top: 1.2rem; align-items: start; }
.qr-editor-previa { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.qr-editor-previa canvas {
  width: 100%; max-width: 300px; height: auto; margin: 0 auto; display: block;
  border-radius: 14px; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 14px 34px rgba(20, 26, 38, .12);
}
.qr-editor-acciones { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.qr-tamanos { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; font-size: .78rem; }
.qr-tamanos .chip { padding: .25rem .65rem; font-size: .76rem; }
/* La columna de ajustes va envuelta (.qr-editor-lado) para que la cabecera
   de Pro que añade marcarProGrupo caiga dentro de la columna y no en la rejilla. */
.qr-editor-lado { min-width: 0; }
.qr-editor-opciones { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.qr-grupo {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .85rem 1rem 1rem;
  transition: box-shadow .2s var(--ease-out);
}
.qr-grupo:focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.qr-grupo-titulo { margin: 0 0 .65rem; font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.qr-grupo-titulo span[aria-hidden] {
  width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--accent-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
}
.qr-grupo-nota { font-size: .78rem; margin: -.3rem 0 .6rem; }
.qr-grupo-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem .9rem; }
.qr-grupo .field > span, .qr-subtitulo { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .3rem; }
.qr-grupo .field input[type="text"] { font-size: .88rem; }
.qr-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem .9rem; }
.qr-colores .field { flex-direction: row; align-items: center; gap: .55rem; }
.qr-colores .field > span { margin: 0; }
.qr-colores .field input[type="color"] { flex: 0 0 auto; }
.qr-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.qr-editor .redes-pie { margin-top: .2rem; }

/* El botón «Probar» al lado de cada enlace de red. */
.red-campo-fila, .red-campos .field > span.red-campo-fila { display: flex; gap: .45rem; align-items: stretch; margin: 0; font-size: inherit; font-weight: inherit; }
.red-campo-fila input { flex: 1; min-width: 0; }
.red-probar { flex: 0 0 auto; white-space: nowrap; }
.red-probar[hidden] { display: none; }

@media (max-width: 860px) {
  .qr-editor { grid-template-columns: 1fr; }
  .qr-editor-previa { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════
   La pantalla de inicio (bienvenida), rehecha el 13/09/2026 por la tarde.
   Rafael: «es realmente sosa… más colores y efectos… sorpréndeme».
   Todo con prefijo bv-. Los colores fijos del degradado de la cabecera van
   a propósito (texto blanco encima) y son iguales en claro y en oscuro.
   ═══════════════════════════════════════════════════════════════════ */
.bv > * { animation: bv-subir .5s var(--ease-out) both; }
.bv > *:nth-child(2) { animation-delay: .06s; }
.bv > *:nth-child(3) { animation-delay: .12s; }
.bv > *:nth-child(4) { animation-delay: .18s; }
.bv > *:nth-child(5) { animation-delay: .24s; }
.bv > *:nth-child(6) { animation-delay: .3s; }
@keyframes bv-subir { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La cabecera: degradado de marca con tres luces que se mueven despacio. */
.bv-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; padding: 1.8rem 1.9rem 1.7rem; color: #fff;
  background: linear-gradient(135deg, #4B31D3 0%, #952AC5 45%, #D43B8D 80%, #C14851 100%);
  box-shadow: 0 18px 44px rgba(91, 47, 214, .28);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 1.4rem 2rem; align-items: center;
}
.bv-luz {
  position: absolute; z-index: -1; border-radius: 50%; filter: blur(42px); opacity: .55; pointer-events: none;
  animation: bv-flotar 14s ease-in-out infinite alternate;
}
.bv-luz-1 { width: 320px; height: 320px; background: #FFB020; top: -140px; right: 8%; }
.bv-luz-2 { width: 260px; height: 260px; background: #5BC4FF; bottom: -150px; left: 12%; animation-delay: -5s; animation-duration: 17s; }
.bv-luz-3 { width: 220px; height: 220px; background: #FF5CA8; top: 30%; left: 45%; animation-delay: -9s; animation-duration: 11s; }
@keyframes bv-flotar { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 28px) scale(1.18); } }
.bv-hero-texto { min-width: 0; }
.bv-saludo { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; font-size: .9rem; font-weight: 700; opacity: .95; margin: 0 0 .35rem; }
.bv-hoy { font-weight: 600; opacity: .75; text-transform: capitalize; }
.bv-hero h1 { font-size: 1.85rem; line-height: 1.15; margin: 0; color: #fff; text-wrap: balance; }
.bv-lede { margin: .55rem 0 0; font-size: .95rem; line-height: 1.5; opacity: .9; max-width: 44ch; }
.bv-pendientes {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem;
  padding: .55rem .95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.bv-pendientes:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.bv-pendientes[hidden] { display: none; }
.bv-pendientes-punto { width: .55rem; height: .55rem; border-radius: 50%; background: #FFD166; box-shadow: 0 0 0 0 rgba(255, 209, 102, .7); animation: bv-latir 1.6s ease-out infinite; }
@keyframes bv-latir { to { box-shadow: 0 0 0 9px rgba(255, 209, 102, 0); } }

/* Las cifras: cuatro cristales sobre el degradado. */
.bv-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.bv-cifra {
  border-radius: 16px; padding: .85rem .95rem; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.bv-cifra:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .2); }
.bv-cifra-num { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bv-cifra-et { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }

/* Las tarjetas de dos columnas. */
.bv-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.bv-card { padding: 1.25rem 1.35rem; position: relative; overflow: hidden; }
.bv-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #5B2FD6, #D43B8D, #D9A544); opacity: .9;
}
.bv-card-cab { display: flex; align-items: center; gap: .75rem; }
.bv-card-cab h2 { margin: 0; }
.bv-icono {
  width: 2.5rem; height: 2.5rem; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.2rem; color: #fff; box-shadow: 0 6px 16px rgba(20, 26, 38, .15);
}
.bv-icono-morado { background: linear-gradient(135deg, #5B2FD6, #952AC5); }
.bv-icono-oro { background: linear-gradient(135deg, #D9A544, #C14851); }
.bv-icono-rosa { background: linear-gradient(135deg, #D43B8D, #952AC5); }
.bv-icono-verde { background: linear-gradient(135deg, #2F7A5C, #5BC46A); }
.bv-whatsapp { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }
.bv-whatsapp:hover { filter: brightness(1.06); }
.bv-upsell { margin-top: 1rem; margin-bottom: 0; }

/* La última reseña. */
.bv-ultima { margin-top: .8rem; }
.bv-ultima-caja { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; background: var(--paper); }
.bv-estrellas { color: var(--gold); letter-spacing: .08em; font-size: 1.05rem; }
.bv-ultima-texto { font-family: var(--font-display); font-size: 1rem; line-height: 1.5; margin: .35rem 0 .5rem; color: var(--ink); }
.bv-ultima-pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.bv-ultima-pie strong { color: var(--ink-soft); }
.bv-ultima-pie .btn { margin-left: auto; }

/* «¿Qué quieres hacer hoy?»: seis tarjetas, cada una con su color. */
.bv-h2 { font-size: 1.05rem; margin: 1.4rem 0 0; }
.bv-tarjetas { margin-top: .7rem; }
.bv-tarjeta { position: relative; padding: 1.05rem 1.1rem 1.1rem; gap: .4rem; border-radius: 16px; overflow: hidden; }
.bv-tarjeta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--bt-a), var(--bt-b)); transition: opacity .2s var(--ease-out);
}
.bv-tarjeta:hover::after { opacity: .07; }
.bv-tarjeta .bt-icono {
  width: 2.6rem; height: 2.6rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--bt-a), var(--bt-b));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bt-a) 35%, transparent); margin-bottom: .25rem;
  transition: transform .2s var(--ease-out);
}
.bv-tarjeta:hover { transform: translateY(-3px); border-color: var(--bt-a); box-shadow: 0 14px 30px color-mix(in srgb, var(--bt-a) 18%, transparent); }
.bv-tarjeta:hover .bt-icono { transform: scale(1.08) rotate(-4deg); }
.bv-tarjeta .bt-flecha { position: absolute; right: 1rem; top: 1.05rem; color: var(--bt-a); font-weight: 800; opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.bv-tarjeta:hover .bt-flecha { opacity: 1; transform: none; }

/* Novedades: una línea de tiempo corta. */
.bv-novedades { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.bv-novedad { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .6rem .8rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--line); }
.bv-novedad:first-child { border-top: 0; padding-top: 0; }
.bv-novedad-fecha { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.bv-novedad strong { font-size: .92rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.bv-novedad p { margin: .15rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.bv-nuevo { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; background: var(--gradient-brand); color: #fff; }
.bv-novedad .btn { white-space: nowrap; }

/* Ayuda rápida: el vídeo (se carga al pulsar) y tres guías desplegables. */
.bv-video {
  position: relative; display: block; width: 100%; margin-top: .9rem; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  cursor: pointer; background: #000; aspect-ratio: 16 / 9; font: inherit; color: #fff; text-align: left;
}
.bv-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.bv-video:hover img { transform: scale(1.04); opacity: 1; }
.bv-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #5B2FD6; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; padding-left: .25rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s var(--ease-out);
}
.bv-video:hover .bv-video-play { transform: translate(-50%, -50%) scale(1.1); }
.bv-video-titulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem; font-size: .85rem; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.bv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bv-guias { display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; }
.bv-guia { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.bv-guia summary { cursor: pointer; padding: .65rem .85rem; font-size: .88rem; font-weight: 700; list-style: none; display: flex; align-items: center; gap: .5rem; }
.bv-guia summary::-webkit-details-marker { display: none; }
.bv-guia summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 800; }
.bv-guia[open] summary::after { content: "–"; }
.bv-guia ol { margin: 0; padding: 0 .95rem .75rem 2.1rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.bv-guia li + li { margin-top: .25rem; }

@media (max-width: 760px) {
  .bv-hero { grid-template-columns: 1fr; padding: 1.4rem 1.2rem; }
  .bv-hero h1 { font-size: 1.5rem; }
  .bv-cifra-num { font-size: 1.5rem; }
  .bv-novedad { grid-template-columns: minmax(0, 1fr) auto; }
  .bv-novedad-fecha { grid-column: 1 / -1; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bv > *, .bv-luz, .bv-pendientes-punto { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   El apartado «Guía» (13/09/2026, tarde). Prefijo gu-. Misma familia que la
   pantalla de inicio: cabecera con degradado y luces, temas con su color,
   tarjetas que se levantan, y el detalle con pasos numerados o el vídeo.
   ═══════════════════════════════════════════════════════════════════ */
.gu > * { animation: bv-subir .5s var(--ease-out) both; }
.gu > *:nth-child(2) { animation-delay: .08s; }
.gu > *:nth-child(3) { animation-delay: .16s; }
.gu-cabecera {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 1.8rem 1.9rem 1.5rem; color: #fff;
  background: linear-gradient(135deg, #4B31D3 0%, #952AC5 45%, #D43B8D 80%, #C14851 100%);
  box-shadow: 0 18px 44px rgba(91, 47, 214, .28);
}
.gu-luz { position: absolute; z-index: -1; border-radius: 50%; filter: blur(44px); opacity: .5; pointer-events: none; animation: bv-flotar 15s ease-in-out infinite alternate; }
.gu-luz-1 { width: 300px; height: 300px; background: #FFB020; top: -150px; right: 6%; }
.gu-luz-2 { width: 240px; height: 240px; background: #5BC4FF; bottom: -140px; left: 18%; animation-delay: -7s; }
.gu-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.gu-cabecera h1 { font-size: 1.85rem; line-height: 1.15; margin: .25rem 0 0; color: #fff; text-wrap: balance; }
.gu-cabecera-texto p { margin: .5rem 0 0; font-size: .95rem; opacity: .9; max-width: 52ch; }
.gu-buscador {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; padding: .3rem .5rem .3rem .9rem;
  border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(20, 26, 38, .22);
  border: 2px solid transparent; transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
  max-width: 640px;
}
.gu-buscador:focus-within { border-color: #FFD166; transform: translateY(-1px); }
.gu-lupa { font-size: 1.05rem; flex: 0 0 auto; }
.gu-buscador input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; padding: .6rem 0; color: #141A26;
}
.gu-buscador input::-webkit-search-cancel-button { cursor: pointer; }
.gu-buscador kbd {
  flex: 0 0 auto; font: inherit; font-size: .72rem; font-weight: 800; color: #6B7290; border: 1px solid #E4E4F0; border-radius: 6px;
  padding: .1rem .45rem; background: #F7F7FB;
}
.gu-formatos { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .9rem; }
.gu-formato {
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); color: #fff; border-radius: 999px;
  padding: .4rem .9rem; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.gu-formato:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.gu-formato[aria-pressed="true"] { background: #fff; color: #4423A8; border-color: #fff; }
.gu-cuenta { margin-left: auto; font-size: .8rem; font-weight: 700; opacity: .85; }

/* Los temas: una fila de fichas con su color y cuántas guías tienen. */
.gu-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.gu-tema {
  display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .75rem .85rem; color: var(--ink);
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.gu-tema:hover { transform: translateY(-2px); border-color: var(--gt-a); }
.gu-tema[aria-pressed="true"] { border-color: var(--gt-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gt-a) 25%, transparent), 0 10px 24px color-mix(in srgb, var(--gt-a) 18%, transparent); }
.gu-tema-icono {
  width: 2rem; height: 2rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--gt-a), var(--gt-b));
}
.gu-tema strong { font-size: .82rem; line-height: 1.25; }
.gu-tema span { font-size: .72rem; color: var(--muted); font-weight: 700; }

/* Las tarjetas de las guías. */
.gu-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-top: 1rem; }
.gu-seccion { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin-top: .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gu-seccion::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gu-seccion:first-child { margin-top: 0; }
.gu-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: .4rem; text-align: left; font: inherit; cursor: pointer; color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 1rem 1.05rem 1rem; overflow: hidden;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.gu-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gt-a), var(--gt-b)); }
.gu-tarjeta:hover { transform: translateY(-3px); border-color: var(--gt-a); box-shadow: 0 14px 30px color-mix(in srgb, var(--gt-a) 16%, transparent); }
.gu-tarjeta-cab { display: flex; align-items: center; gap: .55rem; }
.gu-tarjeta-icono { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--gt-a), var(--gt-b)); flex: 0 0 auto; }
.gu-formato-chapa { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.gu-formato-chapa[data-formato="video"] { background: #FDECEF; color: #B0304C; }
:root[data-theme="dark"] .gu-formato-chapa[data-formato="video"] { background: #452430; color: #F0A0B4; }
.gu-tarjeta strong { font-size: .95rem; line-height: 1.3; }
.gu-tarjeta p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.gu-tarjeta-pie { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .76rem; color: var(--muted); font-weight: 700; }
.gu-tarjeta-pie .gu-flecha { margin-left: auto; color: var(--gt-a); font-weight: 800; opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.gu-tarjeta:hover .gu-flecha { opacity: 1; transform: none; }
.gu-pendiente { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: var(--status-pendiente-bg); color: var(--status-pendiente-ink); }
.gu-tarjeta[data-estado="pendiente"] { border-style: dashed; }
.gu-tarjeta[data-estado="pendiente"] strong, .gu-tarjeta[data-estado="pendiente"] p { opacity: .75; }
.gu-vacio { margin-top: 1.4rem; text-align: center; color: var(--muted); font-size: .92rem; padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: 16px; }
.gu-vacio[hidden] { display: none; }

/* El detalle de una guía. */
.gu-detalle { margin-top: 1.1rem; }
.gu-detalle[hidden] { display: none; }
.gu-volver { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .86rem; font-weight: 700; color: var(--accent-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.gu-volver:hover { text-decoration: underline; }
.gu-detalle-caja { margin-top: .8rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.gu-detalle-cab { padding: 1.4rem 1.6rem 1.2rem; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--gt-a) 10%, var(--surface)), var(--surface) 70%); }
.gu-detalle-cab .gu-tarjeta-cab { margin-bottom: .6rem; }
.gu-detalle-cab h2 { font-size: 1.4rem; line-height: 1.2; margin: 0; text-wrap: balance; }
.gu-detalle-cab p { margin: .45rem 0 0; color: var(--muted); font-size: .92rem; }
.gu-detalle-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.gu-detalle-cuerpo { padding: 1.4rem 1.6rem; }
.gu-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; counter-reset: paso; }
.gu-paso { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.gu-paso::before {
  counter-increment: paso; content: counter(paso); width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--gt-a), var(--gt-b)); box-shadow: 0 6px 14px color-mix(in srgb, var(--gt-a) 30%, transparent);
}
.gu-paso p { margin: .35rem 0 0; font-size: .95rem; line-height: 1.55; }
.gu-paso img { display: block; max-width: 100%; margin-top: .6rem; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.gu-video { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.gu-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gu-detalle-pie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.gu-detalle-pie .muted { font-size: .82rem; }
.gu-preparacion { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; background: var(--status-pendiente-bg); color: var(--status-pendiente-ink); font-size: .92rem; line-height: 1.5; }
.gu-preparacion span:first-child { font-size: 1.3rem; }
.gu-relacionadas { margin-top: 1.4rem; }
.gu-relacionadas h3 { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.gu-relacionadas .gu-lista { margin-top: 0; }

@media (max-width: 760px) {
  .gu-cabecera { padding: 1.4rem 1.2rem; }
  .gu-cabecera h1 { font-size: 1.5rem; }
  .gu-cuenta { margin-left: 0; width: 100%; }
  .gu-detalle-cab, .gu-detalle-cuerpo { padding: 1.1rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .gu > *, .gu-luz { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Formularios, rehecho el 13/09/2026 por la tarde. Prefijo fo-. Pasos con
   número y color a la izquierda; a la derecha el móvil de mentira con el
   formulario de verdad (o la pantalla de la cámara, en el guion).
   ═══════════════════════════════════════════════════════════════════ */
.fo-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem 1.6rem; margin-top: 1.2rem; align-items: start; }
.fo-pasos { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.fo-bloque {
  position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .95rem 1rem 1rem;
  transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.fo-bloque::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 14px 0 0 14px; background: linear-gradient(180deg, var(--fo-a), var(--fo-b)); }
.fo-bloque:focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); border-color: var(--fo-a); }
.fo-cabecera { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .7rem; }
.fo-cabecera > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fo-cabecera strong { font-size: 1rem; }
.fo-cabecera .muted { font-size: .8rem; line-height: 1.4; }
.fo-num {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--fo-a), var(--fo-b));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--fo-a) 30%, transparent);
}
.fo-bloque .copy-row { margin-top: 0; }
.fo-bloque input[type="text"] { font-size: .9rem; }
.fo-canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .55rem; }
.fo-canal {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .86rem; font-weight: 700; text-decoration: none; cursor: pointer; text-align: left;
  transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.fo-canal:hover { transform: translateY(-2px); border-color: var(--fo-a); box-shadow: 0 8px 18px rgba(20, 26, 38, .08); }
.fo-canal-icono { width: 1.9rem; height: 1.9rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); flex: 0 0 auto; }
.fo-canal-whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.fo-canal-whatsapp .fo-canal-icono { background: rgba(255, 255, 255, .22); border-color: transparent; }
.fo-canal-whatsapp:hover { border-color: #1DB358; filter: brightness(1.05); }
.fo-canal-email { background: var(--accent); border-color: var(--accent); color: var(--sobre-accent); }
.fo-canal-email .fo-canal-icono { background: rgba(255, 255, 255, .18); border-color: transparent; }
.fo-canal-email:hover { border-color: var(--accent-ink); filter: brightness(1.06); }
.fo-fichas { display: flex; gap: .45rem; flex-wrap: wrap; }
.fo-ref-campo { margin-top: .7rem; max-width: 380px; }
.fo-ref-campo[hidden] { display: none; }
.fo-atajos { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .2rem; }
.fo-previa { position: sticky; top: 1rem; }
.fo-movil-pantalla { padding: 0; min-height: 0; overflow: hidden; display: block; }
.fo-movil-pantalla iframe { display: block; width: 100%; height: 520px; border: 0; background: var(--paper); }

/* La pantalla de la cámara del guion. */
.fo-camara {
  position: relative; border-radius: 22px; aspect-ratio: 9 / 16; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 30%, #3A3F55 0%, #1B1F2E 60%, #0F121B 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: .9rem;
}
.fo-camara-rec { position: absolute; top: .9rem; left: .9rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #fff; }
.fo-camara-rec i { width: .55rem; height: .55rem; border-radius: 50%; background: #FF4D4D; box-shadow: 0 0 0 0 rgba(255, 77, 77, .7); animation: bv-latir 1.4s ease-out infinite; }
.fo-camara-cara { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font-size: 4.2rem; opacity: .35; filter: grayscale(1); }
.fo-camara-pregunta { position: relative; border-radius: 14px; padding: .8rem .9rem; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); color: #fff; }
.fo-camara-num { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-bottom: .3rem; }
.fo-camara-pregunta p { margin: 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; font-weight: 600; min-height: 2.7em; }
.fo-camara-pregunta p[data-vacia="1"] { opacity: .55; font-style: italic; }
.fo-camara-puntos { display: flex; justify-content: center; gap: .45rem; margin-top: .7rem; }
.fo-camara-puntos button { width: .6rem; height: .6rem; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: transform .15s var(--ease-out), background .15s var(--ease-out); }
.fo-camara-puntos button[aria-pressed="true"] { background: #fff; transform: scale(1.3); }
@media (max-width: 760px) {
  .fo-editor { grid-template-columns: 1fr; }
  .fo-previa { position: static; }
  .fo-movil-pantalla iframe { height: 460px; }
}

/* ═══════════════════════════════════════════════════════════════════
   La ruleta de la suerte (20/09/2026). Prefijo ru-. El editor de premios a
   la izquierda y, a la derecha, la MISMA rueda que verá el cliente
   (lib/ruleta.js) — no una imitación.
   ═══════════════════════════════════════════════════════════════════ */
.ru-premios { display: flex; flex-direction: column; gap: .6rem; }
.ru-premio { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: .6rem .7rem .7rem; }
.ru-premio-cab { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.ru-premio-num {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: #fff; background: var(--ru-color, #5B2FD6);
}
.ru-premio-pct { margin-left: auto; font-size: .82rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.ru-campo-color, .ru-premio-cab .ru-campo-color { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--muted); font-weight: 700; }
.ru-campo-color input[type="color"] {
  width: 2rem; height: 1.7rem; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer;
}
.ru-quitar {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font: inherit; font-size: .8rem; line-height: 1; cursor: pointer;
}
.ru-quitar:hover { border-color: #C14851; color: #C14851; }
.ru-quitar[disabled] { opacity: .35; cursor: not-allowed; }
/* Dos columnas fijas, no auto-fit: con tres, cada hueco se quedaba en 145px y
   el desplegable cortaba el texto («Descuento er…»). */
.ru-premio-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .6rem; }
.ru-premio-campos .field { margin: 0; }
.ru-premio-campos .field label { font-size: .74rem; }
/* Sin el 100% los desplegables se quedan con su ancho natural y cortan el
   texto («Descuento er…»). */
.ru-premio-campos input, .ru-premio-campos select { font-size: .86rem; width: 100%; min-width: 0; }
.ru-ancho { grid-column: 1 / -1; }
.ru-estilo { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.ru-cifra { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 800; }
.ru-radio { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .2rem; cursor: pointer; }
.ru-radio + .ru-radio { border-top: 1px solid var(--line); }
.ru-radio > span { display: flex; flex-direction: column; gap: .1rem; }
.ru-radio .muted { font-size: .8rem; line-height: 1.4; }
.ru-seguro-lista { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.ru-seguro-lista strong { color: var(--ink); }
.ru-nota, .ru-legal, .ru-aviso-fija { font-size: .8rem; line-height: 1.5; margin-top: .7rem; }
.ru-aviso-fija { margin: .2rem 0 0; padding: .6rem .75rem; border-radius: 10px; background: #FFF7E8; color: #7A5B12; border: 1px solid #F0D9A8; }
.ru-legal { border-top: 1px solid var(--line); padding-top: .8rem; }

/* El móvil de la derecha. */
.ru-movil { display: flex; flex-direction: column; gap: .7rem; text-align: center; }
.ru-previa-titulo { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.ru-hueco { position: relative; }
.ru-hueco .ru-svg { display: block; width: 100%; height: auto; }
.ru-previa-boton { margin: 0; }
.ru-previa-premio { margin: 0; font-size: .9rem; font-weight: 700; color: var(--ink); }
.ru-previa-pie { margin: 0; font-size: .72rem; line-height: 1.4; }
@media (max-width: 520px) { .ru-premio-campos { grid-template-columns: 1fr; } }

/* La ruleta de verdad, en la pantalla de gracias del formulario
   (recoger.html / recoger.php). */
.ru-publica-titulo { margin: 0 0 .8rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; text-align: center; }
.ru-publica-rueda { max-width: 340px; margin: 0 auto; }
.ru-publica-rueda .ru-svg { display: block; width: 100%; height: auto; }
.ru-publica-premio { margin-top: 1rem; text-align: center; }
.ru-publica-toca { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.ru-publica-codigo {
  display: inline-flex; align-items: center; gap: .6rem; margin: .8rem 0 0; padding: .6rem 1rem;
  border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft);
}
.ru-publica-codigo span { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ru-publica-codigo b { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; }
.ru-publica-email { margin: .7rem 0 0; font-size: .85rem; line-height: 1.5; }
/* El QR del cupón y los botones de guardarlo, en la pantalla del premio
   (20/09/2026). El QR solo sale con los cupones de Loalia: es el que el
   empleado escanea en la tienda para validarlo. */
.ru-publica-qr { max-width: 220px; margin: 1rem auto .2rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.ru-publica-qr svg { display: block; width: 100%; height: auto; }
.ru-publica-guardar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .9rem; }
.ru-publica-guardado { margin: .6rem 0 0; font-size: .85rem; line-height: 1.5; }

/* La pasarela real (13/09/2026): chapa de «pago seguro» y los medios de pago.
   Y una regla general que faltaba: lo que lleva `hidden` no se ve, aunque su
   clase le ponga display (la chapa de demo, el cartel de planes…). */
[hidden] { display: none !important; }
.badge-seguro { background: #E6F2EC; color: #2F7A5C; }
:root[data-theme="dark"] .badge-seguro { background: #1F3A2C; color: #7FD3AA; }
.pago-seguro { border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; margin-bottom: .9rem; background: var(--paper); }
.pago-seguro-medios { display: flex; gap: .5rem; flex-wrap: wrap; }
.pago-seguro-medios span { font-size: .8rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════
   La ventana de pago de Mi cuenta (13/09/2026, tarde; segunda vuelta,
   Rafael: «esfuérzate mucho más»). Dos columnas: a la izquierda el plan,
   sobre su color, con el precio (tachado el mensual cuando es anual) y lo
   que incluye; a la derecha, cómo pagar: periodo, resumen con «Hoy pagas
   0 €» y la fecha real del primer cobro, botón, medios de pago.
   ═══════════════════════════════════════════════════════════════════ */
.modal-pago { max-width: 860px; padding: 0; gap: 0; overflow: hidden; }
.modal-pago .modal-close { background: rgba(255, 255, 255, .92); border-color: transparent; color: #1B1340; }
.pago-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.pago-lado {
  position: relative; overflow: hidden; isolation: isolate; padding: 1.8rem 1.7rem 1.7rem; color: #fff;
  background: linear-gradient(160deg, #4B31D3 0%, #952AC5 55%, #D43B8D 100%);
  display: flex; flex-direction: column; gap: .6rem;
}
.modal-pago[data-plan-elegido="agencia"] .pago-lado { background: linear-gradient(160deg, #952AC5 0%, #D43B8D 50%, #C14851 100%); }
.pago-luz { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .5; pointer-events: none; animation: bv-flotar 14s ease-in-out infinite alternate; }
.pago-luz-1 { width: 240px; height: 240px; background: #FFB020; top: -120px; right: -40px; }
.pago-luz-2 { width: 200px; height: 200px; background: #5BC4FF; bottom: -120px; left: -30px; animation-delay: -6s; }
.pago-chapa { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4); }
.pago-lado .badge { align-self: flex-start; }
.pago-lado h3 { font-size: 1.7rem; margin: .5rem 0 0; color: #fff; line-height: 1.1; }
.pago-lema { margin: 0; font-size: .9rem; opacity: .9; }
.pago-precio { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.pago-tachado { font-size: 1.05rem; font-weight: 700; opacity: .65; text-decoration: line-through; }
.pago-tachado[hidden] { display: none; }
.pago-cifra { font-family: var(--font-display); font-size: 2.9rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.pago-cifra.salta { animation: pago-salto .45s var(--ease-out); }
@keyframes pago-salto { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
.pago-cada { font-size: .9rem; font-weight: 600; opacity: .9; width: 100%; }
.pago-ahorro { align-self: flex-start; font-size: .78rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; background: #FFD166; color: #4A3200; }
.pago-ahorro[hidden] { display: none; }
.pago-ventajas { list-style: none; margin: .7rem 0 0; padding: .9rem 0 0; border-top: 1px solid rgba(255, 255, 255, .25); display: grid; gap: .4rem; }
.pago-ventajas li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; line-height: 1.35; }
.pago-ventajas li::before { content: "✓"; flex: 0 0 auto; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: #4B31D3; background: #fff; margin-top: .05rem; }
.pago-extras { margin: .5rem 0 0; font-size: .8rem; line-height: 1.4; padding: .6rem .75rem; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.pago-extras[hidden] { display: none; }

.pago-cuerpo { padding: 1.6rem 1.7rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.pago-cuerpo-titulo { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pago-periodo { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.pago-periodo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 999px; padding: .6rem .8rem;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink-soft); background: transparent; cursor: pointer;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.pago-periodo-btn[data-active="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(20, 26, 38, .14); }
.pago-ahorro-chip { font-size: .68rem; font-weight: 800; padding: .12rem .45rem; border-radius: 999px; background: #E6F2EC; color: #2F7A5C; }
:root[data-theme="dark"] .pago-ahorro-chip { background: #1F3A2C; color: #7FD3AA; }
.pago-resumen { border: 1px solid var(--line); border-radius: 14px; padding: .5rem 1rem .8rem; background: var(--paper); }
.pago-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; font-size: .9rem; border-bottom: 1px dashed var(--line); }
.pago-fila:last-of-type { border-bottom: 0; }
.pago-fila[hidden] { display: none; }
.pago-fila b { font-variant-numeric: tabular-nums; }
.pago-gratis { color: var(--success); }
.pago-fila-hoy { font-size: 1rem; }
.pago-fila-hoy b { font-family: var(--font-display); font-size: 1.35rem; color: var(--accent-ink); }
.pago-fila-suave { color: var(--muted); font-size: .82rem; }
.pago-resumen-nota { margin: .4rem 0 0; font-size: .76rem; color: var(--muted); }
.pago-linea { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .75rem .85rem; border-radius: 14px; background: var(--accent-soft); }
.pago-linea[hidden] { display: none; }
.pago-paso { display: flex; flex-direction: column; gap: .15rem; font-size: .76rem; color: var(--ink-soft); line-height: 1.3; position: relative; padding-left: .9rem; }
.pago-paso::before { content: ""; position: absolute; left: 0; top: .32rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.pago-paso:last-child::before { background: var(--magenta); }
.pago-paso b { color: var(--ink); font-size: .8rem; }
.pago-cta { padding: .95rem 1rem; font-size: 1.02rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 10px 24px rgba(91, 47, 214, .3); }
.pago-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(91, 47, 214, .38); }
.pago-seguro-nota { margin: -.2rem 0 0; font-size: .78rem; color: var(--muted); text-align: center; }
.pago-medios { display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pago-medio { display: inline-flex; align-items: center; justify-content: center; height: 1.7rem; padding: 0 .6rem; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); font-weight: 800; font-size: .72rem; letter-spacing: .02em; }
.pago-medio-visa { color: #1A1F71; font-style: italic; font-size: .82rem; }
.pago-medio-mc { gap: 0; padding: 0 .5rem; }
.pago-medio-mc i { width: .95rem; height: .95rem; border-radius: 50%; background: #EB001B; display: block; }
.pago-medio-mc i + i { background: #F79E1B; margin-left: -.35rem; opacity: .95; }
.pago-medio-paypal { color: #003087; font-style: italic; }
.pago-medio-paypal b { color: #009CDE; font-weight: 800; }
.pago-medio-stripe { color: #635BFF; font-size: .8rem; }
.pago-pie { margin: 0; font-size: .74rem; color: var(--muted); text-align: center; }
@media (max-width: 720px) {
  .modal-pago { max-width: 520px; }
  /* En bloque, no en rejilla: dentro del cuadro (flex + scroll) la fila de
     arriba se encogía y tapaba el precio. */
  .pago-rejilla { display: block; }
  .pago-lado { padding: 1.5rem 1.3rem 1.3rem; }
  .pago-lado .pago-ventajas { display: none; }
  .pago-cuerpo { padding: 1.2rem 1.3rem 1.3rem; }
  .pago-linea { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pago-cifra.salta, .pago-luz { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Importar, rehecho el 13/09/2026 por la tarde. Prefijo im-. Cuatro tarjetas
   grandes para elegir el origen; solo se ve un camino, con los pasos
   numerados de siempre (fo-bloque) y zonas para arrastrar el archivo.
   ═══════════════════════════════════════════════════════════════════ */
.im-origenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: 1rem; }
.im-origen {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: .95rem 1rem 1rem; position: relative; overflow: hidden;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.im-origen::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(135deg, var(--im-a), var(--im-b)); transition: opacity .2s var(--ease-out); }
.im-origen:hover { transform: translateY(-2px); border-color: var(--im-a); }
.im-origen:hover::after { opacity: .06; }
.im-origen[aria-pressed="true"] { border-color: var(--im-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--im-a) 25%, transparent), 0 12px 26px color-mix(in srgb, var(--im-a) 16%, transparent); }
.im-origen[aria-pressed="true"]::after { opacity: .08; }
.im-origen-icono { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--im-a), var(--im-b)); margin-bottom: .3rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--im-a) 30%, transparent); }
.im-origen strong { font-size: .95rem; }
.im-origen .muted { font-size: .78rem; }
.im-origen[aria-pressed="true"]::before { content: "✓"; position: absolute; top: .7rem; right: .75rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; background: var(--im-a); }
.im-panel { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .9rem; }
.im-panel[hidden] { display: none; }
.im-panel > h2 { margin: 0 0 .1rem; }
.im-paso .fo-cabecera .muted { font-size: .84rem; }
.im-paso form[style] { margin-top: .2rem !important; }
.im-espera { margin: 0; font-size: .86rem; color: var(--muted); padding: .8rem .9rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper); }
.im-form { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.im-drop {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center;
  padding: 1.3rem 1rem; border: 2px dashed color-mix(in srgb, var(--fo-a) 45%, var(--line)); border-radius: 14px; background: var(--paper); cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out);
}
.im-drop:hover, .im-drop.arrastrando { border-color: var(--fo-a); background: color-mix(in srgb, var(--fo-a) 6%, var(--paper)); transform: translateY(-1px); }
.im-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.im-drop-icono { font-size: 1.7rem; line-height: 1; }
.im-drop-texto { font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.im-drop-nombre { font-size: .82rem; color: var(--accent-ink); font-weight: 700; }
.im-drop-nombre:empty { display: none; }
.im-drop.con-archivo { border-style: solid; border-color: var(--success); background: #E6F2EC; }
:root[data-theme="dark"] .im-drop.con-archivo { background: #1F3A2C; }
.im-drop.con-archivo .im-drop-texto { display: none; }
/* La nota de «ninguna plataforma se queda fuera», en fichas. */
.im .nota-plataformas { margin-top: 1.4rem; }
.im .nota-plataformas .lista-plataformas { display: flex; flex-wrap: wrap; gap: .35rem; line-height: 1.3; }
.im .nota-plataformas .lista-plataformas strong { font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
@media (max-width: 640px) { .im-origenes { grid-template-columns: 1fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   Tanda A del repaso de pantallas (13/09/2026, tarde): Testimonios,
   Recompensas, Emails y Analítica. Mismos ingredientes que el resto.
   ═══════════════════════════════════════════════════════════════════ */
/* Testimonios: la moderación como dos tarjetas que se eligen. */
.tst-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-top: 1rem; }
.tst-modo {
  position: relative; display: flex; align-items: flex-start; gap: .8rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 1rem 1.1rem 1rem;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.tst-modo input { position: absolute; opacity: 0; width: 0; height: 0; }
.tst-modo:hover { transform: translateY(-2px); border-color: var(--tm-a); }
.tst-modo:has(input:checked) { border-color: var(--tm-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-a) 25%, transparent), 0 12px 26px color-mix(in srgb, var(--tm-a) 14%, transparent); background: color-mix(in srgb, var(--tm-a) 4%, var(--surface)); }
.tst-modo:has(input:disabled) { cursor: not-allowed; border-style: dashed; }
.tst-modo:has(input:focus-visible) { outline: 2px solid var(--tm-a); outline-offset: 2px; }
.tst-modo-icono { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--tm-a), var(--tm-b)); box-shadow: 0 6px 14px color-mix(in srgb, var(--tm-a) 30%, transparent); }
.tst-modo-texto { display: block; min-width: 0; padding-right: 1.6rem; line-height: 1.45; }
.tst-modo-texto strong { font-size: 1rem; }
.tst-modo-check { position: absolute; top: .8rem; right: .85rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; background: var(--tm-a); opacity: 0; transform: scale(.6); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.tst-modo:has(input:checked) .tst-modo-check { opacity: 1; transform: none; }
/* La lista: resumen de un vistazo y la barra de filtros en su tarjeta. */
.tst-resumen { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .9rem; }
.tst-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid transparent; background: var(--tc-bg); color: var(--tc); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.tst-chip b { font-family: var(--font-display); font-size: 1.05rem; }
button.tst-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20, 26, 38, .1); }
.tst-chip-media { cursor: default; }
.tst-importar { margin-left: auto; border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tst-barra { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 1rem 1.1rem .2rem; margin-bottom: 1rem; }
.tst-barra h2 { margin: 0; }
/* Recompensas: el móvil con el premio en vivo. */
.interruptor-suelta { border: 0; padding: 0; background: transparent; margin-top: .2rem; }
.rec-movil { gap: .4rem; }
.rec-premio { width: 100%; display: flex; align-items: flex-start; gap: .55rem; text-align: left; padding: .6rem .7rem; border-radius: 12px; background: linear-gradient(135deg, #FFF3D6, #FFE1E7); border: 1px solid #F3D9A6; margin-top: .2rem; animation: bv-subir .35s var(--ease-out) both; }
.rec-premio-video { background: linear-gradient(135deg, #EDE7FB, #FDE7F3); border-color: #D9C8FF; }
.rec-premio-icono { font-size: 1.1rem; line-height: 1; }
.rec-premio p { margin: 0; font-size: .78rem; line-height: 1.35; font-weight: 700; color: #4A3200; }
.rec-premio-video p { color: #4423A8; }
.rec-falso { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .45rem; margin-top: .6rem; opacity: .55; }
.rec-falso-estrellas { color: var(--gold); letter-spacing: .1em; font-size: 1.1rem; }
.rec-falso-linea { width: 100%; height: 2.2rem; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface); }
.rec-falso-linea.corta { height: 1.2rem; width: 70%; }
.rec-falso-boton { width: 100%; padding: .45rem; border-radius: 8px; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; text-align: center; }
/* Emails. */
.em-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; margin-top: 1rem; }
.em-tipo { position: relative; display: flex; align-items: flex-start; gap: .65rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
.em-tipo > span[aria-hidden]:first-child { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--et-a), var(--et-b)); }
.em-tipo > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.em-tipo strong { font-size: .9rem; }
.em-tipo .muted { font-size: .78rem; line-height: 1.4; }
.em-tipo-cta { border-color: color-mix(in srgb, var(--et-a) 45%, var(--line)); background: color-mix(in srgb, var(--et-a) 5%, var(--surface)); padding-right: 2.2rem; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.em-tipo-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--et-a) 16%, transparent); }
.em-tipo-cta .bt-flecha { position: absolute; right: .9rem; top: .9rem; color: var(--et-a); font-weight: 800; }
.em-lista-titulo { text-align: left; margin: 1.3rem 0 .5rem; }
.em-lista { display: flex; flex-direction: column; gap: .6rem; }
.em-lista details.card { border-left: 4px solid var(--accent); border-radius: 12px; transition: box-shadow .18s var(--ease-out); }
.em-lista details.card[open] { box-shadow: 0 10px 24px rgba(20, 26, 38, .08); }
.em .badge-demo { font-size: .72rem; padding: .3rem .7rem; vertical-align: middle; }
/* Analítica: tres cifras y una gráfica de barras. */
.an-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: 1rem; }
.an-cifra { display: flex; align-items: center; gap: .8rem; padding: 1rem 1rem .9rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); position: relative; overflow: hidden; }
.an-cifra::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--an-a), var(--an-b)); }
.an-cifra-icono { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--an-a), var(--an-b)); }
.an-cifra > div > b { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.an-cifra > div > div { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.an-grafica-caja { margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 1rem 1.1rem 1.1rem; }
.an-grafica-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.an-leyenda { display: flex; gap: .9rem; font-size: .76rem; font-weight: 700; color: var(--muted); }
.an-leyenda i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.an-leyenda-vistas { background: linear-gradient(135deg, #5B2FD6, #952AC5); }
.an-leyenda-clics { background: linear-gradient(135deg, #D43B8D, #C14851); }
.an-grafica { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; align-items: end; height: 170px; margin-top: .9rem; padding-top: 1rem; }
.an-grafica:empty { display: none; }
.an-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; min-width: 0; }
.an-barras { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.an-barra { width: 42%; max-width: 18px; border-radius: 5px 5px 2px 2px; min-height: 3px; position: relative; transform-origin: bottom; animation: an-crecer .6s var(--ease-out) both; }
.an-barra-vistas { background: linear-gradient(180deg, #952AC5, #5B2FD6); }
.an-barra-clics { background: linear-gradient(180deg, #D43B8D, #C14851); }
.an-barra:hover::after { content: attr(data-valor); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 800; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .35rem; white-space: nowrap; z-index: 1; }
@keyframes an-crecer { from { transform: scaleY(.1); opacity: .4; } to { transform: none; opacity: 1; } }
.an-dia-et { font-size: .64rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.an-vacio { margin: .6rem 0 0; font-size: .85rem; }
@media (max-width: 640px) { .an-grafica { height: 130px; } .an-dia-et { font-size: .56rem; } .tst-importar { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .an-barra, .rec-premio { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Tanda B del repaso de pantallas (13/09/2026, tarde): Integraciones y
   QR y cartelería.
   ═══════════════════════════════════════════════════════════════════ */
/* Integraciones. */
.int-tiendas { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.int-tiendas:empty { display: none; }
.int-tienda { border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; background: var(--surface); border-left: 4px solid #2F7A5C; transition: box-shadow .18s var(--ease-out); }
.int-tienda:hover { box-shadow: 0 10px 24px rgba(20, 26, 38, .08); }
.int-conectar { margin-top: .2rem; }
.int-conectar .fo-num { font-size: .95rem; }
.int-manual { margin-top: 1rem; border: 1px dashed var(--line); border-radius: 14px; padding: .8rem 1rem; }
.int-manual[open] { background: var(--surface); }
.int-manual > summary { cursor: pointer; font-size: .9rem; font-weight: 700; }
.int-manual > div { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.int-bloque { display: flex; flex-direction: column; gap: .8rem; }
.int-bloque + .int-bloque { margin-top: 1rem; }
.int-bloque .fo-cabecera { margin-bottom: 0; }
.int-bloque .fo-cabecera h3 { margin: 0; }
.int-bloque .fo-cabecera p { margin: 0; }
.int-bloque .fo-num { font-size: .95rem; }
.int-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: 1rem; }
.int-ficha { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: .86rem; }
.int-ficha > span { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--if-a), var(--if-b)); }
.int .bv-card-cab { align-items: flex-start; }
.int .bv-card-cab h2 { margin: 0; }
.card.int > .bv-card-cab + .fo-bloque, .card.int > .bv-card-cab + .int-tiendas { margin-top: 1rem; }
/* QR y cartelería: el índice de chips. */
.qrc-indice { display: none; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; position: sticky; top: .5rem; z-index: 5; }
/* Más peso que [data-vista].vista-activa{display:block}: el índice es un <nav> con data-vista. */
[data-vista].vista-activa.qrc-indice { display: flex; }
.qrc-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(20, 26, 38, .06); transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.qrc-chip:hover { transform: translateY(-1px); border-color: var(--qc); box-shadow: 0 8px 18px rgba(20, 26, 38, .12); }
.qrc-chip.is-activo { border-color: var(--qc); color: var(--qc); background: color-mix(in srgb, var(--qc) 8%, var(--surface)); }
.qrc-chip span[aria-hidden] { font-size: .95rem; }
.qrc .bv-card-cab { align-items: flex-start; }
.qrc .bv-card-cab h2 { margin: 0; }
.qrc .qr-editor { margin-top: 1.2rem; }
.qrc .qr-editor-acciones .btn-descarga { align-self: center !important; }
.qrc .interruptor-suelta { align-items: center; }
.qrc .qr-grupo-titulo label { margin: 0; font-size: inherit; color: inherit; }
/* Los sellos, en tarjetas. */
.qrc-sello-texto { margin-top: 1rem; }
.qrc-sellos { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.qrc-sello { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: .9rem 1rem 1rem; display: flex; flex-direction: column; align-items: flex-start; }
.qrc-sello-titulo { display: block; font-size: .85rem; font-weight: 800; margin-bottom: .55rem; }
.qrc-sello-lienzo { width: 100%; border-radius: 12px; background: repeating-linear-gradient(45deg, #FAFAFC 0 10px, #F3F3F8 10px 20px); padding: .8rem; border: 1px solid var(--line); box-sizing: border-box; }
.qrc-sello-lienzo canvas { border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(20, 26, 38, .12); margin: 0 auto; }
.qrc-plataformas { margin-top: 1.2rem; }
.qrc-plataformas-lista { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; font-size: .87rem; color: var(--ink-soft); }
.qrc-plataformas-lista > details { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; background: var(--surface); }
.qrc-plataformas-lista > details[open] { border-color: var(--accent); }
.qrc-3d { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: flex-start; }
@media (max-width: 720px) { .qrc-sellos { grid-template-columns: 1fr; } .qrc-indice { position: static; } }

/* ═══════════════════════════════════════════════════════════════════
   Tanda C del repaso de pantallas (13/09/2026, tarde): Widgets.
   ═══════════════════════════════════════════════════════════════════ */
.wd .bv-card-cab { align-items: flex-start; }
.wd .bv-card-cab h2, .wd .bv-card-cab h3 { margin: 0; }
.wd-grupos { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.wd-grupo { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .85rem 1rem 1rem 1.1rem; transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out); }
.wd-grupo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px; background: var(--wd, var(--accent)); opacity: .85; }
.wd-grupo:hover, .wd-grupo:focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, .07); border-color: color-mix(in srgb, var(--wd, var(--accent)) 45%, var(--line)); }
.wd-plantillas { margin-top: 1rem; }
.wd-grupo-titulo { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 800; margin: 0 0 .65rem; }
.wd-grupo-titulo i { font-style: normal; width: 1.9rem; height: 1.9rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--wd, var(--accent)), color-mix(in srgb, var(--wd, var(--accent)) 60%, #fff)); }
.wd-grupo-interruptores { display: flex; flex-direction: column; gap: .7rem; }
.wd-amedida { padding: .9rem 1rem; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.wd-previa-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .55rem; }
.wd-previa-lienzo { border-radius: 16px; padding: 1.6rem; background: radial-gradient(circle at 30% 20%, #1B1735, #0A0A0F 70%); display: flex; justify-content: center; box-shadow: 0 16px 36px rgba(20, 26, 38, .2); }
.wd-previa-web { margin-top: 1rem; }
/* Las tarjetas de formato de «Pégalo en tu web». */
.wd-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.wd-formato { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.wd-formato:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(20, 26, 38, .1); }
.wd-formato.is-activo { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.wd-formato:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd-formato strong { font-size: .86rem; line-height: 1.25; }
.wd-formato .muted { font-size: .74rem; line-height: 1.3; }
.wd-formato-icono { width: 2rem; height: 2rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--paper); border: 1px solid var(--line); margin-bottom: .2rem; }
.wd-formato.is-activo .wd-formato-icono { background: var(--accent); color: #fff; border-color: var(--accent); }
.wd .fo-bloque .fo-cabecera { margin-bottom: .6rem; }

/* «Hacer una foto» del formulario de reseña (13/09/2026): solo en pantallas
   táctiles; en un ordenador capture no abre nada y confundiría. */
@media (hover: hover) and (pointer: fine) { .avatar-camara { display: none; } }

/* El email tal como llega, dentro de la lista de Emails (13/09/2026). */
.em-previa { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #F4F4FA; margin-top: .6rem; }
@media (max-width: 640px) { .em-previa { height: 480px; } }

/* ═══ Estética avanzada, rehecha el 13/09/2026: apartados en cajas de
   color (.wd-grupo), filas etiqueta/control e interruptores. ═══ */
h4.wd-grupo-titulo { margin: 0 0 .5rem; }
.avz-filas { display: flex; flex-direction: column; }
.avz-fila { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .6rem 0; border-top: 1px dashed var(--line); }
.avz-fila:first-child { border-top: 0; padding-top: .2rem; }
/* En bloque, no en columna flex: dentro de una columna flex la rejilla de
   plantillas se estiraba a más del doble de su altura. */
.avz-fila-entera { display: block; }
.avz-fila-entera .avz-etiqueta { display: block; }
.avz-etiqueta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.avz-etiqueta strong { font-size: .9rem; }
.avz-etiqueta .muted { font-size: .78rem; line-height: 1.35; }
.avz-fila select, .avz-texto, .avz-numero { flex: 0 0 auto; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: .88rem; background: var(--surface); color: var(--ink); }
.avz-fila select { max-width: 260px; }
.avz-texto { width: 220px; max-width: 100%; }
.avz-numero { width: 96px; }
.avz-fila input[type="color"] { width: 3rem; height: 2.2rem; padding: .15rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.avz-fila .interruptor { margin-top: 0; }
.avz-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; margin-top: .6rem; }
.avz-plantilla { position: relative; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: .55rem; font-family: inherit; font-size: .72rem; text-align: center; overflow: hidden; cursor: pointer; transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.avz-plantilla:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 18px rgba(20, 26, 38, .1); }
.avz-plantilla.is-activa { border-color: var(--accent); background: var(--accent-soft); }
.avz-plantilla.is-bloqueada { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); cursor: not-allowed; }
.avz-plantilla.is-bloqueada:hover { transform: none; box-shadow: none; }
@media (max-width: 640px) { .avz-fila { flex-wrap: wrap; } .avz-fila select { max-width: 100%; } }

/* ═══ Mi cuenta, rehecha el 13/09/2026 (Rafael: «todo muy junto, sin
   colores ni efectos; apenas se distinguen los apartados»). ═══ */
.cu { gap: 1.4rem; }
.cu-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 1.8rem 2rem; color: #fff; background: linear-gradient(120deg, #4423A8, #5B2FD6 45%, #952AC5); box-shadow: 0 18px 40px rgba(68, 35, 168, .22); }
.cu-hero-cuerpo { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.2rem; }
.cu-hero-avatar { flex: 0 0 auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .5); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: #fff; }
.cu-hero h1 { color: #fff; }
.cu-hero .eyebrow, .cu-hero-eyebrow { color: #E9E3FF; }
.cu-hero .eyebrow::before { background: #FFD166; }
.cu-hero .muted, .cu-hero-texto { color: rgba(255, 255, 255, .82); max-width: 60ch; }
.cu-indice { margin: 0; top: .5rem; }
.cu-card .bv-card-cab { align-items: flex-start; }
.cu-card .bv-card-cab h2 { margin: 0; }
.cu-icono-rojo { background: linear-gradient(135deg, #C14851, #A8453B); color: #fff; }
.cu-peligro { background: color-mix(in srgb, #C14851 4%, var(--surface)); }
.cu-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cu-negocio .qr-grupo-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .cu-dos, .cu-negocio .qr-grupo-campos { grid-template-columns: 1fr; } }
.cu-bloque { display: flex; flex-direction: column; gap: .8rem; }
.cu-bloque .fo-cabecera { margin-bottom: 0; }
.cu-bloque .fo-cabecera h3 { margin: 0; }
.cu-bloque .fo-num { font-size: .95rem; }
.cu-negocio { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.cu-logo { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 150px; }
.cu-logo-previa { width: 110px; height: 110px; border-radius: 24px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(68, 35, 168, .12); }
/* El plan actual, como una tarjeta destacada; a su lado, las filas. */
.cu-plan { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cu-plan-actual { position: relative; overflow: hidden; border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; background: linear-gradient(135deg, #FFF6DE, #FDE7F3); border: 1px solid #F3D9A6; display: flex; flex-direction: column; gap: .35rem; }
.cu-plan-actual::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #D9A544, #C14851); }
.cu-plan-etiqueta { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A6416; }
.cu-plan-nombre { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.cu-plan-botones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.cu-plan-botones:empty { display: none; }
.cu-plan-filas { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cu-fila { padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.cu-fila > .muted:first-child { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.cu-fila > .muted:first-child i { font-style: normal; width: 1.7rem; height: 1.7rem; border-radius: 8px; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.cu-plan-filas .card-upsell { margin-top: .4rem; }
.history-item span:first-child { display: inline-flex; align-items: center; gap: .55rem; }
.cu-punto { width: .6rem; height: .6rem; border-radius: 50%; background: linear-gradient(135deg, #5B2FD6, #952AC5); flex: 0 0 auto; }
.cu-espacios { display: flex; flex-direction: column; gap: .5rem; }
.cu-espacios:empty { display: none; }
.cu-espacio { padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); border-left: 4px solid #D43B8D; }
@media (max-width: 720px) { .cu-plan { grid-template-columns: 1fr; } .cu-hero { padding: 1.4rem 1.2rem; } .cu-hero-cuerpo { align-items: flex-start; } .cu-indice { position: static; } }

/* El móvil de Recompensas copia el formulario real (13/09/2026, noche). */
.rec-movil .movil-h1 { font-size: 1.05rem; margin-bottom: .2rem; }
.rec-sub { font-size: .7rem; margin: 0 0 .5rem; line-height: 1.4; }
.rec-banner { width: 100%; background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-s); padding: .55rem .6rem; margin-bottom: .3rem; font-size: .72rem; line-height: 1.4; text-align: center; font-weight: 600; animation: bv-subir .35s var(--ease-out) both; }
.rec-legal { font-size: .62rem; line-height: 1.45; margin: 0 0 .5rem; }
.rec-falso { opacity: 1; gap: .35rem; align-items: stretch; text-align: left; margin-top: .3rem; }
.rec-falso-etiqueta { font-size: .68rem; font-weight: 700; color: var(--ink-soft); margin-top: .2rem; }
.rec-falso-estrellas { text-align: left; }
.rec-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.rec-tabs .btn { padding: .3rem .5rem; font-size: .66rem; border-radius: 8px; }
.rec-tabs .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.rec-falso-linea { height: 3.4rem; }
.rec-falso-boton { margin-top: .2rem; }

/* El email de agradecimiento en vivo, en Recompensas (13/09/2026, noche). */
.rec-email { margin-top: .2rem; }
.rec-email-barra { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rec-email-modos { display: flex; gap: .4rem; flex-wrap: wrap; }
.rec-email-asunto { font-size: .82rem; margin: 0 0 .5rem; }
.rec-email-asunto:empty { display: none; }
.rec-email-marco { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #F4F4FA; }
.rec-email-previa { display: block; width: 100%; height: 620px; border: 0; background: #F4F4FA; }
.rec-email-espera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-size: .9rem; background: #F4F4FA; }
.rec-email-espera[hidden] { display: none; }
/* El botón luminoso: degradado, halo y un brillo que recorre el botón. */
.btn-brillo {
  position: relative; overflow: hidden; color: #fff; border: 0; font-weight: 800;
  background: linear-gradient(120deg, #5B2FD6, #952AC5 55%, #D43B8D);
  box-shadow: 0 0 0 3px rgba(149, 42, 197, .18), 0 10px 26px rgba(91, 47, 214, .35);
  animation: brillo-latir 2.4s ease-in-out infinite;
}
.btn-brillo::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: brillo-pasar 2.8s ease-in-out infinite;
}
.btn-brillo:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(149, 42, 197, .22), 0 16px 34px rgba(91, 47, 214, .45); color: #fff; }
@keyframes brillo-latir { 0%, 100% { box-shadow: 0 0 0 3px rgba(149, 42, 197, .18), 0 10px 26px rgba(91, 47, 214, .35); } 50% { box-shadow: 0 0 0 6px rgba(149, 42, 197, .1), 0 12px 30px rgba(91, 47, 214, .5); } }
@keyframes brillo-pasar { 0%, 60% { left: -50%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn-brillo, .btn-brillo::after { animation: none; } }
@media (max-width: 640px) { .rec-email-previa { height: 520px; } }

/* Las fichas de Emails filtran la lista (13/09/2026, noche). */
button.em-tipo-filtro { font: inherit; cursor: pointer; text-align: left; width: 100%; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
button.em-tipo-filtro:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 26, 38, .1); }
button.em-tipo-filtro[aria-pressed="true"] { border-color: var(--et-a); background: color-mix(in srgb, var(--et-a) 7%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--et-a) 25%, transparent); }
button.em-tipo-filtro:focus-visible { outline: 2px solid var(--et-a); outline-offset: 2px; }
.em-tipo-num { margin-left: auto; align-self: center; flex: 0 0 auto; min-width: 1.8rem; padding: .15rem .5rem; border-radius: 999px; text-align: center; font-family: var(--font-display); font-size: .95rem; color: var(--et-a); background: color-mix(in srgb, var(--et-a) 12%, var(--surface)); }
button.em-tipo-filtro[aria-pressed="true"] .em-tipo-num { color: #fff; background: var(--et-a); }

/* ═══ Editor de email, rehecho el 13/09/2026 (noche). Antes el CSS vivía
   dentro de la página; ahora está aquí, con la familia .ee-*. ═══ */
.ee-ancho { max-width: 1280px; margin: 0 auto; padding: 0 1rem 3rem; display: flex; flex-direction: column; gap: 1.2rem; }
.ee-hero { margin-top: .2rem; }
.ee-hero .cu-hero-avatar { font-size: 1.6rem; }
.ee-demo-aviso { margin: .8rem 0 0; font-size: .82rem; line-height: 1.5; padding: .55rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.ee-bloqueo { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: 0 auto; }
.editor-split { display: flex; gap: 1.5rem; align-items: flex-start; }
.editor-controles { flex: 1; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 1rem; }
.editor-preview-col { flex: 1; min-width: 0; position: sticky; top: 1rem; }
/* 20/09/2026: .qrc-indice nace con display:none y solo se enciende con
   [data-vista].vista-activa. El índice del editor de email no es una vista,
   así que nunca se veía: aquí se enciende. */
.ee-indice { display: flex; margin: 0; top: .5rem; }
.ee-card { display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem 1.4rem; scroll-margin-top: 4.5rem; }
.ee-card .bv-card-cab { align-items: flex-start; }
.ee-card .bv-card-cab h2 { margin: 0; }
.ee-card-peticion { border-left: 5px solid #2F7A5C; }
.ee-grupo { margin: 0; }
.ee-grupo .qr-grupo-nota { margin: -.3rem 0 .6rem; }
/* Las dos plantillas y los estilos de cabecera, con una miniatura dibujada. */
.ee-plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.plantilla-defecto-btn { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: .8rem .9rem .9rem; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.plantilla-defecto-btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 26px rgba(20, 26, 38, .1); }
.plantilla-defecto-btn strong { font-size: .95rem; }
.plantilla-defecto-btn > span:not(.ee-mini) { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.ee-mini, .ee-cab-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; border-radius: 10px; background: #F4F4FA; border: 1px solid var(--line); padding: 10px 14px 12px; margin-bottom: .4rem; }
.ee-mini i, .ee-cab-mini i { display: block; }
.ee-mini-logo { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #5B2FD6, #952AC5); }
.ee-mini-linea { width: 100%; height: 5px; border-radius: 3px; background: #D9D9E6; }
.ee-mini-linea.corta { width: 60%; }
.ee-mini-boton { width: 44%; height: 9px; border-radius: 999px; background: #5B2FD6; margin-top: 2px; }
.ee-mini-portada { width: calc(100% + 28px); height: 26px; margin: -10px -14px 2px; border-radius: 10px 10px 0 0; background: linear-gradient(120deg, #D43B8D, #D9A544); }
.ee-mini-banda { width: calc(100% + 28px); height: 22px; margin: -10px -14px 2px; border-radius: 10px 10px 0 0; background: #5B2FD6; display: flex; align-items: center; justify-content: center; }
.ee-mini-banda b { width: 12px; height: 12px; border-radius: 50%; background: #fff; display: block; }
.ee-cabeceras { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.ee-cab { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .6rem .7rem .7rem; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.ee-cab:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 18px rgba(20, 26, 38, .1); }
.ee-cab[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.ee-cab strong { font-size: .84rem; }
.ee-cab > span:not(.ee-cab-mini) { font-size: .72rem; color: var(--muted); }
.ee-cab-mini { padding: 8px 10px 9px; margin-bottom: .3rem; }
.ee-cab-ajustes { align-items: end; }
.ee-cab-ajustes input[type="color"] { width: 3.2rem; height: 2.4rem; padding: .15rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
/* Variables y editor de texto. */
.variables-fila { display: flex; gap: .4rem; flex-wrap: wrap; }
.variables-fila button { border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: .28rem .65rem; font-size: .74rem; cursor: pointer; font-weight: 700; font-family: inherit; transition: transform .12s var(--ease-out); }
.variables-fila button:hover { transform: translateY(-1px); border-style: solid; }
.wysiwyg-barra { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .45rem; }
.wysiwyg-barra button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .32rem .65rem; font-size: .84rem; cursor: pointer; font-weight: 700; font-family: inherit; }
.wysiwyg-barra button:hover { border-color: var(--accent); color: var(--accent-ink); }
.wysiwyg-area { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-height: 10rem; padding: .8rem .95rem; font-size: .94rem; line-height: 1.6; }
.wysiwyg-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ee-textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 12px; font-family: inherit; font-size: .92rem; line-height: 1.55; resize: vertical; background: var(--surface); }
.ee-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Portada. */
.ee-portada { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.ee-portada-img { width: 160px; height: 90px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(20, 26, 38, .12); }
.ee-portada-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Guardar: barra pegada abajo mientras se baja por los ajustes. */
.ee-acciones { position: sticky; bottom: .8rem; z-index: 4; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(20, 26, 38, .14); }
.ee-peticion-previa { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; font-size: .88rem; line-height: 1.6; font-family: Arial, Helvetica, sans-serif; }
/* La vista previa: un «programa de correo» oscuro con el email dentro. */
.ee-previa-cab { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.preview-marco { background: radial-gradient(circle at 20% 0%, #2B2450, #1A1C2E 70%); border-radius: 20px; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; max-height: calc(100vh - 8rem); overflow-y: auto; box-shadow: 0 20px 44px rgba(20, 26, 38, .25); }
.preview-cabecera-mail { background: #fff; border-radius: 12px; padding: .7rem .9rem; font-size: .78rem; width: 100%; max-width: 600px; color: #141A26; position: relative; }
.ee-sobre-puntos { display: flex; gap: 5px; margin-bottom: .45rem; }
.ee-sobre-puntos i { width: 9px; height: 9px; border-radius: 50%; background: #E3E3EC; display: block; }
.ee-sobre-puntos i:nth-child(1) { background: #FF5F57; } .ee-sobre-puntos i:nth-child(2) { background: #FEBC2E; } .ee-sobre-puntos i:nth-child(3) { background: #28C840; }
.preview-lienzo { width: 100%; max-width: 600px; transition: max-width .25s ease; }
.preview-lienzo[data-modo="movil"] { max-width: 360px; border-radius: 26px; padding: 10px; background: #141A26; box-shadow: inset 0 0 0 2px #2A3244; }
.preview-lienzo[data-modo="movil"] > div { border-radius: 18px; overflow: hidden; }
@media (max-width: 900px) {
  .editor-split { flex-direction: column; }
  .editor-controles { max-width: none; }
  .editor-preview-col { position: static; width: 100%; }
  .ee-indice { position: static; }
  .preview-marco { max-height: none; }
  /* En móvil la barra de guardar no se queda pegada: tapaba un cuarto de la pantalla. */
  .ee-acciones { position: static; }
}

/* Plan gratis en el editor de email: lo de pago, atenuado (13/09/2026). */
.ee-bloqueada { opacity: .62; }
.ee-bloqueo-texto { margin: .7rem 0 0; font-size: .88rem; line-height: 1.5; padding: .6rem .8rem; border-radius: 10px; background: var(--status-pendiente-bg); color: var(--status-pendiente-ink); }
.ee-bloqueo-texto:empty { display: none; }
/* La ficha «Personalizar el email» de la pantalla Emails, que llame la
   atención: degradado, halo latiendo y brillo que la recorre. */
.em-tipo-cta {
  position: relative; overflow: hidden; color: #fff; border: 0;
  background: linear-gradient(120deg, #5B2FD6, #952AC5 55%, #D43B8D);
  box-shadow: 0 0 0 3px rgba(149, 42, 197, .16), 0 12px 28px rgba(91, 47, 214, .32);
  animation: brillo-latir 2.4s ease-in-out infinite;
}
.em-tipo-cta::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 30%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: brillo-pasar 3.2s ease-in-out infinite; pointer-events: none;
}
.em-tipo-cta > span[aria-hidden]:first-child { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.em-tipo-cta strong, .em-tipo-cta .muted { color: #fff; }
.em-tipo-cta .muted { opacity: .85; }
.em-tipo-cta .pill { background: #fff; color: #5B2FD6; }
.em-tipo-cta .bt-flecha { color: #fff; }
.em-tipo-cta:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(149, 42, 197, .22), 0 18px 36px rgba(91, 47, 214, .45); }

/* Variables como etiquetas dentro del cuerpo del email (13/09/2026). */
.ee-var { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .1rem; padding: .05rem .5rem .05rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: .82em; font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; vertical-align: baseline; transition: background .15s var(--ease-out), border-color .15s var(--ease-out); }
.ee-var::after { content: "×"; font-size: 1.05em; line-height: 1; color: var(--accent); opacity: .7; }
.ee-var:hover { background: #FDE2E4; border-color: #C14851; color: #8A2F35; }
.ee-var:hover::after { color: #C14851; opacity: 1; }
.ee-sin-guardar { font-size: .8rem; font-weight: 800; color: #B54708; background: var(--status-pendiente-bg); padding: .3rem .7rem; border-radius: 999px; animation: bv-latir 1.6s ease-in-out infinite; }
.ee-sin-guardar[hidden] { display: none; }

/* Las dos pestañas del editor de email (13/09/2026). */
.ee-editor { display: flex; flex-direction: column; gap: 1.1rem; }
.ee-tabs { display: flex; align-self: flex-start; }

/* La caja de la recompensa en el editor de email (13/09/2026). */
.ee-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.ee-iconos .chip { font-size: 1.15rem; padding: .3rem .6rem; }
.ee-premio-colores { align-items: end; }
.ee-color input[type="color"] { width: 3.2rem; height: 2.4rem; padding: .15rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.ee-premio-img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: repeating-conic-gradient(#F0F0F6 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
/* Los cinco cupones ya diseñados: cada uno se pinta de verdad, en pequeño. */
.ee-premio-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.ee-premio-plantilla { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .5rem .5rem .6rem; cursor: pointer; text-align: center; font: inherit; color: var(--ink); transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.ee-premio-plantilla:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(20, 26, 38, .1); }
.ee-premio-plantilla strong { font-size: .8rem; }
.ee-premio-mini { width: 100%; overflow: hidden; border-radius: 10px; background: #F4F4FA; pointer-events: none; }
.ee-premio-mini > div { zoom: .62; padding: 10px 8px !important; }
.ee-premio-mini > div > div { padding: 10px 12px !important; }
.ee-destello { animation: ee-destellar .9s var(--ease-out); }
@keyframes ee-destellar { 0% { box-shadow: 0 0 0 0 rgba(91, 47, 214, .5); } 100% { box-shadow: 0 0 0 14px rgba(91, 47, 214, 0); } }
/* 20/09/2026: pulsar un trozo de la vista previa lleva a su apartado. */
[data-ee-vista-ir] { cursor: pointer; border-radius: 12px; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color .15s var(--ease-out); }
[data-ee-vista-ir]:hover, [data-ee-vista-ir]:focus-visible { outline-color: var(--accent); }
.ee-sobre [data-ee-vista-ir] { border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .ee-destello { animation: none; } [data-ee-vista-ir] { transition: none; } }

/* La ruleta en el email (20/09/2026). Las tres tarjetas de estilo son .ee-cab
   (las mismas que los estilos de cabecera) y los cinco diseños van en
   .ee-premio-plantilla / .ee-premio-mini (los mismos que los cupones): aquí
   solo lo que no existía. */
/* En la miniatura del «enlace sencillo»: la frase acaba en un enlace morado. */
.ee-ruleta-mini-enlace { width: 42%; height: 5px; border-radius: 3px; background: #5B2FD6; align-self: flex-start; margin-top: 1px; }
/* En la miniatura de la «caja»: la caja ámbar de fábrica con dos líneas dentro. */
.ee-ruleta-mini-caja { width: 100%; box-sizing: border-box; border-radius: 6px; background: #FAF4E9; border: 1px solid #EBD9A9; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.ee-ruleta-mini-caja b { display: block; width: 100%; height: 5px; border-radius: 3px; background: #E3CB8C; }
.ee-ruleta-mini-caja b.corta { width: 55%; }
/* Los cinco diseños llevan más cosas que un cupón (lista de premios, botón,
   dirección de reserva): se encogen algo más y se recortan por abajo con un
   desvanecido, para que las cinco tarjetas queden parejas. */
.ee-ruleta-mini { position: relative; max-height: 168px; }
.ee-ruleta-mini > div { zoom: .5; }
.ee-ruleta-mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(244, 244, 250, 0), #F4F4FA); pointer-events: none; }
/* El aviso de «tu ruleta está apagada»: se puede diseñar igual, pero conviene
   saberlo antes de esperar el email. */
.ee-ruleta-aviso { margin: .55rem 0 0; font-size: .82rem; line-height: 1.5; padding: .55rem .8rem; border-radius: 10px; background: #FFF4DE; color: #7A4B00; border: 1px solid #F1D9A6; }
.ee-ruleta-aviso[hidden] { display: none; }
.ee-ruleta-aviso a { color: inherit; font-weight: 700; }
/* El chip «Con ruleta» de la vista previa, un poco separado de los dos modos
   de pantalla: no es un tercer tamaño, es otra cosa. */
.ee-ruleta-chip { margin-left: .35rem; }
/* El bloque centra su botón y sus premios con align="center" en la tabla,
   que es lo que entienden los programas de correo. El reset de arriba
   (* { margin: 0 }) le quita ese margen automático y en la vista previa el
   botón se iba a la izquierda mientras en el email real salía centrado:
   aquí se le devuelve, para que la vista previa no engañe. */
.ee-ruleta-previa table[align="center"], .ee-ruleta-mini table[align="center"] { margin-left: auto; margin-right: auto; }

/* Chapas GRATIS / PRO del editor de email (13/09/2026). */
.chapa-gratis { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .45rem; padding: .16rem .5rem; border-radius: 999px; background: #E3F5EA; color: #1F6B47; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.pestana-panel .chapa-pro, .pestana-panel .chapa-gratis { margin-left: .35rem; }
.pestana-panel[aria-selected="true"] .chapa-pro { background: #fff; color: var(--accent); }
.pestana-panel[aria-selected="true"] .chapa-gratis { background: #fff; color: #1F6B47; }
.ee-gratis-vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.ee-gratis-col { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; background: var(--surface); }
.ee-gratis-col-pro { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ee-gratis-tit { margin: 0 0 .5rem; font-weight: 800; font-size: .9rem; display: flex; align-items: center; gap: .3rem; }
.ee-gratis-tit .chapa-pro, .ee-gratis-tit .chapa-gratis { margin-left: 0; }
.ee-gratis-col ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); display: flex; flex-direction: column; gap: .3rem; }

/* Bienvenida: personalizaciones de Pro dormidas (13/09/2026). */
.bv-dormidas { margin-bottom: 1.2rem; border-left: 5px solid #D9A544; background: linear-gradient(120deg, #FFFBEF, var(--surface) 60%); display: flex; flex-direction: column; gap: .8rem; }
.bv-dormidas[hidden] { display: none; }

/* Muro de reseñas dentro del panel (13/09/2026, noche). */
.mu .bv-card-cab { align-items: flex-start; }
.mu .bv-card-cab h2 { margin: 0; }
.mu-enlace { margin-top: 1rem; }
.mu-previa-cab { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.1rem; }
.mu-marco { margin-top: .6rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #F4F4FA; box-shadow: 0 14px 34px rgba(20, 26, 38, .12); }
.mu-iframe { display: block; width: 100%; height: 720px; border: 0; background: #fff; }
@media (max-width: 640px) { .mu-iframe { height: 560px; } }

/* Mi cuenta: el botón de mejora dentro de la tarjeta del plan se cortaba
   («Mejorar a Agencia — desde 37,50 €/me…»). Ahora parte en dos líneas y
   ocupa el ancho de la tarjeta (13/09/2026, noche). */
.cu-plan-botones .btn { white-space: normal; width: 100%; text-align: center; line-height: 1.3; padding-top: .7rem; padding-bottom: .7rem; }
.cu-plan-nombre { overflow-wrap: anywhere; }

/* ═══ Estudio creativo, rehecho el 13/09/2026 (noche). ═══ */
/* Ojo con el «.vista-activa»: sin él, esta regla le gana a
   «[data-vista] { display:none }» —misma fuerza y va después— y el
   Estudio creativo se quedaba VISTO EN TODAS LAS PANTALLAS: en la
   guía, en recompensas, en la ruleta… (encontrado el 21/09/2026). */
.es.vista-activa { display: flex; flex-direction: column; gap: 1.1rem; }
.es-hero { display: flex; flex-direction: column; gap: 1.2rem; }
.es-hero-texto h1 { color: #fff; font-size: 1.7rem; margin: 0; }
.es-hero-texto .muted { color: rgba(255, 255, 255, .82); max-width: 60ch; }
.es-hero .cu-hero-avatar { font-size: 1.7rem; }
.es-cifras { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.es-cifra { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.es-cifra b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #fff; }
.es-cifra span { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.es-tabs { display: flex; margin: 0; }
.es-tabs .filter-tab { border: 0; background: transparent; border-radius: 999px; padding: .5rem .95rem; font-weight: 700; font-size: .88rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .4rem; }
.es-tabs .filter-tab:hover { background: var(--accent-soft); color: var(--accent-ink); }
.es-tabs .filter-tab[data-active="true"] { background: var(--accent); color: #fff; }
.es-tab-num { font-size: .68rem; font-weight: 800; padding: .05rem .42rem; border-radius: 999px; background: var(--paper); color: var(--muted); }
.es-tabs .filter-tab[data-active="true"] .es-tab-num { background: rgba(255, 255, 255, .25); color: #fff; }
.es .estudio-chips { margin-top: 0; gap: .4rem; }
.es .estudio-chips button { padding: .38rem .8rem; border-radius: 999px; transition: transform .12s var(--ease-out), border-color .12s var(--ease-out); }
.es .estudio-chips button:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent-ink); }
.es .estudio-grid { margin-top: .2rem; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.es .plantilla-card { border-radius: 18px; box-shadow: 0 6px 18px rgba(20, 26, 38, .05); }
.es .plantilla-card:hover { box-shadow: 0 16px 34px rgba(20, 26, 38, .12); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.es .plantilla-preview { height: 210px; background: radial-gradient(circle at 20% 0%, #F6F2FF, #EEEEF6 70%); }
.es .plantilla-info { padding: .9rem 1rem 1rem; gap: .35rem; }
.es .plantilla-info strong { font-size: .98rem; }
.es .plantilla-info .muted { font-size: .8rem; line-height: 1.45; }
.es .plantilla-pro { background: linear-gradient(100deg, var(--accent), #B63BDB); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; }
.es-crear { align-self: flex-start; margin-top: .55rem; }
/* La maqueta de imagen / vídeo / anuncio, en la proporción del formato. */
.es-mock { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 12px; }
.es-mock-tarjeta { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(20, 26, 38, .16); padding: 12px 14px; display: flex; flex-direction: column; gap: .3rem; overflow: hidden; border-top: 4px solid var(--accent); }
.es-mock-cuadrado .es-mock-tarjeta { width: 178px; height: 178px; }
.es-mock-horizontal .es-mock-tarjeta { width: 250px; height: 140px; }
.es-mock-vertical .es-mock-tarjeta { width: 108px; height: 186px; padding: 10px; }
.es-mock-estrellas { color: #E0A100; font-size: .78rem; letter-spacing: 1px; line-height: 1; }
.es-mock-estrellas i { font-style: normal; color: #E3E3EC; }
.es-mock-tarjeta p { margin: 0; font-size: .62rem; line-height: 1.35; color: #141A26; font-weight: 600; overflow: hidden; }
.es-mock-vertical .es-mock-tarjeta p { font-size: .56rem; }
.es-mock-nombre { font-size: .58rem; color: var(--accent); font-weight: 800; margin-top: auto; }
.es-mock-marca { position: absolute; right: 14px; bottom: 8px; font-size: .58rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.es-mock-play { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .65rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(91, 47, 214, .35); }
.es-mock-video { display: block; height: 44px; border-radius: 8px; background: linear-gradient(120deg, #2B2450, #141A26); margin: -2px 0 4px; }
.es-mock-sub { position: absolute; left: 14px; right: 14px; bottom: 26px; background: rgba(20, 26, 38, .85); color: #fff; font-size: .55rem; font-weight: 700; padding: .2rem .4rem; border-radius: 4px; text-align: center; }
.es-mock-vertical .es-mock-sub { left: 10px; right: 10px; }
/* Caso de estudio IA y Mis creaciones. */
.es-card { display: flex; flex-direction: column; gap: 1rem; }
.es-card .bv-card-cab { align-items: flex-start; }
.es-card .bv-card-cab h2, .es-card .bv-card-cab h3 { margin: 0; }
.es .estudio-creaciones { margin-top: 0; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.es .creacion-card { border-radius: 14px; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.es .creacion-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 26, 38, .1); }
.es .creacion-card img, .es .creacion-card video { height: 150px; }
.es .creacion-acciones a, .es .creacion-acciones button { border-radius: 999px; padding: .38rem .5rem; }
@media (max-width: 640px) { .es .plantilla-preview { height: 190px; } .es-hero-texto h1 { font-size: 1.4rem; } }

/* ═══ Panel incrustado en un plugin (13/09/2026): sin barra superior ni
   salidas (cerrar sesión, portada); el plugin ya pone su propio marco. ═══ */
html.incrustado .app-topbar, html.incrustado .skip-link, html.incrustado [data-logout],
html.incrustado .sidebar-pie-fila a[href="index.html"], html.incrustado a[href="app.html"].btn-ghost { display: none !important; }
html.incrustado .app-main { padding-top: .8rem; }
html.incrustado .ee-hero .cu-hero-avatar { display: none; }

/* ── Valoración con estrellas del formulario de «leer captura con IA» ──
   Las estrellas van del 5 al 1 en el HTML y aquí se le da la vuelta con
   row-reverse: así se ven de 1 a 5 de izquierda a derecha, y el selector «~»
   puede pintar la marcada y todas las de menos valor, que es lo que espera
   cualquiera que haya puntuado algo alguna vez. Sin JavaScript. */
.ic-etiqueta { display: block; font-weight: 600; margin-bottom: .35rem; }

.ic-estrellas {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: .15rem;
}

/* El radio de verdad sigue ahí (se puede tabular y marcar con el teclado),
   solo que no se dibuja: lo que se ve es su etiqueta. */
.ic-estrellas input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.ic-estrellas label {
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  padding: 0 .05rem;
  color: #D8D8E4;
  transition: color .12s ease, transform .12s ease;
}
.ic-estrellas label::before { content: "★"; }

/* La marcada y las de menos valor (que en el HTML van DESPUÉS). */
.ic-estrellas input[type="radio"]:checked ~ label { color: #D9A544; }

/* Al pasar el ratón, lo mismo pero en claro, para ver qué vas a marcar. */
.ic-estrellas:hover label { color: #D8D8E4; }
.ic-estrellas label:hover,
.ic-estrellas label:hover ~ label { color: #E8B74F; }
.ic-estrellas label:hover { transform: scale(1.08); }

/* Que se vea por dónde va el teclado. */
.ic-estrellas input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--brand, #5B2FD6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* «3 de 5» al lado, para quien no quiera contar estrellas. */
.ic-estrellas-cifra {
  order: -1;                 /* con row-reverse, esto lo manda al final */
  margin-left: .6rem;
  font-size: .95rem;
  color: var(--muted, #6B7290);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ic-estrellas label { transition: none; }
  .ic-estrellas label:hover { transform: none; }
}

/* ── Buscar en la lista de testimonios (16/09/2026) ──
   Va en la misma fila que los filtros de estrellas y los desplegables, pero
   se estira para ocupar el hueco que quede: es el control que más se usa
   cuando buscas UNA reseña concreta. */
.buscador-testimonios {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 420px;
  padding: .32rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface, #fff);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.buscador-testimonios:focus-within {
  border-color: var(--brand, #5B2FD6);
  box-shadow: 0 0 0 3px rgba(91, 47, 214, .12);
}
.buscador-lupa { font-size: .9rem; line-height: 1; opacity: .65; }
.buscador-testimonios input[type="search"] {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  color: inherit;
  min-width: 0;
  padding: 0;
}
/* La X que trae de serie el navegador sobra: ya ponemos la nuestra, que se
   ve igual en todos y tiene su etiqueta para los lectores de pantalla. */
.buscador-testimonios input[type="search"]::-webkit-search-cancel-button { display: none; }
.buscador-limpiar {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .1rem;
  color: var(--muted, #6B7290);
}
.buscador-limpiar:hover { color: var(--ink, #141A26); }
.buscador-cuenta { font-size: .8rem; white-space: nowrap; }

/* ── Vídeos de agradecimiento (16/09/2026) ──
   La biblioteca: miniaturas que se eligen pulsando. La elegida se marca con
   el borde morado y una palomita, para que se vea cuál va a ir en el correo
   sin tener que leer nada. */
.gr-biblioteca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .6rem;
  margin-top: .7rem;
}
.gr-video-item {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #0F0B1E;
  transition: border-color .14s ease, transform .14s ease;
}
.gr-video-item:hover { transform: translateY(-2px); }
.gr-video-item.elegido { border-color: var(--brand, #5B2FD6); }
.gr-video-item.elegido::after {
  content: "✓";
  position: absolute; top: .3rem; left: .3rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand, #5B2FD6); color: #fff;
  font-size: .78rem; font-weight: 700;
  display: grid; place-items: center;
}
.gr-video-item video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.gr-video-nombre {
  display: block; padding: .35rem .5rem;
  background: #fff; color: var(--ink, #141A26);
  font-size: .74rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr-video-quitar {
  position: absolute; top: .3rem; right: .3rem;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(20,26,38,.62); color: #fff;
  font-size: .72rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.gr-video-quitar:hover { background: #C14851; }

/* La pastilla de «ya agradecida», en la fila de acciones de la reseña. */
.pill-gracias {
  background: #FFF3D6;
  color: #7C5A12;
  border: 1px solid #F3D9A6;
  font-size: .72rem;
  font-weight: 600;
  padding: .22rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .gr-video-item { transition: none; }
  .gr-video-item:hover { transform: none; }
}

/* =============================================================
   El cupón único (20/09/2026): la página pública del cupón
   (cupon.html) y la pantalla del empleado para canjear (canjear.html).
   Van sobre la tarjeta de girar.html (.auth-card + .card). Todo con
   prefijo cu- y nombres que no chocan con los de la página de cuenta.
   ============================================================= */
/* La etiqueta grande de estado: verde (válido), rojo suave (ya usado) o
   gris (caducado / anulado). Se lee de un vistazo desde el otro lado del
   mostrador, que es para lo que está. */
.cu-estado {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: max-content; max-width: 100%; margin: .7rem auto .2rem; padding: .6rem 1.2rem; border-radius: 999px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
}
.cu-estado b { font-size: 1.1rem; }
.cu-estado span { font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: none; opacity: .9; }
.cu-estado-vigente { background: var(--status-aprobado-bg); color: var(--status-aprobado-ink); }
.cu-estado-usado { background: var(--status-rechazado-bg); color: var(--status-rechazado-ink); }
.cu-estado-apagado { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
/* La tarjeta entera se apaga cuando el cupón ya no vale: el QR en gris para
   que nadie lo escanee por costumbre y el premio sin color. */
.cu-tarjeta-apagada .cu-qr { filter: grayscale(1); opacity: .45; }
.cu-tarjeta-apagada .cu-premio { color: var(--muted); }
.cu-premio { margin: .5rem 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.cu-fechas { margin: .4rem 0 0; font-size: .85rem; line-height: 1.5; }
/* El código, en grande y con aire: se dicta por teléfono y se copia a mano. */
.ru-publica-codigo.cu-codigo { flex-direction: column; gap: .15rem; padding: .7rem 1.3rem; margin-top: .9rem; }
.ru-publica-codigo.cu-codigo b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .08em; }
/* El QR siempre negro sobre blanco, también en modo oscuro: es lo que mejor
   lee una cámara. */
.cu-qr { width: 196px; max-width: 100%; margin: 1rem auto 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.cu-qr svg { display: block; width: 100%; height: auto; }
/* El reloj en marcha: cifras de ancho fijo para que no baile cada segundo. */
.cu-reloj { display: flex; flex-direction: column; align-items: center; gap: 0; margin: .7rem 0 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cu-reloj small { font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cu-acciones { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.cu-acciones .btn { white-space: normal; line-height: 1.3; }
.cu-nota { margin: 0; font-size: .88rem; line-height: 1.5; }

/* La pantalla del empleado: el campo grande del código y su teclado. */
.cu-campo input {
  display: block; width: 100%; padding: .75rem .6rem; text-align: center;
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  transition: border-color .2s var(--ease-out);
}
.cu-campo input::placeholder { color: var(--line); letter-spacing: .1em; }
.cu-campo input:focus { border-color: var(--accent); outline: none; }
.cu-campo-mal input { border-color: var(--status-rechazado-ink); }
.cu-aviso { min-height: 1.3em; margin: .4rem 0 0; font-size: .85rem; font-weight: 700; line-height: 1.4; color: var(--status-rechazado-ink); }
.cu-teclado { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
.cu-teclado-fila { display: flex; gap: .3rem; justify-content: center; }
/* Teclas grandes para el dedo (mínimo 44 px de alto) y sin zoom al tocar
   dos veces seguidas (touch-action). */
.cu-tecla {
  flex: 1 1 0; min-width: 0; height: 2.9rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.cu-tecla:active { background: var(--accent-soft); border-color: var(--accent); }
.cu-tecla-borrar { flex: 1.7 1 0; font-size: 1.05rem; }
.cu-camara { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.cu-camara video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; border-radius: 12px; }
.cu-ficha { margin-top: .5rem; }
/* La lista de los canjes de hoy: hora · código · premio · estado. */
.cu-hoy { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.cu-hoy li { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: .84rem; text-align: left; }
.cu-hoy li b { font-family: var(--font-display); letter-spacing: .04em; white-space: nowrap; }
.cu-hoy-hora { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-hoy-premio { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.cu-hoy .status-pill { flex-shrink: 0; }
.cu-pie { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .82rem; padding: 0 .2rem; }
.cu-pie b { color: var(--ink); }
@media (max-width: 420px) {
  .ru-publica-codigo.cu-codigo b { font-size: 1.25rem; letter-spacing: .06em; }
  .cu-campo input { font-size: 1.3rem; letter-spacing: .08em; }
  .cu-tecla { height: 2.75rem; font-size: 1.05rem; }
  /* En el móvil, cada canje en dos líneas: hora · código · estado arriba,
     el premio entero debajo. */
  .cu-hoy li { flex-wrap: wrap; }
  .cu-hoy .status-pill { margin-left: auto; }
  .cu-hoy-premio { order: 4; flex-basis: 100%; white-space: normal; }
}

/* EL LOGO EN EL REDONDELITO DE LA CUENTA (21/09/2026).
   Antes estos círculos enseñaban siempre la inicial del correo, así que
   quien subía su logo no lo veía por ninguna parte del panel. Ahora, si hay
   logo, va dentro; si no, se queda la letra y estas reglas no se aplican. */
.account-menu-btn.con-logo,
.sidebar-avatar.con-logo,
.cu-hero-avatar.con-logo {
  background: #fff;
  overflow: hidden;
  padding: 0;
}
.account-menu-btn.con-logo img,
.sidebar-avatar.con-logo img,
.cu-hero-avatar.con-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* Un logo blanco sobre fondo blanco se perdería: un borde finito lo sujeta. */
.account-menu-btn.con-logo,
.sidebar-avatar.con-logo { box-shadow: inset 0 0 0 1px rgba(20, 26, 38, .12); }
.cu-hero-avatar.con-logo { border-color: rgba(255, 255, 255, .7); }

/* «¿ESTÁ PUESTO EL WIDGET EN MI WEB?» (21/09/2026)
   Pegar el widget es donde más gente abandona, y el fallo no se ve: pega,
   guarda y no pasa nada. Este bloque le dice en cristiano qué ha pasado, con
   un color por cada caso para que se entienda antes de leer. */
.wd-comprobar {
  margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px dashed var(--line); border-radius: 14px; background: var(--paper);
}
.wd-comprobar-fila { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.wd-comprobar-fila .btn { flex: 0 0 auto; }
.wd-comprobar-resultado {
  margin-top: .9rem; padding: .85rem 1rem; border-radius: 12px;
  border-left: 4px solid var(--line); background: #fff;
}
.wd-comprobar-resultado strong { display: block; font-size: 1rem; }
.wd-comprobar-resultado p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; }
.wd-comprobar-resultado .wd-consejo { color: var(--ink-soft); }
.wd-comprobar-resultado .wd-donde {
  margin-top: .5rem; font-size: .76rem; color: var(--muted);
  word-break: break-all;
}
.wd-comprobar-resultado.bien    { border-left-color: #16A34A; background: rgba(22,163,74,.05); }
.wd-comprobar-resultado.aviso   { border-left-color: #D97706; background: rgba(217,119,6,.06); }
.wd-comprobar-resultado.mal     { border-left-color: #DC2626; background: rgba(220,38,38,.05); }
.wd-comprobar-resultado.mirando { border-left-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 560px) {
  .wd-comprobar-fila .btn { width: 100%; }
}

/* PREMIOS QUE SE IRÍAN SIN CÓDIGO (21/09/2026).
   No es una nota fija: solo sale cuando de verdad le pasa a esa cuenta. Por
   eso puede permitirse llamar la atención — si estuviera siempre, molestaría
   y dejaría de leerse. */
.ru-aviso-codigos {
  margin-top: .9rem; padding: .9rem 1.05rem;
  border-radius: 12px; border-left: 4px solid #D97706;
  background: rgba(217,119,6,.08); color: var(--ink);
}
.ru-aviso-codigos strong { font-size: .97rem; }
.ru-aviso-codigos ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.ru-aviso-codigos li { font-size: .89rem; line-height: 1.55; margin-bottom: .3rem; }
.ru-aviso-codigos p { margin: .6rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }

/* El mismo recuadro, pero en tono «para que lo sepas» y no «algo va mal»:
   un premio de tipo regalo que se entrega a mano está BIEN puesto, y teñirlo
   de naranja de alarma sería mentirle al dueño. (21/09/2026) */
.ru-aviso-codigos.es-aviso-suave {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* ══════════════════════════════════════════════════════════════════
   EL DISEÑADOR DEL CARTEL DEL POSA QR
   (22/09/2026 — reorganizado entero el 23/09/2026)

   Rafael: «hay muchas funciones de diseño, te ruego que las organices
   mucho mejor, y le des un diseño mucho más atractivo, profesional e
   intuitivo».

   Dos decisiones mandan en todo lo de abajo:

   1. EL PREVIO VA EN LA COLUMNA ANCHA. Antes era al revés: el cartel
      en 300 px y los mandos en el resto. Lo que hay que mirar es el
      cartel.
   2. UN APARTADO POR PIEZA. Antes eran veintiocho mandos seguidos sin
      un solo título. Ahora cada pieza del cartel tiene el suyo, y se
      abre solo al pinchar esa pieza en el previo.
   ══════════════════════════════════════════════════════════════════ */

/* Los dos pasos numerados: «1 Empieza por una plantilla» y
   «2 Retócalo a tu gusto». Ordenan la pantalla sin gastar una línea
   de explicación. */
.pqr-paso { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.pqr-paso-num {
  flex-shrink: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primario, #5B2FD6); color: #fff;
  font-size: .85rem; font-weight: 800;
}
.pqr-paso-tit { font-size: .95rem; margin: .15rem 0 0; }
.pqr-paso-pie { font-size: .8rem; margin: .2rem 0 0; }

.pqr-rejilla {
  display: grid;
  /* El previo primero y ancho; los mandos, estrechos, a su derecha. */
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 860px) {
  .pqr-rejilla { grid-template-columns: 1fr; }
}
.pqr-previo { position: sticky; top: 1rem; }
.pqr-pie-previo { font-size: .78rem; text-align: center; margin-top: .5rem; }

/* El metacrilato: un borde frío y translúcido, y una base que hace de pie. */
.pqr-soporte {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  padding: 10px 10px 0;
  border-radius: 10px 10px 2px 2px;
  background: linear-gradient(145deg, rgba(220,235,245,.55), rgba(255,255,255,.25));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 10px 24px rgba(20,30,50,.18),
              0 1px 3px rgba(20,30,50,.2);
  border: 1px solid rgba(160,190,210,.5);
}
.pqr-soporte::after {           /* la base donde se apoya */
  content: "";
  display: block;
  height: 14px;
  margin: 8px -10px 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(200,220,235,.7), rgba(150,180,200,.45));
  box-shadow: 0 6px 10px rgba(20,30,50,.12);
}
.pqr-soporte canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
  cursor: default;
}

/* La barra de los tres botones. Se queda pegada abajo mientras se baja
   por los ajustes: antes había que subir a buscarlos. */
.pqr-barra {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-top: .6rem; padding: .55rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fondo, #fff) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}

/* ── Los apartados, uno por pieza del cartel ──────────────────────── */
.pqr-ajustes { display: flex; flex-direction: column; gap: .5rem; }

.pqr-grupo {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--fondo, #fff);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.pqr-grupo > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem;
  cursor: pointer;
  font-size: .9rem; font-weight: 700;
  list-style: none;
  user-select: none;
}
.pqr-grupo > summary::-webkit-details-marker { display: none; }
.pqr-grupo > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: var(--muted, #6B6B7B);
}
.pqr-grupo[open] > summary::after { content: "–"; }
.pqr-grupo > summary:hover { background: color-mix(in srgb, var(--primario, #5B2FD6) 6%, transparent); }
.pqr-grupo-ico { font-size: 1rem; }
.pqr-grupo-cuerpo {
  display: flex; flex-direction: column; gap: .7rem;
  padding: .2rem .75rem .8rem;
  border-top: 1px solid var(--line);
}

/* La pieza que está señalada en el previo. Es el otro lado de la marca
   que se dibuja sobre el cartel: al pinchar una pieza se abre y se
   resalta su apartado, para que se vea dónde hay que tocar. */
.pqr-grupo.pqr-senalado {
  border-color: var(--primario, #5B2FD6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario, #5B2FD6) 16%, transparent);
}
.pqr-grupo.pqr-senalado > summary { color: var(--primario, #5B2FD6); }

/* Lo que solo tiene sentido con el hueco NFC encendido. La regla va por
   CLASE y no por hijo directo: la de antes se rompía en cuanto se metía
   un div nuevo por medio, y sin avisar. */
.pqr-grupo[data-apagado="si"] .pqr-grupo-si-encendido { display: none; }
.pqr-grupo-si-encendido { display: flex; flex-direction: column; gap: .7rem; }

/* ── Bandas y bordes (26/09/2026) ─────────────────────────────────
   Los cinco modelos de cada pieza, dibujados en pequeño con los colores
   del cartel. El que está puesto lleva el marco de color. */
.pqr-adornos { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .5rem; }
.pqr-adorno {
  padding: .25rem; border: 2px solid var(--line); border-radius: 8px;
  background: var(--fondo, #fff); cursor: pointer; line-height: 0;
  transition: border-color .12s, transform .12s;
}
.pqr-adorno:hover { transform: translateY(-1px); }
.pqr-adorno[aria-pressed="true"] {
  border-color: var(--primario, #5B2FD6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario, #5B2FD6) 16%, transparent);
}
.pqr-adorno canvas { display: block; width: 46px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
/* Los ajustes finos de cada pieza solo salen cuando está puesta. */
.pqr-adorno-ajustes[data-apagado="si"] { display: none; }

/* El aviso de para qué tarjeta es el hueco. Lo pidió Rafael el
   23/09/2026: «que diga en un aviso que el tamaño de ese hueco es para
   las tarjetas que recomendamos». */
.pqr-nota-tarjeta {
  margin: 0;
  padding: .5rem .6rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primario, #5B2FD6) 25%, var(--line));
  background: color-mix(in srgb, var(--primario, #5B2FD6) 7%, transparent);
  font-size: .78rem; line-height: 1.45;
}
.pqr-nota-tarjeta:empty { display: none; }

.pqr-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; }
.pqr-botonera { display: flex; gap: .4rem; }
.pqr-tog {
  min-width: 2.2rem; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--fondo, #fff); cursor: pointer; font-size: .95rem;
}
.pqr-tog[aria-pressed="true"] { background: var(--primario, #5B2FD6); color: #fff; border-color: transparent; }
.pqr-check { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }

/* ── Las plantillas ya montadas (23/09/2026) ──────────────────────
   Cada una se enseña dibujada de verdad, en pequeño, con los textos y el
   QR del negocio: así elige viendo SU cartel, no un icono. */
.pqr-plantillas {
  display: flex; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.pqr-plantilla {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .4rem .4rem .45rem;
  border: 2px solid var(--line); border-radius: 10px;
  background: var(--fondo, #fff); cursor: pointer;
  font-size: .76rem; line-height: 1.2; color: inherit;
  transition: border-color .12s, transform .12s;
}
.pqr-plantilla:hover { transform: translateY(-2px); }
.pqr-plantilla[aria-pressed="true"] {
  border-color: var(--primario, #5B2FD6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario, #5B2FD6) 18%, transparent);
}
.pqr-plantilla canvas {
  display: block; width: 74px; height: auto; border-radius: 3px;
  background: #fff; box-shadow: 0 1px 4px rgba(20,30,50,.18);
}
.pqr-plantilla span { max-width: 84px; text-align: center; }

/* La recreación sobre la foto del soporte de verdad (23/09/2026). */
.pqr-real { margin-top: 1.1rem; max-width: 420px; margin-left: auto; margin-right: auto; }
.pqr-real-tit { font-size: .92rem; margin: 0 0 .5rem; text-align: center; }
.pqr-real canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20,30,50,.14);
}