/* ═══════════════════════════════════════════════════════════════════════════ ZIMPLE · sistema de diseño de la web comercial (v2 · 12-sep-2026) Lo comparten zimple.uno (la casa) y las cuatro páginas de producto. FUENTE DE VERDAD: /srv/comercial_zimple/MARCA.md Si algo aquí contradice ese archivo, se corrige aquí, no allá. Arquitectura de marca (kit de septiembre 2026): · zimple.uno es la FÁBRICA. Enseña las cuatro plataformas como prueba. · El nombre de marca es UNA palabra —FARO, ÍTACA, EJE, PILAR— y la categoría va debajo como bajada. Nunca «FARO LEGAL». · Cada producto tiene página propia y NO lleva en su navegación a los otros: un abogado en /faro no debe enterarse de que existe un software de comida. · Zimple firma al pie con el endoso textual: UN SISTEMA ZIMPLE. Tipografía del kit: · Bodoni Moda 700 → SOLO el logotipo, nunca texto corrido · Source Serif 4 → titulares y lemas; la itálica 400 es el énfasis · IBM Plex Sans → cuerpo, interfaz, rótulos, endoso · IBM Plex Mono → cifras, radicados, códigos, horas Cada página de producto fija su acento en : --acc color gráfico (símbolo, bordes, rellenos) — NUNCA texto --acc-tinta el mismo color oscurecido hasta 4,5:1 → el único que va en texto --acc-luz el color aclarado, para leerse sobre tinta --acc-lavado superficie teñida, dentro del cupo de superficie de cada marca ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* neutros del kit */ --tinta:#141414; --tinta-2:#1C1C1B; --tinta-3:#262625; --papel:#F4F4F3; --papel-2:#EBEBE9; --blanco:#FFFFFF; --texto:#1A1A18; --texto-2:#3D3D39; --gris:#6A7078; --gris-luz:#8A8A8E; --linea:#E1E1DF; --linea-luz:#EDEDEB; --claro:#F4F4F3; --claro-2:#C6C4BC; --claro-3:#8A8A8E; --ok:#1F7A46; --alerta:#B4400C; /* el dorado de la casa (Zimple) */ --oro:#F0A81E; --oro-luz:#F5BC3E; --oro-tinta:#8A6420; --oro-lavado:#FAF3E4; /* acento por defecto = la casa */ --acc:var(--oro); --acc-tinta:var(--oro-tinta); --acc-luz:var(--oro-luz); --acc-lavado:var(--oro-lavado); --acc-borde:#E8D9B8; --logo:"Bodoni Moda",Didot,"Playfair Display",Georgia,serif; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --r:8px; --r-lg:12px; --sombra:0 14px 40px -24px rgba(20,20,20,.35); } /* Acentos de producto — tomados del kit y con la tinta de texto verificada a 4,5:1. El color gráfico de FARO da 2,03:1 sobre blanco: por eso existe --acc-tinta. */ body[data-producto="faro"]{ --acc:#F0A81E; --acc-tinta:#8A6420; --acc-luz:#F5BC3E; --acc-lavado:#FAF3E4; --acc-borde:#EADFC0 } body[data-producto="itaca"]{ --acc:#FFAE33; --acc-tinta:#9A6200; --acc-luz:#FFC670; --acc-lavado:#FFF6E6; --acc-borde:#F5E2C0; --acc-2:#1A7FDB; --acc-3:#1C4F9A } body[data-producto="eje"]{ --acc:#1B6FF0; --acc-tinta:#1359C9; --acc-luz:#5A96F5; --acc-lavado:#EBF2FE; --acc-borde:#C8DBF9; --acc-2:#FF6B1A } body[data-producto="pilar"]{ --acc:#2C5C8A; --acc-tinta:#24496C; --acc-luz:#7FA6CC; --acc-lavado:#EEF3F8; --acc-borde:#CFDEEC; --acc-2:#16233F } *{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important}} body{ margin:0; background:var(--papel); color:var(--texto); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } img,video,svg{max-width:100%} a{color:inherit} b,strong{font-weight:600} :focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:3px} .env{max-width:76rem; margin:0 auto; padding:0 1.5rem} @media (min-width:48rem){.env{padding:0 2rem}} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* ───────────────────────────── tipografía ───────────────────────────── */ h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.015em; text-wrap:balance; margin:0} h1{font-size:clamp(2.35rem,5.4vw,4rem); line-height:1.02; max-width:20ch} h1 em,h2 em{font-style:italic; font-weight:500; color:var(--acc-luz)} h2{font-size:clamp(1.85rem,3.6vw,2.7rem); line-height:1.08; max-width:22ch; margin-bottom:.9rem} h2 em{color:var(--acc-tinta)} h3{font-size:1.25rem; line-height:1.25} .rotulo{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-tinta); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; } .rotulo::before{content:""; width:1.6rem; height:1px; background:var(--acc)} .bajada{font-size:1.1rem; line-height:1.6; color:var(--texto-2); max-width:60ch; margin:0} .bajada b{color:var(--texto)} .nota{font-size:.82rem; color:var(--gris); line-height:1.55; max-width:64ch} .mono{font-family:var(--mono)} /* cita verificable: la landing cita al dossier como una fuente */ .cita{ display:inline-flex; align-items:center; gap:.3rem; vertical-align:middle; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-tinta); text-decoration:none; border:1px solid color-mix(in srgb,var(--acc) 40%,transparent); border-radius:99px; padding:.12rem .55rem; margin-left:.4rem; white-space:nowrap; transition:background .15s; } .cita:hover{background:var(--acc-lavado)} .cita::before{content:"✓"; font-weight:600} /* ───────────────────────────── barra ───────────────────────────── */ .barra{ position:sticky; top:0; z-index:60; background:rgba(20,20,20,.9); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid color-mix(in srgb,var(--acc) 30%,transparent); } .barra .env{display:flex; align-items:center; gap:1.4rem; height:66px} .marca{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--claro); min-width:0} .marca img{height:30px; width:auto; display:block} .marca .marca__iso{height:28px; width:28px} .marca b{font-family:var(--logo); font-weight:700; font-size:1.25rem; letter-spacing:.11em; white-space:nowrap; line-height:1} .marca small{display:block; font-family:var(--sans); font-weight:500; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--acc-luz); line-height:1; margin-top:.3rem} .marca em{display:block; font-family:var(--sans); font-weight:400; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--claro-3); font-style:normal; line-height:1; margin-top:.22rem} .menu{display:none; gap:1.5rem; margin-left:auto; list-style:none; padding:0; margin-top:0; margin-bottom:0} .menu a{color:#D8D1C4; text-decoration:none; font-size:.86rem; font-weight:500; transition:color .15s} .menu a:hover{color:var(--acc-luz)} .barra__acts{margin-left:auto; display:flex; align-items:center; gap:.5rem} .menu + .barra__acts{margin-left:0} .entrar,.bt--barra{ text-decoration:none; font-size:.84rem; font-weight:600; padding:.55rem 1rem; border-radius:7px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; } .entrar{color:var(--claro); border:1px solid rgba(245,241,232,.3); background:transparent} .entrar:hover{border-color:var(--acc-luz); color:var(--acc-luz)} .bt--barra{background:var(--acc); color:#fff} body[data-producto="faro"] .bt--barra,body:not([data-producto]) .bt--barra{color:var(--tinta)} .bt--barra:hover{filter:brightness(1.1)} .hamb{display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid rgba(245,241,232,.25); border-radius:7px; background:transparent; color:var(--claro); cursor:pointer} .hamb span{display:block; width:18px; height:2px; background:currentColor; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor} @media (min-width:62rem){.menu{display:flex} .hamb{display:none} .barra .env{height:70px}} .menu-movil{ display:none; position:fixed; inset:66px 0 auto 0; background:var(--tinta-2); z-index:59; border-bottom:1px solid rgba(255,255,255,.12); padding:1rem 1.5rem 1.4rem; } .menu-movil.is-open{display:block} .menu-movil a{display:block; color:var(--claro); text-decoration:none; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:1rem} .menu-movil a:last-child{border-bottom:0} /* ───────────────────────────── portada ───────────────────────────── */ .portada{background:var(--tinta); color:var(--claro); position:relative; overflow:hidden; isolation:isolate} .portada::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(900px 520px at 88% -10%, color-mix(in srgb,var(--acc) 28%,transparent), transparent 62%), radial-gradient(700px 480px at -10% 110%, color-mix(in srgb,var(--acc) 12%,transparent), transparent 60%); } .portada::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--acc),transparent)} .portada .env{padding-top:3.6rem; padding-bottom:3.6rem} @media (min-width:62rem){.portada .env{padding-top:5rem; padding-bottom:5rem}} .portada__grid{display:grid; gap:2.6rem; align-items:center} @media (min-width:62rem){.portada__grid{grid-template-columns:1.15fr .85fr; gap:3.5rem}} .sello{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-luz); border:1px solid color-mix(in srgb,var(--acc) 45%,transparent); padding:.42rem .9rem; border-radius:99px; margin-bottom:1.6rem; } .sello i{width:6px; height:6px; border-radius:50%; background:var(--acc-luz); display:block; box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)} .portada h1{margin-bottom:1.2rem; color:#fff} .tesis{font-size:clamp(1.05rem,1.7vw,1.25rem); line-height:1.6; color:var(--claro-2); max-width:54ch; margin:0 0 2.1rem} .tesis b{color:#fff} .acciones{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center} .bt{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; cursor:pointer; font-family:var(--sans); font-size:.95rem; font-weight:600; padding:.85rem 1.5rem; border-radius:8px; border:1px solid transparent; transition:transform .15s,background .15s,border-color .15s,color .15s,filter .15s; line-height:1.2; } .bt:active{transform:translateY(1px)} .bt svg{width:16px; height:16px; flex:none} .bt--prod{background:var(--acc); color:#fff} body[data-producto="faro"] .bt--prod,body:not([data-producto]) .bt--prod,.bt--oro{background:var(--acc); color:var(--tinta)} .bt--prod:hover,.bt--oro:hover{filter:brightness(1.1)} .bt--linea{border-color:rgba(245,241,232,.3); color:var(--claro)} .bt--linea:hover{border-color:var(--acc-luz); color:var(--acc-luz)} .bt--tinta{background:var(--tinta); color:var(--claro)} .bt--tinta:hover{background:var(--tinta-3)} .bt--borde{border-color:var(--linea); background:var(--blanco); color:var(--texto)} .bt--borde:hover{border-color:var(--acc)} .bt--wa{background:#1F8F4E; color:#fff} .bt--wa:hover{filter:brightness(1.08)} .bt--lg{font-size:1.02rem; padding:1rem 1.7rem} .bt--sm{font-size:.84rem; padding:.55rem 1rem} .bt--full{width:100%} /* cifras de la portada — medidas en producción, con su fecha */ .cifras{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:color-mix(in srgb,var(--acc) 26%,transparent); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); border-radius:var(--r); overflow:hidden; margin-top:3rem; } @media (min-width:48rem){.cifras{grid-template-columns:repeat(4,1fr)}} .cifra{background:var(--tinta-2); padding:1.15rem 1.25rem} .cifra b{display:block; font-family:var(--serif); font-size:1.9rem; font-weight:600; color:var(--acc-luz); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1} .cifra span{display:block; font-size:.78rem; color:var(--claro-3); margin-top:.4rem; line-height:1.35} .cifras__pie{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--claro-3); margin:.8rem 0 0} /* jornada: un día con el producto, en vez de una maqueta inventada */ .jornada{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:1.4rem 1.5rem; backdrop-filter:blur(4px); } .jornada__cab{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.1)} .jornada__cab b{font-family:var(--serif); font-weight:600; font-size:1.05rem; color:#fff} .jornada__cab span{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-luz)} .jornada ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem} .jornada li{display:grid; grid-template-columns:3.6rem 1fr; gap:.9rem; padding:.55rem 0; position:relative; align-items:start} .jornada li + li::before{content:""; position:absolute; left:4.35rem; top:-.3rem; width:1px; height:.6rem; background:rgba(255,255,255,.14)} .jornada time{font-family:var(--mono); font-size:.76rem; color:var(--acc-luz); padding-top:.15rem; font-variant-numeric:tabular-nums} .jornada p{margin:0; font-size:.9rem; line-height:1.45; color:var(--claro-2)} .jornada p b{color:#fff; font-weight:600} .jornada p i{font-style:normal; font-family:var(--mono); font-size:.72rem; color:var(--claro-3); display:block; margin-top:.15rem} .jornada__pie{margin:1rem 0 0; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; color:var(--claro-3); line-height:1.45} /* ───────────────────────────── secciones ───────────────────────────── */ section{padding:4.5rem 0} @media (min-width:62rem){section{padding:6rem 0}} .sec--tinta{background:var(--tinta); color:var(--claro)} .sec--tinta h2{color:#fff} .sec--tinta .rotulo{color:var(--acc-luz)} .sec--tinta .rotulo::before{background:var(--acc-luz)} .sec--tinta .bajada{color:var(--claro-2)} .sec--tinta .bajada b{color:#fff} .sec--tinta .nota{color:var(--claro-3)} .sec--lavado{background:var(--acc-lavado)} .sec--papel2{background:var(--papel-2)} .sec--blanco{background:var(--blanco)} .cabecera{max-width:62rem; margin-bottom:2.6rem} .cabecera--centro{margin-left:auto; margin-right:auto; text-align:center} .cabecera--centro .rotulo{justify-content:center} .cabecera--centro h2,.cabecera--centro .bajada{margin-left:auto; margin-right:auto} /* ───────────────────────────── problema (dolores) ───────────────────────────── */ .dolores{display:grid; gap:1rem; margin-top:2.4rem} @media (min-width:48rem){.dolores{grid-template-columns:repeat(3,1fr)}} .dolor{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.5rem 1.5rem 1.4rem; position:relative} .dolor::before{content:attr(data-n); position:absolute; top:1.1rem; right:1.2rem; font-family:var(--mono); font-size:.7rem; color:var(--gris-luz); letter-spacing:.1em} .dolor q{display:block; font-family:var(--serif); font-size:1.15rem; line-height:1.35; font-style:italic; color:var(--texto); margin:0 0 .8rem; quotes:"«" "»"} .dolor p{margin:0; font-size:.92rem; color:var(--texto-2); line-height:1.5} /* ───────────────────────────── bloques alternos (mecanismo + captura) ───────────────────────────── */ .bloque{display:grid; gap:2.2rem; align-items:center} @media (min-width:62rem){ .bloque{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:3.5rem} .bloque--inv .bloque__txt{order:2} .bloque--inv .bloque__vis{order:1} } .bloque + .bloque{margin-top:4.5rem} @media (min-width:62rem){.bloque + .bloque{margin-top:6rem}} .bloque h3{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.8rem; letter-spacing:-.02em} .bloque__txt p{color:var(--texto-2); margin:0 0 1rem; line-height:1.6} .sec--tinta .bloque__txt p{color:var(--claro-2)} .puntos{list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.75rem} .puntos li{display:grid; grid-template-columns:1.25rem 1fr; gap:.7rem; font-size:.95rem; line-height:1.5; color:var(--texto-2)} .puntos li b{display:block; color:var(--texto); font-weight:600} .puntos i{font-style:normal; color:var(--acc-tinta); font-weight:600; padding-top:.05rem} .sec--tinta .puntos li{color:var(--claro-2)} .sec--tinta .puntos li b{color:#fff} .sec--tinta .puntos i{color:var(--acc-luz)} /* la ventana: captura real en un marco con el dominio del producto */ .ventana{ background:var(--blanco); border:1px solid var(--linea); border-radius:12px; overflow:hidden; box-shadow:var(--sombra); } .sec--tinta .ventana{border-color:rgba(255,255,255,.14); box-shadow:0 30px 60px -30px rgba(0,0,0,.7)} .ventana__cab{display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; background:var(--papel-2); border-bottom:1px solid var(--linea)} .ventana__cab i{width:9px; height:9px; border-radius:50%; background:var(--linea); display:block} .ventana__cab i:nth-child(1){background:#E8A79C} .ventana__cab i:nth-child(2){background:#EBCB8B} .ventana__cab i:nth-child(3){background:#A9D3A0} .ventana__url{margin-left:.5rem; font-family:var(--mono); font-size:.68rem; color:var(--gris); background:var(--blanco); border:1px solid var(--linea); border-radius:5px; padding:.15rem .6rem; flex:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .ventana__img{display:block; width:100%; height:auto; aspect-ratio:16/9.4; object-fit:cover; object-position:top left; background:var(--papel-2); cursor:zoom-in} .ventana__pie{display:flex; align-items:center; gap:.5rem; padding:.55rem .9rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); border-top:1px solid var(--linea)} .ventana__pie::before{content:"●"; color:var(--acc); font-size:.55rem} .ventana__tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem} .ventana__tabs button{ font:inherit; font-size:.78rem; font-weight:500; cursor:pointer; color:var(--texto-2); background:var(--blanco); border:1px solid var(--linea); border-radius:99px; padding:.35rem .8rem; transition:all .15s; } .ventana__tabs button:hover{border-color:var(--acc)} .ventana__tabs button.is-active{background:var(--acc); border-color:var(--acc); color:#fff} body[data-producto="faro"] .ventana__tabs button.is-active{color:var(--tinta)} .sec--tinta .ventana__tabs button{background:transparent; color:var(--claro-2); border-color:rgba(255,255,255,.2)} .sec--tinta .ventana__tabs button.is-active{background:var(--acc); color:#fff; border-color:var(--acc)} /* lightbox */ .lightbox{position:fixed; inset:0; z-index:90; background:rgba(20,20,20,.92); display:none; align-items:center; justify-content:center; padding:1.5rem; cursor:zoom-out} .lightbox.is-open{display:flex} .lightbox img{max-width:min(96vw,1500px); max-height:92vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.6)} /* ───────────────────────────── capacidades ───────────────────────────── */ .caps{display:grid; gap:1.8rem 2.6rem; margin-top:2.4rem} @media (min-width:48rem){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:62rem){.caps--3{grid-template-columns:repeat(3,minmax(0,1fr))}} .cap{border-top:2px solid var(--acc); padding-top:1rem} .cap b{display:block; font-family:var(--serif); font-weight:600; font-size:1.12rem; margin-bottom:.35rem; letter-spacing:-.01em} .cap p{margin:0; font-size:.93rem; color:var(--texto-2); line-height:1.55} .sec--tinta .cap{border-top-color:var(--acc-luz)} .sec--tinta .cap b{color:#fff} .sec--tinta .cap p{color:var(--claro-2)} /* lo que se deja de pagar / lo que se tiene */ .cambio{display:grid; gap:1.2rem; margin-top:2.4rem} @media (min-width:52rem){.cambio{grid-template-columns:1fr 1fr}} .cambio-col{border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.5rem 1.6rem; background:var(--blanco)} .cambio-col--sale{background:transparent; border-style:dashed} .cambio-col--entra{border-color:color-mix(in srgb,var(--acc) 45%,var(--linea)); box-shadow:var(--sombra)} .cambio-col h3{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.1rem; font-weight:500; color:var(--gris)} .cambio-col--entra h3{color:var(--acc-tinta)} .cambio-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem} .cambio-col li{display:grid; grid-template-columns:1.1rem 1fr; gap:.6rem; font-size:.93rem; line-height:1.4} .cambio-col li b{display:block; font-weight:600} .cambio-col li span{display:block; font-size:.84rem; color:var(--gris)} .cambio-col--sale li{color:var(--gris)} .cambio-col--sale li b{font-weight:500; text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--gris) 55%,transparent)} .cambio-col--sale i{color:var(--gris); font-style:normal} .cambio-col--entra i{color:var(--acc-tinta); font-style:normal; font-weight:600} .cambio__total{margin-top:1.2rem; display:grid; gap:1rem} @media (min-width:52rem){.cambio__total{grid-template-columns:1fr 1fr}} .promesa{background:var(--acc-lavado); border-radius:var(--r-lg); padding:1.2rem 1.4rem; border:1px solid var(--acc-borde,var(--linea))} .promesa b{display:block; font-family:var(--serif); font-weight:600; font-size:1.05rem; margin-bottom:.3rem} .promesa p{margin:0; font-size:.92rem; color:var(--texto-2); line-height:1.5} /* ───────────────────────────── principios (la casa) ───────────────────────────── */ .principios{display:grid; gap:1rem; margin-top:2.4rem} @media (min-width:48rem){.principios{grid-template-columns:repeat(2,1fr)}} .principio{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.6rem 1.6rem 1.5rem; display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start} .principio__n{font-family:var(--mono); font-size:.72rem; color:var(--oro-tinta); letter-spacing:.1em; padding-top:.35rem} .principio b{display:block; font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.2; margin-bottom:.5rem; letter-spacing:-.01em} .principio p{margin:0; font-size:.93rem; color:var(--texto-2); line-height:1.55} .principio p + p{margin-top:.5rem} .principio .prueba{display:block; margin-top:.8rem; font-family:var(--mono); font-size:.72rem; color:var(--gris); line-height:1.5} .principio .prueba b{display:inline; font:inherit; color:var(--texto-2)} /* ───────────────────────────── catálogo (hub) ───────────────────────────── */ .catalogo{display:grid; gap:1.2rem; margin-top:2.6rem} @media (min-width:52rem){.catalogo{grid-template-columns:repeat(2,minmax(0,1fr))}} .prod{ position:relative; display:flex; flex-direction:column; gap:1rem; text-decoration:none; color:inherit; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.8rem 1.8rem 1.6rem; transition:border-color .2s,box-shadow .2s,transform .2s; overflow:hidden; } .prod::before{content:""; position:absolute; left:0; top:0; right:0; height:4px; background:var(--pc)} .prod:hover{border-color:var(--pc); transform:translateY(-3px); box-shadow:var(--sombra)} .prod__cab{display:flex; align-items:center; gap:.9rem} .prod__ico{width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--pc) 9%,var(--blanco)); flex:none} .prod__ico img{width:32px; height:32px; display:block} .prod__nom{font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.04em; line-height:1.1} .prod__para{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-top:.3rem} .prod__desc{margin:0; font-size:.95rem; color:var(--texto-2); line-height:1.55} .prod__datos{display:flex; gap:1.3rem; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem; color:var(--gris); margin-top:auto; padding-top:.6rem; border-top:1px solid var(--linea-luz)} .prod__datos b{color:var(--texto); font-weight:500; font-variant-numeric:tabular-nums} .prod__ir{position:absolute; right:1.6rem; top:1.9rem; font-size:.84rem; font-weight:600; color:var(--pc-tinta,var(--pc)); display:inline-flex; gap:.35rem; align-items:center; transition:gap .2s} .prod:hover .prod__ir{gap:.6rem} /* ───────────────────────────── planes ───────────────────────────── */ .plan-toggle{display:inline-flex; gap:.25rem; padding:.25rem; border-radius:99px; background:var(--blanco); border:1px solid var(--linea); margin-top:1.4rem} .plan-toggle button{font:inherit; font-size:.86rem; font-weight:500; cursor:pointer; border:0; background:transparent; color:var(--gris); padding:.5rem 1.05rem; border-radius:99px; display:inline-flex; align-items:center; gap:.5rem; transition:all .15s} .plan-toggle button.is-active{background:var(--tinta); color:var(--claro)} .plan-toggle .save{font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--acc); padding:.16rem .45rem; border-radius:4px} body[data-producto="faro"] .plan-toggle .save{color:var(--tinta)} .planes-grid{display:grid; gap:1.2rem; margin-top:2.2rem; align-items:stretch} @media (min-width:52rem){.planes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:66rem){.planes-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .plan{ position:relative; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.8rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.9rem; } .plan--destacado{border-color:var(--acc); box-shadow:0 22px 50px -30px color-mix(in srgb,var(--acc) 60%,transparent)} .plan__cinta{ position:absolute; top:0; left:1.4rem; transform:translateY(-50%); font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--acc); padding:.3rem .7rem; border-radius:5px; } body[data-producto="faro"] .plan__cinta{color:var(--tinta)} .plan__nom{font-family:var(--serif); font-weight:600; font-size:1.45rem; margin:0; letter-spacing:-.01em} .plan__para{margin:0; font-size:.9rem; color:var(--gris); line-height:1.5; min-height:2.9em} .plan__precio{display:flex; align-items:baseline; gap:.35rem; margin:.2rem 0 0; flex-wrap:wrap} .plan__precio b{font-family:var(--serif); font-size:2.1rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1} .plan__precio > span{font-size:.8rem; color:var(--gris)} .plan__nota-anual{margin:-.3rem 0 0; font-family:var(--mono); font-size:.68rem; color:var(--gris); letter-spacing:.02em} .plan__cupos{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:.4rem 0 0} .plan__cupos div{background:var(--papel); border:1px solid var(--linea-luz); border-radius:8px; padding:.55rem .6rem} .plan__cupos b{display:block; font-family:var(--mono); font-size:.95rem; font-weight:500; font-variant-numeric:tabular-nums} .plan__cupos span{display:block; font-size:.66rem; color:var(--gris); line-height:1.25; margin-top:.1rem} .plan__gancho{margin:0; font-size:.88rem; color:var(--texto-2); line-height:1.5; padding:.7rem .85rem; background:var(--acc-lavado); border-radius:8px; border-left:3px solid var(--acc)} .plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.42rem} .plan li{display:grid; grid-template-columns:1rem 1fr; gap:.55rem; font-size:.89rem; color:var(--texto-2); line-height:1.45} .plan li i{color:var(--acc-tinta); font-style:normal; font-weight:600} .plan li.no{color:var(--gris-luz)} .plan li.no i{color:var(--linea)} .plan li.grupo{grid-template-columns:1fr; margin-top:.6rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris)} .plan li.grupo:first-child{margin-top:0} .plan li small{display:block; font-size:.78rem; color:var(--gris); line-height:1.4} .plan .bt{margin-top:auto} .plan__pie{margin:0; font-size:.76rem; color:var(--gris); text-align:center; line-height:1.45} /* tabla comparativa */ .tw{overflow-x:auto; margin-top:2.4rem; border:1px solid var(--linea); border-radius:var(--r-lg); background:var(--blanco)} .tabla{width:100%; border-collapse:collapse; font-size:.9rem; min-width:40rem} .tabla th,.tabla td{padding:.75rem 1rem; text-align:center; border-bottom:1px solid var(--linea-luz); vertical-align:middle} .tabla th{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); font-weight:500; background:var(--papel)} .tabla th:first-child,.tabla td:first-child{text-align:left; font-weight:500; color:var(--texto)} .tabla tr:last-child td{border-bottom:0} .tabla td.si{color:var(--acc-tinta); font-weight:600} .tabla td.no{color:var(--gris-luz)} .tabla .grupo td{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); background:var(--papel); padding:.5rem 1rem; text-align:left} .tabla th.destacado{color:var(--acc-tinta); background:var(--acc-lavado)} .tabla td.destacado{background:color-mix(in srgb,var(--acc-lavado) 50%,var(--blanco))} /* módulos sueltos */ .modulos{display:grid; gap:.7rem; margin-top:1.6rem} @media (min-width:40rem){.modulos{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:62rem){.modulos{grid-template-columns:repeat(3,minmax(0,1fr))}} .modulo{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:.9rem 1.1rem} .modulo span{font-size:.9rem; line-height:1.35} .modulo span em{display:block; font-style:normal; font-size:.78rem; color:var(--gris)} .modulo b{font-family:var(--mono); font-weight:500; font-size:.95rem; white-space:nowrap; font-variant-numeric:tabular-nums} .modulo b small{font-size:.68rem; color:var(--gris)} /* calculadora de plan */ .calc{background:var(--tinta); color:var(--claro); border-radius:var(--r-lg); padding:1.8rem; margin-top:2.6rem; display:grid; gap:1.6rem} @media (min-width:62rem){.calc{grid-template-columns:1.1fr .9fr; gap:2.5rem; padding:2.2rem 2.4rem}} .calc h3{color:#fff; font-size:1.5rem; margin-bottom:.4rem} .calc p{color:var(--claro-2); font-size:.92rem; margin:0} .calc__ctrl{margin-top:1.3rem; display:flex; flex-direction:column; gap:1.2rem} .calc label{display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; color:var(--claro-2); gap:1rem} .calc label output{font-family:var(--mono); color:#fff; font-size:1rem; font-variant-numeric:tabular-nums} .calc input[type=range]{width:100%; accent-color:var(--acc-luz); margin-top:.5rem; cursor:pointer} .calc__chk{display:flex; flex-wrap:wrap; gap:.5rem .9rem} .calc__chk label{display:inline-flex; gap:.45rem; align-items:center; font-size:.85rem; cursor:pointer; justify-content:flex-start} .calc__chk input{accent-color:var(--acc-luz)} .calc__res{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem} .calc__res .rotulo{color:var(--acc-luz); margin-bottom:.2rem} .calc__res .rotulo::before{background:var(--acc-luz)} .calc__plan{font-family:var(--serif); font-size:1.7rem; color:#fff; font-weight:600; line-height:1.1} .calc__total{font-family:var(--serif); font-size:2.4rem; color:var(--acc-luz); font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums} .calc__total small{font-family:var(--mono); font-size:.72rem; color:var(--claro-3); letter-spacing:.08em; text-transform:uppercase; margin-left:.4rem} .calc__desglose{list-style:none; margin:.4rem 0 0; padding:0; font-size:.84rem; color:var(--claro-2); display:flex; flex-direction:column; gap:.3rem} .calc__desglose li{display:flex; justify-content:space-between; gap:1rem; font-variant-numeric:tabular-nums} .calc__desglose li span:last-child{font-family:var(--mono); color:#fff} .calc__nota{font-size:.76rem; color:var(--claro-3); line-height:1.45; margin-top:.4rem} .calc .bt{margin-top:.6rem; align-self:flex-start} /* implementación y condiciones */ .condiciones{display:grid; gap:1rem; margin-top:2.4rem} @media (min-width:48rem){.condiciones{grid-template-columns:repeat(2,1fr)}} @media (min-width:66rem){.condiciones{grid-template-columns:repeat(4,1fr)}} .condicion{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.3rem 1.3rem 1.2rem} .condicion b{display:block; font-family:var(--serif); font-weight:600; font-size:1.08rem; margin-bottom:.35rem} .condicion p{margin:0; font-size:.86rem; color:var(--texto-2); line-height:1.5} .condicion .precio{font-family:var(--mono); font-size:.92rem; color:var(--acc-tinta); display:block; margin-top:.5rem} .implem{margin-top:2.4rem; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.6rem 1.7rem; display:grid; gap:1.4rem} @media (min-width:62rem){.implem{grid-template-columns:1fr 1fr; gap:2.4rem}} .implem h3{font-size:1.4rem; margin-bottom:.5rem} .implem p{margin:0 0 .6rem; font-size:.93rem; color:var(--texto-2); line-height:1.55} .implem ol{margin:.6rem 0 0; padding-left:1.2rem; font-size:.9rem; color:var(--texto-2); display:flex; flex-direction:column; gap:.4rem} .implem__tabla{width:100%; border-collapse:collapse; font-size:.9rem} .implem__tabla td{padding:.6rem 0; border-bottom:1px solid var(--linea-luz); vertical-align:top} .implem__tabla td:last-child{text-align:right; font-family:var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums} .implem__tabla td small{display:block; font-size:.78rem; color:var(--gris)} .implem__tabla tr:last-child td{border-bottom:0} /* ───────────────────────────── franqueza ───────────────────────────── */ .franqueza{margin-top:2.4rem; border:1px dashed var(--linea); border-radius:var(--r-lg); padding:1.5rem 1.6rem; background:transparent} .franqueza h3{font-size:1.2rem; margin-bottom:.6rem} .franqueza p{margin:0 0 .8rem; font-size:.9rem; color:var(--texto-2)} .franqueza ul{margin:0; padding:0; list-style:none; display:grid; gap:.5rem} @media (min-width:48rem){.franqueza ul{grid-template-columns:1fr 1fr}} .franqueza li{font-size:.88rem; color:var(--texto-2); line-height:1.5; padding-left:1.1rem; position:relative} .franqueza li::before{content:"—"; position:absolute; left:0; color:var(--gris-luz)} .sec--tinta .franqueza{border-color:rgba(255,255,255,.18)} .sec--tinta .franqueza h3{color:#fff} .sec--tinta .franqueza p,.sec--tinta .franqueza li{color:var(--claro-2)} /* ───────────────────────────── preguntas ───────────────────────────── */ .faq{margin-top:2.2rem; display:grid; gap:.6rem; max-width:52rem} .faq details{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:0 1.2rem} .faq summary{cursor:pointer; list-style:none; padding:1rem 0; font-family:var(--serif); font-weight:600; font-size:1.05rem; display:flex; justify-content:space-between; gap:1rem; align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-family:var(--mono); color:var(--acc-tinta); font-size:1.1rem; flex:none} .faq details[open] summary::after{content:"−"} .faq details p{margin:0 0 1rem; font-size:.92rem; color:var(--texto-2); line-height:1.6} /* ───────────────────────────── cierre / contacto ───────────────────────────── */ .cierre{background:var(--tinta); color:var(--claro); position:relative; overflow:hidden} .cierre::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(800px 400px at 50% 120%, color-mix(in srgb,var(--acc) 22%,transparent), transparent 65%)} .cierre .env{position:relative} .cierre h2{color:#fff} .cierre .rotulo{color:var(--acc-luz)} .cierre .rotulo::before{background:var(--acc-luz)} .cierre .bajada{color:var(--claro-2)} .cierre__grid{display:grid; gap:2.4rem; align-items:start} @media (min-width:62rem){.cierre__grid{grid-template-columns:1fr 1fr; gap:4rem}} .contacto-datos{list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.9rem} .contacto-datos li{display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center} .contacto-datos svg{width:20px; height:20px; color:var(--acc-luz)} .contacto-datos a{color:#fff; text-decoration:none; font-weight:500} .contacto-datos a:hover{color:var(--acc-luz)} .contacto-datos small{display:block; font-size:.78rem; color:var(--claro-3)} .form{background:var(--blanco); color:var(--texto); border-radius:var(--r-lg); padding:1.7rem; box-shadow:0 30px 70px -30px rgba(0,0,0,.6); border-top:4px solid var(--acc)} .form h3{font-size:1.3rem; margin-bottom:.3rem} .form > p{margin:0 0 1.2rem; font-size:.88rem; color:var(--gris)} .form label{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin:.9rem 0 .35rem} .form input,.form select,.form textarea{width:100%; font:inherit; font-size:.95rem; padding:.7rem .85rem; border:1px solid var(--linea); border-radius:8px; background:var(--papel); color:var(--texto)} .form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent); background:var(--blanco)} .form textarea{min-height:5rem; resize:vertical} .form .bt{width:100%; margin-top:1.2rem} .form__legal{font-size:.74rem; color:var(--gris); margin:.8rem 0 0; line-height:1.45} .form__legal a{color:var(--acc-tinta)} .form__ok{display:none; margin-top:1rem; padding:.9rem 1rem; border-radius:8px; background:#EAF6EE; color:#1E5E36; font-size:.9rem; border:1px solid #C6E6D2} .form__ok.is-on{display:block} .form__fila{display:grid; gap:0 .9rem} @media (min-width:40rem){.form__fila{grid-template-columns:1fr 1fr}} /* ───────────────────────────── endoso / pie ───────────────────────────── */ .endoso{background:var(--tinta); color:var(--claro-3); padding:2.4rem 0; font-size:.85rem; border-top:1px solid rgba(255,255,255,.08)} .endoso .env{display:flex; gap:1.5rem 2.5rem; flex-wrap:wrap; align-items:center} .endoso-firma{display:flex; align-items:center; gap:1.1rem} .endoso-firma img{height:30px; width:auto; opacity:.8} .endoso-firma span{color:var(--claro-2); line-height:1.5; font-size:.84rem} /* El endoso es TEXTUAL y siempre igual. Lo dice el kit: «UN SISTEMA ZIMPLE». */ .endoso-firma b{display:block; font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oro-luz); margin-bottom:.3rem} .endoso a{color:var(--claro-2); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--oro) 45%,transparent)} .endoso a:hover{color:var(--oro-luz)} .endoso-links{margin-left:auto; display:flex; gap:1.2rem; flex-wrap:wrap} .pie{background:var(--tinta); color:var(--claro-3); padding:3.2rem 0 2.4rem; font-size:.86rem; border-top:1px solid rgba(255,255,255,.08)} .pie__grid{display:grid; gap:2rem} @media (min-width:52rem){.pie__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}} .pie img{height:32px; width:auto; opacity:.9; margin-bottom:.9rem} .pie p{margin:0; line-height:1.55; max-width:36ch} .pie h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-luz); margin:0 0 .9rem; font-weight:500} .pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem} .pie a{color:var(--claro-2); text-decoration:none} .pie a:hover{color:var(--oro-luz)} .pie__legal{margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:1rem 2rem; flex-wrap:wrap; font-size:.78rem; color:var(--claro-3)} .pie__legal a{color:var(--claro-3)} /* ───────────────────────────── acceso (login sin salir de la página) ───────────────────────────── */ .zlog{ position:fixed; z-index:80; top:78px; right:max(1rem,calc((100vw - 76rem)/2 + 2rem)); width:min(380px,calc(100vw - 2rem)); background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,.45); padding:1.3rem 1.4rem 1.2rem; display:none; } .zlog.is-open{display:block; animation:zlog-in .18s ease-out} @keyframes zlog-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}} @media (max-width:48rem){ .zlog{top:50%; left:50%; right:auto; transform:translate(-50%,-50%); width:min(400px,calc(100vw - 2rem))} .zlog.is-open{animation:none} body.zlog-abierto{overflow:hidden} body.zlog-abierto::after{content:""; position:fixed; inset:0; background:rgba(20,20,20,.55); z-index:79} } .zlog__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem} .zlog__tit{font-family:var(--serif); font-size:1.25rem; font-weight:600; margin:0} .zlog__x{border:0; background:var(--papel-2); width:32px; height:32px; border-radius:8px; font-size:1.2rem; cursor:pointer; color:var(--gris)} .zlog__lab{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin:.8rem 0 .3rem} .zlog__in{width:100%; font:inherit; font-size:.95rem; padding:.65rem .8rem; border:1px solid var(--linea); border-radius:8px; background:var(--papel)} .zlog__in:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)} .zlog__hint{font-size:.76rem; color:var(--gris); margin:.35rem 0 0; line-height:1.4} .zlog__hint code{font-family:var(--mono); font-size:.72rem; background:var(--papel-2); padding:.05rem .3rem; border-radius:4px} .zlog__pw{position:relative} .zlog__eye{position:absolute; right:.5rem; top:50%; transform:translateY(-50%); border:0; background:transparent; font:inherit; font-size:.74rem; color:var(--acc-tinta); cursor:pointer; font-weight:600} .zlog__rem{display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--texto-2); margin:.8rem 0 0} .zlog__err{color:#B4400C; font-size:.82rem; margin:.7rem 0 0} .zlog__go{width:100%; margin-top:.9rem} .zlog__pie{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-luz); text-align:center; margin:.8rem 0 0} /* ───────────────────────────── aviso de privacidad ───────────────────────────── */ .zt-consent{ position:fixed; left:50%; bottom:1rem; transform:translate(-50%,120%); z-index:70; width:min(720px,calc(100vw - 2rem)); background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,.4); padding:1rem 1.2rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; transition:transform .3s ease; font-size:.86rem; line-height:1.45; } .zt-consent.is-in{transform:translate(-50%,0)} .zt-consent__txt{flex:1 1 20rem} .zt-consent__txt a{color:var(--acc-tinta)} .zt-consent__acts{display:flex; gap:.5rem; margin-left:auto} .zt-consent__acts button{font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; border-radius:7px; padding:.5rem .9rem; border:1px solid var(--linea); background:var(--blanco)} .zt-consent__ok{background:var(--tinta)!important; color:var(--claro)!important; border-color:var(--tinta)!important} /* ───────────────────────────── revelado al hacer scroll ───────────────────────────── */ [data-rev]{opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease} [data-rev].is-vis{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){[data-rev]{opacity:1; transform:none}} /* ───────────────────────────── utilidades ───────────────────────────── */ .solo-escritorio{display:none} @media (min-width:62rem){.solo-escritorio{display:initial}} .mt-1{margin-top:1rem} .mt-2{margin-top:2rem} .mt-3{margin-top:3rem} .centro{text-align:center} .pill{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius:99px; background:var(--acc-lavado); color:var(--acc-tinta); border:1px solid var(--acc-borde,var(--linea))} .video-marco{position:relative; border-radius:12px; overflow:hidden; background:#000; box-shadow:var(--sombra); aspect-ratio:16/9} .video-marco video{width:100%; height:100%; display:block; object-fit:cover} .video-marco__tag{position:absolute; left:.9rem; top:.8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(20,20,20,.7); padding:.3rem .6rem; border-radius:5px; display:flex; align-items:center; gap:.4rem} .video-marco__tag i{width:7px; height:7px; border-radius:50%; background:#E0413E; animation:pulso 1.4s infinite} @keyframes pulso{0%,100%{opacity:1} 50%{opacity:.35}} .video-marco__hint{position:absolute; right:.9rem; bottom:.8rem; font-size:.72rem; color:#fff; background:rgba(20,20,20,.7); padding:.3rem .6rem; border-radius:5px} /* ═══════════════════════════════════════════════════════════════════════════ TEXTO SOBRE EL COLOR DE MARCA (12-sep-2026, kit de septiembre) El dorado de FARO (#F0A81E, 2,03:1 con blanco) y el ámbar de ÍTACA (#FFAE33, 1,85:1) no admiten texto blanco encima: sobre ellos el texto va en tinta, donde sube a 9,06 y 9,96. EJE (#1B6FF0, 4,59) y PILAR (#2C5C8A, 6,99) sí admiten blanco. La casa usa el dorado, así que entra en la misma regla. Consolida en un solo sitio lo que antes estaba repartido por componente y lo que /turismo tuvo que resolver en un