/* ═══════════════════════════════════════════════════════════════════════ DeCA en Ruta · Landing comercial · Dirección B «Autovía» Tokens y piezas copiados (sin renombrar) de apps/web/src/styles/autovia.css y docs/diseno/sistema-de-diseno.md. Solo lo que se usa. Fuentes auto-alojadas. Tema: claro por defecto, [data-theme="dark"] lo fija el script del . ═══════════════════════════════════════════════════════════════════════ */ /* ══ Fuentes (8 pesos, ~157 KB: Barlow sin 700; los botones van a 600, como en el sistema) ══ */ @font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/barlow-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"Overpass Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/overpass-mono-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Overpass Mono";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/overpass-mono-latin-600-normal.woff2") format("woff2")} /* ══ Tokens del sistema (§3.1) + los propios de la landing ══════════════ */ :root{ --asfalto:#1C2129; --hormigon:#E6E9ED; --blanco:#FFFFFF; --azul:#0B4F9C; --azul-hondo:#083E7B; --amarillo:#F3B600; --rojo:#C4122F; --rojo-hondo:#A50F27; --pizarra:#5B6472; --azul-ue:#003399; --rojo-placa:#E03A3E; --bg:var(--hormigon); --surface:#FFFFFF; --surface-2:#F3F5F8; --raised:#FFFFFF; --text:#1C2129; --text-2:#505A68; --text-3:#6A7482; --line:#D2D7DE; --line-2:#E4E8EC; --line-strong:#9AA3AF; --field:#FFFFFF; --field-line:#838D9B; --link:#0B4F9C; --tint-azul:#E3ECF8; --tint-amarillo:#FFF3CC; --tint-rojo:#FBE7EA; --text-rojo:#B0102A; --bar:#1C2129; --calzada:#1C2129; --hover:#F1F3F6; --halo:rgba(11,79,156,.22); --focus-page:#1C2129; --focus:var(--focus-page); --shadow-pop:0 24px 70px rgba(14,20,31,.26),0 2px 8px rgba(14,20,31,.08); --sign:var(--azul); --f-display:"Barlow Condensed","Arial Narrow",sans-serif; --f-body:"Barlow",system-ui,sans-serif; --f-data:"Overpass Mono",ui-monospace,monospace; --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1); color-scheme:light; /* propios de la landing */ --topbar:60px; --maxw:1200px; --gutter:32px; --sec-pad:clamp(64px, 9vw, 128px); --shadow-float:var(--shadow-pop); --on-photo:#FFFFFF; --on-photo-2:rgba(255,255,255,.86); --eyebrow-on-dark:#9FC6F5; --velo:14,18,23; /* escala tipográfica (1440 → 390) */ --t-display:clamp(40px, 4.6vw + 8px, 74px); --t-h2:clamp(34px, 2.2vw + 20px, 52px); --t-h3:28px; --t-card:22px; --t-eyebrow:13px; --t-lead:20px; --t-body:17px; --t-small:14.5px; --t-data:13px; } @media (max-width:860px){ :root{ --topbar:56px; --gutter:20px } } @media (max-width:600px){ :root{ --gutter:16px; --t-h3:23px; --t-card:21px; --t-eyebrow:12.5px; --t-lead:17px; --t-body:16px; --t-small:14px; --t-data:12.5px } } :root[data-theme="dark"]{ --bg:#0E1217; --surface:#161B22; --surface-2:#1D232C; --raised:#1D232C; --text:#E7EBF0; --text-2:#A3ADBA; --text-3:#8994A3; --line:#2B323D; --line-2:#232A34; --line-strong:#5A6576; --field:#10151B; --field-line:#667285; --link:#8DBBF5; --tint-azul:#16304F; --tint-amarillo:#3A2E07; --tint-rojo:#3D1219; --text-rojo:#FF8A9B; --calzada:#6A7482; --hover:#1F2630; --halo:rgba(141,187,245,.25); --focus-page:#FFD34D; --shadow-pop:0 24px 70px rgba(0,0,0,.55),0 0 0 1px #2B323D; color-scheme:dark; } /* ══ Base ═══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar) + 16px)} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0;padding:0} ol,ul{list-style:none} a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} button{font:inherit;color:inherit;letter-spacing:inherit} svg{flex:none} [hidden]{display:none!important} ::selection{background:var(--tint-azul)} :focus-visible{outline:3px solid var(--focus);outline-offset:2px} .on-dark{--focus:#FFD34D} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mono{font-family:var(--f-data);font-variant-numeric:tabular-nums} .nw{white-space:nowrap} .container{max-width:calc(var(--maxw) + 2*var(--gutter));padding-inline:var(--gutter);margin-inline:auto} .eyebrow{font:600 var(--t-eyebrow)/1.1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--link);font-feature-settings:"case"} h2{font:700 var(--t-h2)/1 var(--f-display);letter-spacing:.002em;text-wrap:balance} .lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-2);max-width:56ch;text-wrap:pretty;hanging-punctuation:first} .micro{font-size:14px;line-height:1.4;color:var(--text-2)} .enlace{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;border-radius:4px} @media (hover:hover) and (pointer:fine){ .enlace:hover{text-decoration-thickness:2px} } /* Saltar al contenido / saltar el recorrido: solo visibles con el foco */ .saltar,.skip{position:absolute;left:12px;top:-80px;z-index:60;padding:10px 14px;border-radius:9px;background:var(--azul);color:#fff;font-weight:600;--focus:#FFD34D;transition:top 160ms var(--ease-out)} .saltar:focus,.skip:focus{top:12px} .skip{top:0;left:var(--gutter)} .skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap} .sec-rec .container{position:relative} /* ══ Botones (filete interior del sistema) ══════════════════════════════ */ .btn{--bg:var(--surface);--fg:var(--text);--bd:var(--field-line); display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px; font:600 15px/1 var(--f-body);color:var(--fg);background:var(--bg);border:1px solid var(--bd);border-radius:9px; cursor:pointer;white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent; transition:transform 140ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,color 160ms ease} .btn svg{width:18px;height:18px} .btn:active{transform:scale(.97)} .btn-primary{--bg:var(--azul);--fg:#fff;--bd:var(--azul);box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 3.25px rgba(255,255,255,.6)} .btn-inverse{--bg:#fff;--fg:var(--azul);--bd:#fff;box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 3.25px rgba(11,79,156,.55)} .btn-ghost{--bg:transparent;--fg:var(--text);--bd:var(--line-strong)} .btn-ghost-dark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.34)} .btn-sm{height:40px;padding:0 14px;font-size:14.5px} .btn-lg{height:54px;padding:0 24px;font-size:17px;border-radius:10px} .btn-block{width:100%} .btn .flecha{width:19px;height:19px;transition:transform 160ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .btn:hover{--bg:var(--hover)} .btn-primary:hover{--bg:var(--azul-hondo);--bd:var(--azul-hondo)} .btn-inverse:hover{--bg:#EAF1FA;--bd:#EAF1FA} .btn-ghost-dark:hover{--bg:rgba(255,255,255,.1);--bd:rgba(255,255,255,.55)} .btn:hover .flecha{transform:translateX(3px)} } /* ══ Barra superior ═════════════════════════════════════════════════════ */ .topbar{position:sticky;top:0;z-index:50;height:var(--topbar);background:var(--bar);color:var(--tb-fg,#fff);transition:box-shadow 160ms ease,color 260ms ease} .topbar.is-scrolled{box-shadow:0 1px 0 rgba(255,255,255,.08)} .topbar-in{display:flex;align-items:center;gap:20px;height:100%} .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 22px/1 var(--f-display);letter-spacing:.005em;white-space:nowrap;border-radius:6px} .brand svg{box-sizing:content-box;width:24px;height:24px;padding:4px;border-radius:8px;background:#fff;color:var(--azul);transition:box-shadow 260ms ease} /* D azul sobre pieza blanca (como el vinilo); 24 px exactos: la retícula cae en píxel entero */ .brand .en{font-weight:500} .mainnav{display:flex;align-self:stretch;margin-left:12px} .mainnav a{position:relative;display:flex;align-items:center;padding:0 12px;font-weight:500;font-size:15px;color:var(--tb-fg-2,rgba(255,255,255,.74));white-space:nowrap;border-radius:6px;transition:color 160ms ease} .mainnav a::after{content:"";position:absolute;left:50%;bottom:12px;width:16px;height:2px;margin-left:-8px;background:var(--tb-mark,var(--eyebrow-on-dark));opacity:0;transition:opacity 160ms ease} .mainnav a[aria-current]{color:var(--tb-fg,#fff)} .mainnav a[aria-current]::after{opacity:1} .bar-end{margin-left:auto;display:flex;align-items:center;gap:6px} .icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:9px;border:0;background:transparent;color:var(--tb-fg,rgba(255,255,255,.86));cursor:pointer;transition:background-color 160ms ease,transform 140ms var(--ease-out),color 160ms ease} .icon-btn svg{grid-area:1/1;width:21px;height:21px} .icon-btn:active{transform:scale(.95)} .theme-btn svg{transition:opacity 160ms ease} .theme-btn .i-sun,:root[data-theme="dark"] .theme-btn .i-moon{opacity:0} :root[data-theme="dark"] .theme-btn .i-sun{opacity:1} .entrar{display:inline-flex;align-items:center;height:44px;padding:0 12px;border-radius:9px;font-weight:600;font-size:15px;color:var(--tb-fg,rgba(255,255,255,.9));transition:background-color 160ms ease,color 160ms ease} .topbar .btn-sm{margin-left:4px} @media (hover:hover) and (pointer:fine){ .mainnav a:hover{color:var(--tb-fg,#fff)} .icon-btn:hover,.entrar:hover{background:var(--tb-hov,rgba(255,255,255,.1))} } /* Menú móvil:
nativo; la hoja baja desde la barra */ .menu-m{display:none} .menu-m summary{list-style:none} .menu-m summary::-webkit-details-marker{display:none} .menu-m .i-x{opacity:0} .menu-m[open] .i-x{opacity:1} .menu-m[open] .i-menu{opacity:0} .menu-hoja{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;padding:6px var(--gutter) 14px;background:var(--bar);box-shadow:var(--shadow-pop);animation:hoja 170ms var(--ease-out)} .menu-hoja a{display:flex;align-items:center;min-height:52px;border-top:1px solid rgba(255,255,255,.08);font-weight:600;font-size:17px;color:rgba(255,255,255,.9);border-radius:4px} .menu-hoja a:first-child{border-top:0} .menu-hoja .menu-entrar{display:none} @keyframes hoja{from{opacity:0;transform:translateY(-8px)}} @media (max-width:1100px){ .mainnav{display:none} .menu-m{display:block} } @media (max-width:600px){ .topbar-in{gap:8px} .brand{font-size:20px} .bar-end{gap:2px} .topbar .btn-sm{height:44px;padding:0 12px;margin-left:2px} .entrar.con-menu{display:none} .menu-hoja .menu-entrar{display:flex} } /* Barra de la portada (body.portada): transparente sobre el hero y, pasado el hero, cristal con desenfoque del tema (claro por defecto; en oscuro, asfalto translúcido). Va fija y sin ocupar sitio: el hero llega hasta arriba. Las legales y la guía conservan la barra asfalto. Sin JS se queda la barra asfalto de siempre, encima del hero. landing.js pone .is-solid cuando el hero ya no está debajo de la barra (mismo manejador de scroll que el resto). */ .portada .topbar{position:fixed;left:0;right:0} html.js .portada .topbar{background:transparent;--tb-fg:#fff;--tb-fg-2:rgba(255,255,255,.9);--tb-hov:rgba(255,255,255,.14);--tb-mark:var(--eyebrow-on-dark);--tb-glass:rgba(255,255,255,.86)} html.js[data-theme="dark"] .portada .topbar{--tb-glass:rgba(28,33,41,.86)} html.js .portada .topbar::before,html.js .portada .topbar::after{content:"";position:absolute;top:0;left:0;right:0;z-index:-1;pointer-events:none;transition:opacity 260ms ease} /* velo muy sutil, solo para que los enlaces blancos se lean sobre el vídeo */ html.js .portada .topbar::before{height:calc(100% + 32px);background:linear-gradient(rgba(var(--velo),.62),rgba(var(--velo),.5) 40%,rgba(var(--velo),.24) 70%,rgba(var(--velo),0))} html.js .portada .topbar::after{height:100%;background:var(--tb-glass);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);opacity:0} html.js .portada .topbar.is-scrolled{box-shadow:none} html.js .portada .topbar.is-solid{--tb-fg:var(--text);--tb-fg-2:#3D4755;--tb-hov:var(--hover);--tb-mark:var(--link);--focus:var(--focus-page)} html.js[data-theme="dark"] .portada .topbar.is-solid{--tb-fg-2:#B8C1CC} html.js .portada .topbar.is-solid::before{opacity:0} html.js .portada .topbar.is-solid::after{opacity:1} html.js[data-theme="light"] .portada .topbar.is-solid .brand svg{box-shadow:inset 0 0 0 1px var(--line-strong)} /* la pieza blanca sobre el cristal claro necesita filete */ /* menú móvil abierto: la barra vuelve a asfalto sólido para seguir la hoja que baja de ella */ html.js .portada .topbar:has(.menu-m[open]){--tb-fg:#fff;--tb-fg-2:rgba(255,255,255,.9);--tb-hov:rgba(255,255,255,.14);--tb-mark:var(--eyebrow-on-dark);--tb-glass:var(--bar);--focus:#FFD34D} html.js .portada .topbar:has(.menu-m[open])::before{opacity:0} html.js .portada .topbar:has(.menu-m[open])::after{opacity:1;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} html.js[data-theme="light"] .portada .topbar:has(.menu-m[open]) .brand svg{box-shadow:none} /* ══ Revelado (sin JS todo se ve) ═══════════════════════════════════════ */ .reveal{transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);transition-delay:var(--rd,0ms)} html.js .reveal:not(.in){opacity:0;transform:translateY(14px)} /* ══ Secciones ══════════════════════════════════════════════════════════ */ .sec{position:relative;padding-block:var(--sec-pad);border-top:1px solid var(--line)} .sec-surface{background:var(--surface)} .sec-bg{background:var(--bg)} .sec-head{max-width:760px;margin-bottom:48px} .sec-head .eyebrow + h2{margin-top:16px} .sec-head h2 + .lead{margin-top:18px} @media (max-width:600px){ .sec-head{margin-bottom:32px} } /* ══ Piezas del sistema (copiadas sin renombrar) ════════════════════════ */ /* Cartel */ .sign{position:relative;background:var(--sign);color:#fff;--focus:#FFD34D;transition:background-color 320ms ease} .sign::before{content:"";position:absolute;pointer-events:none;border:1.5px solid rgba(255,255,255,.88);border-radius:10px;inset:7px} .docno{display:flex;flex-direction:column} .docno-label{font:600 14px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.84);font-feature-settings:"case"} .docno-num{font:700 76px/.86 var(--f-display);letter-spacing:.005em;font-variant-numeric:tabular-nums;margin-top:8px} .docno-num .z,.tt-num .z{opacity:.56} .state{display:flex;align-items:center;gap:10px} .pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:999px;background:#fff;color:var(--azul);font:600 15px/1 var(--f-body);white-space:nowrap} .pill i{width:8px;height:8px;border-radius:50%;background:currentColor} .ver{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;font-feature-settings:"case";color:rgba(255,255,255,.88);white-space:nowrap} .vmark{display:inline-grid;place-items:center;height:20px;padding:0 5px;border-radius:4px;background:var(--amarillo);color:#1C2129;font:700 13px/1 var(--f-display);letter-spacing:.03em;text-transform:none;box-shadow:inset 0 0 0 1px #1C2129} /* PanelModificado: panel complementario amarillo */ .plate-note{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 11px;border-radius:8px;background:var(--amarillo);color:#1C2129;font-size:14.5px;line-height:1.3;box-shadow:inset 0 0 0 2.5px var(--amarillo),inset 0 0 0 4px #1C2129} .plate-note svg{width:20px;height:20px} .plate-note strong{font-weight:600} /* Matrículas */ .plate{position:relative;display:inline-flex;align-items:stretch;height:38px;border:2px solid #15181D;border-radius:6px;background:#fff;color:#111;overflow:hidden;flex:none;vertical-align:middle} .plate-eu{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:20px;padding:4px 0 3px;background:var(--azul-ue);color:#fff;font:700 10px/1 var(--f-body);flex:none} .plate-eu svg{width:13px;height:13px} .plate-num{display:flex;align-items:center;padding:0 11px 0 9px;font:600 25px/1 var(--f-display);letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap} .plate.is-remolque{background:var(--rojo-placa);color:#000} .plate.is-old{border-color:#8A919C} .plate.is-old .plate-eu{background:#7D8594} .plate.is-old .plate-num{color:#5F6672} .plate.is-old::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--rojo) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px))} .plate.sm{height:28px;border-width:1.5px;border-radius:5px} .plate.sm .plate-eu{width:15px;padding:3px 0 2px;font-size:8px} .plate.sm .plate-eu svg{width:10px;height:10px} .plate.sm .plate-num{padding:0 8px 0 6px;font-size:18px} .plate-in{height:52px;border-radius:7px} .plate-in .plate-eu{width:24px;font-size:11px;padding:6px 0 5px} .plate-in .plate-eu svg{width:15px;height:15px} .plate-field{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .hint{font-size:13.5px;line-height:1.4;color:var(--text-2)} .novalido{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;background:var(--rojo);color:#fff;font:700 12px/1 var(--f-display);letter-spacing:.08em} .was{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:7px 10px;border-radius:8px;font-size:13.5px} .was .plate.sm{height:24px} .was .plate.sm .plate-num{font-size:16px} /* Hitos de la carretera */ .hito{display:inline-grid;place-items:center;height:32px;min-width:32px;padding:0 9px;border-radius:6px;font:700 16px/1 var(--f-display);letter-spacing:.03em;white-space:nowrap;background:var(--sign);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),0 0 0 4px var(--sign);transition:background-color 320ms ease,color 320ms ease} .hito-fin{padding:0;background:none!important;box-shadow:0 0 0 4px var(--sign);border-radius:6px} .hito-fin svg{width:32px;height:32px;color:var(--sign)} /* Autocompletar, envío, roles, calzada */ .ac{position:relative} .ac-list{padding:5px;border-radius:12px;background:var(--raised);border:1px solid var(--line)} .ac-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:8px} .ac-opt.is-sel{background:var(--tint-azul)} .ac-opt b{font-weight:600;display:block;line-height:1.25;font-size:15px} .ac-opt small{display:block;font-size:13px;color:var(--text-2)} .ac-opt mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:3px;text-underline-offset:2px} .send{display:flex;flex-wrap:wrap;gap:8px} .send .btn{height:36px;padding:0 12px;font-size:14px;cursor:default} .lastsent{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text-2);line-height:1.4} .lastsent svg{width:18px;height:18px;color:var(--link);margin-top:1px} .rol{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;font:600 14px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;font-feature-settings:"case";white-space:nowrap} .rol-admin{background:var(--asfalto);color:#fff} :root[data-theme="dark"] .rol-admin{background:#E7EBF0;color:#1C2129} .rol-oper{background:var(--tint-azul);color:var(--link)} .rol-cond{box-shadow:inset 0 0 0 1.5px var(--text);color:var(--text)} .route{position:relative} .route::before{content:"";position:absolute;left:14px;top:11px;bottom:0;width:10px;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.95) 0 7px,transparent 7px 14px) center/2px 100% no-repeat,var(--calzada)} .place{position:relative;padding-left:52px} .place.is-final::before{content:"";position:absolute;left:10px;width:18px;top:12px;bottom:0;background:var(--surface);z-index:1} .pin{position:absolute;left:9px;top:1px;width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--calzada);z-index:2;transition:background-color 240ms ease,border-color 240ms ease} :root[data-theme="dark"] .pin{border-color:#E7EBF0} /* ══ 1 · Hero ═══════════════════════════════════════════════════════════ */ .hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100svh;min-height:560px;padding-bottom:104px;overflow:hidden;isolation:isolate;background:#6f7780;color:var(--on-photo)} .hero-stage{position:absolute;left:50%;top:50%;z-index:0;aspect-ratio:16/9; width:max(100%, calc(max(560px, 100svh) * 16 / 9)); min-height:100%;transform:translate(-50%,-50%)} .hero-stage picture{position:absolute;inset:0} .hero-stage img,.hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-video{opacity:0;transition:opacity 600ms ease} .hero.is-playing .hero-video{opacity:1} /* Velo: el cielo y el camión conservan la luz. Paradas izquierdas subidas (.86 / .70) tras medir el contraste del texto sobre el póster y 10 fotogramas del bucle: rótulo y entradilla ≥ 5:1, H1 ≥ 6,8:1 (checklist H4) */ .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background: linear-gradient(90deg, rgba(var(--velo),.86) 0%, rgba(var(--velo),.70) 34%, rgba(var(--velo),.18) 58%, rgba(var(--velo),0) 72%), linear-gradient(0deg, rgba(var(--velo),.55) 0%, rgba(var(--velo),0) 40%), linear-gradient(180deg, rgba(var(--velo),.35) 0%, rgba(var(--velo),0) 18%)} .hero-marca{z-index:2;pointer-events:none} .hero-in{z-index:3;width:100%} .hero-copy{display:flex;flex-direction:column;align-items:flex-start;width:min(680px, calc((100% - 11*24px) / 12 * 7 + 6*24px))} .hero-chip{display:inline-block;height:30px;padding:0 12px;border-radius:6px;font:600 14px/30px var(--f-body);white-space:nowrap;background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} .hero-chip b{font-weight:600;font-variant-numeric:tabular-nums} .hero-chip.is-aviso{background:var(--amarillo);color:#1C2129;box-shadow:inset 0 0 0 2px var(--amarillo),inset 0 0 0 3.5px #1C2129} .hero .eyebrow{margin-top:20px;color:var(--eyebrow-on-dark)} .hero h1{margin-top:14px;max-width:11.5em;font:700 var(--t-display)/.95 var(--f-display);letter-spacing:0;text-wrap:balance} .hero-lead{margin-top:20px;max-width:560px;font-size:var(--t-lead);line-height:1.5;color:var(--on-photo-2);text-wrap:pretty;hanging-punctuation:first} .hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px} .hero .btn-ghost{--fg:#fff;--bd:rgba(255,255,255,.34)} @media (hover:hover) and (pointer:fine){ .hero .btn-ghost:hover{--bg:rgba(255,255,255,.1);--bd:rgba(255,255,255,.55)} } .hero-pruebas{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14.5px;color:var(--on-photo-2)} .hero-pruebas li{display:inline-flex;align-items:center;gap:7px} .hero-pruebas svg{width:16px;height:16px;color:var(--eyebrow-on-dark)} .hero-micro{display:none;color:rgba(255,255,255,.8)} /* entrada escalonada al cargar */ .hero-copy>*{animation:sube 640ms var(--ease-out) backwards} .hero-copy>:nth-child(2){animation-delay:70ms} .hero-copy>:nth-child(3){animation-delay:140ms} .hero-copy>:nth-child(4){animation-delay:210ms} .hero-copy>:nth-child(5){animation-delay:280ms} .hero-copy>:nth-child(6),.hero-copy>:nth-child(7){animation-delay:350ms} @keyframes sube{from{opacity:0;transform:translateY(16px)}} /* Etiqueta anclada al techo del remolque: arranca en el primer fotograma (78,9 % / 46,1 %) y el JS la mueve con la pista medida del vídeo */ .truck-tag{--tag-x:78.9%;--tag-y:46.1%;position:absolute;left:var(--tag-x);top:var(--tag-y);transform:translate(-50%,calc(-100% + 3px));display:flex;flex-direction:column;align-items:center;pointer-events:auto} .tt-sign{width:220px;padding:14px 16px 13px;border-radius:12px;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;align-items:flex-start;transition:opacity 320ms var(--ease-out) 280ms,transform 320ms var(--ease-out) 280ms} .tt-sign::before{inset:5px;border-radius:8px} .tt-sign .docno-label{font-size:12.5px} .tt-num{display:block;margin-top:6px;font:700 34px/.86 var(--f-display);letter-spacing:.005em;font-variant-numeric:tabular-nums} .tt-meta{display:flex;align-items:center;gap:10px;margin-top:10px} .tt-meta .pill{height:24px;padding:0 10px 0 8px;font-size:13px;gap:6px} .tt-meta .pill i{width:7px;height:7px} .tt-hora{font:400 12px/1 var(--f-data);color:#D6E4F5;font-variant-numeric:tabular-nums} .tt-guia{position:relative;width:2px;height:64px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.8) 0 6px,transparent 6px 11px);transform-origin:bottom;transition:transform 280ms var(--ease-in-out)} .tt-guia i{position:absolute;inset:0;background:rgba(255,255,255,.8);opacity:0;transition:opacity 160ms ease} .tt-punto{width:6px;height:6px;border-radius:50%;background:#fff} @media (hover:hover) and (pointer:fine){ .truck-tag:hover .tt-guia i{opacity:1} } html.js .hero:not(.tag-in) .tt-guia{transform:scaleY(0)} html.js .hero:not(.tag-in) .tt-sign{opacity:0;transform:translateY(6px)} html.js .hero:not(.tag-in) .tt-punto{opacity:0} .tt-punto{transition:opacity 200ms ease} @media (max-width:1023px),(max-height:639px){ .hero-marca{display:none} } /* Indicación para bajar: la marca vial que baja */ .hero-down{position:absolute;left:50%;bottom:8px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:44px;height:72px;margin-left:-22px;border-radius:8px;transition:opacity 200ms ease} .hd-rot{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:12.5px;line-height:1.2;color:#fff;white-space:nowrap} /* blanco pleno: al 80 % no llega a 4,5:1 sobre la calzada */ .hd-linea{position:relative;width:2px;height:36px;margin-bottom:10px;background:rgba(255,255,255,.3);overflow:hidden} .hd-linea i{position:absolute;left:0;top:0;width:2px;height:10px;background:#fff;animation:marca 1.8s var(--ease-in-out) infinite} @keyframes marca{from{transform:translateY(0);opacity:1}to{transform:translateY(26px);opacity:0}} .hero.is-scrolled .hero-down{opacity:0;pointer-events:none} @media (max-height:639px){ .hero-down{display:none} } /* Botón de pausa (WCAG 2.2.2) */ .hero-pausa{position:absolute;bottom:24px;right:max(var(--gutter), calc((100% - var(--maxw)) / 2));z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:rgba(var(--velo),.28);color:#fff;cursor:pointer;transition:background-color 160ms ease} .hero-pausa svg{grid-area:1/1;width:20px;height:20px} .hero-pausa .i-play,.hero-pausa.is-paused .i-pause{display:none} .hero-pausa.is-paused .i-play{display:block} @media (hover:hover) and (pointer:fine){ .hero-pausa:hover{background:rgba(var(--velo),.5)} } /* ≤ 1279: el texto ocupa más ancho relativo, el velo llega un poco más lejos (el camión, en x ≈ 70 %, apenas se oscurece) */ @media (max-width:1279px){ .hero::after{background: linear-gradient(90deg, rgba(var(--velo),.86) 0%, rgba(var(--velo),.74) 40%, rgba(var(--velo),.28) 62%, rgba(var(--velo),0) 78%), linear-gradient(0deg, rgba(var(--velo),.55) 0%, rgba(var(--velo),0) 40%), linear-gradient(180deg, rgba(var(--velo),.35) 0%, rgba(var(--velo),0) 18%)} } /* 760–1023: vídeo y el mismo texto, sin etiqueta */ @media (max-width:1023px){ .hero-lead{max-width:540px} } /* < 760: apilado y sin vídeo. Arriba, el póster reencuadrado sobre el camión vinilado; el texto, abajo sobre asfalto (no tapa la marca) */ @media (max-width:759px){ .hero{padding-bottom:28px;background:rgb(var(--velo))} .hero-stage{left:0;top:0;width:100%;height:48%;min-height:0;aspect-ratio:auto;transform:none} .hero-video,.hero-pausa{display:none} .hero-poster{object-position:85% 50%} .hero::after{background: linear-gradient(180deg, rgba(var(--velo),.35) 0%, rgba(var(--velo),0) 14%, rgba(var(--velo),0) 36%, rgb(var(--velo)) 48%, rgb(var(--velo)) 100%)} .hero-copy{width:100%} .hero-chip{position:absolute;top:calc(var(--topbar) + 16px);left:var(--gutter)} .hero-chip:not(.is-aviso){background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),rgba(var(--velo),.55)} /* sobre el cielo claro: 5:1 */ .hero .eyebrow{margin-top:0} .hero-lead{font-size:16px;margin-top:16px} .hero-cta{margin-top:22px;width:100%;flex-direction:column;align-items:stretch;gap:4px} .hero-cta .btn-primary{height:52px} .hero-ver{height:44px;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:16px} .hero-pruebas{display:none} .hero-micro{display:block;margin-top:4px;align-self:center;text-align:center} .hero-down{bottom:0;height:44px;justify-content:flex-end} .hd-rot{display:none} .hd-linea{height:22px;margin-bottom:4px} .hd-linea i{height:8px} } /* Pantallas móviles bajas: la foto se acorta para que el texto quepa sobre fondo liso */ @media (max-width:759px) and (max-height:760px){ .hero-stage{height:40%} .hero::after{background: linear-gradient(180deg, rgba(var(--velo),.35) 0%, rgba(var(--velo),0) 14%, rgba(var(--velo),0) 30%, rgb(var(--velo)) 40%, rgb(var(--velo)) 100%)} } /* ══ 2 · Qué cambia el 5 de octubre ═════════════════════════════════════ */ .afecta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start} .datos{border-top:1px solid var(--line)} .datos li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)} .datos b{font-weight:600;font-size:18px;line-height:1.35} .datos span{color:var(--text-2);font-size:16px;line-height:1.5} .af-card{padding:28px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)} .af-bloque h3{font:600 var(--t-card)/1.12 var(--f-display);letter-spacing:.005em} .af-bloque + .af-bloque{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)} .af-bloque ul{margin-top:14px;display:flex;flex-direction:column;gap:12px} .af-bloque li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:16.5px;line-height:1.45} .af-si svg{width:20px;height:20px;color:var(--link);margin-top:2px} .af-no .guion{position:relative;width:20px;height:20px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)} .af-no .guion::after{content:"";position:absolute;left:6px;right:6px;top:9px;height:2px;border-radius:1px;background:var(--text-3)} .af-enlace{margin-top:12px} @media (max-width:1279px){ .afecta{gap:40px} } @media (max-width:860px){ .afecta{grid-template-columns:1fr;gap:32px} .af-card{padding:20px} } /* ══ 3 · Recorrido ══════════════════════════════════════════════════════ */ .rec{position:relative} .escena{display:none} /* Modo apilado (móvil, reduced-motion, sin JS o pantallas bajas): 5 tarjetas con su mini estado */ .pasos{display:flex;flex-direction:column;gap:16px} .paso{padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)} .paso-hd{font:inherit} .paso-h{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0;border:0;background:none;text-align:left;cursor:default;border-radius:6px;-webkit-tap-highlight-color:transparent} .hito-t{display:inline-grid;place-items:center;flex:none;min-width:52px;height:28px;padding:0 8px;border-radius:6px;background:var(--azul);color:#fff;font:600 13px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;font-feature-settings:"case";transition:background-color 200ms ease,color 200ms ease,box-shadow 200ms ease} .paso-t{font:700 var(--t-h3)/1.08 var(--f-display);letter-spacing:.004em;text-wrap:balance} .paso-b{display:grid;grid-template-rows:1fr} .paso-b>div{min-height:0;overflow:hidden} .paso-b p{margin-top:10px;font-size:var(--t-body);line-height:1.55;color:var(--text-2);text-wrap:pretty} .tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 11px 6px 9px;border-radius:8px;background:var(--tint-azul);color:var(--link);font:600 14px/1.25 var(--f-body)} .tag svg{width:16px;height:16px} .paso-mini{margin-top:16px;padding:14px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;align-items:flex-start;gap:12px} @media (min-width:760px){ .rec:not(.is-pinned) .paso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 32px;align-items:start} .rec:not(.is-pinned) .paso-mini{grid-column:2;grid-row:1/span 2;margin-top:0} } /* mini 1: cartel compacto del conductor */ .drv-sign{border-radius:18px;padding:18px 20px} .drv-sign::before{inset:7px;border-radius:12px} .drv-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .drv-sign .docno-num{font-size:44px;margin-top:6px} .drv-sign .state{flex-direction:column;align-items:flex-end;gap:8px} .drv-route{margin-top:10px;font-size:15px;line-height:1.35;font-weight:600;text-wrap:balance} .drv-plates{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .paso-mini .drv-sign{width:100%;max-width:340px} /* mini 2: cambio de placa */ .paso-mini .plate-note{font-size:13.5px;padding:8px 12px 8px 10px;gap:8px} .paso-mini .plate-note svg{width:18px;height:18px} .m-cambio{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} .m-old-w{display:inline-flex;flex-direction:column;gap:4px} .m-old-w small{font-size:12.5px;color:var(--text-rojo);font-weight:600} .m-flecha{width:18px;height:18px;color:var(--text-2);align-self:flex-start;margin-top:5px} .m-old::after{transform-origin:left center;transition:transform 300ms var(--ease-in-out)} .m-new{transition:opacity 320ms var(--ease-out) 120ms,transform 320ms var(--ease-out) 120ms} .m-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 11px 4px 9px;border-radius:999px;background:var(--tint-azul);color:var(--link);font:600 13.5px/1.25 var(--f-body)} .m-chip svg{width:15px;height:15px} .m-chip.is-gris{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)} /* mini 3 y 4: la carretera en neutro (un solo cartel azul por pantalla) */ .mroad{--tback:0px;position:relative;width:100%;height:62px;container-type:inline-size} .mr-lane,.mr-done{position:absolute;left:0;top:25px;height:4px;border-radius:2px} .mr-lane{right:0;background:var(--line-strong)} .mr-done{width:100%;background:var(--azul);transform-origin:left;transform:scaleX(calc(var(--tp) / 100));transition:transform 900ms var(--ease-in-out)} :root[data-theme="dark"] .mr-done{background:var(--link)} .mr-truck{position:absolute;left:0;top:1px;width:52px;height:20px;color:var(--text);--cut:var(--surface-2);transform:translateX(clamp(0px, calc(var(--tp) * 1cqw - 26px), calc(100cqw - 52px)));transition:transform 900ms var(--ease-in-out)} .mr-truck svg{display:block;width:52px;height:20px} .mr-h{position:absolute;top:21px;left:calc(var(--p) * 1%);display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)} .mr-truck + .mr-h{align-items:flex-start;transform:translateX(-5px)} .mr-h:last-child{align-items:flex-end;transform:translateX(calc(-100% + 5px))} .mr-h i{width:10px;height:10px;border-radius:2px;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--azul)} :root[data-theme="dark"] .mr-h i{box-shadow:inset 0 0 0 2px var(--link)} .mr-h.is-done i{background:var(--azul);box-shadow:none} :root[data-theme="dark"] .mr-h.is-done i{background:var(--link)} .mr-h span{margin-top:6px;font:600 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;font-feature-settings:"case"} .mr-fin svg{width:20px;height:20px;margin-top:4px;color:var(--azul)} .m-mono{font:400 12px/1.45 var(--f-data);color:var(--text-2);font-variant-numeric:tabular-nums} .m-ret{display:flex;align-items:center;gap:12px} .m-qr{width:56px;height:56px;opacity:.35;border-radius:4px} /* mini 5: historial */ .m-hist{width:100%;display:flex;flex-direction:column} .m-hist li{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.35;transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)} .m-hist li:first-child{border-top:0;padding-top:0} .m-hist li:nth-child(2){transition-delay:70ms} .m-hist li:nth-child(3){transition-delay:140ms} .m-hist time{font:600 12.5px/1.6 var(--f-data);color:var(--text-2);white-space:nowrap;min-width:44px} .m-cons{font-weight:600;font-size:14.5px;color:var(--link)} /* gesto de cada mini estado al entrar (el estado final es el de por defecto) */ .mini-pend .m-old::after{transform:scaleX(0)} .mini-pend .m-new{opacity:0;transform:translateX(8px)} .mini-pend .mroad{--tp:var(--tp0)!important} .mini-pend .m-hist li{opacity:0;transform:translateY(6px)} /* Modo fijo: escena pegada con el índice a la izquierda */ .sec-rec.is-pinned{padding-bottom:0} .rec.is-pinned{height:calc(100svh + 5 * 56svh)} .rec.is-pinned .rec-stage{position:sticky;top:var(--topbar);height:calc(100svh - var(--topbar));display:grid;grid-template-columns:360px minmax(0,1fr);gap:56px;align-content:safe center;align-items:start} .rec.is-pinned .escena{display:block} .rec.is-pinned .paso-mini{display:none} .rec.is-pinned .pasos{--prog:0;position:relative;display:block;padding-left:22px;min-height:420px} .rec.is-pinned .pasos::before,.rec.is-pinned .pasos::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--line-strong)} .rec.is-pinned .pasos::after{background:var(--azul);transform-origin:top;transform:scaleY(var(--prog))} :root[data-theme="dark"] .rec.is-pinned .pasos::after{background:var(--link)} .rec.is-pinned .paso{padding:0;border:0;border-radius:0;background:none} .rec.is-pinned .paso-h{min-height:48px;cursor:pointer} .rec.is-pinned .hito-t{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)} .rec.is-pinned .paso.on .hito-t{background:var(--azul);color:#fff;box-shadow:none} .rec.is-pinned .paso-t{font-size:22px;color:var(--text-3);transition:color 200ms ease} .rec.is-pinned .paso.on .paso-t{font-size:28px;color:var(--text)} .rec.is-pinned .paso-b{grid-template-rows:0fr;transition:grid-template-rows 320ms var(--ease-in-out)} .rec.is-pinned .paso.on .paso-b{grid-template-rows:1fr} .rec.is-pinned .paso-b>div{padding-left:64px;opacity:0;transform:translateY(8px);transition:opacity 160ms ease,transform 0s linear 160ms} .rec.is-pinned .paso.on .paso-b>div{opacity:1;transform:none;padding-bottom:16px;transition:opacity 360ms var(--ease-out) 60ms,transform 360ms var(--ease-out) 60ms} .rec.is-pinned .paso-b p{margin-top:6px;font-size:17px} @media (hover:hover) and (pointer:fine){ .rec.is-pinned .paso:not(.on) .paso-t:hover{color:var(--text-2)} } /* La escena: cartel + tarjeta del QR + historial (caja de 784 px) */ .escena{--tp:18;--tback:0px;--tback-max:66;--n:2;position:relative;width:784px;transform:scale(var(--fit,1));transform-origin:top left} .escena[data-phase="modificado"]{--n:4} .escena[data-phase="terminado"]{--n:5} .escena[data-phase="retirado"],.escena[data-phase="conservado"]{--n:6} /* variantes por fase: .f1…f5 dicen en qué fases se ve cada una; .sw las apila en la misma celda */ .sw{display:grid} .sw>*{grid-area:1/1} .sw-end>*{justify-self:end} .escena .v{opacity:0;transition:opacity 200ms ease} .escena .x{filter:blur(3px);transform:translateY(5px);transition:opacity 200ms var(--ease-out),filter 200ms var(--ease-out),transform 200ms var(--ease-out)} .escena[data-phase="emitido"] .f1,.escena[data-phase="modificado"] .f2,.escena[data-phase="terminado"] .f3,.escena[data-phase="retirado"] .f4,.escena[data-phase="conservado"] .f5{opacity:1;filter:none;transform:none} .e-sign{width:600px;padding:22px 24px 20px;border-radius:16px} /* cabecera: número y fecha a la izquierda; estado, versión y enlace retirado apilados a la derecha, sin entrar bajo la tarjeta del QR */ .e-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-right:40px} .e-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right} .e-fecha{margin-top:10px;font:400 13px/1.2 var(--f-data);color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums} .e-ret{height:30px} .escena:not([data-phase="emitido"]):not([data-phase="modificado"]) .pill{color:#1C2129} .chip-ret{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);color:#fff;font:600 14px/1 var(--f-body);white-space:nowrap} .escena .vmark{transition:transform 200ms var(--ease-out)} .escena[data-phase="emitido"] .vmark{transform:scale(.8)} .e-veh{display:flex;gap:28px;margin-top:16px} .e-veh-g{display:flex;flex-direction:column;align-items:flex-start;gap:5px} .e-lbl{font:600 12.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.84);font-feature-settings:"case"} .e-plates{display:flex;gap:8px} .e-nota{font-size:12.5px;line-height:1.2;color:#fff;font-weight:600} /* placa sustituida: gris y tachada con una tapa que escala; la nueva entra a su lado */ .e-old .plate-eu,.e-old .plate-num{transition:background-color 200ms ease,color 200ms ease} .e-old::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--rojo) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px));transform:scaleX(0);transform-origin:left center;transition:transform 300ms var(--ease-in-out)} .escena:not([data-phase="emitido"]) .e-old{border-color:#8A919C} .escena:not([data-phase="emitido"]) .e-old .plate-eu{background:#7D8594} .escena:not([data-phase="emitido"]) .e-old .plate-num{color:#5F6672} .escena:not([data-phase="emitido"]) .e-old::after{transform:scaleX(1)} .e-new{opacity:0;transform:translateX(8px);transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)} .escena:not([data-phase="emitido"]) .e-new{opacity:1;transform:none;transition-delay:120ms} .e-ruta{margin-top:10px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.92)} .e-ruta b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums} .e-mod{margin-top:12px;min-height:38px;justify-items:start} .e-mod .plate-note{transform-origin:top left;transform:scaleY(.9);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)} .escena[data-phase="modificado"] .e-mod .f2,.escena[data-phase="terminado"] .e-mod .f3,.escena[data-phase="retirado"] .e-mod .f4,.escena[data-phase="conservado"] .e-mod .f5{transform:none} /* Carretera del servicio (CarreteraServicio): camión y calzada hecha los mueve el scroll, sin transition */ .e-sign .track{position:relative;container-type:inline-size;height:86px;margin-top:14px} .lane{position:absolute;left:0;top:35px;height:6px} .lane-ahead{width:50%;background:rgba(255,255,255,.3)} .lane-done{width:100%;background:#fff;transform-origin:left center;transform:scaleX(calc(var(--tp) / 100))} .lane-future{left:50%;width:50%;top:37px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 10px,transparent 10px 18px)} .truck{position:absolute;left:0;top:6px;width:76px;height:29px;color:#fff;--cut:var(--sign);transform:translateX(calc(var(--tp) * 1cqw - var(--tback) - 50%))} .truck svg{display:block;width:76px;height:29px} .stops{position:absolute;inset:0} .stop{position:absolute;top:22px;left:calc(var(--p) * 1%);width:150px;margin-left:-75px;display:flex;flex-direction:column;align-items:center;text-align:center} .stop.s0{margin-left:0;align-items:flex-start;text-align:left} .stop.s3{margin-left:-150px;align-items:flex-end;text-align:right} .stop-name{display:grid;margin-top:9px;font-weight:600;font-size:14.5px;line-height:1.2;white-space:nowrap} .stop.s0 .stop-name,.stop.s3 .stop-name{justify-items:inherit} .stop.s1 .stop-name>*,.stop.s2 .stop-name>*{justify-self:center} .stop.s3 .stop-name>*{justify-self:end} .stop .hito{position:relative} .stop.s0 .hito, .escena[data-phase="terminado"] .s1 .hito, .escena[data-phase="retirado"] :is(.s1,.s2) .hito, .escena[data-phase="conservado"] :is(.s1,.s2,.s3) .hito{background:#fff;color:var(--sign)} .stop .hito::after{content:"";position:absolute;inset:-4px;border-radius:9px;box-shadow:0 0 0 6px rgba(255,255,255,.34);opacity:0;transition:opacity 160ms ease} .escena[data-phase="conservado"] .s3 .hito::after{opacity:1;transition-duration:240ms} .escena[data-preview="0"] .s0 .hito::after,.escena[data-preview="1"] .s1 .hito::after,.escena[data-preview="2"] .s2 .hito::after,.escena[data-preview="3"] .s3 .hito::after{opacity:1} .e-sub{margin-top:6px;font-size:14.5px;line-height:1.35;color:#D6E4F5;white-space:nowrap} .e-url{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .e-url-i{width:18px;height:18px;color:#fff;opacity:.85} .e-url-t{font:400 13px/1.35 var(--f-data);color:rgba(255,255,255,.92);transition:opacity 320ms ease} .e-url-t b{font-weight:600;color:#fff} .e-url-st{margin-left:auto;font:600 13.5px/1.2 var(--f-body);white-space:nowrap} .e-url-st>span{display:inline-flex;align-items:center;gap:7px} .e-url-st svg{width:16px;height:16px} .punto{width:9px;height:9px;border-radius:50%;background:#9FC6F5;flex:none} .punto.is-off{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .escena[data-phase="retirado"] .e-url-t,.escena[data-phase="conservado"] .e-url-t{opacity:.6} /* Tarjeta del QR: blanca siempre, flota sobre el cartel. El QR es el mismo símbolo en todas las fases */ .e-qr{position:absolute;left:552px;top:72px;width:184px;padding:14px 14px 13px;border-radius:12px;background:#fff;color:#1C2129;box-shadow:var(--shadow-pop);text-align:center;--focus:#1C2129} .e-qr::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 0 0 2px var(--azul);opacity:0;pointer-events:none} .escena[data-phase="modificado"] .e-qr::after{animation:aro 600ms var(--ease-out)} @keyframes aro{from{opacity:.5;transform:scale(.96)}to{opacity:0;transform:scale(1.1)}} .e-qr-img{display:block;width:132px;height:132px;margin:0 auto;transition:opacity 320ms ease} .escena[data-phase="retirado"] .e-qr-img,.escena[data-phase="conservado"] .e-qr-img{opacity:.35} .e-qr-url{margin-top:8px;font:400 12px/1.35 var(--f-data);color:#505A68} .e-qr-st{margin-top:10px;justify-items:center} .qchip{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;background:#E3ECF8;color:#0B4F9C;font:600 12.5px/1.25 var(--f-body)} .qchip svg{width:14px;height:14px;flex:none} .qchip.is-gris{padding:5px 9px;border-radius:8px;background:transparent;color:#505A68;box-shadow:inset 0 0 0 1.5px #9AA3AF} /* Historial: ventana de 4 filas que se va llenando */ .e-hist{width:600px;height:184px;margin-top:16px;padding:10px 16px 0;border-radius:12px;background:var(--surface);border:1px solid var(--line)} .e-hist-h{display:flex;align-items:center;justify-content:space-between;height:28px} .e-hist-nota{font-size:13.5px;color:var(--text-2)} .e-hist-nota>span{display:inline-flex;align-items:center;gap:6px} .e-hist-nota svg{width:16px;height:16px;color:var(--link)} .e-hist-win{height:144px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 8px);mask-image:linear-gradient(transparent 0,#000 8px)} .e-hist-l{transform:translateY(calc(-36px * max(0, var(--n) - 4)));transition:transform 380ms var(--ease-out)} .hr{display:flex;align-items:center;gap:14px;height:36px;border-top:1px solid var(--line-2);font-size:15px;white-space:nowrap;transition:opacity 240ms var(--ease-out) 80ms} .hr:first-child{border-top-color:transparent} .hr time{min-width:46px;font:600 13px/1 var(--f-data);color:var(--text-2);font-variant-numeric:tabular-nums} .escena[data-phase="emitido"] .hr:nth-child(n+3),.escena[data-phase="modificado"] .hr:nth-child(n+5),.escena[data-phase="terminado"] .hr:nth-child(n+6){opacity:0;transition-delay:0ms;transition-duration:120ms} .escena[data-phase="conservado"] .hr-v{animation:resalte 1.2s ease} @keyframes resalte{0%,40%{background:var(--tint-azul)}} /* 1024–1279: cartel de 500, número a 64, carretera de 460, QR de 160 */ @media (max-width:1279px){ .rec.is-pinned .rec-stage{grid-template-columns:312px minmax(0,1fr);gap:28px} .rec.is-pinned .paso-b>div{padding-left:0} .rec.is-pinned .paso-t{font-size:20px} .rec.is-pinned .paso.on .paso-t{font-size:26px} .rec.is-pinned .paso-b p{font-size:16px} .escena{width:620px} .e-sign{width:500px;padding:20px 20px 18px} /* carretera de 460: el camión baja a 61 px para caber entre la señal y «+7 d» */ .escena{--tback-max:58} .truck{top:12px;width:61px;height:23px} .truck svg{width:61px;height:23px} .e-sign .docno-num{font-size:64px} .e-veh{gap:20px} .e-sub{font-size:13.5px} .stop{width:128px;margin-left:-64px} .stop.s3{margin-left:-128px} /* carretera de 460: los rótulos largos pasan a dos líneas para no pisarse */ .e-sign .track{height:98px} .stop-name{font-size:13px;white-space:normal;text-wrap:balance} .stop.s1 .stop-name{max-width:104px} .stop.s2 .stop-name{max-width:70px} .e-qr{left:452px;width:168px;padding:12px 12px 11px} .e-qr .qchip{white-space:nowrap;font-size:11px;padding:4px 8px 4px 6px;gap:4px} .e-qr-img{width:112px;height:112px} .e-qr-url{font-size:11.5px} .e-hist{width:500px} .hr{font-size:14.5px} } /* ══ 4 · Para el conductor ══════════════════════════════════════════════ */ .cond{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"phone head" "phone steps";column-gap:64px;align-items:start} .cond-head{grid-area:head} .cond-phone{grid-area:phone;align-self:center;display:flex;justify-content:center} .cond-pasos{grid-area:steps} .phone-box{position:relative;width:320px;height:660px} .phone{position:relative;width:320px;height:660px;padding:10px;border-radius:44px;background:#0E1217;box-shadow:var(--shadow-pop),inset 0 0 0 1px rgba(255,255,255,.08)} .phone-status{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 24px 0 28px;color:#fff} .ps-hora{font:600 13px/1 var(--f-data);font-variant-numeric:tabular-nums} .ps-isla{position:absolute;left:50%;top:8px;width:86px;height:22px;margin-left:-43px;border-radius:12px;background:#0E1217} .ps-ind{display:flex;align-items:flex-end;gap:2px} .ps-ind i{width:3px;background:#fff;border-radius:1px} .ps-ind i:nth-child(1){height:5px}.ps-ind i:nth-child(2){height:7px}.ps-ind i:nth-child(3){height:9px} .ps-ind b{width:20px;height:10px;margin-left:5px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #fff;background:linear-gradient(90deg,#fff 0 70%,transparent 70%) 2px 2px/16px 6px no-repeat} .phone .drv-page{height:100%;overflow:hidden;border-radius:34px;background:var(--bg);color:var(--text)} /* la barra baja hasta debajo de la burbuja, que entra por arriba a la izquierda */ .drv-bar{height:120px;padding:106px 18px 0;background:var(--bar);color:#fff;font:600 13px/1 var(--f-body);white-space:nowrap} .drv-in{padding:12px 14px 0;display:flex;flex-direction:column;gap:5px} .drv-hola{font:700 22px/1 var(--f-display)} .drv-in .eyebrow{font-size:12px;margin-top:2px} .drv-in .drv-sign{padding:11px 15px;border-radius:14px} .drv-in .drv-sign::before{inset:5px;border-radius:10px} .drv-in .docno-label{font-size:11.5px} .drv-in .drv-sign .docno-num{font-size:40px;margin-top:5px} .drv-in .pill{height:24px;font-size:13px;padding:0 10px 0 8px} .drv-in .ver{font-size:13px} .drv-in .drv-route{margin-top:8px;font-size:14px} .drv-in .drv-plates{margin-top:8px;gap:6px} .drv-in .plate.sm{height:24px} .drv-in .plate.sm .plate-num{font-size:15.5px} .drv-upd-w{display:flex} .drv-upd{width:100%;padding:7px 10px 7px 9px;font-size:13px;gap:8px;transform-origin:top;transition:transform 280ms var(--ease-out) 900ms} .drv-upd svg{width:17px;height:17px} .drv-qr{padding:8px 12px 10px;border-radius:14px;background:#fff;color:#1C2129;border:1px solid var(--line);text-align:center} .qr-btn{width:200px;height:200px;margin:0 auto;transition:transform 200ms var(--ease-out)} .qr-btn svg{display:block;width:200px;height:200px} .say{margin-top:4px;font:700 19px/1.1 var(--f-display);letter-spacing:.01em} .drv-qr .btn{--bg:#fff;--fg:#1C2129;--bd:#838D9B;height:32px;margin-top:6px;font-size:13px;cursor:default} .drv-qr .btn svg{width:15px;height:15px} @media (hover:hover) and (pointer:fine){ .qr-btn:hover{transform:scale(1.03)} } .burbuja{position:absolute;left:-40px;top:56px;z-index:3;width:236px;padding:9px 13px 8px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-pop);font-size:13.5px;line-height:1.4;transform-origin:bottom left;transition:opacity 220ms var(--ease-out) 420ms,transform 220ms var(--ease-out) 420ms} .burbuja .mono{font-size:12.5px;color:var(--link)} .burbuja time{float:right;margin:3px 0 0 10px;font:400 12px/1 var(--f-data);color:var(--text-3)} .phone{transition:opacity 640ms var(--ease-out),transform 640ms var(--ease-out)} .cond-pasos .route{margin-top:4px} .cond-pasos .place{padding-bottom:26px} .cond-pasos .place.is-final{padding-bottom:0} .cond-pasos .place b{display:block;font:600 21px/1.15 var(--f-display);letter-spacing:.005em} .cond-pasos .place small{display:block;margin-top:4px;font-size:16px;line-height:1.5;color:var(--text-2);max-width:52ch;text-wrap:pretty} .cond-pasos .pin{top:3px} .cond.is-in .pin{background:var(--azul);border-color:var(--azul)} :root[data-theme="dark"] .cond.is-in .pin{background:var(--link);border-color:var(--link)} .cond .place:nth-child(2) .pin{transition-delay:90ms} .cond .place:nth-child(3) .pin{transition-delay:180ms} .nota-priv{display:flex;gap:10px;align-items:flex-start;margin-top:28px;font-size:var(--t-small);line-height:1.45;color:var(--text-2)} .nota-priv svg{width:20px;height:20px;color:var(--link);margin-top:1px} /* entrada al 25 % visible, una vez */ html.js .cond:not(.is-in) .phone{opacity:0;transform:translateY(24px)} html.js .cond:not(.is-in) .burbuja{opacity:0;transform:scale(.96)} html.js .cond:not(.is-in) .drv-upd{transform:scaleY(0)} /* teléfono escalado con el alto reservado: no mueve la maquetación */ .cond-phone{--ph-s:1;height:calc(660px * var(--ph-s))} .phone-box{flex:none;transform:scale(var(--ph-s));transform-origin:top center} @media (max-width:1279px){ .cond{column-gap:48px} .cond-phone{--ph-s:.86} } @media (max-width:860px){ .cond{grid-template-columns:1fr;grid-template-areas:"head" "phone" "steps";row-gap:0} .cond-pasos{margin-top:32px} } @media (max-width:600px){ .cond-phone{--ph-s:.85} } /* ══ 5 · Qué incluye ════════════════════════════════════════════════════ */ .incs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .inc{display:flex;flex-direction:column;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out),border-color 160ms ease;transition-delay:var(--rd,0ms),var(--rd,0ms),0ms} .inc-v{position:relative;display:grid;place-items:center;height:168px;margin:12px 12px 0;padding:10px 14px;border-radius:12px;background:var(--surface-2);overflow:hidden} .inc-t{padding:20px 22px 22px} .inc-t h3{font:600 var(--t-card)/1.12 var(--f-display);letter-spacing:.005em;text-wrap:balance} .inc-t p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--text-2);text-wrap:pretty} .pz{width:100%;max-width:330px} /* 1 · autocompletar */ .pz-lbl{font-weight:600;font-size:13px;line-height:1.2;margin-bottom:5px} .pz-input{display:flex;align-items:center;height:36px;padding:0 11px;border:1px solid var(--link);border-radius:9px;background:var(--field);font-size:15px;box-shadow:0 0 0 3px var(--halo)} .caret{width:1.5px;height:18px;margin-left:1px;background:var(--text);animation:parpadeo 1s steps(1) infinite} @keyframes parpadeo{50%{opacity:0}} .pz-ac .ac-list{margin-top:4px;padding:4px;transition:transform 240ms var(--ease-out)} .pz-ac .ac-opt{min-height:34px;padding:2px 10px} .pz-ac .ac-opt b{font-size:14px} .pz-ac .ac-opt small{font-size:12px} /* 2 · placa editable */ .pz-plate{align-items:flex-start} .pi-num{display:flex;align-items:center;padding:0 14px 0 10px;font:600 31px/1 var(--f-display);letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap} .pz-ok{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--link)} .pz-ok svg{width:17px;height:17px} /* 3 · esquina de un PDF: papel blanco a una tinta */ .inc-v:has(.pdf-mock){place-items:start;padding:22px 0 0 22px} .pdf-mock{max-width:none;width:340px;padding:16px 18px;border-radius:4px 0 0 0;background:#fff;color:#1C2129;box-shadow:0 0 0 1px rgba(28,33,41,.12);transition:transform 240ms var(--ease-out)} .pdf-top{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1.5px solid #1C2129} .pdf-t{font:700 12px/1.2 var(--f-display);letter-spacing:.08em} .pdf-n{margin-top:3px;font:400 11.5px/1.3 var(--f-data)} .pdf-logo{display:grid;place-items:center;width:64px;height:30px;border:1.5px dashed #9AA3AF;border-radius:4px;font:600 10px/1 var(--f-display);letter-spacing:.1em;color:#6A7482} .pdf-body{display:flex;gap:12px;margin-top:10px} .pdf-qr{width:64px;height:64px;flex:none} .pdf-lines{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} .pdf-lines i{display:block;height:6px;border-radius:2px;background:#E4E8EC} .pdf-lines i:nth-child(2){width:72%} .pdf-mock .was{padding:4px 7px;gap:5px;font-size:12px;background:#F1F3F6;box-shadow:inset 2px 0 0 #1C2129;color:#1C2129} .pdf-mock .novalido{height:18px;font-size:11px} /* 4 · cápsula del enlace */ .pz-url{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .pz-plate,.pz-url{width:auto;justify-self:center} .cap{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line)} .cap svg{width:18px;height:18px;color:var(--link)} .cap .mono{font-size:13.5px} .cap-ok,.cap-st{display:flex;align-items:center;gap:7px;padding-left:4px;font-size:14px;font-weight:600} .cap-ok{color:var(--link)} .cap-ok svg{width:16px;height:16px} .cap-st{color:var(--text-2);font-weight:500} .cap-st .punto{background:var(--azul);position:relative} :root[data-theme="dark"] .cap-st .punto{background:var(--link)} .cap-st .punto::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 var(--halo);opacity:0} /* 5 · envío */ .pz-send{display:flex;flex-direction:column;gap:12px} /* 6 · roles */ .pz-rol{display:flex;flex-direction:column;gap:10px} .pz-rol li{display:grid;grid-template-columns:136px 1fr;align-items:center;gap:12px;font-size:15px;font-weight:500} .pz-rol .rol{justify-self:start} /* gesto al pasar el ratón, una vez */ @media (hover:hover) and (pointer:fine){ .inc:hover{border-color:var(--line-strong)} .inc:hover .pz-ac .ac-list{animation:baja 240ms var(--ease-out)} .inc:hover .pz-ok{animation:entra-ok 240ms var(--ease-out)} .inc:hover .pdf-mock{transform:translateY(-3px)} .inc:hover .cap-st .punto::after{animation:late 600ms var(--ease-out)} } @keyframes baja{from{transform:translateY(-4px)}} @keyframes entra-ok{from{opacity:0;filter:blur(3px);transform:translateY(5px)}} @keyframes late{0%{opacity:1;box-shadow:0 0 0 0 var(--halo)}100%{opacity:0;box-shadow:0 0 0 10px var(--halo)}} .tambien{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-size:16px;color:var(--text-2)} .tambien>p:first-child{max-width:62ch} .pronto{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .pronto>span:first-child{font-weight:600;color:var(--text-2)} .chip-o{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--text-3);color:var(--text-2);font:500 13.5px/1 var(--f-body);white-space:nowrap} @media (max-width:1100px){ .incs{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .incs{grid-template-columns:minmax(0,1fr);gap:16px} .inc-v{height:136px;padding:10px} .inc-t{padding:18px 20px 20px} .pz-ac .pz-lbl{display:none} .pz-ac .ac-opt:last-child{display:none} .pz-rol{gap:8px} .inc-v:has(.pdf-mock){padding:14px 0 0 14px} .pdf-mock{width:330px;padding:13px 14px} .pdf-body{gap:10px} .pdf-qr{width:56px;height:56px} .pz-rol li{grid-template-columns:124px 1fr} } /* ══ 6 · Precios ════════════════════════════════════════════════════════ */ .precios{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:start} .pre-izq h2{margin-top:16px} .pre-izq .lead{margin-top:18px} .pre-cta{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px} .pre-cta .enlace{margin-top:10px} .alta{margin-top:24px;padding-left:16px;border-left:3px solid var(--azul);font-size:16px;line-height:1.5;color:var(--text-2);max-width:48ch} :root[data-theme="dark"] .alta{border-left-color:var(--link)} .planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .plan{position:relative;display:flex;flex-direction:column;padding:22px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out),border-color 160ms ease;transition-delay:var(--rd,0ms),var(--rd,0ms),0ms} .plan h3{display:flex;align-items:center;gap:10px;font:700 26px/1.05 var(--f-display);letter-spacing:.004em} .plan-q{margin-top:6px;font-size:15px;line-height:1.35;color:var(--text-2)} .plan>p:last-child{margin-top:12px;font-size:16px;line-height:1.5} .plan-pro{border:2px solid var(--azul);padding:21px} :root[data-theme="dark"] .plan-pro{border-color:var(--link)} .plan-rot{align-self:flex-start;margin:-6px 0 12px;padding:5px 8px;border-radius:6px;background:var(--tint-azul);color:var(--link);font:600 12.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;font-feature-settings:"case"} @media (hover:hover) and (pointer:fine){ .plan:not(.plan-pro):hover{border-color:var(--line-strong)} } @media (max-width:1279px){ .planes{grid-template-columns:1fr} .precios{gap:24px 48px} } @media (max-width:860px){ .precios{grid-template-columns:1fr;gap:40px} } @media (max-width:600px){ .plan{padding:18px 18px 16px} .plan-pro{padding:17px 17px 15px} .plan h3{font-size:23px} .plan-q{margin-top:4px} .plan>p:last-child{margin-top:8px;font-size:15.5px} .pre-cta .btn-lg{width:100%;height:52px} .pre-cta .micro{align-self:center} } /* ══ 7 · Preguntas ══════════════════════════════════════════════════════ */ .faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 64px;align-items:start} .faq-side .sec-head{margin-bottom:0} .faq-contacto{margin-top:28px;padding:20px;border-radius:12px;background:var(--surface);border:1px solid var(--line)} .fc-t{font-weight:600;font-size:17px} .fc-mail{font-family:var(--f-data);font-size:15px;font-weight:600} .faq-contacto>p:last-child{font-size:15px;line-height:1.45;color:var(--text-2)} .garantias{margin-top:28px;display:flex;flex-direction:column;gap:18px} .garantias li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start} .garantias svg{width:20px;height:20px;color:var(--link);margin-top:2px} .garantias b,.g-enlace{display:block;font-weight:600;font-size:16px;line-height:1.4} .g-enlace{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px -9px;color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;border-radius:4px;justify-self:start} .garantias span{display:block;margin-top:2px;font-size:15px;line-height:1.45;color:var(--text-2)} .faq-list{border-top:1px solid var(--line)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:14px 4px 14px 0;font:600 18px/1.35 var(--f-body);cursor:pointer;list-style:none;border-radius:6px} .faq-list summary::-webkit-details-marker{display:none} .mas{position:relative;width:20px;height:20px;flex:none;color:var(--link);transition:transform 160ms var(--ease-out)} .mas::before,.mas::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:1px;background:currentColor} .mas::after{transform:rotate(90deg)} .faq-list details[open] .mas{transform:rotate(45deg)} .resp{padding:0 0 20px;font-size:17px;line-height:1.55;color:var(--text-2);max-width:64ch;text-wrap:pretty} @supports (interpolate-size:allow-keywords){ .faq-list{interpolate-size:allow-keywords} .faq-list details::details-content{height:0;opacity:0;overflow:clip;transition:height 240ms var(--ease-out),opacity 240ms ease,content-visibility 240ms allow-discrete} .faq-list details[open]::details-content{height:auto;opacity:1} } @media (min-width:1025px) and (min-height:820px){ .faq-side{position:sticky;top:calc(var(--topbar) + 32px)} } @media (max-width:860px){ .faq{grid-template-columns:1fr;gap:0} .faq-side .sec-head{margin-bottom:24px} .faq-side .faq-list{margin-bottom:8px} .faq-list summary{font-size:17px} .resp{font-size:16px} } /* ══ 8 · Cierre ═════════════════════════════════════════════════════════ */ .cierre{position:relative;display:flex;align-items:center;min-height:min(600px, 80svh);overflow:hidden;isolation:isolate;background:#3a3a36;color:#fff} .cierre-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 55%} .cierre::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(var(--velo),.86) 0%, rgba(var(--velo),.6) 45%, rgba(var(--velo),.1) 75%)} .cierre-in{width:100%;padding-block:88px} .cierre-txt{max-width:min(600px, calc((100% - 11*24px) / 12 * 6 + 5*24px))} .cierre .eyebrow{color:var(--eyebrow-on-dark)} .cierre .eyebrow b{font-variant-numeric:tabular-nums} .cierre h2{margin-top:16px} .cierre-lead{margin-top:18px;font-size:var(--t-lead);line-height:1.5;color:var(--on-photo-2);max-width:52ch;text-wrap:pretty} @media (max-width:1279px){ .cierre{min-height:min(520px, 80svh)} } @media (max-width:760px){ .cierre{align-items:flex-end;min-height:min(640px, 88svh)} .cierre-img{object-position:80% 50%} .cierre::before{background:linear-gradient(180deg, rgba(var(--velo),.35), rgba(var(--velo),.88) 55%)} .cierre-in{padding-block:120px 40px} .cierre-txt{max-width:none} } /* ══ 9 · Pie ════════════════════════════════════════════════════════════ */ .pie{background:var(--bar);color:rgba(255,255,255,.72);border-top:1px solid var(--line)} .pie-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px;padding-block:56px 36px} .pie-in:has(> [data-guia][hidden]){grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))} .pie .brand{color:#fff} .pie-marca p{margin-top:8px;font-size:15px;line-height:1.5;max-width:30ch} .pie-col h2{font:600 13px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px;font-feature-settings:"case"} .pie-col a{display:inline-flex;align-items:center;min-height:34px;font-size:15px;color:rgba(255,255,255,.88);border-radius:4px;transition:color 160ms ease} .pie-col a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:4px} @media (hover:hover) and (pointer:fine){ .pie-col a:hover{color:#fff} } .pie-titular{padding-block:20px 28px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)} .pie-titular p+p{margin-top:2px} @media (max-width:860px){ .pie-in{grid-template-columns:1fr 1fr} .pie-marca{grid-column:1/-1} } @media (max-width:600px){ .pie-in{grid-template-columns:1fr;gap:24px;padding-block:44px 28px} .pie-col a{min-height:44px;min-width:44px} } /* ══ Movimiento reducido: fundidos de 200 ms, sin retrasos ni desplazamientos ══ */ @media (prefers-reduced-motion:reduce){ .reveal,.inc,.plan{transition:opacity 200ms ease!important;transition-delay:0ms!important} html.js .reveal:not(.in){transform:none} .hero-copy>*{animation:fundido 200ms ease both!important;animation-delay:0ms!important} @keyframes fundido{from{opacity:0}} .tt-sign,.tt-guia,.tt-punto{transition:opacity 200ms ease!important} html.js .hero:not(.tag-in) .tt-guia,html.js .hero:not(.tag-in) .tt-sign{transform:none} html.js .hero:not(.tag-in) .tt-guia{opacity:0} .hd-linea i{animation:none} .btn:active,.icon-btn:active{transform:none} .phone,.burbuja{transition:opacity 200ms ease!important} html.js .cond:not(.is-in) .phone,html.js .cond:not(.is-in) .burbuja{transform:none} html.js .cond:not(.is-in) .drv-upd,.drv-upd{transform:none;transition:none} .pin{transition-delay:0ms!important} .menu-hoja{animation:fundido 170ms ease} .caret{animation:none} .inc:hover *{animation:none!important;transform:none!important} .faq-list details::details-content{transition:none} .topbar,.brand svg,html.js .portada .topbar::before,html.js .portada .topbar::after{transition:none} } @keyframes fundido{from{opacity:0}} /* El rótulo del hero va dentro del H1 (SEO: «DeCA digital del transporte de mercancías») sin cambiar lo que se ve */ .hero h1{margin-top:20px} .hero h1 .eyebrow{display:block;margin:0 0 14px} @media (max-width:759px){ .hero h1{margin-top:0} } /* Portada: normas enlazadas en «Qué cambia» y enlaces «Más en la guía» en las respuestas */ .af-normas{margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--text-2)} .af-normas a{color:var(--link);text-decoration:underline;text-underline-offset:2px;border-radius:3px} .faq-mas{display:inline-block;margin-left:4px;font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;border-radius:3px} /* ══ Cierre: texto + formulario de demo (sustituye a la prueba gratis) ══ */ .cierre-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:64px;align-items:center} .cierre-txt{max-width:560px} .cierre-lista{margin-top:24px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45;color:var(--on-photo-2)} .cierre-lista li{display:flex;gap:10px;align-items:flex-start} .cierre-lista svg{width:18px;height:18px;margin-top:3px;color:var(--eyebrow-on-dark);flex:none} .cierre-alt{margin-top:24px;font-size:15px;color:var(--on-photo-2)} .cierre-alt a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;border-radius:4px} .demo{position:relative;padding:28px 28px 24px;border-radius:16px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-pop);--focus:var(--focus-page);scroll-margin-top:calc(var(--topbar) + 24px)} .demo h3{font:700 28px/1.05 var(--f-display);letter-spacing:.004em} .demo-sub{margin-top:8px;font-size:15px;line-height:1.45;color:var(--text-2)} .demo-grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px} .demo .span-2{grid-column:1/-1} .field{display:flex;flex-direction:column;gap:6px;min-width:0} .label{font-weight:600;font-size:14.5px;line-height:1.3} .label .opt{font-weight:400;color:var(--text-2)} .input,.select,.textarea{width:100%;height:44px;margin:0;padding:0 12px;border:1px solid var(--field-line);border-radius:9px;background:var(--field);color:var(--text);font:400 15.5px/1.3 var(--f-body);transition:border-color 160ms ease,box-shadow 160ms ease} .textarea{height:auto;min-height:84px;padding:10px 12px;line-height:1.45;resize:vertical} .select{appearance:none;padding-right:40px;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2129' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px 18px} :root[data-theme="dark"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7EBF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 1px var(--link),0 0 0 5px var(--halo)} .field.is-error .input,.field.is-error .select,.field.is-error .textarea{border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo)} :root[data-theme="dark"] .field.is-error .input{border-color:var(--text-rojo);box-shadow:0 0 0 1px var(--text-rojo)} .msg-err{font-size:13.5px;line-height:1.35;font-weight:500;color:var(--text-rojo)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .demo .btn-block{margin-top:22px} .demo .btn:disabled{opacity:.6;cursor:progress} .demo-legal{margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--text-2)} .demo-legal a{color:var(--link);text-decoration:underline;text-underline-offset:2px;border-radius:3px} .demo-estado:empty{display:none} .demo-estado{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--tint-amarillo);box-shadow:inset 3px 0 0 var(--amarillo);font-size:14.5px;line-height:1.45;color:var(--text)} .demo-estado a{font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:2px} .demo-ok{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 0 4px} .demo-ok:focus{outline:none} .demo-ok svg{box-sizing:content-box;width:24px;height:24px;padding:8px;border-radius:50%;background:var(--tint-azul);color:var(--link)} .demo-ok p{font-size:16px;line-height:1.5;color:var(--text-2)} .demo-ok b{color:var(--text);font-weight:600;overflow-wrap:anywhere} @media (max-width:1023px){ .cierre-in{grid-template-columns:1fr;gap:36px} .cierre-txt{max-width:none} .demo{max-width:560px} } @media (max-width:600px){ .demo{padding:20px 18px 18px} .demo-grid{grid-template-columns:1fr} .demo h3{font-size:25px} } /* ══ Guía (/guia/) — generada con guia.mjs desde docs/guia/*.md ══ */ .guia{padding:32px 0 96px} .migas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--text-2)} .migas a{color:var(--link);text-decoration:underline;text-underline-offset:2px;border-radius:3px;min-height:44px;display:inline-flex;align-items:center} .migas [aria-current]{color:var(--text-2)} .guia-cab{max-width:820px;margin:16px 0 36px;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .guia-cab h1{font:700 clamp(34px,2.4vw + 18px,54px)/1.02 var(--f-display);letter-spacing:.004em;text-wrap:balance} .guia-entrada{font-size:clamp(17px,.5vw + 15px,20px);line-height:1.5;color:var(--text-2);max-width:60ch;text-wrap:pretty} .guia-revisado{font:400 13px/1.4 var(--f-data);color:var(--text-3)} .guia-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start} .guia-texto{max-width:72ch;font-size:17px;line-height:1.7;color:var(--text)} .guia-texto h2{font:700 30px/1.1 var(--f-display);letter-spacing:.004em;margin:52px 0 14px;scroll-margin-top:calc(var(--topbar) + 24px);text-wrap:balance} .guia-texto h3{font:600 21px/1.2 var(--f-display);margin:28px 0 10px} .guia-texto p{margin:0 0 16px;text-wrap:pretty} .guia-texto ul,.guia-texto ol{margin:0 0 18px;padding-left:22px} .guia-texto ul{list-style:disc} .guia-texto ol{list-style:decimal} .guia-texto li{margin:7px 0;padding-left:4px} .guia-texto li::marker{color:var(--link);font-weight:600} .guia-texto a:not(.btn){color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere;border-radius:3px} .guia-texto strong{font-weight:600} .tabla{margin:8px 0 24px;overflow-x:auto;border:1px solid var(--line);border-radius:12px} .tabla table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5} .tabla th{text-align:left;font:600 13px/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)} .tabla td{padding:12px 14px;border-top:1px solid var(--line-2);vertical-align:top} .resumen{margin:0 0 8px;padding:22px 24px;border-radius:16px;background:var(--tint-azul)} .guia-texto .resumen h2{margin:0 0 10px;font:600 13px/1.1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--link)} .resumen ul{margin:0;padding-left:20px;list-style:disc} .resumen li{margin:6px 0;line-height:1.55} .norma{margin:22px 0 26px;padding:18px 20px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--azul)} .norma-rot{margin:0 0 8px!important;font:600 12.5px/1.1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--link)} .norma blockquote{margin:0;font-size:16.5px;line-height:1.6} .norma blockquote p{margin:0} .norma-ref{margin:10px 0 0!important;font-size:14px} .cta-guia{margin:30px 0;padding:20px 22px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px} .cta-guia p{margin:0!important;flex:1 1 280px;font-size:16px;line-height:1.5} .cta-guia .btn{text-decoration:none} .guia-faq{margin-top:52px} .guia-faq h2{margin-top:0} .guia-fuentes{margin-top:44px} .guia-fuentes ul{list-style:none;padding:0} .guia-fuentes li{padding:8px 0;border-top:1px solid var(--line-2);font-size:15px} .guia-aviso{margin-top:28px!important;font-size:14px;color:var(--text-3)} .guia-lateral{position:sticky;top:calc(var(--topbar) + 24px);display:flex;flex-direction:column;gap:20px} .lat-caja{padding:20px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--line)} .lat-caja h2{margin:0 0 12px;font:600 13px/1.1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)} .lat-indice ol{display:flex;flex-direction:column;border-left:2px solid var(--line)} .lat-indice a{display:block;padding:7px 0 7px 12px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--text-2);border-radius:0 4px 4px 0;transition:color 160ms ease,border-color 160ms ease} .lat-demo{background:var(--bar);border-color:var(--bar);color:#fff} .lat-demo b{display:block;font:700 22px/1.1 var(--f-display)} .lat-demo p{margin:8px 0 16px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.84)} .guia-sigue,.guia-bloque{margin-top:64px} .guia-bloque:first-of-type{margin-top:8px} .guia-sigue h2,.guia-bloque h2{margin-bottom:20px;font:700 30px/1.1 var(--f-display);letter-spacing:.004em} .tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .tarjeta{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);transition:border-color 160ms ease} .tarjeta b{font:700 22px/1.15 var(--f-display);letter-spacing:.004em} .tarjeta span:last-child{font-size:15px;line-height:1.5;color:var(--text-2)} .guia-normas{margin-top:64px;max-width:760px} .guia-normas ul{display:flex;flex-direction:column} .guia-normas li{padding:9px 0;border-top:1px solid var(--line-2);font-size:15px} .guia-normas a{color:var(--link);text-decoration:underline;text-underline-offset:2px} .guia-normas .guia-revisado{margin-top:10px} .guia-final{margin-top:72px;padding:36px 40px;border-radius:20px;background:var(--bar);color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px} .guia-final h2{font:700 clamp(26px,1.6vw + 16px,36px)/1.05 var(--f-display);letter-spacing:.004em} .guia-final p{margin-top:8px;max-width:56ch;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.84)} @media (hover:hover) and (pointer:fine){ .tarjeta:hover{border-color:var(--line-strong)} .lat-indice a:hover{color:var(--text);border-left-color:var(--line-strong)} } @media (max-width:1023px){ .guia-grid{grid-template-columns:1fr;gap:40px} .guia-lateral{position:static} .lat-indice{display:none} .tarjetas{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .guia{padding-top:20px} .guia-texto{font-size:16.5px} .guia-texto h2{font-size:26px;margin-top:44px} .tarjetas{grid-template-columns:1fr} .guia-final{padding:26px 22px} .guia-final .btn{width:100%} } /* ══ Páginas legales (aviso legal, privacidad, encargo) — generadas con legales.mjs ══ */ .legal{padding:56px 0 96px} .legal-cab{max-width:760px;margin-bottom:44px;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .legal-cab h1{font:700 clamp(34px,5vw,54px)/1 var(--f-display);letter-spacing:.004em;text-wrap:balance} .legal-volver{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-4px;font-weight:600;color:var(--link)} .legal-volver svg{width:18px;height:18px} .legal-meta{font:400 13.5px/1.4 var(--f-data);color:var(--text-2)} .legal-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start} .legal-indice{position:sticky;top:calc(var(--topbar) + 24px)} .legal-indice summary{cursor:pointer;list-style:none;font:600 13px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);padding:6px 0 12px} .legal-indice summary::-webkit-details-marker{display:none} .legal-indice ol{display:flex;flex-direction:column;border-left:2px solid var(--line)} .legal-indice a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--text-2);transition:color 160ms ease,border-color 160ms ease} @media (hover:hover) and (pointer:fine){ .legal-indice a:hover{color:var(--text);border-left-color:var(--line-strong)} } .legal-texto{max-width:72ch;font-size:16.5px;line-height:1.7;color:var(--text)} .legal-texto h2{font:600 26px/1.15 var(--f-display);letter-spacing:.006em;margin:52px 0 14px;scroll-margin-top:calc(var(--topbar) + 24px);text-wrap:balance} .legal-texto h2:first-child{margin-top:0} .legal-texto h3{font:600 20px/1.2 var(--f-display);letter-spacing:.008em;margin:30px 0 10px;scroll-margin-top:calc(var(--topbar) + 24px)} .legal-texto p{margin:0 0 14px;text-wrap:pretty} .legal-texto ul{margin:0 0 18px;padding-left:22px;list-style:disc} .legal-texto ul.sub{margin:-4px 0 18px 22px;list-style:circle} .legal-texto li{margin:7px 0;padding-left:4px} .legal-texto li::marker{color:var(--link)} .legal-texto strong{font-weight:600} .legal-texto a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere} .legal-texto .mono{font-size:.88em;padding:1px 6px;border-radius:5px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);overflow-wrap:anywhere} .hueco{display:inline-block;min-width:min(18em,58vw);height:1.2em;margin-left:6px;border-bottom:1.5px solid var(--line-strong);vertical-align:-.25em} .pie-titular{font-size:13.5px} @media (max-width:400px){ .pagina-legal .brand-txt{display:none} .pagina-legal .brand{min-width:44px;justify-content:center} } @media (max-width:860px){ .legal{padding:36px 0 72px} .legal-grid{grid-template-columns:1fr;gap:28px} .legal-indice{position:static;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)} .legal-indice summary{padding:0} .legal-indice details[open] summary{padding-bottom:10px} .legal-texto{font-size:16px} } @media print{ .topbar,.legal-indice,.legal-volver,.saltar,.pie-in{display:none!important} body{background:#fff;color:#000} .legal{padding:0} .legal-grid{display:block} .legal-texto{max-width:none;color:#000} .legal-texto a{color:#000;text-decoration:none} .hueco{border-color:#000} .pie,.pie-titular{background:#fff;color:#000;border:0} }