/* Web pública de Contablio y Nomiblio — rediseño v2 del 09-10-2026 (mega menú, vídeo del producto, bloques por
   módulo con capturas reales). Mobile-first. Tipografía Inter (OFL, servida desde la propia web: sin Google Fonts).
   Colores de marca en --marca. Iconos: SVG en línea propios, trazo 1,75 px (clase .ic). */
@font-face { font-family: "Inter"; src: url("/fuentes/InterVariable.woff2") format("woff2"); font-weight: 100 900;
  font-display: swap; }

:root {
  --tinta: #0f1b2d; --texto: #33415a; --gris: #64728a; --borde: #e3e8f0; --fondo: #ffffff; --suave: #f5f7fb;
  --marca-oscuro: #12324f; --acento: #1f6fe5; --acento-claro: #eaf2fe; --exito: #12a36b; --aviso: #b26b00;
  --radio: 18px; --radio-s: 12px; --sombra: 0 1px 2px rgba(15,27,45,.06), 0 8px 24px rgba(15,27,45,.08);
  --sombra-l: 0 24px 64px rgba(15,27,45,.16); --ancho: 1180px; --alto-cabecera: 68px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto);
  background: var(--fondo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01"; }
body.menu-abierto { overflow: hidden; }
h1, h2, h3 { color: var(--tinta); letter-spacing: -.025em; line-height: 1.12; margin: 0 0 .6rem; }
h1 { font-size: clamp(2.2rem, 7vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.6rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
a { color: var(--acento); text-underline-offset: 3px; }
img, video { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: calc(var(--alto-cabecera) + 16px); }
:focus-visible { outline: 3px solid rgba(31,111,229,.45); outline-offset: 2px; border-radius: 6px; }
.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 1.2rem; }
.centrado { text-align: center; margin-left: auto; margin-right: auto; }
.centrado-bloque { margin: 0 auto; }
.antetitulo { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); margin-bottom: .7rem; }
.entradilla { font-size: clamp(1.05rem, 2.6vw, 1.22rem); color: var(--gris); max-width: 40rem; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--tinta); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 10px 0; }
.saltar:focus { left: 0; }

/* ===== Cabecera fija con mega menú ===== */
.franja-oferta { background: var(--tinta); color: #dbe5f3; font-size: .88rem; text-align: center; padding: .5rem 1rem; }
.franja-oferta b { color: #fff; }
.franja-oferta a { color: #fff; font-weight: 650; }
.cabecera { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(227,232,240,.9); }
.fila { display: flex; align-items: center; min-height: var(--alto-cabecera); gap: 1rem; }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo-svg { height: 26px; width: auto; display: block; }
@media (min-width: 420px) { .logo-svg { height: 30px; } }
.nav { flex: 1; min-width: 0; }
.nav-escritorio { display: none; }
.cabecera-acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.solo-escritorio { display: none !important; }
.nav-enlace, .nav-boton { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; font: inherit;
  font-size: .95rem; font-weight: 550; color: var(--texto); text-decoration: none; border-radius: 9px; background: none;
  border: 0; cursor: pointer; min-height: 40px; white-space: nowrap; }
.nav-enlace:hover, .nav-boton:hover, .desplegable.abierto > .nav-boton { background: var(--suave); color: var(--tinta); }
.nav-boton .flecha { width: 16px; height: 16px; transition: transform .2s; }
.desplegable.abierto > .nav-boton .flecha { transform: rotate(180deg); }

@media (min-width: 1024px) {
  .nav-escritorio { display: flex; gap: .15rem; list-style: none; margin: 0 0 0 1.4rem; padding: 0; align-items: center; }
  .solo-escritorio { display: inline-flex !important; }
  .menu-movil { display: none; }
}
.desplegable { position: relative; }
.panel { position: absolute; top: calc(100% + 12px); left: -.5rem; z-index: 40; background: #fff; border: 1px solid var(--borde);
  border-radius: 18px; box-shadow: 0 24px 60px rgba(15,27,45,.16), 0 2px 6px rgba(15,27,45,.06); padding: .7rem;
  width: 360px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; }
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }  /* puente para el ratón */
.desplegable.abierto > .panel,
html:not(.js) .desplegable:hover > .panel, html:not(.js) .desplegable:focus-within > .panel {
  opacity: 1; visibility: visible; transform: none; }
.panel-producto { width: 820px; display: grid; grid-template-columns: 1fr 230px; gap: .7rem; }
.panel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.panel-lista.dos-columnas { grid-template-columns: 1fr 1fr; }
.panel-item { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .75rem; border-radius: 12px; text-decoration: none;
  color: var(--texto); }
.panel-item:hover, .panel-item:focus-visible { background: var(--suave); }
.panel-item b { display: block; color: var(--tinta); font-weight: 650; font-size: .95rem; line-height: 1.3; }
.panel-item small { display: block; color: var(--gris); font-size: .83rem; line-height: 1.4; margin-top: .15rem; }
.panel-icono { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: var(--acento-claro); color: var(--acento); }
.panel-item:hover .panel-icono { background: var(--acento); color: #fff; }
.panel-promo { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; border-radius: 14px; text-decoration: none;
  color: #cdd6e4; background: radial-gradient(18rem 12rem at 100% 0%, rgba(47,127,214,.45), transparent 70%), var(--tinta);
  font-size: .88rem; }
.panel-promo b { color: #fff; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.01em; }
.panel-promo .enlace-flecha { color: #8fc1ff; margin-top: auto; }
.pastilla-promo { align-self: flex-start; display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 99px; padding: .2rem .6rem; background: var(--acento-claro); color: var(--acento); }
.panel-promo .pastilla-promo, .final .pastilla-promo { background: rgba(143,193,255,.16); color: #a9d0ff; }

/* Menú del móvil (sin JavaScript también: <details>) */
.menu-movil > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 11px; color: var(--tinta); background: #fff; }
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil .ic.cerrar, .menu-movil[open] .ic.abrir { display: none; }
.menu-movil[open] .ic.cerrar { display: block; }
.menu-movil-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--borde);
  box-shadow: 0 30px 50px rgba(15,27,45,.14); padding: .6rem 1.2rem 1.4rem; max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px); overflow-y: auto; }
.grupo-movil { border-bottom: 1px solid var(--borde); }
.grupo-movil > summary, .enlace-movil { list-style: none; display: flex; align-items: center; justify-content: space-between;
  min-height: 54px; font-weight: 650; font-size: 1.05rem; color: var(--tinta); cursor: pointer; text-decoration: none; }
.enlace-movil { border-bottom: 1px solid var(--borde); }
.grupo-movil > summary::-webkit-details-marker { display: none; }
.grupo-movil[open] > summary .flecha { transform: rotate(180deg); }
.grupo-movil ul { list-style: none; margin: 0 0 .7rem; padding: 0; }
.grupo-movil li a { display: block; padding: .6rem .8rem; border-radius: 10px; color: var(--texto); text-decoration: none; font-weight: 500; }
.grupo-movil li a:hover { background: var(--suave); }
.menu-movil-acciones { display: grid; gap: .6rem; margin-top: 1.2rem; }
.menu-movil-acciones .boton { width: 100%; }
@media (max-width: 380px) { .cabecera-acciones .boton.pequeno { display: none; } }

/* Botones y enlaces */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--tinta); color: #fff;
  text-decoration: none; font-weight: 650; padding: .95rem 1.45rem; border-radius: 12px; border: 0; font-size: 1.02rem;
  cursor: pointer; min-height: 50px; box-shadow: 0 6px 16px rgba(15,27,45,.18); transition: transform .15s, box-shadow .15s;
  font-family: inherit; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,27,45,.22); }
.boton.secundario { background: #fff; color: var(--tinta); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.boton.azul { background: var(--acento); box-shadow: 0 8px 20px rgba(31,111,229,.28); }
.boton.marca { background: linear-gradient(135deg, var(--marca), var(--acento)); }
.boton.pequeno { padding: .5rem 1rem; font-size: .92rem; min-height: 40px; color: #fff; background: var(--acento); box-shadow: none;
  white-space: nowrap; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--acento); text-decoration: none; }
.enlace-flecha .ic { width: 18px; height: 18px; transition: transform .15s; }
.enlace-flecha:hover .ic { transform: translateX(3px); }

/* Portada (genérica: checklist, Nomiblio) */
.portada { position: relative; overflow: hidden; padding: 3.2rem 0 4rem;
  background: radial-gradient(60rem 40rem at 85% -10%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 60%),
              radial-gradient(40rem 30rem at -10% 20%, color-mix(in srgb, var(--marca) 10%, transparent), transparent 60%), #fff; }
.portada h1 { margin-top: 1rem; }
.etiqueta { display: inline-block; font-size: .82rem; font-weight: 650; color: var(--marca); background: var(--marca-claro);
  border-radius: 99px; padding: .3rem .8rem; }
.subtitulo { font-size: clamp(1.05rem, 2.6vw, 1.2rem); color: var(--gris); max-width: 44rem; }

/* ===== Portada de Contablio ===== */
.h-portada { position: relative; padding: 2.6rem 0 2.5rem; overflow: hidden;
  background: radial-gradient(70rem 36rem at 50% 108%, rgba(31,111,229,.16), transparent 62%),
              linear-gradient(180deg, #fff 0%, #f5f8fe 100%); }
.pastilla-hero { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .8rem .3rem .35rem; border-radius: 99px;
  background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--texto); font-size: .88rem;
  font-weight: 550; text-decoration: none; margin-bottom: 1.4rem; }
.pastilla-hero b { background: var(--tinta); color: #fff; border-radius: 99px; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; }
@media (max-width: 480px) { .pastilla-hero { font-size: .8rem; gap: .4rem; } }
.pastilla-hero .ic { width: 16px; height: 16px; color: var(--acento); }
.pastilla-hero:hover { border-color: #c9d6ea; }
.h-titular { font-size: clamp(2.3rem, 7.2vw, 4.3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; max-width: 15ch; text-wrap: balance;
  margin-left: auto; margin-right: auto; }
.h-titular span { color: var(--acento); }
.h-portada .entradilla { margin-top: 1rem; }
.captura { display: flex; gap: .5rem; max-width: 520px; margin: 1.8rem auto .7rem; background: #fff; border: 1px solid var(--borde);
  border-radius: 16px; padding: .4rem; box-shadow: var(--sombra); }
.captura:focus-within { border-color: #9cbff2; box-shadow: 0 0 0 4px rgba(31,111,229,.12), var(--sombra); }
.captura input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 1rem; padding: .7rem .8rem; background: transparent; color: var(--tinta); }
.captura input:focus { outline: none; }
.captura .boton { padding: .8rem 1.1rem; min-height: 48px; white-space: nowrap; }
@media (max-width: 480px) { .captura { flex-direction: column; } .captura .boton { width: 100%; } }

/* Vídeo del producto en un marco de navegador */
.demo { margin: 2.6rem auto 0; max-width: 1080px; }
.demo-marco { position: relative; background: #fff; border: 1px solid #dbe2ec; border-radius: 16px; overflow: hidden;
  box-shadow: 0 50px 100px -20px rgba(15,27,45,.25), 0 30px 60px -30px rgba(15,27,45,.3); }
.demo-barra { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #f3f5f9;
  border-bottom: 1px solid var(--borde); }
.demo-barra i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe5; }
.demo-barra span { margin: 0 auto; transform: translateX(-24px); font-size: .76rem; color: var(--gris); background: #fff;
  border: 1px solid var(--borde); border-radius: 7px; padding: .1rem 2.2rem; }
.demo video { width: 100%; aspect-ratio: 16 / 10; background: #f3f5f9; object-fit: cover; }
@media (max-width: 700px) { .demo video { aspect-ratio: 4 / 5; } }
.demo-pausa { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(15,27,45,.72); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .85; }
.demo-pausa:hover { opacity: 1; }
.demo-pausa .ic { width: 18px; height: 18px; }
.demo-pausa .play, .demo.parado .demo-pausa .pausa { display: none; }
.demo.parado .demo-pausa .play { display: block; }
.demo figcaption { text-align: center; }
@media (max-width: 560px) { .demo-barra span { display: none; } .demo-marco { border-radius: 12px; } }

/* Franja de confianza */
.confianza { padding: 1.6rem 0; border-bottom: 1px solid var(--borde); background: #fff; }
.confianza-lista { list-style: none; display: grid; gap: 1rem 1.6rem; grid-template-columns: 1fr; margin: 0 auto; }
@media (min-width: 560px) { .confianza-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .confianza-lista { grid-template-columns: repeat(4, 1fr); } }
.confianza li { display: flex; gap: .7rem; align-items: flex-start; }
.confianza li > .ic { width: 22px; height: 22px; color: var(--acento); margin-top: .1rem; }
.confianza li > span { display: grid; font-size: .85rem; color: var(--gris); line-height: 1.4; }
.confianza b { color: var(--tinta); font-size: .95rem; font-weight: 650; }
.confianza a { color: var(--gris); }
.confianza a:hover { color: var(--acento); }

/* Secciones */
section { padding: 4.5rem 0; }
.suave { background: var(--suave); }
.cabeza-seccion { max-width: 46rem; margin-bottom: 2.4rem; }
.cabeza-seccion.centrado { text-align: center; }
.h2-pequeno { font-size: clamp(1.4rem, 3.6vw, 2rem); }

/* Fechas legales */
.fechas { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 760px) { .fechas { grid-template-columns: repeat(2, 1fr); } }
.fecha-legal { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem 1.5rem; box-shadow: var(--sombra); }
.fecha-legal .quien { font-weight: 650; color: var(--gris); font-size: .92rem; }
.fecha-legal strong { display: block; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--tinta); letter-spacing: -.02em; margin: .2rem 0 .5rem; }
.fuente { font-size: .84rem; color: var(--gris); }
.nota-fechas { margin-top: 1.2rem; }

/* Qué incluye: accesos a cada módulo */
.incluye { padding-bottom: 1rem; }
.incluye .cabeza-seccion { margin-bottom: 1.6rem; }
.modulos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.modulos a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 99px; background: #fff;
  border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--tinta); font-weight: 600; font-size: .95rem; text-decoration: none; }
.modulos a .ic { color: var(--acento); width: 18px; height: 18px; }
.modulos a:hover { border-color: #b9cdf0; }

/* Bloques por módulo (patrón F: texto a la izquierda, captura a la derecha; alternando) */
.area { padding: 5rem 0; }
.area-rejilla { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 960px) { .area-rejilla { grid-template-columns: .9fr 1.1fr; gap: 4.5rem; }
  .area-rejilla.inversa { grid-template-columns: 1.1fr .9fr; }
  .area-rejilla.inversa > .area-texto { order: 2; } }
.area h2 { font-size: clamp(1.7rem, 4.2vw, 2.45rem); }
.puntos { list-style: none; padding: 0; display: grid; gap: .85rem; margin: 1.5rem 0 1.7rem; }
.puntos li { position: relative; padding-left: 2rem; color: var(--gris); font-size: .98rem; }
.puntos li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 20px; height: 20px; border-radius: 50%;
  background: var(--acento-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fe5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.puntos b { color: var(--tinta); font-weight: 650; }
.visual { position: relative; }
.captura-app { margin: 0; background: #fff; border: 1px solid #dbe2ec; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-l); }
.captura-app .demo-barra { height: 28px; padding: 0 12px; }
.captura-app .demo-barra i { width: 8px; height: 8px; }
.captura-app img { width: 100%; }
.movil-app { margin: 0; background: var(--tinta); padding: 7px; border-radius: 30px; box-shadow: var(--sombra-l); }
.movil-app img { border-radius: 24px; width: 100%; aspect-ratio: 540 / 1090; object-fit: cover; object-position: top; }
.con-movil { padding-bottom: 2.5rem; }
.con-movil .movil-app { position: absolute; right: -6px; bottom: -10px; width: 31%; max-width: 210px; }
.solo-movil { display: grid; place-items: center; padding: 1rem 0; }
.solo-movil::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31,111,229,.18), transparent); }
.movil-app.grande { position: relative; width: min(300px, 74%); }
.tarjeta-ui { background: #fff; border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-l); padding: 1.1rem 1.2rem; }
.ui-cab { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.ui-cab b { color: var(--tinta); font-size: .98rem; }
.ui-cab span { color: var(--tinta); font-weight: 700; }
.tarjeta-ui.flotada { position: relative; margin: -2.5rem 0 0 auto; width: min(100%, 330px); z-index: 2; }
@media (min-width: 640px) {
  .tarjeta-ui.flotada { position: absolute; margin: 0; }
  .tarjeta-ui.abajo-izquierda { left: -5%; bottom: -16%; }
  .tarjeta-ui.abajo-izquierda-movil { left: 0; bottom: 8%; width: 290px; }
}
@media (min-width: 640px) { #facturacion .visual { margin-bottom: 4.5rem; } }
.tarjeta-sub { margin: -.55rem 0 .8rem; font-size: .8rem; }
.historial { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .65rem; }
.historial li { padding-left: 1.1rem; position: relative; display: grid; font-size: .88rem; line-height: 1.35; }
.historial li::before { content: ""; position: absolute; left: 0; top: .4rem; width: 8px; height: 8px; border-radius: 50%; background: #c8d2e0; }
.historial li.ok::before { background: var(--exito); box-shadow: 0 0 0 4px rgba(18,163,107,.15); }
.historial b { color: var(--tinta); font-weight: 600; } .historial span { color: var(--gris); font-size: .8rem; }
.sello-verifactu { display: flex; gap: .7rem; align-items: center; background: #ecf8f2; border: 1px solid #c7ecd9; border-radius: 12px;
  padding: .7rem .85rem; }
.sello-verifactu .ic { width: 28px; height: 28px; color: var(--exito); }
.sello-verifactu span { display: grid; line-height: 1.3; }
.sello-verifactu b { color: #0d5c3d; font-size: .9rem; }
.sello-verifactu small { color: #3f7a60; font-size: .76rem; }
.movil-fila { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid var(--borde); font-size: .88rem; }
.pildora { font-size: .72rem; font-weight: 700; border-radius: 99px; padding: .12rem .5rem; background: #e7f6ee; color: var(--exito); }
.pildora.azul { background: #e6effb; color: var(--acento); }
.ejemplo { font-size: .74rem; color: var(--gris); margin: .6rem 0 0; }
.proximamente { display: inline-block; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
  color: var(--aviso); background: #fff4dc; border-radius: 6px; padding: .12rem .45rem; vertical-align: middle; }

/* Para quién */
.quien-rejilla { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 960px) { .quien-rejilla { grid-template-columns: .8fr 1.2fr; gap: 4.5rem; } }
.foto-con-ui { position: relative; max-width: 440px; margin: 0 auto; width: 100%; }
.foto-con-ui picture img { border-radius: 26px; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--sombra-l); width: 100%; }
/* Aviso de IA (Reglamento de IA, art. 50) a 5 px: decisión expresa del titular (07-10-2026), avisado del riesgo de
   que no cuente como «perceptible»; no cambiar sin su indicación */
.etiqueta-ia { position: absolute; left: 6px; top: 4px; color: #fff; font-size: 5px; font-weight: 600;
  letter-spacing: .02em; }
.perfiles { display: grid; gap: .9rem; margin-top: 1.4rem; }
.perfil { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--borde); border-radius: 16px;
  padding: 1.15rem 1.25rem; box-shadow: var(--sombra); }
.perfil h3 { margin: .1rem 0 .25rem; font-size: 1.08rem; }
.perfil p { margin: 0; color: var(--gris); font-size: .96rem; }

/* Pasos */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { counter-increment: paso; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem;
  box-shadow: var(--sombra); color: var(--gris); }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--acento); color: #fff; font-weight: 800; margin-bottom: .9rem; }
.pasos strong { color: var(--tinta); display: block; font-size: 1.1rem; margin-bottom: .3rem; }

/* Precios */
.aviso-precio { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: center; background: #fff;
  border: 1px solid var(--borde); border-radius: 99px; padding: .6rem 1.2rem; margin: 0 auto 2rem; width: fit-content;
  max-width: 100%; font-size: .92rem; box-shadow: var(--sombra); }
@media (max-width: 600px) { .aviso-precio { border-radius: 18px; } }
.planes { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .planes { grid-template-columns: repeat(4, 1fr); } }  /* 7 planes: 4 + 3 (08-10-2026) */
.plan { background: #fff; border: 1px solid var(--borde); border-radius: 22px; padding: 1.7rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; }
.plan.destacado { border: 2px solid var(--acento); box-shadow: 0 20px 50px rgba(31,111,229,.18); position: relative; }
.plan.destacado::after { content: "Recomendado para pymes"; position: absolute; top: -13px; left: 1.4rem; background: var(--acento);
  color: #fff; font-size: .74rem; font-weight: 700; border-radius: 99px; padding: .2rem .7rem; }
.plan h3 { font-size: 1.2rem; margin: 0; }
.plan .para { color: var(--gris); font-size: .92rem; margin: .2rem 0 0; }
.precio { font-size: 2.6rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; margin: 1rem 0 .1rem; }
.precio small { font-size: .95rem; font-weight: 550; color: var(--gris); letter-spacing: 0; white-space: nowrap; }
.precio-texto { font-size: 1.6rem; }
@media (min-width: 1080px) { .planes .precio { font-size: 2.15rem; } .planes .precio-texto { font-size: 1.6rem; } }
.plan ul { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; font-size: .95rem; }
.plan li::before { content: "✓"; color: var(--exito); font-weight: 800; margin-right: .5rem; }
.plan .boton { margin-top: auto; }
.plan .relleno { flex: 1; min-height: 1.2rem; }

/* Sin letra pequeña */
.sin-letra { padding: 5rem 0; }
.rejilla-razones { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 22px; overflow: hidden;
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .rejilla-razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rejilla-razones { grid-template-columns: repeat(3, 1fr); } }
.rejilla-razones > div { background: #fff; padding: 1.7rem; }
.rejilla-razones p { color: var(--gris); margin: 0; }

/* Tarjetas */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra);
  position: relative; overflow: hidden; }
.tarjeta p { color: var(--gris); margin: 0; }
.tarjeta.banda { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 860px) { .tarjeta.banda { grid-template-columns: 1fr auto; padding: 2rem 2.2rem; } }
.rejilla { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }

/* Preguntas */
.preguntas details { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 0 1.2rem; margin-bottom: .7rem; }
.preguntas summary { font-weight: 650; color: var(--tinta); cursor: pointer; min-height: 56px; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-size: 1.4rem; color: var(--gris); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { color: var(--texto); }

/* Llamada final y formulario */
.final { background: radial-gradient(50rem 30rem at 100% 0%, rgba(47,127,214,.35), transparent 60%), var(--tinta); color: #cdd6e4;
  padding: 5rem 0; }
.final h2 { color: #fff; }
.final-titular { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.03em; }
.final-titular span { color: #8fc1ff; }
.antetitulo-claro { color: #8fc1ff; }
.final-rejilla { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 960px) { .final-rejilla { grid-template-columns: .95fr 1.05fr; gap: 3.5rem; } }
.final .lista-final { list-style: none; padding: 0; display: grid; gap: .5rem; margin: 1rem 0 0; }
.final .lista-final li::before { content: "✓"; color: #5fd3a3; font-weight: 800; margin-right: .5rem; }
.oferta-precio { margin-top: 1.6rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  padding: 1.5rem; display: grid; gap: .35rem; }
.oferta-cifra { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: .4rem; }
.oferta-cifra s { color: #8ea0ba; font-size: 1.1rem; }
.oferta-cifra b { color: #fff; font-size: 2.6rem; letter-spacing: -.03em; line-height: 1; }
.formulario { background: #fff; color: var(--texto); border-radius: 22px; padding: 1.6rem; box-shadow: var(--sombra-l); }
.formulario label { display: block; font-weight: 600; color: var(--tinta); margin: .9rem 0 .35rem; font-size: .95rem; }
.formulario input[type=text], .formulario input[type=email], .formulario input[type=tel], .formulario select {
  width: 100%; padding: .85rem .9rem; border: 1px solid #cfd7e3; border-radius: 12px; font-size: 1rem; min-height: 50px;
  background: #fff; font-family: inherit; color: var(--tinta); }
.formulario input:focus, .formulario select:focus { outline: 3px solid rgba(47,127,214,.25); border-color: var(--acento); }
.formulario .dos { display: grid; gap: 0 .9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .formulario .dos { grid-template-columns: 1fr 1fr; } }
.formulario .casilla { display: flex; gap: .65rem; align-items: flex-start; font-weight: 450; color: var(--texto); font-size: .9rem; }
.formulario .casilla input { margin-top: .25rem; width: 20px; height: 20px; flex: none; accent-color: var(--acento); }
.formulario .trampa { position: absolute; left: -9999px; }
.formulario .boton { width: 100%; margin-top: 1.3rem; }
.mensaje { margin-top: 1rem; padding: .9rem; border-radius: 10px; display: none; }
.mensaje.ok { display: block; background: #e7f6ee; color: #0d5c3d; }
.mensaje.error { display: block; background: #fde8e8; color: #8a1f1f; }
.nota, .letra-pequena { font-size: .84rem; color: var(--gris); }
.final .nota { color: #9fb0c8; }

/* Páginas de texto (legales, checklist) */
.texto { max-width: 52rem; }
.texto h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.texto h2 { font-size: 1.4rem; margin-top: 2rem; }
.preguntas .texto h2 { font-size: clamp(1.75rem, 4.6vw, 2.6rem); margin-top: 0; }
.caso { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.3rem; margin: 1rem 0; box-shadow: var(--sombra); }
.caso h3 { margin-top: 0; }
.aviso-info { background: #eef4fc; border: 1px solid #d5e4f7; border-radius: var(--radio-s); padding: 1rem 1.2rem; }
.tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { border-bottom: 1px solid var(--borde); padding: .65rem .5rem; text-align: left; vertical-align: top; }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding: 3rem 0 2rem; color: var(--gris); font-size: .93rem; background: #fff; }
.pie a { color: var(--texto); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie-rejilla { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
.pie-marca { grid-column: 1 / -1; }
@media (min-width: 860px) { .pie-rejilla { grid-template-columns: 1.6fr repeat(3, 1fr); } .pie-marca { grid-column: auto; } }
.pie-marca p { margin: .9rem 0 0; max-width: 22rem; }
.pie h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); margin: .3rem 0 .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie-final { border-top: 1px solid var(--borde); margin: 2.4rem 0 0; padding-top: 1.2rem; }

@media print {
  .cabecera, .pie, .no-imprimir, .franja-oferta { display: none !important; }
  body { font-size: 11.5pt; }
  section { padding: 0; }
  a { color: var(--tinta); }
  .caso, .aviso-info { box-shadow: none; }
}

/* =====================================================================================================================
   Familia «-blio» (09-10-2026): Nomiblio, Legablio, Vendiblio, Markeblio y grupoblio.com con el sistema de Contablio.
   Contablio NO cambia: todo lo de color va bajo :root:not([data-sitio="contablio"]) y sale de --acento / --acento-luz.
   ===================================================================================================================== */
.pie-familia { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--borde); font-size: .86rem; color: var(--gris);
  line-height: 1.9; }
.pie-familia a, .pie-familia span, .pie-familia b { white-space: nowrap; }
.pie-familia b { color: var(--tinta); font-weight: 650; }
.pie-familia + .pie-final { margin-top: 0; border-top: 0; padding-top: .4rem; }
.pie-aviso { margin: 2rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; background: var(--suave); border: 1px solid var(--borde);
  font-size: .88rem; color: var(--texto); }

:root:not([data-sitio="contablio"]) :focus-visible { outline-color: color-mix(in srgb, var(--acento) 45%, transparent); }
:root:not([data-sitio="contablio"]) .h-portada {
  background: radial-gradient(70rem 36rem at 50% 108%, color-mix(in srgb, var(--acento) 17%, transparent), transparent 62%),
              radial-gradient(40rem 22rem at 100% 0%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 70%),
              linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--acento) 4%, #fff) 100%); }
:root:not([data-sitio="contablio"]) .captura:focus-within { border-color: color-mix(in srgb, var(--acento) 50%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 13%, transparent), var(--sombra); }
:root:not([data-sitio="contablio"]) .panel-promo {
  background: radial-gradient(18rem 12rem at 100% 0%, color-mix(in srgb, var(--acento) 50%, transparent), transparent 70%), var(--tinta); }
:root:not([data-sitio="contablio"]) .panel-promo .enlace-flecha,
:root:not([data-sitio="contablio"]) .final-titular span,
:root:not([data-sitio="contablio"]) .antetitulo-claro { color: var(--acento-luz); }
:root:not([data-sitio="contablio"]) .panel-promo .pastilla-promo,
:root:not([data-sitio="contablio"]) .final .pastilla-promo { background: color-mix(in srgb, var(--acento-luz) 16%, transparent); color: var(--acento-luz); }
:root:not([data-sitio="contablio"]) .puntos li::before { background: var(--acento-claro); }
:root:not([data-sitio="contablio"]) .puntos li::after { content: ""; position: absolute; left: 0; top: .2rem; width: 20px; height: 20px;
  background: var(--acento);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
:root:not([data-sitio="contablio"]) .solo-movil::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 18%, transparent), transparent); }
:root:not([data-sitio="contablio"]) .boton.azul { box-shadow: 0 8px 20px color-mix(in srgb, var(--acento) 28%, transparent); }
:root:not([data-sitio="contablio"]) .final {
  background: radial-gradient(50rem 30rem at 100% 0%, color-mix(in srgb, var(--acento) 38%, transparent), transparent 60%), var(--tinta); }
:root:not([data-sitio="contablio"]) .formulario input:focus, :root:not([data-sitio="contablio"]) .formulario select:focus {
  outline-color: color-mix(in srgb, var(--acento) 25%, transparent); }
:root:not([data-sitio="contablio"]) .modulos a:hover, :root:not([data-sitio="contablio"]) .pastilla-hero:hover {
  border-color: color-mix(in srgb, var(--acento) 35%, #fff); }
:root:not([data-sitio="contablio"]) .aviso-info { background: var(--acento-claro); border-color: color-mix(in srgb, var(--acento) 18%, #fff); }
:root:not([data-sitio="contablio"]) .pastilla-hero b { background: var(--acento); }

/* ===== Maqueta animada del producto (en vez de vídeo): escenas que se turnan, con pausa y sin movimiento si se pide ===== */
.anim { position: relative; aspect-ratio: 16 / 10; background: #f7f8fb; overflow: hidden; }
@media (max-width: 700px) { .anim { aspect-ratio: auto; height: 600px; } }
.anim-pestanas { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: .35rem;
  background: rgba(255,255,255,.94); border: 1px solid var(--borde); border-radius: 99px; padding: .3rem; box-shadow: var(--sombra); }
.anim-pestanas span { position: relative; overflow: hidden; font-size: .76rem; font-weight: 650; color: var(--gris); padding: .3rem .75rem;
  border-radius: 99px; white-space: nowrap; animation: pestana 15s infinite both; }
.anim-pestanas span::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acento);
  animation: progreso 15s linear infinite both; }
.anim-pestanas span:nth-child(2), .anim-pestanas span:nth-child(2)::after { animation-delay: 5s; }
.anim-pestanas span:nth-child(3), .anim-pestanas span:nth-child(3)::after { animation-delay: 10s; }
@media (max-width: 420px) { .anim-pestanas span { padding: .3rem .5rem; font-size: .7rem; } }
@keyframes pestana { 0%, 32% { background: var(--acento-claro); color: var(--acento); } 34%, 100% { background: transparent; color: var(--gris); } }
@keyframes progreso { 0% { width: 0; opacity: 1; } 33% { width: 100%; opacity: 1; } 33.5%, 100% { width: 0; opacity: 0; } }
.escena { position: absolute; inset: 0; padding: 20px 20px 62px; opacity: 0; animation: escena 15s infinite both; }
.escena:nth-of-type(2) { animation-delay: 5s; } .escena:nth-of-type(3) { animation-delay: 10s; }
@media (max-width: 560px) { .escena { padding: 12px 12px 58px; } }
@keyframes escena { 0% { opacity: 0; transform: translateY(8px); visibility: visible; } 2.5%, 31% { opacity: 1; transform: none; visibility: visible; }
  33.5%, 100% { opacity: 0; transform: translateY(-6px); visibility: hidden; } }
.entra { animation: entra 15s infinite both; animation-delay: var(--d, 0s); }
@keyframes entra { 0% { opacity: 0; transform: translateY(6px); } 3%, 100% { opacity: 1; transform: none; } }
.cambia-a { animation: ocultar 15s infinite both; animation-delay: var(--d, 0s); }
.cambia-b { animation: mostrar 15s infinite both; animation-delay: var(--d, 0s); }
@keyframes ocultar { 0%, 2% { opacity: 1; } 3%, 100% { opacity: 0; } }
@keyframes mostrar { 0%, 2% { opacity: 0; } 3%, 100% { opacity: 1; } }
.demo.parado .anim *, .demo.parado .anim *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .escena, .entra, .cambia-a, .cambia-b, .anim-pestanas span, .anim-pestanas span::after { animation: none !important; }
  .escena { opacity: 0; visibility: hidden; } .escena:first-of-type { opacity: 1; visibility: visible; }
  .cambia-a { opacity: 0; } .anim-pestanas { display: none; }
}

/* Piezas de interfaz de las maquetas (todas con «Datos de ejemplo») */
.maq { display: grid; grid-template-columns: 188px 1fr; height: 100%; background: #fff; border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(15,27,45,.06); }
.maq.sin-lateral { grid-template-columns: 1fr; }
@media (max-width: 760px) { .maq { grid-template-columns: 1fr; } .maq-lateral { display: none !important; } }
.maq-lateral { background: var(--suave); border-right: 1px solid var(--borde); padding: 16px 12px; display: grid; align-content: start; gap: 2px; }
.maq-lateral .marca-mini { display: flex; align-items: center; gap: 8px; font-weight: 750; color: var(--tinta); font-size: .9rem;
  margin: 0 0 14px 6px; }
.maq-lateral .marca-mini svg { width: 22px; height: 22px; }
.maq-lateral span { font-size: .8rem; color: var(--gris); padding: 7px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: center; }
.maq-lateral span .ic { width: 15px; height: 15px; }
.maq-lateral span.activo { background: #fff; color: var(--tinta); font-weight: 650; box-shadow: 0 1px 2px rgba(15,27,45,.08); }
.maq-lateral span.activo .ic { color: var(--acento); }
.maq-cuerpo { padding: 20px 22px; min-width: 0; overflow: hidden; }
@media (max-width: 560px) { .maq-cuerpo { padding: 14px; } }
.maq-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: 14px; flex-wrap: wrap; }
.maq-cab h4 { margin: 0; font-size: 1.05rem; color: var(--tinta); letter-spacing: -.01em; }
.maq-cab small { display: block; color: var(--gris); font-size: .76rem; font-weight: 500; margin-top: 2px; }
.maq-boton { display: inline-block; font-size: .76rem; font-weight: 650; color: #fff; background: var(--acento); border-radius: 8px; padding: .4rem .7rem; white-space: nowrap; }
.maq-boton.claro { background: #fff; color: var(--tinta); border: 1px solid var(--borde); }
.maq-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.maq-kpis div { border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; min-width: 0; }
.maq-kpis small { display: block; font-size: .7rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maq-kpis b { font-size: 1rem; color: var(--tinta); letter-spacing: -.01em; white-space: nowrap; }
.maq-tabla { display: grid; font-size: .8rem; }
.maq-tabla > div { display: grid; grid-template-columns: var(--cols, 2fr 1fr 1fr 1fr); gap: 10px; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--borde); color: var(--texto); }
.maq-tabla > div:first-child { color: var(--gris); font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.maq-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.maq-tabla b { color: var(--tinta); font-weight: 600; }
.estado-celda { display: grid; }
.estado-celda > * { grid-area: 1 / 1; justify-self: start; align-self: center; }
@media (max-width: 560px) { .maq-tabla .ocultable { display: none; } .maq-tabla > div { --cols: var(--cols-movil, 1.6fr 1fr 1fr) !important; } }
.pildora.gris { background: #eef1f5; color: var(--gris); }
.pildora.ambar { background: #fff4dc; color: var(--aviso); }
.pildora.marca { background: var(--acento-claro); color: var(--acento); }
.demo-barra .ejemplo-marca { margin-left: auto; font-size: .7rem; font-weight: 650; color: var(--gris); background: #fff;
  border: 1px solid var(--borde); border-radius: 99px; padding: .05rem .6rem; white-space: nowrap; }
.demo-barra span + .ejemplo-marca { margin-left: 0; }
@media (max-width: 560px) { .maq-kpis { gap: 6px; } .maq-kpis div { padding: 7px 8px; } .maq-kpis b { font-size: .8rem; }
  .maq-kpis small { font-size: .64rem; } }
/* Cabecera de la familia en el móvil: el <nav> vacío no ocupa sitio (el botón «Lista de espera» es más largo que el de Contablio) */
@media (max-width: 1023px) { :root:not([data-sitio="contablio"]) .cabecera .nav { display: none; } }
@media (max-width: 400px) { :root:not([data-sitio="contablio"]) .cabecera-acciones .boton.pequeno { padding: .5rem .8rem; font-size: .88rem; } }
.rejilla-maq { display: grid; gap: 14px; height: 100%; grid-template-columns: 1.15fr 1fr; align-items: start; }
@media (max-width: 700px) { .rejilla-maq { grid-template-columns: 1fr; } .rejilla-maq .solo-ancho { display: none; } }
.panel-maq { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(15,27,45,.06); min-width: 0; }
.panel-maq h4 { margin: 0 0 2px; font-size: 1rem; color: var(--tinta); }
.panel-maq > small { display: block; color: var(--gris); font-size: .74rem; margin-bottom: 12px; }

/* Recibo de nómina */
.recibo { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px; font-size: .8rem; color: var(--texto);
  box-shadow: var(--sombra-l); }
.recibo-cab { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); margin-bottom: 6px; }
.recibo-cab b { color: var(--tinta); display: block; font-size: .9rem; }
.recibo-cab small { color: var(--gris); font-size: .72rem; display: block; }
.recibo-cab .derecha { text-align: right; }
.recibo h5 { margin: 10px 0 3px; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.recibo .linea { display: flex; justify-content: space-between; gap: 1rem; padding: 3px 0; font-variant-numeric: tabular-nums; }
.recibo .linea.suma { border-top: 1px solid var(--borde); margin-top: 3px; padding-top: 5px; font-weight: 650; color: var(--tinta); }
.recibo .total { display: flex; justify-content: space-between; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--acento-claro); color: var(--acento); font-weight: 750; font-size: .95rem; font-variant-numeric: tabular-nums; }
.recibo .pie-recibo { margin: 8px 0 0; font-size: .68rem; color: var(--gris); }

/* Móvil dibujado en HTML */
.movil-maq { width: 260px; max-width: 100%; background: var(--tinta); padding: 8px; border-radius: 36px; box-shadow: var(--sombra-l); margin: 0 auto; }
.movil-maq > div { background: #fff; border-radius: 29px; padding: 34px 16px 18px; min-height: 440px; position: relative; font-size: .8rem; overflow: hidden; }
.movil-maq > div::before { content: ""; position: absolute; top: 9px; left: 50%; width: 74px; height: 20px; margin-left: -37px;
  border-radius: 99px; background: var(--tinta); }
.movil-maq h4 { margin: 4px 0 2px; font-size: 1.02rem; color: var(--tinta); }
.movil-maq .sub { color: var(--gris); font-size: .74rem; margin: 0 0 12px; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.teclado i { font-style: normal; display: grid; place-items: center; height: 40px; border-radius: 12px; background: var(--suave);
  color: var(--tinta); font-weight: 650; font-size: 1rem; }
.pin { display: flex; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.pin i { width: 12px; height: 12px; border-radius: 50%; background: var(--acento); }
.pin i.vacio { background: #dfe4ec; }
.boton-fichar { display: block; text-align: center; background: var(--acento); color: #fff; border-radius: 14px; padding: 12px; font-weight: 700;
  margin: 12px 0; font-size: .9rem; }
.fila-movil { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.fila-movil b { color: var(--tinta); font-weight: 600; display: block; }
.fila-movil small { color: var(--gris); font-size: .7rem; }
.hora-grande { font-size: 2.3rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; text-align: center; margin: 4px 0 0; font-variant-numeric: tabular-nums; }

/* Calendario pequeño */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: .74rem; text-align: center; }
.calendario span { padding: 7px 0; border-radius: 7px; color: var(--texto); }
.calendario .dia { color: var(--gris); font-weight: 650; font-size: .64rem; }
.calendario .vac { background: var(--acento); color: #fff; font-weight: 650; }
.calendario .pend { background: var(--acento-claro); color: var(--acento); font-weight: 650; }
.calendario .fest { background: #fde8e8; color: #9b2c2c; }
.calendario .fin { color: #b3bccb; }
.leyenda-cal { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 10px; font-size: .7rem; color: var(--gris); }
.leyenda-cal i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Documentos, mensajes, formularios dibujados */
.doc-lista { display: grid; gap: 8px; }
.doc { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; background: #fff; font-size: .8rem; min-width: 0; }
.doc > .ic { color: var(--acento); width: 18px; height: 18px; }
.doc b { color: var(--tinta); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc small { color: var(--gris); font-size: .7rem; }
.doc > span:not(.pildora) { min-width: 0; }
.doc .pildora { margin-left: auto; white-space: nowrap; }
.burbuja { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .8rem; line-height: 1.45; margin-bottom: 8px; }
.burbuja.ellos { background: var(--suave); color: var(--texto); border-bottom-left-radius: 4px; }
.burbuja.tu { background: var(--acento); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.burbuja small { display: block; opacity: .75; font-size: .66rem; margin-top: 3px; }
.campo-maq { margin-bottom: 10px; }
.campo-maq small { display: block; font-size: .7rem; color: var(--gris); font-weight: 600; margin-bottom: 4px; }
.campo-maq div { border: 1px solid #cfd7e3; border-radius: 9px; padding: 8px 10px; font-size: .82rem; color: var(--tinta); background: #fff; }
.opciones-maq { display: flex; gap: 8px; flex-wrap: wrap; }
.opciones-maq span { border: 1px solid var(--borde); border-radius: 9px; padding: 7px 11px; font-size: .8rem; background: #fff; }
.opciones-maq span.elegida { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); font-weight: 650; }
.progreso-maq { height: 6px; border-radius: 99px; background: var(--suave); overflow: hidden; margin: 6px 0 16px; }
.progreso-maq i { display: block; height: 100%; width: var(--p, 40%); background: var(--acento); border-radius: 99px; }
.desglose-maq { display: grid; font-size: .84rem; }
.desglose-maq > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 10px 0; border-bottom: 1px dashed var(--borde); }
.desglose-maq > div:last-child { border-bottom: 0; font-weight: 750; color: var(--tinta); }
.desglose-maq .tipo { display: block; font-size: .7rem; color: var(--gris); font-weight: 500; }
.importe-oculto { display: inline-block; width: 64px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #e3e8ef, #f1f4f8); flex: none; }
.hitos { display: grid; }
.hito { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding-bottom: 14px; position: relative; font-size: .82rem; }
.hito::before { content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; background: var(--borde); }
.hito:last-child::before { display: none; }
.hito > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--suave); border: 2px solid var(--borde);
  font-style: normal; font-size: .7rem; font-weight: 750; color: var(--gris); }
.hito.hecho > i { background: var(--acento); border-color: var(--acento); color: #fff; }
.hito.ahora > i { border-color: var(--acento); color: var(--acento); background: #fff; }
.hito b { color: var(--tinta); display: block; font-weight: 600; }
.hito small { color: var(--gris); font-size: .72rem; }
.huella { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .68rem; color: var(--gris); }

/* Puntuación, embudo y borrador (Vendiblio) */
.anillo { --v: 82; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--acento) calc(var(--v) * 1%), var(--suave) 0); }
.anillo span { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center;
  font-weight: 800; font-size: 1.5rem; color: var(--tinta); line-height: 1; }
.anillo small { display: block; font-size: .62rem; color: var(--gris); font-weight: 600; margin-top: 3px; }
.puntua { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.nota-abc { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-weight: 800; font-size: .82rem;
  background: var(--acento); color: #fff; flex: none; }
.nota-abc.b { background: var(--acento-claro); color: var(--acento); } .nota-abc.c { background: #eef1f5; color: var(--gris); }
.razones { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: .8rem; }
.razones li { display: flex; gap: 8px; align-items: baseline; }
.razones li::before { content: "+"; font-weight: 800; color: var(--exito); }
.razones li.menos::before { content: "−"; color: var(--aviso); }
.fuente-dato { font-size: .64rem; font-weight: 700; color: var(--acento); background: var(--acento-claro); border-radius: 5px; padding: .05rem .35rem;
  margin-left: .3rem; white-space: nowrap; }
.borrador { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: #fff; font-size: .82rem; }
.borrador-cab { padding: 9px 12px; border-bottom: 1px solid var(--borde); background: var(--suave); display: grid; gap: 2px; font-size: .76rem; color: var(--gris); }
.borrador-cab b { color: var(--tinta); font-weight: 600; }
.borrador-cuerpo { padding: 12px; color: var(--texto); line-height: 1.55; }
.borrador-cuerpo p { margin: 0 0 .5rem; }
.borrador-cuerpo mark { background: var(--acento-claro); color: var(--tinta); border-radius: 4px; padding: 0 .2rem; }
.borrador-pie { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.filtro-ok { display: flex; gap: .6rem; align-items: center; background: #ecf8f2; border: 1px solid #c7ecd9; border-radius: 10px; padding: .55rem .75rem;
  font-size: .78rem; color: #0d5c3d; }
.filtro-ok .ic { color: var(--exito); width: 20px; height: 20px; }
.filtro-ok b { color: #0d5c3d; }
.embudo-maq { display: grid; gap: 8px; }
.embudo-maq > div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; font-size: .78rem; }
.embudo-maq i { display: block; height: 22px; border-radius: 7px; width: var(--w); background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 50%, #fff)); }
.ab-maq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ab-maq > div { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; font-size: .74rem; color: var(--gris); }
.ab-maq b { display: block; color: var(--tinta); font-size: .8rem; }

/* Vídeo vertical (reel) y piezas (Markeblio) */
.reel { position: relative; width: min(300px, 80%); margin: 0 auto; background: var(--tinta); padding: 8px; border-radius: 36px; box-shadow: var(--sombra-l); }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 29px; background: #1b2232; }
/* Aviso de IA visible (Reglamento de IA, art. 50): mínimo 12 px y con contraste, aunque el vídeo lo lleve pequeño */
.marca-ia { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(15,27,45,.86); color: #fff; font-size: 12.5px; font-weight: 650; line-height: 1.2; border-radius: 99px;
  padding: .32rem .7rem; }
.marca-ia .ic { width: 14px; height: 14px; }
.reel .demo-pausa { right: 18px; bottom: 18px; }
.piezas { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 960px) { .piezas { grid-template-columns: 1.7fr 1fr; gap: 3rem; } }
.pieza { margin: 0; }
.pieza figcaption { margin-top: 1rem; font-size: .9rem; color: var(--gris); text-align: center; }
.pieza figcaption b { display: block; color: var(--tinta); }
.rotulo-piezas { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 650; color: var(--acento);
  background: var(--acento-claro); border-radius: 99px; padding: .3rem .85rem; margin-bottom: 1rem; }
.rotulo-piezas .ic { width: 16px; height: 16px; }
.control-calidad { display: grid; gap: 8px; }
.control-calidad > div { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
  font-size: .82rem; background: #fff; }
.control-calidad > div > .ic { color: var(--acento); width: 18px; height: 18px; }
.control-calidad b { color: var(--tinta); font-weight: 600; }
.control-calidad .pildora { margin-left: auto; white-space: nowrap; }
.medidor { height: 6px; border-radius: 99px; background: var(--suave); overflow: hidden; flex: 1; max-width: 110px; margin-left: auto; }
.medidor i { display: block; height: 100%; width: var(--w); background: var(--exito); }
.medidor + .pildora { margin-left: 0; }

/* Formulario de lista de espera aún cerrado (sin lista de Brevo): se ve el componente, desactivado y con el aviso */
.formulario.cerrado fieldset { border: 0; padding: 0; margin: 0; min-width: 0; opacity: .5; }
.formulario.cerrado input, .formulario.cerrado select, .formulario.cerrado button { cursor: not-allowed; }
.formulario.cerrado .boton { background: #9aa6b8; box-shadow: none; transform: none; }
.aviso-cerrado { display: flex; gap: .75rem; align-items: flex-start; background: var(--acento-claro); color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--acento) 22%, #fff); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .4rem; font-size: .95rem; }
.aviso-cerrado .ic { color: var(--acento); margin-top: .15rem; }
.aviso-cerrado a { font-weight: 650; color: var(--acento); }

/* «Lo que no hace»: límites claros */
.limites { display: grid; gap: .9rem; }
@media (min-width: 760px) { .limites { grid-template-columns: repeat(3, 1fr); } }
.limites > div { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 1.4rem 1.4rem; box-shadow: var(--sombra); }
.limites .ic { color: var(--acento); width: 26px; height: 26px; margin-bottom: .7rem; }
.limites h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.limites p { margin: 0; color: var(--gris); font-size: .95rem; }

/* ===== grupoblio.com ===== */
.blio { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .blio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .blio { grid-template-columns: repeat(4, 1fr); } }
.pilar { background: #fff; border: 1px solid var(--borde); border-radius: 22px; padding: 1.6rem; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.pilar .letra { font-size: 4.2rem; font-weight: 850; line-height: .9; letter-spacing: -.05em; color: var(--tinta); display: block; }
.pilar .letra span { color: var(--gris); font-size: .32em; font-weight: 700; letter-spacing: -.01em; margin-left: .3rem; }
.pilar h3 { margin: 1rem 0 .4rem; font-size: 1.2rem; }
.pilar p { color: var(--gris); margin: 0 0 1.1rem; font-size: .96rem; }
.pilar .quien { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.chip { --c: var(--acento); display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 650; border-radius: 99px; padding: .2rem .6rem;
  background: color-mix(in srgb, var(--c) 11%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); text-decoration: none; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.acronimo { display: flex; justify-content: center; gap: .4rem clamp(.8rem, 3vw, 2.2rem); flex-wrap: wrap; margin: 1.6rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 600; color: var(--gris); }
.acronimo b { color: var(--tinta); font-weight: 850; }
.marcas-rejilla { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .marcas-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .marcas-rejilla { grid-template-columns: repeat(3, 1fr); } }
.marca-tarjeta { --c: var(--acento); display: flex; flex-direction: column; gap: .8rem; background: #fff; border: 1px solid var(--borde);
  border-radius: 22px; padding: 1.5rem; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.marca-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.marca-tarjeta .cab { display: flex; align-items: center; gap: .85rem; }
.marca-tarjeta .simbolo { width: 48px; height: 48px; flex: none; }
.marca-tarjeta h3 { margin: 0; font-size: 1.2rem; }
.marca-tarjeta h3 small { display: block; font-size: .84rem; font-weight: 550; color: var(--gris); letter-spacing: 0; margin-top: .15rem; }
.marca-tarjeta p { margin: 0; color: var(--texto); font-size: .96rem; }
.marca-tarjeta .relleno { flex: 1; }
.marca-tarjeta .pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding-top: .8rem; border-top: 1px solid var(--borde); }
.marca-tarjeta .dominio { font-weight: 650; font-size: .92rem; color: color-mix(in srgb, var(--c) 80%, #000); text-decoration: none; }
.estado { font-size: .74rem; font-weight: 700; border-radius: 99px; padding: .2rem .65rem; white-space: nowrap; }
.estado.disponible { background: #e7f6ee; color: #0d6b47; }
.estado.pronto { background: #fff4dc; color: #8a5300; }
.estado.uso { background: #eef1f5; color: #3d4a5e; }
.conexiones { display: grid; gap: .8rem; max-width: 940px; margin: 0 auto; }
.conexion { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--borde);
  border-radius: 18px; padding: 1rem 1.3rem; box-shadow: var(--sombra); }
.conexion .lado { display: flex; align-items: center; gap: .6rem; font-weight: 650; color: var(--tinta); font-size: .95rem; }
.conexion .lado:last-child { justify-content: flex-end; }
.conexion .lado .simbolo { width: 32px; height: 32px; flex: none; }
.conexion .medio { text-align: center; font-size: .86rem; color: var(--gris); position: relative; }
.conexion .medio b { display: block; color: var(--tinta); font-weight: 650; }
.conexion .medio .estado { display: inline-block; margin-top: .35rem; }
.conexion .medio::before { content: ""; position: absolute; left: -.6rem; right: -.6rem; top: .7rem; border-top: 2px dashed var(--borde); z-index: 0; }
.conexion .medio > * { position: relative; z-index: 1; background: #fff; padding: 0 .4rem; }
@media (max-width: 680px) { .conexion { grid-template-columns: 1fr; } .conexion .lado:last-child { justify-content: flex-start; }
  .conexion .medio { text-align: left; } .conexion .medio::before { display: none; } .conexion .medio > * { padding: 0; } }
.contacto-caja { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 860px) { .contacto-caja { grid-template-columns: 1fr auto; } }
.final .boton.blanco { background: #fff; color: var(--tinta); }
.familia-tira { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.4rem; }
.familia-tira .simbolo { width: 46px; height: 46px; filter: drop-shadow(0 10px 18px rgba(15,27,45,.18)); }
@media (min-width: 640px) { .familia-tira .simbolo { width: 60px; height: 60px; } }

/* Titulares de hero más largos (Legablio, Vendiblio, Markeblio, grupoblio) */
.h-titular.largo { max-width: 19ch; font-size: clamp(2.1rem, 6vw, 3.7rem); }
.limites.cuatro { grid-template-columns: 1fr; }
@media (min-width: 720px) { .limites.cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .limites.cuatro { grid-template-columns: repeat(4, 1fr); } }
.demo.pieza { margin: 0; max-width: none; }
.reel img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.reel .marca-ia { bottom: auto; top: 18px; }
/* Dentro de la maqueta animada, los paneles llenan la escena (sin huecos grises) */
.escena > .rejilla-maq { height: 100%; align-items: stretch; }
.escena > .rejilla-maq > .panel-maq, .escena > .rejilla-maq > .recibo, .escena > .rejilla-maq > .borrador { height: 100%; overflow: hidden; }
.escena > .rejilla-maq > .movil-maq { align-self: center; }
@media (max-width: 700px) { .escena > .rejilla-maq > .panel-maq, .escena > .rejilla-maq > .recibo, .escena > .rejilla-maq > .borrador { height: auto; } }
@media (max-width: 560px) { .demo-barra span + .ejemplo-marca { margin-left: auto; } }
.marca-tarjeta .doc .simbolo { width: 30px; height: 30px; flex: none; }
.marca-tarjeta .doc .estado { margin-left: auto; }
@media (min-width: 701px) { .anim { aspect-ratio: 2 / 1; } }
.escena .movil-maq { width: 230px; }
.escena .movil-maq > div { min-height: 0; padding-top: 30px; }
.escena .movil-maq .teclado i { height: 34px; }
.escena .movil-maq .hora-grande { font-size: 1.9rem; }
@media (max-width: 700px) { .anim { height: 560px; }
  .anim-pestanas { left: 12px; right: 62px; transform: none; justify-content: center; }
  .anim-pestanas span { padding: .3rem .45rem; font-size: .68rem; } }
/* Markeblio: el anuncio es 16:9 también en el móvil (no se recorta como el vídeo vertical de Contablio) */
:root[data-sitio="markeblio"] .demo-marco video { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 640px) { .familia-tira { gap: .45rem; } .familia-tira .simbolo { width: 40px; height: 40px; } }
.panel.panel-ancho { width: 600px; }