:root{
  --navy:#163559; --navy2:#0e2438; --orange:#e8821e; --orange2:#cf6f12;
  --bg:#f5f7fa; --panel:#ffffff; --text:#1a2230; --muted:#5a6b80;
  --border:#e2e8f0; --ok:#2d9c6f;
  --shadow:0 6px 24px rgba(22,53,89,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;height:100%}
/* pie SIEMPRE al fondo de la ventana (aunque el contenido sea corto): body columna a toda
   la altura, <main> crece para ocupar el hueco, footer se queda con su tamaño natural */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);background:var(--bg)}
main{flex:1 0 auto}
a{color:var(--navy);text-decoration:none}
h1,h2,h3{line-height:1.2;color:var(--navy)}
.container{max-width:1120px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;padding:11px 20px;border-radius:9px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange2)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--navy);background:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#eef2f7}

/* ── header / nav — minimalista: logo protagonista, resto compacto/discreto ── */
header{background:var(--navy);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.05),0 4px 18px rgba(0,0,0,.18)}
.nav{position:relative;display:flex;align-items:center;gap:4px;height:66px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;
  font-size:19px;letter-spacing:.3px}
.brand .logo{height:58px;width:auto;object-fit:contain;display:block;flex:0 0 auto}
.nav .spacer{display:none}
.nav a.navlink{color:#a8bad2;padding:7px 14px;border-radius:20px;font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  transition:color .15s,background-color .15s}
.nav a.navlink:hover{color:#fff;background:rgba(255,255,255,.09)}
.dropdown{position:relative}
.dropdown>a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 1px 6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.7;vertical-align:middle;transition:transform .18s}
.dropdown:hover>a::after,.dropdown:focus-within>a::after{transform:rotate(225deg);margin:0 0 -2px 6px}
/* desplegable integrado: mismo azul del header (degradado sutil), no una tarjeta blanca ajena */
.dropdown-menu{position:absolute;top:calc(100% + 16px);left:0;min-width:238px;
  background:linear-gradient(175deg,#1e4770,var(--navy2));
  border-radius:12px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 46px rgba(6,16,30,.5);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.dropdown-menu::before{content:"";position:absolute;top:-5px;left:26px;width:10px;height:10px;
  background:#1e4770;border-radius:2px;transform:rotate(45deg)}
/* puente invisible: mantiene el hover activo en el hueco entre el link y el desplegable */
.dropdown-menu::after{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.dropdown-menu a{position:relative;display:block;padding:9px 12px 9px 22px;border-radius:8px;
  color:#b7c9df;font-weight:500;font-size:13.5px;text-transform:none;letter-spacing:normal;
  transition:background-color .12s,color .12s}
.dropdown-menu a::before{content:">";position:absolute;left:8px;top:50%;
  transform:translateY(-52%) translateX(-3px);font:700 15px/1 arial,sans-serif;
  color:var(--orange);opacity:0;transition:opacity .12s,transform .12s}
.dropdown-menu a:hover{background:rgba(255,255,255,.09);color:#fff}
.dropdown-menu a:hover::before{opacity:1;transform:translateY(-52%) translateX(0)}
.nav .auth{display:flex;gap:8px;align-items:center;margin-left:auto}
.nav .auth .btn{padding:8px 16px;font-size:13px}
/* "Entrar" (btn-ghost) sobre el header oscuro: claro en reposo, oscuro al hover
   (el fondo del hover pasa a blanco — sin esto el texto quedaba blanco sobre blanco) */
.nav .btn-ghost{color:#cdd9e6;border-color:rgba(255,255,255,.25)}
.nav .btn-ghost:hover{color:var(--navy)}
/* píldora unificada avatar+correo: un único bloque seleccionable que abre el submenú
   (antes eran dos piezas sueltas — ahora comparten fondo/hover/borde redondeado) */
.user-trigger{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;
  border-radius:22px;cursor:pointer;transition:background-color .15s}
.user-menu:hover .user-trigger,.user-menu:focus-within .user-trigger{
  background:rgba(255,255,255,.1)}
.user-trigger::after{content:"";display:inline-block;width:5px;height:5px;
  border-right:1.5px solid #cdd9e6;border-bottom:1.5px solid #cdd9e6;flex:0 0 auto;
  transform:rotate(45deg);opacity:.7;transition:transform .18s}
.user-menu:hover .user-trigger::after,.user-menu:focus-within .user-trigger::after{
  transform:rotate(225deg)}
.nav .who{color:#cdd9e6;font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:200px}
.nav .user-menu .avatar{width:34px;height:34px;border-radius:50%;background:#28496b;color:#dce8f2;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  flex:0 0 auto;user-select:none;text-transform:uppercase}
.dropdown-menu-right{left:auto;right:0}
.dropdown-menu-right::before{left:auto;right:14px}
/* menú de usuario más compacto (no el genérico .dropdown-menu de «Producto»), pero mismo
   tamaño/peso de letra que él — solo cambia el layout (icono de Salir) y el ancho */
.user-menu .dropdown-menu{min-width:170px;padding:4px}
.user-menu .dropdown-menu a{padding:8px 10px;font-size:13.5px;font-weight:500;display:flex;
  align-items:center;gap:8px}
.user-menu .dropdown-menu a::before{display:none}
/* "Abrir aplicación" destaca como botón naranja dentro del desplegable, no un ítem más */
.user-menu .um-open{background:var(--orange);color:#fff;font-weight:700;
  justify-content:center;margin-bottom:6px}
.user-menu .um-open:hover{background:var(--orange2);color:#fff}
.user-menu .um-admin{color:var(--orange2)}
.user-menu .um-admin:hover{color:var(--orange);background:rgba(255,255,255,.09)}
.user-menu .um-logout{color:#e2837e}
.user-menu .um-logout:hover{color:#ff9c94;background:rgba(217,72,72,.22)}
.user-menu .um-logout svg{width:14px;height:14px;flex:0 0 auto}
.nav-links{flex:1;display:flex;align-items:center}
/* .nav-menu se centra respecto a TODA la barra (.nav), no respecto al hueco libre
   tras el logo — por eso es absolute contra .nav y no un simple margin:auto */
.nav-menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:2px}
.nav-toggle{display:none;background:transparent;border:none;color:#fff;cursor:pointer;
  padding:6px;border-radius:8px;line-height:0}
.nav-toggle:hover{background:rgba(255,255,255,.1)}

/* ── hero ── */
.hero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;
  padding:76px 0 88px}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{color:#fff;font-size:44px;margin:0 0 16px}
.hero p.lead{font-size:19px;color:#c6d3e2;margin:0 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .pill{display:inline-block;background:rgba(232,130,30,.16);color:#f6b877;
  border:1px solid rgba(232,130,30,.35);padding:5px 12px;border-radius:20px;
  font-size:13px;font-weight:600;margin-bottom:18px}
.hero-art{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.hero-art .row{display:flex;gap:8px;margin-bottom:8px}
.hero-art .chip{flex:1;background:rgba(255,255,255,.07);border-radius:8px;
  padding:10px;font-size:12px;color:#bcd}
.hero-art .chip b{color:#fff;display:block;font-size:13px}
.hero-art .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.1);margin:6px 0}
.hero-art .bar.o{background:var(--orange);width:70%}
.hero-art .bar.g{background:var(--ok);width:45%}

/* ── secciones ── */
section.block{padding:64px 0}
.eyebrow{color:var(--orange);font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;font-size:13px;margin-bottom:10px}
h2.section-title{font-size:32px;margin:0 0 10px}
.section-sub{color:var(--muted);font-size:18px;max-width:680px;margin:0 0 34px}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:24px;box-shadow:var(--shadow)}
.card .ico{width:44px;height:44px;border-radius:11px;background:#eef3f8;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:19px}
.card p{margin:0;color:var(--muted)}
.steps{counter-reset:s}
.step{display:flex;gap:16px;margin-bottom:22px}
.step .n{counter-increment:s;flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;
  justify-content:center}
.step .n::before{content:counter(s)}
.step h3{margin:0 0 4px}
.alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-band{background:var(--navy);color:#fff;border-radius:18px;padding:40px;
  text-align:center;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;margin:0 0 8px}
.cta-band p{color:#c6d3e2;margin:0 0 20px}

/* ── páginas de producto ── */
.page-head{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;
  padding:56px 0}
.page-head h1{color:#fff;font-size:36px;margin:0}
.page-head p{color:#c6d3e2;font-size:18px;margin:8px 0 0;max-width:720px}
.prose{padding:52px 0}
.prose h2{font-size:26px;margin:0 0 12px}
.prose p{color:#33414f}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tag{background:#eef3f8;color:var(--navy);border:1px solid var(--border);
  padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600}

/* ── auth ── */
.auth-wrap{max-width:440px;margin:56px auto;background:#fff;border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);padding:34px}
.auth-wrap h1{font-size:26px;margin:0 0 6px;text-align:center}
.auth-wrap .sub{color:var(--muted);text-align:center;margin:0 0 22px}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
input[type=email],input[type=password],input[type=text]{width:100%;padding:12px;
  border:1px solid var(--border);border-radius:9px;font:inherit;background:#fbfcfe}
input:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.auth-wrap .btn{width:100%;margin-top:20px;font-size:16px}
.auth-alt{text-align:center;margin-top:18px;color:var(--muted)}
.err{background:#fdecec;color:#b3261e;border:1px solid #f5c2c0;padding:10px 12px;
  border-radius:9px;font-size:14px;margin-bottom:8px}

/* ── área app ── */
.app-shell{max-width:1000px;margin:52px auto;text-align:center}
.app-shell .badge{display:inline-block;background:#eef3f8;color:var(--navy);
  border:1px solid var(--border);padding:6px 14px;border-radius:20px;font-weight:600;
  margin-bottom:16px}
.app-shell .panel{background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:44px;margin-top:24px}
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;text-align:left}
.roadmap .r{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px}
.roadmap .r b{display:block;color:var(--navy);margin-bottom:4px}
.roadmap .r small{color:var(--muted)}

footer{background:var(--navy2);color:#a9bccf;padding:36px 0;margin-top:60px;font-size:14px}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer a{color:#cdd9e6}

/* ── cuenta / admin ── */
.grid-4{grid-template-columns:repeat(4,1fr)}
.ok-banner{background:#e7f5ec;color:#1d7a44;border:1px solid #bfe3cd;
  padding:10px 12px;border-radius:9px;font-size:14px;margin-bottom:14px}
.tinput{width:100%;padding:10px;border:1px solid var(--border);border-radius:9px;
  font:inherit;background:#fbfcfe}
.card.stat{text-align:center;padding:18px}
.card.stat b{display:block;font-size:30px;color:var(--navy)}
.card.stat span{color:var(--muted);font-size:13px}
.tbl-scroll{overflow-x:auto;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow)}
.adm-tbl{width:100%;border-collapse:collapse;font-size:14px}
.adm-tbl th{background:#eef3f8;text-align:left;padding:10px 12px;color:var(--navy);
  font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.adm-tbl td{padding:8px 12px;border-top:1px solid var(--border)}
.adm-tbl .mono{font-family:Consolas,monospace;font-size:13px}
.adm-tbl input[type=text],.adm-tbl input:not([type]){padding:6px 8px;width:auto;
  border:1px solid var(--border);border-radius:7px;font:inherit;font-size:13px}
.adm-tbl select{padding:6px 8px;border:1px solid var(--border);border-radius:7px;
  font:inherit;font-size:13px;background:#fff}
.mini{padding:5px 10px;border-radius:7px;border:1px solid var(--border);
  background:#fff;color:var(--navy);cursor:pointer;font:inherit;font-size:12.5px}
.mini:hover{border-color:var(--orange);background:#fff7ef}
.mini.danger{color:#b3261e}
.mini.danger:hover{border-color:#b3261e;background:#fdecec}
.plan-cur{border-color:var(--orange)!important}

@media(max-width:860px){
  /* nav → menú hamburguesa */
  .nav .spacer{display:block;flex:1}
  .nav-toggle{display:flex}
  /* pantalla completa: tapa la web de debajo, no un desplegable a media altura */
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:var(--navy);
    flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 16px;
    height:calc(100vh - 66px);overflow-y:auto;
    box-shadow:0 14px 26px rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.08)}
  .nav-links.open{display:flex}
  .nav-menu{position:static;transform:none;display:flex;flex-direction:column;
    align-items:stretch;gap:2px}
  .nav-links .navlink{padding:12px 14px;border-radius:8px}
  .dropdown{position:static}
  .dropdown>a::after{display:none}
  .dropdown-menu{position:static;background:transparent;border:none;box-shadow:none;
    padding:0 0 4px 10px;min-width:0;opacity:1;visibility:visible;pointer-events:auto;
    transform:none}
  .dropdown-menu::before{display:none}
  .dropdown-menu a{color:#cdd9e6;padding:8px 12px;font-size:13px}
  .dropdown-menu a::before{display:none}
  .dropdown-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
  .nav .auth{flex-direction:column;align-items:stretch;gap:8px;margin-top:8px;
    margin-left:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
  .nav .auth .btn{text-align:center}
  /* panel a pantalla completa → hay sitio de sobra, no hace falta acortar el correo aquí */
  .nav .who{margin:0;max-width:none}
  /* layout → 1 columna + menos aire */
  .hero .container,.grid-3,.grid-2,.grid-4,.roadmap{grid-template-columns:1fr}
  .hero{padding:48px 0 56px}
  .hero h1{font-size:32px}
  section.block{padding:44px 0}
  .cta-band{padding:28px 20px}
  .app-shell{margin:32px auto}
  .app-shell .panel{padding:26px}
  .page-head{padding:40px 0}
  .page-head h1{font-size:28px}
  h2.section-title{font-size:26px}
}
@media(max-width:520px){
  .container{padding:0 16px}
  .hero h1{font-size:27px}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%;text-align:center}
  h2.section-title{font-size:23px}
  .card{padding:20px}
  .auth-wrap{margin:32px auto;padding:24px}
  footer .container{flex-direction:column}
  /* pantalla muy estrecha: ahora sí, acorta el correo con puntos suspensivos */
  .nav .who{max-width:200px}
}

/* ══════════ landing v2 — componentes nuevos ══════════ */
.hero-note{color:#9fb3c8;font-size:13.5px;margin:14px 0 0}

/* franja de protocolos */
.proto-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.proto-strip span{background:var(--panel);border:1px solid var(--border);color:var(--navy);
  font-weight:600;font-size:14px;padding:9px 14px;border-radius:10px;transition:.15s;
  box-shadow:0 1px 3px rgba(22,53,89,.05)}
.proto-strip span:hover{border-color:var(--orange);color:var(--orange2)}

/* tarjetas de estadística (extiende .card.stat) */
.card.stat .t{font-weight:700;color:var(--navy);font-size:15px;margin:4px 0 6px}
.card.stat b{line-height:1.05}

/* tarjetas enlazadas (índice de pilares / precios) */
.card.link{display:flex;flex-direction:column;color:inherit}
.card.link:hover{border-color:var(--orange);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(22,53,89,.12)}
.card.link .card-more{margin-top:auto;padding-top:14px;color:var(--orange2);
  font-weight:700;font-size:14px}
.card.link:hover .card-more{color:var(--orange)}

/* filas de inmersión por pilar */
.feature-row{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.feature-row.reverse .feature-text{order:2}
.feature-row .section-sub{margin-bottom:18px}
.feat-list{list-style:none;margin:0 0 22px;padding:0}
.feat-list li{position:relative;padding:0 0 12px 30px;color:#33414f}
.feat-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:900}
.feat-art{background:linear-gradient(160deg,var(--navy),var(--navy2));
  border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.feat-art-title{color:#f6b877;font-weight:700;font-size:13px;letter-spacing:.4px;
  text-transform:uppercase;margin-bottom:14px}
.feat-chips{display:flex;flex-wrap:wrap;gap:8px}
.feat-chips span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#dbe6f2;font-size:13px;font-weight:600;padding:8px 12px;border-radius:9px}
.feat-art .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.1);margin:6px 0}
.feat-art .bar.o{background:var(--orange);width:70%}
.feat-art .bar.g{background:var(--ok);width:45%}
.feat-art .bar+.feat-chips{margin-top:10px}

/* franja de seguridad (panel navy) */
.dark-panel{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;
  border-radius:18px;padding:38px;box-shadow:var(--shadow)}
.dark-head{margin-bottom:24px}
.dark-head h2{color:#fff;margin:0;font-size:28px}
.dark-grid{gap:16px}
.dark-item b{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.dark-item span{color:#bcd0e2;font-size:14px;line-height:1.5}

/* tabla comparativa */
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.cmp-table th{background:var(--navy);color:#fff;text-align:left;padding:13px 16px;
  font-size:13px;text-transform:uppercase;letter-spacing:.3px;font-weight:700}
.cmp-table th.hi{background:var(--navy2)}
.cmp-table td{padding:12px 16px;border-top:1px solid var(--border);color:#3a4a5b;vertical-align:top}
.cmp-table tbody th[scope=row]{text-align:left;font-weight:600;color:var(--navy);
  padding:12px 16px;border-top:1px solid var(--border);vertical-align:top;background:transparent}
.cmp-table tbody tr:nth-child(even){background:var(--bg)}
.cmp-table td.hi{background:#fff7ef;border-left:2px solid var(--orange);
  border-right:2px solid var(--orange);color:var(--navy)}
.cmp-table tbody tr:last-child td.hi{border-bottom:2px solid var(--orange)}
.cmp-table td.hi b{color:var(--navy)}
.cmp-foot{color:var(--muted);font-size:13.5px;margin-top:14px;max-width:820px}

/* faq acordeón (sin JS) */
.faq{max-width:820px;background:var(--panel);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.faq-item{border-top:1px solid var(--border)}
.faq-item:first-child{border-top:none}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;
  color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--orange);font-weight:800;font-size:20px;
  flex:none;transition:.2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--bg)}
.faq-item>div{padding:0 22px 20px;color:var(--muted);line-height:1.6}

@media(max-width:860px){
  .feature-row{grid-template-columns:1fr;gap:26px}
  .feature-row.reverse .feature-text{order:0}
  .dark-panel{padding:26px}
  .proto-strip span{font-size:13px;padding:8px 12px}
}

/* ══════════ páginas legales (scoped a .legal) ══════════ */
.legal-note{background:#fff7ef;border:1px solid #f3d3ab;color:#8a5a1a;border-radius:10px;
  padding:14px 16px;font-size:14.5px;line-height:1.55;margin:0 0 26px}
.legal h3{font-size:18px;margin:22px 0 8px;color:var(--navy)}
.legal ul{margin:0 0 16px;padding-left:22px;color:#33414f}
.legal li{margin:6px 0}
.legal p a,.legal li a,.legal td a{color:var(--orange2);font-weight:600}
.legal p a:hover,.legal li a:hover,.legal td a:hover{color:var(--orange)}
.legal table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:14px;min-width:560px}
.legal th,.legal td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
.legal th{background:#eef3f8;color:var(--navy);font-size:13px}
.legal code{background:#eef3f8;padding:1px 6px;border-radius:5px;font-size:13px;color:var(--navy)}
.legal-upd{color:var(--muted);font-size:13.5px;margin-top:26px;border-top:1px solid var(--border);
  padding-top:14px}
mark{background:#fff2b8;color:#5a4600;padding:0 4px;border-radius:3px}

/* ══════════ capturas / mockups de la interfaz ══════════ */
.hero-shot{width:100%;border-radius:14px;display:block}
.feat-shot{width:100%;border-radius:14px;display:block}