/* ═══════════════════════════════════════════════════════════════════════════
   HOME v4 — con el estilo REAL del producto.

   Tokens, cristal, dot-grid azul, cinta con brillo, rejilla dnz-grid, botones
   rzb y cabecera de doble piso salen de estilo-dinaup.css (proto.dinaup.com),
   que a su vez está extraído 1:1 de play.dinaup.com. La portada no enseña un
   pantallazo del producto: monta el producto.

   La página además baja de nivel según bajas: crema/azul claro para cualquiera,
   y termina en el azul marino corporativo (#00215d) para quien programa.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* tokens reales (var.css) */
  --rz-white:#ffffff;
  --rz-base-50:#f8fafb; --rz-base-100:#f3f6f9; --rz-base-200:#e3eaf2;
  --rz-base-300:#dfe5ec; --rz-base-400:#dbe0e6;
  --rz-base-700:#45494f; --rz-base-800:#45494f; --rz-base-900:#1b1d20;
  --rz-primary:#3481e5; --rz-primary-light:#bcd8ff;
  --rz-primary-lighter:rgba(0,111,255,.13);
  --rz-primary-dark:#375a8b; --rz-primary-darker:#00215d;
  /* el lila es «lo has puesto tú»; el azul, «venía en la caja» */
  --tuyo:#8b5cf6; --tuyo-txt:#6d28d9;
  --tuyo-bg:rgba(139,92,246,.13); --tuyo-bd:rgba(139,92,246,.34);
  --rz-success:#3e9108; --rz-warning:#ffc107; --rz-danger:#d35153; --rz-info:#085786;
  --rz-text-color:var(--rz-base-800);
  --rz-text-secondary-color:var(--rz-base-700);
  --rz-text-tertiary-color:#6b7686;
  --rz-text-disabled-color:#9aa7b2;
  --rz-border-color:#d5dbe1;

  /* la escala de fondo de la página, todo dentro de la marca */
  --p0:#FFFFFF; --p1:#F5F9FF; --p2:#EAF2FE; --p3:#DDEAFC;
  --p4:#CFE0F8; --p5:#B9D2F3;
  --n0:#00215d; --n1:#011738; --n2:#010F26;
  --snow:#E8EFFA; --snow-2:#9DB2D2; --snow-3:#6B82A6;

  --sans:'Roboto',system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',Consolas,'SF Mono',monospace;

  --glass:linear-gradient(145deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.66) 100%);
  --glass-sh:0 4px 24px -4px rgba(52,129,229,.12),0 2px 8px -2px rgba(0,33,93,.05),inset 0 1px 0 rgba(255,255,255,.9);
  --glass-sh-hi:0 16px 40px -8px rgba(52,129,229,.28),0 4px 16px -4px rgba(0,33,93,.1),inset 0 1px 0 rgba(255,255,255,.95);
  --dots:radial-gradient(rgba(52,129,229,.10) 1.2px,transparent 1.2px) 0 0/28px 28px;
  --dots-n:radial-gradient(rgba(188,216,255,.085) 1.2px,transparent 1.2px) 0 0/28px 28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--rz-text-color);
  -webkit-font-smoothing:antialiased;background:var(--p1);overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(52,129,229,.2)}
.msr{
  font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  font-variation-settings:'FILL' 0,'wght' 400,'opsz' 24;line-height:1;letter-spacing:normal;
  text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;user-select:none;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 36px}
section{position:relative}

/* ── Tipografía ── */
h1{font-family:var(--disp);font-size:clamp(32px,4.1vw,54px);font-weight:600;line-height:1.06;
   letter-spacing:-.035em;color:var(--rz-primary-darker)}
h2{font-family:var(--disp);font-size:clamp(28px,3.9vw,48px);font-weight:600;line-height:1.08;
   letter-spacing:-.035em;color:var(--rz-primary-darker)}
h3{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.3;
   color:var(--rz-primary-darker)}
.tec h2,.tec h3{font-family:var(--mono);font-weight:500;letter-spacing:-.02em}
.tec h2{font-size:clamp(24px,3.1vw,38px)}
.tec h3{font-size:17px}
.big{font-size:clamp(19px,1.65vw,23px);line-height:1.55;color:var(--rz-text-secondary-color);max-width:46ch}
.sub{font-size:18px;color:var(--rz-text-secondary-color);max-width:54ch;line-height:1.6}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rz-primary);
}
.eyebrow .msr{font-size:17px}
.dark{color:var(--snow)}
.dark h2,.dark h3{color:var(--snow)}
.dark .sub,.dark .big{color:var(--snow-2)}
.dark .eyebrow{color:var(--rz-primary-light)}

/* ── Botones (rzb, versión landing) ── */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 26px;border:0;border-radius:12px;cursor:pointer;white-space:nowrap;
  font:600 17px var(--disp);letter-spacing:-.01em;
  transition:background .16s ease,box-shadow .18s ease,transform .18s cubic-bezier(.4,0,.2,1);
}
.b .msr{font-size:20px}
.b--primary{background:var(--rz-primary);color:#fff;box-shadow:0 6px 18px -6px rgba(52,129,229,.7),0 1px 2px rgba(0,33,93,.18)}
.b--primary:hover{background:#2f6fd0;transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(52,129,229,.8)}
.b--light{background:rgba(255,255,255,.8);color:var(--rz-primary-darker);box-shadow:inset 0 0 0 1px rgba(52,129,229,.28)}
.b--light:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(52,129,229,.5),0 8px 20px -10px rgba(0,33,93,.3)}
.dark .b--light{background:rgba(255,255,255,.07);color:var(--snow);box-shadow:inset 0 0 0 1px rgba(188,216,255,.28)}
.dark .b--light:hover{background:rgba(255,255,255,.13)}
.b--sm{height:38px;padding:0 16px;font-size:14.5px;border-radius:9px}
.lnk-b{color:var(--rz-primary);font-weight:600}
.dark .lnk-b{color:var(--rz-primary-light)}
.lnk-b .msr{font-size:17px;vertical-align:-3px;transition:transform .16s ease;display:inline-block}
.lnk-b:hover .msr{transform:translateX(3px)}

/* ══ NAV de la landing ══ */
.nav{position:sticky;top:0;z-index:70;
  background:rgba(255,255,255,.74);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(52,129,229,.12);box-shadow:0 1px 0 rgba(52,129,229,.08);
  transition:background .45s ease,border-color .45s ease}
.nav.night{background:rgba(1,15,38,.78);border-bottom-color:rgba(188,216,255,.16);box-shadow:none}
.nav-in{display:flex;align-items:center;gap:36px;height:68px}
.nav-in>a img{height:26px}
.logo-n{display:none}
.nav.night .logo-d{display:none}
.nav.night .logo-n{display:block}
.nav-menu{display:flex;gap:6px}
.nav-menu a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:6px;
  font:500 15px var(--sans);color:var(--rz-text-secondary-color);transition:color .15s ease,background .15s ease}
.nav-menu a .msr{font-size:19px}
.nav-menu a:hover{color:var(--rz-primary);background:rgba(52,129,229,.08)}
.nav.night .nav-menu a{color:var(--snow-2)}
.nav.night .nav-menu a:hover{color:#fff;background:rgba(188,216,255,.1)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:15px}
.nav.night .nav-right>a:first-child{color:var(--snow-2)}


/* ══ REVELADO ══ */
[data-r]{opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms)}
[data-r="up"]{transform:translateY(28px)}
[data-r="zoom"]{transform:scale(.96)}
[data-r="left"]{transform:translateX(-26px)}
[data-r="right"]{transform:translateX(26px)}
.in[data-r]{opacity:1;transform:none}

/* ═════════════ PORTADA ═════════════ */
.hero{background:var(--dots),linear-gradient(135deg,#F5F9FF 0%,#FFFFFF 45%,#E8F1FF 100%);
  padding:104px 0 104px;overflow:hidden}
.hero-halo{position:absolute;top:-300px;left:50%;transform:translateX(-50%);width:1300px;height:800px;
  pointer-events:none;background:radial-gradient(ellipse 44% 46% at 50% 50%,rgba(52,129,229,.16),transparent 70%)}
.hero-in{position:relative;z-index:2}
.hero-top{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.82fr);gap:64px;align-items:center}
/* El logo del hero, en su propia fila y centrado en la PÁGINA. Ancho con
   clamp y alto por la proporción real del SVG (3213x751), así que no hay
   salto de maquetación mientras carga. */
.hero-logo{display:block;width:clamp(230px,26vw,380px);height:auto;margin:0 auto 18px}
.hero h1{max-width:12ch}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u{color:var(--rz-success)}
.hero h1 .u:after{content:'';position:absolute;left:-4px;right:-4px;bottom:.04em;height:.26em;border-radius:.05em;
  background:rgba(62,145,8,.2);z-index:-1;transform-origin:left}
/* Sin JS el subrayado está y ya: la animación sólo la pone la clase, que el
   JS quita y vuelve a poner con cada palabra de la rueda. Así el trazo se
   repinta a la vez que cambia Excel por Access, en lugar de dibujarse una
   sola vez al cargar y no volver a hacer nada. */
.hero h1 .u.pinta:after{animation:swipe .85s cubic-bezier(.22,1,.36,1) both}

/* ── La rueda del titular ──
   El ancho lo pone el JS midiendo cada palabra, no un número escrito a mano:
   con un ancho fijo el punto final se queda descolgado en las cortas y pisado
   en las largas. Y se mide con las fuentes ya cargadas — antes de eso Excel
   mide lo que mida la fuente de reserva, que no es la buena.
   Los iconos son los genéricos de la página teñidos con el color de cada
   marca: el logo de Excel y el de Access son marcas registradas de Microsoft
   y no pintan nada en la portada de un competidor. */
.hero h1 .rueda{display:inline-block;white-space:nowrap;
  transition:width .55s cubic-bezier(.4,0,.2,1)}
.hero h1 .rw{display:inline-block;white-space:nowrap;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.hero h1 .rw.fuera{opacity:0;transform:translateY(.16em)}
.hero h1 .rw .msr{font-size:.72em;margin-right:.14em;vertical-align:-.02em}
.hero h1 .es-excel {color:#217346}
.hero h1 .es-access{color:#a4373a}
.hero h1 .es-erp   {color:var(--rz-primary)}
@media (prefers-reduced-motion:reduce){
  .hero h1 .rueda{transition:none}
  .hero h1 .rw{transition:none}
}
@keyframes swipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .big{margin-top:26px}
.hero-sub{margin-top:16px;max-width:46ch;font-size:17px;line-height:1.55;
  color:var(--rz-text-secondary-color)}
.hero-ctas{display:flex;gap:13px;margin-top:38px;flex-wrap:wrap;align-items:center}
/* El «hay más abajo». Va centrado al final del hero y es un ENLACE de verdad
   al primer bloque: quien lo pulsa baja, y quien navega con teclado lo
   encuentra en el tabulador. La flecha se mece con la misma animación que la
   de la frontera, para que las dos flechas de la página se muevan igual. */
.hero-baja{display:flex;flex-direction:column;align-items:center;gap:1px;
  margin:0 auto 86px;width:max-content;color:var(--rz-text-tertiary-color);
  transition:color .2s ease}
.hero-baja:hover{color:var(--rz-primary)}
.hero-baja span{font:600 11.5px var(--disp);letter-spacing:.16em;text-transform:uppercase}
.hero-baja .msr{font-size:26px;animation:bob 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .hero-baja .msr{animation:none} }
.hero-claim{margin-top:26px;font-size:14.5px;color:var(--rz-text-tertiary-color)}
.hero-claim b{color:var(--rz-primary-dark);font-weight:600}

/* ── El escenario: la app de verdad + la hoja que deja atrás ── */
.app-win{
  border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid rgba(52,129,229,.16);
  box-shadow:0 50px 100px -40px rgba(0,33,93,.42),0 10px 30px -14px rgba(0,33,93,.18);
  animation:rise 1s cubic-bezier(.22,1,.36,1) both .2s;
}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* cabecera doble piso (AppHeaderU) */
.ah-shell{display:flex;flex-direction:column;width:100%;background:rgba(255,255,255,.9)}
.ah-top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:4px 16px}
.ah-top-left{display:flex;align-items:center;gap:8px;min-width:0}
.ah-top-left img{height:26px;display:block}
.ah-top-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ah-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;
  background:transparent;border-radius:999px;color:var(--rz-text-secondary-color);transition:background .15s ease}
.ah-btn:hover{background:var(--rz-base-200);color:var(--rz-text-color)}
.ah-btn .msr{font-size:21px}
.proto-pill{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:4px 10px;border-radius:20px;
  font:700 10.5px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--rz-primary-darker);
  background:rgba(52,129,229,.12);border:1px solid rgba(52,129,229,.22)}
.proto-pill .msr{font-size:13px}
/* Las caras de la página son fotos, y son SIEMPRE las mismas cuatro que ya
   salen dentro de la película: ni un fichero nuevo ni una licencia nueva que
   arrastrar. El div recorta la foto — con box-sizing:border-box el contenido
   ya es el círculo de dentro del aro amarillo. */
.proto-avatar{display:block;width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:var(--rz-base-200);border:3px solid #F7BD00;margin-left:4px;flex:none}
/* object-fit:cover y no width:100% a secas: las fotos son cuadradas hoy, pero
   una que no lo sea saldría estirada en vez de recortada. */
.proto-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.cara{display:block;width:var(--c,24px);height:var(--c,24px);border-radius:50%;
  overflow:hidden;flex:none;background:var(--rz-base-200)}
.cara img{display:block;width:100%;height:100%;object-fit:cover}
.ah-nav{width:100%;padding:0 12px;border-top:1px solid var(--rz-base-200)}
.ah-list{display:flex;align-items:stretch;justify-content:center;gap:4px;height:44px;margin:0;padding:0;list-style:none}
.ah-list li{display:inline-flex;align-items:stretch}
.ah-chip{display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 11px;
  color:var(--rz-text-secondary-color);font:500 13.5px/1 var(--sans);letter-spacing:-.01em;
  border-radius:6px;white-space:nowrap;transition:color .15s ease,background .15s ease}
.ah-chip .msr{font-size:19px}
.ah-chip:hover{color:var(--rz-text-color);background:var(--rz-base-200)}
.ah-chip.is-active{color:var(--rz-primary);font-weight:600;background:transparent}
.ah-sep{width:1px;align-self:center;height:19px;background:var(--rz-border-color);margin:0 5px}
/* la cinta con brillo que recorre */
.ah-ribbon-wrap{position:relative;width:100%;height:2px}
.ah-ribbon{height:2px;width:100%;position:relative;z-index:1;overflow:hidden;
  background:linear-gradient(90deg,transparent 0%,#3481e5 20%,#bcd8ff 50%,#3481e5 80%,transparent 100%)}
.ah-ribbon-glow{height:3px;width:100%;position:absolute;top:-1px;left:0;z-index:0;filter:blur(6px);opacity:.9;
  pointer-events:none;background:linear-gradient(90deg,transparent 0%,#3481e5 20%,#bcd8ff 50%,#3481e5 80%,transparent 100%)}
.ah-ribbon::after{content:"";position:absolute;top:0;left:-50%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);pointer-events:none;
  animation:shimmer 3.2s ease-in-out infinite}
@keyframes shimmer{0%{left:-50%}100%{left:150%}}

/* cuerpo: sidebar de cristal + lienzo con dot-grid */
.app-body{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:566px}
.app-side{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(245,249,255,.84) 100%);
  border-right:1px solid rgba(52,129,229,.12);padding:14px 10px}
.side-h{display:flex;align-items:center;gap:8px;padding:6px 10px 12px;
  font:600 13px var(--disp);color:var(--rz-primary-darker)}
.side-h .msr{font-size:20px;color:var(--rz-primary)}
.side-t{padding:12px 10px 6px;font:600 10px var(--disp);letter-spacing:.13em;text-transform:uppercase;
  color:var(--rz-text-tertiary-color)}
/* En la ventana de la app, lo personalizado va en lila igual que en el resto
   de la página: es la misma idea y tiene que ser el mismo color. */
.side-t.es-tuyo{color:var(--tuyo-txt)}
.side-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font:400 13.5px var(--sans);color:var(--rz-text-color);transition:background .15s ease,color .15s ease}
.side-i .msr{font-size:20px;color:var(--rz-primary)}
.side-i:hover{background:rgba(52,129,229,.08);color:var(--rz-primary)}
.side-i.active{background:rgba(52,129,229,.14);color:var(--rz-primary);font-weight:600}
.side-i .n{margin-left:auto;font:400 11px var(--mono);color:var(--rz-text-tertiary-color)}
.app-canvas{background:var(--dots),linear-gradient(135deg,#F5F9FF 0%,#FFFFFF 45%,#E8F1FF 100%);
  box-shadow:inset 0 9px 12px -9px rgba(0,33,93,.16);padding:14px 18px 20px;min-width:0}
.crumb{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:12.5px;color:var(--rz-text-tertiary-color)}
.crumb .msr{font-size:16px}
.crumb b{color:var(--rz-text-color);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.crumb b .msr{color:var(--rz-primary)}
.panel{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.panel-h{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-bottom:1px solid var(--rz-base-300)}
.panel-h .ttl{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--disp);color:var(--rz-primary-darker)}
.panel-h .ttl .msr{font-size:19px;color:var(--rz-primary)}
.panel-h .tools{margin-left:auto;display:flex;align-items:center;gap:7px}
.fakesearch{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;width:190px;
  border:1px solid var(--rz-base-300);border-radius:6px;background:#fff;
  font-size:12.5px;color:var(--rz-text-disabled-color)}
.fakesearch .msr{font-size:17px}
.rzb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 11px;border:0;
  border-radius:6px;font:500 12.5px var(--sans);letter-spacing:.01em;white-space:nowrap}
.rzb .msr{font-size:17px}
.rzb--primary{background:var(--rz-primary);color:#fff;box-shadow:0 1px 2px rgba(0,33,93,.18)}
.rzb--light{background:var(--rz-base-100);color:var(--rz-text-secondary-color);box-shadow:inset 0 0 0 1px var(--rz-base-300)}

/* rejilla real (dnz-grid) */
.dnz-grid{width:100%;border-collapse:collapse;font-size:13px}
.dnz-grid thead th{padding:9px 11px;text-align:left;white-space:nowrap;font:600 12px var(--sans);
  color:var(--rz-text-color);background:#fff;border-bottom:1px solid var(--rz-base-300)}
.dnz-grid thead th.num{text-align:right}
.dnz-grid tbody td{padding:9px 11px;border-bottom:1px solid var(--rz-base-200);vertical-align:middle}
.dnz-grid tbody tr{transition:background .12s ease}
.dnz-grid tbody tr:nth-child(even){background:rgba(243,246,249,.5)}
.dnz-grid tbody tr:hover{background:rgba(52,129,229,.07)}
.dnz-grid .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dnz-grid .cod{font-family:var(--mono);font-size:11.5px;color:var(--rz-text-secondary-color)}
.dnz-grid .rel{color:var(--rz-primary);font-weight:500}
.dnz-grid tbody tr:last-child td{border-bottom:none}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font:600 11.5px var(--sans)}
.tag--pri{background:rgba(52,129,229,.12);color:var(--rz-primary-darker)}
.tag--nor{background:var(--rz-base-100);color:var(--rz-text-secondary-color);box-shadow:inset 0 0 0 1px var(--rz-base-300)}
.tag--ok{background:rgba(62,145,8,.1);color:var(--rz-success)}
.panel-f{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--rz-base-200);
  background:var(--rz-base-50);font-size:12px;color:var(--rz-text-tertiary-color)}
.panel-f .msr{font-size:15px;color:var(--rz-success)}
.panel-f b{color:var(--rz-text-secondary-color);font-weight:600}

/* la hoja de antes, saliendo por la esquina */
.hoja{
  position:relative;background:#fff;border:1px solid var(--rz-base-300);
  border-radius:10px;overflow:hidden;
  box-shadow:0 30px 56px -22px rgba(0,33,93,.34),0 3px 10px -4px rgba(0,33,93,.12);
  transform:rotate(2.2deg);
  animation:caer 1.1s cubic-bezier(.22,1,.36,1) both .45s;
}
@keyframes caer{
  from{opacity:0;transform:rotate(6deg) translateY(-26px) scale(.96)}
  to{opacity:1;transform:rotate(2.2deg) translateY(0) scale(1)}
}
.hoja-h{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;background:var(--rz-base-100);
  border-bottom:1px solid var(--rz-base-300);font:400 11.5px var(--mono);color:var(--rz-text-secondary-color)}
.hoja-h i.sq{width:9px;height:11px;background:#1D6F42;flex:none;border-radius:1px}
.hoja-h .st{margin-left:auto;color:var(--rz-danger);font-size:9.5px;letter-spacing:.08em;font-weight:500}
.xl{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.xl th,.xl td{border-right:1px solid #EDEFF2;border-bottom:1px solid #EDEFF2;padding:0 8px;height:31px;
  text-align:left;font-weight:400;color:#2B323C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl thead th{font-family:var(--mono);font-size:9.5px;color:var(--rz-text-disabled-color);text-align:center;
  height:20px;background:var(--rz-base-100)}
.xl .ix{font-family:var(--mono);font-size:9.5px;color:var(--rz-text-disabled-color);text-align:center;
  width:26px;background:var(--rz-base-100)}
.xl .err{color:var(--rz-danger);font-family:var(--mono);font-size:11px}
.xl .dim{color:var(--rz-text-disabled-color);font-style:italic}
.xl .hi{background:#FDF4DC;color:#8A6410}
.hoja-lbl{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px 4px;
  font:600 11px var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--rz-danger)}
.hoja-lbl .msr{font-size:15px}

/* ═══════════════════════════════════════════════════════════════
   LA VISTA DE EJEMPLO QUE SE MONTA SOLA
   Nueve pasos: empresa vacía → sección → editor de formulario
   (añadir campo, elegir tipo, mover/estirar/cambiar de pestaña)
   → datos del .xlsx → informe → quién ve qué.
   Tokens del modal, pestañas y campos: dinazen-forms.css vía
   estilo-dinaup.css (proto.dinaup.com).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --dnz-input-height:30px; --dnz-label-font-size:11px; --dnz-input-font-size:13px;
  --dnz-input-radius:6px; --dnz-input-bg:#fff; --dnz-input-border:#dfe5ec;
  --dnz-label-color:#6b7280; --dnz-header-bg:#fff; --dnz-header-border:#eef1f5;
  --dnz-surface-raised:#f8fafb; --dnz-tab-content-bg:#f0f1f3;
  --dnz-error-color:#dc2626; --dnz-focus-ring:0 0 0 3px rgba(52,129,229,.15);
}
.escena{position:relative;margin-top:56px}
.app-win{position:relative}
[hidden]{display:none!important}

/* apariciones */
@keyframes aparece{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes celda{from{opacity:0}to{opacity:1}}
@keyframes fila{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
/* animation-delay:var(--d) — sin esto, TODO lo que aparecía en un paso
   destellaba en el mismo fotograma: 40 elementos en un segundo, contra los 3
   que marca la WCAG. El retardo lo reparte y lo convierte en cascada. */
.just{animation:aparece .8s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
th.just,td.just{animation:celda 1s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
tr.just{animation:fila .75s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
tr.just td{animation:none}
.pop{display:inline-block;animation:pop .7s ease;animation-delay:var(--d,0ms)}

/* lienzo vacío */
.vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:456px;text-align:center;color:var(--rz-text-tertiary-color)}
.vacio .msr{font-size:46px;color:var(--rz-primary);opacity:.35}
.vacio b{font:600 16px var(--disp);color:var(--rz-text-secondary-color)}
.vacio span{font-size:13.5px}

/* barra lateral */
.side-wrap{position:relative}
.side-add{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;border-radius:8px;
  font:500 13.5px var(--sans);color:var(--rz-primary);border:1px dashed rgba(52,129,229,.4);
  background:rgba(52,129,229,.05)}
.side-add .msr{font-size:19px}
.sinfichas td{text-align:center;color:var(--rz-text-disabled-color);font-size:12.5px;padding:22px 10px!important}
.mia{position:relative}
.mia:after{content:'Personalizado';margin-left:7px;vertical-align:1px;font:600 9px var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tuyo-txt);background:var(--tuyo-bg);border-radius:4px;padding:2px 5px}

/* ── El menú del clic derecho ── */
.ctx{position:absolute;top:30px;left:26px;z-index:26;min-width:196px;padding:6px;
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 14px 34px rgba(22,34,46,.24);
  animation:aparece .2s cubic-bezier(.22,1,.36,1) both}
.ah-adv-title{padding:8px 10px 6px;font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;
  color:var(--rz-text-disabled-color)}
.ah-adv-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:7px;
  color:var(--rz-text-color);font:500 13.5px/1 var(--sans)}
.ah-adv-item .msr{font-size:19px;color:var(--rz-text-secondary-color)}
.ah-adv-item.is-sel{background:rgba(52,129,229,.12);color:var(--rz-primary)}
.ah-adv-item.is-sel .msr{color:var(--rz-primary)}
.ah-adv-item.danger{color:var(--rz-danger)}
.ah-adv-item.danger .msr{color:var(--rz-danger)}

/* ── Quién ve qué ── */
.comparte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:28;
  width:min(520px,92%);background:#fff;border:1px solid var(--rz-base-300);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,33,93,.5);animation:dnzPop .22s cubic-bezier(.4,0,.2,1) both}
@keyframes dnzPop{from{opacity:0;transform:translate(-50%,-46%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%)}}
.comparte-h{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(135deg,var(--dnz-surface-raised) 0%,#fff 100%);
  border-bottom:1px solid var(--dnz-header-border)}
.comparte-h b{display:block;font:600 14.5px var(--disp);color:var(--rz-primary-darker)}
.comparte-h small{display:block;font-size:12px;color:var(--rz-text-tertiary-color);margin-top:1px}
.comparte-t{width:100%;border-collapse:collapse;font-size:13px}
.comparte-t th{padding:9px 14px;text-align:left;font:600 11px var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--rz-text-tertiary-color);border-bottom:1px solid var(--rz-base-300)}
.comparte-t td{padding:10px 14px;border-bottom:1px solid var(--rz-base-200);color:var(--rz-text-color)}
.comparte-t tbody tr:last-child td{border-bottom:none}
.comparte-t th:not(:first-child),.comparte-t td:not(:first-child){text-align:center;width:64px}
.comparte-t .s{color:var(--rz-success);font-weight:600}
.comparte-t .no{color:var(--rz-text-disabled-color)}
.comparte-f{display:flex;align-items:center;gap:9px;padding:11px 16px;background:var(--rz-base-50);
  border-top:1px solid var(--rz-base-200);font-size:12.5px;color:var(--rz-text-secondary-color)}
.comparte-f .msr{font-size:17px;color:var(--rz-primary)}

/* ── El editor del formulario ── */
.dnz-overlay{position:absolute;inset:0;z-index:24;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(11,25,48,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:dnzFade .18s ease both}
@keyframes dnzFade{from{opacity:0}to{opacity:1}}
.dnz-modal{display:flex;flex-direction:column;width:min(700px,96%);max-height:100%;background:#fff;
  border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,33,93,.5),0 2px 8px rgba(0,33,93,.12);
  animation:dnzPop2 .22s cubic-bezier(.4,0,.2,1) both}
@keyframes dnzPop2{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.dnz-modal-header{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:56px;
  background:linear-gradient(135deg,var(--dnz-surface-raised) 0%,#fff 100%);
  border-bottom:1px solid var(--dnz-header-border);font:600 14px var(--sans);color:var(--rz-text-color)}
.dnz-modal-header-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;
  border-radius:8px;background:linear-gradient(145deg,rgba(52,129,229,.08) 0%,rgba(188,216,255,.22) 100%);
  border:1px solid rgba(52,129,229,.14)}
.dnz-modal-header-icon .msr{font-size:20px;color:var(--rz-primary)}
.dnz-modal-title{font:600 15px var(--disp);letter-spacing:-.01em;color:var(--rz-primary-darker)}
.dnz-modal-toolbar{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.dnz-loadtime{font-size:11.5px;color:var(--rz-text-tertiary-color);white-space:nowrap}
.dnz-loadtime b{color:var(--rz-text-secondary-color);font-weight:600}

.dnz-tabs{display:flex;gap:2px;padding:0 12px;background:#fff;border-bottom:1px solid var(--dnz-header-border)}
.dnz-tab{padding:10px 14px;font:500 13px var(--sans);color:var(--rz-text-secondary-color);
  border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease}
.dnz-tab.is-active{color:var(--rz-primary);border-bottom-color:var(--rz-primary);font-weight:600}
.dnz-tab--add{color:var(--rz-text-disabled-color);padding:10px 10px}
.dnz-tab--add .msr{font-size:17px;vertical-align:-3px}

.dnz-modal-body{flex:1;min-height:200px;overflow:auto;background:var(--dnz-tab-content-bg)}
.dnz-form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:18px}
.dnz-field{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.dnz-field>label{font:500 var(--dnz-label-font-size) var(--sans);color:var(--dnz-label-color);
  letter-spacing:.02em;text-transform:uppercase}
.dnz-field.req>label:after{content:'*';color:var(--dnz-error-color);font-weight:700;font-size:13px;margin-left:3px}
.dnz-input{display:flex;align-items:center;width:100%;height:var(--dnz-input-height);padding:0 10px;
  font:400 var(--dnz-input-font-size) var(--sans);color:var(--rz-text-color);background:var(--dnz-input-bg);
  border:1px solid var(--dnz-input-border);border-radius:var(--dnz-input-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dnz-fake{color:var(--rz-text-secondary-color)}
.dnz-help{font-size:11px;color:var(--rz-text-tertiary-color);line-height:1.35;margin-top:2px}
.dnz-nuevo{margin-top:3px;font:600 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--rz-primary)}
.dnz-form-sep{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 -4px;
  font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rz-primary-darker)}
.dnz-form-sep:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(52,129,229,.28),transparent)}
.dnz-modal-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;min-height:52px;
  background:linear-gradient(135deg,var(--dnz-surface-raised) 0%,#fff 100%);
  border-top:1px solid var(--dnz-header-border)}
.dnz-footer-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* el campo que estás colocando */
.campo-sel{outline:2px dashed rgba(52,129,229,.65);outline-offset:6px;border-radius:4px}
.tirador{position:absolute;width:9px;height:9px;border-radius:2px;background:#fff;
  border:2px solid var(--rz-primary);box-shadow:0 1px 3px rgba(0,33,93,.3)}
.tirador.tl{left:-10px;top:-10px}.tirador.tr{right:-10px;top:-10px}
.tirador.bl{left:-10px;bottom:12px}.tirador.br{right:-10px;bottom:12px}

/* selector de tipo de campo */
.tipos{position:absolute;top:0;left:0;z-index:26;width:264px;padding:6px;background:#fff;
  border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 14px 34px rgba(22,34,46,.24);
  animation:soloFade .2s ease both}
@keyframes soloFade{from{opacity:0}to{opacity:1}}
.tipos-l{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tipo{display:flex;align-items:center;gap:7px;height:32px;padding:0 8px;border-radius:6px;
  font:400 12.5px var(--sans);color:var(--rz-text-color)}
.tipo .msr{font-size:17px;color:var(--rz-text-secondary-color)}
.tipo.is-sel{background:rgba(52,129,229,.13);color:var(--rz-primary);font-weight:600}
.tipo.is-sel .msr{color:var(--rz-primary)}

/* el informe */
.informe{margin-top:12px;background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.informe-h{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;
  border-bottom:1px solid var(--rz-base-300);font:600 13px var(--disp);color:var(--rz-primary-darker)}
.informe-h .msr{font-size:18px;color:var(--rz-primary)}
.informe-h span{margin-left:auto;font:400 11px var(--mono);color:var(--rz-text-tertiary-color)}
.barras{display:flex;align-items:flex-end;gap:26px;height:120px;padding:16px 20px 0}
.barra{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.barra i{display:block;width:100%;max-width:74px;border-radius:6px 6px 0 0;height:var(--h);transform-origin:bottom;
  background:linear-gradient(180deg,#5B9BEC,#3481e5);animation:crecer .8s cubic-bezier(.22,1,.36,1) both var(--bd,0ms)}
.barra.b2 i{background:linear-gradient(180deg,#93BEF5,#6AA4EA)}
.barra.b3 i{background:linear-gradient(180deg,#C7DCF8,#A6C6EF)}
@keyframes crecer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.barra b{font:600 12px var(--sans);color:var(--rz-primary-darker)}
.barras-pie{display:flex;gap:26px;padding:8px 20px 14px}
.barras-pie span{flex:1;text-align:center;font:400 11.5px var(--sans);color:var(--rz-text-tertiary-color)}

/* marcador */
.win-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 16px;
  border-top:1px solid var(--rz-base-200);background:var(--rz-base-50);
  font:400 12.5px var(--sans);color:var(--rz-text-tertiary-color)}
.win-foot .msr{font-size:16px;color:var(--rz-primary)}
.win-foot em{font-style:normal;color:var(--rz-text-secondary-color)}
.win-foot b{font-weight:700;color:var(--rz-primary-darker);font-variant-numeric:tabular-nums}
.win-foot .sep{color:var(--rz-base-400)}

/* puntero */
/* EL ORIGEN DEL ELEMENTO ES LA PUNTA DE LA FLECHA. El dibujo se desplaza para
   que su punto sensible —(5, 2.5) dentro del viewBox— caiga en (0,0), y así
   translate(x,y) la clava en (x,y) sin corregir nada después. Antes se
   compensaba con un -4 y un -2 a ojo, y por eso los clics no caían centrados.
   Y la transición dura EXACTAMENTE lo que espera el JS antes de pulsar (.34s):
   con .55s el puntero hacía clic mientras todavía iba volando. */
.cursor{position:absolute;top:0;left:0;z-index:40;width:0;height:0;pointer-events:none;opacity:0;
  transition:transform .46s cubic-bezier(.33,.02,.2,1),opacity .26s ease;will-change:transform}
.cursor.on{opacity:1}
.cursor.junto{transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .26s ease}
.cursor svg{width:24px;height:24px;display:block;margin:-2.5px 0 0 -5px;
  filter:drop-shadow(0 2px 5px rgba(0,33,93,.45))}
.cursor .flecha{display:block}
.cursor .ancho{display:none}
.cursor.redim .flecha{display:none}
.cursor.redim .ancho{display:block}
.cursor .ping{position:absolute;top:-17px;left:-17px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--rz-primary);opacity:0}
.cursor.click .ping{animation:ping .55s ease-out}
.cursor.derecho .ping{border-color:var(--rz-primary-darker)}
@keyframes ping{from{transform:scale(.35);opacity:.85}to{transform:scale(1.5);opacity:0}}
.cursor-lbl{position:absolute;left:20px;top:20px;white-space:nowrap;padding:3px 8px;border-radius:6px;
  background:var(--rz-primary-darker);color:#fff;font:600 10px var(--sans);letter-spacing:.06em;
  text-transform:uppercase;opacity:0;transition:opacity .2s ease}
.cursor.derecho .cursor-lbl,.cursor.dice .cursor-lbl{opacity:1}
.cursor-lbl{transform:translateY(0);transition:opacity .2s ease}

/* avisos */
.toast-stack{position:absolute;right:16px;bottom:74px;z-index:42;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:12px;background:#fff;
  border:1px solid var(--rz-base-300);box-shadow:0 12px 30px -12px rgba(0,33,93,.45);
  animation:toastIn .35s cubic-bezier(.22,1,.36,1) both;max-width:330px}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(18px)}}
.toast .msr{font-size:21px;color:var(--rz-success);flex:none}
.toast-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.toast-t{font:700 13px var(--sans);color:var(--rz-primary-darker)}
.toast-x{font:400 12.5px var(--sans);color:var(--rz-text-secondary-color);line-height:1.35}

/* barra de pasos */
.rail{display:flex;align-items:center;gap:14px;margin:18px auto 0;padding:9px 9px 9px 12px;width:fit-content;
  max-width:100%;border-radius:14px;background:var(--glass);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-sh)}
.rail-play{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  border:0;border-radius:9px;background:var(--rz-primary);color:#fff;cursor:pointer;
  box-shadow:0 3px 10px -4px rgba(52,129,229,.9)}
.rail-play .msr{font-size:19px}
.rail-play:hover{background:#2f6fd0}
.rail-segs{display:flex;gap:5px;flex:none}
.seg{position:relative;width:30px;height:6px;padding:0;border:0;border-radius:3px;cursor:pointer;
  background:rgba(52,129,229,.2);overflow:hidden;transition:background .25s ease}
.seg:hover{background:rgba(52,129,229,.4)}
.seg.done{background:var(--rz-primary)}
.seg.cur{background:rgba(52,129,229,.25);box-shadow:0 0 0 2px rgba(52,129,229,.3)}
.seg.cur i{position:absolute;inset:0;width:0;background:var(--rz-primary);border-radius:3px;
  animation:llenar var(--dur,2600ms) linear both}
.seg.cur.pausada i{animation-play-state:paused}
@keyframes llenar{from{width:0}to{width:100%}}
.rail-txt{display:flex;align-items:baseline;gap:7px;font:500 13px var(--sans);color:var(--rz-primary-darker);
  white-space:nowrap;padding-right:6px}
.rail-txt em{font-style:normal;font:400 11px var(--mono);color:var(--rz-text-tertiary-color)}

.grid-scroll{overflow-x:auto}

@media (max-width:760px){
  .rail{flex-wrap:wrap;justify-content:center;padding:10px 12px;gap:10px}
  .rail-txt{width:100%;justify-content:center;padding:0;white-space:normal;text-align:center}
  .seg{width:20px}
  .toast-stack{right:10px;left:10px;bottom:70px;align-items:stretch}
  .toast{max-width:none}
  .cursor{display:none}
  .barras{gap:14px;padding:14px 12px 0}
  .barras-pie{gap:14px;padding:8px 12px 12px}
  .proto-pill{display:none}
  .panel-h{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .panel-h .tools{margin-left:0;width:100%}
  .fakesearch{display:none}
  .rzb{flex:1}
  .dnz-grid{min-width:520px}
  .app-body{min-height:0}
  .vacio{min-height:300px}
  .win-foot{font-size:11.5px;gap:6px}
  .dnz-overlay{padding:10px}
  .dnz-modal{width:100%}
  .tipos{right:10px;top:60px;width:240px}
  .comparte{width:96%}
  .comparte-t th:not(:first-child),.comparte-t td:not(:first-child){width:46px;font-size:12px}
  .comparte-t th,.comparte-t td{padding:8px 9px}
  .ctx{left:10px}
}
@media (prefers-reduced-motion:reduce){
  .seg.cur i{animation:none;width:100%}
  .cursor{display:none}
}

/* ═════════════ TRES PASOS ═════════════ */
.s-pasos{background:var(--dots),linear-gradient(180deg,var(--p0) 0%,var(--p1) 100%);padding:104px 0}
.pasos{display:grid;gap:22px;margin-top:48px}
.paso{display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1.02fr);gap:32px;align-items:center;
  background:var(--glass);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:32px 36px;box-shadow:var(--glass-sh);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease,border-color .25s ease}
.paso:hover{transform:translateY(-4px);box-shadow:var(--glass-sh-hi);border-color:rgba(52,129,229,.3)}
.paso-n{font:700 54px var(--disp);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(52,129,229,.45);
  letter-spacing:-.05em}
.paso h3{font-size:25px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.paso h3 .msr{font-size:26px;color:var(--rz-primary)}
.paso p{color:var(--rz-text-secondary-color);font-size:16.5px;max-width:36ch}
.mini{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.mini-h{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--rz-base-50);
  border-bottom:1px solid var(--rz-base-300);font:600 12px var(--disp);color:var(--rz-primary-darker)}
.mini-h .msr{font-size:17px;color:var(--rz-primary)}
.mini-h em{margin-left:auto;font-style:normal;font:400 11px var(--mono);
  color:var(--rz-text-tertiary-color)}
.mini-r{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-bottom:1px solid var(--rz-base-200);
  font-size:13.5px}
.mini-r:last-child{border-bottom:none}
.mini-r .msr{font-size:18px;color:var(--rz-primary)}
.mini-r .nm{flex:1;color:var(--rz-text-color)}
.mini-r .ty{font:400 11px var(--mono);color:var(--rz-text-tertiary-color);
  border:1px solid var(--rz-base-300);border-radius:5px;padding:2px 7px}
.mini-r.ghost{color:var(--rz-primary);font:500 12.5px var(--sans)}
.mini-dev{display:flex;gap:14px;padding:18px 14px;align-items:flex-end;justify-content:center;background:var(--rz-base-50)}
.dev{border:2px solid var(--rz-base-400);border-radius:9px;background:#fff;overflow:hidden}
.dev-pc{width:152px;height:98px;border-radius:9px 9px 3px 3px}
.dev-mb{width:54px;height:90px;border-radius:11px}
.dev-l{height:6px;border-radius:3px;background:rgba(52,129,229,.22);margin:8px 10px}
.dev-l.s{width:52%}
.dev-l.b{background:rgba(52,129,229,.45)}
.dev-dot{width:22px;height:3px;border-radius:2px;background:var(--rz-base-400);margin:5px auto 0}

/* ═════════════ FRASES TACHADAS ═════════════ */
.s-sustos{background:var(--dots),linear-gradient(180deg,var(--p1) 0%,var(--p2) 100%);padding:104px 0}
.sustos{margin-top:44px;max-width:920px}
.susto{list-style:none;font:500 clamp(20px,2.6vw,31px) var(--disp);letter-spacing:-.025em;line-height:1.45;
  padding:14px 0;color:var(--rz-primary-darker);transition:color .5s ease .35s}
.susto i{position:relative;font-style:normal}
.susto i:after{content:'';position:absolute;left:-4px;right:-4px;top:53%;height:3px;border-radius:2px;
  background:var(--rz-danger);transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.susto.in{color:var(--rz-text-disabled-color)}
.susto.in i:after{transform:scaleX(1)}
.sustos-out{margin-top:36px;display:flex;gap:14px;align-items:flex-start;max-width:52ch;
  font-size:19px;color:var(--rz-primary-darker);font-weight:500;
  background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:22px 24px;
  box-shadow:var(--glass-sh)}
.sustos-out .msr{font-size:26px;color:var(--rz-success);flex:none}

/* ═════════════ MÓDULOS ═════════════ */
.s-mods{background:var(--dots),linear-gradient(180deg,var(--p2) 0%,var(--p3) 100%);padding:104px 0}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:48px}
.mod{background:var(--glass);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.9);
  border-radius:22px;overflow:hidden;box-shadow:var(--glass-sh);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease,border-color .25s ease}
.mod:hover{transform:translateY(-5px);box-shadow:var(--glass-sh-hi);border-color:rgba(52,129,229,.3)}
.mod img{border-bottom:1px solid rgba(52,129,229,.1)}
.mod-b{padding:22px 26px 26px}
.mod-b .k{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--disp);letter-spacing:.12em;
  text-transform:uppercase;color:var(--rz-primary)}
.mod-b .k .msr{font-size:17px}
.mod-b h3{margin:9px 0 5px}
.mod-b p{font-size:16px;color:var(--rz-text-secondary-color)}

/* ═══ LAS CUATRO ESCENAS DE «YA VIENE HECHO» ═══════════════════════════════
   Sustituyen a cuatro capturas hechas con IA. Cada una cuenta lo que contaba
   la suya y de la misma forma, dibujada con el lenguaje del resto de la
   página. La primera pasada se quedó en cajas vacías; lo que hace que una
   maqueta se reconozca de un vistazo es el mobiliario: en el TPV, producto
   con su forma y su precio y un dedo que lo toca; en tareas, casilla, quién
   y para cuándo; en RRHH, una línea de horas de verdad; en el CRM, estados
   distintos y avisos, que es de lo que va un embudo.

   TODAS se dibujan a 540x360 clavados y se escalan para caber. Así el cuerpo
   de letra y los grosores son idénticos en las cuatro y a cualquier ancho —
   con medidas relativas, en el móvil quedaban a 5 px e ilegibles. */
.mod-esc{position:relative;aspect-ratio:3/2;overflow:hidden;
  background:linear-gradient(160deg,#f2f7ff,#e4edfb);
  border-bottom:1px solid rgba(52,129,229,.1)}
.mod-esc-in{position:absolute;left:50%;top:50%;width:540px;height:360px;padding:20px;
  transform:translate(-50%,-50%) scale(var(--z,1));transform-origin:center;
  display:flex;font-family:var(--sans);color:var(--rz-text-color)}
.mod-esc *{animation-play-state:paused}
.mods.viva .mod-esc *{animation-play-state:running}
@media (prefers-reduced-motion:reduce){
  .mod-esc *,.mods.viva .mod-esc *{animation:none!important}
}
.mod-esc .cara{border:1px solid rgba(255,255,255,.9)}

/* ── 1 · TPV · tocas producto, cae al ticket, sube el total, cobras ── */
.esc-tpv .mod-esc-in{gap:14px}
.tpv-tk{flex:0 0 196px;display:flex;flex-direction:column;background:#fff;border-radius:12px;
  border:1px solid var(--rz-base-300);padding:12px;box-shadow:0 10px 26px -16px rgba(0,33,93,.5)}
.tpv-h{display:flex;align-items:center;gap:6px;font:600 12px var(--sans);
  color:var(--rz-primary-darker);padding-bottom:9px;border-bottom:1px solid var(--rz-base-200)}
.tpv-h .msr{font-size:16px;color:var(--rz-primary)}
.tpv-h em{margin-left:auto;font:400 10px var(--mono);font-style:normal;color:var(--rz-text-tertiary-color)}
.tpv-ls{padding-top:4px}
.tpv-l{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:11.5px;
  border-bottom:1px solid var(--rz-base-100);opacity:0;animation:tpvLinea 9s linear infinite}
.tpv-l i{font-style:normal;font:600 10px var(--mono);color:var(--rz-text-tertiary-color);
  min-width:13px;text-align:center;background:var(--rz-base-100);border-radius:4px;padding:1px 0}
.tpv-l span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpv-l b{font:500 11.5px var(--mono);color:var(--rz-text-secondary-color)}
.tpv-l.l1{animation-delay:.8s}
.tpv-l.l2{animation-delay:2s}
.tpv-l.l3{animation-delay:3.2s}
@keyframes tpvLinea{0%{opacity:0;transform:translateX(-10px)}
  3%{opacity:1;transform:none} 74%{opacity:1;transform:none} 79%,100%{opacity:0}}
.tpv-tot{margin-top:auto;display:flex;align-items:baseline;padding-top:10px;
  border-top:1px solid var(--rz-base-300);font:600 12px var(--sans);color:var(--rz-text-secondary-color)}
.tpv-num{margin-left:auto;position:relative;display:inline-block;min-width:66px;height:20px;
  font:700 16px var(--mono);color:var(--rz-primary-darker)}
.tpv-num i{position:absolute;right:0;top:0;font-style:normal;opacity:0;
  animation:tpvCifra 9s linear infinite}
.tpv-num i:nth-child(2){animation-delay:.9s}
.tpv-num i:nth-child(3){animation-delay:2.1s}
.tpv-num i:nth-child(4){animation:tpvCifraUlt 9s linear infinite 3.3s}
@keyframes tpvCifra{0%,1%{opacity:1} 13%,100%{opacity:0}}
@keyframes tpvCifraUlt{0%,1%{opacity:1} 55%,100%{opacity:0}}
.tpv-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;height:32px;
  border-radius:9px;font:600 12px var(--sans);animation:tpvBoton 9s linear infinite;
  background:var(--rz-base-300);color:var(--rz-text-disabled-color)}
.tpv-btn .msr{font-size:16px}
@keyframes tpvBoton{0%,44%{background:var(--rz-base-300);color:var(--rz-text-disabled-color)}
  48%,86%{background:var(--rz-primary);color:#fff}
  90%,100%{background:var(--rz-base-300);color:var(--rz-text-disabled-color)}}
.tpv-der{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.tpv-cat{display:flex;gap:5px}
.tpv-cat span{flex:1;text-align:center;padding:5px 0;border-radius:7px;background:rgba(255,255,255,.6);
  border:1px solid var(--rz-base-300);font:600 10px var(--sans);color:var(--rz-text-tertiary-color)}
.tpv-cat span.on{background:var(--rz-primary);border-color:var(--rz-primary);color:#fff}
.tpv-rej{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:7px}
/* Cada casilla es un producto de verdad: forma, color, nombre y precio. Sin
   eso era una rejilla de cuadrados blancos y no se leía como una pantalla
   táctil, que es lo único que tenía que decir. */
.tpv-i{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:2px;padding:6px 4px 5px;border-radius:9px;background:#fff;border:1px solid var(--rz-base-300);
  overflow:hidden}
.tpv-i b{font:600 8.5px var(--sans);color:var(--rz-text-color);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tpv-i em{font:600 8.5px var(--mono);font-style:normal;color:var(--rz-primary-darker)}
.tpv-p{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.tpv-p svg{height:100%;width:auto;max-width:100%;display:block}
/* el dedo: la casilla se hunde y sale la onda */
.tpv-i.pulsa{animation:tpvToque 9s ease infinite}
.tpv-i.pulsa:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;background:rgba(52,129,229,.45);opacity:0;
  animation:tpvOnda 9s ease infinite}
.tpv-i.p1,.tpv-i.p1:after{animation-delay:.6s}
.tpv-i.p2,.tpv-i.p2:after{animation-delay:1.8s}
.tpv-i.p3,.tpv-i.p3:after{animation-delay:3s}
@keyframes tpvToque{0%,1%{transform:none;border-color:var(--rz-base-300)}
  3%{transform:scale(.9);border-color:var(--rz-primary)}
  8%,100%{transform:none;border-color:var(--rz-base-300)}}
@keyframes tpvOnda{0%,1%{transform:scale(.4);opacity:.55} 9%{transform:scale(4.2);opacity:0}
  10%,100%{opacity:0}}

/* ── 2 · Tareas · casilla, quién, para cuándo, y el progreso que sube ── */
.esc-tar .mod-esc-in{flex-direction:column;gap:9px}
.tar-h{display:flex;align-items:center;gap:8px;font:600 12.5px var(--sans);color:var(--rz-primary-darker)}
.tar-h .msr{font-size:17px;color:var(--rz-primary)}
.tar-cnt{position:relative;margin-left:auto;display:inline-block;min-width:62px;height:14px}
.tar-cnt i{position:absolute;right:0;top:0;font:400 10.5px var(--mono);font-style:normal;
  color:var(--rz-text-tertiary-color);animation:tarCnt 9s linear infinite}
.tar-cnt i:nth-child(2){animation:tarCntB 9s linear infinite}
@keyframes tarCnt {0%,64%{opacity:1} 66%,100%{opacity:0}}
@keyframes tarCntB{0%,64%{opacity:0} 66%,100%{opacity:1}}
.tar-t{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:5px 9px;align-items:center;
  background:#fff;border:1px solid var(--rz-base-300);border-radius:11px;padding:10px 12px;
  box-shadow:0 6px 16px -12px rgba(0,33,93,.35)}
.tar-box{grid-row:1/3;align-self:start;width:18px;height:18px;border-radius:50%;
  border:1.6px solid var(--rz-base-400);display:grid;place-items:center;margin-top:1px}
.tar-box .msr{font-size:12px;color:#fff;opacity:0}
.tar-box.marcada{background:var(--rz-success);border-color:var(--rz-success)}
.tar-box.marcada .msr{opacity:1}
.tar-tt{font:500 12.5px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tar-pc{position:relative;min-width:48px;height:18px}
.tar-pc i{position:absolute;right:0;top:0;display:inline-flex;align-items:center;height:18px;
  padding:0 8px;border-radius:5px;font:700 9.5px var(--sans);letter-spacing:.05em;font-style:normal;
  background:var(--rz-primary-lighter);color:var(--rz-primary-darker);opacity:0}
.tar-pc.quieta{min-width:0}
.tar-pc.quieta i{opacity:1;position:static}
.tar-pc.hecha i{background:rgba(62,145,8,.14);color:var(--rz-success)}
.tar-meta{grid-column:2/4;display:flex;align-items:center;gap:7px}
.tar-meta em{display:inline-flex;align-items:center;gap:3px;font:500 10px var(--sans);font-style:normal;
  color:var(--rz-text-tertiary-color)}
.tar-meta em .msr{font-size:12px}
.tar-tag{padding:2px 7px;border-radius:5px;background:var(--rz-base-100);
  color:var(--rz-text-secondary-color)!important}
.tar-bar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--rz-base-200);overflow:hidden}
.tar-bar b{display:block;height:100%;width:0;border-radius:3px;background:var(--rz-primary)}
.tar-t.lista .tar-tt{color:var(--rz-text-tertiary-color);text-decoration:line-through}
.tar-t.lista .tar-bar b{background:var(--rz-success)}
/* la de arriba es la que se mueve; las otras dos quietas, para que se vea que
   lo que cambia es UNA tarea y no la pantalla entera */
.tar-t.viva .tar-pc i{animation:tarChip 9s linear infinite}
.tar-t.viva .tar-pc i:nth-child(1){animation-delay:.6s}
.tar-t.viva .tar-pc i:nth-child(2){animation-delay:2.2s}
.tar-t.viva .tar-pc i:nth-child(3){animation-delay:3.8s}
.tar-t.viva .tar-pc i:nth-child(4){animation:tarChipUlt 9s linear infinite 5.4s;
  background:rgba(62,145,8,.14);color:var(--rz-success)}
@keyframes tarChip{0%,1%{opacity:1} 18%,100%{opacity:0}}
@keyframes tarChipUlt{0%,1%{opacity:1} 34%,100%{opacity:0}}
.tar-t.viva .tar-bar b{animation:tarBarra 9s linear infinite}
@keyframes tarBarra{0%,6%{width:0}
  8%,24%{width:25%} 25%,41%{width:50%} 42%,59%{width:75%}
  60%,92%{width:100%;background:var(--rz-success)} 94%,100%{width:0}}
.tar-t.viva .tar-box{animation:tarCaja 9s linear infinite}
.tar-t.viva .tar-box .msr{animation:tarTick 9s linear infinite}
@keyframes tarCaja{0%,59%{background:transparent;border-color:var(--rz-base-400)}
  61%,92%{background:var(--rz-success);border-color:var(--rz-success)}
  94%,100%{background:transparent;border-color:var(--rz-base-400)}}
@keyframes tarTick{0%,59%{opacity:0} 61%,92%{opacity:1} 94%,100%{opacity:0}}

/* ── 3 · RRHH · lo programado contra lo que se ha fichado ── */
.esc-rh .mod-esc-in{flex-direction:column;gap:8px}
.rh-h{display:flex;align-items:center;gap:9px;font:600 13px var(--sans)}
.rh-rol{font:500 10.5px var(--sans);color:var(--rz-text-tertiary-color)}
.rh-h em{margin-left:auto;font:400 10.5px var(--mono);font-style:normal;color:var(--rz-text-tertiary-color)}
.rh-reg{display:grid;grid-template-columns:74px repeat(6,1fr);align-items:center;padding:0 10px}
.rh-reg i{font:500 9px var(--mono);font-style:normal;color:var(--rz-text-tertiary-color)}
.rh-f{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;align-items:center;
  background:#fff;border:1px solid var(--rz-base-300);border-radius:10px;padding:9px 10px}
.rh-f > span{font:600 9.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--rz-text-tertiary-color)}
.rh-pista{position:relative;height:13px;border-radius:4px;background:var(--rz-base-100);
  background-image:repeating-linear-gradient(90deg,var(--rz-base-200) 0 1px,transparent 1px 16.66%)}
.rh-b{position:absolute;top:0;height:13px;border-radius:4px}
.rh-b.prog{background:var(--rz-primary-lighter);box-shadow:inset 0 0 0 1px rgba(52,129,229,.35)}
.rh-b.real{background:rgba(62,145,8,.5);transform-origin:left;transform:scaleX(0);
  animation:rhLlena 9s cubic-bezier(.4,0,.2,1) infinite}
.rh-b.r1{animation-delay:.7s}
.rh-b.r2{animation-delay:2.1s}
@keyframes rhLlena{0%{transform:scaleX(0)} 16%,88%{transform:scaleX(1)} 95%,100%{transform:scaleX(0)}}
.rh-b.fich{background:rgba(247,189,0,.32)}
.rh-lock{position:absolute;right:-2px;top:-1px;font-size:12px;color:#b8860b}
.rh-pie{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:2px;
  font:500 11px var(--sans);color:var(--rz-text-secondary-color)}
.rh-ent,.rh-tot{display:inline-flex;align-items:center;gap:5px}
.rh-pie .msr{font-size:14px;color:var(--rz-text-tertiary-color)}
.rh-num{position:relative;display:inline-block;min-width:58px;height:15px;
  font:700 12px var(--mono);color:var(--rz-primary-darker)}
.rh-num i{position:absolute;left:0;top:0;font-style:normal;opacity:0;
  animation:rhCifra 9s linear infinite}
.rh-num i:nth-child(2){animation-delay:1s}
.rh-num i:nth-child(3){animation-delay:2s}
.rh-num i:nth-child(4){animation:rhCifraUlt 9s linear infinite 3s}
@keyframes rhCifra{0%,1%{opacity:1} 11%,100%{opacity:0}}
@keyframes rhCifraUlt{0%,1%{opacity:1} 64%,100%{opacity:0}}
.rh-pie > em{margin-left:auto;font:700 11px var(--mono);font-style:normal;color:#d3455b}

/* ── 4 · CRM · un embudo con estados distintos y avisos ── */
.esc-crm .mod-esc-in{flex-direction:column}
.crm-cols{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.crm-c{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.55);
  border:1px solid var(--rz-base-300);border-radius:10px;padding:8px 7px}
.crm-c > b{display:flex;align-items:center;gap:5px;font:600 9px var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--rz-text-tertiary-color);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.crm-nn{margin-left:auto;flex:none;font:600 9px var(--mono);font-style:normal;
  background:var(--rz-base-200);color:var(--rz-text-secondary-color);border-radius:4px;padding:1px 5px}
.crm-nn.c4{position:relative;display:inline-block;min-width:16px;height:13px}
.crm-nn.c4 i{position:absolute;left:5px;top:1px;font-style:normal;animation:crmCnt 9s linear infinite}
.crm-nn.c4 i:nth-child(2){animation:crmCntB 9s linear infinite}
@keyframes crmCnt {0%,70%{opacity:1} 72%,100%{opacity:0}}
@keyframes crmCntB{0%,70%{opacity:0} 72%,100%{opacity:1}}
.crm-k{display:block;background:#fff;border:1px solid var(--rz-base-200);border-radius:8px;
  padding:7px 8px;box-shadow:0 3px 8px -6px rgba(0,33,93,.4)}
.crm-kn{display:block;font:600 9.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-ke{display:block;margin-top:1px;font:400 8.5px var(--sans);color:var(--rz-text-tertiary-color);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-kf{display:flex;align-items:center;gap:5px;margin-top:6px}
.crm-kf b{font:600 9.5px var(--mono);color:var(--rz-text-color)}
/* el estado, y el aviso cuando lo hay: un embudo sin estados ni avisos es
   una lista de nombres, no un embudo */
.crm-es{margin-left:auto;font:700 7.5px var(--sans);font-style:normal;letter-spacing:.05em;
  padding:2px 5px;border-radius:4px;white-space:nowrap}
.crm-es.gris {background:var(--rz-base-100);color:var(--rz-text-tertiary-color)}
.crm-es.azul {background:var(--rz-primary-lighter);color:var(--rz-primary-darker)}
.crm-es.ambar{background:rgba(247,189,0,.22);color:#8a6400}
.crm-es.verde{background:rgba(62,145,8,.14);color:var(--rz-success)}
.crm-av{display:flex;align-items:center;gap:3px;margin-top:5px;padding-top:5px;
  border-top:1px dashed var(--rz-base-200);font:600 8px var(--sans);font-style:normal}
.crm-av .msr{font-size:11px}
.crm-av.tarde{color:#8a6400}
.crm-av.urge {color:#d3455b}
.crm-hueco{flex:1;border-radius:8px;border:1px dashed var(--rz-base-300);min-height:34px}
/* La tarjeta que viaja va por encima y se mueve en % de su propio ancho, así
   que no hay que saber cuánto mide una columna. */
.crm-viaja{position:absolute;top:52px;left:20px;width:calc((100% - 40px - 24px) / 4);
  background:#fff;border:1.4px solid var(--rz-primary);border-radius:8px;padding:7px 8px;
  box-shadow:0 12px 24px -12px rgba(0,33,93,.55);
  animation:crmViaja 9s cubic-bezier(.5,0,.2,1) infinite}
.crm-viaja .crm-k{border:0;box-shadow:none;padding:0;background:transparent}
.crm-p{position:relative;display:block;height:15px;margin-top:6px}
.crm-p i{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:15px;
  padding:0 6px;border-radius:4px;font:700 8px var(--sans);font-style:normal;letter-spacing:.05em;
  background:var(--rz-primary-lighter);color:var(--rz-primary-darker);opacity:0;
  animation:crmPill 9s linear infinite}
.crm-p i:nth-child(2){animation-delay:2s}
.crm-p i:nth-child(3){animation-delay:4s}
.crm-p i:nth-child(4){animation:crmPillUlt 9s linear infinite 6s;
  background:rgba(62,145,8,.14);color:var(--rz-success)}
@keyframes crmPill{0%,1%{opacity:1} 22%,100%{opacity:0}}
@keyframes crmPillUlt{0%,1%{opacity:1} 33%,100%{opacity:0}}
@keyframes crmViaja{
  0%,18%  {transform:translateX(0)}
  24%,40% {transform:translateX(calc(100% + 8px))}
  46%,62% {transform:translateX(calc(200% + 16px))}
  68%,92% {transform:translateX(calc(300% + 24px))}
  100%    {transform:translateX(0)}}

/* ═════════════ TU CASO RARO ═════════════ */
.s-raro{background:var(--dots),linear-gradient(180deg,var(--p3) 0%,var(--p4) 100%);padding:104px 0}
.raro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:60px;align-items:center;margin-top:40px}
.raro .sub strong{color:var(--rz-primary-darker);font-weight:600}
.builder{background:#fff;border:1px solid var(--rz-base-300);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(0,33,93,.45)}
.builder-h{display:flex;align-items:center;gap:9px;height:48px;padding:0 16px;background:var(--rz-base-50);
  border-bottom:1px solid var(--rz-base-300);font:600 14px var(--disp);color:var(--rz-primary-darker)}
.builder-h .msr{font-size:19px;color:var(--rz-primary)}
.builder-h span{margin-left:auto;font:400 11px var(--mono);color:var(--rz-text-tertiary-color)}
/* Siempre cinco campos, caiga el oficio que caiga: si la altura bailara, la
   sección daría un salto en cada vuelta. El cuerpo es el MISMO formulario que
   la tarjeta del paso 2 —.mf-c, .mf-i, .mf-2—, así que las dos se leen como
   la misma aplicación y no como dos maquetas distintas. */
.builder-h b{font-weight:600}
/* El sector, fuera de la ventana y encima de ella: dentro de la cabecera se
   leía como un dato más del formulario, y es la pregunta que va antes. */
.raro-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:12px;padding:0 4px}
.raro-sec{font:600 clamp(19px,2vw,26px) var(--disp);letter-spacing:-.02em;
  color:var(--rz-text-tertiary-color);line-height:1.15}
.raro-sec b{color:var(--tuyo-txt);font-weight:600;display:inline-block;
  transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.3,1)}
.raro-cab.fuera .raro-sec b{opacity:0;transform:translateY(7px)}
/* La caja lleva 22 px de más arriba para el rótulo: con la altura justa del
   dibujo, «A tu medida» se salía por encima y se quedaba cortado. */
.raro-fl{position:relative;flex:none;display:block;width:132px;height:84px}
.raro-fl b{position:absolute;right:4px;top:0;transform:rotate(-4deg);
  font:700 15px var(--disp);letter-spacing:-.015em;color:var(--tuyo);white-space:nowrap}
/* La flecha se vuelve a dibujar en cada oficio. Con relleno no valen las
   rayas del trazo: se revela con un círculo que crece desde la cola, que
   además recorre la curva en el orden en que se dibujaría a mano — la misma
   solución que la flecha del hero. */
.raro-fl svg{position:absolute;left:0;bottom:0;width:132px;height:62px;overflow:visible;
  clip-path:circle(0% at 3% 12%);transition:clip-path .75s cubic-bezier(.35,0,.2,1)}
.raro-fl.puesta svg{clip-path:circle(165% at 3% 12%)}
.raro-fl b{transition:opacity .24s ease}
.raro-cab.fuera .raro-fl b{opacity:0}
@media (prefers-reduced-motion:reduce){
  .raro-fl svg,.raro-fl.puesta svg{transition:none;clip-path:none}
  .raro-sec b,.raro-fl b{transition:none}
}
.raro-fl svg path{fill:var(--tuyo);stroke:none;opacity:.9}
.builder-b{padding:15px;display:grid;gap:12px;transition:opacity .2s ease}
.builder-b.fuera{opacity:0}
.builder-b .mf-c,.builder-b .mf-2{animation:bfEntra .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--k,0) * 60ms)}
@keyframes bfEntra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* Los tres que has puesto tú, en lila. bf-mia y NO .mia: la landing ya tiene
   un .mia que inyecta una etiqueta «tuyo» por ::after —está avisado más
   arriba en este mismo fichero— y cada campo salía con dos. */
.builder-b .bf-mia > label{color:var(--tuyo-txt)}
.builder-b .bf-mia .mf-i{border-color:var(--tuyo-bd);box-shadow:0 0 0 3px var(--tuyo-bg)}
.builder-b .bf-mia .mf-i .msr{color:var(--tuyo)}
@media (prefers-reduced-motion:reduce){
  .builder-b,.builder-b .mf-c,.builder-b .mf-2{transition:none;animation:none}
}

/* ═════════════ TABLA HONESTA ═════════════ */
.s-cmp{background:var(--dots),linear-gradient(180deg,var(--p4) 0%,var(--p5) 100%);padding:104px 0}
.cmp-wrap{overflow-x:auto;margin-top:40px;border-radius:18px;background:var(--glass);
  backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-sh)}
table.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:16.5px}
.cmp th,.cmp td{text-align:left;padding:18px 26px;vertical-align:top;border-bottom:1px solid rgba(52,129,229,.14)}
.cmp thead th{font:600 10.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--rz-text-tertiary-color);padding-top:18px;padding-bottom:12px}
.cmp td:first-child{width:32%;color:var(--rz-primary-darker);font-weight:500}
.cmp td.x{width:30%;color:var(--rz-text-secondary-color)}
.cmp td.d{width:38%;color:var(--rz-text-color)}
.cmp tbody tr{transition:background .16s ease}
.cmp tbody tr:hover{background:rgba(255,255,255,.7)}
.cmp tr:last-child td{border-bottom:none}
.cmp .w{display:inline-flex;align-items:center;gap:4px;margin-left:9px;vertical-align:1px;
  font:700 9.5px var(--sans);letter-spacing:.1em;color:#fff;background:var(--rz-success);
  border-radius:5px;padding:3px 7px}
.cmp .w .msr{font-size:12px}
.cmp-foot{margin-top:24px;font-size:16px;color:var(--rz-text-secondary-color);max-width:56ch}

/* ═════════════ LA FRONTERA ═════════════ */
.s-front{position:relative;padding:132px 0 130px;text-align:center;overflow:hidden;
  background:var(--dots-n),var(--n0)}
/* Corte seco: de claro a oscuro sin ni un degradado por medio. Los dos
   intentos anteriores fueron rampas —una larga y otra de 92 px— y las dos
   quedaban sucias. El umbral se lee por el contraste; el degradado sólo
   ensuciaba el sitio donde tenía que haber un canto. */
/* el resplandor detrás del titular: es lo que le da fondo al negro */
.s-front:after{content:'';position:absolute;left:50%;top:46%;width:960px;height:460px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(52,129,229,.30),transparent 70%)}
.s-front .wrap{position:relative;z-index:1}
.s-front h2{margin:0 auto;color:#fff;text-shadow:0 2px 30px rgba(0,20,60,.4)}
.s-front p{margin:20px auto 0;max-width:46ch;font-size:18.5px;color:rgba(255,255,255,.82)}
.front-arrow{margin:42px auto 0;font-size:36px;color:rgba(255,255,255,.65);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}

/* ═════════════ POR DEBAJO ═════════════ */
.s-debajo{background:var(--dots-n),linear-gradient(180deg,var(--n0) 0%,var(--n1) 100%);padding:110px 0}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:48px}
.tile{background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(188,216,255,.14);border-radius:20px;padding:28px;
  transition:border-color .25s ease,background .25s ease,transform .25s cubic-bezier(.4,0,.2,1)}
.tile:hover{border-color:rgba(188,216,255,.32);background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  transform:translateY(-3px)}
.t7{grid-column:span 7}.t5{grid-column:span 5}
.tile>.k{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.12em;
  color:var(--snow-3);margin-bottom:14px}
.tile>.k .msr{font-size:17px;color:var(--rz-primary-light)}
.tile p{font-size:15.5px;color:var(--snow-2);max-width:42ch;margin-top:7px}
.log{margin-top:22px;font:400 12.5px var(--mono);line-height:2.1;color:var(--snow-3)}
.log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log b{color:var(--snow-2);font-weight:400}
.log s{color:#F08A8C;opacity:.85}
.log u{text-decoration:none;color:#7FD46A}
.perm{margin-top:22px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:1px;
  background:rgba(188,216,255,.14);border:1px solid rgba(188,216,255,.14);border-radius:12px;overflow:hidden}
.perm>div{background:#02143A;padding:11px 14px;font-size:13px;color:var(--snow-2);display:flex;align-items:center}
.perm>.h{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--snow-3);background:#031A46}
.perm .y{color:#7FD46A}.perm .no{color:var(--snow-3)}
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.pills span{display:inline-flex;align-items:center;gap:6px;font:400 12.5px var(--mono);color:var(--snow-2);
  border:1px solid rgba(188,216,255,.16);border-radius:8px;padding:6px 12px;background:rgba(255,255,255,.04)}
.pills span .msr{font-size:15px;color:var(--rz-primary-light)}

/* ═════════════ API ═════════════ */
.s-api{background:var(--dots-n),linear-gradient(180deg,var(--n1) 0%,var(--n2) 100%);padding:110px 0}
.api{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}
.codebox{background:#010D22;border:1px solid rgba(188,216,255,.14);border-radius:16px;overflow:hidden}
.codebox-h{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;
  border-bottom:1px solid rgba(188,216,255,.12);font:400 11.5px var(--mono);color:var(--snow-3)}
.codebox-h .msr{font-size:16px;color:var(--rz-primary-light)}
.codebox-h .r{margin-left:auto;color:var(--rz-primary-light);letter-spacing:.08em}
pre{padding:22px 20px;overflow-x:auto;font:400 12.7px/1.85 var(--mono);color:#C9D6E8;white-space:pre}
.k1{color:#FF9AA0}.k2{color:#8CC4FF}.k3{color:#D9B6FF}.k4{color:#A9DBFF}.k5{color:#5C7194}.k6{color:#FFAE72}
.wire-box{margin-top:48px;border:1px solid rgba(188,216,255,.14);border-radius:20px;padding:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.wire-l{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.node{display:inline-flex;align-items:center;gap:8px;font:400 13px var(--mono);color:var(--snow);
  border:1px solid rgba(188,216,255,.2);border-radius:10px;padding:10px 15px;background:rgba(255,255,255,.05);
  white-space:nowrap}
.node .msr{font-size:17px;color:var(--rz-primary-light)}
.node.src{border-color:rgba(52,129,229,.6);color:#BCD8FF;background:rgba(52,129,229,.16)}
.wire{flex:1;min-width:110px;height:2px;background:rgba(188,216,255,.18);position:relative;border-radius:2px}
.wire i{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#BCD8FF;
  box-shadow:0 0 16px 3px rgba(188,216,255,.8);animation:travel 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes travel{0%{left:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
.wire-dest{display:flex;flex-direction:column;gap:9px}
.wire-note{margin-top:20px;font-size:15.5px;color:var(--snow-2);max-width:58ch}

/* ═════════════ NO ES PARA TI ═════════════ */
.s-sdk{background:var(--dots-n),var(--n2);padding:110px 0}
.sdk{margin-top:44px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(188,216,255,.16);background:rgba(255,255,255,.035)}
.sdk-tabs{display:flex;gap:2px;padding:8px 8px 0;overflow-x:auto}
.sdk-t{flex:none;border:0;background:transparent;cursor:pointer;
  padding:9px 16px;border-radius:9px 9px 0 0;
  font:600 13.5px var(--sans);color:var(--snow-2);transition:background .18s ease,color .18s ease}
.sdk-t:hover{color:var(--snow)}
.sdk-t.is-on{background:rgba(4,14,34,.85);color:var(--snow)}
.sdk-panel{display:none}
.sdk-panel.is-on{display:block}
/* La barra de la ventana: tres puntos, el nombre del fichero y el lenguaje.
   Los puntos van desnudos, sin el semáforo de colores de macOS: esto es una
   ventana de código, no una captura de un Mac. */
.sdk-barra{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;
  background:rgba(4,14,34,.85);border-top:1px solid rgba(188,216,255,.1);
  border-bottom:1px solid rgba(188,216,255,.1)}
.sdk-barra i{width:9px;height:9px;border-radius:50%;background:rgba(188,216,255,.22);flex:none}
.sdk-barra b{margin-left:8px;font:500 12.5px var(--mono);color:var(--snow-2)}
.sdk-barra em{margin-left:auto;font:600 10px var(--mono);font-style:normal;letter-spacing:.12em;
  color:var(--snow-3);border:1px solid rgba(188,216,255,.2);border-radius:5px;padding:3px 7px}
.sdk-cod{margin:0;padding:22px 20px 24px;overflow-x:auto;background:rgba(4,14,34,.85);
  font:400 13.5px/1.72 var(--mono);color:#cfe0f8;tab-size:4}
.sdk-cod .kw  {color:#7fb0ff}
.sdk-cod .tip {color:#63d8b4}
.sdk-cod .txt {color:#e6b980}
.sdk-cod .num {color:#e6b980}
.sdk-cod .com {color:#6b83a8;font-style:italic}
.sdk-pie{margin-top:26px;font-size:16px;color:var(--snow-2)}
@media (max-width:640px){ .sdk-cod{font-size:12px;padding:18px 14px} }

/* ═════════════ CIERRE ═════════════ */
.s-cta{background:var(--n2);padding:0 0 110px}
.cta{border-radius:26px;padding:70px 58px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 66% 130% at 86% 118%,rgba(52,129,229,.34),transparent 62%),
             linear-gradient(180deg,#04204F,#011738);
  border:1px solid rgba(188,216,255,.16)}
.cta h2{color:#fff;max-width:16ch;font-family:var(--disp)}
.cta .sub{margin-top:18px;color:var(--snow-2)}
.cta-ctas{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.cta-meta{margin-top:42px;padding-top:24px;border-top:1px solid rgba(188,216,255,.16);
  display:flex;gap:13px 42px;flex-wrap:wrap;font:400 12.5px var(--mono);color:var(--snow-3)}
.cta-meta a{color:var(--snow-2);border-bottom:1px solid rgba(188,216,255,.24)}
.cta-meta a:hover{color:var(--rz-primary-light);border-color:var(--rz-primary)}

/* ═════════════ FOOTER ft2 ═════════════ */
.ft2{background:var(--n2);border-top:1px solid rgba(188,216,255,.12);padding:72px 0 0;font-size:14.5px;color:var(--snow-2)}
.ft2-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:64px}
.ft2-brandcol img{height:23px;margin-bottom:18px}
.ft2-brandcol p{max-width:30ch}
.ft2-fiscal{margin-top:18px;font-size:12.5px;color:var(--snow-3);line-height:1.75}
.ft2-social{display:flex;gap:14px;margin-top:18px}
.ft2-social a{color:var(--snow-3)}.ft2-social a:hover{color:var(--snow)}
.ft2-social svg{width:19px;height:19px}
.ft2-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.ft2-cols h3{font:600 10.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--snow-3);
  margin-bottom:14px}
.ft2-cols a{display:block;padding:5px 0;color:var(--snow-2);font-size:14.5px}
.ft2-cols a:hover{color:#fff}
.ft2-bar{margin-top:58px;border-top:1px solid rgba(188,216,255,.12);padding:22px 0;display:flex;
  justify-content:space-between;gap:20px;font-size:12.5px;color:var(--snow-3)}
.ft2-end{display:flex;gap:22px}

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width:1100px){
  .hero-top,.raro,.api,.ft2-in{grid-template-columns:1fr;gap:40px}
  .hoja{transform:none;max-width:520px}
  .mods{grid-template-columns:1fr}
  .paso{grid-template-columns:60px minmax(0,1fr);gap:22px}
  /* las seis, no sólo .mini: las otras cinco caían en la columna de 60 px
     del número y salían aplastadas. */
  .paso .mini,.paso .mini-dev,.paso .mf,
  .paso .pz-log,.paso .pz-mundo,.paso .pz-ha,.paso .pz-hist{grid-column:1/-1}
  .t7,.t5{grid-column:span 12}
  .nope{grid-template-columns:1fr}
  .nope>div{border-right:none;border-bottom:1px solid rgba(188,216,255,.12);padding:24px 0!important}
  .nope>div:last-child{border-bottom:none}
  .nav-menu{display:none}
  .app-body{grid-template-columns:1fr}
  .app-side{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  body{font-size:16px}
  .hero{padding:36px 0 64px}
  .s-pasos,.s-sustos,.s-mods,.s-raro,.s-cmp,.s-debajo,.s-api,.s-sdk{padding:70px 0}
  .s-front{padding:96px 0 84px}
  .paso{padding:24px 20px}
  .cta{padding:42px 24px}
  .nav-in{gap:14px;height:62px}
  .nav-right{gap:12px}
  .ah-list{justify-content:flex-start;overflow-x:auto}
  .ft2-cols{grid-template-columns:repeat(2,1fr)}
  .ft2-bar{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  [data-r]{opacity:1!important;transform:none!important}
  .susto i:after{transform:scaleX(1)!important}
  html{scroll-behavior:auto}
}

/* ═════════════════════ LA PELÍCULA ═════════════════════════════════════════
   La pieza no se incrusta como vídeo: se EJECUTA dentro de un iframe del mismo
   origen, recortada a su ventana. Por eso aquí no hay nada que igualar con
   ningún fondo — no queda fondo del vídeo, sólo la ventana. */
.s-peli{background:var(--dots),linear-gradient(180deg,var(--p1) 0%,#fff 52%,var(--p0) 100%);
  padding:104px 0 92px;overflow:hidden}
.peli-in{max-width:1440px;margin:0 auto;padding:0 32px}   /* más ancho que .wrap, a propósito */
.peli{margin:26px 0 0}

/* Va DEBAJO de la película, no encima: es el pie de lo que está pasando en
   pantalla, y arriba engordaba el titular hasta dejar los mandos fuera de vista. */

/* El marco. Radio, borde y sombra van AQUÍ y no dentro del iframe: dentro
   medirían 18·escala y bailarían con el ancho. Copiados de .app-win, así que
   las dos ventanas de la página son la misma ventana. */
/* El ancho lo manda el ALTO disponible, no el contenedor: si la película se
   come la pantalla entera, el titular y los mandos quedan fuera y nadie sabe
   que hay doce capítulos. Y de paso el marco se centra, con lo que los mandos
   dejan de caer debajo del medidor de nivel técnico, que es fijo abajo a la
   izquierda. El min(100%,…) evita que crezca de más en pantallas muy altas. */
.peli-marco,.peli-mandos{width:min(100%,calc((100vh - 250px) * 1600 / 940));
  margin-inline:auto}
@supports (height:100svh){
  .peli-marco,.peli-mandos{width:min(100%,calc((100svh - 250px) * 1600 / 940))}
}
.peli-marco{position:relative;aspect-ratio:1600/940;background:#fff;
  border:1px solid rgba(52,129,229,.16);border-radius:16px;
  overflow:hidden;isolation:isolate;          /* Safari: si no, el iframe se come las esquinas */
  box-shadow:0 50px 100px -40px rgba(0,33,93,.42),0 10px 30px -14px rgba(0,33,93,.18)}
.peli-cartel,.peli-vp,.peli-movil{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;transition:opacity .5s ease}
.peli-cartel{object-fit:cover}
.peli-vp,.peli-movil{opacity:0;pointer-events:none}
.peli-marco.rueda .peli-vp,.peli-marco.movil .peli-movil{opacity:1}
.peli-marco.rueda .peli-cartel,.peli-marco.movil .peli-cartel{opacity:0}
/* «rueda» ya no lo pone carga(): lo pone anda(), al pulsar play */

.peli-fin{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:18px;
  justify-items:center;text-align:center;padding:32px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(160%)}
.peli-fin p{font:500 clamp(19px,1.8vw,27px)/1.4 var(--disp);color:var(--rz-primary-darker);max-width:26ch}

.peli-mandos{display:flex;align-items:center;gap:14px;margin-top:16px;padding:9px 12px;
  background:var(--glass);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:var(--glass-sh)}
.peli-b{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;flex:none;
  border:0;border-radius:10px;background:transparent;color:var(--rz-primary-darker);
  font:500 13px var(--sans);cursor:pointer}
.peli-b:hover{background:var(--rz-primary-lighter)}
.peli-b.pri{background:var(--rz-primary);color:#fff}
.peli-b .msr{font-size:20px}
.peli-barra{flex:1;height:6px;border-radius:3px;background:rgba(52,129,229,.18);
  cursor:pointer;position:relative}
.peli-barra i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--rz-primary)}
.peli-cap{display:flex;align-items:baseline;gap:8px;flex:none;max-width:34ch}
.peli-cap em{font-style:normal;font:400 11px var(--mono);color:var(--rz-text-tertiary-color)}
.peli-cap b{font:600 13px var(--sans);color:var(--rz-primary-darker);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peli-quedan{flex:none;font:400 12px var(--mono);color:var(--rz-text-tertiary-color)}

/* El guion vive oculto pero PRESENTE: lectores de pantalla y buscadores sí lo
   leen. En móvil deja de estar oculto y pasa a ser el contenido principal. */
.peli-guion{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* El medidor de «nivel técnico» es fijo abajo a la izquierda con z-index 65 y
   se comía hasta 133 px de los mandos en pantallas altas. Mientras la película
   está en pantalla se aparta: tiene sus propios mandos y el medidor mide el
   gradiente de la PÁGINA, que aquí no viene al caso. */

/* El enlace de capítulo repartido por la página: texto desnudo, sin caja */
.ver-cap{display:inline-flex;align-items:baseline;gap:7px;border:0;background:transparent;
  padding:0;cursor:pointer;font:600 14.5px var(--sans);color:var(--rz-primary);
  text-decoration:none;border-bottom:1px solid rgba(52,129,229,.4)}
.ver-cap:hover{color:var(--rz-primary-darker);border-bottom-color:var(--rz-primary-darker)}
.dark .ver-cap{color:var(--rz-primary-light);border-bottom-color:rgba(188,216,255,.4)}

/* Por debajo de 1000 px no hay iframe: a esa escala el tipo de 11 px de la
   ventana sale a 2,35 px, ilegible. Va un mp4 mudo del mismo montaje, y el
   guion pasa a leerse en texto. */
@media (max-width:999px){
  .s-peli{padding:76px 0 68px}
  .peli-in{padding:0 22px}
  .peli-mandos{display:none}
  .peli-guion{position:static;width:auto;height:auto;clip-path:none;overflow:visible;
    display:grid;gap:15px;list-style:none;max-width:46ch;margin:30px auto 0;padding:0;
    font:400 16px/1.5 var(--sans);color:var(--rz-text-secondary-color)}
}
@media (prefers-reduced-motion:reduce){
  .peli-cartel,.peli-vp,.peli-movil{transition:none}
}
/* ═══ QUE LOS GESTOS SE VEAN, NO SE CUENTEN ════════════════════════════════
   El paso 5 cambiaba una rejilla estatica por otra y el movimiento lo
   explicaba un texto de ayuda. Ahora el campo se mueve (FLIP), se estira
   (width) y vuela a la otra pestaña de verdad. */
.dnz-field{transition:transform .5s cubic-bezier(.2,.9,.25,1),
                     width .5s cubic-bezier(.2,.9,.25,1),
                     box-shadow .22s ease, opacity .28s ease, rotate .3s ease, scale .3s ease}
.dnz-field.coge{rotate:var(--gir,0deg);scale:var(--esc,1)}
/* Agarrado: se levanta, se ladea un pelo y se hace un punto más grande. Sin
   el ladeo y la sombra parecía que el campo se movía solo. */
.dnz-field.coge{box-shadow:0 18px 36px -14px rgba(0,33,93,.45);z-index:6;
  border-radius:8px;background:#fff;outline:2px dashed rgba(52,129,229,.65);
  outline-offset:6px;--gir:-1.1deg;--esc:1.02}
.dnz-field.coge > label,.dnz-field.coge > .dnz-input{pointer-events:none}
/* el hueco que deja al levantarlo: así se ve DÓNDE va a caer */
.hueco-drop{border:2px dashed rgba(52,129,229,.38);border-radius:9px;
  background:rgba(52,129,229,.05);pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .25s ease}
.dnz-field.vuela{opacity:0}
.dnz-tab.suelta{background:var(--rz-primary-lighter);border-bottom-color:var(--rz-primary);
  color:var(--rz-primary)}

/* el campo no existe hasta que se pulsa su tipo en el menu */
/* animation:none es imprescindible: el campo entra con «aparece … both»,
   y una animación con fill both GANA a una declaración normal. Sin esto el
   campo asomaba antes de haber pulsado «Fecha», que es justo lo que no debe
   pasar: el clic es el que lo crea. */
.esperando-tipo #campoEmail{animation:none!important;opacity:0;transform:translateY(7px)}
/* Las secciones no existen hasta que se sueltan los ficheros. animation:none
   otra vez: entran con «aparece … both» y una animación con fill gana a una
   declaración normal — el mismo fallo que ya me comí con el campo. */
.esperando-soltar [data-min="1"]{animation:none!important;opacity:0}
.esperando-soltar .side-i[data-min="1"]{transform:translateX(-8px)}
.tipo.is-sel{background:var(--rz-primary-lighter);color:var(--rz-primary-darker);font-weight:600}

/* ═══ COMPARTIR: CARAS, NO ROLES ══════════════════════════════════════════ */
.gente{display:flex;align-items:center;margin-left:auto;flex:none}
.gente img{width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;margin-left:-9px;box-shadow:0 1px 3px rgba(0,33,93,.18)}
.gente img:first-child{margin-left:0}
.gente b{margin-left:7px;font:600 11.5px var(--sans);color:var(--rz-text-tertiary-color)}
.quien{display:flex;align-items:center;gap:9px}
.quien img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.quien b{display:block;font:600 13px var(--sans);color:var(--rz-text-color);line-height:1.15}
.quien em{display:block;font:400 11px var(--sans);font-style:normal;
  color:var(--rz-text-tertiary-color)}
.comparte-t td:first-child{text-align:left}
/* ═══ LA MAQUETA 2: UN FORMULARIO DE VERDAD, CON SUS VALIDACIONES ══════════
   Antes era una lista de campos con su tipo al lado. Una lista no demuestra
   nada: la gracia de que un campo «sepa lo que es» solo se ve cuando el
   formulario RECHAZA lo que no vale. Prefijo mf- propio: la landing ya tiene
   .mini y .campo, y aquí las colisiones salen caras. */
.mf{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.mf-h{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--rz-base-50);
  border-bottom:1px solid var(--rz-base-300);font:600 12px var(--disp);color:var(--rz-primary-darker)}
.mf-h .msr{font-size:17px;color:var(--rz-primary)}
.mf-h em{margin-left:auto;font-style:normal;font:400 11px var(--mono);
  color:var(--rz-text-tertiary-color)}
.mf-b{padding:13px 13px 14px;display:grid;gap:11px}
.mf-c{display:grid;gap:3px;min-width:0}
.mf-c > label{font:600 9.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rz-text-tertiary-color)}
.mf-c.req > label:after{content:'*';color:#d3455b;margin-left:3px}
.mf-i{display:flex;align-items:center;gap:8px;height:33px;padding:0 10px;border-radius:8px;
  border:1px solid var(--rz-base-300);background:#fff;font:400 13px var(--sans);
  color:var(--rz-text-color);box-shadow:0 1px 2px rgba(0,33,93,.04)}
.mf-i .msr{font-size:16px;margin-left:auto;flex:none}
.mf-c.ok  .mf-i{border-color:rgba(31,139,76,.55)}
.mf-c.ok  .mf-i .msr{color:#1f8b4c}
.mf-c.mal .mf-i{border-color:#d3455b;background:#fff7f8}
.mf-c.mal .mf-i .msr{color:#d3455b}
.mf-e{font:400 11px var(--sans);color:#d3455b;display:flex;align-items:center;gap:5px}
.mf-e .msr{font-size:13px}
.mf-cal{font:400 11px var(--sans);color:var(--rz-primary);display:flex;align-items:center;gap:5px}
.mf-cal .msr{font-size:13px}
.mf-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* El campo COGIDO en el diseñador. Es lo que hace visible el «en qué orden»
   del párrafo: sin esto la tarjeta parece un formulario ya hecho, no uno que
   estás montando. Ocho tiradores y no cuatro — con cuatro esquinas se leen
   como adorno; los ocho de siempre se leen como «esto se estira y se mueve».
   El marco sobresale 8,5 px y el hueco más corto que tiene alrededor son los
   11 px del gap: no toca a nada. */
.mf-sel{position:relative;cursor:move}
.mf-eti{display:inline-block;vertical-align:2px;margin-left:7px;padding:2px 6px;
  border-radius:4px;font:700 8.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  background:var(--tuyo-bg);color:var(--tuyo-txt)}
.mf-sel:before{content:'';position:absolute;inset:-5px;border:1.5px solid var(--tuyo);
  border-radius:4px;pointer-events:none}
.mf-tira{position:absolute;inset:-5px;pointer-events:none}
.mf-tira i{position:absolute;width:7px;height:7px;background:#fff;border-radius:1px;
  border:1.5px solid var(--tuyo)}
.mf-tira i:nth-child(1){left:-3.5px;top:-3.5px}
.mf-tira i:nth-child(2){right:-3.5px;top:-3.5px}
.mf-tira i:nth-child(3){left:-3.5px;bottom:-3.5px}
.mf-tira i:nth-child(4){right:-3.5px;bottom:-3.5px}
.mf-tira i:nth-child(5){left:calc(50% - 3.5px);top:-3.5px}
.mf-tira i:nth-child(6){left:calc(50% - 3.5px);bottom:-3.5px}
.mf-tira i:nth-child(7){left:-3.5px;top:calc(50% - 3.5px)}
.mf-tira i:nth-child(8){right:-3.5px;top:calc(50% - 3.5px)}

/* ═══ LAS SEIS MAQUETAS DE «SE USA ASÍ» ════════════════════════════════════
   Contrato: las seis miden lo mismo de alto, mismo radio, mismo borde y la
   misma rejilla interna icono · nombre · valor. Maquetas de distinto
   alto es una fila descuadrada, y aquí «pixel perfect» tiene que ser medible.
   Prefijo pz- en lo nuevo: la landing ya tiene .mini y .campo, y las
   colisiones de clase en un fichero de 150 KB salen caras. */
/* ALTO FIJO E IDÉNTICO en las seis. Con min-height cada una crecía por su
   cuenta —319, 334, 268, 282— y la fila quedaba descuadrada. 336 es el alto
   natural de la más alta (el formulario) redondeado hacia arriba. */
.mini,.mf,.pz-log,.pz-mundo,.pz-ha,.pz-hist{height:336px;display:flex;flex-direction:column}
/* Los 336 px clavados existen para que las seis cuadren EN FILA. Apiladas en
   el móvil no cuadran con nadie, y ahí el alto fijo sólo servía para cortar
   el historial cuando sus renglones pasan a dos líneas. */
@media (max-width:640px){
  .mini,.mf,.pz-log,.pz-mundo,.pz-ha,.pz-hist{height:auto;min-height:300px}
}
.mini > .mini-r:last-child{margin-top:auto}

/* ── 1 · una sola lista, dos grupos: lo que ya venía y lo tuyo ── */
.mini-r .num{font:500 12px var(--mono);font-variant-numeric:tabular-nums;
  color:var(--rz-text-tertiary-color);min-width:42px;text-align:right}
.pill{font:600 9.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;white-space:nowrap}
.pill.vino{background:rgba(15,40,80,.06);color:var(--rz-text-tertiary-color)}
.pill.tuya{background:var(--tuyo-bg);color:var(--tuyo-txt)}
/* pz-mia y NO .mia: la landing ya tiene un .mia que inyecta una etiqueta
   «tuyo» por ::after, y las filas salian con dos pills. */
.mini-r.pz-mia{box-shadow:inset 2px 0 0 var(--tuyo)}
.mini-sep{height:1px;background:var(--rz-base-300);margin:0}

/* La bisagra de la tarjeta 1: aquí se pasa de lo que venía hecho a lo que
   pones tú, y esa es exactamente la palabra. La flecha va dibujada a mano
   —dos trazos, curva y punta suelta— y no sacada de un catálogo de iconos:
   una flecha de catálogo aquí cantaría a plantilla. */
.pz-evo{display:flex;align-items:center;gap:9px;padding:7px 12px}
.pz-evo .pz-evo-l{flex:1;height:1px;background:linear-gradient(90deg,
  transparent,var(--rz-base-300) 35%,var(--rz-base-300) 65%,transparent)}
.pz-evo svg{width:30px;height:20px;flex:none;overflow:visible}
.pz-evo svg path{fill:none;stroke:var(--rz-primary);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pz-evo b{font:700 10px var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--rz-primary);flex:none}

/* ── 4 · un registro de accesos, no un diagrama de cajas y flechas ── */
.pz-log{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.pz-acc{display:grid;grid-template-columns:14px 20px minmax(0,1fr);gap:9px;align-items:start;
  padding:11px 12px;border-bottom:1px solid var(--rz-base-200)}
.pz-acc .msr{font-size:18px;color:var(--rz-primary);grid-column:2}
.pz-acc .viva{width:6px;height:6px;border-radius:50%;background:var(--rz-success);
  margin:7px 0 0 4px}
.pz-acc b{display:block;font:600 12.5px var(--sans);color:var(--rz-text-color)}
.pz-acc span{display:block;font:400 11.5px var(--sans);color:var(--rz-text-secondary-color);margin-top:1px}
.pz-acc em{display:block;font:400 10.5px var(--mono);font-style:normal;
  color:var(--rz-text-tertiary-color);margin-top:3px}
.pz-log-pie{margin-top:auto;padding:9px 12px;background:var(--rz-base-50);
  border-top:1px solid var(--rz-base-300);text-align:center;
  font:400 11px var(--sans);color:var(--rz-text-tertiary-color)}

/* ── 3 · la bola del mundo, con un aparato en cada sitio ──
   Antes eran tres pantallitas de distinto tamaño: eso decía «responsive», que
   es la mitad del titular. La bola pone la otra mitad —el sitio— y los iconos
   siguen diciendo el aparato. Los pines van en HTML y la bola en SVG, los dos
   sobre una caja de 420x250 clavados: así una coordenada vale para los dos. */
.pz-mundo{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.pz-mundo-lienzo{flex:1;display:grid;place-items:center;overflow:hidden}
.pz-mundo-caja{position:relative;width:420px;height:250px}
.pz-mundo-caja svg{position:absolute;inset:0}
.pz-mundo .bola{fill:var(--rz-primary-lighter);stroke:rgba(52,129,229,.45);stroke-width:1.3}
.pz-mundo .malla{fill:none;stroke:rgba(52,129,229,.32);stroke-width:1}
.pz-mundo .hilo{fill:none;stroke:var(--rz-primary);stroke-width:1.4;opacity:.5;
  stroke-dasharray:3 4}
.pz-mundo .nudo{fill:var(--rz-primary)}
.pz-mundo .ficha{fill:#fff;stroke:var(--rz-primary);stroke-width:1.2}
.pz-mundo .t-ficha{text-anchor:middle;font:600 12.5px var(--sans);fill:var(--rz-primary-darker)}
/* El icono va DESNUDO sobre el fondo, sin caja de color detrás. */
.pz-pin{position:absolute;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.pz-pin .msr{font-size:23px;color:var(--rz-primary)}
.pz-pin b{font:600 11px var(--sans);color:var(--rz-text-color)}
@media (max-width:640px){ .pz-mundo-caja{transform:scale(.66)} }
@media (max-width:400px){ .pz-mundo-caja{transform:scale(.5)} }

/* ── 5 · el diagrama: qué le pasa al dato cuando le das a guardar ── */
.pz-ha{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.pz-ha-lienzo{flex:1;display:grid;place-items:center;overflow:hidden}
.pz-ha svg{max-width:100%;height:auto}
.pz-ha .rama{fill:none;stroke:var(--rz-base-400);stroke-width:1.4}
.pz-ha .caja{fill:#fff;stroke:var(--rz-base-300);stroke-width:1.2}
.pz-ha .caja.pral{fill:var(--rz-primary-lighter);stroke:rgba(52,129,229,.4)}
.pz-ha .viva{fill:var(--rz-success)}
.pz-ha .disco{fill:none;stroke:var(--rz-base-400);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round}
.pz-ha .t-pral{text-anchor:middle;font:600 13px var(--sans);fill:var(--rz-primary-darker)}
.pz-ha .t-zona{font:600 12.5px var(--sans);fill:var(--rz-text-color)}
.pz-ha .t-est{font:400 10px var(--mono);fill:var(--rz-success)}
.pz-ha .t-pie{text-anchor:middle;font:400 11px var(--sans);fill:var(--rz-text-tertiary-color)}
/* Los puntos que bajan por las ramas. Aquí SÍ se anima —y en la sección sólo
   se animaba el formulario— porque un diagrama de replicación quieto dice que
   pasó una vez; lo que cuenta es que está pasando ahora. Va lento y en un solo
   color: es un latido, no una coreografía pidiendo turno. */
.pz-ha .gota{fill:var(--rz-primary);offset-distance:0%;
  animation:haGota 2.8s cubic-bezier(.45,0,.55,1) infinite}
.pz-ha .g1{offset-path:path("M210 42 C210 72 66 64 66 92");animation-delay:0s}
.pz-ha .g2{offset-path:path("M210 42 L210 92");animation-delay:.22s}
.pz-ha .g3{offset-path:path("M210 42 C210 72 354 64 354 92");animation-delay:.44s}
@keyframes haGota{
  0%{offset-distance:0%;opacity:0}
  12%{opacity:1}
  55%{offset-distance:100%;opacity:1}
  70%,100%{offset-distance:100%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pz-ha .gota{display:none}
}
/* Los dos hechos que sostienen el titular, uno por mitad: «ni se cae» son las
   tres zonas, «ni se pierde» son los once nueves de R2. Los iconos van
   desnudos: una tira de color convertiría «se ha caído una zona» en una
   alerta, y aquí el mensaje es justo el contrario — no pasa nada. */
.pz-dato{flex:none;display:flex;align-items:center;gap:9px;height:44px;padding:0 13px;
  border-top:1px solid var(--rz-base-300)}
.pz-dato .msr{font-size:18px;color:var(--rz-text-tertiary-color);flex:none}
.pz-dato > b{font:600 12.5px var(--sans);color:var(--rz-text-color);white-space:nowrap}
.pz-dato > span{margin-left:auto;font:400 11.5px var(--sans);
  color:var(--rz-text-secondary-color);white-space:nowrap}
/* Lo mismo aquí: «Archivos en Cloudflare R2» y su cifra no caben en una línea
   de 292, así que el dato se va debajo del titular. */
@media (max-width:640px){
  .pz-dato{height:auto;padding:11px 13px;display:grid;
    grid-template-columns:18px minmax(0,1fr);column-gap:9px;row-gap:2px}
  .pz-dato .msr{grid-row:1/3;align-self:center}
  .pz-dato > b,.pz-dato > span{white-space:normal;margin-left:0}
}
/* La chapa de HA, la única cosa de la página con fondo casi negro: es lo que
   la hace destacar entre tanto azul claro. */
.pz-eti-ha{display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:19px;padding:0 7px;border-radius:5px;background:#0b1220;color:#fff;
  font:700 10px var(--sans);letter-spacing:.1em}

/* ── 6 · el histórico DE UN CAMPO ──
   Arriba el campo con su aro, abajo sólo los valores que ha tenido ese campo.
   El aro no es adorno: sin él la lista se lee como el registro de la ficha
   entera, que es justo lo que esto NO es. Cada cambio con la cara de quien lo
   hizo —un nombre suelto es un dato, una cara es una persona, y la pregunta
   del titular es «¿quién?»—. Salen de los <symbol> del principio del body. */
.pz-hist{background:#fff;border:1px solid var(--rz-base-300);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px -4px rgba(0,33,93,.1)}
.pz-hc{display:grid;gap:5px;padding:13px 13px 14px;background:var(--rz-base-50);
  border-bottom:1px solid var(--rz-base-300)}
.pz-hc label{font:600 9.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rz-text-tertiary-color)}
.pz-hc-i{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;
  border:1px solid var(--rz-primary);background:#fff;font:600 13px var(--sans);
  color:var(--rz-text-color);box-shadow:0 0 0 3px var(--rz-primary-lighter)}
.pz-hc-i .msr{margin-left:auto;font-size:17px;color:var(--rz-primary)}
.pz-h-f{flex:1;display:flex;align-items:center;gap:9px;padding:0 13px;min-width:0}
.pz-h-v{display:flex;align-items:center;gap:7px;min-width:0}
.pz-h-f + .pz-h-f{border-top:1px solid var(--rz-base-200)}
.pz-h-f > b{font:600 12.5px var(--sans);color:var(--rz-text-color);
  min-width:104px;white-space:nowrap}
.pz-h-f .de{font:400 12px var(--sans);text-decoration:line-through;
  color:var(--rz-text-tertiary-color);white-space:nowrap}
.pz-h-f .a{font:600 12px var(--sans);color:var(--rz-text-color);white-space:nowrap}
.pz-h-f .msr{font-size:15px;color:var(--rz-primary);flex:none}
.pz-h-f em{margin-left:auto;font:400 10.5px var(--mono);font-style:normal;
  color:var(--rz-text-tertiary-color);white-space:nowrap}
/* En estrecho el renglón de una línea medía 372 dentro de una tarjeta de 292.
   Se parte en dos: arriba quién y cuándo, debajo de qué a qué. */
@media (max-width:640px){
  .pz-h-f{display:grid;grid-template-columns:26px minmax(0,1fr) auto;
    column-gap:9px;row-gap:3px;align-content:center;padding:9px 13px}
  .pz-h-f .cara{grid-row:1;align-self:center}
  .pz-h-f > b{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .pz-h-f em{grid-column:3;margin-left:0;align-self:center}
  .pz-h-v{grid-column:2/4;flex-wrap:wrap}
}

/* ── el pie del formulario: el botón y el «falta 1 cosa» que lo explica ── */
.mf-pie{margin-top:auto;display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:9px 13px;background:var(--rz-base-50);border-top:1px solid var(--rz-base-300)}
.mf-pie > span:first-child{margin-right:auto;font:500 11.5px var(--sans);color:#d3455b}
.mf-guardar{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 13px;
  border-radius:8px;background:var(--rz-base-300);color:var(--rz-text-disabled-color);
  font:600 12px var(--sans);transition:background .22s ease,color .22s ease,transform .1s ease}
.mf-guardar .msr{font-size:15px}
.mf-guardar.vale{background:var(--rz-primary);color:#fff}
.mf-guardar.pulsa{transform:translateY(2px)}
/* ═══ LA FLECHA DE «EVOLUCIONA» ══════════════════════════════════════════
   Une la hoja de Excel de arriba con la app de abajo. Cuelga de la COLUMNA
   DE LA HOJA con top:100%, que es su borde inferior exacto: así la cola sale
   del Excel a cualquier ancho, en vez de flotar donde la dejó un número
   escrito a mano. Antes colgaba de la escena con un top:-130px y la cola
   quedaba 31 px por debajo de la hoja, sin nacer de nada.
   1 unidad = 1 px en los dos dibujos: el grosor y la punta son los de verdad. */
.hero-hoja{position:relative}
.evo{position:absolute;top:100%;right:26px;margin-top:-6px;
  width:214px;height:150px;pointer-events:none;z-index:3}
.evo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.evo svg path{fill:var(--rz-primary);stroke:none;opacity:.9}
.evo .evo-corta{display:none}
.evo b{position:absolute;right:2px;top:-18px;transform:rotate(-5deg);
  font:700 18px var(--disp);letter-spacing:-.015em;color:var(--rz-primary);
  white-space:nowrap}
/* Se dibuja sola al entrar, una vez, y ahí se queda. Con relleno no valen
   las rayas del trazo: se revela con un círculo que crece desde la cola, que
   además recorre la curva en el mismo orden en que se dibujaría a mano. */
.evo svg{clip-path:circle(0% at 96% 4%);transition:clip-path .95s cubic-bezier(.35,0,.2,1)}
.evo.puesta svg{clip-path:circle(165% at 96% 4%)}
/* En estrecho la hoja y la ventana quedan una encima de otra y el hueco se
   queda en 47 px: hay que abrirlo para que quepa la flecha, que es justo
   donde más falta hace porque ya no están lado a lado. */
@media (max-width:1100px){
  /* aquí la hoja y la ventana se apilan y el hueco natural son 47 px: hay que
     abrirlo para que quepa la flecha */
  .escena{margin-top:100px}
  /* 520px es el max-width de .hoja: si aquél cambia, éste también */
  .evo{width:150px;height:84px;right:auto;left:min(520px,100%);margin-left:-164px}
  .evo .evo-ancha{display:none}
  .evo .evo-corta{display:block}
  .evo b{font-size:15px;top:-15px}
}
@media (prefers-reduced-motion:reduce){
  /* sin trazo que recortar: se muestra entera y quieta */
  .evo svg, .evo.puesta svg{transition:none;clip-path:none}
}


/* ═══ LOS DOS REGISTROS DE TEXTO ═══════════════════════════════════════════
   SUBTÍTULO: acompaña el gesto, va debajo y no interrumpe. Dice QUÉ estás
   viendo mientras lo ves.
   RÓTULO: para la acción y ocupa la ventana entera. Dice POR QUÉ te importa.
   Son pocos —tres en toda la vuelta— porque un rótulo que sale cada dos por
   tres deja de ser un alto en el camino y pasa a ser un cartel publicitario.
   Y están escritos para que valgan igual en una clínica dental, un despacho
   de abogados, un taller o una fábrica: ni un ejemplo de sector dentro. */

/* flex y no grid: con grid, la línea de apoyo heredaba el ancho de columna
   del titular y rompía donde no debía. Así cada una se mide sola. */
.rotulo{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:6% 9%;text-align:center;pointer-events:none;
  background:rgba(247,250,255,.86);backdrop-filter:blur(9px) saturate(150%);
  opacity:0;transition:opacity .5s ease}
.rotulo.ver{opacity:1}
.rotulo b{display:block;font:700 clamp(24px,3.1vw,44px)/1.22 var(--disp);
  letter-spacing:-.025em;color:var(--rz-primary-darker);max-width:22ch;margin:0 auto;
  transform:translateY(10px);transition:transform .55s cubic-bezier(.2,.9,.25,1)}
.rotulo.ver b{transform:none}
.rotulo em{display:block;margin-top:14px;font-style:normal;
  font:400 clamp(13px,1.15vw,16.5px)/1.5 var(--sans);
  color:var(--rz-text-secondary-color);max-width:44ch;margin-left:auto;margin-right:auto;
  opacity:0;transition:opacity .5s ease .18s}
.rotulo.ver em{opacity:1}
@media (prefers-reduced-motion:reduce){
  .rotulo,.rotulo b,.rotulo em{transition:none}
}
/* Los ficheros del rótulo de apertura. Mezclados a propósito .xlsx y .accdb:
   quien lo lleva en Access se reconoce igual, y ver los dos juntos dice «da
   igual dónde lo tengas» sin escribirlo. Nombres con (copia), _FINAL y _v3
   porque eso es lo que hay de verdad en las carpetas de las empresas. */
.rot-arch{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  max-width:56ch;margin:26px auto 0;opacity:0;transition:opacity .5s ease .3s}
.rotulo.ver .rot-arch{opacity:1}
.rot-arch span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border-radius:7px;background:#fff;border:1px solid var(--rz-base-300);
  font:400 11.5px var(--mono);color:var(--rz-text-secondary-color);
  box-shadow:0 2px 7px -3px rgba(0,33,93,.16)}
.rot-arch i{width:8px;height:8px;border-radius:2px;flex:none}
.rot-arch .xls i{background:#1d7044}
.rot-arch .acc i{background:#a4373a}
@media (max-width:900px){ .rot-arch span:nth-child(n+5){display:none} }
/* La película ya NO arranca sola. Se queda parada con su play, y al pulsarlo
   suena: es lo que espera cualquiera delante de un vídeo, y el audio sólo
   está permitido si lo pide una persona — arrancar mudo para no romper esa
   regla era resolver un problema del navegador a costa del visitante. */
.peli-play{position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;padding:0;
  transition:opacity .35s ease}
.peli-play i{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 14px 40px -12px rgba(0,33,93,.5);
  transition:transform .22s cubic-bezier(.2,.9,.25,1),box-shadow .22s ease}
.peli-play i:after{content:'';width:0;height:0;margin-left:7px;
  border-left:26px solid var(--rz-primary-darker);
  border-top:16px solid transparent;border-bottom:16px solid transparent}
.peli-play:hover i{transform:scale(1.06);box-shadow:0 18px 48px -12px rgba(0,33,93,.55)}
.peli-play b{position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font:600 13.5px var(--sans);color:var(--rz-primary-darker)}
.peli-play em{display:block;font-style:normal;font-weight:400;font-size:12px;
  color:var(--rz-text-secondary-color);margin-top:3px}
.peli-marco.rueda .peli-play{opacity:0;pointer-events:none}
/* ═══ QUIÉN GANA EN QUÉ ════════════════════════════════════════════════════
   Antes era una tabla de tres columnas con un «GANA» suelto por las celdas:
   para saber quién ganaba qué había que leerse las veintiuna. Ahora cada uno
   tiene su columna y su lista, y se ve de un vistazo. Y que Excel gane tres
   cosas no se esconde: es lo que hace creíbles las otras cuatro. */
.duelo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;align-items:start}
.duelo-c{background:var(--glass);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:28px 30px 30px;
  box-shadow:var(--glass-sh)}
/* La nuestra en BLANCO y con el borde marcado, no en azul: la sección tiene
   fondo azul, así que teñirla de azul la hundía en él y hacía que la columna
   de Excel destacara más que la nuestra. Justo al revés de lo que interesa. */
.duelo-c.nos{background:#fff;border:2px solid rgba(52,129,229,.42);
  box-shadow:0 26px 60px -28px rgba(0,33,93,.4)}
.duelo-c.nos:before{content:'';display:block;height:3px;width:46px;border-radius:2px;
  background:var(--rz-primary);margin:-4px 0 16px}
.duelo-h{display:flex;align-items:baseline;gap:10px;margin-bottom:22px;
  padding-bottom:16px;border-bottom:1px solid rgba(52,129,229,.16)}
.duelo-h b{font:700 21px var(--disp);letter-spacing:-.02em;color:var(--rz-primary-darker)}
.duelo-h span{font:600 10.5px var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--rz-text-tertiary-color)}
.duelo-c.nos .duelo-h span{color:var(--rz-primary)}
.duelo-l{display:grid;gap:18px}
.duelo-i{display:grid;grid-template-columns:19px minmax(0,1fr);gap:11px;align-items:start}
.duelo-i .msr{font-size:19px;color:var(--rz-text-tertiary-color);margin-top:1px}
.duelo-c.nos .duelo-i .msr{color:var(--rz-primary)}
.duelo-i b{display:block;font:600 16.5px var(--sans);color:var(--rz-primary-darker);
  line-height:1.32}
.duelo-i span{display:block;margin-top:3px;font:400 14.5px/1.45 var(--sans);
  color:var(--rz-text-secondary-color)}
@media (max-width:860px){ .duelo{grid-template-columns:1fr;gap:16px} }
/* ═══ EL EXPLORADOR, Y LOS FICHEROS QUE SE ARRASTRAN ═══════════════════════
   El argumento de la sección era abstracto: «lo que llevas en un Excel también
   es una sección». Arrastrando los ficheros de verdad deja de ser una frase y
   pasa a ser un gesto que se entiende sin leer nada.
   Tiene que RECONOCERSE como el explorador de Windows —panel de navegación,
   barra de comandos, ruta con chevrones, cabeceras de columna y barra de
   estado con «3 seleccionados»— porque si no parece una lista cualquiera y se
   pierde justo lo que hace creíble el gesto. No es una copia píxel a píxel: es
   lo justo para que nadie dude de qué está mirando. */
.expl{position:absolute;right:34px;top:88px;z-index:30;width:664px;
  background:#fbfbfd;border:1px solid rgba(15,40,80,.18);border-radius:9px;
  box-shadow:0 34px 80px -28px rgba(0,33,93,.45),0 6px 18px -8px rgba(0,33,93,.22);
  overflow:hidden;opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.9,.25,1)}
.escena .expl.ver{opacity:1;transform:none}

.expl-tit{display:flex;align-items:center;gap:8px;height:33px;padding:0 0 0 11px;
  background:#f3f3f6;border-bottom:1px solid rgba(15,40,80,.09);
  font:400 12px var(--sans);color:#1b1b1f}
.expl-tit .msr{font-size:15px;color:#e3ab3a}
.expl-tit .bts{margin-left:auto;display:flex;height:100%}
.expl-tit .bts b{width:42px;display:grid;place-items:center;font:400 11px var(--sans);color:#4a4a52}

.expl-cmd{display:flex;align-items:center;gap:3px;height:36px;padding:0 8px;
  border-bottom:1px solid rgba(15,40,80,.08);background:#fbfbfd}
.expl-cmd span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:5px;
  font:400 11.5px var(--sans);color:#3a3a42}
.expl-cmd .msr{font-size:15px;color:#5b6472}
.expl-cmd i.sep{width:1px;height:16px;background:rgba(15,40,80,.12);margin:0 4px}

.expl-dir{display:flex;align-items:center;gap:6px;padding:7px 9px;
  border-bottom:1px solid rgba(15,40,80,.08);background:#fbfbfd}
.expl-ruta{flex:1;display:flex;align-items:center;gap:3px;height:26px;padding:0 9px;
  background:#fff;border:1px solid rgba(15,40,80,.14);border-radius:4px;
  font:400 11.5px var(--sans);color:#2b2b31}
.expl-ruta .msr{font-size:13px;color:#7a828f}
.expl-busca{width:132px;display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;
  background:#fff;border:1px solid rgba(15,40,80,.14);border-radius:4px;
  font:400 11.5px var(--sans);color:#9aa1ad}
.expl-busca .msr{font-size:13px}

.expl-b{display:grid;grid-template-columns:132px minmax(0,1fr)}
.expl-nav{border-right:1px solid rgba(15,40,80,.08);padding:7px 5px;background:#fbfbfd}
.expl-nav b{display:block;padding:4px 8px;font:600 10px var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:#8a919d}
.expl-nav span{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:4px;
  font:400 11.5px var(--sans);color:#2b2b31}
.expl-nav span.act{background:rgba(52,129,229,.13);font-weight:500}
.expl-nav .msr{font-size:14px;color:#6b7280}
.expl-nav .msr.az{color:#3f7cc0}

.expl-cab{display:grid;grid-template-columns:minmax(0,1fr) 88px 88px 56px;gap:10px;
  padding:5px 9px;border-bottom:1px solid rgba(15,40,80,.1);background:#fff;
  font:400 10.5px var(--sans);color:#7a828f}
.expl-l{background:#fff;padding:2px 0 0}
.expl-f{display:grid;grid-template-columns:minmax(0,1fr) 88px 88px 56px;gap:10px;
  align-items:center;padding:4px 9px;margin:0 2px;border-radius:4px;
  font:400 11.5px var(--sans);color:#1b1b1f;
  transition:background .16s ease,box-shadow .16s ease}
.expl-f .nom{display:flex;align-items:center;gap:7px;min-width:0}
.expl-f .nom b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.expl-f .fe,.expl-f .ti{color:#5b6472;font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.expl-f .ta{text-align:right;color:#5b6472;font:400 11px var(--mono)}
/* Iconos de fichero de verdad: hoja con la esquina doblada y su bloque de
   color con la letra. Un cuadrado de color a secas no es un icono de fichero,
   es una viñeta — y aquí lo que tiene que reconocerse de un vistazo es que
   son Excel y Access. */
.expl-f svg.tip{width:16px;height:19px;flex:none;display:block}
.expl-f.sel{background:#cfe4fb;box-shadow:inset 0 0 0 1px #7fb0e8}

.expl-est{display:flex;align-items:center;gap:12px;height:26px;padding:0 10px;
  border-top:1px solid rgba(15,40,80,.09);background:#f3f3f6;
  font:400 11px var(--sans);color:#5b6472}
.expl-est b{font-weight:400}

/* el fantasma que viaja con el puntero */
/* left/top a 0 y las coordenadas SIEMPRE contra .app-win, que es su bloque
   contenedor. Sin esto arrancaba de su posición estática y el translate lo
   mandaba fuera de la ventana. */
.fantasma{position:absolute;left:0;top:0;z-index:45;pointer-events:none;opacity:0;
  padding:7px 11px;border-radius:8px;background:rgba(255,255,255,.97);
  border:1px solid rgba(52,129,229,.4);box-shadow:0 14px 30px -10px rgba(0,33,93,.4);
  font:500 12px var(--sans);color:var(--rz-primary-darker);white-space:nowrap;
  transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .2s ease}
.fantasma.ver{opacity:1}
.fantasma small{display:block;font:400 10.5px var(--mono);
  color:var(--rz-text-tertiary-color);margin-top:1px}

/* la zona de la barra lateral que los recibe */
/* La zona de soltar vive DEBAJO de «Personalizadas», que es donde van a caer
   las secciones — no rodeando la barra entera. Y sólo existe mientras algo
   viene en el aire: una zona de destino permanente es ruido, y encima promete
   un gesto que nadie está haciendo. */
.app-side{position:relative}
.soltar{display:grid;place-items:center;gap:5px;text-align:center;
  border:0 dashed rgba(52,129,229,.45);border-radius:11px;
  background:rgba(52,129,229,.05);color:var(--rz-primary);
  font:600 12.5px var(--sans);
  max-height:0;padding:0 10px;margin:0;opacity:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,.9,.25,1),opacity .25s ease,
             padding .3s ease,margin .3s ease,border-width .2s ease,
             background .2s ease,border-color .2s ease,transform .2s ease}
.soltar .msr{font-size:24px}
.soltar small{display:block;font:400 11px var(--sans);color:var(--rz-text-tertiary-color)}
.soltar.ver{max-height:130px;padding:16px 10px;margin:5px 0 2px;opacity:1;border-width:2px}
/* dragover: se enciende y crece un pelo. Es lo que hace que parezca que va a
   aceptar lo que llevas encima. */
.soltar.encima{background:rgba(52,129,229,.14);border-color:var(--rz-primary);
  transform:scale(1.03)}
.soltar.encima small{color:var(--rz-primary-dark)}

/* Al soltar, la MISMA caja pasa a contar lo que está haciendo. El aviso iba
   antes al centro de la ventana, y ahí no mira nadie: después de soltar la
   mirada está justo aquí. Misma caja, mismo sitio, contenido distinto. */
.soltar-hace{display:none;width:100%}
.soltar.cargando{border-style:solid;border-color:rgba(52,129,229,.3);
  background:rgba(52,129,229,.07);transform:none;text-align:left}
.soltar.cargando .soltar-pide{display:none}
.soltar.cargando .soltar-hace{display:block}
.soltar-hace b{display:flex;align-items:center;gap:8px;margin-bottom:9px;
  font:600 12.5px var(--sans);color:var(--rz-primary-darker)}
.soltar-hace b i{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(52,129,229,.25);border-top-color:var(--rz-primary);
  animation:giro .7s linear infinite}
.soltar-hace em{display:block;padding:2px 0 2px 19px;position:relative;
  font:400 10.5px var(--sans);font-style:normal;color:var(--rz-text-tertiary-color);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease}
.soltar-hace em:before{content:'○';position:absolute;left:2px;top:2px;
  font-size:9px;color:var(--rz-base-400)}
.soltar-hace em.ok{color:var(--rz-text-color)}
.soltar-hace em.ok:before{content:'✓';color:var(--rz-success);font-weight:700}

/* ── El cargador: tarda más, pero dice lo que está pasando ────────────────
   Que las secciones aparezcan de golpe es más rápido y peor: nadie entiende
   qué ha hecho el programa con sus ficheros. Aquí se ve leer uno a uno. */
.cargador{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  z-index:40;width:300px;padding:20px 22px;border-radius:14px;background:#fff;
  border:1px solid rgba(52,129,229,.2);
  box-shadow:0 30px 70px -26px rgba(0,33,93,.45);
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.9,.25,1)}
.cargador.ver{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cargador-h{display:flex;align-items:center;gap:10px;margin-bottom:15px;
  font:600 14.5px var(--disp);color:var(--rz-primary-darker)}
.cargador-h i{width:17px;height:17px;border-radius:50%;flex:none;
  border:2px solid rgba(52,129,229,.25);border-top-color:var(--rz-primary);
  animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.cargador-f{display:flex;align-items:center;gap:9px;padding:5px 0;
  font:400 12.5px var(--sans);color:var(--rz-text-tertiary-color);
  transition:color .25s ease}
.cargador-f .msr{font-size:16px;color:var(--rz-base-400);transition:color .25s ease}
.cargador-f b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cargador-f.ok{color:var(--rz-text-color)}
.cargador-f.ok .msr{color:var(--rz-success)}
@media (prefers-reduced-motion:reduce){ .cargador-h i{animation:none} }
@media (max-width:1100px){ .expl,.fantasma{display:none} }
/* ═══ EL BOTÓN DE EMPEZAR ══════════════════════════════════════════════════
   La presentación ya no arranca sola. Arrancar sin permiso obliga a mirar, y
   quien llega leyendo el titular se pierde el principio sin remedio: cuando
   baja la vista, la escena ya va por la mitad y no hay forma de volver.
   Parada, con su botón, cada uno la empieza cuando está listo. */
.escena-play{position:absolute;inset:0;z-index:55;display:grid;place-items:center;
  border:0;background:rgba(247,250,255,.55);backdrop-filter:blur(2px);
  cursor:pointer;padding:0;transition:opacity .4s ease}
.escena-play i{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:#fff;box-shadow:0 16px 44px -12px rgba(0,33,93,.5);
  transition:transform .22s cubic-bezier(.2,.9,.25,1),box-shadow .22s ease}
.escena-play i:after{content:'';width:0;height:0;margin-left:7px;
  border-left:25px solid var(--rz-primary-darker);
  border-top:15px solid transparent;border-bottom:15px solid transparent}
.escena-play:hover i{transform:scale(1.06);box-shadow:0 22px 54px -12px rgba(0,33,93,.55)}
.escena-play b{position:absolute;left:0;right:0;bottom:20%;text-align:center;
  font:600 15px var(--sans);color:var(--rz-primary-darker)}
.escena-play em{display:block;font-style:normal;font-weight:400;font-size:12.5px;
  color:var(--rz-text-secondary-color);margin-top:4px}
.escena.rodando .escena-play{opacity:0;pointer-events:none}