/* Devellia — sistema de diseño de la interfaz de cliente (T62 / F0). Tomado de los mockups de Jose (25-sep-2026);
   colores, radios y letra (Geist) igualados al mockup el 29-sep-2026.
   Un solo camino, precio delante de cada acción, saldo siempre a la vista. Ver control/DESIGN-DEVELIA.md. */
:root {
  --dv-paper: #F6F4EF;        /* fondo crema */
  --dv-paper-2: #EEEAE2;      /* franjas, huecos de foto */
  --dv-surface: #FFFFFF;
  --dv-surface-2: #F7F6F2;
  --dv-ink: #15141A;
  --dv-ink-2: #46434F;
  --dv-ink-3: #5E5B66;
  --dv-line: #E4E0D8;
  --dv-line-2: #C9C4BA;
  --dv-accent: #3B2BE0;       /* violeta: la acción principal */
  --dv-accent-hover: #2A1DB0;
  --dv-accent-soft: #F1EFFF;  /* tarjeta elegida, «Devellia te explica» */
  --dv-accent-ink: #2A1DB0;
  --dv-lime: #D4F36B;         /* precio, saldo, «Gratis» */
  --dv-lime-ink: #1B2400;
  --dv-dark: #15141A;         /* tarjetas de dinero */
  /* borde de las muestras de color: oscuro y visible, que el blanco se distinga con poca vista (Jose, 26/10/2026) */
  --dv-swatch-borde: color-mix(in srgb, var(--dv-ink) 55%, transparent);
  --dv-dark-2: #1E1E24;
  --dv-ok: #1F7A4D;
  --dv-ok-soft: #E9F5EE;
  --dv-warn: #7A3E00;
  --dv-warn-soft: #FFF3E0;
  --dv-danger: #C4302B;
  --dv-danger-soft: #FBE4E2;
  --dv-radius: 22px;
  --dv-radius-sm: 14px;
  --dv-radius-pill: 999px;
  --dv-side-w: 312px;
  --dv-bar-h: 88px;
  --dv-shadow: 0 1px 2px rgba(17,17,20,.04), 0 8px 24px rgba(17,17,20,.06);
  --dv-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Poppins en todo desde el 29-sep-2026 */
  --dv-display: 'Poppins', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--dv-paper); color: var(--dv-ink); font: 15px/1.5 var(--dv-font); -webkit-font-smoothing: antialiased; }
a { color: var(--dv-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--dv-display); letter-spacing: -0.02em; line-height: 1.1; font-weight: 800; }
h1 { font-size: 40px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; letter-spacing: -0.01em; }
h4 { font-size: 15px; font-family: var(--dv-font); font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
.muted { color: var(--dv-ink-2); }
.muted-3 { color: var(--dv-ink-3); }
.fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-17 { font-size: 17px; } .fs-20 { font-size: 20px; }
.bold { font-weight: 600; }
.row { display: flex; align-items: center; gap: 12px; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; } .row.top { align-items: flex-start; } .row.right { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 12px; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-4 { gap: 4px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .fs-16 { font-size: 16px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-ink-3); }
.eyebrow.accent { color: var(--dv-accent); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.eyebrow.lime { color: var(--dv-lime); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ic { width: 18px; height: 18px; flex: none; }
.ic.sm { width: 15px; height: 15px; } .ic.lg { width: 22px; height: 22px; }

/* ---------- layout ---------- */
.dv-app { display: grid; grid-template-columns: var(--dv-side-w) 1fr; min-height: 100vh; }
.dv-side { background: var(--dv-surface); border-right: 1px solid var(--dv-line); padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.dv-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.dv-work { flex: 1; padding: 44px 56px calc(var(--dv-bar-h) + 32px); max-width: 1240px; width: 100%; }
.dv-work.wide { max-width: 1600px; }
@media (min-width: 1900px) { .dv-work { max-width: 1480px; } .dv-work.wide { max-width: 1800px; } } /* pantallas grandes: que no sobre media pantalla */
.dv-head { margin-bottom: 28px; }
.dv-head h1 { margin-top: 6px; }
.dv-head .intro { margin-top: 10px; font-size: 17px; color: var(--dv-ink-2); max-width: 72ch; }
.dv-bar { position: fixed; left: var(--dv-side-w); right: 0; bottom: 0; height: var(--dv-bar-h); background: var(--dv-paper); border-top: 1px solid var(--dv-line); display: flex; align-items: center; gap: 12px; padding: 0 56px; z-index: 20; }
.dv-bar .grow { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.dv-bar .nota { font-size: 14px; color: var(--dv-ink-2); }
body.no-side .dv-app { grid-template-columns: minmax(0, 1fr); } body.no-side .dv-bar { left: 0; }
.dv-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dv-grid-2.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dv-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dv-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .dv-grid-2, .dv-grid-2.even { grid-template-columns: minmax(0, 1fr); } .dv-grid-3, .dv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-work { padding-left: 32px; padding-right: 32px; } .dv-bar { padding: 0 32px; } }
@media (max-width: 900px) { .dv-app { grid-template-columns: minmax(0, 1fr); } .dv-side { position: fixed; inset: 0 auto 0 0; width: var(--dv-side-w); transform: translateX(-100%); transition: transform .2s ease-out; z-index: 30; box-shadow: var(--dv-shadow); } body.side-open .dv-side { transform: none; } .dv-bar { left: 0; padding: 0 16px; } .dv-work { padding: 24px 16px calc(var(--dv-bar-h) + 24px); } h1 { font-size: 30px; } .dv-topbar-mobile { display: flex !important; } }
.dv-topbar-mobile { display: none; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--dv-line); background: var(--dv-surface); }

/* ---------- marca ---------- */
.dv-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dv-display); font-weight: 800; font-size: 22px; letter-spacing: -0.022em; color: var(--dv-ink); }
.dv-logo .d { width: 30px; height: 30px; border-radius: 8px; background: var(--dv-ink); color: var(--dv-lime); display: grid; place-items: center; font-size: 19px; }
.dv-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dv-paper-2); color: var(--dv-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.dv-avatar.pink { background: #F6C6D6; color: #7A2A4D; }
.dv-avatar.dev { background: var(--dv-dark); color: var(--dv-lime); }

/* ---------- barra lateral ---------- */
.dv-tienda { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--dv-surface-2); border: 1px solid var(--dv-line); cursor: pointer; text-align: left; width: 100%; }
.dv-tienda:hover { border-color: var(--dv-line-2); }
.dv-tienda .n { font-weight: 600; font-size: 14px; } .dv-tienda .s { font-size: 12px; color: var(--dv-ink-2); }
.dv-tienda-txt { flex: 1; min-width: 0; } .dv-tienda-txt .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-tienda-plat { flex: none; display: inline-flex; align-items: center; max-width: 45%; }
.dv-camino { display: flex; flex-direction: column; gap: 2px; }
.dv-paso { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-radius: 12px; color: var(--dv-ink); text-decoration: none; }
.dv-paso:hover { background: var(--dv-surface-2); text-decoration: none; }
.dv-paso.actual { background: var(--dv-accent-soft); }
.dv-paso .num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--dv-ink-2); flex: none; background: var(--dv-surface); }
.dv-paso.actual .num { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; }
.dv-paso.hecho .num { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; }
.dv-paso .t { font-weight: 600; font-size: 15px; line-height: 1.25; } .dv-paso.actual .t { color: var(--dv-accent-ink); }
.dv-paso .s { font-size: 12px; color: var(--dv-ink-2); margin-top: 2px; }
.dv-paso.bloqueado { opacity: .55; pointer-events: none; }
.dv-subs { margin: 2px 0 6px 22px; border-left: 1.5px solid var(--dv-line); padding-left: 14px; display: flex; flex-direction: column; gap: 1px; }
.dv-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dv-ink-2); padding: 5px 8px; border-radius: 8px; text-decoration: none; }
.dv-sub:hover { text-decoration: none; background: var(--dv-surface-2); }
.dv-sub .dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); flex: none; }
.dv-sub.hecho .dot { background: var(--dv-ok); border-color: var(--dv-ok); }
.dv-sub.actual { background: var(--dv-accent-soft); color: var(--dv-accent-ink); font-weight: 600; } .dv-sub.actual .dot { background: var(--dv-accent); border-color: var(--dv-accent); }
.dv-sep { border: 0; border-top: 1px solid var(--dv-line); margin: 4px 0; }
.dv-side-link { display: block; padding: 10px 10px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--dv-ink); text-decoration: none; }
.dv-side-link:hover { background: var(--dv-surface-2); text-decoration: none; } .dv-side-link.actual { background: var(--dv-accent-soft); color: var(--dv-accent-ink); }
.dv-saldo { margin-top: auto; background: var(--dv-dark); color: #fff; border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dv-saldo .l { font-size: 12px; color: #B9B9C2; } .dv-saldo .v { font-family: var(--dv-display); font-weight: 800; font-size: 28px; color: var(--dv-lime); letter-spacing: -0.02em; line-height: 1; margin: 4px 0; } .dv-saldo .c { font-size: 12px; color: #B9B9C2; }
.dv-saldo .bar { height: 5px; border-radius: 3px; background: #3A3A44; margin-top: 8px; overflow: hidden; } .dv-saldo .bar i { display: block; height: 100%; background: var(--dv-lime); }
.dv-persona { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dv-ink-2); padding: 4px 6px; }
.dv-persona a { color: inherit; }

/* ---------- botones ---------- */
.dv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--dv-radius-pill); border: 1.5px solid var(--dv-line-2); background: var(--dv-surface); color: var(--dv-ink); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.dv-btn:hover { border-color: var(--dv-ink-3); background: var(--dv-surface-2); }
.dv-btn:active { transform: translateY(1px); }
.dv-btn:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 3px; }
.dv-btn[disabled], .dv-btn[aria-busy=true] { opacity: .55; cursor: default; pointer-events: none; }
.dv-btn.primary { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; }
.dv-btn.primary:hover { background: var(--dv-accent-hover); border-color: var(--dv-accent-hover); }
.dv-btn.dark { background: var(--dv-dark); border-color: var(--dv-dark); color: #fff; } .dv-btn.dark:hover { background: #000; }
.dv-btn.ok { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; }
.dv-btn.quiet { border-color: transparent; background: transparent; } .dv-btn.quiet:hover { background: rgba(0,0,0,.05); }
.dv-btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.dv-btn.lg { height: 56px; padding: 0 28px; font-size: 16px; }
.dv-btn.block { width: 100%; }
.dv-btn.lime { background: var(--dv-lime); border-color: var(--dv-lime); color: var(--dv-lime-ink); }
.dv-btn.danger { color: var(--dv-danger); }
.dv-btn[aria-busy=true]::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dv-spin .7s linear infinite; }
@keyframes dv-spin { to { transform: rotate(360deg); } }
.dv-link-btn { background: none; border: 0; padding: 0; color: var(--dv-accent); font-weight: 500; cursor: pointer; } .dv-link-btn:hover { text-decoration: underline; }

/* píldora de precio */
.dv-precio { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--dv-radius-pill); background: var(--dv-lime); color: var(--dv-lime-ink); font-weight: 700; font-size: 16px; white-space: nowrap; }
.dv-precio small { font-weight: 500; font-size: 12px; opacity: .8; }
.dv-precio.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.dv-precio.neutro { background: var(--dv-surface-2); color: var(--dv-ink); border: 1px solid var(--dv-line); }

/* ---------- tarjetas ---------- */
.dv-card { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius); padding: 24px; }
.dv-card.p16 { padding: 16px; } .dv-card.p20 { padding: 20px; }
.dv-card.soft { background: var(--dv-surface-2); border-color: transparent; }
.dv-card h3 { margin-bottom: 14px; }
.dv-card.dark { background: var(--dv-dark); color: #fff; border-color: var(--dv-dark); }
.dv-card.dark .muted { color: #B9B9C2; }
.dv-card.dark hr { border-color: #33333C; }
.dv-card.warn { background: var(--dv-warn-soft); border-color: transparent; color: var(--dv-warn); }
.dv-card.warn h3, .dv-card.warn h4 { color: var(--dv-warn); }
.dv-card.ok { background: var(--dv-ok-soft); border-color: transparent; }
.dv-card.dashed { border-style: dashed; border-color: var(--dv-line-2); background: transparent; }
.dv-cifra { font-family: var(--dv-display); font-weight: 800; letter-spacing: -0.022em; line-height: 1; font-size: 48px; }
.dv-cifra.lime { color: var(--dv-lime); } .dv-cifra.md { font-size: 36px; } .dv-cifra.sm { font-size: 28px; }
hr.dv { border: 0; border-top: 1px solid var(--dv-line); margin: 16px 0; }

/* tarjeta-opción (radio) */
.dv-opciones { display: grid; gap: 16px; }
.dv-opciones.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-opciones.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-opciones.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .dv-opciones.c3, .dv-opciones.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dv-opciones.c2, .dv-opciones.c3, .dv-opciones.c4 { grid-template-columns: minmax(0, 1fr); } }
.dv-opcion { position: relative; text-align: left; background: var(--dv-surface); border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius); padding: 22px 24px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, background .15s; }
.dv-opcion:hover { border-color: var(--dv-line-2); }
.dv-opcion.elegida { border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-opcion .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; } .dv-opcion.elegida .ico { background: #fff; }
.dv-opcion .radio { position: absolute; top: 20px; right: 20px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); background: #fff; }
.dv-opcion.elegida .radio { border: 6px solid var(--dv-accent); }
/* Miniatura de un diseño en «Abre al público» (orden 2265): arriba en cada tarjeta; con uno solo, a la izquierda y a todo el ancho */
.dv-miniatura { aspect-ratio: 16 / 10; border-radius: var(--dv-radius-sm); background: var(--dv-paper-2); overflow: hidden; display: grid; place-items: center; color: var(--dv-ink-3); font-size: 13px; }
.dv-miniatura img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dv-opcion .dv-miniatura { margin: -6px -8px 4px; }
.dv-diseno-unico { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 700px) { .dv-diseno-unico { grid-template-columns: minmax(0, 1fr); } }
.dv-opcion .t { font-family: var(--dv-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.dv-opcion .s { font-size: 14px; color: var(--dv-ink-2); }
.dv-opcion .tag { position: absolute; top: 22px; right: 54px; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; background: var(--dv-lime); color: var(--dv-lime-ink); }
.dv-opcion .tag.accent { background: transparent; color: var(--dv-accent); padding: 0; letter-spacing: .04em; }
.dv-opcion.compacta { padding: 16px 18px; gap: 6px; } .dv-opcion.compacta .t { font-size: 16px; } .dv-opcion.compacta .radio { display: none; }
.dv-opcion .precio { font-family: var(--dv-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.dv-opcion .precio small { font-family: var(--dv-font); font-weight: 500; font-size: 13px; color: var(--dv-ink-2); margin-left: 6px; letter-spacing: 0; }

/* «Devellia te explica» */
.dv-explica { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--dv-accent-soft); }
.dv-explica .b { font-weight: 700; color: var(--dv-accent-ink); margin-bottom: 2px; font-size: 14px; }
.dv-explica p { font-size: 14px; color: var(--dv-ink); }

/* chips (tono, estilos) */
.dv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-chip { height: 42px; padding: 0 18px; border-radius: var(--dv-radius-pill); border: 1.5px solid var(--dv-line); background: var(--dv-surface); font-weight: 500; font-size: 15px; }
.dv-chip:hover { border-color: var(--dv-line-2); } .dv-chip.on { border-color: var(--dv-accent); color: var(--dv-accent-ink); font-weight: 600; background: var(--dv-accent-soft); }
.dv-chip.sm { height: 34px; padding: 0 14px; font-size: 14px; }

/* campos */
.dv-field { display: flex; flex-direction: column; gap: 8px; }
.dv-field label { font-weight: 600; font-size: 15px; }
.dv-field .help { font-size: 13px; color: var(--dv-ink-2); }
.dv-field .error { font-size: 13px; color: var(--dv-danger); }
/* Contraseña nueva (22/10/2026): medidor de seguridad, requisitos que se marcan solos y cuenta atrás del enlace */
.dv-clave { display: flex; flex-direction: column; gap: 10px; margin-top: -4px; }
.dv-clave-barra { height: 8px; border-radius: var(--dv-radius-pill); background: var(--dv-line); overflow: hidden; }
.dv-clave-barra > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--dv-danger); transition: width .2s ease, background-color .2s ease; }
.dv-clave[data-nivel="aceptable"] .dv-clave-barra > span { background: var(--dv-accent); }
.dv-clave[data-nivel="fuerte"] .dv-clave-barra > span { background: var(--dv-ok); }
.dv-clave-nivel { font-size: 13px; color: var(--dv-ink-2); }
.dv-clave[data-nivel="debil"] .dv-clave-nivel b { color: var(--dv-danger); }
.dv-clave[data-nivel="aceptable"] .dv-clave-nivel b { color: var(--dv-accent-ink); }
.dv-clave[data-nivel="fuerte"] .dv-clave-nivel b { color: var(--dv-ok); }
.dv-clave-reglas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13px; color: var(--dv-ink-3); }
.dv-clave-reglas li { display: flex; gap: 6px; align-items: center; }
.dv-clave-reglas li .ic { width: 16px; height: 16px; flex: none; color: var(--dv-line-2); }
.dv-clave-reglas li.ok { color: var(--dv-ok); } .dv-clave-reglas li.ok .ic { color: var(--dv-ok); }
@media (max-width: 520px) { .dv-clave-reglas { grid-template-columns: 1fr; } }
.dv-field-aviso:not(:empty) { margin-top: 8px; font-size: 13px; color: var(--dv-danger); }
.dv-clave-reloj { display: flex; gap: 6px; align-items: center; justify-content: center; }
.dv-clave-reloj .ic { width: 16px; height: 16px; }
.dv-clave-reloj b { font-variant-numeric: tabular-nums; }
.dv-input, .dv-textarea, .dv-select { width: 100%; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); padding: 0 16px; height: 52px; font-size: 16px; }
.dv-textarea { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.dv-input:focus, .dv-textarea:focus, .dv-select:focus { outline: 2px solid var(--dv-accent); outline-offset: 0; border-color: var(--dv-accent); }
.dv-input[disabled] { background: var(--dv-surface-2); }
.dv-input.dv-secreto { -webkit-text-security: disc; text-security: disc; } /* clave tapada sin type=password (así Chrome no la autorrellena) */
.dv-input-row { display: flex; gap: 10px; }
.dv-input-row { flex-wrap: wrap; } .dv-input-row > :is(.dv-input, .dv-select, input, select) { flex: 1 1 180px; min-width: 0; } /* sin sitio (móvil), el campo ocupa su fila y el botón baja: antes «https://studi» y «Eli» quedaban estrujados */
.dv-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; }
.dv-check input { width: 22px; height: 22px; accent-color: var(--dv-accent); margin: 1px 0 0; flex: none; }
.dv-check .s { font-size: 13px; color: var(--dv-ink-2); }
.dv-drop { border: 1.5px dashed var(--dv-line-2); border-radius: var(--dv-radius); padding: 28px 20px; text-align: center; color: var(--dv-ink-2); font-size: 14px; cursor: pointer; background: transparent; }
.dv-drop:hover { border-color: var(--dv-accent); }
.dv-drop .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; margin: 0 auto 12px; }
.dv-drop .t { font-family: var(--dv-display); font-weight: 700; font-size: 18px; color: var(--dv-ink); margin-bottom: 6px; }

/* listas y filas de datos */
.dv-filas { display: flex; flex-direction: column; }
.dv-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--dv-line); font-size: 15px; }
.dv-fila:last-child { border-bottom: 0; }
.dv-fila .k { color: var(--dv-ink-2); } .dv-fila .v { font-weight: 600; text-align: right; }
.dv-fila .v > .fs-12 { display: inline-block; white-space: nowrap; } /* «3.220 créditos» nunca se parte en dos líneas: si no cabe al lado del precio, baja entero */
.dv-fila.head { padding: 8px 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dv-ink-3); font-weight: 600; }
.dv-card.dark .dv-fila { border-color: #2C2C34; }
.dv-card.dark .dv-fila .k { color: #C9C9D2; }
.dv-ok-txt { color: var(--dv-ok); font-weight: 600; } .dv-warn-txt { color: var(--dv-warn); font-weight: 600; } .dv-danger-txt { color: var(--dv-danger); font-weight: 600; }

/* lista con marcas (pasos de un trabajo, lista final) */
.dv-lista { display: flex; flex-direction: column; }
.dv-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--dv-line); }
.dv-item:last-child { border-bottom: 0; }
.dv-item .m { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); display: grid; place-items: center; flex: none; background: #fff; color: #fff; }
.dv-item.hecho .m { background: var(--dv-ok); border-color: var(--dv-ok); }
.dv-item.actual .m { border-color: var(--dv-accent); } .dv-item.actual .m::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--dv-accent); }
.dv-item.actual .t { color: var(--dv-accent-ink); font-weight: 600; }
.dv-item.error .m { border-color: var(--dv-danger); background: var(--dv-danger-soft); } .dv-item.error .t { color: var(--dv-danger); font-weight: 600; }   /* paso que ha fallado (recuperar la tienda, orden 2275) */
.dv-item .t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }   /* un dominio largo se parte, no empuja la fila fuera (móvil, 19/10) */ .dv-item .s { font-size: 13px; color: var(--dv-ink-2); }
.dv-item .r { font-size: 14px; color: var(--dv-ink-2); white-space: nowrap; }
.dv-item.pendiente .t { color: var(--dv-ink-3); }
@media (max-width: 560px) { .dv-item { flex-wrap: wrap; } .dv-item > .t { flex: 1 1 9em; } .dv-item > .r { margin-left: auto; } } /* móvil: si el texto de la derecha («Opcional · desde 20 €») no deja sitio, baja él; el texto ya no sale letra a letra */
.dv-item .icobox { width: 40px; height: 40px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; flex: none; }
@media (max-width: 480px) { .dv-item:has(> .dv-btn) { flex-wrap: wrap; } .dv-item:has(> .dv-btn) > .t { flex: 1 1 calc(100% - 54px); } .dv-item:has(> .dv-btn) > .dv-btn { margin-left: 54px; } } /* móvil: el botón de la fila baja debajo del texto en vez de dejarlo en una columna estrecha */

/* progreso */
.dv-progreso { height: 8px; border-radius: 4px; background: var(--dv-paper-2); overflow: hidden; }
.dv-progreso i { display: block; height: 100%; background: var(--dv-accent); transition: width .4s ease-out; }
.dv-progreso.lime { background: #2E2E36; } .dv-progreso.lime i { background: var(--dv-lime); }
.dv-progreso.ok i { background: var(--dv-ok); }

/* vista previa */
.dv-preview { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--dv-line); background: #fff; aspect-ratio: 16 / 10; }
.dv-preview img, .dv-preview iframe { width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0; display: block; }
.dv-preview iframe.escala { width: 1440px; height: 900px; transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.dv-preview.movil iframe.escala { width: 390px; height: 693px; }
.dv-preview.movil { aspect-ratio: 9 / 16; max-width: 390px; margin: 0 auto; }
.dv-preview .full { position: absolute; top: 12px; right: 12px; z-index: 4; }
.dv-prev-abrir { position: absolute; inset: 0; z-index: 2; cursor: zoom-in; }
.dv-preview.senalando .dv-prev-abrir { display: none; }
.dv-preview .vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dv-ink-3); font-size: 14px; background: var(--dv-paper-2); }
.dv-seg { display: inline-flex; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-pill); padding: 4px; background: var(--dv-surface); gap: 2px; }
.dv-seg button { height: 36px; padding: 0 16px; border-radius: var(--dv-radius-pill); border: 0; background: transparent; font-weight: 600; font-size: 14px; color: var(--dv-ink-2); display: inline-flex; align-items: center; gap: 6px; }
.dv-seg button.on { background: var(--dv-dark); color: #fff; }
@media (max-width: 560px) { .dv-seg { max-width: 100%; } .dv-seg button { flex: 1 1 auto; height: auto; min-height: 36px; padding: 6px 14px; white-space: normal; line-height: 1.15; text-align: center; justify-content: center; } } /* «En la copia de pruebas | Directo en la tienda»: en el móvil bajan a dos líneas dentro de su píldora en vez de salirse */
.dv-version { border: 1.5px solid var(--dv-line); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; background: var(--dv-surface); cursor: pointer; text-align: left; }
.dv-version.elegida { border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-version .th { width: 72px; height: 54px; border-radius: 8px; background: var(--dv-paper-2); overflow: hidden; flex: none; } .dv-version .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv-version .t { font-weight: 700; font-size: 16px; } .dv-version .s { font-size: 13px; color: var(--dv-ink-2); margin-top: 2px; } .dv-version .c { font-size: 12px; color: var(--dv-ink-3); margin-top: 4px; }
/* Nombre propio de la propuesta (Jose, 26/10/2026): lápiz junto al título y edición en línea. */
.dv-version .t { min-width: 0; }
.dv-nombre { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.dv-lapiz { border: 0; background: none; padding: 4px; border-radius: 8px; color: var(--dv-ink-3); cursor: pointer; display: inline-grid; place-items: center; flex: none; line-height: 0; }
.dv-lapiz:hover, .dv-lapiz:focus-visible { color: var(--dv-ink); background: var(--dv-paper-2); }
h1 .dv-lapiz .ic { width: 20px; height: 20px; }
.dv-nombre-in { font: inherit; color: inherit; border: 1.5px solid var(--dv-accent); border-radius: 8px; padding: 2px 8px; background: var(--dv-surface); width: min(100%, 26ch); min-width: 0; }
.dv-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; line-height: 1.3; border-radius: 13px; font-size: 12px; font-weight: 700; background: var(--dv-accent); color: #fff; }
.dv-pill.ok { background: var(--dv-ok-soft); color: var(--dv-ok); } .dv-pill.warn { background: var(--dv-warn-soft); color: var(--dv-warn); } .dv-pill.neutro { background: var(--dv-paper-2); color: var(--dv-ink-2); } .dv-pill.lime { background: var(--dv-lime); color: var(--dv-lime-ink); }

/* pantalla completa */
.dv-full { position: fixed; inset: 0; background: var(--dv-dark); z-index: 50; display: flex; flex-direction: column; }
.dv-full .top { height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 24px; color: #fff; }
.dv-full .top .dv-btn { background: #26262E; border-color: #26262E; color: #fff; } .dv-full .top .dv-btn.primary { background: var(--dv-accent); border-color: var(--dv-accent); }
.dv-full .top .dv-seg { background: #26262E; border-color: #26262E; } .dv-full .top .dv-seg button { color: #C9C9D2; } .dv-full .top .dv-seg button.on { background: #fff; color: var(--dv-ink); }
.dv-full .body { flex: 1; padding: 0 24px 24px; display: flex; justify-content: center; min-height: 0; }
.dv-full iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; background: #fff; }
.dv-full iframe.tablet { max-width: 820px; } .dv-full iframe.movil { max-width: 400px; }
/* Vista del diseño en pestaña aparte con el selector de pantallas (js/vista.js; Jose, 03/11/2026) */
.dv-vista-body { margin: 0; overflow: hidden; background: #fff; }
.dv-vista { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
.dv-vista-marco { width: 100%; height: 100%; }
.dv-vista iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.dv-vista.es-movil { background: #E4E4E8; }
.dv-vista.es-movil .dv-vista-marco { width: 414px; height: min(868px, calc(100vh - 48px)); border: 12px solid #111; border-radius: 44px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.25); background: #fff; }
.dv-aprobar-nota { position: relative; display: flex; gap: 16px; align-items: center; margin-top: 32px; padding: 24px; border: 2px solid var(--dv-accent); border-radius: 20px; background: var(--dv-accent-soft); color: var(--dv-ink); }
.dv-aprobar-nota-chip { position: absolute; top: -12px; left: 20px; padding: 3px 10px; border-radius: 999px; background: var(--dv-lime); color: var(--dv-lime-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dv-aprobar-nota-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--dv-accent); }
.dv-aprobar-nota-txt { flex: 1; min-width: 0; } .dv-aprobar-nota-txt > b { display: block; font-size: 17px; color: var(--dv-accent-ink); margin-bottom: 4px; }
.dv-aprobar-nota-txt p { margin: 0; line-height: 1.5; color: var(--dv-ink); }
.dv-aprobar-nota .dv-btn { flex: none; }
@media (max-width: 720px) { .dv-aprobar-nota { flex-direction: column; align-items: flex-start; } .dv-aprobar-nota .dv-btn { width: 100%; justify-content: center; } }
.dv-vista-nada { padding: 40px; font-family: var(--dv-font); }
.dv-pags { position: fixed; left: 16px; bottom: 16px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-family: var(--dv-font); }
.dv-pags-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: var(--dv-dark); color: #fff; font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.dv-pags-btn b { font-weight: 600; }
.dv-pags-btn .disp { font-size: 12px; font-weight: 600; color: var(--dv-lime); background: rgba(212,243,107,.14); padding: 3px 8px; border-radius: 6px; }
.dv-pags-btn svg { transition: transform .15s; } .dv-pags-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.dv-pags-btn:focus-visible, .dv-pags-panel button:focus-visible { outline: 2px solid var(--dv-lime); outline-offset: 2px; }
.dv-pags-panel { width: 372px; max-width: calc(100vw - 32px); max-height: calc(100vh - 90px); overflow: auto; padding: 8px; background: var(--dv-dark); color: #fff; border-radius: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.dv-pags-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 10px 10px; }
.dv-pags-tit { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9C9AA8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-pags-seg { display: flex; padding: 3px; background: #26262E; border-radius: 10px; flex: none; }
.dv-pags-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: #C9C9D2; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dv-pags-seg button.on { background: #fff; color: var(--dv-ink); }
.dv-pags-lista { display: flex; flex-direction: column; gap: 2px; }
.dv-pags-lista button { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.dv-pags-lista button .n { font-size: 11px; font-weight: 700; color: var(--dv-lime); min-width: 16px; }
.dv-pags-lista button:hover { background: #26262E; } .dv-pags-lista button.on { background: #33333D; }
/* Enlace para compartir (Jose, 04/11/2026; js/compartir.js, js/compartido.js) */
.dv-pags-firma { display: block; margin: 6px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid #2E2E37; color: #9C9AA8; font-size: 12px; text-decoration: none; }
.dv-pags-firma b { color: #fff; font-weight: 700; } .dv-pags-firma:hover b { color: var(--dv-lime); }
.dv-compartido-nada { min-height: 100vh; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; font-family: var(--dv-font); background: var(--dv-bg, #F6F4EF); color: var(--dv-ink); }
.dv-compartido-nada b { font-size: 20px; } .dv-compartido-nada p { margin: 0; color: var(--dv-ink-2, #5d5a66); max-width: 420px; } .dv-compartido-nada a { color: var(--dv-accent); font-weight: 600; }
.dv-compartir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dv-compartir-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; padding: 10px 10px 10px 12px; border: 1.5px dashed var(--dv-line); border-radius: 16px; background: var(--dv-surface); }
.dv-compartir-barra .dv-compartir-ico { width: 34px; height: 34px; border-radius: 10px; }
.dv-compartir-txt { flex: 1 1 120px; min-width: 0; font-size: 14px; line-height: 1.3; }
.dv-compartir-txt b { display: block; } .dv-compartir-txt span { color: var(--dv-ink-2); font-size: 13px; }
.dv-compartir-acc { flex: none; display: flex; gap: 8px; }
.dv-compartir.columna { flex-direction: column; align-items: stretch; flex: none; }
.dv-compartir-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-accent); }
.dv-compartir-campo { display: flex; gap: 8px; }
.dv-compartir-campo .dv-input { flex: 1; min-width: 0; height: 48px; font-size: 14px; font-family: var(--dv-mono, ui-monospace, monospace); background: var(--dv-surface-2); }
.dv-compartir-dlg { max-width: 560px; }
.dv-compartir-pie { padding-top: 12px; border-top: 1px solid var(--dv-line); }
.dv-compartir-dcha { margin-left: auto; }
.dv-cab-compartir { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dv-cab-compartir > :first-child { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .dv-compartir-acc { width: 100%; } .dv-compartir-acc > .dv-btn { flex: 1; } .dv-compartir-campo { flex-direction: column; } .dv-cab-compartir { flex-direction: column; } .dv-compartir.columna { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 640px) { .dv-pags { left: 10px; bottom: 10px; } .dv-vista.es-movil .dv-vista-marco { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; } }

/* tabla */
.dv-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.dv-tabla th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dv-ink-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--dv-line); }
.dv-tabla td { padding: 16px 12px; border-bottom: 1px solid var(--dv-line); vertical-align: middle; }
.dv-tabla tr:last-child td { border-bottom: 0; }
.dv-tabla td.r, .dv-tabla th.r { text-align: right; }
.dv-thumb { width: 44px; height: 44px; border-radius: 8px; background: #E8D5B7; flex: none; overflow: hidden; } .dv-thumb img { width: 100%; height: 100%; object-fit: cover; } .dv-thumb.vacio { background: transparent; border: 1.5px dashed var(--dv-line-2); }

/* swatches */
.dv-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.dv-swatch { width: 88px; }
.dv-swatch .c { height: 88px; border-radius: 12px; border: 1px solid var(--dv-swatch-borde); box-sizing: border-box; }
.dark { --dv-swatch-borde: rgba(255,255,255,.6); }
.dv-swatch .n { font-weight: 600; font-size: 14px; margin-top: 8px; } .dv-swatch .h { font-size: 12px; color: var(--dv-ink-2); }
.dv-swatch.sm { width: 44px; } .dv-swatch.sm .c { height: 44px; border-radius: 10px; }
.dv-swatch.add .c { border: 1.5px dashed var(--dv-line-2); display: grid; place-items: center; color: var(--dv-ink-3); cursor: pointer; }
.dv-mini { width: 100%; aspect-ratio: 16/10; border-radius: 10px; background: var(--dv-surface-2); border: 1px solid var(--dv-line); overflow: hidden; display: grid; place-items: center; color: var(--dv-ink-3); font-size: 13px; text-align: center; } .dv-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .dv-mini.sm { width: 96px; flex: 0 0 96px; border-radius: 6px; font-size: 10px; line-height: 1.2; padding: 0 4px; } .dv-mini.sm:has(img) { padding: 0; }
.dv-mini-carga { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; }
.dv-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--dv-line); border-top-color: var(--dv-accent); animation: dv-spin .8s linear infinite; }
.dv-mini.sm .dv-spin { width: 18px; height: 18px; border-width: 2px; }
.dv-mini-tienda { display: flex; flex-direction: column; gap: 8px; } .dv-mini-tienda b { overflow-wrap: anywhere; }
.dv-fotos { display: flex; gap: 8px; flex-wrap: wrap; } .dv-fotos div { width: 64px; height: 64px; border-radius: 8px; background: #E8D5B7; overflow: hidden; } .dv-fotos img { width: 100%; height: 100%; object-fit: cover; }
.dv-estilo { border: 1.5px solid var(--dv-line); border-radius: 14px; padding: 12px; background: var(--dv-surface); cursor: pointer; text-align: left; }
.dv-estilo.elegido { border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-estilo .p { display: flex; height: 68px; border-radius: 8px; overflow: hidden; border: 1px solid var(--dv-swatch-borde); } .dv-estilo .p i { flex: 1; } .dv-estilo .p i + i { border-left: 1px solid var(--dv-swatch-borde); }
.dv-estilo .t { font-weight: 600; font-size: 14px; margin-top: 10px; }

/* chat de Devellia */
.dv-chat-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--dv-surface); border-left: 1px solid var(--dv-line); box-shadow: var(--dv-shadow); z-index: 40; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease-out; }
body.chat-open .dv-chat-panel { transform: none; }
.dv-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--dv-line); }
.dv-chat-body { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dv-msg { max-width: 92%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; background: var(--dv-surface-2); align-self: flex-start; white-space: pre-wrap; }
.dv-msg.yo { background: var(--dv-accent); color: #fff; align-self: flex-end; }
.dv-msg.sys { background: transparent; color: var(--dv-ink-3); font-size: 13px; align-self: center; }
/* Respuestas del asistente (textoRico, orden 2097): párrafos con aire y listas con sangría. */
.dv-msg.rico { white-space: normal; }
.dv-rico > * { margin: 0; }
.dv-rico > * + * { margin-top: 10px; }
.dv-rico ol, .dv-rico ul { padding-left: 22px; }
.dv-rico li + li { margin-top: 6px; }
.dv-rico li::marker { color: var(--dv-ink-3); font-weight: 600; }
.dv-rico strong { font-weight: 650; }
.dv-rico a { color: var(--dv-accent); word-break: break-all; }
.dv-sugerencias { display: flex; flex-direction: column; gap: 8px; }
.dv-sugerencias button { text-align: left; height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--dv-line); background: #fff; font-size: 14px; }
.dv-chat-foot { padding: 14px 20px 18px; border-top: 1px solid var(--dv-line); }
.dv-chat-input { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--dv-line); border-radius: 14px; padding: 6px 6px 6px 16px; }
.dv-chat-input textarea { flex: 1; border: 0; resize: none; height: 24px; max-height: 120px; font-size: 14px; outline: none; padding: 0; line-height: 24px; }
.dv-chat-input .send { width: 40px; height: 40px; border-radius: 10px; background: var(--dv-accent); color: #fff; border: 0; display: grid; place-items: center; }
.dv-chat-foot .nota { font-size: 12px; color: var(--dv-ink-3); text-align: center; margin-top: 10px; }

/* señalar en la vista previa */
.dv-marca { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--dv-accent); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(59,42,230,.25); pointer-events: none; }
.dv-preview.senalando { cursor: crosshair; touch-action: none; }
.dv-marcas { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.dv-punto { position: absolute; }
.dv-punto > .dv-marca { left: 0; top: 0; }
.dv-zona { position: absolute; border: 2px dashed var(--dv-accent); background: rgba(59,42,230,.08); border-radius: 8px; }
.dv-zona > .dv-marca { left: 0; top: 0; }
.dv-nota { position: absolute; pointer-events: auto; display: flex; align-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--dv-accent); border-radius: 10px; padding: 3px 3px 3px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.dv-punto > .dv-nota { left: 20px; top: 0; transform: translateY(-50%); }
.dv-punto.izq > .dv-nota { left: auto; right: 20px; }
.dv-zona > .dv-nota { left: -2px; top: calc(100% + 6px); }
.dv-zona.arriba > .dv-nota { top: auto; bottom: calc(100% + 6px); }
.dv-nota input { border: 0; outline: 0; background: transparent; font: 500 14px/1.3 var(--dv-font); color: #111; width: min(240px, 50vw); }
.dv-nota .x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--dv-surface-2, #f3f1ec); color: #111; font-size: 17px; line-height: 1; cursor: pointer; }
.dv-senales { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dv-senal { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 6px; border: 1px solid var(--dv-line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; }
.dv-senal:hover { border-color: var(--dv-accent); }
.dv-senal > .dv-marca { position: static; transform: none; flex: none; }
.dv-senal .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(420px, 60vw); }
.dv-senal .x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--dv-surface-2, #f3f1ec); color: #111; font-size: 16px; line-height: 1; cursor: pointer; }
.dv-senal .x:hover, .dv-nota .x:hover { background: #fde2e2; color: #b42318; } .dv-preview.senalando iframe, .dv-preview.senalando img { pointer-events: none; }

/* avisos y toasts */
.dv-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; font-size: 14px; background: var(--dv-surface-2); }
.dv-aviso.ok { background: var(--dv-ok-soft); color: var(--dv-ok); } .dv-aviso.warn { background: var(--dv-warn-soft); color: var(--dv-warn); } .dv-aviso.danger { background: var(--dv-danger-soft); color: var(--dv-danger); } .dv-aviso.info { background: var(--dv-accent-soft); color: var(--dv-accent-ink); }
.dv-aviso b { font-weight: 700; }
.dv-aviso:not(:has(> :is(div, svg, p, span, button, a))) { display: block; } /* aviso escrito a mano («<b>No hemos podido…</b> texto»): se lee de corrido; en flex el título y el texto salían en dos columnas */
.toasts { position: fixed; right: 20px; bottom: calc(var(--dv-bar-h) + 16px); display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--dv-dark); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--dv-shadow); display: flex; gap: 12px; align-items: center; animation: dv-in .2s ease-out; }
.toast.ok { background: var(--dv-ok); } .toast.danger { background: var(--dv-danger); }
.toasts { left: auto; max-width: min(480px, calc(100vw - 32px)); } @media (max-width: 600px) { .toasts { left: 16px; right: 16px; max-width: none; } } /* móvil: el aviso cabe entre márgenes (se salía por la izquierda) */
@keyframes dv-in { from { opacity: 0; transform: translateY(6px); } }
.dv-skel { background: linear-gradient(90deg, var(--dv-paper-2), #fff, var(--dv-paper-2)); background-size: 200% 100%; animation: dv-skel 1.2s linear infinite; border-radius: 8px; height: 18px; }
@keyframes dv-skel { to { background-position: -200% 0; } }
dialog.dv-dlg { border: 0; border-radius: 20px; padding: 32px; width: min(760px, 92vw); box-shadow: var(--dv-shadow); background: #fff; color: var(--dv-ink); }
dialog.dv-dlg::backdrop { background: rgba(17,17,20,.55); }
.dv-dlg .cerrar { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--dv-surface-2); display: grid; place-items: center; }
.dv-pantalla-centro { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.dv-pantalla-centro .caja { width: min(460px, 100%); }

/* inicio: tarjetas de tienda */
.dv-tienda-card { display: flex; flex-direction: column; gap: 14px; }
.dv-tienda-card .th { border-radius: 14px; border: 2px solid var(--dv-accent); overflow: hidden; aspect-ratio: 16 / 8; background: #fff; position: relative; } .dv-tienda-card .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv-tienda-card .th .vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dv-ink-3); font-size: 14px; }
.dv-nueva { border: 1.5px dashed var(--dv-line-2); border-radius: var(--dv-radius); padding: 40px 24px; text-align: center; background: transparent; cursor: pointer; }
.dv-nueva .plus { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid var(--dv-line); display: grid; place-items: center; margin: 0 auto 16px; color: var(--dv-accent); }
.dv-nueva h2 { font-size: 26px; } .dv-nueva p { color: var(--dv-ink-2); margin-top: 8px; }
.dv-linea-pasos { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; }
.dv-linea-pasos .p { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 120px; }
.dv-linea-pasos .p .n { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); display: grid; place-items: center; font-weight: 700; color: var(--dv-ink-2); background: #fff; }
.dv-linea-pasos .p.hecho .n { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; } .dv-linea-pasos .p.actual .n { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; }
.dv-linea-pasos .p .t { font-weight: 600; font-size: 15px; } .dv-linea-pasos .p.actual .t { color: var(--dv-accent-ink); } .dv-linea-pasos .p .s { font-size: 12px; color: var(--dv-ink-2); }
.dv-linea-pasos .l { flex: 1; height: 2px; background: var(--dv-line); margin: 0 8px 36px; } .dv-linea-pasos .l.hecho { background: var(--dv-ok); } .dv-linea-pasos .l.actual { background: var(--dv-accent); }
.dv-atajo { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius); padding: 20px; cursor: pointer; text-align: left; }
.dv-atajo:hover { border-color: var(--dv-line-2); } .dv-atajo .t { font-family: var(--dv-display); font-weight: 700; font-size: 18px; } .dv-atajo .s { font-size: 14px; color: var(--dv-ink-2); margin-top: 6px; } .dv-atajo .p { margin-top: 10px; font-size: 14px; font-weight: 600; }
.dv-barras .b { margin-bottom: 14px; } .dv-barras .b .row { margin-bottom: 6px; }
.dv-meses { display: flex; align-items: flex-end; gap: 18px; height: 180px; padding-top: 24px; } .dv-meses .m { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .dv-meses .m i { width: 56px; border-radius: 8px 8px 2px 2px; background: var(--dv-accent); display: block; min-height: 3px; } .dv-meses .m .v { font-size: 13px; font-weight: 600; } .dv-meses .m .l { font-size: 13px; color: var(--dv-ink-2); }
@media (prefers-reduced-motion: reduce) { *:not(.dv-anima):not(.dv-anima *) { animation: none !important; transition: none !important; } }

.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-version .s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dv-paso .gasto { color: var(--dv-accent-ink); font-weight: 600; }

/* ---- marco con barra superior (Tus tiendas, ¿Qué quieres conseguir?) ---- */
.dv-app-top { min-height: 100vh; display: flex; flex-direction: column; }
.dv-top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 40px; background: var(--dv-surface); border-bottom: 1px solid var(--dv-line); }
.dv-top > .row { justify-self: end; }
.dv-top-pasos { display: flex; align-items: center; gap: 6px; } .dv-top-pasos .seg { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--dv-line); } .dv-top-pasos .seg.on { background: var(--dv-accent); } .dv-top-pasos span:first-child { margin-right: 8px; }
.dv-top-saldo { display: inline-flex; align-items: center; gap: 10px; background: var(--dv-dark); color: #B9B9C2; border-radius: var(--dv-radius-pill); padding: 10px 16px; font-size: 13px; text-decoration: none; } .dv-top-saldo b { color: var(--dv-lime); font-size: 15px; }
.dv-top-user { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-pill); padding: 6px 14px 6px 6px; text-decoration: none; color: var(--dv-ink); font-weight: 600; font-size: 14px; background: var(--dv-surface); } .dv-top-user .salir { color: var(--dv-ink-3); display: inline-flex; margin-left: 4px; }
.dv-work-top { width: min(1400px, 100%); margin: 0 auto; padding: 40px 40px 80px; }
.dv-nueva-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.dv-presu { background: var(--dv-dark); color: #fff; border-radius: 22px; padding: 28px 30px; position: sticky; top: 96px; }
.dv-presu .eyebrow { color: var(--dv-lime); } .dv-presu .cifra { font-family: var(--dv-display); font-weight: 800; font-size: 52px; letter-spacing: -0.022em; line-height: 1; margin: 10px 0 6px; }
.dv-presu .linea { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #2C2C34; font-size: 14px; } .dv-presu .linea b { white-space: nowrap; } .dv-presu .linea .g { color: #fff; font-weight: 700; }
.dv-presu .nota { background: var(--dv-dark-2); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: #D6D6DD; margin-top: 12px; }
@media (max-width: 1100px) { .dv-nueva-grid { grid-template-columns: minmax(0, 1fr); } .dv-presu { position: static; } .dv-top { padding: 12px 16px; grid-template-columns: auto 1fr auto; } .dv-top-pasos .seg { width: 32px; } .dv-work-top { padding: 24px 16px 60px; } }

/* ---- páginas públicas: landing, precios, crear cuenta (mockup Devellia) ---- */
body.lp { background: var(--dv-paper); }
.lp { min-height: 100vh; display: flex; flex-direction: column; }
.lp-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 16px 48px; background: color-mix(in srgb, var(--dv-paper) 88%, transparent); backdrop-filter: blur(10px); }
.lp-links { display: flex; gap: 26px; justify-content: center; } .lp-links a { text-decoration: none; color: var(--dv-ink-2); font-size: 14px; font-weight: 500; } .lp-links a.actual, .lp-links a:hover { color: var(--dv-accent); }
.lp-entrar { text-decoration: none; color: var(--dv-ink); font-size: 14px; font-weight: 500; padding: 0 8px; }
.lp-main { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: 0 32px 64px; }
.lp-hero { text-align: center; padding: 72px 0 32px; } .lp-hero.corta { padding: 56px 0 16px; }
.lp-hero h1 { font-size: 64px; line-height: 1.02; letter-spacing: -0.025em; margin: 20px auto 0; max-width: 900px; }
.lp-sub { font-size: 18px; color: var(--dv-ink-2); max-width: 640px; margin: 20px auto 0; line-height: 1.55; }
.lp-tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--dv-line); background: var(--dv-surface); border-radius: var(--dv-radius-pill); padding: 6px 14px; font-size: 13px; color: var(--dv-ink-2); } .lp-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--dv-accent); }
.lp-hero-form { text-align: left; width: min(680px, 100%); margin: 32px auto 0; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 22px; padding: 20px 22px; box-shadow: var(--dv-shadow); } .lp-hero-form .dv-textarea { border: 0; padding: 8px 0; min-height: 64px; font-size: 17px; }
.lp-hero-notas { display: flex; gap: 12px; justify-content: center; margin-top: 18px; font-size: 13px; color: var(--dv-ink-3); }
.lp-shot { margin: 40px auto 0; width: min(960px, 100%); }
.lp-browser { background: var(--dv-dark); border-radius: 24px; padding: 14px 14px 0; box-shadow: 0 30px 60px rgba(0,0,0,.18); } .lp-browser .dots { display: flex; gap: 6px; padding: 2px 6px 12px; } .lp-browser .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3A3A44; }
.lp-app { display: grid; grid-template-columns: 150px 1fr; background: var(--dv-paper); border-radius: 14px 14px 0 0; overflow: hidden; min-height: 360px; }
.lp-app-side { background: var(--dv-surface); border-right: 1px solid var(--dv-line); padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .lp-app-side .dv-logo { font-size: 16px; margin-bottom: 10px; } .lp-app-side .it { padding: 6px 10px; border-radius: 8px; color: var(--dv-ink-2); } .lp-app-side .it.on { background: var(--dv-accent-soft); color: var(--dv-accent-ink); font-weight: 600; }
.lp-app-saldo { margin-top: auto; background: var(--dv-dark); color: #B9B9C2; border-radius: 12px; padding: 12px; font-size: 11px; } .lp-app-saldo .v { font-family: var(--dv-display); font-weight: 800; font-size: 22px; color: var(--dv-lime); margin: 4px 0; }
.lp-app-main { padding: 22px 26px; } .lp-app-main h3 { font-size: 22px; margin-bottom: 16px; }
.lp-app-pasos { display: flex; align-items: center; gap: 0; margin-bottom: 18px; font-size: 12px; color: var(--dv-ink-3); } .lp-app-pasos .p { display: flex; align-items: center; gap: 8px; } .lp-app-pasos .p + .p::before { content: ''; width: 46px; height: 2px; background: var(--dv-line-2); margin: 0 10px; } .lp-app-pasos .num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); display: grid; place-items: center; font-weight: 700; color: var(--dv-ink-2); background: #fff; } .lp-app-pasos .hecho .num { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; } .lp-app-pasos .hecho { color: var(--dv-ok); } .lp-app-pasos .ahora .num { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; } .lp-app-pasos .ahora { color: var(--dv-accent); font-weight: 700; }
.lp-burbuja { background: var(--dv-surface-2); border-radius: 10px; padding: 10px; font-size: 12px; color: var(--dv-ink-2); margin: 8px 0; } .lp-chip { border: 1px solid var(--dv-line); border-radius: var(--dv-radius-pill); padding: 5px 10px; font-size: 12px; margin-top: 6px; display: inline-block; }
.lp-sec { padding: 80px 0 0; } .lp-sec h2, .lp-dark h2, .lp-cta h2 { font-size: 44px; letter-spacing: -0.022em; line-height: 1.05; }
.lp-sec-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: end; margin-bottom: 36px; } .lp-sec-head p { color: var(--dv-ink-2); font-size: 16px; line-height: 1.6; }
.lp-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .lp-3 h3 { font-size: 22px; } .lp-3 p { font-size: 15px; line-height: 1.55; }
.lp-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; } .lp-paso { border-top: 2px solid var(--dv-ink); padding-top: 20px; } .lp-paso .n { font-family: var(--dv-display); font-weight: 800; font-size: 34px; color: var(--dv-accent); letter-spacing: -0.022em; } .lp-paso h3 { font-size: 18px; margin: 10px 0 8px; } .lp-paso p { font-size: 14px; line-height: 1.55; }
.lp-dark { margin-top: 80px; background: var(--dv-dark); color: #fff; border-radius: 28px; padding: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; } .lp-dark p { color: #B9B9C2; font-size: 16px; line-height: 1.6; margin-top: 16px; } .eyebrow.lime { color: var(--dv-lime); }
.lp-precio-caja { background: var(--dv-surface); color: var(--dv-ink); border-radius: 18px; padding: 22px 24px; } .lp-precio-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--dv-line); font-size: 14px; } .lp-precio-fila:first-of-type { border-top: 0; } .lp-precio-fila b.ok, .lp-tarifa b.ok { color: var(--dv-ok); }
.lp-precio-total { margin-top: 12px; background: var(--dv-accent-soft); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; font-weight: 600; } .lp-precio-total b { font-family: var(--dv-display); font-size: 26px; color: var(--dv-accent); }
.lp-cta { text-align: center; padding: 88px 0 24px; }
.lp-pie { border-top: 1px solid var(--dv-line); padding: 32px 48px; display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; } .lp-pie-links { display: flex; gap: 20px; } .lp-pie-links a { color: var(--dv-ink-2); text-decoration: none; font-size: 14px; }
.lp-toggle { display: inline-flex; margin-top: 28px; border: 1px solid var(--dv-line); background: var(--dv-surface); border-radius: var(--dv-radius-pill); padding: 4px; } .lp-toggle button { border: 0; background: none; border-radius: var(--dv-radius-pill); padding: 8px 18px; font-size: 14px; font-weight: 600; color: var(--dv-ink-2); cursor: pointer; } .lp-toggle button.on { background: var(--dv-dark); color: #fff; }
.lp-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.lp-plan { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; } .lp-plan h3 { font-size: 20px; } .lp-plan .precio { font-family: var(--dv-display); font-weight: 800; font-size: 44px; letter-spacing: -0.022em; line-height: 1; } .lp-plan .precio small { font-family: var(--dv-font); font-weight: 500; font-size: 14px; color: var(--dv-ink-3); margin-left: 4px; letter-spacing: 0; }
.lp-plan .uso { background: var(--dv-surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; } .lp-plan .para { font-size: 14px; color: var(--dv-ink-2); line-height: 1.5; } .lp-plan ul { list-style: none; padding: 0; margin: 0; font-size: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lp-plan.reco { background: var(--dv-dark); color: #fff; border-color: var(--dv-dark); } .lp-plan.reco .uso { background: var(--dv-dark-2); color: #fff; } .lp-plan.reco .uso b { color: var(--dv-lime); } .lp-plan.reco .para, .lp-plan.reco .precio small { color: #B9B9C2; } .lp-reco { background: var(--dv-lime); color: var(--dv-lime-ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; }
.lp-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }
.lp-tarifa .lp-tarifa-fila { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 16px; padding: 14px 0; border-top: 1px solid var(--dv-line); font-size: 15px; align-items: center; } .lp-tarifa .lp-tarifa-fila.cab { border-top: 0; font-size: 11px; letter-spacing: .06em; color: var(--dv-ink-3); font-weight: 700; padding-top: 0; } .lp-tarifa .r { text-align: right; }
.lp-recarga { margin-top: 48px; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 22px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .lp-recarga h3 { font-size: 24px; margin-top: 4px; }
.lp-recarga-op { border: 1.5px solid var(--dv-line); border-radius: 14px; padding: 12px 18px; text-align: center; min-width: 110px; } .lp-recarga-op.on { border-color: var(--dv-accent); } .lp-recarga-op b { font-size: 18px; color: var(--dv-accent-ink); }
.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; padding-top: 64px; } .lp-faq-it { border-top: 1px solid var(--dv-line); padding-top: 18px; } .lp-faq-it h4 { font-size: 18px; margin-bottom: 8px; } .lp-faq-it p { font-size: 15px; line-height: 1.55; }
.lp-registro { min-height: 100vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 24px; } .lp-registro .izq { padding: 32px 56px; max-width: 560px; } .lp-registro h1 { font-size: 52px; letter-spacing: -0.025em; }
.lp-registro .der { background: var(--dv-dark); color: #fff; border-radius: 28px; padding: 56px; display: flex; flex-direction: column; } .lp-registro .der .centro { margin: auto 0; } .lp-registro .der h2 { font-size: 44px; letter-spacing: -0.022em; margin-bottom: 32px; } .lp-registro .der .muted { color: #B9B9C2; }
.lp-regalo { align-self: flex-start; background: var(--dv-dark-2); border-radius: 12px; padding: 12px 18px; color: #D6D6DD; font-size: 15px; } .lp-regalo b { color: var(--dv-lime); font-size: 18px; margin-right: 4px; }
.lp-pasara { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; font-size: 17px; } .lp-pasara .n { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--dv-dark-2); display: grid; place-items: center; font-weight: 700; color: #fff; } .lp-pasara .n.on { background: var(--dv-lime); color: var(--dv-lime-ink); }
.lp-google { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: 1.5px solid var(--dv-line); border-radius: 12px; background: var(--dv-surface); font-weight: 600; font-size: 16px; cursor: pointer; }
.lp-o { display: flex; align-items: center; gap: 12px; color: var(--dv-ink-3); font-size: 13px; } .lp-o::before, .lp-o::after { content: ''; flex: 1; height: 1px; background: var(--dv-line); }
@media (max-width: 1000px) { .lp-nav { grid-template-columns: auto 1fr; padding: 12px 16px; } .lp-links { display: none; } .lp-main { padding: 0 16px 48px; } .lp-hero h1 { font-size: 40px; } .lp-sec h2, .lp-dark h2, .lp-cta h2, .lp-registro .der h2 { font-size: 30px; } .lp-sec-head, .lp-dark, .lp-2, .lp-faq, .lp-registro { grid-template-columns: minmax(0, 1fr); } .lp-3, .lp-planes { grid-template-columns: minmax(0, 1fr); } .lp-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-dark { padding: 28px; } .lp-app { grid-template-columns: minmax(0, 1fr); } .lp-app-side { display: none; } .lp-pie { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; } .lp-registro .izq { padding: 16px; } .lp-registro .der { padding: 28px; } }
.lp-registro .izq h1 { margin-top: 40px; } .lp-registro .izq .lp-sub { margin: 16px 0 28px; text-align: left; } .lp-registro .izq > p:last-child { margin-top: 40px; }

/* Los 5 pasos en horizontal (mockup «Inicio: tu camino y siguiente paso»), encima de cada pantalla del camino */
.dv-pasos-wrap { padding: 32px 56px 0; max-width: 1240px; width: 100%; }
.dv-pasos-wrap[hidden] { display: none; }
.dv-work.con-pasos { padding-top: 28px; }
.dv-pasos { display: flex; align-items: flex-start; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius); padding: 22px 28px; }
.dv-pasos-paso { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; flex: none; text-align: center; color: var(--dv-ink); text-decoration: none; border-radius: 14px; padding: 2px 4px; }
.dv-pasos-paso:hover .t { color: var(--dv-accent); }
.dv-pasos-paso:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.dv-pasos-paso .c { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--dv-display); font-weight: 800; font-size: 16px; border: 2px solid var(--dv-line-2); color: var(--dv-ink-3); background: var(--dv-surface); }
.dv-pasos-paso .c .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.dv-pasos-paso .t { font-size: 15px; font-weight: 600; color: var(--dv-ink-2); line-height: 1.25; }
.dv-pasos-paso .s { font-size: 13px; color: var(--dv-ink-3); line-height: 1.3; }
.dv-pasos-paso.hecho .c { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; }
.dv-pasos-paso.hecho .t { color: var(--dv-ink); }
.dv-pasos-paso.actual .c { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; box-shadow: 0 0 0 6px #E4E0FF; }
.dv-pasos-paso.actual .t { color: var(--dv-accent); }
.dv-pasos-paso.hecho.viendo .c { box-shadow: 0 0 0 6px var(--dv-ok-soft); }
.dv-pasos-linea { flex: 1 1 auto; min-width: 16px; height: 3px; border-radius: 2px; background: var(--dv-line); margin-top: 21px; }
.dv-pasos-linea.hecho { background: var(--dv-ok); }
.dv-pasos-linea.hacia { background: var(--dv-accent); }
@media (min-width: 1900px) { .dv-pasos-wrap { max-width: 1480px; } }
@media (max-width: 1180px) { .dv-pasos-wrap { padding: 24px 32px 0; } .dv-pasos { padding: 18px 16px; } .dv-pasos-paso { width: 110px; } }
@media (max-width: 900px) { .dv-pasos-wrap { padding: 16px 16px 0; } .dv-work.con-pasos { padding-top: 20px; } .dv-pasos { padding: 14px 10px; } .dv-pasos-paso { width: auto; flex: 0 1 64px; } .dv-pasos-paso .s { display: none; } .dv-pasos-paso .t { font-size: 12px; } .dv-pasos-paso .c { width: 32px; height: 32px; font-size: 14px; } .dv-pasos-linea { margin-top: 17px; min-width: 6px; } }

/* Tus tiendas (propuesta 2 del mockup, 29-sep): cabecera con menú, tienda destacada, rejilla y columna de apoyo */
.dv-top-nav { display: flex; gap: 4px; }
.dv-top-nav a { font-size: 15px; color: var(--dv-ink-2); padding: 9px 16px; border-radius: var(--dv-radius-pill); text-decoration: none; }
.dv-top-nav a:hover { color: var(--dv-ink); background: var(--dv-surface-2); }
.dv-top-nav a.on { color: var(--dv-ink); font-weight: 600; background: var(--dv-accent-soft); }
.dv-top-saldo { padding-right: 8px; }
.dv-top-recargar { background: var(--dv-lime); color: var(--dv-ink); font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: var(--dv-radius-pill); }
.dv-ini-h1 { font-size: 56px; line-height: .95; letter-spacing: -0.025em; }
.dv-ini-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.dv-ini-cifras { display: flex; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 18px; overflow: hidden; }
.dv-ini-cifra { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 12px 22px; min-width: 96px; }
.dv-ini-cifra + .dv-ini-cifra { border-left: 1px solid var(--dv-paper-2); }
.dv-ini-cifra b { font-family: var(--dv-display); font-size: 26px; font-weight: 800; line-height: 1; }
.dv-ini-cifra b.accent { color: var(--dv-accent); }
.dv-ini-cifra span { font-size: 13px; color: var(--dv-ink-3); }
.dv-ini-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 28px; align-items: start; }
.dv-ini-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dv-ini-destacada { background: var(--dv-surface); border: 2px solid var(--dv-accent); border-radius: 28px; padding: 22px; display: flex; gap: 28px; box-shadow: 0 18px 40px rgba(59,43,224,.10); }
.dv-ini-destacada .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 6px 6px 6px 0; }
/* «Sigue donde lo dejaste» en pequeño, con la vista a la izquierda (Jose, 03/11/2026: a todo el ancho salía enorme). */
.dv-ini-marco { position: relative; width: 280px; min-height: 190px; flex: none; border-radius: 18px; overflow: hidden; background: var(--dv-dark); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.dv-ini-marco .barra { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.dv-ini-marco .barra i { width: 8px; height: 8px; border-radius: 50%; background: #46434F; }
.dv-ini-marco .barra span { margin-left: 10px; flex: 1; background: #2A2931; color: #B9B6C2; font-size: 11px; border-radius: 6px; padding: 3px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-ini-marco .pantalla { flex: 1; min-height: 0; position: relative; background: #fff; border-radius: 10px; overflow: hidden; display: flex; }
.dv-ini-marco .pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dv-ini-sello { position: absolute; top: 44px; left: 20px; display: inline-flex; align-items: center; gap: 6px; background: var(--dv-lime); color: var(--dv-ink); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: var(--dv-radius-pill); }
.dv-ini-ver { position: absolute; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; background: rgba(21,20,26,.88); color: #fff; font: 600 13px/1 var(--dv-font); padding: 10px 14px; border-radius: var(--dv-radius-pill); border: 0; cursor: pointer; }
.dv-ini-ver:hover { background: var(--dv-dark); }
.dv-ini-ceja { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-accent); }
.dv-ini-ceja.lime { color: var(--dv-lime); }
.dv-ini-nombre { font-size: 34px; line-height: 1; letter-spacing: -0.022em; }
.dv-ini-anillo { position: relative; width: 84px; height: 84px; flex: none; }
.dv-ini-anillo svg { width: 84px; height: 84px; display: block; }
.dv-ini-anillo span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--dv-display); font-size: 20px; font-weight: 800; }
/* Pasitos (19/10): una columna por paso con su círculo centrado y el nombre debajo; el tramo hacia cada paso es su ::before. */
.dv-ini-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.dv-ini-mini li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.dv-ini-mini li + li::before { content: ''; position: absolute; top: 12px; right: calc(50% + 17px); width: calc(100% - 34px); height: 3px; border-radius: 2px; background: var(--dv-line); }
.dv-ini-mini li.tramo-hecho::before { background: var(--dv-ok); } .dv-ini-mini li.tramo-hacia::before { background: var(--dv-accent); }
.dv-ini-mini .c { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--dv-line-2); background: var(--dv-surface); color: var(--dv-ink-3); font: 800 12px/1 var(--dv-display); }
.dv-ini-mini .hecho .c { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; }
.dv-ini-mini .actual .c { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; box-shadow: 0 0 0 5px #E4E0FF; }
.dv-ini-mini .c .ic { width: 13px; height: 13px; stroke-width: 3; }
.dv-ini-mini .t { font-size: 12px; line-height: 1.2; color: var(--dv-ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-ini-mini .actual .t { color: var(--dv-accent); font-weight: 600; }
.dv-ini-mini .hecho .t { color: var(--dv-ink-2); }
.dv-ini-mini.compacto .t { font-size: 11.5px; }
.dv-ini-ahora { background: #F7F6FF; border-radius: 18px; padding: 16px 18px; }
.dv-ini-ahora b { font-size: 16px; } .dv-ini-ahora p { margin: 6px 0 0; font-size: 14px; color: var(--dv-ink-2); line-height: 1.5; }
/* Trabajo en marcha en «Mis proyectos»: spinner + «Diseñando tu tienda…» + avance (22/10/2026). */
.dv-ini-curso { display: flex; align-items: center; gap: 12px; } .dv-ini-curso .dv-spin { flex: none; } .dv-ini-curso b { font-size: 16px; } .dv-ini-curso span:not(.dv-spin) { font-size: 13px; color: var(--dv-ink-2); }
.dv-ini-curso.sm { gap: 10px; } .dv-ini-curso.sm .dv-spin { width: 18px; height: 18px; border-width: 2px; } .dv-ini-curso.sm b { font-size: 14px; }
.dv-ini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; align-items: stretch; }
/* Toda la tarjeta del proyecto abre el proyecto (orden 2307) */
.dv-clic { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dv-clic:hover { border-color: var(--dv-line-2); box-shadow: 0 6px 20px rgba(20, 20, 40, .06); }
.dv-clic:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.dv-ini-tienda { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 26px; padding: 14px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dv-ini-tienda .th { position: relative; width: 100%; aspect-ratio: 16 / 9; flex: none; border-radius: 16px; overflow: hidden; background: var(--dv-paper); border: 1px dashed var(--dv-line-2); display: flex; }
.dv-ini-tienda .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv-ini-tienda .cuerpo { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0 6px 6px; }
.dv-ini-tienda .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dv-ini-tienda .nom { font-size: 17px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.dv-ini-tienda .cab .dv-pill { flex: none; white-space: nowrap; }
.dv-ini-tienda p { margin: 0; line-height: 1.5; }
.dv-ini-tienda .dv-ini-mini { margin-top: auto; padding-top: 4px; }
.dv-ini-tienda .dv-btn { align-self: stretch; justify-content: center; }
.dv-ini-boceto { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--dv-paper); }
.dv-ini-boceto .a { display: block; height: 10px; width: 60%; border-radius: 4px; background: var(--dv-line); }
.dv-ini-boceto .hero { flex: 1; border-radius: 10px; background: radial-gradient(120% 90% at 50% 30%, #fff 0%, var(--dv-accent-soft) 70%); border: 1px solid #E2DDFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; container-type: inline-size; }
.dv-ini-boceto .hero .dv-logo { width: min(62%, 170px); } .dv-ini-boceto .hero .dv-logo svg { width: 100%; height: auto; display: block; }
.dv-ini-boceto .hero .pronto { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--dv-accent); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(59, 43, 224, .25); }
@container (max-width: 150px) { .dv-ini-boceto .hero .pronto { font-size: 10px; padding: 3px 8px; } .dv-ini-boceto .hero .pronto svg { display: none; } }
.dv-ini-boceto .fila { display: flex; gap: 6px; } .dv-ini-boceto .fila i { flex: 1; height: 26px; border-radius: 6px; background: var(--dv-paper-2); }
.dv-ini-nueva { background: var(--dv-dark); color: #fff; border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.dv-ini-nueva h2 { font-size: 26px; line-height: 1.05; color: #fff; }
.dv-ini-nueva .mas { width: 44px; height: 44px; border-radius: 14px; background: var(--dv-lime); color: var(--dv-ink); display: grid; place-items: center; flex: none; }
.dv-ini-nueva p { margin: 2px 0 0; }
.dv-ini-nueva.sola { grid-column: 1 / -1; }
.dv-ini-op { display: flex; align-items: center; gap: 12px; background: #24232B; border: 0; border-radius: 14px; padding: 14px; color: #fff; font: 500 15px/1.3 var(--dv-font); cursor: pointer; text-align: left; }
.dv-ini-op .ic:first-child { color: var(--dv-lime); }
.dv-ini-op:hover { background: #2E2D36; } .dv-ini-op:focus-visible { outline: 2px solid var(--dv-lime); outline-offset: 2px; }
.dv-ini-lado { display: flex; flex-direction: column; gap: 18px; }
.dv-ini-lado .dv-card { border-radius: 24px; } .dv-ini-lado hr.dv { margin: 2px 0; }
.dv-ini-lado .dv-explica { border-radius: 24px; } .dv-ini-lado .dv-explica p { margin: 0; } .dv-ini-lado .dv-explica .dv-btn { align-self: flex-start; background: #fff; }
.dv-ini-aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--dv-warn-soft); color: #5C3300; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.dv-ini-aviso .ic { color: var(--dv-warn); margin-top: 2px; }
.dv-ini-barras { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.dv-ini-barras i { width: 14px; border-radius: 4px; background: var(--dv-line); } .dv-ini-barras i.este { background: var(--dv-accent); }
.dv-ini-persona { display: flex; align-items: center; gap: 14px; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 24px; padding: 18px 20px; color: var(--dv-ink); text-decoration: none; }
.dv-ini-persona:hover { border-color: var(--dv-line-2); }
.dv-ini-persona .av { width: 44px; height: 44px; border-radius: 50%; background: var(--dv-ok-soft); color: var(--dv-ok); display: grid; place-items: center; flex: none; }
.dv-ini-persona b { display: block; font-size: 15px; } .dv-ini-persona span { font-size: 13px; color: var(--dv-ink-3); }
.dv-ini-persona .ir { width: 40px; height: 40px; border-radius: 50%; background: var(--dv-dark); color: #fff; display: grid; place-items: center; flex: none; }
@media (max-width: 1280px) { .dv-ini-cuerpo { grid-template-columns: minmax(0, 1fr); } .dv-ini-lado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 1100px) { .dv-top-nav { display: none; } }
@media (max-width: 760px) { .dv-ini-h1 { font-size: 40px; } .dv-ini-lado { grid-template-columns: minmax(0, 1fr); } .dv-ini-cifras { display: none; } .dv-top-saldo span:not(.dv-top-recargar) { display: none; } }

/* Botones que se ven como botones (29-sep): borde más marcado, sombra de «pulsable» y un pequeño relieve al pasar.
   Los secundarios dejan de ser texto suelto: todos llevan borde. */
.dv-btn { border-width: 1.5px; border-color: #BDB7AB; box-shadow: 0 1px 0 rgba(21,20,26,.06), 0 2px 6px rgba(21,20,26,.06); transition: background .12s, border-color .12s, box-shadow .12s, transform .06s; }
.dv-btn:hover { border-color: var(--dv-ink-3); background: var(--dv-surface-2); box-shadow: 0 1px 0 rgba(21,20,26,.08), 0 4px 12px rgba(21,20,26,.10); }
.dv-btn:active { box-shadow: 0 1px 2px rgba(21,20,26,.10); }
.dv-btn.primary { box-shadow: 0 2px 0 #2419A8, 0 6px 16px rgba(59,43,224,.28); }
.dv-btn.primary:hover { box-shadow: 0 2px 0 #1E1590, 0 8px 20px rgba(59,43,224,.34); }
.dv-btn.dark { box-shadow: 0 2px 0 #000, 0 6px 14px rgba(21,20,26,.22); }
.dv-btn.ok { box-shadow: 0 2px 0 #145A38, 0 6px 14px rgba(31,122,77,.22); }
.dv-btn.lime { border-color: #B9D84E; box-shadow: 0 2px 0 #A8C840, 0 4px 10px rgba(21,20,26,.10); }
.dv-btn.lime:hover { background: #DDF78A; border-color: #A8C840; }
.dv-btn.quiet { border-color: #BDB7AB; background: var(--dv-surface); }
.dv-btn.quiet:hover { background: var(--dv-surface-2); }
.dv-topbar-mobile .dv-btn.quiet, .dv-dlg .cerrar { box-shadow: none; }
.dv-btn.danger { border-color: #E3A9A6; }
.dv-btn.danger:hover { background: var(--dv-danger-soft); border-color: var(--dv-danger); }
.dv-btn.icono { width: 40px; height: 40px; padding: 0; }
.dv-link-btn { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(59,43,224,.35); }
.dv-saldo .dv-btn.lime { height: 34px; }

/* Menús con icono: barra lateral y menú superior */
.dv-side-link { display: flex; align-items: flex-start; gap: 12px; }
.dv-side-link > .ic { margin-top: 2px; color: var(--dv-ink-3); }
.dv-side-link:hover > .ic { color: var(--dv-ink); }
.dv-side-link.actual > .ic { color: var(--dv-accent); }
.dv-top-nav a { display: inline-flex; align-items: center; gap: 8px; }
.dv-top-nav a .ic { width: 17px; height: 17px; color: var(--dv-ink-3); }
.dv-top-nav a.on .ic, .dv-top-nav a:hover .ic { color: var(--dv-accent); }
button.dv-persona.boton, a.dv-persona.boton { font: inherit; cursor: pointer; text-align: left; width: calc(100% - 4px); margin: 0 2px; padding: 10px 12px; border: 1.5px solid var(--dv-line); border-radius: 14px; background: var(--dv-surface); color: var(--dv-ink); font-weight: 500; text-decoration: none; }
.dv-persona.boton:hover { border-color: var(--dv-line-2); background: var(--dv-surface-2); }
.dv-persona.boton .ic { color: var(--dv-ok); }

/* Borrar una tienda desde «Tus tiendas» */
.dv-ini-tienda .th .dv-ini-borrar { position: absolute; top: 8px; right: 8px; z-index: 1; background: #fff; }

.dv-ini-destacada .dv-ini-borrar { position: static; }

/* Tu saldo (propuesta 2 del mockup, 29-sep): gasto con filtros, barras por mes, movimientos y columna de saldo */
.dv-sal { grid-template-columns: minmax(0, 1fr) 360px; }
.dv-sal-gasto, .dv-sal-movs { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 28px; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.dv-sal-movs { gap: 12px; padding: 24px 28px; }
.dv-sal-titulo { font-size: 30px; line-height: 1; letter-spacing: -0.022em; }
.dv-sal-titulo.sm { font-size: 24px; }
.dv-sal-seg { display: flex; gap: 2px; padding: 4px; background: var(--dv-paper); border: 1px solid var(--dv-line); border-radius: var(--dv-radius-pill); }
.dv-sal-seg button { font: 600 14px/1 var(--dv-font); border: 0; background: transparent; color: var(--dv-ink-3); padding: 10px 16px; border-radius: var(--dv-radius-pill); cursor: pointer; }
.dv-sal-seg button.on { background: #fff; color: var(--dv-ink); box-shadow: 0 1px 3px rgba(21,20,26,.15); }
.dv-sal-seg button:focus-visible, .dv-sal-chip:focus-visible, .dv-sal-cat:focus-visible, .dv-sal-montos button:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
@media (max-width: 480px) { .dv-sal-seg { width: 100%; } .dv-sal-seg button { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13px; line-height: 1.15; text-align: center; white-space: normal; } } /* «12 maanden», «Ce mois-ci»…: los cuatro periodos caben en 390 px */
.dv-sal-filtro { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dv-sal-chip { font: 400 14px/1 var(--dv-font); padding: 9px 14px; border-radius: var(--dv-radius-pill); border: 1.5px solid #D9D4CA; background: #fff; color: var(--dv-ink-2); cursor: pointer; }
.dv-sal-chip:hover { border-color: var(--dv-ink-3); }
.dv-sal-chip.on { border-color: var(--dv-accent); background: var(--dv-accent-soft); color: var(--dv-accent-ink); font-weight: 600; }
.dv-sal-chip.oscuro { font-weight: 600; }
.dv-sal-chip.oscuro.on { border-color: var(--dv-dark); background: var(--dv-dark); color: #fff; }
.dv-sal-cat { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--dv-font); padding: 9px 14px; border-radius: var(--dv-radius-pill); border: 1.5px solid #D9D4CA; background: #fff; color: var(--dv-ink); cursor: pointer; }
.dv-sal-cat i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid; }
.dv-sal-cat.off { opacity: .5; text-decoration: line-through; text-decoration-color: rgba(21,20,26,.35); }
.dv-sal-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dv-sal-kpi { background: var(--dv-paper); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-sal-kpi .t { font-size: 13px; color: var(--dv-ink-3); }
.dv-sal-kpi b { font-family: var(--dv-display); font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-sal-kpi .s { font-size: 12px; color: var(--dv-ink-3); }
.dv-sal-kpi.dark { background: var(--dv-dark); } .dv-sal-kpi.dark .t, .dv-sal-kpi.dark .s { color: #B9B6C2; } .dv-sal-kpi.dark b { color: var(--dv-lime); }
.dv-sal-cuerpo { display: flex; gap: 28px; align-items: stretch; }
.dv-sal-grafica { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dv-sal-grafica .area { position: relative; height: 236px; margin-left: 48px; }
.dv-sal-grafica .linea { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dv-line); }
.dv-sal-grafica .linea span { position: absolute; left: -48px; top: -8px; width: 40px; text-align: right; font-size: 11px; color: var(--dv-ink-3); }
.dv-sal-grafica .cols { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: flex; align-items: flex-end; gap: 18px; padding: 0 6px; }
.dv-sal-grafica .cols.densa, .dv-sal-grafica .meses.densa { gap: 10px; }
.dv-sal-grafica .col-mes { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.dv-sal-grafica .col-mes .v { font-size: 11px; font-weight: 600; color: var(--dv-ink-2); white-space: nowrap; }
.dv-sal-grafica .barra { width: 100%; max-width: 56px; display: flex; flex-direction: column-reverse; border-radius: 8px; overflow: hidden; background: var(--dv-paper-2); }
.dv-sal-grafica .barra i { display: block; flex: none; }
.dv-sal-grafica .meses { display: flex; gap: 18px; padding: 10px 6px 0; margin-left: 48px; }
.dv-sal-grafica .meses span { flex: 1; text-align: center; font-size: 12px; color: var(--dv-ink-3); }
.dv-sal-grafica .meses span.actual { color: var(--dv-accent); font-weight: 700; }
.dv-sal-grafica .vacio { position: absolute; inset: 20px 20px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: rgba(255,255,255,.85); border-radius: 16px; }
.dv-sal-grafica .vacio span { font-size: 14px; color: var(--dv-ink-2); }
.dv-sal-reparto { width: 250px; flex: none; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--dv-paper-2); padding-left: 24px; }
.dv-sal-reparto .fila { display: flex; flex-direction: column; gap: 6px; } .dv-sal-reparto .fila.off { opacity: .45; }
.dv-sal-reparto i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid; }
.dv-sal-reparto .pista { height: 8px; border-radius: 4px; background: var(--dv-paper-2); overflow: hidden; } .dv-sal-reparto .pista div { height: 8px; }
.dv-sal-nota { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; background: #F7F6FF; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #2E2C35; }
.dv-sal-nota .ic { color: var(--dv-accent); margin-top: 2px; }
.dv-sal-fila { display: grid; grid-template-columns: 90px minmax(0, 1fr) 150px 100px 110px; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #F3F0EA; font-size: 14px; }
.dv-sal-fila.cab { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-ink-3); border-bottom-color: var(--dv-paper-2); padding-top: 4px; }
.dv-sal-fila .que { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dv-sal-fila .que .ico { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; } .dv-sal-fila .que .ico i { width: 10px; height: 10px; border-radius: 3px; }
.dv-sal-fila .que .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sal-fila .imp { text-align: right; } .dv-sal-fila b.imp.pos { color: var(--dv-ok); }
.dv-sal-tienes { background: var(--dv-dark); color: #fff; border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dv-sal-tienes .l { font-size: 13px; color: #B9B6C2; }
.dv-sal-tienes .v { font-family: var(--dv-display); font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -0.022em; color: var(--dv-lime); }
.dv-sal-cupon { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; background: #2E2D36; border-radius: 12px; padding: 8px 12px; }
.dv-sal-cupon b { color: var(--dv-lime); }
.dv-sal-cupon .muted { color: #B9B9C2; }   /* nota del cupón y del regalo en la tarjeta oscura «Tienes ahora»: el gris de .muted no se lee (Jose 02/11) */
.dv-sal-tienes hr { border: 0; border-top: 1px solid #2E2D36; margin: 0; width: 100%; }
.dv-sal-llega { display: flex; align-items: center; gap: 12px; background: #24232B; border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.dv-sal-llega .ok { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--dv-ok); display: grid; place-items: center; } .dv-sal-llega .ok .ic { stroke-width: 3; width: 13px; height: 13px; }
.dv-sal-llega .no { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--dv-ink-3); display: grid; place-items: center; color: #FFB27A; font-weight: 700; font-size: 13px; }
.dv-sal-llega .p { font-size: 12px; color: #B9B6C2; text-align: right; } .dv-sal-llega .p.falta { color: #FFB27A; }
.dv-sal-montos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dv-sal-montos button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 16px; border: 2px solid var(--dv-line); background: #fff; cursor: pointer; font-family: var(--dv-font); }
.dv-sal-montos button:hover { border-color: var(--dv-line-2); }
.dv-sal-montos button.on { border-color: var(--dv-accent); background: #F7F6FF; }
.dv-sal-paga { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--dv-paper-2, #F6F4EF); font-size: 15px; }
.dv-sal-paga:empty { display: none; }
.dv-sal-fac { padding: 10px 14px; border: 1px solid var(--dv-line, #E7E3DA); border-radius: 12px; align-items: center; }
.dv-sal-fac .col { gap: 2px; min-width: 0; }
.dv-sal-montos b { font-family: var(--dv-display); font-size: 24px; font-weight: 800; color: var(--dv-ink); }
.dv-sal-montos span { font-size: 11px; color: var(--dv-ink-3); }
.dv-sal-montos em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--dv-ok); min-height: 14px; }
.dv-sal-auto { display: flex; align-items: center; gap: 12px; opacity: .7; }
.dv-sal-auto .sw { width: 40px; height: 24px; border-radius: var(--dv-radius-pill); background: var(--dv-line-2); position: relative; flex: none; }
.dv-sal-auto .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
@media (max-width: 1280px) { .dv-sal { grid-template-columns: minmax(0, 1fr); } .dv-sal-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dv-sal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-sal-cuerpo { flex-direction: column; } .dv-sal-reparto { width: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--dv-paper-2); padding-top: 16px; } .dv-sal-fila { grid-template-columns: 80px minmax(0, 1fr) 100px; } .dv-sal-fila > :nth-child(3), .dv-sal-fila > :nth-child(4) { display: none; } }
@media (max-width: 760px) { .dv-sal-lado { grid-template-columns: minmax(0, 1fr); } .dv-sal-gasto, .dv-sal-movs { padding: 20px 16px; } .dv-sal-grafica .cols, .dv-sal-grafica .meses { gap: 6px; } .dv-sal-grafica .col-mes .v { display: none; } }
.dv-sal-auto > .col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }


/* Avatar de «Devellia te explica» y del chat: el imagotipo en pequeño */
.dv-avatar.dev { font-size: 0; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 8 144 190'%3E%3Cpath d='M35 10 C22 10 12 20 12 33 C12 42 17 49 25 54 L106 103 C117 110 132 108 141 98 C152 87 151 70 138 61 L58 14 C51 10 43 10 35 10 Z' fill='%234338F2'/%3E%3Cpath d='M12 102 C12 87 28 78 41 86 L98 119 C112 127 112 147 98 155 L41 188 C28 196 12 187 12 172 V102 Z' fill='%23CBEA3B'/%3E%3C/svg%3E") center / auto 52% no-repeat; border: 1px solid var(--dv-line); }
/* Logo de Devellia: el SVG entregado, en línea (ui.js → logoDevellia). Solo se le da el alto; el ancho sale de su proporción. */
.dv-logo { display: inline-flex; align-items: center; height: 34px; aspect-ratio: 1085 / 225; text-decoration: none; }
.dv-logo:hover { text-decoration: none; }
.dv-logo svg { display: block; height: 100%; width: auto; }
.dv-logo .d { display: none; }
.lp-app-side .dv-logo { height: 24px; margin-bottom: 10px; }
/* Cabecera alineada con la página (29-sep): el logo y el menú empiezan donde empieza el contenido y el saldo y la
   cuenta acaban donde acaba (1440 px con 40 px de margen; 1680 px en pantallas de 1900, donde cabe todo con nombres). */
.dv-top { padding-left: max(40px, calc((100% - 1440px) / 2 + 40px)); padding-right: max(40px, calc((100% - 1440px) / 2 + 40px)); }
@media (min-width: 1900px) { .dv-top { padding-left: calc((100% - 1680px) / 2 + 40px); padding-right: calc((100% - 1680px) / 2 + 40px); } }
.dv-top > .row:first-child { justify-self: start; }
.dv-top > .row:last-child { justify-self: end; }
@media (max-width: 1100px) { .dv-top { padding-left: 16px; padding-right: 16px; } }
/* Barra inferior alineada con el contenido (29-sep): su interior mide lo mismo que .dv-work / la línea de pasos, así
   el precio y «Seguir» acaban justo donde acaba el bloque de los pasos. */
.dv-bar { padding: 0; }
.dv-bar-in { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1240px; height: 100%; padding: 0 56px; }
@media (min-width: 1900px) { .dv-bar-in { max-width: 1480px; } }
@media (max-width: 1180px) { .dv-bar { padding: 0; } .dv-bar-in { padding: 0 32px; } }
@media (max-width: 900px) { .dv-bar { padding: 0; } .dv-bar-in { padding: 0 16px; } }
/* El pie no cabe entero: la nota sobra antes que los botones y, en el móvil, el precio ya está en la tarjeta. */
@media (max-width: 1300px) { .dv-bar .nota { display: none; } }
@media (max-width: 600px) { .dv-bar .dv-precio, .dv-bar .dv-bar-t { display: none; } .dv-bar .grow { flex: 1; min-width: 0; } .dv-bar .grow .dv-btn.lg { min-width: 0; padding-left: 18px; padding-right: 18px; white-space: normal; line-height: 1.15; text-align: center; overflow: hidden; } }
/* La barra se recoge según el sitio que tiene de verdad, no según la ventana: con el lateral abierto (900–1180 px) el precio
   «35–70 €» tapaba «Pregúntale a Devellia». Primero se quedan solo con su icono «Atrás» y «Pregúntale»; con menos sitio, fuera el precio. */
.dv-bar { container: dvbar / inline-size; }
.dv-bar:empty { display: none; }   /* pantallas sin barra (p. ej. el módulo a medida): sin franja vacía tapando el final */
@container dvbar (max-width: 880px) { .dv-bar .dv-bar-t { display: none; } }
@container dvbar (max-width: 640px) { .dv-bar .dv-precio { display: none; } .dv-bar .grow { flex: 1; min-width: 0; } .dv-bar .grow .dv-btn.lg { min-width: 0; padding-left: 18px; padding-right: 18px; white-space: normal; line-height: 1.15; text-align: center; overflow: hidden; } }

/* ================= Portada pública con efectos (29-sep-2026) =================
   Colores de marca: azul #4338F2, violeta #3B2BE0, lima #CBEA3B, tinta #0D1023, crema. Sin librerías.
   Con «reducir movimiento» del sistema no se anima nada (regla global al principio de este fichero). */
.lp-main.completo { width: 100%; max-width: none; padding: 0 0 64px; }
.lp2-in { width: min(1180px, 100%); margin: 0 auto; padding: 0 32px; }
body.lp .lp-nav { transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
body.lp:not(.lp-arriba) .lp-nav { background: color-mix(in srgb, #fff 82%, transparent); box-shadow: 0 6px 24px rgba(13,16,35,.06); border-bottom-color: var(--dv-line); }
body.lp.lp-arriba .lp-nav { background: transparent; backdrop-filter: none; }

/* Aparecer al entrar en pantalla */
[data-rv] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .8s ease var(--d, 0ms); }
[data-rv].in { opacity: 1; transform: none; filter: none; }

/* ---------- héroe ---------- */
.lp2-hero { position: relative; overflow: hidden; margin-top: -120px; padding: 188px 32px 0; min-height: calc(100vh + 48px); isolation: isolate; }
.lp2-aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -3; filter: blur(70px) saturate(130%); opacity: .9; }
.lp2-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
.lp2-aurora .a { width: 46vw; height: 46vw; left: -6vw; top: 4vh; background: radial-gradient(circle, rgba(67,56,242,.55), transparent 65%); animation: lp2-deriva1 18s ease-in-out infinite alternate; }
.lp2-aurora .b { width: 40vw; height: 40vw; right: -8vw; top: -6vh; background: radial-gradient(circle, rgba(203,234,59,.75), transparent 62%); animation: lp2-deriva2 22s ease-in-out infinite alternate; }
.lp2-aurora .c { width: 34vw; height: 34vw; left: 38vw; top: 30vh; background: radial-gradient(circle, rgba(124,108,255,.45), transparent 65%); animation: lp2-deriva3 26s ease-in-out infinite alternate; }
.lp2-aurora .d { width: 28vw; height: 28vw; right: 18vw; top: 58vh; background: radial-gradient(circle, rgba(203,234,59,.45), transparent 65%); animation: lp2-deriva1 30s ease-in-out infinite alternate-reverse; }
@keyframes lp2-deriva1 { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes lp2-deriva2 { to { transform: translate(-12vw, 16vh) scale(.9); } }
@keyframes lp2-deriva3 { to { transform: translate(-16vw, -8vh) scale(1.2); } }
.lp2-rejilla { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(13,16,35,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,16,35,.06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 30%, transparent 75%); animation: lp2-rejilla 14s linear infinite; }
@keyframes lp2-rejilla { to { background-position: 56px 56px, 56px 56px; } }
.lp2-foco { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--x, 50%) var(--y, 30%), rgba(67,56,242,.14), transparent 60%); transition: background .08s; }
.lp2-hero-in { position: relative; text-align: center; max-width: 1000px; margin: 0 auto; }
.lp2-tag { background: rgba(255,255,255,.7); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(13,16,35,.06); }
.lp2-tag i { animation: lp2-latido 1.8s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(67,56,242,.5); }
@keyframes lp2-latido { 50% { box-shadow: 0 0 0 7px rgba(67,56,242,0); transform: scale(1.15); } }
.lp2-h1 { font-size: clamp(40px, 6.4vw, 92px); line-height: .98; letter-spacing: -0.022em; margin: 26px auto 0; max-width: 1080px; }
.lp2-w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(10px); animation: lp2-palabra .9s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
@keyframes lp2-palabra { to { opacity: 1; transform: none; filter: none; } }
.lp2-w.grad { background: linear-gradient(100deg, #3B2BE0 0%, #6A5CFF 30%, #4338F2 55%, #7FA800 80%, #3B2BE0 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lp2-palabra .9s cubic-bezier(.2,.8,.2,1) var(--d) forwards, lp2-brilla 7s linear 1.6s infinite; }
@keyframes lp2-brilla { to { background-position: -220% 0; } }
.lp2-w.marca { position: relative; }
.lp2-w.marca::after { content: ''; position: absolute; left: 0; right: .35em; bottom: .04em; height: .12em; border-radius: 99px; background: #CBEA3B; transform-origin: left; transform: scaleX(0); animation: lp2-traza .7s cubic-bezier(.2,.8,.2,1) 1.2s forwards; z-index: -1; }
@keyframes lp2-traza { to { transform: scaleX(1); } }
.lp2-sub { font-size: 19px; }
.lp2-form-borde { position: relative; width: min(720px, 100%); margin: 36px auto 0; border-radius: 26px; padding: 2px; background: conic-gradient(from var(--ang, 0deg), #4338F2, #CBEA3B, #7C6CFF, #4338F2); animation: lp2-gira 6s linear infinite; box-shadow: 0 30px 80px rgba(67,56,242,.18); }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lp2-gira { to { --ang: 360deg; } }
.lp2-form { margin: 0; width: auto; border: 0; border-radius: 24px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); box-shadow: none; }
.lp2-hero .lp-hero-notas { margin-top: 20px; }
/* tarjetitas que flotan alrededor */
.lp2-flota { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border: 1px solid rgba(13,16,35,.08); box-shadow: 0 12px 30px rgba(13,16,35,.10); font-size: 13px; animation: lp2-flota 7s ease-in-out infinite, lp2-entra 1s cubic-bezier(.2,.8,.2,1) both; }
.lp2-flota b { display: block; font-size: 13px; } .lp2-flota span:not(.ico) { color: var(--dv-ink-3); font-size: 12px; }
.lp2-flota .ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #F1EFFF; color: #3B2BE0; flex: none; }
.lp2-flota.f1 { left: 4vw; top: 30vh; animation-delay: 0s, 1.3s; } .lp2-flota.f2 { right: 4vw; top: 24vh; animation-delay: -2s, 1.5s; } .lp2-flota.f2 .ico { background: #F4FBDC; color: #5E7A00; }
.lp2-flota.f3 { left: 7vw; top: 56vh; animation-delay: -4s, 1.7s; } .lp2-flota.f3 .ico { background: #E9F5EE; color: var(--dv-ok); } .lp2-flota.f4 { right: 6vw; top: 52vh; animation-delay: -1s, 1.9s; } .lp2-flota.f4 .ico { background: #15141A; color: #CBEA3B; }
@keyframes lp2-flota { 50% { transform: translateY(-14px); } }
@keyframes lp2-entra { from { opacity: 0; scale: .8; } }
/* la app de ejemplo: se endereza con el scroll */
.lp2-escena { position: relative; width: min(1040px, 100%); margin: 72px auto 0; perspective: 1400px; --p: 0; }
.lp2-shot { transform: rotateX(calc((1 - var(--p)) * 24deg)) scale(calc(.88 + var(--p) * .12)) translateY(calc((1 - var(--p)) * 40px)); transform-origin: 50% 0; transition: transform .1s linear; }
.lp2-halo { position: absolute; inset: 10% 6% -6%; background: radial-gradient(closest-side, rgba(67,56,242,.45), rgba(203,234,59,.25) 60%, transparent); filter: blur(50px); z-index: -1; opacity: calc(.4 + var(--p) * .6); }
.lp2-shot .lp-browser { box-shadow: 0 50px 120px rgba(13,16,35,.35), 0 0 0 1px rgba(255,255,255,.06) inset; }
.lp2-shot .lp-app-pasos .p.ahora .num { animation: lp2-latido 1.6s ease-in-out infinite; }
.lp2-shot .lp-burbuja { position: relative; overflow: hidden; }
.lp2-shot .lp-burbuja::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); transform: translateX(-100%); animation: lp2-barrido 3.2s ease-in-out 2s infinite; }
@keyframes lp2-barrido { 60%, 100% { transform: translateX(100%); } }

/* ---------- franja que se mueve ---------- */
.lp2-cinta { position: relative; margin: 96px 0 0; background: #0D1023; color: #fff; transform: rotate(-2deg) scale(1.03); overflow: hidden; padding: 22px 0; box-shadow: 0 20px 60px rgba(13,16,35,.25); }
.lp2-cinta .pista { display: flex; width: max-content; animation: lp2-cinta 38s linear infinite; }
.lp2-cinta .grupo { display: flex; gap: 0; }
.lp2-cinta span { font-family: var(--dv-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; }
.lp2-cinta span.lima { color: #CBEA3B; } .lp2-cinta span i { font-style: normal; color: #4338F2; font-size: .7em; }
.lp2-cinta:hover .pista { animation-play-state: paused; }
@keyframes lp2-cinta { to { transform: translateX(-50%); } }

/* ---------- títulos ---------- */
.lp2-h2 { font-size: clamp(34px, 4.4vw, 60px) !important; letter-spacing: -0.028em !important; }
.lp2-subraya { position: relative; white-space: nowrap; }
.lp2-subraya::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: .05em; height: .32em; background: #CBEA3B; border-radius: 6px; z-index: -1; transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.8,.2,1) .5s; }
.in .lp2-subraya::after, .lp2-h2.in .lp2-subraya::after { transform: scaleX(1); }
.lp2-h2 { position: relative; z-index: 0; }

/* ---------- tarjetas con luz ---------- */
.lp2-card { position: relative; overflow: hidden; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 26px; padding: 28px; transition: transform .25s ease, box-shadow .25s ease, opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .8s ease var(--d, 0ms); will-change: transform; }
.lp2-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--x, -200px) var(--y, -200px), rgba(67,56,242,.12), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.lp2-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: radial-gradient(260px circle at var(--x, -200px) var(--y, -200px), #4338F2, #CBEA3B 45%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lp2-card:hover { box-shadow: 0 24px 60px rgba(13,16,35,.12); }
.lp2-card:hover::before, .lp2-card:hover::after { opacity: 1; }
.lp2-card .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #4338F2, #7C6CFF); color: #fff; margin-bottom: 18px; box-shadow: 0 10px 24px rgba(67,56,242,.35); }
.lp2-card .ico .ic { width: 24px; height: 24px; }
.lp2-card:nth-child(2) .ico { background: linear-gradient(135deg, #0D1023, #3A3A55); box-shadow: 0 10px 24px rgba(13,16,35,.3); }
.lp2-card:nth-child(3) .ico { background: linear-gradient(135deg, #CBEA3B, #A8C840); color: #0D1023; box-shadow: 0 10px 24px rgba(168,200,64,.4); }
.lp2-card h3 { font-size: 23px; }

/* ---------- pasos con línea que se rellena ---------- */
.lp2-pasos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 44px; --t: 0; }
.lp2-linea { position: absolute; left: 28px; right: calc(25% - 28px); top: 27px; height: 4px; border-radius: 4px; background: var(--dv-line); overflow: hidden; }
.lp2-linea i { position: absolute; inset: 0; background: linear-gradient(90deg, #4338F2, #7C6CFF, #CBEA3B); transform-origin: left; transform: scaleX(var(--t)); }
.lp2-paso { position: relative; }
.lp2-paso .bola { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--dv-line-2); font-family: var(--dv-display); font-weight: 800; font-size: 18px; color: var(--dv-ink-3); position: relative; z-index: 1; transition: background .4s, border-color .4s, color .4s, box-shadow .4s, transform .4s; }
.lp2-paso.on .bola { background: #4338F2; border-color: #4338F2; color: #fff; box-shadow: 0 0 0 8px rgba(67,56,242,.14), 0 12px 30px rgba(67,56,242,.35); transform: scale(1.06); }
.lp2-paso:last-child.on .bola { background: #CBEA3B; border-color: #CBEA3B; color: #0D1023; box-shadow: 0 0 0 8px rgba(203,234,59,.25), 0 12px 30px rgba(168,200,64,.4); }
.lp2-paso h3 { font-size: 20px; margin: 22px 0 8px; } .lp2-paso p { font-size: 15px; line-height: 1.55; }

/* ---------- precios (oscuro con brillo) ---------- */
.lp2-dark { position: relative; overflow: hidden; isolation: isolate; background: #0D1023; }
.lp2-dark-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px circle at var(--x, 20%) var(--y, 30%), rgba(67,56,242,.35), transparent 60%), radial-gradient(500px circle at 90% 110%, rgba(203,234,59,.18), transparent 60%); }
.lp2-precio { box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.lp2-precio .lp-precio-fila { transition: background .2s; border-radius: 8px; } .lp2-precio .lp-precio-fila:hover { background: var(--dv-surface-2); }

/* ---------- llamada final ---------- */
.lp2-cta { position: relative; overflow: hidden; isolation: isolate; margin: 96px 0 24px; border-radius: 36px; padding: 96px 32px; text-align: center; color: #fff; background: #3B2BE0; }
.lp2-cta-fondo { position: absolute; inset: 0; z-index: -1; filter: blur(60px); }
.lp2-cta-fondo i { position: absolute; border-radius: 50%; }
.lp2-cta-fondo .a { width: 60%; height: 140%; left: -10%; top: -30%; background: #4338F2; animation: lp2-deriva1 16s ease-in-out infinite alternate; }
.lp2-cta-fondo .b { width: 50%; height: 120%; right: -10%; top: -10%; background: #7C6CFF; animation: lp2-deriva2 20s ease-in-out infinite alternate; }
.lp2-cta-fondo .c { width: 30%; height: 60%; left: 40%; bottom: -30%; background: #CBEA3B; opacity: .55; animation: lp2-deriva3 18s ease-in-out infinite alternate; }
.lp2-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
.lp2-cta h2 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.022em; line-height: 1; color: #fff; }
@media (max-width: 760px) { .lp2-cta h2 { font-size: clamp(32px, 10.5vw, 48px); } } /* «¿Empezamos?» cabe en el móvil (a 360 px se salía 58 px de la tarjeta) */
.lp2-cta p { color: rgba(255,255,255,.85); font-size: 18px; margin-top: 16px; } .lp2-cta p b { color: #CBEA3B; }

/* ---------- botones con brillo ---------- */
.lp2-brillo { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, background .2s; }
.lp2-brillo::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: lp2-barre 3.6s ease-in-out 1.8s infinite; pointer-events: none; }
@keyframes lp2-barre { 55%, 100% { left: 130%; } }

@media (max-width: 1100px) { .lp2-flota { display: none; } .lp2-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp2-linea { display: none; } }
@media (max-width: 760px) { .lp2-hero { padding: 158px 16px 0; min-height: 0; } .lp2-in { padding: 0 16px; } .lp2-pasos { grid-template-columns: minmax(0, 1fr); } .lp2-cta { padding: 64px 20px; border-radius: 26px; } .lp2-cinta { margin-top: 64px; } .lp2-escena { margin-top: 48px; } }
@media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1; transform: none; filter: none; } .lp2-w { opacity: 1; transform: none; filter: none; } .lp2-shot { transform: none; } .lp2-subraya::after, .lp2-w.marca::after { transform: none; } }
/* la franja inclinada y el fondo animado no deben crear scroll horizontal */
body.lp, .lp { overflow-x: clip; }
@media (max-width: 760px) { .lp-nav { gap: 10px; } .lp-nav .dv-logo { height: 24px; } .lp-nav .row.gap-12 { gap: 6px; } .lp-nav .dv-btn { height: 38px; padding: 0 14px; font-size: 13px; } .lp-entrar { font-size: 13px; padding: 0 4px; } .lp2-tag { font-size: 12px; } .lp2-form textarea { min-height: 96px; } }

/* ---------- pasos: ahora son 5 (los de la app) ---------- */
.lp2-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.lp2-linea { right: calc(20% - 28px); }
.lp2-paso h3 { font-size: 18px; } .lp2-paso p { font-size: 14px; }

/* ---------- vídeo de los 5 pasos (HTML + CSS, en bucle) ----------
   Cada elemento que aparece anima SOLO desde su estado oculto (from {…}), así sin animación queda en su estado final. */
.lp2-v { padding: 14px 14px 14px; }
.lp2-v .dots { align-items: center; } .lp2-v .dots .url { margin-left: 12px; flex: 1; background: #24232B; color: #B9B6C2; font-size: 12px; border-radius: 8px; padding: 5px 12px; max-width: 360px; }
.lp2-v-pantalla { background: var(--dv-paper); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.lp2-v-cab { display: flex; gap: 6px; padding: 16px 20px 0; }
.lp2-v-cab .p { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; border: 0; background: transparent; padding: 8px 6px; border-radius: 12px; cursor: pointer; font: 500 13px/1.2 var(--dv-font); color: var(--dv-ink-3); text-align: left; }
.lp2-v-cab .p:hover { background: rgba(255,255,255,.7); }
.lp2-v-cab .n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--dv-line-2); font: 800 12px/1 var(--dv-display); background: #fff; transition: all .35s; }
.lp2-v-cab .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-v-cab .p.hecho .n { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; } .lp2-v-cab .p.hecho { color: var(--dv-ink); }
.lp2-v-cab .p.actual .n { background: #4338F2; border-color: #4338F2; color: #fff; box-shadow: 0 0 0 5px #E4E0FF; } .lp2-v-cab .p.actual { color: #3B2BE0; font-weight: 700; }
.lp2-v-rotulo { padding: 14px 26px 0; display: flex; flex-direction: column; gap: 4px; }
.lp2-v-rotulo .tit { font-family: var(--dv-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; animation: lp2-v-sube .5s cubic-bezier(.2,.8,.2,1) both; }
.lp2-v-rotulo .sub { font-size: 14px; color: var(--dv-ink-2); }
.lp2-v-escenario { position: relative; height: 300px; margin: 14px 20px 0; }
.lp2-v .esc { position: absolute; inset: 0; display: none; gap: 20px; align-items: center; justify-content: center; }
.lp2-v .esc.on { display: flex; }
.lp2-v-pie { display: flex; align-items: center; gap: 12px; padding: 12px 20px 16px; }
.lp2-v-pausa { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--dv-line-2); background: #fff; color: var(--dv-ink); display: grid; place-items: center; cursor: pointer; }
.lp2-v-pausa:hover { border-color: var(--dv-ink-3); }
.lp2-v-barra { flex: 1; display: flex; gap: 6px; }
.lp2-v-barra .seg { flex: 1; height: 6px; border-radius: 3px; background: var(--dv-line); border: 0; padding: 0; overflow: hidden; cursor: pointer; }
.lp2-v-barra .seg i { display: block; height: 100%; background: linear-gradient(90deg, #4338F2, #7C6CFF); transform-origin: left; transform: scaleX(0); }
.lp2-v .caja, .lp2-v .permisos, .lp2-v .chat, .lp2-v .tienda, .lp2-v .origen, .lp2-v .destino, .lp2-v .progreso, .lp2-v .lista, .lp2-v .precio { background: #fff; border: 1px solid var(--dv-line); border-radius: 20px; box-shadow: 0 12px 30px rgba(13,16,35,.08); }
.lp2-v .lab { font-size: 12px; font-weight: 600; color: var(--dv-ink-3); margin-bottom: 8px; }
@keyframes lp2-v-sube { from { opacity: 0; transform: translateY(14px); } }
@keyframes lp2-v-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes lp2-v-izq { from { opacity: 0; transform: translateX(-40px); } }
@keyframes lp2-v-escribe { from { clip-path: inset(0 100% 0 0); } }
@keyframes lp2-v-crece { from { transform: scaleX(0); } }
@keyframes lp2-v-altura { from { transform: scaleY(0); } }
.lp2-v .esc.on > * { animation: lp2-v-sube .6s cubic-bezier(.2,.8,.2,1) both; }
.lp2-v .esc.on > *:nth-child(2) { animation-delay: .15s; } .lp2-v .esc.on > *:nth-child(3) { animation-delay: .3s; }
/* 1 · conecta */
.lp2-v .e1 .caja { width: 420px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.lp2-v .e1 .campo { display: flex; align-items: center; height: 48px; border: 1.5px solid var(--dv-line); border-radius: 12px; padding: 0 14px; font-size: 16px; }
.lp2-v .e1 .esc-escribe { white-space: nowrap; }
.lp2-v .e1.on .esc-escribe { animation: lp2-v-escribe 1.2s steps(26) .5s both; }
.lp2-v .e1 .cursor { width: 2px; height: 22px; background: #4338F2; margin-left: 2px; animation: lp2-parpadeo 1s steps(2) infinite; }
@keyframes lp2-parpadeo { 50% { opacity: 0; } }
.lp2-v .e1 .boton { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; background: #15141A; color: #fff; font-weight: 600; }
.lp2-v .e1.on .boton { animation: lp2-v-pulsa .5s ease 1.9s both; }
@keyframes lp2-v-pulsa { 50% { transform: scale(.94); background: #4338F2; } }
.lp2-v .e1 .ok { display: flex; align-items: center; gap: 12px; background: var(--dv-ok-soft); color: #154E33; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.lp2-v .e1 .ok b { display: block; } .lp2-v .e1.on .ok { animation: lp2-v-pop .5s cubic-bezier(.3,1.5,.5,1) 2.5s both; }
.lp2-v .bol { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--dv-ok); color: #fff; display: grid; place-items: center; } .lp2-v .bol .ic { stroke-width: 3; }
.lp2-v .e1 .permisos { width: 280px; padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.lp2-v .e1 .permisos span { display: flex; align-items: center; gap: 10px; }
.lp2-v .tk { width: 22px; height: 22px; border-radius: 50%; background: var(--dv-ok-soft); color: var(--dv-ok); display: grid; place-items: center; flex: none; }
.lp2-v .esc.on .tk { animation: lp2-v-pop .4s cubic-bezier(.3,1.5,.5,1) var(--d) both; }
/* 2 · diseño */
.lp2-v .e2 .chat { width: 300px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.lp2-v .e2 .yo { align-self: flex-end; background: #4338F2; color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 12px; }
.lp2-v .e2 .dev { display: flex; gap: 8px; align-items: flex-start; background: var(--dv-surface-2); border-radius: 14px 14px 14px 4px; padding: 10px 12px; }
.lp2-v .e2 .dev .av { width: 18px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 8 144 190'%3E%3Cpath d='M35 10 C22 10 12 20 12 33 C12 42 17 49 25 54 L106 103 C117 110 132 108 141 98 C152 87 151 70 138 61 L58 14 C51 10 43 10 35 10 Z' fill='%234338F2'/%3E%3Cpath d='M12 102 C12 87 28 78 41 86 L98 119 C112 127 112 147 98 155 L41 188 C28 196 12 187 12 172 V102 Z' fill='%23CBEA3B'/%3E%3C/svg%3E") center / contain no-repeat; }
.lp2-v .e2.on .yo { animation: lp2-v-sube .5s ease .2s both; } .lp2-v .e2.on .dev { animation: lp2-v-sube .5s ease .8s both; }
.lp2-v .e2 .colores { display: flex; gap: 8px; } .lp2-v .e2 .colores i { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--dv-line); }
.lp2-v .e2.on .colores i { animation: lp2-v-pop .45s cubic-bezier(.3,1.5,.5,1) var(--d) both; }
.lp2-v .e2 .tienda { position: relative; width: 420px; height: 260px; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lp2-v .e2 .cabecera { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #F0EAE2; font-size: 12px; color: #1D2F6F; } .lp2-v .e2 .cabecera b { font-family: var(--dv-display); margin-right: auto; } .lp2-v .e2 .cabecera span { width: 34px; height: 6px; border-radius: 3px; background: #E4E0D8; }
.lp2-v .e2 .portada { flex: 1; background: #C2185B; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; color: #fff; transform-origin: top; }
.lp2-v .e2 .portada b { font-family: var(--dv-display); font-size: 22px; line-height: 1; max-width: 230px; } .lp2-v .e2 .portada i { align-self: flex-start; font-style: normal; background: #FFD54F; color: #1D2F6F; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
.lp2-v .e2 .prods { display: flex; gap: 8px; } .lp2-v .e2 .prods > div { flex: 1; background: #F3EDE4; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .lp2-v .e2 .prods i { height: 34px; border-radius: 6px; background: #E7D3B8; } .lp2-v .e2 .prods span { height: 5px; border-radius: 3px; background: #D9CFC0; } .lp2-v .e2 .prods .pr { width: 40%; background: #1D2F6F; }
.lp2-v .e2.on .cabecera { animation: lp2-v-sube .5s ease 1.2s both; } .lp2-v .e2.on .portada { animation: lp2-v-altura .7s cubic-bezier(.2,.8,.2,1) 1.5s both; } .lp2-v .e2.on .prods > div { animation: lp2-v-sube .45s ease var(--d) both; }
.lp2-v .e2 .sello { position: absolute; top: 46px; right: 16px; display: inline-flex; align-items: center; gap: 6px; background: #CBEA3B; color: #0D1023; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 99px; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.lp2-v .e2.on .sello { animation: lp2-v-pop .5s cubic-bezier(.3,1.5,.5,1) 2.9s both; }
/* 3 · productos */
.lp2-v .e3 .origen { width: 330px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.lp2-v .e3 .fila { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px; border-radius: 10px; background: var(--dv-surface-2); } .lp2-v .e3 .fila i { width: 28px; height: 28px; border-radius: 8px; flex: none; } .lp2-v .e3 .fila span { flex: 1; } .lp2-v .e3 .fila b { font-size: 12px; }
.lp2-v .e3.on .fila { animation: lp2-v-izq .5s cubic-bezier(.2,.8,.2,1) var(--d) both; }
.lp2-v .e3 .flecha { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #4338F2; color: #fff; box-shadow: 0 10px 24px rgba(67,56,242,.35); }
.lp2-v .e3.on .flecha { animation: lp2-v-pop .5s ease .3s both, lp2-v-empuja 1s ease-in-out 1s infinite; }
@keyframes lp2-v-empuja { 50% { transform: translateX(8px); } }
.lp2-v .e3 .destino { width: 290px; padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lp2-v .e3 .cuenta { display: flex; flex-direction: column; gap: 4px; } .lp2-v .e3 .cuenta b { font-family: var(--dv-display); font-size: 64px; line-height: 1; color: #4338F2; letter-spacing: -0.028em; } .lp2-v .e3 .cuenta span { font-size: 14px; color: var(--dv-ink-2); }
.lp2-v .gratis { background: #CBEA3B; color: #0D1023; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 99px; }
/* 4 · montaje */
.lp2-v .e4 { flex-wrap: wrap; align-content: center; }
.lp2-v .e4 .progreso { width: 100%; max-width: 760px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.lp2-v .e4 .progreso .fila { display: flex; justify-content: space-between; font-size: 15px; } .lp2-v .e4 .progreso .pc { font-family: var(--dv-display); font-weight: 800; color: #4338F2; }
.lp2-v .e4 .barra { height: 10px; border-radius: 5px; background: var(--dv-paper-2); overflow: hidden; } .lp2-v .e4 .barra i { display: block; height: 100%; background: linear-gradient(90deg, #4338F2, #7C6CFF, #CBEA3B); transform-origin: left; }
.lp2-v .e4.on .barra i { animation: lp2-v-crece 3.2s cubic-bezier(.4,0,.2,1) .4s both; }
.lp2-v .e4 .nota { font-size: 12px; color: var(--dv-ink-3); }
.lp2-v .e4 .lista { width: 460px; padding: 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp2-v .e4 .it { display: flex; align-items: center; gap: 10px; font-size: 14px; } .lp2-v .e4 .it em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--dv-ok); font-weight: 700; }
.lp2-v .e4.on .it { animation: lp2-v-sube .4s ease var(--d) both; }
.lp2-v .e4 .precio { width: 280px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; background: #15141A; border-color: #15141A; color: #fff; } .lp2-v .e4 .precio b { font-family: var(--dv-display); font-size: 34px; color: #CBEA3B; } .lp2-v .e4 .precio span { font-size: 12px; color: #B9B6C2; }
/* 5 · abre */
.lp2-v .e5 { flex-direction: column; gap: 14px; }
.lp2-v .e5 .candado { position: relative; width: 70px; height: 78px; }
.lp2-v .e5 .arco { position: absolute; left: 14px; top: 0; width: 42px; height: 44px; border: 7px solid #4338F2; border-bottom: 0; border-radius: 22px 22px 0 0; box-sizing: border-box; transform-origin: 90% 100%; transform: rotate(28deg) translateY(-6px); }
.lp2-v .e5.on .arco { animation: lp2-v-abre .6s cubic-bezier(.3,1.4,.5,1) .5s both; }
@keyframes lp2-v-abre { from { transform: none; } }
.lp2-v .e5 .cuerpo { position: absolute; left: 0; bottom: 0; width: 70px; height: 46px; border-radius: 12px; background: #CBEA3B; box-shadow: 0 10px 24px rgba(168,200,64,.45); }
.lp2-v .e5 .texto { text-align: center; display: flex; flex-direction: column; gap: 4px; } .lp2-v .e5 .texto b { font-family: var(--dv-display); font-size: 38px; letter-spacing: -0.022em; } .lp2-v .e5 .texto span { color: var(--dv-ink-2); }
.lp2-v .e5.on .texto { animation: lp2-v-pop .6s cubic-bezier(.3,1.4,.5,1) 1s both; }
.lp2-v .e5 .pedido { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--dv-line); border-radius: 16px; padding: 10px 14px; box-shadow: 0 14px 34px rgba(13,16,35,.15); font-size: 13px; } .lp2-v .e5 .pedido b { display: block; }
.lp2-v .e5.on .pedido { animation: lp2-v-baja .6s cubic-bezier(.3,1.4,.5,1) 2.1s both; }
@keyframes lp2-v-baja { from { opacity: 0; transform: translateY(-30px); } }
.lp2-v .e5 .confeti { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.lp2-v .e5 .confeti i { position: absolute; width: 9px; height: 14px; border-radius: 3px; opacity: 0; }
.lp2-v .e5.on .confeti i { animation: lp2-v-confeti 1.6s cubic-bezier(.1,.7,.3,1) 1s both; }
@keyframes lp2-v-confeti { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(220deg) scale(1); } }
/* pausa y sin movimiento */
.lp2-v.pausado .esc.on, .lp2-v.pausado .esc.on * { animation-play-state: paused !important; }
.lp2-v.quieto:not(.dv-anima) .esc *, .lp2-v.quieto:not(.dv-anima) .lp2-v-rotulo .tit { animation: none !important; }
.lp2-v.quieto:not(.dv-anima) .e5 .confeti { display: none; }
@media (max-width: 1100px) { .lp2-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp2-v-cab .l { display: none; } .lp2-v-escenario { height: 520px; } .lp2-v .esc { flex-direction: column; } .lp2-v .e1 .caja, .lp2-v .e1 .permisos, .lp2-v .e2 .chat, .lp2-v .e2 .tienda, .lp2-v .e3 .origen, .lp2-v .e3 .destino, .lp2-v .e4 .lista, .lp2-v .e4 .precio { width: min(420px, 100%); } .lp2-v .e3 .flecha { transform: rotate(90deg); } }
@media (max-width: 760px) { .lp2-pasos { grid-template-columns: minmax(0, 1fr); } .lp2-v-escenario { height: 600px; margin: 10px 10px 0; } .lp2-v-rotulo { padding: 12px 14px 0; } .lp2-v-rotulo .tit { font-size: 19px; } .lp2-v-cab { padding: 12px 10px 0; } .lp2-v .e2 .tienda { height: 230px; } .lp2-v .e4 .lista { grid-template-columns: minmax(0, 1fr); } }
/* Poppins tiene ascendentes y descendentes altos: más interlineado en los titulares grandes y hueco para que el degradado no corte la p, la y o la g */
.lp2-h1 { line-height: 1.06; } .lp2-w { padding-bottom: .08em; margin-bottom: -.08em; } .lp2-cta h2, .dv-ini-h1 { line-height: 1.02; }

/* ================= Portada y precios multiplataforma (1-oct-2026) ================= */
.dv-plat-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lp3-nav-plat { display: inline-flex; align-items: center; gap: 7px; }
.lp3-nav-plat .ic { color: var(--dv-accent); }
.lp-links { gap: 20px; }
.lp3-elige-box { align-items: center; margin-top: 34px; }
.lp3-elige { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lp3-plat { display: flex; align-items: center; gap: 14px; width: 236px; padding: 14px 16px; border-radius: 22px; cursor: pointer; text-align: left; background: rgba(255,255,255,.72); border: 2px solid var(--dv-line); font: inherit; color: var(--dv-ink); transition: border-color .2s, box-shadow .2s, background .2s, transform .15s; }
.lp3-plat:hover { border-color: var(--dv-line-2); transform: translateY(-2px); }
.lp3-plat.on { background: #fff; border-color: var(--dv-accent); box-shadow: 0 14px 34px rgba(59,43,224,.18); }
.lp3-plat .col { display: flex; flex-direction: column; gap: 2px; } .lp3-plat b { font-size: 16px; } .lp3-plat .col span { font-size: 12px; color: var(--dv-ink-3); }
.lp3-plat.nose { border-style: dashed; width: 210px; }
.lp3-plat:focus-visible, .lp3-tab:focus-visible, .lp3-serv:focus-visible, .lp3-idea:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 3px; }
.lp3-banda { margin-top: 0; background: #0D1023; padding: 26px 48px; display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.lp3-banda .t { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: #B9B6C2; }
.lp3-banda .marca { display: inline-flex; align-items: center; gap: 12px; } .lp3-banda .marca b { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.lp3-banda .blanco { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lp3-banda .palabra { height: 20px; width: auto; filter: brightness(0) invert(1); }
.lp3-banda .mas { display: inline-flex; align-items: center; gap: 10px; color: #CBEA3B; font-weight: 600; font-size: 16px; } .lp3-banda .mas .ic { width: 24px; height: 24px; }
.lp3-escena { margin-top: 72px; }
.lp3-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--dv-line); margin-bottom: 22px; }
.lp3-tab { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font: 700 17px/1 var(--dv-font); color: var(--dv-ink-2); margin-bottom: -1px; }
.lp3-tab.on { color: var(--dv-ink); border-bottom-color: var(--dv-accent); }
.lp3-panel { display: flex; flex-direction: column; gap: 22px; }
.lp3-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 24px; padding: 22px 26px; flex-wrap: wrap; }
.lp3-panel-cab .muted { max-width: 640px; font-size: 15px; }
.fs-24 { font-size: 24px; }
.lp3-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp3-serv { position: relative; overflow: hidden; text-align: left; font: inherit; color: var(--dv-ink); cursor: pointer; background: #fff; border: 1px solid var(--dv-line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; animation: lp2-v-sube .5s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; transition: transform .2s, box-shadow .2s; }
.lp3-serv:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(13,16,35,.10); }
.lp3-serv .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; } .lp3-serv .ico .ic { width: 22px; height: 22px; }
.lp3-serv .precio { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--dv-paper); } .lp3-serv .precio.gratis { background: var(--dv-ok-soft); color: var(--dv-ok); }
.lp3-serv b { font-size: 19px; } .lp3-serv .s { font-size: 14px; line-height: 1.5; color: var(--dv-ink-2); }
.lp3-serv .ir, .lp3-idea .ir { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--dv-accent); }
.lp3-ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.lp3-idea { position: relative; overflow: hidden; text-align: left; font: inherit; cursor: pointer; border: 0; border-radius: 26px; padding: 24px; min-height: 250px; display: flex; flex-direction: column; gap: 10px; color: #fff; transition: transform .25s, box-shadow .25s; }
.lp3-idea:hover { box-shadow: 0 24px 50px rgba(13,16,35,.18); }
.lp3-idea .eti { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.18); }
.lp3-idea b { font-size: 23px; line-height: 1.12; letter-spacing: -0.01em; max-width: 300px; position: relative; } .lp3-idea .s { font-size: 14px; line-height: 1.5; opacity: .9; position: relative; }
.lp3-idea .pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; }
.lp3-idea .mini, .lp3-plan .mini { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lp3-idea .ir { color: inherit; font-weight: 700; }
.lp3-idea.bf { background: #0D1023; } .lp3-idea.bf::after { content: '%'; position: absolute; right: -20px; top: -40px; font-size: 170px; font-weight: 800; color: #CBEA3B; opacity: .9; }
.lp3-idea.navidad { background: #B3261E; } .lp3-idea.navidad::after { content: ''; position: absolute; right: 22px; top: 18px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: -34px 56px 0 -18px #CBEA3B; }
.lp3-idea.rebajas { background: #E9669A; } .lp3-idea.rebajas::after { content: '−50%'; position: absolute; right: 16px; top: 14px; font-size: 52px; font-weight: 800; opacity: .25; }
.lp3-idea.tema { background: #3B2BE0; } .lp3-idea.tema::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 40px; background: #7C6CFF; opacity: .6; transform: rotate(18deg); }
.lp3-idea.presta { background: #E6F5F9; color: var(--dv-ink); } .lp3-idea.woo { background: #F3EEFA; color: var(--dv-ink); } .lp3-idea.shopify { background: #EEF6E8; color: var(--dv-ink); } .lp3-idea.dominio { background: var(--dv-lime); color: var(--dv-ink); }
.lp3-idea.presta .eti, .lp3-idea.woo .eti, .lp3-idea.shopify .eti, .lp3-idea.dominio .eti { background: rgba(13,16,35,.08); }
.lp3-idea.presta .ir, .lp3-idea.woo .ir, .lp3-idea.shopify .ir { color: var(--dv-accent); }
.lp3-hosting { margin-top: 110px; border-radius: 32px; padding: 48px; background: #fff; border: 1px solid var(--dv-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.lp3-hosting h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.022em; }
.lp3-ok { display: flex; align-items: center; gap: 10px; font-size: 15px; } .lp3-ok .ic { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--dv-ok-soft); color: var(--dv-ok); stroke-width: 3; }
.lp3-buscador { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 8px 0 18px; border: 2px solid var(--dv-accent); border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(59,43,224,.12); }
.lp3-buscador .ic { color: var(--dv-ink-3); } .lp3-buscador .dv-input { border: 0; height: 52px; padding: 0; font-size: 18px; font-weight: 500; } .lp3-buscador .dv-input:focus { outline: 0; }
.lp3-dom { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--dv-surface-2); border: 1px solid var(--dv-paper-2); } .lp3-dom b { flex: 1; font-size: 16px; } .lp3-dom .p { font-size: 14px; font-weight: 600; }
.lp3-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp3-planes.grande { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lp3-plan { position: relative; border-radius: 16px; padding: 14px; border: 1px solid var(--dv-line); background: #fff; display: flex; flex-direction: column; gap: 4px; }
.lp3-plan > b { font-size: 24px; font-weight: 800; } .lp3-plan > b small { font-size: 13px; font-weight: 500; color: var(--dv-ink-3); }
.lp3-plan.reco { border: 2px solid var(--dv-accent); background: #F7F6FF; }
.lp3-planes.grande .lp3-plan { border-radius: 24px; padding: 24px; gap: 12px; } .lp3-planes.grande .lp3-plan > b { font-size: 44px; letter-spacing: -0.02em; line-height: 1; }
.lp3-planes.grande .lp3-plan.reco { background: var(--dv-dark); color: #fff; border-color: var(--dv-dark); } .lp3-planes.grande .lp3-plan.reco > b small { color: #B9B6C2; }
.lp3-planes.grande .lp-reco { position: absolute; top: 16px; right: 16px; }
.lp3-plan .n { font-size: 20px; } .lp3-plan .spec { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: var(--dv-paper); } .lp3-plan.reco .spec { background: #24232B; }
.lp3-plan .dv-btn { align-self: flex-start; }
.lp3-cta-plats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .lp3-cta-plats span { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 8px 14px 8px 10px; color: var(--dv-ink); font-size: 14px; font-weight: 600; }
.lp3-chips-plat { justify-content: center; margin-top: 18px; } .lp3-chip-plat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.lp3-tabla .fila { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 16px; padding: 14px 0; border-top: 1px solid var(--dv-paper-2); font-size: 15px; align-items: center; }
.lp3-tabla .fila.cab { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--dv-ink-3); } .lp3-tabla .fila.cab .row { letter-spacing: 0; font-size: 14px; color: var(--dv-ink); }
.lp3-tabla b { font-weight: 600; } .lp3-tabla b.ok { color: var(--dv-ok); }
@media (max-width: 1100px) { .lp3-servicios, .lp3-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp3-hosting { grid-template-columns: minmax(0, 1fr); padding: 28px; } .lp3-planes.grande { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp3-tabla .fila { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); font-size: 12px; gap: 8px; } }
@media (max-width: 760px) { .lp3-servicios, .lp3-ideas, .lp3-planes, .lp3-planes.grande { grid-template-columns: minmax(0, 1fr); } .lp3-plat { width: 100%; } .lp3-tabs { overflow-x: auto; } .lp3-banda { gap: 20px; padding: 20px 16px; } .lp3-banda .marca b { font-size: 17px; } }
/* las tarjetitas flotantes solo caben a los lados del titular en pantallas anchas */
@media (max-width: 1560px) { .lp2-hero .lp2-flota { display: none; } }
.lp3-plat .dv-plat-ico img, .lp3-serv .ico img { max-width: 100%; }
/* que la decoración de las ideas no tape el texto */
.lp3-idea > * { position: relative; z-index: 1; } .lp3-idea::after { z-index: 0; } .lp3-idea.bf::after { opacity: .28; top: auto; bottom: -50px; right: -10px; } .lp3-idea.navidad::after { opacity: .6; top: auto; bottom: 70px; }

/* ================= Herramienta multiplataforma (1-oct-2026, mockups E10–E16) ================= */
/* Mis proyectos: filtro por plataforma y un apartado por plataforma */
.dv-pr-barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.dv-pr-filtro { display: inline-flex; gap: 4px; padding: 4px; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius-pill); flex-wrap: wrap; }
.dv-pr-filtro button { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--dv-font); padding: 9px 14px; border: 0; border-radius: var(--dv-radius-pill); background: transparent; color: var(--dv-ink-2); cursor: pointer; }
.dv-pr-filtro button:hover { background: var(--dv-surface-2); color: var(--dv-ink); }
/* Elegido en claro, como la tarjeta elegida: sobre negro no se veían los logos de las plataformas (Jose, 03/11/2026). */
.dv-pr-filtro button.on { background: var(--dv-accent-soft); color: var(--dv-accent-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--dv-accent); }
.dv-pr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--dv-radius-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dv-pr-sec { display: flex; flex-direction: column; gap: 16px; }
.dv-pr-sec[hidden], .dv-ini-destacada[hidden] { display: none; }
.dv-pr-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px 12px 14px; border-radius: 18px; flex-wrap: wrap; }
.dv-pr-band .n { font-family: var(--dv-display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.dv-pr-band .nuevo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: var(--dv-radius-pill); background: rgba(255,255,255,.7); border: 1.5px solid currentColor; }
.dv-pr-band .nuevo:hover { background: #fff; }
.dv-pr-band > .row { flex-wrap: wrap; row-gap: 4px; min-width: 0; flex-shrink: 1; max-width: 100%; } /* «Aún no tienes nada aquí» más largo en otros idiomas: baja de línea en el móvil */
.dv-pr-nuevo { border: 2px dashed var(--dv-line-2); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; background: transparent; cursor: pointer; font: inherit; color: var(--dv-ink); text-align: center; transition: border-color .15s, background .15s; }
.dv-pr-nuevo:hover { border-color: var(--dv-accent); background: var(--dv-surface); }
.dv-pr-nuevo .mas { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.dv-pr-nuevo b { font-size: 16px; } .dv-pr-nuevo > span:last-child { font-size: 13px; color: var(--dv-ink-3); }

/* Nuevo proyecto: plataforma → servicio */
.dv-np-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-ink-3); margin-bottom: 12px; }
.dv-np-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dv-np-plat { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; border: 1.5px solid var(--dv-line); background: var(--dv-surface); cursor: pointer; text-align: left; font: inherit; color: var(--dv-ink); transition: border-color .15s, background .15s, box-shadow .15s; }
.dv-np-plat:hover { border-color: var(--dv-line-2); }
.dv-np-plat.on { border-color: var(--dv-accent); background: #F7F6FF; box-shadow: 0 0 0 3px var(--dv-accent-soft); }
.dv-np-plat .col { gap: 2px; min-width: 0; } .dv-np-plat b { font-size: 16px; } .dv-np-plat .col > span { font-size: 13px; color: var(--dv-ink-3); }
.dv-np-plat .ok { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--dv-accent); color: #fff; display: grid; place-items: center; }
.dv-np-plat .ok .ic { width: 13px; height: 13px; }
.dv-np-pronto { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px dashed #3A3A44; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dv-np-pronto p { font-size: 14px; color: #D6D6DD; margin: 0; }
@media (max-width: 760px) { .dv-np-plats { grid-template-columns: minmax(0, 1fr); } }

/* Dominios y alojamiento */
.dv-srv-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.dv-srv-vacio { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--dv-surface-2); border: 1px dashed var(--dv-line-2); }
.dv-srv-vacio .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; flex: none; }
.dv-srv-vacio p { margin: 4px 0 0; }
.dv-srv-buscar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--dv-line-2); border-radius: var(--dv-radius-pill); background: var(--dv-surface); }
.dv-srv-buscar:focus-within { border-color: var(--dv-accent); box-shadow: 0 0 0 3px var(--dv-accent-soft); }
.dv-srv-buscar .ic { color: var(--dv-ink-3); flex: none; }
.dv-srv-buscar .dv-input { border: 0; box-shadow: none; padding: 0; height: 44px; flex: 1; min-width: 0; background: transparent; outline: none; }
.dv-srv-dominios { display: flex; flex-direction: column; }
.dv-srv-dominios .fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--dv-line); font-size: 15px; }
.dv-srv-dominios .fila b:first-child { overflow: hidden; text-overflow: ellipsis; }
.dv-srv-dominios.con .fila { grid-template-columns: minmax(0, 1fr) auto auto 112px; }
.dv-srv-dominios.con .fila > .dv-btn { justify-self: end; }
.dv-srv-dominios .pr { white-space: nowrap; }
.dv-srv-dir .fila { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 190px; }
.dv-srv-dir .fila > :nth-child(3) { justify-self: end; }
.dv-srv-dir .fila.cab { border-top: 0; padding-top: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dv-ink-3); }
@media (max-width: 560px) { .dv-srv-dir .fila.cab { display: none; } }
.dv-srv-planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dv-srv-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: 20px; background: var(--dv-surface); border: 1px solid var(--dv-line); }
.dv-srv-plan.reco { border: 2px solid var(--dv-accent); }
.dv-srv-plan .n { font-size: 17px; margin-top: 4px; }
.dv-srv-plan .precio b { font-family: var(--dv-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; } .dv-srv-plan .precio span { font-size: 14px; color: var(--dv-ink-3); margin-left: 2px; }
.dv-srv-plan .spec { font-size: 12.5px; color: var(--dv-ink-3); }
.dv-srv-plan .dv-btn { margin-top: auto; align-self: flex-start; }
.dv-srv-reco { position: absolute; top: -11px; left: 16px; background: var(--dv-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--dv-radius-pill); }
@media (max-width: 1280px) { .dv-srv-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dv-srv-cuerpo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .dv-srv-planes { grid-template-columns: minmax(0, 1fr); } .dv-srv-dominios .fila { grid-template-columns: minmax(0, 1fr) auto; } .dv-srv-dominios .fila > span { display: none; } .dv-srv-dominios.con .fila { grid-template-columns: minmax(0, 1fr) auto auto; } .dv-srv-dominios.con .fila > .dv-pill { display: inline-flex; } .dv-srv-dominios.con .fila > .pr { display: none; } }

/* Facturas */
.dv-fac-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dv-fac-cifra { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.dv-fac-cifra > b { font-family: var(--dv-display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.dv-fac-cifra > b.fs-16 { font-family: var(--dv-font); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.dv-fac-tabla .fila { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px 120px 110px; gap: 16px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--dv-line); font-size: 14.5px; }
.dv-fac-tabla .fila.cab { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--dv-ink-3); padding-top: 0; }
.dv-fac-tabla .r { text-align: right; justify-self: end; }
.dv-fac-tabla .ico { width: 30px; height: 30px; border-radius: 9px; background: #E9F5EE; color: var(--dv-ok); display: grid; place-items: center; flex: none; }
@media (max-width: 760px) { .dv-fac-cifras { grid-template-columns: minmax(0, 1fr); } .dv-fac-tabla .fila { grid-template-columns: minmax(0, 1fr) auto; } .dv-fac-tabla .fila > :nth-child(1), .dv-fac-tabla .fila > :nth-child(4) { display: none; } .dv-fac-tabla .fila > :nth-child(5) { grid-column: 1 / -1; justify-self: start; } }

/* A medida */
.dv-md-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dv-md-pasos .p { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--dv-surface); border: 1px solid var(--dv-line); }
.dv-md-pasos .n { width: 28px; height: 28px; border-radius: 50%; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.dv-md-pasos b { font-size: 15px; } .dv-md-pasos .p > span:last-child { font-size: 13px; color: var(--dv-ink-3); }
.dv-md-hosting { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--dv-dark-2); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dv-md-hosting > span { color: #B9B9C2; font-size: 13px; }
/* A medida (Ola 5 · V): capturas, lista de presupuestos y cola del equipo */
.dv-md-fotos { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-md-fotos .f { position: relative; width: 112px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--dv-line); background: var(--dv-surface); }
.dv-md-fotos .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-md-fotos .f button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--dv-dark); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dv-md-mas { width: 112px; height: 84px; border-radius: 12px; border: 1.5px dashed var(--dv-line); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--dv-ink-3); cursor: pointer; }
.dv-md-mas:hover { border-color: var(--dv-accent); color: var(--dv-accent); }
.dv-md-fila { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.dv-md-fila:hover, .dv-md-fila.on { border-color: var(--dv-accent); }
@media (max-width: 560px) { .dv-md-fila { flex-wrap: wrap; } .dv-md-fila > .grow { flex: 1 1 calc(100% - 120px); } } /* móvil: el título del presupuesto ocupa su fila y el precio y el estado bajan (salía una palabra por línea) */
.dv-md-ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.dv-md-paso { padding: 8px 0; border-top: 1px solid var(--dv-line); }
.dv-md-equipo { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1180px) { .dv-md-equipo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .dv-md-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Menú de arriba con cuatro apartados */
.dv-top-nav a { white-space: nowrap; }
.dv-top-saldo b, .dv-top-saldo span { white-space: nowrap; }
.dv-np-plat { padding-right: 36px; }
.dv-presu .cifra.larga { font-size: 36px; line-height: 1.05; }

/* ================= Logos originales y portada más limpia (1-oct-2026, tras revisión) ================= */
.dv-logoplat { max-width: none; }
/* «¿Con qué trabajas?»: el logo original arriba, lo que puedes hacer debajo */
.lp3-plat { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; width: 236px; min-height: 96px; padding: 18px 20px; }
.lp3-plat .logo { height: 34px; display: flex; align-items: center; }
.lp3-plat .sub { font-size: 12.5px; color: var(--dv-ink-3); }
.lp3-plat .marca-ok { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--dv-accent); color: #fff; display: none; place-items: center; }
.lp3-plat.on .marca-ok { display: grid; }
.lp3-plat .marca-ok .ic { width: 13px; height: 13px; }
.lp3-plat.nose .logo b { font-size: 16px; } .lp3-plat.nose .logo .ic { color: var(--dv-accent); }

/* Banda «Trabajamos con», clara para que los logos se vean como son */
.lp4-banda { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; padding: 30px 32px; background: #fff; border-top: 1px solid var(--dv-line); border-bottom: 1px solid var(--dv-line); }
.lp4-banda .t { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-ink-3); }
.lp4-banda .marca { display: flex; align-items: center; height: 44px; opacity: .92; transition: opacity .2s, transform .2s; }
.lp4-banda .marca:hover { opacity: 1; transform: translateY(-2px); }
.lp4-banda .mas { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--dv-accent); text-decoration: none; }

/* Elige tu plataforma: tres tarjetas grandes que se ven pulsables */
.lp4-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 22px; }
.lp4-opcion { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 24px 20px; border-radius: 22px; background: #fff; border: 2px solid var(--dv-line); cursor: pointer; font: inherit; color: var(--dv-ink); text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s; }
.lp4-opcion:hover { border-color: var(--dv-line-2); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21,20,26,.08); }
.lp4-opcion.on { border-color: var(--dv-accent); box-shadow: 0 16px 36px rgba(59,43,224,.16); }
.lp4-opcion.on::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px; background: #fff; border-right: 2px solid var(--dv-accent); border-bottom: 2px solid var(--dv-accent); transform: translateX(-50%) rotate(45deg); }
.lp4-opcion:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 3px; }
.lp4-opcion .radio { position: absolute; top: 18px; right: 18px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--dv-line-2); display: grid; place-items: center; color: #fff; }
.lp4-opcion.on .radio { background: var(--dv-accent); border-color: var(--dv-accent); }
.lp4-opcion .radio .ic { width: 13px; height: 13px; }
.lp4-opcion .logo { height: 44px; display: flex; align-items: center; }
.lp4-opcion .sub { font-size: 14px; color: var(--dv-ink-2); }
.lp4-opcion .ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--dv-accent); }
.lp4-opcion:not(.on) .ver { color: var(--dv-ink-2); }
.lp4-cab { background: #fff; border: 1px solid var(--dv-line); }
.lp4-con { display: inline-flex; align-items: center; gap: 14px; font-family: var(--dv-display); font-size: 22px; font-weight: 700; }

/* Ideas para hoy: tarjetas blancas y limpias, el color solo en la etiqueta */
.lp4-ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.lp4-idea { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--dv-line); cursor: pointer; font: inherit; color: var(--dv-ink); text-align: left; min-height: 240px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.lp4-idea:hover { border-color: var(--dv-accent); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21,20,26,.08); }
.lp4-idea:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 3px; }
.lp4-idea .eti { font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: var(--dv-radius-pill); background: var(--dv-paper-2); color: var(--dv-ink-2); }
.lp4-idea.bf .eti { background: #15141A; color: #fff; }
.lp4-idea.navidad .eti { background: #FBE4E1; color: #A3241A; }
.lp4-idea.rebajas .eti { background: #FCE4EE; color: #B0245E; }
.lp4-idea.tema .eti { background: var(--dv-accent-soft); color: var(--dv-accent); }
.lp4-idea.presta .eti { background: #E6F5F9; color: #1D5E70; }
.lp4-idea.woo .eti { background: #F3EEFA; color: #6A3F9E; }
.lp4-idea.shopify .eti { background: #EEF6E8; color: #4A7A1E; }
.lp4-idea.dominio .eti { background: #EEF7CF; color: #4E5E12; }
.lp4-idea b { font-family: var(--dv-display); font-size: 19px; line-height: 1.2; }
.lp4-idea .s { font-size: 14px; color: var(--dv-ink-2); }
.lp4-idea .pie { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--dv-paper-2); }
.lp4-idea .para { font-size: 12px; color: var(--dv-ink-3); }
.lp4-idea .ir { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--dv-accent); white-space: nowrap; }
.lp4-marcas { display: flex; gap: 36px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 1100px) { .lp4-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lp4-selector, .lp4-ideas { grid-template-columns: minmax(0, 1fr); } .lp4-opcion.on::after { display: none; } .lp4-banda { gap: 24px; padding: 22px 16px; } }

/* Herramienta: logos originales sin recuadro */
.dv-pr-marca { display: inline-flex; align-items: center; }
.dv-pr-filtro button { min-height: 36px; }
.dv-np-plat { flex-direction: column; align-items: flex-start; gap: 8px; }
.dv-np-plat .logo { height: 32px; display: flex; align-items: center; }
.dv-np-plat .sub { font-size: 13px; color: var(--dv-ink-3); }
/* los logos nunca se encogen: su contenedor ocupa lo que mide el logo */
:has(> .dv-logoplat) { flex-shrink: 0; min-width: max-content; }
.lp4-marcas { min-width: 0; } /* la fila de logos de Precios sí puede partirse en el móvil */
.dv-pr-filtro { flex: none; }

/* Dominios y alojamiento: siempre para una tienda WooCommerce o PrestaShop */
.dv-srv-para { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dv-srv-op { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 40px 14px 16px; border-radius: 16px; border: 1.5px solid var(--dv-line); background: var(--dv-surface); cursor: pointer; font: inherit; color: var(--dv-ink); text-align: left; transition: border-color .15s, box-shadow .15s; }
.dv-srv-op:hover { border-color: var(--dv-line-2); }
.dv-srv-op.nueva { border-style: dashed; }
.dv-srv-op.on { border-color: var(--dv-accent); border-style: solid; background: #F7F6FF; box-shadow: 0 0 0 3px var(--dv-accent-soft); }
.dv-srv-op .logo { height: 22px; display: flex; align-items: center; }
.dv-srv-op b { font-size: 15px; }
.dv-srv-op .ok { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--dv-accent); color: #fff; display: grid; place-items: center; }
.dv-srv-op .ok .ic { width: 13px; height: 13px; }
.dv-srv-etq { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dv-accent); background: var(--dv-accent-soft); padding: 6px 12px; border-radius: var(--dv-radius-pill); white-space: nowrap; }
.dv-srv-etq { max-width: 100%; } @media (max-width: 560px) { .dv-srv-etq { white-space: normal; } } /* «Para «nombre largo de tu tienda»» baja de línea en vez de salirse */
.dv-pr-servicio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dv-accent); text-decoration: none; }
.dv-pr-servicio:hover { text-decoration: underline; }
.dv-pr-servicio > span { min-width: 0; overflow-wrap: anywhere; }
.dv-migas { flex-wrap: wrap; }
.dv-migas a.dv-pr-servicio { white-space: normal; font-size: 13px; }

/* Selector de idioma (1-oct-2026): bandera + nombre, con su propia lista desplegable, en todas las cabeceras */
.dv-idioma-box { position: relative; flex: none; }
.dv-idioma-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-pill); background: var(--dv-surface); color: var(--dv-ink); font: 600 14px/1 var(--dv-font); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dv-idioma-btn:hover { border-color: var(--dv-line-2); }
.dv-idioma-btn:focus-visible, .dv-idioma-box.abierta .dv-idioma-btn { outline: none; border-color: var(--dv-accent); box-shadow: 0 0 0 3px var(--dv-accent-soft); }
.dv-idioma-btn .k { display: none; }
.dv-idioma-btn .ic { width: 14px; height: 14px; color: var(--dv-ink-3); transition: transform .15s; }
.dv-idioma-box.abierta .dv-idioma-btn .ic { transform: rotate(180deg); }
.dv-bandera { display: inline-flex; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(21,20,26,.12); }
.dv-bandera svg { width: 100%; height: 100%; display: block; }
.dv-idioma-lista { position: fixed; top: 0; left: 0; z-index: 200; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 16px; box-shadow: 0 18px 44px rgba(21,20,26,.16); }
.dv-idioma-lista[hidden] { display: none; }
.dv-idioma-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--dv-ink); cursor: pointer; outline: none; }
.dv-idioma-lista li:hover, .dv-idioma-lista li:focus { background: var(--dv-paper); }
.dv-idioma-lista li[aria-selected="true"] { background: var(--dv-accent-soft); font-weight: 600; }
.dv-idioma-lista li .ic { width: 16px; height: 16px; color: var(--dv-accent); }
.dv-pantalla-centro { position: relative; }
.dv-centro-idioma { position: absolute; top: 20px; right: 24px; }
.dv-side .dv-idioma-btn { height: 34px; padding: 0 8px; gap: 6px; }
.dv-side .dv-idioma-btn .n { display: none; }
.dv-side .dv-idioma-btn .k { display: inline; font-size: 13px; }
@media (max-width: 760px) { .dv-idioma-btn .n { display: none; } .dv-idioma-btn .k { display: inline; } }

/* ================= Guía en vídeo «Cómo sacar tus claves de Shopify» (1-oct-2026, js/guia-shopify.js) ================= */
.gs { display: flex; flex-direction: column; gap: 12px; background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius); padding: 18px; }
.gs-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-cab b { font-size: 16px; flex: 1; min-width: 0; }
.gs-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #B42318; background: #FDECEA; padding: 4px 10px; border-radius: var(--dv-radius-pill); }
.gs-rec i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: gs-latido 1.4s ease-in-out infinite; }
.gs.parado .gs-rec i { animation: none; opacity: .5; }
.gs-dura { font-size: 13px; color: var(--dv-ink-3); }
@keyframes gs-latido { 50% { opacity: .25; } }
.gs-marco { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #0d0d0f; box-shadow: 0 0 0 1px rgba(21,20,26,.1), 0 14px 34px rgba(21,20,26,.14); }
.gs-lienzo { position: absolute; top: 0; left: 0; transform-origin: 0 0; font: 13px/1.35 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #303030; overflow: hidden; }
.gs-escenario { position: absolute; inset: 0; background: #F1F1F1; }
.gs-cursor { position: absolute; left: 0; top: 0; z-index: 5; transition: transform .8s cubic-bezier(.45,.05,.25,1); pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.gs-onda { position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(59,43,224,.35); transform: scale(0); opacity: 0; pointer-events: none; }
.gs-onda.va { animation: gs-onda .5s ease-out; }
@keyframes gs-onda { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.gs-foco { outline: 3px solid #4338F2 !important; outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 8px rgba(67,56,242,.18) !important; transition: outline-color .2s; }
.gs-pulsado { filter: brightness(.88); }
.gs-velo { position: absolute; inset: 0; z-index: 8; display: none; align-items: flex-end; justify-content: center; padding: 18px; background: linear-gradient(to top, rgba(13,13,15,.72), rgba(13,13,15,.15) 55%, transparent); }
.gs.parado .gs-velo { display: flex; animation: gs-entra .25s ease-out; }
@keyframes gs-entra { from { opacity: 0; } }
.gs-velo-in { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gs-velo-ok { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 14px; }
.gs-velo-ok .ic { color: var(--dv-lime); }
.gs-velo .dv-btn { height: 44px; }
.gs-velo .dv-btn:not(.primary) { background: rgba(255,255,255,.95); }
.gs-progreso { height: 4px; border-radius: 2px; background: var(--dv-paper-2); overflow: hidden; }
.gs-progreso i { display: block; height: 100%; width: 0; background: var(--dv-accent); transition: width .3s; }
.gs-puntos { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-puntos button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); background: var(--dv-surface); font: 600 12px/1 var(--dv-font); color: var(--dv-ink-2); cursor: pointer; }
.gs-puntos button.hecho { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; }
.gs-puntos button.on { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; box-shadow: 0 0 0 3px var(--dv-accent-soft); }
.gs-pausa-txt { display: flex; flex-direction: column; gap: 4px; }
.gs-num { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dv-accent); }
.gs-titulo { font-size: 17px; }
.gs-texto { margin: 0; font-size: 14.5px; color: var(--dv-ink-2); }


/* --- réplica del admin de Shopify --- */
.gs-adm-top { height: 46px; background: #1A1A1A; color: #fff; display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.gs-adm-top b { font-size: 17px; font-style: italic; letter-spacing: -.3px; }
.gs-busca { flex: 1; max-width: 360px; margin: 0 auto; background: #303030; border-radius: 8px; padding: 6px 12px; color: #b5b5b5; font-size: 12px; }
.gs-tienda { font-size: 12px; background: #303030; padding: 5px 10px; border-radius: 8px; }
.gs-adm { display: flex; height: 554px; }
.gs-adm-lado { width: 190px; background: #EBEBEB; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; position: relative; }
.gs-adm-lado span { padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: #303030; }
.gs-adm-lado .gs-sep { font-weight: 500; font-size: 11.5px; color: #616161; margin-top: 10px; }
.gs-adm-lado .gs-config { position: absolute; left: 10px; right: 10px; bottom: 14px; }
.gs-adm-main { flex: 1; padding: 34px 40px; display: flex; flex-direction: column; gap: 18px; }
.gs-adm-main h2 { margin: 30px 0 0; text-align: center; font-size: 22px; font-weight: 650; }
.gs-adm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gs-adm-cards div { background: #fff; border-radius: 12px; height: 150px; padding: 14px; font-weight: 600; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.gs-modal-fondo { position: absolute; inset: 46px 0 0 0; background: #F1F1F1; display: flex; justify-content: center; padding: 22px; }
.gs-aj { width: 760px; display: flex; gap: 16px; }
.gs-aj-menu { width: 200px; background: #fff; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 1px; align-self: flex-start; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.gs-aj-menu span { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; }
.gs-aj-menu span.on { background: #F1F1F1; font-weight: 650; }
.gs-aj-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.gs-aj-cuerpo h3, .gs-dd-main h3 { margin: 0; font-size: 17px; font-weight: 650; flex: 1; }
.gs-caja { background: #fff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.gs-caja.centro { align-items: center; text-align: center; padding: 34px 16px; color: #616161; }
.gs-caja.aviso { background: #FFF5EA; }
.gs-caja span { color: #616161; font-size: 12.5px; }
.gs-caja label, .gs-dd-caja label { font-size: 12px; font-weight: 600; }
.gs-caja ul { margin: 0; padding-left: 18px; color: #303030; }
.gs-fila-tit { display: flex; align-items: center; gap: 8px; }
.gs-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gs-fila.der { justify-content: flex-end; }
.gs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px; white-space: nowrap; align-self: flex-start; }
.gs-btn.peq { padding: 5px 10px; font-size: 12px; }
.gs-btn.negro { background: #303030; color: #fff; box-shadow: inset 0 -1px 0 #000; }
.gs-btn.gris { background: #E3E3E3; color: #303030; }
.gs-btn.blanco { background: #fff; color: #1A1A1A; }
.gs-btn.oscuro { background: #303030; color: #E3E3E3; }
.gs-input { min-height: 30px; border-radius: 8px; background: #2A2A2A; border: 1px solid #4A4A4A; padding: 6px 10px; color: #fff; font-size: 13px; }
.gs-input.claro { background: #fff; border-color: #8A8A8A; color: #303030; }
.gs-input.escribiendo::after { content: '|'; margin-left: 1px; animation: gs-latido .8s steps(1) infinite; }
.gs-permiso { position: absolute; inset: 46px 0 0 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 60px; }
.gs-permiso .gs-caja { width: 420px; gap: 10px; }
/* --- réplica del Dev Dashboard (oscuro) --- */
.gs-p-ddApps, .gs-p-ddNueva, .gs-p-ddApp { background: #1A1A1A; color: #E3E3E3; }
.gs-dd { display: flex; height: 600px; }
.gs-dd-lado { width: 170px; background: #111; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; }
.gs-dd-lado span { padding: 6px 10px; border-radius: 8px; color: #B5B5B5; font-size: 12.5px; }
.gs-dd-lado span.on { background: #2A2A2A; color: #fff; font-weight: 600; }
.gs-dd-logo { color: #fff; font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 4px 10px 14px; }
.gs-dd-main { flex: 1; padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.gs-dd-menu { position: absolute; right: 28px; top: 58px; width: 290px; background: #2A2A2A; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 30px rgba(0,0,0,.5); z-index: 2; }
.gs-dd-menu[hidden], .gs-alcances[hidden], .gs-dd-tienda[hidden], .gs-caja[hidden], .gs-clave[hidden] { display: none; }
.gs-dd-menu div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 8px; }
.gs-dd-menu span { color: #B5B5B5; font-size: 11.5px; }
.gs-dd-vacio { margin-top: 30px; text-align: center; color: #8A8A8A; background: #242424; border-radius: 12px; padding: 60px 0; }
.gs-dd-caja { background: #242424; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.gs-dd-caja span { color: #B5B5B5; font-size: 12.5px; }
.gs-dd-caja.alto { min-height: 300px; }
.gs-dd-dos { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.gs-dd-col { display: flex; flex-direction: column; gap: 14px; }
.gs-enlace { color: #8FB4FF; font-weight: 600; font-size: 12.5px; }
.gs-alcances { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.gs-alc { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; background: #2A2A2A; }
.gs-alc small { margin-left: auto; color: #8A8A8A; }
.gs-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #8A8A8A; display: inline-flex; align-items: center; justify-content: center; }
.gs-check.on { background: #fff; border-color: #fff; }
.gs-check.on::after { content: '✓'; color: #111; font-size: 12px; font-weight: 700; }
.gs-clave { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #1A1A1A; border-radius: 8px; padding: 7px 10px; }
.gs-clave.claro { background: #F1F1F1; }
.gs-clave code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.gs-copia { width: 24px; height: 24px; border-radius: 6px; background: #3A3A3A; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.gs-clave.claro .gs-copia { background: #E3E3E3; color: #303030; }
.gs-dd-tienda { position: absolute; right: 28px; top: 112px; width: 300px; background: #2A2A2A; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); z-index: 2; }
.gs-op { padding: 8px 10px; border-radius: 8px; border: 1.5px solid #8FB4FF; }
/* --- App Store, Theme Access y correo --- */
.gs-store { position: absolute; inset: 0; background: #fff; }
.gs-store header { height: 52px; border-bottom: 1px solid #E3E3E3; display: flex; align-items: center; gap: 20px; padding: 0 24px; }
.gs-store header .gs-busca { background: #F1F1F1; color: #303030; margin: 0; }
.gs-store-app { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 40px 60px; }
.gs-store-app > div:nth-child(2) { display: flex; flex-direction: column; gap: 8px; }
.gs-store-app b { font-size: 20px; }
.gs-store-app span { color: #616161; }
.gs-store-app .gs-btn { padding: 10px 40px; font-size: 14px; color: #fff; }
.gs-store-ico { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #5B6CFF, #44C3FF); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.gs-store-txt { grid-column: 1 / -1; max-width: 560px; font-size: 15px; color: #303030; margin-top: 20px; }
.gs-correo { position: absolute; inset: 0; background: #F6F8FC; }
.gs-correo header { height: 48px; display: flex; align-items: center; padding: 0 20px; background: #fff; border-bottom: 1px solid #E3E3E3; font-weight: 600; }
.gs-mail { margin: 30px auto; width: 560px; background: #fff; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.gs-mail p { margin: 0; color: #303030; }
.gs-mail > span { color: #616161; }

.gs-grande { height: 34px; padding: 0 12px; }
.gs.grande { position: fixed; z-index: 300; top: 50%; left: 50%; width: min(1100px, 94vw); max-height: 94vh; overflow: auto; transform: translate(-50%, -50%); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.gs-fondo { position: fixed; inset: 0; z-index: 299; background: rgba(21,20,26,.55); }

/* Planes de alojamiento reales (1-oct-2026): cinco de tienda y cuatro de app */
.lp3-planes.grande.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lp3-planes.grande.cinco .lp3-plan { padding: 20px; } .lp3-planes.grande.cinco .lp3-plan > b { font-size: 34px; }
.dv-srv-planes { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 1100px) { .lp3-planes.grande.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lp3-planes.grande.cinco { grid-template-columns: minmax(0, 1fr); } }
.lp3-planes.grande .lp3-plan > b.n, .lp3-planes.grande.cinco .lp3-plan > b.n { font-size: 17px; letter-spacing: 0; line-height: 1.25; padding-right: 92px; min-height: 22px; }
.lp3-planes.grande .lp3-plan { position: relative; }
.lp3-planes.grande .lp3-plan .lp-reco { position: absolute; top: 18px; right: 16px; }
.lp3-planes.grande.cinco .lp3-plan > b.n { padding-right: 0; margin-top: 18px; }
.lp3-planes.grande.cinco .lp3-plan .lp-reco { top: 12px; left: 16px; right: auto; }

/* Botón grande «Ver el vídeo» (cuando el vídeo no arranca solo: «reducir movimiento» activado) */
.dv-play { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer; background: rgba(13,13,15,.42); color: #fff; font: 600 16px/1.2 var(--dv-font); }
.dv-play .bola { width: 72px; height: 72px; border-radius: 50%; background: var(--dv-accent); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(59,43,224,.45); }
.dv-play .bola .ic { width: 30px; height: 30px; color: #fff; margin-left: 4px; }
.dv-play:hover .bola { background: var(--dv-accent-ink); }
.dv-play[hidden] { display: none; }
.lp2-v-pantalla { position: relative; }

/* Guía con capturas reales: la captura encaja en 16:9 y el cursor va en su propia capa, a tamaño real */
.gs-marco { aspect-ratio: 16 / 9; height: auto !important; background: #111; }
.gs-lienzo { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.gs-foto { display: block; width: 100%; height: 100%; user-select: none; }
.gs-capa { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.gs-capa .gs-cursor { position: absolute; left: 0; top: 0; }
.gs-capa .gs-onda { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.gs-anillo { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid #4338F2; box-shadow: 0 0 0 6px rgba(67,56,242,.22); opacity: 0; }
.gs-anillo.va { animation: gs-anillo 1.6s ease-in-out infinite; }
@keyframes gs-anillo { 0%, 100% { transform: scale(.85); opacity: .95; } 50% { transform: scale(1.15); opacity: .55; } }
.gs.grande .gs-marco { aspect-ratio: 16 / 9; }
.dv-alcances { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--dv-paper); font: 12px/1.5 ui-monospace, Consolas, monospace; word-break: break-all; user-select: all; }

/* Guía: cabecera en dos filas (etiqueta + botón arriba, título entero debajo) y pantalla completa */
.gs-cab { gap: 10px; }
.gs-cab .grow { flex: 1; }
.gs-tit { font-size: 18px; line-height: 1.25; margin-top: -2px; }
.gs-grande { height: 36px; padding: 0 14px; gap: 6px; }
.gs:fullscreen, .gs.completa { width: 100vw; height: 100vh; max-height: none; border: 0; border-radius: 0; padding: 20px 32px 24px; background: #0d0d0f; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; }
.gs:fullscreen .gs-marco, .gs.completa .gs-marco { width: min(100%, calc((100vh - 230px) * 16 / 9)); margin: 0 auto; flex: none; }
.gs:fullscreen > :not(.gs-marco), .gs.completa > :not(.gs-marco) { width: min(100%, calc((100vh - 230px) * 16 / 9)); margin: 0 auto; }
.gs:fullscreen .gs-tit, .gs:fullscreen .gs-titulo { color: #fff; }
.gs:fullscreen .gs-texto, .gs:fullscreen .gs-dura { color: #C9C7D1; }
.gs:fullscreen .gs-progreso { background: #2A2A32; }
.gs:fullscreen .gs-puntos button:not(.on):not(.hecho) { background: #1E1E24; border-color: #3A3A44; color: #C9C7D1; }
.gs:fullscreen .gs-grande { background: #fff; }
.gs.grande { width: min(1400px, 96vw); }

/* Zoom de la guía: la captura se acerca a cada clic */
.gs-lienzo { transition: transform .9s cubic-bezier(.45,.05,.25,1); will-change: transform; }
.gs-capa .gs-anillo, .gs-capa .gs-onda { transition: left .9s cubic-bezier(.45,.05,.25,1), top .9s cubic-bezier(.45,.05,.25,1); }
.gs-tit { font-size: 16px; }

/* Subtítulos de la guía: la instrucción de cada clic, abajo del vídeo */
.gs-sub { position: absolute; left: 50%; bottom: 14px; z-index: 6; transform: translate(-50%, 8px); max-width: calc(100% - 28px); width: max-content; padding: 8px 14px; border-radius: 10px; background: rgba(13,13,15,.82); color: #fff; font: 600 14px/1.35 var(--dv-font); text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.gs-sub.on { opacity: 1; transform: translate(-50%, 0); }
.gs.parado .gs-sub { opacity: 0; }
.gs:fullscreen .gs-sub, .gs.completa .gs-sub, .gs.grande .gs-sub { font-size: 20px; padding: 10px 18px; bottom: 22px; }
@media (max-width: 760px) { .gs-sub { font-size: 12.5px; bottom: 8px; } }

/* Ventana «Permisos para Alcances» dentro de la guía */
.gs-perm { position: absolute; z-index: 9; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); background: #fff; color: var(--dv-ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 8px; animation: gs-entra .25s ease-out; }
.gs-perm[hidden] { display: none; }
.gs-perm-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.gs-perm-cab span { font-size: 12px; color: var(--dv-ink-3); }
.gs-perm-txt { display: block; max-height: 64px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--dv-paper); font: 11px/1.45 ui-monospace, Consolas, monospace; word-break: break-all; user-select: all; }
.gs-perm-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dv-ink-2); }
.gs-perm-pie .dv-btn { flex: none; }
.gs:fullscreen .gs-perm, .gs.grande .gs-perm { width: min(720px, calc(100% - 48px)); top: 20px; }
.gs:fullscreen .gs-perm-txt, .gs.grande .gs-perm-txt { max-height: 110px; font-size: 12.5px; }
@media (max-width: 760px) { .gs-perm-pie span { display: none; } }

/* «Datos para copiar» en la guía */
.gs-perm { gap: 10px; max-height: calc(100% - 24px); overflow: auto; }
.gs-perm-campo { display: flex; flex-direction: column; gap: 4px; }
.gs-perm-campo .etq { font-size: 12px; font-weight: 600; color: var(--dv-ink-2); }
.gs-perm-fila { display: flex; gap: 8px; align-items: flex-start; }
.gs-perm-fila .gs-perm-txt { flex: 1; min-width: 0; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-perm-fila .gs-perm-txt.largo { white-space: normal; max-height: 52px; overflow: auto; }
.gs-perm-fila .dv-btn { flex: none; height: 32px; }
.gs-perm-fila .dv-btn.ok { border-color: var(--dv-ok); color: var(--dv-ok); }
.gs-perm-nota { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; background: #FFF3E0; color: #7A3E00; font-size: 12.5px; font-weight: 600; }
.gs-perm-nota .ic { color: #B45309; flex: none; }
.gs:fullscreen .gs-perm-fila .gs-perm-txt.largo, .gs.grande .gs-perm-fila .gs-perm-txt.largo { max-height: 96px; }

/* «Datos para copiar» va debajo del vídeo (no lo tapa) */
.gs > .gs-perm { position: static; transform: none; width: auto; max-height: none; overflow: visible; box-shadow: none; border: 1.5px solid var(--dv-accent); background: #F7F6FF; }
.gs:fullscreen > .gs-perm { background: #fff; }

/* Pantalla completa con «Datos para copiar»: el panel va a la derecha del vídeo para que todo quepa sin cortarse */
.gs:fullscreen, .gs.completa { overflow-y: auto; }
.gs:fullscreen:has(> .gs-perm:not([hidden])), .gs.completa:has(> .gs-perm:not([hidden])), .gs.grande:has(> .gs-perm:not([hidden])) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: 24px; row-gap: 12px; align-content: center;
  grid-template-areas: "cab perm" "tit perm" "marco perm" "prog perm" "puntos perm" "pausa perm";
}
.gs:has(> .gs-perm:not([hidden])) > .gs-cab { grid-area: cab; }
.gs:has(> .gs-perm:not([hidden])) > .gs-tit { grid-area: tit; }
.gs:has(> .gs-perm:not([hidden])) > .gs-marco { grid-area: marco; }
.gs:has(> .gs-perm:not([hidden])) > .gs-progreso { grid-area: prog; }
.gs:has(> .gs-perm:not([hidden])) > .gs-puntos { grid-area: puntos; }
.gs:has(> .gs-perm:not([hidden])) > .gs-pausa { grid-area: pausa; }
.gs:fullscreen > .gs-perm, .gs.completa > .gs-perm, .gs.grande > .gs-perm { grid-area: perm; align-self: center; width: auto; margin: 0; max-height: calc(100vh - 48px); overflow: auto; }
.gs:fullscreen:has(> .gs-perm:not([hidden])) > :not(.gs-perm), .gs.completa:has(> .gs-perm:not([hidden])) > :not(.gs-perm) { width: min(100%, calc((100vh - 230px) * 16 / 9)); margin: 0 auto; }
.gs.grande:has(> .gs-perm:not([hidden])) { width: min(1500px, 96vw); }
.gs:fullscreen .gs-perm-fila .gs-perm-txt.largo, .gs.grande .gs-perm-fila .gs-perm-txt.largo { max-height: 180px; }
@media (max-width: 1000px) { .gs:fullscreen:has(> .gs-perm:not([hidden])), .gs.grande:has(> .gs-perm:not([hidden])) { display: flex; } }

/* «Ahora mismo…»: lo que está haciendo Devellia mientras trabaja (js/narrador.js) */
.dv-nar { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--dv-accent-soft); }
.dv-nar-fila { display: flex; gap: 12px; align-items: flex-start; }
.dv-nar-fila .col { gap: 2px; min-width: 0; }
.dv-nar-eti { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dv-accent); }
.dv-nar-frase { font-size: 16px; font-weight: 600; color: var(--dv-ink); }
.dv-nar-frase::after { content: '…'; }
.dv-nar-frase.entra { animation: dv-nar-entra .45s ease-out; }
@keyframes dv-nar-entra { from { opacity: 0; transform: translateY(4px); } }
.dv-nar-punto { position: relative; width: 14px; height: 14px; margin-top: 4px; flex: none; }
.dv-nar-punto i { position: absolute; inset: 3px; border-radius: 50%; background: var(--dv-accent); }
.dv-nar-punto::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--dv-accent); opacity: .35; animation: dv-nar-late 1.6s ease-out infinite; }
@keyframes dv-nar-late { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.8); opacity: 0; } }
.dv-nar-pie { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--dv-ink-2); padding-left: 26px; flex-wrap: wrap; }
.dv-nar-pie .ic { width: 15px; height: 15px; color: var(--dv-ink-3); }
.dv-nar-calma { margin: 0; padding-left: 26px; font-size: 13px; color: var(--dv-ink-3); }
.dv-nar-calma[hidden] { display: none; }

/* «Mientras Devellia trabaja»: pase de tarjetas de ciencia ficción en «Así va quedando» (js/mientras.js) */
.dv-mi { --c: #3DE8FF; --c2: #8B7CFF; position: absolute; inset: 0; overflow: hidden; container-type: size; color: #EDEBFF; isolation: isolate;
  background: radial-gradient(110% 90% at 85% -10%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 60%),
    radial-gradient(90% 80% at -10% 110%, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%), #06051A; }
.dv-mi-cielo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.dv-mi::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55)); }
.dv-mi-cab { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 3cqh 3.4cqw; }
.dv-mi-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(9px, 1.8cqw, 12px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.dv-mi-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: gs-latido 1.4s ease-in-out infinite; }
.dv-mi.pausa .dv-mi-vivo i { animation: none; opacity: .5; }
.dv-mi-flecha { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); transition: border-color .2s, box-shadow .2s; }
.dv-mi-flecha:hover { border-color: var(--c); box-shadow: 0 0 14px var(--c); }
.dv-mi-flecha .ic { width: 14px; height: 14px; }
.dv-mi-escena { position: absolute; inset: 0; z-index: 2; }
.dv-mi-pie { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3cqh; z-index: 6; display: flex; align-items: center; gap: 10px; }
.dv-mi-linea { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); position: relative; }
.dv-mi-linea b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--c2), var(--c)); box-shadow: 0 0 10px var(--c); }
.dv-mi-linea b::after { content: ''; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px var(--c); }
.dv-mi-num { font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; color: rgba(255,255,255,.55); }
.dv-mi-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 55%, #fff), transparent 62%); }
.dv-mi-flash.on { animation: mi-flash .7s ease-out; }
@keyframes mi-flash { 0% { opacity: .85; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.7); } }

/* La tarjeta: texto + decorado. Por defecto, texto a la izquierda. */
.mi-t { position: absolute; inset: 0; display: flex; align-items: center; padding: calc(3cqh + 44px) 4.5cqw calc(3cqh + 22px); }
.mi-cuerpo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: calc(1.6cqh * var(--esc, 1)); max-width: 64%; }
.mi-cuerpo > * { animation: mi-sube .8s cubic-bezier(.2,.9,.2,1) both; }
.mi-cuerpo > :nth-child(2) { animation-delay: .1s; } .mi-cuerpo > :nth-child(3) { animation-delay: .22s; }
.mi-cuerpo > :nth-child(4) { animation-delay: .4s; } .mi-cuerpo > :nth-child(5) { animation-delay: .6s; } .mi-cuerpo > :nth-child(6) { animation-delay: .8s; }
@keyframes mi-sube { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
.mi-eti { display: inline-flex; align-items: center; gap: 8px; font-size: calc(clamp(14px, 4.4cqw, 22px) * var(--esc, 1)); font-weight: 800; letter-spacing: .01em; color: var(--c); }
.mi-eti .ic { width: 1.1em; height: 1.1em; }
.mi-grande { font-family: var(--dv-display); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #fff; font-size: calc(clamp(40px, 17cqw, 124px) * var(--esc, 1));
  text-shadow: 0 0 30px color-mix(in srgb, var(--c) 28%, transparent); white-space: nowrap; }
.mi-grande .mi-pre, .mi-grande .mi-suf { font-size: .5em; letter-spacing: -0.01em; }
.mi-grande.titulo { font-size: calc(clamp(26px, 9cqw, 58px) * var(--esc, 1)); line-height: 1.08; white-space: normal; }
.mi-texto { margin: 0; font-size: calc(clamp(16px, 5cqw, 27px) * var(--esc, 1)); line-height: 1.4; color: #fff; max-width: 50ch; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.mi-fin { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: calc(clamp(15px, 4.6cqw, 24px) * var(--esc, 1)); font-weight: 700; color: var(--c); }
.mi-fin .ic { width: 1em; height: 1em; flex: none; margin-top: .2em; }

/* Escenas centradas */
.mi-t:is([data-v="warp"], [data-v="neon"], [data-v="holo"], [data-v="ondas"], [data-v="synth"]) { justify-content: center; text-align: center; }
.mi-t:is([data-v="warp"], [data-v="neon"], [data-v="holo"], [data-v="ondas"], [data-v="synth"]) .mi-cuerpo { align-items: center; max-width: 84%; }
.mi-t:is([data-v="warp"], [data-v="neon"], [data-v="holo"], [data-v="ondas"], [data-v="synth"]) .mi-fin { justify-content: center; }
.mi-t:is([data-v="hud"], [data-v="cristal"], [data-v="terminal"], [data-v="duelo"]) .mi-cuerpo { max-width: 80%; }

/* holo: holograma con fallos de señal y líneas de barrido */
.mi-d-holo { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px); }
.mi-d-holo .cono { position: absolute; left: 50%; bottom: -6%; width: 70%; height: 80%; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0); animation: mi-parpadeo 6s infinite; }
.mi-d-holo .banda { position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(transparent, color-mix(in srgb, var(--c) 18%, transparent), transparent); animation: mi-escanea 4s linear infinite; }
.mi-t[data-v="holo"] .mi-grande { color: var(--c); animation: mi-sube .8s both .22s, mi-glitch 3.4s steps(1) infinite 1.2s; }
@keyframes mi-glitch { 0%, 100% { transform: none; clip-path: none; text-shadow: 0 0 26px color-mix(in srgb, var(--c) 30%, transparent); }
  90% { transform: skewX(-10deg) translateX(3px); text-shadow: -3px 0 #FF2BD6, 3px 0 #2BF7FF; }
  92% { transform: translateX(-4px); clip-path: inset(18% 0 42% 0); text-shadow: 4px 0 #FF2BD6, -4px 0 #2BF7FF; }
  94% { transform: translateX(2px); clip-path: inset(60% 0 8% 0); } 96% { transform: none; clip-path: none; } }

/* radar: barrido con puntos que laten */
.mi-d-radar { position: absolute; right: 5cqw; top: 52%; width: min(38cqw, 68cqh); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 25%, transparent), inset 0 0 30px color-mix(in srgb, var(--c) 15%, transparent);
  background: radial-gradient(circle, transparent 23.5%, color-mix(in srgb, var(--c) 40%, transparent) 24%, transparent 25%, transparent 48.5%, color-mix(in srgb, var(--c) 40%, transparent) 49%, transparent 50%, transparent 73.5%, color-mix(in srgb, var(--c) 40%, transparent) 74%, transparent 75%),
    linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--c) 35%, transparent) 50%, transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--c) 35%, transparent) 50%, transparent calc(50% + .5px)); }
.mi-d-radar .barre { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--c) 60%, transparent), transparent 26%); animation: mi-gira 3s linear infinite; }
.mi-d-radar b { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); animation: mi-blip 3s ease-out infinite; }
@keyframes mi-blip { 0% { transform: scale(.4); opacity: 0; } 10% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(.7); opacity: .15; } }

/* warp: anillos de un túnel hacia el hiperespacio */
.mi-d-warp { position: absolute; inset: 0; pointer-events: none; }
.mi-d-warp i { position: absolute; left: 50%; top: 50%; width: 36cqw; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--c); box-shadow: 0 0 22px var(--c), inset 0 0 22px var(--c); animation: mi-tunel 2.4s linear infinite; }
@keyframes mi-tunel { from { transform: translate(-50%, -50%) scale(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }
.mi-t[data-v="warp"] .mi-cuerpo { animation: mi-lejos 1s cubic-bezier(.2,.9,.2,1) both; }
.mi-t[data-v="warp"] .mi-grande { text-shadow: -1.5px 0 rgba(255,43,214,.55), 1.5px 0 rgba(43,247,255,.55); }
@keyframes mi-lejos { from { opacity: 0; transform: scale(.25); filter: blur(14px); } }

/* terminal: ventana de consola que va escribiendo */
.mi-t[data-v="terminal"] .mi-cuerpo { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; padding: 0 2.6cqw 2.6cqh; gap: 1.2cqh; border-radius: 12px; background: rgba(3,10,8,.82);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--c) 25%, transparent), inset 0 0 40px rgba(0,0,0,.6); overflow: hidden; }
.mi-term-barra { align-self: stretch; display: flex; align-items: center; gap: 6px; margin: 0 -2.6cqw; padding: 8px 12px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); font-size: 11px; color: rgba(255,255,255,.5); }
.mi-term-barra i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .mi-term-barra i:nth-child(2) { background: #FEBC2E; } .mi-term-barra i:nth-child(3) { background: #28C840; }
.mi-term-barra span { margin-left: 8px; }
.mi-t[data-v="terminal"] .mi-cuerpo > :not(.mi-term-barra) { animation: mi-teclea 1s steps(22) both; }
.mi-t[data-v="terminal"] .mi-cuerpo > :nth-child(2) { animation-delay: .2s; } .mi-t[data-v="terminal"] .mi-cuerpo > :nth-child(3) { animation-delay: .9s; }
.mi-t[data-v="terminal"] .mi-cuerpo > :nth-child(4) { animation-delay: 1.7s; animation-duration: 1.8s; } .mi-t[data-v="terminal"] .mi-cuerpo > :nth-child(5) { animation-delay: 3.4s; }
.mi-t[data-v="terminal"] .mi-grande { font-family: inherit; color: var(--c); letter-spacing: -0.02em; }
.mi-t[data-v="terminal"] .mi-texto { color: color-mix(in srgb, var(--c) 35%, #fff); }
.mi-t[data-v="terminal"] .mi-texto::before { content: '> '; color: var(--c); }
.mi-t[data-v="terminal"] .mi-fin span::after { content: '▋'; margin-left: 4px; animation: mi-cursor 1s steps(1) infinite; }
@keyframes mi-teclea { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mi-cursor { 50% { opacity: 0; } }

/* orbita: planeta con anillo y luna */
.mi-d-orbita { position: absolute; right: 3cqw; top: 52%; width: min(40cqw, 72cqh); aspect-ratio: 1; transform: translateY(-50%); animation: mi-flota 8s ease-in-out infinite; }
.mi-d-orbita .halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 65%); filter: blur(10px); }
.mi-d-orbita .planeta { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0, var(--c) 16%, var(--c2) 55%, #0B0930 100%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--c) 55%, transparent), inset -12px -16px 30px rgba(0,0,0,.6); }
.mi-d-orbita .anillo { position: absolute; left: -4%; right: -4%; top: 41%; bottom: 41%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 80%, transparent); transform: rotate(-16deg); box-shadow: 0 0 14px var(--c); }
.mi-d-orbita .giro { position: absolute; inset: 0; animation: mi-gira 7s linear infinite; }
.mi-d-orbita .luna { position: absolute; top: 3%; left: 46%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 28px var(--c); }

/* synth: sol a rayas y suelo de neón que avanza */
.mi-d-synth { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; overflow: hidden; perspective: 240px; pointer-events: none; }
.mi-d-synth .sol { position: absolute; left: 50%; bottom: 34%; width: 30cqw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; opacity: .75;
  background: linear-gradient(var(--c2), var(--c)); -webkit-mask: linear-gradient(#000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%); mask: linear-gradient(#000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%); }
.mi-d-synth .suelo { position: absolute; left: -60%; right: -60%; top: 66%; height: 120%; transform: rotateX(64deg); transform-origin: top;
  background-image: linear-gradient(color-mix(in srgb, var(--c) 85%, transparent) 2px, transparent 2px), linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, transparent) 2px, transparent 2px); background-size: 42px 42px;
  -webkit-mask: linear-gradient(transparent, #000 30%); mask: linear-gradient(transparent, #000 30%); animation: mi-suelo 1.1s linear infinite; box-shadow: 0 -2px 24px var(--c); }
@keyframes mi-suelo { to { background-position: 0 42px; } }
.mi-t[data-v="synth"] { align-items: flex-start; padding-top: max(16cqh, 52px); }

/* portal: aros de energía girando */
.mi-d-portal { position: absolute; right: 3cqw; top: 52%; width: min(40cqw, 72cqh); aspect-ratio: 1; transform: translateY(-50%); }
.mi-d-portal .halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 50%, transparent), transparent 66%); filter: blur(14px); animation: mi-late 2.4s ease-in-out infinite; }
.mi-d-portal .aro { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(var(--c), var(--c2), transparent 45%, var(--c) 70%, var(--c2), var(--c));
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 68%, transparent 70%); mask: radial-gradient(circle, transparent 54%, #000 56%, #000 68%, transparent 70%); animation: mi-gira 3.6s linear infinite; }
.mi-d-portal .aro.b { inset: 18%; animation-direction: reverse; animation-duration: 5.5s; opacity: .8; }
.mi-d-portal .nucleo { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, #fff, var(--c) 35%, transparent 70%); filter: blur(3px); animation: mi-late 1.6s ease-in-out infinite; }

/* hud: visor de nave con esquinas, aros y barrido */
.mi-d-hud { position: absolute; inset: 11cqh 3cqw 8cqh; pointer-events: none; }
.mi-d-hud .esq { position: absolute; width: 22px; height: 22px; border: 2px solid var(--c); filter: drop-shadow(0 0 6px var(--c)); animation: mi-parpadeo 7s infinite; }
.mi-d-hud .a { top: 0; left: 0; border-right: 0; border-bottom: 0; } .mi-d-hud .b { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.mi-d-hud .c { bottom: 0; left: 0; border-right: 0; border-top: 0; } .mi-d-hud .d { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.mi-d-hud .linea { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); box-shadow: 0 0 12px var(--c); animation: mi-escanea 3.6s ease-in-out infinite alternate; opacity: .7; }
.mi-d-hud .anillos { position: absolute; right: 3%; top: 50%; width: min(24cqw, 46cqh); aspect-ratio: 1; transform: translateY(-50%); }
.mi-d-hud .circ { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--c) 70%, transparent); animation: mi-gira 14s linear infinite; }
.mi-d-hud .circ.b { inset: 16%; border-style: dotted; border-width: 3px; animation-direction: reverse; animation-duration: 8s; }
.mi-d-hud .circ.c { inset: 36%; border: 0; background: radial-gradient(circle, var(--c), transparent 70%); animation: mi-late 1.8s ease-in-out infinite; }

/* neon: cartel de neón que parpadea */
.mi-d-neon { position: absolute; inset: 12cqh 6cqw 9cqh; border-radius: 20px; border: 2px solid var(--c); pointer-events: none;
  box-shadow: 0 0 10px var(--c), 0 0 34px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 50%, transparent); animation: mi-parpadeo 5s infinite; }
.mi-t[data-v="neon"] .mi-grande { color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent), 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); animation: mi-sube .8s both .22s, mi-parpadeo 4s infinite 1.4s; }
.mi-t[data-v="neon"] .mi-cuerpo { max-width: 76%; }
@keyframes mi-parpadeo { 0%, 18%, 21%, 24%, 60%, 63%, 100% { opacity: 1; } 19% { opacity: .35; } 22.5% { opacity: .25; } 61.5% { opacity: .6; } }

/* duelo: barras que comparan */
.mi-barras { display: flex; flex-direction: column; gap: 1.6cqh; width: min(100%, 460px); }
.mi-duelo { display: grid; grid-template-columns: 6.2em 1fr auto; align-items: center; gap: 10px; font-size: calc(clamp(14px, 3.9cqw, 21px) * var(--esc, 1)); font-weight: 600; }
.mi-duelo .pista { height: clamp(8px, 2.6cqh, 14px); border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.mi-duelo .pista b { display: block; height: 100%; width: var(--p); min-width: 8px; border-radius: inherit; background: linear-gradient(90deg, #FF7A90, #FF2B4E); box-shadow: 0 0 12px #FF2B4E; animation: mi-llena 1.8s cubic-bezier(.2,.9,.2,1) .6s both; }
.mi-duelo.yo .pista b { background: linear-gradient(90deg, var(--c2), var(--c)); box-shadow: 0 0 14px var(--c); animation-delay: 1.4s; }
.mi-duelo .val { font-family: var(--dv-display); font-weight: 800; white-space: nowrap; color: #FF8FA1; }
.mi-duelo.yo .val, .mi-duelo.yo .eti { color: var(--c); }
@keyframes mi-llena { from { width: 0; min-width: 0; } }

/* ondas: ecualizador */
.mi-d-ondas { position: absolute; left: 4cqw; right: 4cqw; bottom: 8cqh; height: 38%; display: flex; align-items: flex-end; gap: .8cqw; opacity: .5; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); }
.mi-d-ondas i { flex: 1; height: 15%; border-radius: 3px 3px 0 0; background: linear-gradient(to top, var(--c2), var(--c)); box-shadow: 0 0 8px var(--c); animation: mi-eq 1s ease-in-out infinite alternate; }
@keyframes mi-eq { from { height: 10%; } to { height: var(--h); } }

/* cristal: placa de cristal con brillo sobre manchas de color */
.mi-d-cristal i { position: absolute; border-radius: 38%; filter: blur(16px); opacity: .85; animation: mi-flota 9s ease-in-out infinite; }
.mi-d-cristal .a { width: 34cqw; height: 34cqw; right: 4%; top: 8%; background: var(--c); }
.mi-d-cristal .b { width: 26cqw; height: 26cqw; left: 12%; bottom: 0; background: var(--c2); animation-delay: -3s; }
.mi-d-cristal .c { width: 14cqw; height: 14cqw; right: 32%; bottom: 14%; background: #fff; opacity: .35; animation-delay: -6s; }
.mi-t[data-v="cristal"] .mi-cuerpo { padding: 3.4cqh 3.4cqw; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.08); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.mi-t[data-v="cristal"] .mi-cuerpo::after { content: ''; position: absolute; inset: -40% -60%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); animation: mi-brillo 4.5s ease-in-out infinite; }
@keyframes mi-brillo { from { transform: translateX(-55%); } to { transform: translateX(55%); } }

@keyframes mi-gira { to { transform: rotate(360deg); } }
@keyframes mi-late { 50% { transform: scale(1.14); opacity: .75; } }
@keyframes mi-flota { 0%, 100% { translate: 0 0; } 50% { translate: -8px 10px; } }
@keyframes mi-escanea { from { top: 0; } to { top: 100%; } }

/* Caja estrecha: el decorado lateral pasa al fondo y el texto ocupa todo */
@container (max-width: 520px) {
  .mi-cuerpo { max-width: 100% !important; }
  .mi-d-radar, .mi-d-orbita, .mi-d-portal, .mi-d-hud .anillos { opacity: .3; right: -10cqw; }
  .mi-t { padding-left: 4.5cqw; padding-right: 4.5cqw; }
}

.mi-t[data-v="terminal"] .mi-texto { font-size: calc(clamp(15px, 4.4cqw, 24px) * var(--esc, 1)); }
/* «Creando…» encima del cuadro mientras no hay captura (pasos/diseno.js) */
.dv-creando { display: flex; align-items: center; gap: 10px; font-family: var(--dv-display); font-size: 16px; font-weight: 800; color: var(--dv-ink); }
.dv-creando-ico { position: relative; width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.dv-creando-ico::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--dv-accent-soft); border-top-color: var(--dv-accent); border-right-color: var(--dv-accent); animation: dv-spin .9s linear infinite; }
.dv-creando-ico .ic { width: 14px; height: 14px; color: var(--dv-accent); animation: mi-late 1.4s ease-in-out infinite; }
.dv-creando-txt::after { content: '…'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: dv-puntos 1.4s steps(4) infinite; }
@keyframes dv-puntos { to { width: 1.2em; } }
.dv-col-estira { align-self: stretch; }
.dv-crece { flex: 1; display: flex; flex-direction: column; }
.dv-crece > .dv-preview:has(> .dv-mi) { flex: 1; aspect-ratio: auto; min-height: 300px; }

/* «Trabajo en curso» para esperas cortas (js/trabajando.js) */
.dv-trab { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px 20px; border-radius: 16px;
  background: linear-gradient(110deg, var(--dv-accent-soft), #fff 55%, var(--dv-accent-soft)); border: 1px solid color-mix(in srgb, var(--dv-accent) 25%, transparent); box-shadow: 0 6px 24px color-mix(in srgb, var(--dv-accent) 12%, transparent); }
.dv-trab::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); animation: dv-trab-brillo 2.6s ease-in-out infinite; }
@keyframes dv-trab-brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.dv-trab-ico { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--dv-accent); }
.dv-trab-ico::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--dv-accent), color-mix(in srgb, var(--dv-accent) 10%, transparent) 70%, var(--dv-accent));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); animation: dv-spin 1s linear infinite; }
.dv-trab-ico .ic { width: 20px; height: 20px; animation: mi-late 1.4s ease-in-out infinite; }
.dv-trab-txt { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dv-trab-tit { font-size: 16px; color: var(--dv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-trab-tit span { color: var(--dv-accent); }
.dv-trab-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; color: var(--dv-ink-2); }
.dv-trab-frase::after { content: '…'; }
.dv-trab-frase.entra { animation: dv-nar-entra .45s ease-out; }
.dv-trab-nota { font-size: 13px; color: var(--dv-ink-3); }
.dv-trab-reloj { position: relative; font: 600 13px/1 ui-monospace, Consolas, monospace; color: var(--dv-accent); background: #fff; padding: 6px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dv-accent) 20%, transparent); }
.dv-trab-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--dv-accent) 12%, transparent); overflow: hidden; }
.dv-trab-barra i { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--dv-accent), var(--dv-lime, #C6FF3D), transparent); animation: dv-trab-va 1.6s ease-in-out infinite; }
@keyframes dv-trab-va { from { left: -35%; } to { left: 100%; } }

/* «Ahora mismo…» en pausa */
.dv-nar.pausa { background: #FFF4E0; }
.dv-nar.pausa .dv-nar-frase::after { content: ''; }
.dv-nar.pausa .dv-nar-punto::before { animation: none; opacity: 0; }
.dv-nar.pausa .dv-nar-punto i { background: #C27A00; }
.dv-nar.pausa .dv-nar-eti { color: #A05A00; }


/* Portada: tarjetas en el sitio del vídeo (mismo marco y tamaño: 1012 × 511 en escritorio) */
.lp2-mi { padding-bottom: 14px; }
.lp2-mi-pantalla { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1012 / 511; }
@media (max-width: 1100px) { .lp2-mi-pantalla { aspect-ratio: 4 / 3; } }
@media (max-width: 760px) { .lp2-mi-pantalla { aspect-ratio: 4 / 5; } .lp2-mi { padding: 10px 10px 10px; } }

/* En cuadros anchos (portada), textos aún más grandes y más aire */
@container (min-width: 820px) {
  .mi-t { padding-left: 6cqw; padding-right: 6cqw; }
  .mi-eti { font-size: calc(clamp(14px, 2.4cqw, 26px) * var(--esc, 1)); }
  .mi-grande { font-size: calc(clamp(40px, 14cqw, 156px) * var(--esc, 1)); }
  .mi-grande.titulo { font-size: calc(clamp(26px, 6.4cqw, 74px) * var(--esc, 1)); }
  .mi-texto { font-size: calc(clamp(16px, 2.9cqw, 31px) * var(--esc, 1)); max-width: 40ch; }
  .mi-fin { font-size: calc(clamp(15px, 2.5cqw, 27px) * var(--esc, 1)); }
  .mi-cuerpo { max-width: 58%; }
}

/* grafica: dos líneas que se dibujan (cuotas que suben, Devellia plano) */
.mi-t[data-v="grafica"] .mi-cuerpo { max-width: 52%; }
.mi-d-grafica { position: absolute; right: 4cqw; top: 54%; width: 42cqw; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.6cqh; }
.mi-graf-svg { width: 100%; height: auto; overflow: visible; }
.mi-graf-svg .rej { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.mi-graf-svg .la, .mi-graf-svg .lb { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mi-traza 2.2s cubic-bezier(.4,.1,.2,1) .5s forwards; }
.mi-graf-svg .la { stroke: #FF4D6D; filter: drop-shadow(0 0 6px rgba(255,77,109,.7)); }
.mi-graf-svg .lb { stroke: var(--c); filter: drop-shadow(0 0 6px var(--c)); animation-delay: 1.1s; }
.mi-graf-svg .area { opacity: 0; animation: mi-aparece 1s ease-out 1.8s forwards; }
.mi-graf-svg .pa, .mi-graf-svg .pb { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mi-punto 1.6s ease-out 2.6s forwards, mi-late 1.6s ease-in-out 4.2s infinite; }
.mi-graf-svg .pa { fill: #FF4D6D; } .mi-graf-svg .pb { fill: var(--c); animation-delay: 3s, 4.6s; }
@keyframes mi-traza { to { stroke-dashoffset: 0; } }
@keyframes mi-aparece { to { opacity: 1; } }
@keyframes mi-punto { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } }
.mi-graf-ley { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: calc(clamp(12px, 1.9cqw, 20px) * var(--esc, 1)); }
.mi-graf-ley span { display: inline-flex; align-items: center; gap: 8px; animation: mi-sube .7s ease-out both; }
.mi-graf-ley .a { animation-delay: 2.4s; } .mi-graf-ley .b { animation-delay: 2.9s; }
.mi-graf-ley i { width: 12px; height: 12px; border-radius: 50%; background: #FF4D6D; box-shadow: 0 0 8px #FF4D6D; } .mi-graf-ley .b i { background: var(--c); box-shadow: 0 0 8px var(--c); }
.mi-graf-ley em { font-style: normal; color: rgba(237,235,255,.8); }
.mi-graf-ley b { font-family: var(--dv-display); font-weight: 800; color: #FF8FA1; } .mi-graf-ley .b b { color: var(--c); }
.mi-graf-eje { font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); align-self: flex-end; margin-top: -6px; }
@container (max-width: 620px) {
  .mi-t[data-v="grafica"] { align-items: flex-start; padding-bottom: calc(8cqh + 46cqw); }
  .mi-t[data-v="grafica"] .mi-cuerpo { max-width: 100% !important; }
  .mi-d-grafica { left: 5cqw; right: 5cqw; width: auto; top: auto; bottom: 8cqh; transform: none; opacity: .9; }
  .mi-graf-ley { display: none; }
}

/* Nombres largos (dominios sin espacios): se parten y encogen en vez de empujar el anillo fuera de la tarjeta (05/10). */
.dv-ini-destacada .info > .row.between > .col { flex: 1 1 auto; min-width: 0; }
.dv-ini-destacada .info > .row.between > .col > .row { flex-wrap: wrap; }
.dv-ini-nombre { overflow-wrap: anywhere; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; }
@media (max-width: 760px) { .dv-ini-destacada { padding: 16px; gap: 18px; } .dv-ini-destacada .info > .row.between { flex-wrap: wrap; } }
/* «Mis proyectos» según el sitio que tiene de verdad la columna (19/10): con el lateral al lado, en 1440 no caben captura de
   430 px e info en fila; se apila. Las tarjetas van de dos, tres o una en fondo según quepan (.dv-ini-grid, auto-fill). */
.dv-ini-main { container-type: inline-size; container-name: dvmain; }
@container dvmain (max-width: 560px) {
  .dv-ini-destacada { flex-direction: column; gap: 20px; }
  .dv-ini-marco { width: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
@container dvmain (max-width: 480px) { .dv-ini-marco { aspect-ratio: 4 / 3; } }

/* Cabecera que nunca desborda (05/10): el menú cede sitio (iconos, créditos y nombre del idioma fuera antes) y,
   si aun así no cabe, se desliza dentro de su hueco en vez de empujar el saldo fuera de la pantalla. */
.dv-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.dv-top-nav { justify-self: center; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dv-top-nav::-webkit-scrollbar { display: none; }
/* idiomas largos (alemán, francés): la columna del menú puede encoger y el menú se desliza, en vez de empujar la cuenta fuera de la pantalla */
.dv-top.con-nav { grid-template-columns: minmax(0, 1fr) auto auto; } .dv-top.con-nav > .row:first-child { min-width: 0; flex-wrap: nowrap; }
/* Lo que se recoge depende del sitio que tiene la cabecera de verdad (20/10), no del ancho de la ventana: con el tope de
   ancho, en 1789 px «Facturas» y «Conecta tu IA» quedaban tapados aunque sobraba pantalla. Todo entero pide ≈1590 px. */
.dv-top { container-type: inline-size; container-name: dvtop; }
@container dvtop (max-width: 1599px) { .dv-top-saldo > span:not(.dv-top-recargar), .dv-top-user > span:not(.dv-avatar) { display: none; } .dv-top-user { padding: 4px 10px 4px 4px; } .dv-idioma-btn .n { display: none; } .dv-idioma-btn .k { display: inline; } .dv-top-nav a { padding: 9px 12px; font-size: 14.5px; } }
@container dvtop (max-width: 1359px) { .dv-top-nav a { padding: 9px 10px; } .dv-top-nav a .ic { display: none; } }
@media (max-width: 480px) { .dv-top { gap: 8px; } .dv-logo { height: 28px; } .dv-top-recargar { display: none; } .dv-top-saldo { padding: 8px 12px; } }
.dv-pr-filtro { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.dv-pr-filtro::-webkit-scrollbar { display: none; }
.dv-pr-filtro > button { flex: none; }
/* Píldora de la cuenta: el nombre se va antes que nada; en el móvil solo el avatar (salir sigue en Mi saldo). */
@media (max-width: 560px) { .dv-top-user { padding: 3px; border: 0; } .dv-top-user .salir { display: none; } .dv-top .dv-idioma-btn { padding: 0 8px; } .dv-top .dv-idioma-btn .k { display: none; } }
@media (max-width: 380px) { .dv-top { gap: 6px; padding-left: 12px; padding-right: 12px; } .dv-logo { height: 24px; } .dv-top-saldo { padding: 7px 10px; } }
/* Móvil estrecho: el logo se veía cortado («deve…»). Las iniciales llevan al mismo sitio que el saldo (Mi saldo): se recogen y caben logo, idioma, saldo y salir */
@media (max-width: 420px) { .dv-top-user { display: none; } .dv-top > .row:last-child { gap: 8px; } }

/* Arrastrar y soltar (js/soltar.js): la zona sobre la que se van a soltar los archivos */
.dv-soltando { outline: 2px dashed var(--dv-accent); outline-offset: 4px; border-radius: var(--dv-radius); }
.dv-drop.dv-soltando { outline: none; border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-archivos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dv-archivo { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--dv-line-2); border-radius: 12px; background: var(--dv-surface, transparent); min-width: 0; }
.dv-archivo img, .dv-archivo .ico { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; }
.dv-archivo .nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--dv-ink); }
.dv-archivo .peso { flex: none; font-size: 12px; color: var(--dv-ink-2); }
.dv-archivo .quitar { flex: none; border: 0; background: transparent; color: var(--dv-ink-2); cursor: pointer; padding: 6px; border-radius: 8px; }
.dv-archivo .quitar:hover { color: var(--dv-ink); background: var(--dv-accent-soft); }
.dv-subida { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.dv-subida > .dv-drop { width: 100%; }
.dv-subida > .dv-archivos { margin-top: 0; }
.dv-archivo-grande { list-style: none; }
.dv-archivo-vista { display: block; width: 100%; height: 220px; border: 1px solid var(--dv-line-2); border-radius: 12px; background: var(--dv-surface-2); object-fit: contain; }
@media (max-width: 720px) { .dv-subida { grid-template-columns: minmax(0, 1fr); } }
.dv-archivo .ico { flex-direction: column; gap: 1px; }
.dv-archivo .ico b { font-size: 9px; font-weight: 700; letter-spacing: .03em; line-height: 1; }
.dv-archivo .ico.ext-pdf { background: #FCE8E6; color: #C5221F; }
.dv-archivo .ico.ext-hoja { background: #E6F4EA; color: #137333; }
.dv-archivo .ico.ext-doc { background: #E8F0FE; color: #1967D2; }
.dv-archivo .ico.ext-zip { background: #FEF7E0; color: #B06000; }
canvas.dv-archivo-vista { height: 220px; }

/* Parada por saldo: aviso grande, arriba y a todo lo ancho, pero sin tapar nada. */
.dv-paro { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; margin-bottom: 28px; border-radius: 16px; background: var(--dv-danger-soft); border: 1px solid var(--dv-danger); border-left-width: 6px; color: var(--dv-ink, inherit); }
.dv-paro .ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--dv-danger); color: #fff; display: grid; place-items: center; }
.dv-paro h3 { margin: 0 0 6px; font-size: 21px; color: var(--dv-danger); }
.dv-paro p { margin: 0; font-size: 15px; line-height: 1.5; }
.dv-paro .datos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; font-size: 14px; }
.dv-paro .datos > div { display: flex; flex-direction: column; gap: 2px; }
.dv-paro .datos b { font-size: 16px; }
@media (max-width: 600px) { .dv-paro { padding: 16px; gap: 12px; } .dv-paro .ico { width: 36px; height: 36px; } .dv-paro h3 { font-size: 18px; } }
.dv-paro .datos + p { margin-top: 12px; }

/* 08/10 · Vuelta a «Mis proyectos» desde un proyecto, y lo ya pasado que queda cerrado */
.dv-side-volver { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 -4px; font-size: 13px; font-weight: 600; color: var(--dv-ink-2); text-decoration: none; }
.dv-side-volver:hover { color: var(--dv-accent); text-decoration: none; }
.dv-side-volver .ic { width: 14px; height: 14px; }
.dv-migas { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: var(--dv-ink-3); min-width: 0; }
.dv-migas a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dv-accent); text-decoration: none; white-space: nowrap; }
.dv-migas a:hover { text-decoration: underline; }
.dv-migas .ic { width: 14px; height: 14px; }
.dv-migas .t { color: var(--dv-ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-migas .plat { color: var(--dv-ink-2); white-space: nowrap; }
.dv-migas a.dv-migas-cambios { margin-left: auto; }   /* volver a «Pide cambios» desde cualquier paso (Jose, 23/10/2026) */
.dv-paso.cerrado { cursor: not-allowed; }
.dv-paso.cerrado .candado { color: var(--dv-ink-3); margin-left: auto; align-self: center; }
.dv-paso.cerrado .candado .ic { width: 14px; height: 14px; }
.dv-sub.bloqueado { cursor: not-allowed; color: var(--dv-ink-3); }
.dv-sub.bloqueado:hover { background: none; }
.dv-sub.bloqueado .ic { width: 12px; height: 12px; margin-left: auto; }
.dv-pasos-paso.bloqueado { cursor: not-allowed; }
.dv-pasos-paso.bloqueado:hover .t { color: var(--dv-ink); }
.dv-opciones.fijas .dv-opcion:not(.elegida) { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.dv-opciones.fijas .dv-opcion:not(.elegida):hover { transform: none; box-shadow: none; }


/* 08/10 · Aprobar el diseño: la tienda en un MacBook (mitad izquierda) y el resto a la derecha */
.dv-aprobar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.dv-aprobar-mac { padding: 4px 5% 0; }
.dv-aprobar-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dv-aprobar-lado > .dv-card, .dv-aprobar-lado > .dv-explica { margin: 0; }
.dv-aprobar-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 1100px) { .dv-aprobar { grid-template-columns: minmax(0, 1fr); } .dv-aprobar-mac { padding: 0 6%; } }


.dv-mac { position: relative; filter: drop-shadow(0 26px 40px rgba(20, 16, 60, .20)); }
.dv-mac-pantalla { position: relative; padding: 16px 13px 13px; border-radius: 20px 20px 8px 8px; background: #121216; box-shadow: inset 0 0 0 2px #2A2A30, inset 0 0 0 4px #0A0A0D; }
.dv-mac-cam { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); background: #2E3036; box-shadow: inset 0 0 0 1.5px #1C1D22; }
.dv-mac-ventana { border-radius: 6px; overflow: hidden; background: #fff; }
.dv-mac-barra { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; height: 30px; padding: 0 10px; background: linear-gradient(#F5F5F7, #E8E8EB); border-bottom: 1px solid #D4D4D9; }
.dv-mac-barra .l { display: flex; gap: 6px; }
.dv-mac-barra .l i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.dv-mac-barra .l i:nth-child(2) { background: #FEBC2E; } .dv-mac-barra .l i:nth-child(3) { background: #28C840; }
.dv-mac-barra .url { justify-self: center; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 14px; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.06); font-size: 11.5px; color: #55555C; overflow: hidden; }
.dv-mac-barra .url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-mac-barra .url .ic { width: 11px; height: 11px; flex: none; color: #8A8A92; }
.dv-mac-web.dv-preview { aspect-ratio: 16 / 10; border: 0; border-radius: 0; }
.dv-mac-base { position: relative; height: 15px; margin: 0 -7%; border-radius: 2px 2px 16px 16px; background: linear-gradient(#E6E7EB, #C3C5CC 55%, #A9ABB3); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.dv-mac-base i { position: absolute; top: 0; left: 50%; width: 15%; height: 6px; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: linear-gradient(#B9BBC2, #D2D4D9); }


/* Pantalla completa y Compartir, debajo del MacBook */
.dv-aprobar-mac .dv-aprobar-acciones { margin: 24px 0 0; }


/* 08/10 · «Tu propuesta está lista»: propuesta a la mitad (fija al bajar) y lo demás al lado */
.dv-prop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.dv-prop-izq { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dv-prop-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dv-prop-der { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dv-prop-der > .dv-card, .dv-prop-der > .mt-16 { margin: 0; }
.dv-prop-lista { display: flex; flex-direction: column; gap: 10px; }
.dv-prop-lista > * { min-width: 0 !important; max-width: none !important; width: 100%; }
.dv-prop-lista > .dv-card.dashed { padding: 12px 16px !important; flex-direction: row !important; align-items: center; justify-content: space-between !important; }
.dv-prop-pedir { display: flex; flex-direction: column; gap: 10px; }
.dv-prop-pedir > .row { justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 1100px) { .dv-prop { grid-template-columns: minmax(0, 1fr); } .dv-prop-izq { position: static; } }
/* «Pedir cambios en grande»: la propuesta a pantalla completa y la columna de pedir cambios a la derecha (como en Shopify) */
.dv-prop .solo-grande { display: none; }
.dv-prop .solo-grande-b { display: none; } .dv-prop.grande .solo-grande-b { display: block; }
.dv-prop.grande { position: fixed; inset: 0; z-index: 50; margin: 0; padding: 16px 24px; background: var(--dv-paper); grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: stretch; }
.dv-prop.grande .solo-grande { display: inline-flex; } .dv-prop.grande .no-grande, .dv-prop.grande .dv-prop-mis { display: none; }
.dv-prop.grande .dv-prop-izq { position: static; height: calc(100vh - 32px); }
.dv-prop.grande .dv-preview { flex: 1; min-height: 0; aspect-ratio: auto; }
.dv-prop.grande .dv-prop-der { height: calc(100vh - 32px); overflow-y: auto; }
@media (max-width: 1100px) { .dv-prop.grande { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .dv-prop.grande .dv-prop-izq { height: 70vh; } .dv-prop.grande .dv-prop-der { height: auto; overflow: visible; } }

/* «¿Dudas con un cobro?» (pasos/saldo.js): abre el chat de Devellia (js/chat.js) */
button.dv-ini-persona { width: 100%; font: inherit; text-align: left; cursor: pointer; }
/* «Lo que llevas gastado»: en móvil el título cabe en una línea con cualquier periodo (si no, el gráfico salta al cambiarlo) */
@media (max-width: 760px) { .dv-sal-gasto .dv-sal-titulo:not(.sm) { font-size: 24px; text-wrap: balance; } } /* «Au cours des derniers 6 mois», «In de afgelopen 6 maanden»: se leen enteros en dos líneas en vez de cortarse */

/* Avisos (19/10): correo, notificaciones del navegador y WhatsApp en la cuenta; recomendación mientras se diseña. */
.dv-av-fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 0; border-top: 1px solid var(--dv-paper-2); border-bottom: 1px solid var(--dv-paper-2); }
.dv-av-fila .grow { flex: 1 1 calc(100% - 46px); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dv-av-fila b { font-size: 14px; } .dv-av-fila span { font-size: 13px; color: var(--dv-ink-3); line-height: 1.45; }
.dv-av-fila .dv-btn { flex: none; margin-left: 46px; }
.dv-av-fila .dv-btn.dv-btn { max-width: calc(100% - 46px); white-space: normal; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; line-height: 1.2; text-align: center; } /* «Benachrichtigungen aktivieren» pasa a dos líneas en vez de salirse */
.dv-av-ico { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--dv-accent-soft); color: var(--dv-accent); }
.dv-av-ico .ic { width: 17px; height: 17px; }
.dv-av-tel { display: flex; align-items: center; gap: 8px; } .dv-av-tel .dv-input { flex: 1; min-width: 0; }
.dv-av-verifica { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--dv-surface-2); } .dv-av-verifica p { margin: 0 0 8px; }
.dv-av-pregunta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--dv-paper-2); }
.dv-av-espera:empty { display: none; }
.dv-sal-grafica .meses span { min-width: 0; overflow: hidden; }
@media (max-width: 760px) { .dv-sal-grafica .meses.densa span { font-size: 0; } .dv-sal-grafica .meses.densa span::before { content: attr(data-c); font-size: 12px; } .dv-sal-kpi b { font-size: 24px; } }

/* Lienzo para pintar sobre la captura de la tienda (js/anotar.js · «Pide cambios en tu tienda»). */
.dv-lienzo { border: 1px solid var(--dv-line); border-radius: 14px; overflow: hidden; background: var(--dv-paper-2); }
.dv-lienzo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--dv-line); }
.dv-lienzo-box { max-height: 520px; overflow: auto; }
.dv-lienzo-c { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.dv-lienzo-color { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--dv-line); border-radius: 8px; background: #fff; cursor: pointer; }

/* Móvil estrecho: el selector de idioma se queda en la bandera para que quepa «Empieza gratis» en la cabecera pública. */
@media (max-width: 480px) { .lp-nav .dv-idioma-btn { padding: 0 8px; gap: 4px; } .lp-nav .dv-idioma-btn .k, .lp-nav .dv-idioma-btn .ic { display: none; }
  /* idiomas largos (Starte kostenlos, Commencez gratuitement…): el botón pasa a dos líneas en vez de salirse de la pantalla */
  .lp-nav > .row { min-width: 0; justify-content: flex-end; } .lp-nav .dv-btn { height: auto; min-height: 38px; padding: 4px 12px; white-space: normal; line-height: 1.15; text-align: center; max-width: 124px; } .lp-entrar { line-height: 1.15; text-align: center; } }

/* Móvil: nada se sale por la derecha (e2e 19/10). Las columnas de rejilla pueden encoger por debajo de su contenido
   (la tarjeta «Vamos por aquí» de la propuesta), los botones de cabecera bajan de línea (Mi saldo) y los filtros
   en píldora se desplazan dentro de su caja (Facturas, Mis proyectos). */
.dv-grid-2 > * { min-width: 0; }
@media (max-width: 760px) {
  .dv-ini-head > .row { flex-wrap: wrap; }
  .dv-pr-filtro { flex: 0 1 auto; min-width: 0; }
  .row.between:has(> .dv-pr-filtro) { flex-wrap: wrap; gap: 8px; }
  .dv-sal-movs .row, .dv-col-estira > .row { flex-wrap: wrap; gap: 8px; }
}

/* Móvil (20/10): una fila «título + botón o etiqueta» baja lo de la derecha a la línea de abajo en vez de estrujar el título
   en una columna de una palabra o empujar la página hacia fuera («Busca su dominio», los botones de «A medida»). */
@media (max-width: 560px) { .dv-work .row.between, .dv-work .row.between > .row { flex-wrap: wrap; } }
@media (max-width: 560px) { .dv-presu .cifra { font-size: clamp(34px, 10.5vw, 52px); } .dv-presu .cifra.larga { font-size: clamp(28px, 8vw, 36px); } } /* «desde 180 €» en una línea */
/* Movimientos de Mi saldo (20/10): el concepto se lee en hasta dos líneas («Revisión contra tu diseño», «Cambio grande en la
   tienda») en vez de cortarse en «Revisión…»; en el móvil la fecha y el importe ocupan lo justo. */
.dv-sal-fila .que .txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.dv-sal-fila .que .txt { overflow-wrap: anywhere; } /* «Maßgeschneidert: …» ya no empuja la fila fuera en el móvil */
@media (max-width: 760px) { .dv-sal-kpi b { white-space: normal; overflow: visible; overflow-wrap: anywhere; } } /* «Montage», «Montaggio», «Montagem» enteros en su tarjeta */
@media (max-width: 480px) { .dv-sal-fila { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 8px; } .dv-sal-fila.cab { letter-spacing: .04em; } .dv-sal-fila .que { gap: 8px; } .dv-sal-fila .que .ico { width: 24px; height: 24px; border-radius: 8px; } }
/* Elegir estilo en el móvil: dos por fila, no tres columnas de una palabra */
@media (max-width: 560px) { .dv-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Web pública entre 1000 y 1240 px (20/10): el menú ya no parte «Dominios y hosting» en dos líneas ni empuja «Empieza gratis»
   fuera de la pantalla (se recoge como en la tableta), y el pie pone los enlaces debajo del logo en vez de en columnas de una palabra. */
.lp-links a, .lp-pie-links a { white-space: nowrap; }
@media (max-width: 1240px) { .lp-nav { grid-template-columns: auto minmax(0, 1fr); } .lp-links { display: none; } .lp-nav > .row:last-child { justify-self: end; }
  .lp-pie { grid-template-columns: minmax(0, 1fr); gap: 20px; } .lp-pie-links { flex-wrap: wrap; gap: 12px 20px; } }
/* Tableta y móvil (20/10): el menú de arriba no desaparece (no había otra forma de llegar a Dominios, Facturas o Conecta tu IA);
   baja a una segunda fila que se desliza de lado si no cabe (regla única más abajo, en «@container dvtop (max-width: 1250px)»). */
/* Móvil (20/10): una fila con varios botones al final (revisión del montaje: «Corregir · ≈ 0,30 €» y «Así está bien») baja los
   botones debajo del texto; antes el texto quedaba en una columna de una letra. */
@media (max-width: 560px) { .dv-item:has(> .row > .dv-btn) { flex-wrap: wrap; } .dv-item:has(> .row > .dv-btn) > .t { flex: 1 1 0; min-width: 0; } .dv-item:has(> .row > .dv-btn) > .row { flex: 1 1 100%; flex-wrap: wrap; } }
/* Tarjetas de apoyo estrechas (Mis proyectos en tableta, precios en el móvil): las cifras y opciones bajan de línea en vez de salirse */
.dv-ini-lado .row { flex-wrap: wrap; } .lp-recarga > .row { flex-wrap: wrap; }
/* Idiomas largos (20/10): «Mit dem Schritt weitermachen 2», «Benachrichtigungen aktivieren»… En el móvil un botón nunca es más
   ancho que su sitio: pasa a dos líneas en vez de salirse de la tarjeta. Los nombres de los pasos de cada tarjeta se leen enteros
   («Veröffentlichen» en vez de «Veröffentl…»): usan algo del hueco del vecino y, si aun así no caben, bajan de línea entre palabras. */
@media (max-width: 560px) { .dv-work .dv-btn { max-width: 100%; height: auto; min-height: 36px; white-space: normal; line-height: 1.2; text-align: center; padding-top: 8px; padding-bottom: 8px; } .dv-work .dv-btn.lg { min-height: 52px; } .dv-work .dv-btn:not(.sm):not(.lg) { min-height: 44px; } }
.dv-ini-mini .t { white-space: normal; overflow: visible; text-overflow: clip; width: max-content; max-width: calc(100% + 18px); }
.dv-prop-barra > .row { flex-wrap: wrap; min-width: 0; }
/* …y el primero y el último no se salen de la tarjeta: si su nombre es más ancho que su columna, se corre hacia dentro lo justo */
.dv-ini-mini li { container-type: inline-size; }
.dv-ini-mini li:first-child .t { translate: max(0px, calc((100% - 100cqw) / 2)); }
.dv-ini-mini li:last-child .t { translate: min(0px, calc((100cqw - 100%) / 2)); }

/* 20/10 · Cerrar sesión en la cabecera del área de cliente */
.dv-top-salir { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--dv-radius-pill); border: 1px solid var(--dv-line); background: var(--dv-surface); color: var(--dv-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.dv-top-salir:hover { color: #C0352B; border-color: currentColor; background: #FFF5F4; text-decoration: none; }
.dv-top-salir .ic { width: 16px; height: 16px; }
/* Solo con mucho sitio lleva el texto; si no, el icono (con su título). Lo que ocupa se descuenta del menú. */
@container dvtop (max-width: 1999px) { .dv-top-saldo > span:not(.dv-top-recargar), .dv-top-user > span:not(.dv-avatar) { display: none; } .dv-top-user { padding: 4px; } }
@container dvtop (max-width: 1449px) { .dv-top-salir { padding: 0 11px; } .dv-top-salir span { display: none; } }
@container dvtop (max-width: 1699px) { .dv-top-nav a { padding: 9px 10px; } .dv-top-nav a .ic { display: none; } }
@media (max-width: 560px) { .dv-top-salir { height: 34px; padding: 0 9px; } }
/* Con «Cerrar sesión» en la cabecera, entre ~1100 y ~1300 px el menú ya no cabe en la misma fila: baja a la segunda,
   igual que en tableta y móvil (lo de arriba, con @media; esto, por el sitio que tiene de verdad la cabecera). */
@container dvtop (max-width: 1250px) {
  .dv-top.con-nav > .row:first-child { display: contents; }
  .dv-top.con-nav .dv-top-nav { display: flex; grid-row: 2; grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; max-width: none; margin: 0 -16px -12px; padding: 4px 12px 8px; border-top: 1px solid var(--dv-line); }
  .dv-top.con-nav .dv-top-nav a { padding: 7px 12px; font-size: 14px; }
}
/* …de borde a borde: el menú sale lo mismo que el relleno de la cabecera (12 px en ≤ 380 px; con −16 px la página bailaba 4 px de lado) */
@media (max-width: 380px) { .dv-top.con-nav .dv-top-nav { margin-left: -12px; margin-right: -12px; } }

/* 21/10 · Pantallas táctiles: todo lo que se pulsa mide al menos 44 px (botones pequeños, chips, filtros, selector de periodo,
   idioma, cabecera, cerrar diálogos, flechas del carrusel, enlaces del pie). En escritorio con ratón todo sigue igual. */
@media (pointer: coarse), (max-width: 900px) {
  .dv-btn.sm, .dv-chip, .dv-chip.sm, .dv-sal-chip, .dv-sal-cat, .lp-toggle button, .dv-seg button, .dv-sal-seg button,
  .dv-top-saldo, .dv-top-salir, .dv-pr-band .nuevo, .lp-nav .dv-btn { min-height: 44px; }
  .dv-sal-chip, .lp-toggle button { display: inline-flex; align-items: center; justify-content: center; }
  .dv-btn.icono { width: 44px; height: 44px; min-width: 44px; }
  .dv-idioma-btn, .dv-top-salir { height: 44px; min-width: 44px; justify-content: center; }
  .dv-top-nav a { min-height: 44px; }
  .dv-dlg .cerrar { width: 44px; height: 44px; top: 14px; right: 14px; }
  .dv-mi-flecha { width: 44px; height: 44px; flex: none; }
  .dv-pr-filtro button { min-height: 44px; }
  .dv-card > a.bold, .lp3-dom .dv-link-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .dv-side-link, .dv-check { min-height: 44px; }
  .lp-entrar, .dv-pr-servicio, .dv-card > .row.between > a.bold { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-pie-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-pie-links { row-gap: 0; }
  /* el logo de arriba: la zona que se pulsa crece sin mover el dibujo */
  .dv-logo { position: relative; } .dv-logo::after { content: ''; position: absolute; inset: -10px -4px; }
}
/* 21/10 · Mismo foco de teclado y mismo «apagado» en todo lo que se pulsa (había chips, filtros y enlaces sin foco visible) */
:is(a, button, select, summary, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
button:disabled:not(.dv-btn) { opacity: .55; cursor: default; }
/* Diálogos en el móvil: menos relleno y la «×» siempre a la vista arriba aunque el contenido sea largo */
@media (max-width: 560px) { dialog.dv-dlg { padding: 56px 20px 20px; width: calc(100vw - 24px); max-width: none; }
  dialog.dv-dlg .cerrar { position: sticky; top: -48px; right: auto; z-index: 1; display: grid; margin: -48px -8px 4px auto; }
  .dv-dlg .row.right { flex-wrap: wrap-reverse; } .dv-dlg .row.right > .dv-btn { flex: 1 1 100%; } }

/* Pasos y enlaces del lateral que aún no tocan (Jose, 21/10/2026): apagados, con candado; al pulsarlos sale el motivo. */
.dv-paso.cerrado, .dv-side-link.cerrado, .dv-pasos-paso.bloqueado { opacity: .55; cursor: not-allowed; }
.dv-side-link.cerrado:hover { background: none; }
.dv-side-link.destacado { background: var(--dv-accent-soft); color: var(--dv-accent-ink); box-shadow: inset 0 0 0 2px var(--dv-accent); } .dv-side-link.destacado > .ic { color: var(--dv-accent); }
.dv-side-link.cerrado .candado { margin-left: auto; align-self: center; color: var(--dv-ink-3); }
.dv-side-link.cerrado .candado .ic { width: 14px; height: 14px; }
/* Trabajo parado por saldo (23/10/2026): píldora junto al saldo de la cabecera y en la barra lateral. */
.dv-top-pausa { display: inline-flex; align-items: center; gap: 8px; background: var(--dv-warn-soft); color: var(--dv-warn); border-radius: var(--dv-radius-pill); padding: 8px 8px 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.dv-top-pausa b { background: var(--dv-warn); color: #fff; padding: 5px 12px; border-radius: var(--dv-radius-pill); }
.dv-side .dv-top-pausa { margin: 8px 0; justify-content: space-between; }
@media (max-width: 760px) { .dv-top .dv-top-pausa > span { display: none; } }
.dv-top-pausa-caja { display: inline-flex; align-items: center; gap: 2px; }
.dv-top-pausa-x { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--dv-warn); cursor: pointer; }
.dv-top-pausa-x:hover { background: var(--dv-warn-soft); }

/* ---------- Pide cambios · la captura en grande (Jose, 23/10/2026: en la columna se quedaba diminuta) ---------- */
dialog.dv-dlg.dv-dlg-captura { width: min(1440px, 96vw); height: 94vh; max-height: none; max-width: none; padding: 24px 28px; }
.dv-dlg-captura > .dv-cap { height: 100%; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.dv-cap-head { padding-right: 56px; }
.dv-cap-head h2 { margin: 0 0 4px; }
.dv-cap-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
.dv-cap-zona { min-height: 0; overflow: auto; border-radius: var(--dv-radius-sm); background: var(--dv-paper-2); }
.dv-cap-zona > .vacio { height: 100%; min-height: 240px; display: grid; place-items: center; }
.dv-cap-zona .dv-lienzo { border: 0; border-radius: 0; min-height: 100%; }
.dv-cap-zona .dv-lienzo-tools { position: sticky; top: 0; z-index: 1; }
.dv-cap-zona .dv-lienzo-box { max-height: none; overflow: visible; }
.dv-cap-zona.movil .dv-lienzo-c { max-width: 390px; margin: 0 auto; }
.dv-cap-lado { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 2px 2px 2px 0; }
.dv-cap-lado > .dv-btn.block { margin-top: auto; }
.dv-cap-cuenta { background: var(--dv-surface-2); border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); padding: 14px 16px; }
.dv-cap-mini { display: block; width: 100%; max-height: 180px; overflow: hidden; padding: 0; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-paper-2); cursor: zoom-in; }
.dv-cap-mini img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  dialog.dv-dlg.dv-dlg-captura { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 56px 16px 16px; }
  .dv-dlg-captura > .dv-cap { height: auto; min-height: 100%; }
  .dv-cap-head { padding-right: 0; }
  .dv-cap-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dv-cap-zona { max-height: 62dvh; }
  .dv-cap-lado { overflow: visible; }
}

/* ---------- Lo que has ido pidiendo: en curso, fotos de antes y después y comparador (Jose, 23/10/2026) ---------- */
.dv-cambio { align-items: flex-start; }
/* El módulo propio / el plugin del sitio que ha creado un cambio (orden 2255) */
.dv-cambio:has(.dv-modulo) { flex-wrap: wrap; }
.dv-modulo { order: 9; flex-basis: 100%; margin-top: 0; padding: 10px 12px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-ink, inherit); font-size: 13px; line-height: 1.45; }
.dv-modulo .b { font-weight: 700; }
.dv-modulo .f { margin-top: 6px; }
.dv-modulo .s { color: var(--dv-muted, #5b5870); }
.dv-modulo a.s { display: inline-block; margin-top: 6px; color: var(--dv-accent); font-weight: 600; }
.dv-cambio .t .s.clamp2 { margin-top: 2px; }
.dv-cambio-ico { width: 56px; height: 56px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; flex: none; }
.dv-cambio-ico .dv-spin { width: 22px; height: 22px; border-width: 2px; }
.dv-cambio-fotos { display: flex; gap: 6px; flex: none; }
.dv-cambio-mini { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.dv-cambio-mini img { width: 64px; height: 48px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--dv-line); background: var(--dv-paper-2); display: block; }
.dv-cambio-mini span { font-size: 11px; color: var(--dv-ink-3); text-align: center; }
.dv-cambio-mini:hover img { border-color: var(--dv-accent); }
.dv-cambio-acc { flex: none; margin-left: auto; }
.dv-cambio-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.dv-cambio-pie .r { font-size: 14px; color: var(--dv-ink-2); white-space: nowrap; }
.dv-cambio-curso { background: var(--dv-accent-soft); border-radius: var(--dv-radius-sm); padding: 16px; border-bottom: 0; margin-bottom: 8px; }
.dv-cambio-pasos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--dv-ink-3); }
.dv-cambio-pasos li { display: inline-flex; align-items: center; gap: 6px; }
.dv-cambio-pasos li i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); }
.dv-cambio-pasos li.hecho { color: var(--dv-ok); } .dv-cambio-pasos li.hecho .ic { width: 14px; height: 14px; }
.dv-cambio-pasos li.ahora { color: var(--dv-accent-ink); font-weight: 600; }
.dv-cambio-pasos .dv-spin { width: 14px; height: 14px; border-width: 2px; }
@media (max-width: 560px) { .dv-cambio { flex-wrap: wrap; } .dv-cambio > .t { flex: 1 1 100%; } .dv-cambio-ico { width: 44px; height: 44px; } }
.dv-hecho { border: 2px solid var(--dv-ok); }
.dv-hecho h3 { margin: 0; }
.dv-hecho-ok { width: 40px; height: 40px; border-radius: 50%; background: var(--dv-ok); color: #fff; display: grid; place-items: center; flex: none; }
.dv-hecho-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dv-hecho-foto { position: relative; padding: 0; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); overflow: hidden; background: var(--dv-paper-2); cursor: zoom-in; }
.dv-hecho-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.dv-hecho-foto span { position: absolute; left: 10px; top: 10px; background: var(--dv-dark); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--dv-radius-pill); }
dialog.dv-dlg.dv-dlg-cmp .dv-cap { gap: 14px; }
.dv-cmp-caja { flex: 1; min-height: 0; overflow: auto; border-radius: var(--dv-radius-sm); background: var(--dv-paper-2); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 12px; }
.dv-cmp { position: relative; width: 100%; line-height: 0; user-select: none; }
.dv-cmp.movil { max-width: 390px; }
.dv-cmp > img, .dv-cmp-antes img { display: block; width: 100%; height: auto; }
.dv-cmp-antes { position: absolute; inset: 0; overflow: hidden; }
.dv-cmp-linea { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(17,17,20,.25); pointer-events: none; }
.dv-cmp-et { position: absolute; top: 10px; line-height: 1.4; background: var(--dv-dark); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--dv-radius-pill); }
.dv-cmp-et.a { left: 10px; } .dv-cmp-et.d { right: 10px; }
.dv-cmp-rango { position: sticky; bottom: 8px; width: min(520px, 90%); accent-color: var(--dv-accent); background: #fff; border-radius: var(--dv-radius-pill); padding: 8px 14px; box-shadow: var(--dv-shadow); box-sizing: border-box; }
.dv-cmp-sola { width: 100%; text-align: center; padding: 12px; } .dv-cmp-sola img { max-width: 100%; height: auto; border-radius: 8px; }
.dv-cambios-tit { margin: 0; font-size: 18px; }   /* «Lo que has ido pidiendo», encima del historial en «Cambia tu tienda» */
.dv-tienda-btn .dv-btn { white-space: normal; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; text-align: center; line-height: 1.3; }   /* el texto largo baja de línea en la columna estrecha */

/* Claves de conexión en «Tus datos» (23/10/2026): tapadas sin ser type=password, con un ojo para verlas; la guardada, «••••1234». */
.dv-clave-campo { position: relative; display: flex; } .dv-clave-campo .dv-input { flex: 1; padding-right: 44px; }
.dv-input.dv-tapada { -webkit-text-security: disc; text-security: disc; }
.dv-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; color: var(--dv-ink-2); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.dv-ojo:hover { background: var(--dv-line); color: var(--dv-ink); }
.dv-clave-guardada { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--dv-line); border-radius: 10px; font-size: 15px; }

/* «Esto es lo que tienes» (23/10/2026): el resumen en pocas líneas y la lista plegada de una pregunta. */
.dv-resumen { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.45; }
/* En rejilla y no en «columns»: con columnas y altura fija, lo que no cabía se iba a columnas ocultas a la derecha y solo se veían ~20 de los 300 (Jose, 26/10/2026). */
.dv-lista-plegada summary { cursor: pointer; color: var(--dv-accent-ink); font-weight: 600; }
.dv-lista-plegada ul { max-height: 220px; overflow-y: auto; margin: 8px 0 0; padding-left: 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
@media (max-width: 560px) { .dv-lista-plegada ul { grid-template-columns: 1fr; } }
/* El título de una opción no se mete debajo del círculo cuando es largo (preguntas de «Tus datos», 23/10/2026). */
.dv-opcion .t { padding-right: 28px; }
.dv-check-cero { opacity: .55; } .dv-check-cero .s { font-style: italic; }
.dv-lista-plegada.dv-sub { margin: 6px 0 0 34px; }
.dv-check .dv-num { margin-left: 8px; font-weight: 600; color: var(--dv-ink-2); }
/* «Revisa la muestra» (23/10/2026): logos en las cabeceras, enlaces a los dos lados y «Esto está mal» aparte. */
.dv-th-logo { display: inline-flex; align-items: center; gap: 8px; }
.dv-enlaces-muestra { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; }
.dv-btn.dv-mal { border-color: var(--dv-warn); color: var(--dv-warn); background: var(--dv-warn-soft); }
.dv-btn.dv-mal:hover { filter: brightness(.97); }
/* Contraseña de la tienda en «Revisa la muestra», a la derecha y en grande (Jose, 26/10/2026). */
.dv-card-clave { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.dv-clave-tienda:empty { display: none; }
.dv-clave-tienda { background: var(--dv-accent-soft, #f1ecff); border-radius: 14px; padding: 16px 20px; max-width: 460px; }
.dv-clave-valor { font: 600 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--dv-ink, #111); user-select: all; }

/* «Tus datos» → PrestaShop: la configuración de la tienda (lo que se trae, lo que no y lo que hay que decidir) */
.dv-cfg { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.dv-cfg-li { display: flex; gap: 10px; align-items: flex-start; }
.dv-cfg-li > .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }
.dv-cfg-li ul { padding-left: 18px; }
.dv-cfg-bloque { padding: 12px 14px; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-sm); }
.dv-cfg-bloque > .dv-check > .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--dv-ink-2); }
.dv-cfg-bloque.off { background: var(--dv-surface-2); } .dv-cfg-bloque.off .s > div > span:first-child { text-decoration: line-through; }
.dv-cfg-quitado { color: var(--dv-warn); margin-top: 2px; }
.dv-cfg-dec > p { margin: 0 0 8px; }
.dv-cfg-det { margin-top: 6px; } .dv-cfg-det summary { cursor: pointer; color: var(--dv-accent-ink); font-weight: 600; }
.dv-cfg-det .dv-cfg { font-size: 14px; color: var(--dv-ink); }
.dv-cfg-no ul.dv-cfg { display: flex; max-height: none; padding-left: 0; }
.dv-cfg-mods { max-height: 460px; overflow: auto; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); }
.dv-cfg-tabla { font-size: 14px; } .dv-cfg-tabla td { padding: 8px 12px; } .dv-cfg-tabla th { position: sticky; top: 0; background: var(--dv-surface); }
.dv-cfg-tabla .dv-pill { white-space: normal; height: auto; min-height: 24px; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; border-radius: 10px; }
.dv-cfg-seg { flex-wrap: wrap; border-radius: var(--dv-radius-sm); } .dv-cfg-seg button { height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
/* «Qué hacemos» de la tabla de módulos: los botones se apilan si no caben, nunca se cortan */
.dv-cfg-tabla { width: 100%; } .dv-cfg-tabla td:last-child { min-width: 220px; width: 360px; } .dv-cfg-tabla .dv-cfg-seg { display: flex; max-width: 100%; }
.dv-cfg-tabla .dv-cfg-seg button { white-space: nowrap; height: auto; min-height: 32px; padding: 4px 12px; line-height: 1.2; text-align: left; }
@media (max-width: 900px) { .dv-cfg-tabla .dv-cfg-seg { flex-direction: column; align-items: stretch; } .dv-cfg-tabla .dv-cfg-seg button { white-space: normal; } .dv-cfg-tabla td:last-child { width: auto; min-width: 0; } }
.dv-cfg-ops { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.dv-cfg-sel { height: 38px; font-size: 14px; padding: 0 8px; width: 100%; min-width: 150px; }
.dv-cfg-dec .dv-opcion.compacta { padding: 12px 14px; } .dv-cfg-dec .dv-opcion .t { font-size: 15px; }
@media (max-width: 560px) { .dv-cfg-tabla thead { display: none; } .dv-cfg-tabla tr { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--dv-line); } .dv-cfg-tabla td { padding: 0; border: 0; } .dv-cfg-sel { width: 100%; } .dv-cfg-tabla tr { grid-template-columns: minmax(0, 1fr); } .dv-cfg-tabla .dv-pill { white-space: normal; } }

/* Gestión del alojamiento (G01–G07, Fernando 27/10/2026): las secciones, como pestañas que se desplazan en el móvil */
.dv-gest-nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--dv-line); scrollbar-width: none; }
.dv-gest-nav a { flex: none; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--dv-ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; }
.dv-gest-nav a:hover { color: var(--dv-ink); }
.dv-gest-nav a.on { color: var(--dv-accent-ink); border-bottom-color: var(--dv-accent); }
/* Fichas de gestión con el diseño de Fernando (mockup G00–G33, Jose 03/11/2026): ruta, cabecera en tarjeta, pestañas con
   icono, barras de uso, títulos de tarjeta y atajos (js/ficha-ui.js). */
.dv-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--dv-ink-2); margin-bottom: 16px; }
.dv-migas a { color: var(--dv-ink-2); text-decoration: none; } .dv-migas a:hover { color: var(--dv-ink); text-decoration: underline; }
.dv-migas b { color: var(--dv-ink); overflow-wrap: anywhere; } .dv-migas .ic { width: 14px; height: 14px; color: var(--dv-ink-3); }
.dv-ficha-cab { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 28px; }
.dv-ficha-ico { flex: none; width: 60px; height: 60px; border-radius: 16px; background: var(--dv-accent-soft); color: var(--dv-accent); display: flex; align-items: center; justify-content: center; }
.dv-ficha-ico .ic { width: 26px; height: 26px; }
.dv-ficha-tit { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dv-ficha-tit h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.dv-ficha-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14.5px; color: var(--dv-ink-2); }
.dv-ficha-tit, .dv-ficha-sub { min-width: 0; max-width: 100%; }
.dv-ficha-sub > span { min-width: 0; flex: 1 1 180px; white-space: normal; overflow-wrap: anywhere; }
.dv-ficha-tit { max-width: 100%; }
.dv-ficha-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.dv-gest-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 11px; font-size: 14px; }
.dv-gest-nav a .ic { width: 16px; height: 16px; opacity: .75; } .dv-gest-nav a.on .ic { opacity: 1; }
.dv-gest-nav a.on { font-weight: 700; }
.dv-uso { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.dv-uso b { font-weight: 700; white-space: nowrap; }
.dv-uso-barra { height: 8px; border-radius: 999px; background: var(--dv-paper-2); overflow: hidden; }
.dv-uso-barra i { display: block; height: 100%; border-radius: inherit; background: var(--dv-accent); min-width: 6px; }
.dv-uso-barra i.ojo { background: #D98A00; } .dv-uso-barra i.mal { background: var(--dv-danger); }
.dv-uso-barra i.lima { background: #9BC53D; } .dv-uso-barra i.bien { background: var(--dv-ok); } .dv-uso-barra i.suave { background: #C9C2FF; }
.dv-usos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.dv-card-tit { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dv-card-tit h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.dv-gest section.dv-card > b.fs-18:first-child, .dv-gest section.dv-card > b.fs-16:first-child,
.dv-gest section.dv-card > .row.between:first-child > b, .dv-gest aside .dv-card > b.fs-16:first-child { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.dv-gest section > b.fs-18:first-child { font-size: 19px; }
.dv-gest .dv-card > .row:first-child > .row > b.fs-18, .dv-gest .dv-card > summary > .row > b.fs-18,
.dv-gest .dv-card > .row:first-child > b.fs-16, .dv-gest .dv-card > .row:first-child > .row > b.fs-16, .dv-gest .dv-card > .row:first-child > b.fs-18 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.dv-atajo { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px; }
.dv-atajo .dv-atajo-ir { position: absolute; top: 16px; right: 14px; color: var(--dv-ink-3); }
.dv-atajo .dv-atajo-txt b, .dv-atajo .dv-atajo-txt span { overflow-wrap: break-word; }
.dv-atajo > .dv-atajo-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-accent); display: flex; align-items: center; justify-content: center; }
.dv-atajo > .dv-atajo-ico .ic { width: 19px; height: 19px; }
.dv-atajo:disabled > .dv-atajo-ico { background: var(--dv-paper-2); color: var(--dv-ink-3); }
.dv-atajo .dv-atajo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* G01 · resumen tal cual el mockup */
.dv-card-h { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.dv-uso-cifra { white-space: nowrap; } .dv-uso-cifra b { font-weight: 700; } .dv-uso-de { color: var(--dv-ink-2); font-weight: 400; }
.dv-atajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
button.dv-atajo { padding: 16px; border: 1px solid var(--dv-line); border-radius: 16px; background: var(--dv-surface); font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.dv-atajo:hover:not(:disabled) { border-color: var(--dv-line-2); box-shadow: var(--dv-shadow); }
button.dv-atajo:disabled { cursor: default; opacity: .75; }
.dv-atajo .dv-atajo-txt b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.dv-atajo .dv-atajo-txt > span { font-size: 13px; color: var(--dv-ink-2); }
.dv-plan-n { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.nowrap { white-space: nowrap; }
.dv-btn-linea { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 18px; border: 1px solid var(--dv-line-2); border-radius: 999px; background: var(--dv-surface); font: inherit; font-size: 15px; font-weight: 700; color: var(--dv-ink); cursor: pointer; }
.dv-btn-linea:hover { border-color: var(--dv-ink); }
.dv-gest .dv-fila .v .dv-pill { font-size: 12.5px; }
@media (max-width: 1100px) { .dv-atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dv-atajos { grid-template-columns: minmax(0, 1fr); } }
.dv-gt { display: flex; flex-direction: column; font-size: 14.5px; }
.dv-gt-cab, .dv-gt-fila { display: grid; gap: 14px; align-items: center; }
.dv-gt-cab { padding: 0 4px 10px; border-bottom: 1px solid var(--dv-line); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dv-ink-3); }
.dv-gt-fila { padding: 14px 4px; border-bottom: 1px solid var(--dv-line); min-height: 40px; }
.dv-gt-fila:last-child { border-bottom: 0; padding-bottom: 4px; }
.dv-gt-fila > span { min-width: 0; overflow-wrap: anywhere; }
.dv-gt-fila > span.acc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) {
  .dv-gt-cab { display: none; }
  .dv-gt-fila { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .dv-gt-fila > span[data-t]:not(:first-child)::before { content: attr(data-t) ' · '; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-ink-3); }
  .dv-gt-fila > span.acc { justify-content: flex-start; }
}
.dv-gest-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dv-gest-ancho { grid-column: 1 / -1; }
.dv-gest-ancho > .col { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 900px) { .dv-gest-rejilla, .dv-gest-ancho > .col { grid-template-columns: minmax(0, 1fr); } }
.dv-tabla-tit { display: flex; gap: 12px; padding: 0 0 8px; border-bottom: 1px solid var(--dv-line); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dv-ink-3); }
@media (max-width: 760px) {
  .dv-ficha-cab { padding: 20px; gap: 14px; } .dv-ficha-tit { flex-basis: 100%; } .dv-ficha-ico { width: 48px; height: 48px; } .dv-ficha-tit h1 { font-size: 26px; }
  .dv-ficha-acc { margin-left: 0; width: 100%; } .dv-usos { grid-template-columns: minmax(0, 1fr); }
}

/* Paso extra «Módulos para PrestaShop 9.2» (pasos/modulos-ps9.js, orden 2078): sin número, con el círculo discontinuo */
.dv-paso.extra .num, .dv-pasos-paso.extra .c { border-style: dashed; }
.dv-mods-ps9 { max-height: none; }
.dv-mods-ps9 .dv-cfg-tabla td { vertical-align: top; padding: 12px; }
.dv-mods-ps9 .dv-cfg-tabla td:last-child { width: 380px; }
.dv-mods-ps9 .dv-check { margin: 0; }
.dv-mods-total { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dv-mods-pronto { margin-left: 10px; padding: 2px 8px; border-radius: var(--dv-radius-pill); background: var(--dv-paper-2); color: var(--dv-ink-2); font-size: 12px; font-weight: 700; }

/* Captcha del alta y de los correos de entrar (js/captcha.js) */
.dv-captcha { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dv-ink-2); }
.dv-captcha .ic { width: 16px; height: 16px; flex: none; }
.dv-captcha[data-estado="ok"] { color: var(--dv-ok); }
.dv-captcha[data-estado="mal"] { color: var(--dv-danger); }
/* «Revisa tu correo» y «Cuenta confirmada» */
.dv-sobre { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--dv-accent-soft); color: var(--dv-accent-ink); }
.dv-sobre.ok { background: var(--dv-ok-soft); color: var(--dv-ok); }
.dv-sobre .ic { width: 28px; height: 28px; }
/* Comprar un dominio (diseños de Fernando G30–G33 · P02 · P05 · P06 · P09 · P11, 29/10/2026; js/pasos/dominio.js) */
.dv-dom-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.dv-dom-migas { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dv-ink-2); }
.dv-dom-migas a { color: var(--dv-ink-2); } .dv-dom-migas b { color: var(--dv-ink); }
a.dv-dom-migas { font-weight: 600; color: var(--dv-ink); }
.dv-dlg .dv-pill, .dv-dom-top .dv-pill { white-space: nowrap; flex: none; }
.dv-dom-seguro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dv-ink-3); }
.dv-dom-pasos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-dom-pasos li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dv-ink-3); }
.dv-dom-pasos li + li::before { content: ''; width: 28px; height: 1.5px; background: var(--dv-line-2); margin-right: 2px; }
.dv-dom-pasos li.hecho + li::before { background: var(--dv-ok); }
.dv-dom-pasos .c { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--dv-line-2); background: var(--dv-surface); }
.dv-dom-pasos li.hecho .c { background: var(--dv-ok); border-color: var(--dv-ok); color: #fff; }
.dv-dom-pasos li.on { color: var(--dv-ink); font-weight: 700; } .dv-dom-pasos li.on .c { background: var(--dv-accent); border-color: var(--dv-accent); color: #fff; box-shadow: 0 0 0 4px var(--dv-accent-soft); }
.dv-dom-h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; margin: 0; overflow-wrap: anywhere; }
.dv-dom-sub { max-width: 720px; margin: 0; }
.dv-dom-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.dv-dom-lado { position: sticky; top: 24px; }
.dv-dom-buscar { padding: 6px 6px 6px 18px; }
.dv-dom-nombre { font-weight: 700; overflow-wrap: anywhere; } .dv-dom-nombre .ext { color: var(--dv-accent); }
.dv-dom-grande { font-family: var(--dv-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dv-dom-exts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dv-dom-ext { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); cursor: pointer; flex-wrap: wrap; }
.dv-dom-ext:has(input:checked) { border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-dom-ext input { accent-color: var(--dv-accent); width: 18px; height: 18px; margin: 0; }
.dv-dom-ext span { margin-left: auto; }
.dv-dom-consejos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dv-dom-consejo { display: flex; gap: 12px; align-items: flex-start; } .dv-dom-consejo p { margin: 2px 0 0; }
.dv-dom-consejo .ico, .dv-dom-linea .ico, .dv-dom-aloja .ico, .dv-dom-tienda .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--dv-accent-soft); color: var(--dv-accent); display: grid; place-items: center; flex: none; }
.dv-dom-destacado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 28px; border-radius: var(--dv-radius); background: var(--dv-surface); border: 2px solid var(--dv-line); }
.dv-dom-destacado.libre { border-color: var(--dv-ok); }
.dv-dom-destacado .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--dv-ok-soft); color: var(--dv-ok); }
.dv-dom-destacado.ocupado .ico { background: var(--dv-paper-2); color: var(--dv-ink-3); }
.dv-dom-destacado p { margin: 0; }
.dv-dom-pr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.dv-dom-pr b { font-family: var(--dv-display); font-size: 20px; font-weight: 800; } .dv-dom-pr span { font-size: 12px; color: var(--dv-ink-3); }
.dv-dom-pr.lg b { font-size: 32px; } .dv-dom-pr.lg span { font-size: 13px; }
.dv-dom-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 20px; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); }
.dv-dom-fila.en { background: var(--dv-accent-soft); border-color: color-mix(in srgb, var(--dv-accent) 30%, transparent); }
.dv-dom-fila.ocupado { grid-template-columns: minmax(0, 1fr) auto; } .dv-dom-fila.ocupado .dv-dom-nombre { color: var(--dv-ink-3); } .dv-dom-fila.ocupado .dv-dom-nombre .ext { color: inherit; }
.dv-dom-anadido { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--dv-radius-pill); background: var(--dv-ok-soft); color: var(--dv-ok); font-weight: 700; font-size: 14px; white-space: nowrap; }
.dv-dom-anadido.lg { padding: 12px 20px; font-size: 15px; }
.dv-dom-renov { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: var(--dv-radius-sm); background: var(--dv-surface-2); }
.dv-dom-ir { cursor: pointer; } .dv-dom-ir:hover { border-color: var(--dv-line-2); } .dv-dom-ir:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }
.dv-dom-sw { width: 46px; height: 28px; border-radius: var(--dv-radius-pill); border: 0; background: var(--dv-line-2); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.dv-dom-sw::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.dv-dom-sw[aria-checked="true"] { background: var(--dv-accent); } .dv-dom-sw[aria-checked="true"]::after { transform: translateX(18px); }
.dv-dom-linea { display: grid; grid-template-columns: auto minmax(0, 1fr) 130px auto auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--dv-line); }
.dv-dom-linea-pr { white-space: nowrap; text-align: right; font-size: 16px; }
.dv-dom-anos { height: 40px; padding: 0 10px; }
.dv-dom-quitar { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--dv-line); background: var(--dv-surface); color: var(--dv-ink-2); display: grid; place-items: center; cursor: pointer; }
.dv-dom-quitar:hover { border-color: var(--dv-danger); color: var(--dv-danger); }
.dv-dom-aloja { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--dv-radius); border: 1.5px dashed var(--dv-line-2); background: var(--dv-surface); }
.dv-dom-aloja > .col { flex: 1; min-width: 0; }
.dv-dom-tienda { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-sm); }
.dv-dom-tienda > .col { flex: 1; min-width: 0; } .dv-dom-tienda .logo { flex: none; }
.dv-dom-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dv-dom-form .dv-field:first-child { grid-column: 1 / -1; }
.dv-dom-form.tarjeta { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } .dv-dom-form.tarjeta .dv-field:first-child { grid-column: auto; } .dv-dom-form.tarjeta .dv-field:last-child { grid-column: 1 / -1; }
.dv-dom-tarjeta { border: 1.5px solid var(--dv-accent); }
@media (max-width: 1100px) { .dv-dom-cuerpo { grid-template-columns: minmax(0, 1fr); } .dv-dom-lado { position: static; } }
@media (max-width: 760px) {
  .dv-dom-h1 { font-size: 30px; } .dv-dom-pasos li .t { display: none; } .dv-dom-pasos li.on .t { display: inline; } .dv-dom-pasos li + li::before { width: 14px; }
  .dv-dom-exts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-dom-consejos { grid-template-columns: minmax(0, 1fr); }
  .dv-dom-destacado { grid-template-columns: auto minmax(0, 1fr); padding: 20px; gap: 14px; } .dv-dom-destacado .ico { width: 44px; height: 44px; }
  .dv-dom-destacado > .dv-dom-pr { grid-column: 1 / -1; align-items: flex-start; text-align: left; } .dv-dom-destacado > .dv-btn, .dv-dom-destacado > .dv-dom-anadido { grid-column: 1 / -1; justify-content: center; }
  .dv-dom-grande { font-size: 24px; }
  .dv-dom-fila { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; } .dv-dom-fila > .dv-dom-pr { grid-row: 2; align-items: flex-start; } .dv-dom-fila > .dv-btn, .dv-dom-fila > .dv-dom-anadido { grid-row: 2; justify-self: end; }
  .dv-dom-fila > .col:first-child { grid-column: 1 / -1; } .dv-dom-fila.ocupado { grid-template-columns: minmax(0, 1fr); }
  .dv-dom-linea { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; } .dv-dom-linea > .col { grid-column: 2 / -1; padding-right: 44px; }
  .dv-dom-linea > label { grid-column: 2; grid-row: 2; min-width: 0; } .dv-dom-linea .dv-dom-anos { width: 100%; min-width: 0; max-width: 140px; } .dv-dom-linea > .dv-dom-linea-pr { grid-column: 2 / -1; grid-row: 3; text-align: left; }
  .dv-dom-linea > .dv-dom-quitar { position: absolute; top: 16px; right: 0; }
  .dv-dom-aloja { flex-wrap: wrap; } .dv-dom-aloja > .col { flex: 1 1 calc(100% - 60px); }
  .dv-dom-form, .dv-dom-form.tarjeta { grid-template-columns: minmax(0, 1fr); }
  .dv-dom-tienda { flex-wrap: wrap; } .dv-dom-tienda > .dv-dom-linea-pr { flex-basis: 100%; padding-left: 54px; text-align: left; }
}

/* «Pregúntale a Devellia» con paso a una persona (orden 2093, js/chat.js) y bandeja del equipo (pasos/chats.js) */
.dv-avatar.equipo { background: var(--dv-lime); color: var(--dv-lime-ink); }
.dv-avatar.sm { width: 22px; height: 22px; font-size: 11px; }
.dv-msg.equipo { background: var(--dv-ok-soft); border: 1px solid color-mix(in srgb, var(--dv-ok) 25%, transparent); }
.dv-msg-autor { display: block; font-size: 12px; font-weight: 600; color: var(--dv-ink-2); margin-bottom: 4px; white-space: normal; }
.dv-msg-autor .dv-avatar { display: inline-grid; vertical-align: middle; margin-right: 6px; }
.dv-msg.yo .dv-msg-autor { color: rgba(255,255,255,.8); }
.dv-msg.sys { text-align: center; max-width: 100%; }
.dv-escribiendo { display: flex; gap: 5px; padding: 14px 16px; }
.dv-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--dv-ink-3); animation: dv-escribe 1.2s infinite ease-in-out; }
.dv-escribiendo span:nth-child(2) { animation-delay: .15s; } .dv-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes dv-escribe { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dv-escribiendo span { animation: none; opacity: .6; } }
.dv-punto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dv-warn); margin-right: 6px; vertical-align: 1px; }
.dv-chat-oferta { align-self: stretch; border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-chat-oferta .row { flex-wrap: wrap; }
.dv-chat-acciones { gap: 8px; align-items: center; flex-wrap: wrap; }
.dv-chat-persona, .dv-chat-nueva { font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--dv-accent); display: inline-flex; align-items: center; gap: 6px; }
.dv-chat-nueva { color: var(--dv-ink-3); }
.dv-chat-persona:hover, .dv-chat-nueva:hover { text-decoration: underline; }
@media (max-width: 520px) { .dv-chat-panel { width: 100vw; border-left: 0; } .dv-chat-head { padding: 12px 16px; } .dv-chat-body { padding: 16px; } .dv-chat-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); } }

.dv-chats { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 20px; margin-top: 24px; align-items: start; }
.dv-chats-lista { display: flex; flex-direction: column; gap: 10px; }
.dv-chats-fila { display: block; padding: 14px 16px; color: var(--dv-ink); text-decoration: none; }
.dv-chats-fila:hover { border-color: var(--dv-line-2); }
.dv-chats-fila.on { border-color: var(--dv-accent); box-shadow: 0 0 0 1px var(--dv-accent); }
.dv-chats-ultimo { color: var(--dv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-chats-vacio { padding: 48px 24px; text-align: center; border: 1.5px dashed var(--dv-line); border-radius: var(--dv-radius); }
.dv-chats-hilo { display: flex; flex-direction: column; padding: 0; height: calc(100vh - 260px); min-height: 460px; overflow: hidden; }
.dv-chats-cab { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--dv-line); flex-wrap: wrap; }
.dv-chats-volver { display: none; }
.dv-chats-hilo .dv-chat-body { flex: 1; }
.dv-chats-hilo .dv-msg.cliente { background: var(--dv-paper-2); }
.dv-chats-pie { padding: 14px 20px 18px; border-top: 1px solid var(--dv-line); }
.dv-chats-pie textarea { flex: 1; border: 0; resize: vertical; min-height: 44px; max-height: 200px; font: inherit; font-size: 14px; outline: none; padding: 6px 0; }
@media (max-width: 900px) {
  .dv-chats { grid-template-columns: minmax(0, 1fr); }
  .dv-chats.con-hilo .dv-chats-lista { display: none; }
  .dv-chats:not(.con-hilo) .dv-chats-vacio { display: none; }
  .dv-chats-volver { display: inline; width: 100%; }
  .dv-chats-hilo { height: calc(100vh - 200px); }
}
.dv-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* campo trampa del alta (orden 2100) */

/* Estadísticas de la administración (orden 2104): sobrio, cifras grandes arriba, tablas compactas y barras por día. */
.dv-est-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.dv-est-filtro .dv-input { width: auto; height: 38px; padding: 0 10px; }
.dv-est-rapidos { flex-wrap: wrap; }
.dv-est-rapido { border: 1px solid var(--dv-line); background: var(--dv-surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--dv-ink); }
.dv-est-rapido:hover { background: var(--dv-surface-2); }
.dv-est-avisos { margin: 0; padding-left: 18px; font-size: 14px; }
.dv-est-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 20px; }
.dv-est-kpi { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dv-est-kpi-v { font-family: var(--dv-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.dv-est-kpis-sm .dv-est-kpi-v { font-size: 22px; }
.dv-est-sec { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--dv-line); }
.dv-est-h2 { font-family: var(--dv-display); font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.dv-est-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.dv-est-cifras { display: flex; flex-direction: column; }
.dv-est-fila { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--dv-line); font-size: 14px; }
.dv-est-fila > span:last-child { text-align: right; }
.dv-est-tabla { margin-top: 12px; }
.dv-est-tabla-pie { align-items: center; margin-bottom: 4px; }
.dv-est-scroll { overflow-x: auto; border: 1px solid var(--dv-line); border-radius: 12px; background: var(--dv-surface); }
.dv-est-t { font-size: 13px; font-variant-numeric: tabular-nums; }
.dv-est-t th { padding: 8px 10px; white-space: nowrap; }
.dv-est-t td { padding: 7px 10px; white-space: nowrap; }
.dv-est-neg { color: var(--dv-danger); font-weight: 600; }
.dv-est-pos { color: var(--dv-ok); }
.dv-est-estimado { display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--dv-warn-soft); color: var(--dv-warn); vertical-align: 1px; }
.dv-est-barras { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding-bottom: 18px; }
.dv-est-barra { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.dv-est-barra > span { position: absolute; bottom: -18px; white-space: nowrap; }
.dv-est-pila { width: 100%; max-width: 28px; height: 100%; display: flex; flex-direction: column-reverse; }
.dv-est-pila i, .dv-est-leyenda { display: block; background: var(--dv-accent); }
.dv-est-pila i { border-radius: 2px; }
.dv-est-pila i.b, .dv-est-leyenda.b { background: #A9A2F0; }
.dv-est-leyenda { width: 10px; height: 10px; border-radius: 2px; }
@media (max-width: 640px) { .dv-est-kpi-v { font-size: 22px; } .dv-est-fila { flex-direction: column; gap: 2px; } .dv-est-fila > span:last-child { text-align: left; } }
/* Cupones de promoción (orden 2106): la página del cupón (publico.js → promo) y la pantalla del equipo (pasos/cupones.js). */
/* La landing del cupón reutiliza el hero de la portada (min-height: 100vh) sin su contenido: quedaba un hueco enorme bajo el botón (Jose, 02/11/2026). */
.lp2-hero.lp-promo { min-height: 0; padding-bottom: 24px; }
.lp-promo-cupon { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 12px 14px 12px 20px; border: 2px dashed var(--dv-accent); border-radius: 18px; background: var(--dv-surface); }
.lp-promo-cupon .cod { font-family: var(--dv-display); font-size: 26px; font-weight: 800; letter-spacing: 0.06em; }
.lp-promo-cupon .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dv-ok); background: #E9F5EE; border-radius: 999px; padding: 6px 10px; }
.lp-promo-cupon .no { font-size: 13px; font-weight: 600; color: var(--dv-ink-3); background: var(--dv-paper-2); border-radius: 999px; padding: 6px 10px; }
.lp-promo-puntos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.lp-promo-punto { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.lp-promo-punto .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--dv-accent-soft); color: var(--dv-accent); }
.lp-promo-punto b { font-size: 18px; }
.lp-promo-punto p { margin: 0; }
@media (max-width: 860px) { .lp-promo-puntos { grid-template-columns: 1fr; } .lp-promo-cupon { flex-wrap: wrap; } }
.dv-cupon-fila { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(90px, 1fr)); gap: 16px; align-items: center; padding: 16px 20px; color: var(--dv-ink); text-decoration: none; }
.dv-cupon-fila:hover { border-color: var(--dv-accent); }
.dv-cupon-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.dv-cupon-datos > div, .dv-cupon-uso > .col { display: flex; flex-direction: column; gap: 2px; }
.dv-cupon-uso { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(110px, 1fr)); gap: 12px; align-items: center; padding: 14px 18px; border: 1px solid var(--dv-line); border-radius: 16px; background: var(--dv-surface); }
@media (max-width: 860px) { .dv-cupon-fila, .dv-cupon-uso { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- páginas legales (orden 2110) */
.lg-legal { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 48px; justify-content: center; padding: 40px 0 64px; }
.lg-legal-menu { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.lg-legal-menu b { text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.lg-legal-menu a { color: var(--dv-ink-2); text-decoration: none; padding: 8px 12px; border-radius: var(--dv-radius-sm); font-size: 15px; }
.lg-legal-menu a:hover { background: var(--dv-surface-2); color: var(--dv-ink); }
.lg-legal-menu a.on { background: var(--dv-accent-soft); color: var(--dv-accent-ink); font-weight: 600; }
.lg-legal-texto { color: var(--dv-ink-2); font-size: 16px; line-height: 1.7; }
.lg-legal-texto h1 { color: var(--dv-ink); font-size: 40px; line-height: 1.15; margin: 0 0 8px; }
.lg-legal-texto h2 { color: var(--dv-ink); font-size: 22px; margin: 40px 0 12px; scroll-margin-top: 96px; }
.lg-legal-texto section { scroll-margin-top: 96px; }
.lg-legal-texto p, .lg-legal-texto ul { margin: 0 0 14px; }
.lg-legal-texto ul { padding-left: 22px; } .lg-legal-texto li { margin-bottom: 6px; }
.lg-legal-texto a { color: var(--dv-accent); }
.lg-legal-texto mark { background: var(--dv-warn-soft); color: var(--dv-warn); border-radius: 4px; padding: 0 4px; }
.lg-legal-fecha { font-size: 14px; color: var(--dv-ink-3); }
.lg-legal-intro { font-size: 18px; color: var(--dv-ink); }
.lg-legal a { overflow-wrap: anywhere; }
.lg-legal-nota { margin: 12px 0 20px; }
.lg-legal-indice { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); padding: 16px 20px; margin: 24px 0 8px; font-size: 15px; }
.lg-legal-indice ul { margin: 8px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; } .lg-legal-indice li { break-inside: avoid; margin-bottom: 4px; }
.lg-legal-caja { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); padding: 20px; font-size: 15px; }
.lg-legal-tabla { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); }
.lg-legal-tabla table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; }
.lg-legal-tabla th, .lg-legal-tabla td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--dv-line); }
.lg-legal-tabla thead th { background: var(--dv-surface-2); color: var(--dv-ink); font-weight: 600; }
.lg-legal-tabla tbody th { color: var(--dv-ink); font-weight: 600; }
.lg-legal-tabla tr:last-child th, .lg-legal-tabla tr:last-child td { border-bottom: 0; }
.lg-legal-pie { margin-top: 40px; }
.lg-desistir { margin: 8px 0 16px; padding: 24px; }
.lg-desistir textarea { width: 100%; resize: vertical; min-height: 88px; }
.lg-desistir input[readonly], .lg-desistir textarea[readonly] { background: var(--dv-surface-2); }
.lp-pie-legal, .dv-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.lp-pie-legal { grid-column: 1 / -1; border-top: 1px solid var(--dv-line); padding-top: 16px; }
.lp-pie-legal a, .dv-legal-links a { color: var(--dv-ink-3); text-decoration: none; }
.lp-pie-legal a:hover, .dv-legal-links a:hover { color: var(--dv-ink); text-decoration: underline; }
.dv-legal-links { justify-content: center; padding: 24px 16px 32px; }
.dv-main > .dv-legal-links { padding-bottom: calc(var(--dv-bar-h) + 24px); }
.dv-acepto { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--dv-ink-2); border-radius: 10px; padding: 4px; }
.dv-acepto input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--dv-accent); }
.dv-acepto a { color: var(--dv-accent); }
.dv-acepto.falta { outline: 2px solid var(--dv-danger); outline-offset: 2px; }
.dv-input.falta { border-color: var(--dv-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-danger) 18%, transparent); }
.dv-fac-error { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--dv-danger) 10%, transparent); color: var(--dv-danger); font-size: 14px; font-weight: 500; }
.dv-fac-error[hidden] { display: none; }
.dv-vies { padding: 10px 12px; border-radius: 12px; background: var(--dv-paper-2, #F6F4EF); font-size: 13px; align-items: center; }
.dv-vies[hidden] { display: none; }
.dv-field[hidden] { display: none; }
.dv-check[hidden], p[hidden] { display: none; }
.dv-check.falta { outline: 2px solid var(--dv-danger); outline-offset: 4px; border-radius: 8px; }
.dv-vies > span { flex: 1 1 auto; min-width: 0; }
.dv-vies > button { flex: none; }
.dv-vies.ok { background: color-mix(in srgb, var(--dv-ok, #2E7D4F) 12%, transparent); color: var(--dv-ok, #2E7D4F); }
.dv-vies.mal { background: color-mix(in srgb, var(--dv-danger) 10%, transparent); color: var(--dv-danger); }
@media (max-width: 900px) {
  .lg-legal { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0 48px; }
  .lg-legal-menu { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .lg-legal-menu b { width: 100%; margin-bottom: 2px; }
  .lg-legal-menu a { padding: 6px 12px; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-pill); font-size: 14px; }
  .lg-legal-texto h1 { font-size: 30px; }
  .lg-legal-indice ul { columns: 1; }
}
@media print {
  .lp-nav, .lp-pie, .lg-legal-menu, .lg-legal-pie, .dv-top, .dv-legal-links, .lg-desistir { display: none !important; }
  .lg-legal { display: block; padding: 0; } .lg-legal-texto { font-size: 12pt; color: #000; }
}
/* «¿Cómo quieres pagar?» antes de ir a Lyra (29/10/2026) */
.dv-forma { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--dv-line); border-radius: 14px; background: var(--dv-surface); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.dv-forma:hover, .dv-forma:focus-visible { border-color: var(--dv-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-accent) 15%, transparent); }
.dv-forma .col { gap: 2px; }
.dv-forma > .col { flex: 1 1 auto; min-width: 0; }
.dv-forma-logos { flex: none; align-items: center; } .dv-forma-logos > span { display: inline-flex; }
/* Mi saldo › Movimientos: la transacción de Lyra, corta; al pulsar, entera (29/10/2026) */
.dv-sal-tx { font: inherit; font-size: 13px; color: var(--dv-ink-3); background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; text-decoration: underline dotted; font-variant-numeric: tabular-nums; }
.dv-sal-tx.abierta { word-break: break-all; color: var(--dv-ink); font-size: 12px; }
/* Regalo de la primera recarga (orden 2231): la frase junto a cada «Recargar» y el «×2» del botón de la cabecera. */
.dv-regalo-primera { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--dv-ok); text-align: left; }
.dv-regalo-primera > svg, .dv-bar-regalo > svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.dv-regalo-primera > span { min-width: 0; }
/* Debajo de un «Recargar», con aire de verdad (el margin: 0 de arriba anulaba los .mt-*). */
.dv-regalo-primera.debajo { margin-top: 14px; }
/* En la barra de abajo se ve a cualquier ancho (las demás notas se esconden por debajo de 1300 px). */
.dv-bar .nota.dv-bar-regalo { display: flex; align-items: flex-start; gap: 6px; max-width: 300px; font-size: 13px; line-height: 17px; font-weight: 600; color: var(--dv-ok); }
/* En el móvil no cabe al lado del botón: va en una franja justo encima de la barra. */
@media (max-width: 600px) { .dv-bar .nota.dv-bar-regalo { position: absolute; left: 0; right: 0; bottom: 100%; max-width: none; justify-content: center; align-items: center; padding: 7px 16px; background: var(--dv-paper); border-top: 1px solid var(--dv-line); font-size: 12.5px; line-height: 16px; } }
.dv-card.dark .dv-regalo-primera { color: var(--dv-lime); }
.dv-top-recargar .dv-x2 { font-style: normal; font-weight: 800; margin-left: 6px; padding: 1px 6px; border-radius: var(--dv-radius-pill); background: var(--dv-ink); color: var(--dv-lime); font-size: 11px; }
.dv-saldo-x2 { font-size: 11px; color: var(--dv-lime); text-align: right; max-width: 140px; line-height: 1.3; }
/* «Tus 10 módulos» (orden 2266, pasos/pack-modulos.js): la ventana de elegir. Solo se desplaza la zona de módulos; la
   cabecera (contador, buscador y categorías) y el pie (precio y Guardar) se quedan quietos. */
dialog.dv-dlg.dv-pack-dlg { width: min(1040px, 96vw); max-height: 92vh; overflow: hidden; }
.dv-pack-cuerpo { max-height: calc(92vh - 64px); display: flex; flex-direction: column; }
.dv-pack-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 20px; align-items: center; padding: 4px 0 8px; }
.dv-pack-cabeza .dv-pack-cats { grid-column: 1 / -1; gap: 8px; }
.dv-pack-cuentas { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-pack-cuenta { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; color: var(--dv-ink-2); }
.dv-pack-cuenta b { font-family: var(--dv-display); font-size: 16px; color: var(--dv-ink); }
.dv-pack-barrita { flex: none; width: 80px; height: 6px; border-radius: 99px; background: var(--dv-paper-2); overflow: hidden; }
.dv-pack-barrita i { display: block; height: 100%; background: var(--dv-accent); border-radius: 99px; }
.dv-pack-cabeza .dv-pack-buscar { height: 38px; font-size: 14px; max-width: 360px; justify-self: end; width: 100%; }
.dv-pack-intro span { display: block; text-wrap: pretty; }
.dv-pack-selec { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.dv-pack-selec:empty { display: none; }
.dv-pack-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--dv-accent-soft); color: var(--dv-accent-ink); font-size: 12px; font-weight: 600; }
.dv-pack-chip.ok { background: var(--dv-ok-soft); color: var(--dv-ok); }
.dv-pack-chip img { width: 20px; height: 20px; border-radius: 5px; background: #fff; flex: none; }
.dv-pack-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-pack-zona { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 12px 0; }
.dv-pack-h { margin: 18px 0 8px; font-size: 17px; }
.dv-pack-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dv-pack-mod { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--dv-surface); border: 1.5px solid var(--dv-line); border-radius: 14px; padding: 12px 40px 12px 12px; cursor: pointer; font: inherit; color: inherit; }
.dv-pack-mod:hover { border-color: var(--dv-line-2); }
.dv-pack-mod.on { border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-pack-mod img { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: contain; background: #fff; }
.dv-pack-mod .t { font-weight: 700; font-size: 15px; line-height: 1.25; }
.dv-pack-mod .s { font-size: 13px; color: var(--dv-ink-3); margin-top: 4px; line-height: 1.35; }
.dv-pack-mod .c { font-size: 12px; font-weight: 600; color: var(--dv-accent-ink); margin-top: 6px; }
.dv-pack-mod .marca { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--dv-line-2); background: #fff; display: grid; place-items: center; color: #fff; }
.dv-pack-mod.on .marca { background: var(--dv-accent); border-color: var(--dv-accent); }
.dv-pack-pie { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--dv-line); }
.dv-pack-ventaja { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dv-line); }
.dv-pack-ventaja img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
@media (max-width: 900px) { .dv-pack-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  dialog.dv-dlg.dv-pack-dlg { padding-left: 16px; padding-right: 16px; max-height: calc(100dvh - 24px); }
  .dv-pack-cuerpo { max-height: calc(100dvh - 24px - 76px); gap: 10px; }
  .dv-pack-cuerpo h2 { font-size: 22px; } .dv-pack-cuerpo .dv-pack-intro { font-size: 14px; }
  .dv-pack-cabeza { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dv-pack-cabeza .dv-pack-buscar { max-width: none; justify-self: stretch; }
  .dv-pack-cabeza .dv-pack-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .dv-pack-cabeza .dv-pack-cats .dv-chip { flex: none; }
  .dv-pack-rejilla { grid-template-columns: minmax(0, 1fr); }
  .dv-pack-pie { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .dv-pack-pie p { font-size: 13px; }
}

/* «¿Dónde vivirá tu tienda?» (orden 2269): alojarla con nosotros, la principal (2/3, marcada); descargarla, la secundaria (1/3). */
.dv-donde { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.dv-donde-prin { border: 2px solid var(--dv-accent); background: var(--dv-accent-soft); border-radius: var(--dv-radius-sm); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dv-donde-t { font-size: 17px; }
.dv-donde-ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dv-donde-ventajas li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--dv-ink); }
.dv-donde-ventajas li svg { flex: none; color: var(--dv-accent); margin-top: 2px; }
.dv-donde-sec { border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .dv-donde { grid-template-columns: minmax(0, 1fr); } }

/* «Tu tienda para la IA y la ley» (orden 2269): las dos notas, una al lado de otra (también en el móvil). */
/* Una tarjeta por prueba: nota de ahora → nota con lo nuestro (orden 2281). En móvil, una debajo de otra. */
.dv-ia-pruebas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-ia-prueba { border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); padding: 12px 14px; }
.dv-ia-par { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dv-ia-par > div { flex: none; }
.dv-ia-flecha { color: var(--dv-accent); display: inline-flex; flex: none; }
.dv-ia-par > .dv-ia-con { flex: 0 1 auto; min-width: 0; background: var(--dv-accent-soft); border-radius: var(--dv-radius-sm); padding: 4px 10px; }
.dv-ia-par .dv-cifra { white-space: nowrap; }
.dv-ia-precio { background: var(--dv-lime); color: var(--dv-lime-ink); border-radius: var(--dv-radius-pill); padding: 1px 8px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .dv-ia-pruebas { grid-template-columns: 1fr; } }

/* Planes de alojamiento (orden 2291): nombre y precio arriba, espacio de tienda y de correo bien visibles, checks; en el móvil, en columna. */
.dv-aloj-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding-top: 10px; }
.dv-aloj-plan { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; font: inherit; color: var(--dv-ink); background: var(--dv-surface); border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius); padding: 22px 22px 20px; cursor: pointer; transition: border-color .15s, background .15s; }
.dv-aloj-plan:hover { border-color: var(--dv-line-2); }
.dv-aloj-plan.reco { border-color: var(--dv-accent); }
.dv-aloj-plan.elegida { border: 2px solid var(--dv-accent); background: var(--dv-accent-soft); }
.dv-aloj-plan:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 2px; }
.dv-aloj-plan .radio { position: absolute; top: 22px; right: 20px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--dv-line-2); background: #fff; }
.dv-aloj-plan.elegida .radio { border: 6px solid var(--dv-accent); }
.dv-aloj-tag { position: absolute; top: -11px; left: 18px; background: var(--dv-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--dv-radius-pill); }
.dv-aloj-tag.tuyo { background: var(--dv-lime); color: var(--dv-lime-ink); }
.dv-aloj-plan .cab { display: flex; flex-direction: column; gap: 2px; padding-right: 30px; }
.dv-aloj-plan .cab .n { font-family: var(--dv-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dv-aloj-plan .cab .para { font-size: 13.5px; color: var(--dv-ink-3); }
.dv-aloj-plan .precio { display: flex; align-items: baseline; gap: 4px; margin-top: -6px; }
.dv-aloj-plan .precio b { font-family: var(--dv-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dv-aloj-plan .precio span { font-size: 14px; color: var(--dv-ink-3); }
.dv-aloj-plan .gb { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--dv-radius-sm); background: var(--dv-surface-2); }
.dv-aloj-plan.elegida .gb { background: #fff; }
.dv-aloj-plan .gb .g { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; font-size: 14px; }   /* «2 CPU · 2 GB de RAM» en una línea, sin partir la cifra de su unidad (Jose, 04/11/2026) */
.dv-aloj-plan .gb .g svg { flex: none; color: var(--dv-accent); align-self: center; margin-right: 2px; }
.dv-aloj-plan .gb .g b { font-family: var(--dv-display); font-size: 16px; font-weight: 700; white-space: nowrap; }
.dv-aloj-plan .gb .g span { color: var(--dv-ink-2); white-space: nowrap; }
.dv-aloj-plan .checks, .dv-aloj-incluye ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dv-aloj-plan .checks li, .dv-aloj-incluye li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.dv-aloj-plan .checks li svg, .dv-aloj-incluye li svg { flex: none; color: var(--dv-ok); margin-top: 2px; }
.dv-aloj-incluye { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--dv-radius); border: 1px solid var(--dv-line); background: var(--dv-surface); }
.dv-aloj-incluye ul { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 20px; }
@media (min-width: 761px) { .dv-aloj-incluye ul { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); } }
.dv-aloj-promesas { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.dv-aloj-promesas span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--dv-radius-pill); background: var(--dv-lime); color: var(--dv-lime-ink); }
@media (max-width: 560px) { .dv-aloj-planes { grid-template-columns: minmax(0, 1fr); } .dv-aloj-incluye ul { grid-template-columns: minmax(0, 1fr); } }
.lp3-planes.grande.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lp3-planes.grande.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lp3-planes.grande.tres { grid-template-columns: minmax(0, 1fr); } }

/* Buscar y elegir dominio (orden 2298): pasos/buscar-dominio.js, en ventana y en página */
.dv-bd-cargando { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--dv-ink-2); font-size: 15px; }
.dv-bd-cargando .dv-spin { flex: none; width: 22px; height: 22px; border-width: 3px; }
.dv-bd-tengo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dv-bd-resumen { display: grid; gap: 0; }
.dv-bd-l { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dv-line); align-items: center; font-size: 15px; }
.dv-bd-l:last-child { border-bottom: 0; }
.dv-bd-falta { color: var(--dv-danger, #B3261E); font-weight: 700; }
.dv-bd-ok { display: flex; align-items: center; gap: 16px; }
.dv-bd-ok .ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--dv-ok-bg, #E6F4EA); color: var(--dv-ok); }
.dv-bd-dlg .dv-dom-destacado { margin: 0; }
@media (max-width: 640px) {
  .dv-bd-tengo { flex-direction: column; align-items: stretch; }
  .dv-bd-l { grid-template-columns: 1fr; gap: 2px; }
  .dv-bd .dv-dom-buscar { flex-wrap: nowrap; }
  .dv-bd .dv-dom-buscar .dv-input { min-width: 0; flex: 1 1 auto; }
  .dv-bd .dv-dom-buscar .dv-btn { flex: none; padding-left: 14px; padding-right: 14px; }
  .dv-bd .dv-dom-grande { font-size: 22px; overflow-wrap: anywhere; }
  .dv-bd .dv-dom-destacado { flex-wrap: wrap; }
}
/* Tus 10 módulos, fase 2 (orden 2307): precio normal tachado y 5 € con el hosting; los que aún no se sirven, «Disponible muy pronto» */
.dv-pack-precio { margin-top: 8px; font-size: 13px; }
.dv-pack-mod.pronto { opacity: .62; cursor: default; }
.dv-pack-mod.pronto:hover { border-color: var(--dv-line); }
.dv-pack-mod:disabled { cursor: default; }
.dv-pack-mod.on:disabled { opacity: 1; }   /* los ya instalados: fijos pero sin apagar */
/* Estado de un módulo (orden 2307): una pastilla neutra, no un botón; el texto largo pasa a otra línea y cabe en su tarjeta */
.dv-pack-estado { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: var(--dv-radius-pill); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; background: var(--dv-paper-2); color: var(--dv-ink-2); border: 1px solid var(--dv-line); }
.dv-pack-estado.ok { background: var(--dv-ok-soft); color: var(--dv-ok); border-color: transparent; }
.dv-pack-estado.eleg { background: var(--dv-accent-soft); color: var(--dv-accent-ink); border-color: transparent; }
.dv-pack-mod.eleg { border-color: var(--dv-accent); }
/* Los botones de cada módulo, en su fila: centrados y dentro de la tarjeta en cualquier anchura (orden 2307) */
.dv-pack-mod { flex-wrap: wrap; }
.dv-pack-accion { flex: 1 1 100%; min-width: 0; display: flex; justify-content: center; }
.dv-pack-accion > .col { width: 100%; align-items: center; }
.dv-pack-accion .dv-btn { max-width: 100%; white-space: normal; height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; text-align: center; justify-content: center; }
/* La columna derecha de «Tus módulos»: nada más ancho que ella (los botones largos rompían «Cómo funciona») */
.dv-pack-aside { min-width: 0; }
.dv-pack-aside .dv-card { min-width: 0; overflow-wrap: anywhere; box-sizing: border-box; max-width: 100%; }
.dv-pack-lado .dv-btn { width: 100%; max-width: 100%; white-space: normal; height: auto; min-height: 38px; padding-top: 8px; padding-bottom: 8px; justify-content: center; text-align: center; }
.dv-pack-estado.danger { background: var(--dv-danger-soft); color: var(--dv-danger); border-color: transparent; }
.dv-pack-mod { cursor: default; }
.dv-pack-mod .tx { min-width: 0; flex: 1; }
div.dv-pack-mod { padding-right: 12px; }
.dv-pack-mod.on { border-color: var(--dv-ok); background: var(--dv-surface); }
/* Administradores de emergencia (orden 2307): el botón cabe en el móvil */
.dv-adm-crear .dv-btn { max-width: 100%; white-space: normal; height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; text-align: left; }

/* ---------- «Visitas y uso» del alojamiento (orden 2323; js/pasos/hosting-uso.js): gráficas propias con CSS ---------- */
.dv-pill.danger { background: var(--dv-danger-soft); color: var(--dv-danger); }
.dv-uso-cab { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.dv-uso-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dv-uso-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); min-width: 0; }
.dv-uso-kpi b { font-size: 22px; font-family: var(--dv-display); color: var(--dv-ink); overflow-wrap: anywhere; }
.dv-uso-graf { display: flex; flex-direction: column; gap: 4px; }
.dv-uso-barras { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-bottom: 2px; border-bottom: 1px solid var(--dv-line); }
.dv-uso-col { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.dv-uso-col i { display: block; width: 100%; max-width: 28px; background: var(--dv-accent-soft); border-radius: 4px 4px 0 0; }
.dv-uso-col i.sin { background: var(--dv-line-2); }
.dv-uso-col b { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46%; max-width: 12px; background: var(--dv-accent); border-radius: 3px 3px 0 0; }
.dv-uso-col:hover i { background: var(--dv-accent-hover); opacity: .45; }
.dv-uso-ejes { display: flex; gap: 3px; font-size: 11.5px; color: var(--dv-ink-3); }
.dv-uso-ejes span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.dv-uso-ejes span:last-child { display: flex; justify-content: flex-end; }   /* la última fecha crece hacia dentro, no se sale */
@media (max-width: 560px) { .dv-uso-ejes { font-size: 10.5px; } }
.dv-uso-ley { display: inline-flex; align-items: center; gap: 6px; }
.dv-uso-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dv-uso-ley i.a { background: var(--dv-accent-soft); } .dv-uso-ley i.b { background: var(--dv-accent); }
.dv-uso-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dv-uso-lista { display: flex; flex-direction: column; gap: 6px; }
.dv-uso-fila { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 8px; font-size: 14px; overflow: hidden; }
.dv-uso-fila > i { position: absolute; inset: 0 auto 0 0; background: var(--dv-accent-soft); opacity: .55; z-index: 0; border-radius: 8px; }
.dv-uso-fila .k, .dv-uso-fila .v { position: relative; z-index: 1; min-width: 0; }
.dv-uso-fila .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-uso-fila .k code { font-size: 13px; }
.dv-uso-fila .v { font-weight: 600; flex: none; }
.dv-uso-apilada { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--dv-paper-2); }
.dv-uso-apilada i { display: block; height: 100%; }
.dv-uso-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.dv-uso-leyenda b { font-weight: 600; margin-left: 2px; }
.dv-uso-error { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); }
.dv-uso-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; background: var(--dv-paper-2); padding: 10px; border-radius: 8px; margin: 8px 0 0; max-height: 220px; overflow: auto; }
.dv-uso-avisos summary { cursor: pointer; font-weight: 600; }
.dv-uso-consejo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--dv-radius-sm); background: var(--dv-paper-2); flex-wrap: wrap; }
.dv-uso-consejo > span { flex: 1 1 260px; min-width: 0; }
.dv-uso-avisoplan { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--dv-radius-sm); background: var(--dv-warn-soft); color: var(--dv-ink); flex-wrap: wrap; }
.dv-uso-avisoplan.alto { background: var(--dv-danger-soft); }
.dv-uso-avisoplan > div { flex: 1 1 260px; min-width: 0; }
@media (max-width: 1280px) { .dv-uso-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dv-uso-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-uso-rejilla { grid-template-columns: minmax(0, 1fr); } .dv-uso-barras { height: 120px; gap: 2px; } .dv-uso-kpi b { font-size: 19px; } }
.dv-uso-error.vuelto { border-color: var(--dv-danger); }
.dv-uso-error.arreglado { border-color: var(--dv-ok); background: var(--dv-ok-soft); }

/* Dashboard de administración (Jose, 01/11/2026) */
.dv-dash-pest .dv-est-rapido { text-decoration: none; }
.dv-dash-pest .dv-est-rapido.on { background: var(--dv-accent-soft); border-color: transparent; font-weight: 600; }
.dv-dash-busca { position: relative; }
.dv-dash-busca input[type=search] { flex: 1 1 320px; width: auto; height: 42px; padding-left: 38px; }
.dv-dash-busca select { width: auto; height: 42px; }
.dv-dash-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dv-ink-3); display: flex; pointer-events: none; }
.dv-dash-busca .dv-dash-lupa + input { margin-left: 0; }
.dv-dash-click { cursor: pointer; }
.dv-movs { table-layout: fixed; }
.dv-movs td:nth-child(2), .dv-movs td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.dv-mov-grupo { cursor: pointer; } .dv-mov-grupo:hover td { background: var(--dv-paper); }
.dv-mov-grupo td:nth-child(2) > div:first-child::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.dv-mov-grupo.abierto td:nth-child(2) > div:first-child::after { transform: translateY(0) rotate(-135deg); }
@media (max-width: 720px) { .dv-movs colgroup col:nth-child(3) { width: 110px !important; } .dv-movs { min-width: 560px; } }
.dv-mov-grupo td { font-weight: 600; border-top: 1px solid var(--dv-line-2); }
.dv-mov-parte td { color: var(--dv-ink-3); font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
.dv-mov-parte td:nth-child(2) { padding-left: 26px; }
.dv-mov-pedido { margin-top: 3px; max-width: 560px; white-space: normal; font-weight: 400; font-size: 12.5px; line-height: 1.4; color: var(--dv-ink-3); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-mov-pedido.abierto { display: block; -webkit-line-clamp: unset; }
.dv-dash-click:hover td { background: var(--dv-surface-2); }
.dv-dash-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dv-dash-como { position: sticky; top: 0; z-index: 60; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--dv-dark); color: #fff; font-size: 14px; }
.dv-dash-como .dv-btn { height: 30px; }
.dv-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 20px; }
.dv-dash-card { background: var(--dv-surface); border: 1px solid var(--dv-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-dash-card-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.dv-dash-card-t .ic { width: 18px; height: 18px; color: var(--dv-accent); }
.dv-dash-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--dv-line); color: inherit; text-decoration: none; min-width: 0; }
.dv-dash-fila > span:last-child { text-align: right; overflow-wrap: anywhere; }
.dv-dash-mal { color: var(--dv-danger); font-weight: 600; }
.dv-dash-aviso .dv-est-kpi-v, .dv-est-kpi.dv-dash-aviso { border-color: var(--dv-warn); }
.dv-est-kpi.dv-dash-aviso .dv-est-kpi-v { color: var(--dv-warn); }
.dv-dash-sem { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.dv-dash-sem::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--dv-warn); flex: none; }
.dv-dash-sem.ok::before { background: var(--dv-ok); } .dv-dash-sem.mal::before { background: var(--dv-danger); }
.dv-est-kpi-v .dv-dash-sem { font-size: 13px; }
.dv-dash-barras { margin: 4px 0 8px; }
.dv-dash-barras-g { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid var(--dv-line); }
.dv-dash-barra { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; min-width: 0; }
.dv-dash-barra i { flex: 1; border-radius: 3px 3px 0 0; min-width: 0; }
.dv-dash-barra:hover i { opacity: .75; }
.dv-dash-barras i.a, .dv-dash-ley.a { background: var(--dv-accent); } .dv-dash-barras i.b, .dv-dash-ley.b { background: var(--dv-ok); }
.dv-dash-ley { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dv-dash-barras-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--dv-ink-3); margin-top: 4px; }
.dv-dash-sub { padding: 8px 0; border-bottom: 1px solid var(--dv-line); display: flex; flex-direction: column; gap: 6px; }
.dv-dash-med-b { height: 6px; background: var(--dv-surface-2); border-radius: 99px; overflow: hidden; }
.dv-dash-med-b i { display: block; height: 100%; background: var(--dv-ok); border-radius: 99px; }
.dv-dash-med-b i.aviso { background: var(--dv-warn); } .dv-dash-med-b i.mal { background: var(--dv-danger); }
.dv-dash-prob { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--dv-line); border-radius: 12px; background: var(--dv-surface); }
.dv-dash-prob.grave { border-left: 4px solid var(--dv-warn); }
.dv-dash-card .dv-input { height: 36px; }
.dv-dash-pest { flex-wrap: wrap; }
@media (max-width: 640px) { .dv-dash-grid { grid-template-columns: 1fr; } }
.dv-dash-prob { flex-wrap: wrap; }
.dv-dash-prob > div:first-child { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.dv-est-kpi-v .row { flex-wrap: wrap; row-gap: 4px; }
.dv-dash-card, .dv-dash-card * { overflow-wrap: anywhere; }

/* Ficha de una app a medida por pasos (orden 2335, Jose 01/11/2026): 1 Pruébala → 2 Pide cambios → 3 Instálala en tu tienda. */
.dv-app-pasos { display: flex; flex-direction: column; }
/* Apps a medida (orden 2342): las etapas de la cabecera en fila, a la izquierda; el listado de apps en tarjetas compactas. */
.dv-app-etapas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.dv-app-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dv-app-fila { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; transition: border-color .15s; }
.dv-app-fila:hover { border-color: var(--dv-accent); }
.dv-app-fila .dv-pill { white-space: nowrap; flex: none; }
.dv-app-paso { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--dv-line); }
.dv-app-paso > .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--dv-display); font-weight: 800; background: var(--dv-accent-soft); color: var(--dv-accent); }
.dv-app-paso.hecho > .n { background: var(--dv-lime); color: var(--dv-lime-ink); }
.dv-app-paso h3 { margin: 4px 0 6px; font-size: 16px; }
.dv-app-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--dv-line); }
.dv-plegable .mas { background: none; border: 0; padding: 0; margin-left: 4px; color: var(--dv-accent); font: inherit; font-weight: 600; cursor: pointer; }

.dv-dash-kpi-btn { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.dv-dash-kpi-btn:hover { border-color: var(--dv-accent); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.dv-dash-dlg { max-width: min(860px, 92vw); max-height: 80vh; overflow: auto; }
.dv-dash-dlg h3 { margin: 8px 0 0; font-size: 15px; }

.dv-dash-quehace{margin:2px 0 6px;line-height:1.4}
.dv-dash-sem{white-space:nowrap;flex-shrink:0}

/* Cabecera de éxito común (js/exito.js, Jose 02/11/2026): check, confeti sutil una vez y las acciones principales. */
.dv-exito { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; border-color: color-mix(in srgb, #CBEA3B 55%, var(--dv-line, #e5e5ea)); }
.dv-exito-fila { display: flex; align-items: center; gap: 14px; }
.dv-exito-check { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #D4F36B; color: #15141A; animation: dv-exito-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.dv-exito-check svg { width: 22px; height: 22px; }
.dv-exito-confeti { position: absolute; left: 36px; top: 36px; width: 0; height: 0; pointer-events: none; }
.dv-exito-confeti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: dv-exito-confeti 1.4s cubic-bezier(.1,.7,.3,1) var(--d) both; }
@keyframes dv-exito-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dv-exito-confeti { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(200deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .dv-exito-confeti { display: none; } }

/* Filas de versiones y tiendas de un módulo a medida (orden 2339): el texto se encoge y el botón se queda a la derecha, sin salirse */
.row.wrap.dv-fila-version { flex-wrap: nowrap; align-items: center; }
.dv-fila-version > .col { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dv-fila-version > .col .fs-13 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-fila-version > :not(.col) { flex: none; }
.dv-card { min-width: 0; overflow-wrap: anywhere; }
.dv-detalle-version { padding-bottom: 12px; border-bottom: 1px solid var(--dv-line); }
.dv-detalle-version:last-child { border-bottom: 0; }
.dv-intro-pista { margin-top: 4px; opacity: .8; }

/* Frases que rotan bajo el titular (Jose, 02/11/2026) */
.lp-rota { font-family: var(--dv-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(22px, 3.6vw, 40px); min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-align: center; margin: 14px auto 6px; max-width: 900px; overflow: hidden; }
.lp-rota b { color: var(--dv-accent); white-space: nowrap; }
.lp-rota-it { display: inline-block; animation: lpRotaEntra .5s cubic-bezier(.2, .8, .2, 1) both; }
.lp-rota.sale .lp-rota-it { animation: lpRotaSale .38s ease-in both; }
.lp-rota.lp-rota-hero { margin: 10px auto 4px; font-size: clamp(22px, 3.2vw, 34px); }
@keyframes lpRotaEntra { from { opacity: 0; transform: translateY(.55em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lpRotaSale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.55em); filter: blur(4px); } }
.lp-rota-lista { list-style: none; padding: 0; margin: 12px 0; font-family: var(--dv-display); font-weight: 700; font-size: 20px; line-height: 1.5; }
.lp-rota-lista b { color: var(--dv-accent); }
@media (max-width: 640px) { .lp-rota { min-height: 3.5em; } }

/* Responsive (Jose, 02/11/2026): móvil estrecho. Logos de plataformas en rejilla 2×2 con el título encima, notas del
   hero apiladas, cabecera sin solapes a 320 px, cifras de «Mi saldo» enteras, títulos de sección de «Apps y módulos»
   con el logo encima y el botón principal de la barra del paso legible. */
@media (max-width: 760px) {
  .lp4-banda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 18px 12px; }
  .lp4-banda .t, .lp4-banda .mas { grid-column: 1 / -1; text-align: center; }
  .lp4-banda .marca { height: auto; zoom: .62; }   /* los logos llevan su tamaño en línea (logoPlat): se escalan juntos, sin perder la proporción entre marcas */
}
@media (max-width: 560px) {
  .lp4-marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; justify-items: center; align-items: center; }
  .lp-hero-notas { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .lp-hero-notas > span:nth-child(even) { display: none; }
  .dv-sec-tit { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 400px) {
  .dv-top .dv-logo, .lp-nav .dv-logo { height: 20px; }
  .dv-top { gap: 6px; }
  .dv-top .dv-idioma-btn { padding: 0 8px; gap: 4px; } .dv-top .dv-idioma-btn .ic { display: none; }
  .dv-sal-kpis { grid-template-columns: minmax(0, 1fr); }
  .dv-bar .dv-btn.lg { height: auto; min-height: 48px; padding: 6px 14px; font-size: 14px; line-height: 1.15; }
}

/* Mi saldo de la portada de dentro, en negro (Jose, 02/11/2026) */
.dv-ini-saldo a { color: var(--dv-lime); } .dv-ini-saldo hr.dv { border-color: #33333C; } .dv-ini-saldo .dv-cifra { color: var(--dv-lime); }
.dv-ini-saldo .dv-ini-barras i { background: #3A3A44; } .dv-ini-saldo .dv-ini-barras i.este { background: var(--dv-lime); }
.dv-ini-saldo-regalo { display: flex; gap: 10px; align-items: flex-start; background: #24232B; border-radius: 14px; padding: 12px 14px; }
.dv-ini-saldo-regalo b { color: var(--dv-lime); } .dv-ini-saldo-regalo .ic { color: #fff; flex: none; margin-top: 2px; }

/* La portada en HTML de index.html (SEO, 04/11/2026): solo para quien no ejecuta JavaScript; la app la sustituye al arrancar. */
#root > .dv-seo { display: none; }

/* Dashboard · Clientes: cabeceras que ordenan y paginación de 50 en 50 (04/11/2026). */
.dv-dash-orden { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; white-space: nowrap; }
.dv-dash-orden:hover, .dv-dash-orden.on { color: var(--dv-accent); }
.dv-dash-orden:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; border-radius: 4px; }
.dv-dash-orden .flecha { font-size: 11px; opacity: .45; } .dv-dash-orden.on .flecha { opacity: 1; }
.dv-dash-pags { justify-content: flex-end; align-items: center; }

/* «¿Qué te parece?» (js/valorar.js, 05/11/2026): tres caritas con el trazo de Devellia */
.dv-valorar-host { transition: opacity .3s ease; } .dv-valorar-host.fuera { opacity: 0; }
.dv-valorar { display: flex; flex-direction: column; gap: 12px; }
.dv-valorar-no { background: none; border: 0; padding: 2px 0; color: var(--dv-ink-3); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dv-valorar-no:hover { color: var(--dv-ink); }
.dv-valorar-caras { display: flex; justify-content: center; gap: 22px; padding: 6px 0; }
.dv-carita { width: 76px; height: 76px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform .15s ease, opacity .15s ease, filter .15s ease; }
.dv-carita:hover, .dv-carita:focus-visible { transform: translateY(-2px) scale(1.08); }
.dv-carita:focus-visible { outline: 3px solid var(--dv-accent); outline-offset: 3px; }
.dv-carita .cara { stroke: var(--dv-ink); stroke-width: 2; }
.dv-carita .ojo { fill: var(--dv-ink); }
.dv-carita .boca { fill: none; stroke: var(--dv-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dv-carita .boca.llena { fill: var(--dv-ink); stroke-width: 2; }
.dv-carita.n1 .cara { fill: #FF8C7F; } .dv-carita.n2 .cara { fill: #FFD25C; } .dv-carita.n3 .cara { fill: var(--dv-lime); }
.dv-valorar.elegida .dv-carita:not(.on) { opacity: .35; filter: grayscale(.6); }
.dv-valorar.elegida .dv-carita.on { transform: scale(1.12); }
.dv-valorar .input { flex: 1; min-width: 0; }
.dv-valorar-host:empty { display: none; }
.dv-carita-mini { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.dv-carita-mini .cara { stroke: var(--dv-ink); stroke-width: 2.4; } .dv-carita-mini .ojo { fill: var(--dv-ink); }
.dv-carita-mini .boca { fill: none; stroke: var(--dv-ink); stroke-width: 3; stroke-linecap: round; } .dv-carita-mini .boca.llena { fill: var(--dv-ink); }
.dv-carita-mini.n1 .cara { fill: #FF8C7F; } .dv-carita-mini.n2 .cara { fill: #FFD25C; } .dv-carita-mini.n3 .cara { fill: var(--dv-lime); }
/* «Danos tu opinión» fijo: en la barra lateral, discreto; en la cabecera, solo la carita (el texto, al pasar por encima) */
.dv-opinion { color: var(--dv-ink-3); } .dv-opinion .dv-carita-mini { width: 20px; height: 20px; }
.dv-top-opinion { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--dv-radius-pill); color: var(--dv-ink-2); font-size: 14px; text-decoration: none; }
.dv-top-opinion .dv-carita-mini { width: 24px; height: 24px; transition: transform .15s ease; }
.dv-top-opinion > span:last-child { display: none; }
.dv-top-opinion:hover .dv-carita-mini, .dv-top-opinion:focus-visible .dv-carita-mini { transform: scale(1.12); }
.dv-side-pie { position: sticky; bottom: -24px; margin: auto -20px -24px; padding: 10px 20px 16px; background: var(--dv-surface); border-top: 1px solid var(--dv-line); display: flex; flex-direction: column; gap: 4px; z-index: 1; }
/* «¡Gracias!» en el centro de la página (js/valorar.js graciasCentro) */
.dv-gracias { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: auto; animation: dv-gracias-in .25s ease-out; transition: opacity .3s ease; }
.dv-gracias.fuera { opacity: 0; }
.dv-gracias-caja { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 36px; max-width: min(380px, 90vw); background: var(--dv-surface); border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius); box-shadow: 0 24px 60px rgba(21, 20, 26, .18); }
.dv-gracias-caja b { font-family: var(--dv-display); font-size: 22px; }
.dv-gracias-cara { width: 72px; height: 72px; animation: dv-gracias-bote .5s ease-out; }
.dv-gracias-cara .cara { fill: var(--dv-lime); stroke: var(--dv-ink); stroke-width: 2; } .dv-gracias-cara .ojo { fill: var(--dv-ink); } .dv-gracias-cara .boca { fill: var(--dv-ink); stroke: var(--dv-ink); stroke-width: 2; }
@keyframes dv-gracias-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dv-gracias-bote { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dv-gracias, .dv-gracias-cara { animation: none; } }
/* Dashboard · Opiniones */
.dv-opi-resumen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.dv-opi-cara { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1.5px solid var(--dv-line); border-radius: var(--dv-radius-sm); background: var(--dv-surface); font: inherit; cursor: pointer; }
.dv-opi-cara b { font-size: 22px; } .dv-opi-cara .dv-carita-mini { width: 32px; height: 32px; }
.dv-opi-cara:hover { border-color: var(--dv-line-2); } .dv-opi-cara.on { border-color: var(--dv-accent); background: var(--dv-accent-soft); }
.dv-carita-mini.grande { width: 26px; height: 26px; }
.dv-opi-texto { display: block; max-width: 520px; white-space: normal; }