/* ═══════════════════════════════════════════════════════════════════ MATIICORE — sistema base Todos los valores de acá salieron de medir, no de elegir a ojo: las fuentes con fontTools, los contrastes calculados, y las curvas y duraciones extraídas del CSS de Trionn, by-kin, 2xA y Resend. Detalle → vault: "DISEÑO — dirección de arte matiicore v3 (9-ago)" ═══════════════════════════════════════════════════════════════════ */ /* ── Fuentes ──────────────────────────────────────────────────────── Autohospedadas. Antes eran 5 familias desde Google Fonts (Kanit, Anton, Bricolage, DM Serif e Inter, esta última contra la regla del proyecto). Ahora son 2 familias en 100 KB, sin pedirle nada a un tercero antes de pintar texto. Archivo es la MISMA superfamilia que Archivo Black (Omnibus-Type), así que el cuerpo y el impacto no pelean. Squada One no puede hacer de cuerpo: tiene un solo peso y altura de x de 0.498 em — medido. */ @font-face{ font-family:'Squada One'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/squada-one.woff2') format('woff2'); } @font-face{ font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/archivo-black.woff2') format('woff2'); } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/archivo-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/archivo-var-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ── Color ────────────────────────────────────────────────────────── Contrastes calculados: lima sobre negro 17.87:1 AAA ← ahí vive lima sobre blanco 1.18:1 invisible cian sobre negro 10.06:1 AAA magenta sobre negro 3.31:1 ❌ REPRUEBA AA → nunca en texto Y la regla que resuelve por qué el lima y el cian vibraban: en OKLCH el lima tiene croma 0.229 y el cian 0.086. El lima es 2,7× más saturado, así que al lado y del mismo tamaño el cian desaparece. La salida no es elegir uno: · el LIMA es el color de la INTERFAZ (botones, foco, líneas, marcas) · el CIAN y el MAGENTA son el color de las SECCIONES CON IMAGEN Nunca ocupan el mismo tipo de elemento, así que no compiten. */ :root{ /* superficie — ninguno de los estudios premiados usa #000 de fondo: en OLED el negro puro apaga el píxel y produce smearing al scrollear */ --negro: #0A0A0A; --negro-elev: #141414; --blanco: #FFFFFF; --texto: #E8E8E8; --texto-2: #A4A4A4; /* 7.75:1 — pasa AA */ --texto-3: #808080; /* 4.79:1 — mínimo usable */ /* marca */ --lima: #CCFF00; --lima-hover: #BFEC37; --lima-press: #A2C928; --lima-dim: #637D0F; /* bordes y líneas */ --lima-ghost: #273303; /* fondo de etiqueta */ /* 🔴 LIMA COMO TINTA vs LIMA COMO FONDO. Son dos usos y necesitan dos variables, porque en tema claro se comportan al revés: · de FONDO (`--lima`, botón lima con letras negras) el lima puro funciona en los dos temas y es el color de la marca. No se toca. · de TINTA (texto, trazo, relleno de un icono) sobre blanco da **1,18:1 — literalmente invisible**, y el proyecto ya tenía la regla escrita: "lima nunca sobre fondo claro". Antes solo existía `--lima` y 23 reglas la usaban como tinta. En tema oscuro se ven bien, así que el problema no aparecía hasta que alguien tocaba el botón del sol — y ahí desaparecían de golpe el acento de los titulares, las viñetas, los números y los enlaces dentro del texto. 📌 Arreglarlas una por una era garantizar que la número 24 volviera a nacer rota. */ --lima-tinta: var(--lima); --cian: #75C5DE; --magenta: #B600A8; /* superficie y gráfico. NUNCA texto */ --linea: rgba(255,255,255,.08); /* el borde de 1px que separa caro de barato */ --linea-2: rgba(255,255,255,.14); /* 🔴 EL COLOR DEL FONDO, EN CANAL SUELTO, PARA LOS VELOS. Un velo que oscurece "el fondo" tiene que estar hecho DEL fondo. Si se escribe `rgba(10,10,10,.66)` a mano queda negro para siempre, y en tema claro pinta una franja gris sucia sobre la página blanca — que es exactamente lo que pasó en las cuatro páginas con `.hero-serv`. Se usa así: rgba(var(--fondo-rgb), .66) ⚠️ NO aplica a los velos que van sobre una FOTO (`.hero-foto`, `.dolor-foto`, `.paso3 h3`): ahí el negro es correcto en los dos temas, porque lo que se oscurece es la imagen para que se lea el texto blanco. */ --fondo-rgb: 10,10,10; /* Relleno de las cajas del diagrama. Van aparte porque dentro de un SVG un fondo semitransparente deja ver las líneas que pasan por detrás, y el diagrama se ensucia. Estos dos son opacos a propósito. */ --fl-caja: #101010; --fl-agente: #151B05; } /* Gama ancha: el lima gana 18% de croma real en pantallas que la soportan (oklch 0.229 → 0.270). En un Android viejo cae al hex y nadie nota nada. */ @supports (color: color(display-p3 1 1 1)){ :root{ --lima: color(display-p3 0.8 1 0); } } /* ── Tipografía ───────────────────────────────────────────────────── Escala BIMODAL, no modular: display → h1 salta 1.74×, pero h1 → h2 → h3 son pasos de 1.27×. La jerarquía se lee de un vistazo sin inflar el cuerpo. Calculada para el rango 390px → 1512px. */ :root{ --fs-display: clamp(3.25rem, 1.512rem + 7.130vw, 8.25rem); /* 52 → 132 px */ --fs-h1: clamp(2.375rem, 1.549rem + 3.387vw, 4.75rem); /* 38 → 76 px */ --fs-h2: clamp(1.875rem, 1.354rem + 2.139vw, 3.375rem); /* 30 → 54 px */ --fs-h3: clamp(1.438rem, 1.199rem + 0.980vw, 2.125rem); /* 23 → 34 px */ --fs-lead: clamp(1.125rem, 1.038rem + 0.357vw, 1.375rem); /* 18 → 22 px */ --fs-body: clamp(1rem, 0.978rem + 0.089vw, 1.062rem); /* 16 → 17 px */ --fs-small: 0.875rem; --fs-label: clamp(0.6875rem,0.666rem + 0.089vw, 0.75rem); /* 11 → 12 px */ } /* ── Espaciado ────────────────────────────────────────────────────── Base 8, con los pasos grandes creciendo más rápido. */ :root{ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;--s-11:160px;--s-12:192px; } /* ── Grilla ───────────────────────────────────────────────────────── 12 → 8 → 4 columnas con gap FIJO, como Linear. Que el gap no cambie es lo que hace que el sitio se vea del mismo estudio en celular y en escritorio. 1512px es el ancho de un MacBook 16", que es al que se diseña. */ :root{ --max: 1512px; --max-texto: 68ch; /* más ancho y el ojo pierde la línea al volver */ --gutter: clamp(20px, 5vw, 48px); --cols: 12; --gap: 32px; } @media (max-width:768px){ :root{ --cols:8; } } @media (max-width:640px){ :root{ --cols:4; } } /* ── Radios ───────────────────────────────────────────────────────── DOS en todo el sitio y punto. Radios mezclados (8 acá, 12 allá, 20 en el botón) es de lo que más rápido delata un sitio barato. */ :root{ --r-1:2px; --r-2:6px; } /* ── Movimiento ───────────────────────────────────────────────────── Cinco duraciones y cuatro curvas para TODO el sitio. La prueba: si al listar las duraciones del CSS salen 15 valores distintos, se ve barato aunque cada uno esté bien elegido. by-kin usa 1.2s veintiocho veces; Resend usa una sola curva cuarenta y nueve veces. */ :root{ --t-micro: 150ms; --t-corta: 250ms; --t-media: 400ms; --t-larga: 800ms; --t-escena:1200ms; --e-salida: cubic-bezier(.22, 1, .36, 1); /* easeOutQuint — Trionn */ --e-suave: cubic-bezier(.165,.84,.44,1); /* easeOutQuart — by-kin */ --e-ui: cubic-bezier(.4, 0, .2, 1); /* estándar — Resend */ --e-ida-vuelta: cubic-bezier(.76,0,.24,1); /* easeInOutQuart */ } /* ── Sombra ───────────────────────────────────────────────────────── Cinco capas, ninguna sobre 0.10 de alfa. Una sombra real tiene contacto duro Y penumbra amplia, y una sola capa no puede hacer las dos cosas. La versión barata es 0 4px 8px rgba(0,0,0,.5). */ :root{ --sombra: 2px 4px 20px rgba(0,0,0,.10), 6px 18px 42px rgba(0,0,0,.10), 24px 72px 76px rgba(0,0,0,.09), 55px 163px 103px rgba(0,0,0,.05), 98px 289px 122px rgba(0,0,0,.10); } /* ═══ Reinicio ═══════════════════════════════════════════════════════ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100%; scrollbar-color: var(--lima-dim) var(--negro); } body{ background:var(--negro); color:var(--texto); position:relative; font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; font-size:var(--fs-body); line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,video,svg{ display:block; max-width:100%; height:auto } button,input,select,textarea{ font:inherit; color:inherit } /* ── Tipografía aplicada ──────────────────────────────────────────── El line-height de acá NO es decorativo. Medido con fontTools: la tilde sube 0.153 em por encima de la mayúscula en Squada One y 0.197 em en Archivo Black. Con line-height .9 las líneas SE TOCAN — ese era el bug de "las tildes flotan" que estaba anotado sin causa. */ .display{ font-family:'Squada One',sans-serif; text-transform:uppercase; font-size:var(--fs-display); line-height:1.02; letter-spacing:clamp(-0.005em, -0.05vw, -0.02em); } h1{ font-family:'Squada One',sans-serif; text-transform:uppercase; font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.01em } h2{ font-family:'Squada One',sans-serif; text-transform:uppercase; font-size:var(--fs-h2); line-height:1.05; letter-spacing:-.01em } h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.01em } p{ max-width:var(--max-texto) } .lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--texto) } /* Impacto dentro de un titular. El 94% no es capricho: al mismo font-size Archivo Black se ve 6,3% más alta que Squada One (0.647 vs 0.688 em de altura de mayúscula, medido). Sin esto la palabra destacada sobresale. */ .impacto{ font-family:'Archivo Black',sans-serif; font-size:94%; color:var(--lima-tinta) } /* En texto chico en caja alta el tracking va POSITIVO. Squada One es condensada: sin este +0.12em una etiqueta de 11px se lee como mancha. */ .label{ font-family:'Archivo',sans-serif; font-weight:500; text-transform:uppercase; font-size:var(--fs-label); letter-spacing:.12em; line-height:1; color:var(--texto-3); } /* Recorta el medio-interlineado y alinea por la altura de mayúscula real. Mejora progresiva: donde no está, quedan unos píxeles de aire de más. */ @supports (text-box: trim-both cap alphabetic){ h1,h2,.display{ text-box: trim-both cap alphabetic } } /* Sin esto $150.000 y $450.000 no alinean en una tabla de precios */ .cifra{ font-variant-numeric: tabular-nums } /* ── Estructura ───────────────────────────────────────────────────── La ley que más define si un sitio se ve caro: el espacio ARRIBA de un título siempre es mínimo 3:1 contra el de abajo. Con 64/64 el título flota entre dos bloques y el ojo no sabe a cuál pertenece. */ .envoltorio{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) } section{ padding-block: clamp(64px, 10vw, 160px) } .seccion-cabecera{ margin-bottom: clamp(32px, 4vw, 64px) } h2 + p{ margin-top:var(--s-4) } p + p { margin-top:var(--s-5) } .grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gap) } /* ── Botones ──────────────────────────────────────────────────────── 48px de alto mínimo. En el sitio viejo 7 de 20 enlaces incumplían el objetivo táctil de WCAG 2.2 AA y el más chico medía 10,88px. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; border-radius:var(--r-1); font-weight:700; font-size:var(--fs-body); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background-color var(--t-micro) var(--e-ui), border-color var(--t-micro) var(--e-ui), transform var(--t-micro) var(--e-ui); } /* Uno por pantalla. El lima nunca pasa del 5% del área visible. */ .btn-primario{ background:var(--lima); color:#000 } .btn-fantasma{ border-color:var(--linea-2); color:var(--texto) } @media (hover:hover){ .btn-primario:hover{ background:var(--lima-hover); transform:translateY(-1px) } .btn-fantasma:hover{ border-color:rgba(204,255,0,.5) } } .btn-primario:active{ background:var(--lima-press); transform:translateY(0) } /* ── Tarjetas y capturas ──────────────────────────────────────────── El borde de 1px en alfa es la diferencia más barata entre caro y barato: sin él una tarjeta oscura sobre fondo oscuro flota sin definición. */ .tarjeta{ background:var(--negro-elev); border:1px solid var(--linea); border-radius:var(--r-2); padding:var(--s-6); transition:border-color var(--t-corta) var(--e-ui), transform var(--t-corta) var(--e-ui); } @media (hover:hover){ .tarjeta:hover{ border-color:var(--linea-2); transform:translateY(-4px) } } .captura{ border-radius:var(--r-2); border:1px solid var(--linea); box-shadow:var(--sombra); background:var(--negro-elev); } /* ── Detalles que casi nadie define y se ven caros ───────────────── */ ::selection{ background:var(--lima); color:#000 } :focus-visible{ outline:2px solid var(--lima); outline-offset:3px } /* nunca animado */ ::marker{ color:var(--lima-tinta) } /* ── Accesibilidad ────────────────────────────────────────────────── El sitio viejo no tenía esto. Dos de las tres agencias de referencia tampoco, y es un defecto suyo, no un permiso. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* La entrada al viewport vive en sitio.css, con su escalonado. */ /* ── Solo para lectores de pantalla ───────────────────────────────── Para texto que da contexto a algo que se entiende mirando pero no escuchando. En la lista de un plan, "incluido" y "no incluido" se distinguen solo por el color y un icono: para quien no ve la pantalla, las dos filas dicen exactamente lo mismo. */ .solo-lector{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* Sin esto, un enlace a #planes o #calculadora deja el título 4px debajo de la barra fija en celular, donde el espaciado de sección baja a 64px. */ section[id]{ scroll-margin-top:84px } /* ═══════════════════════════════════════════════════════════════════ PROFUNDIDAD DE FONDO Antes el sitio era negro plano de arriba abajo. Un fondo sin capas se lee como plantilla a medio hacer, aunque la tipografía sea buena. Las webs que venden en este rubro tienen todas alguna forma de profundidad. Todo esto son gradientes y un SVG en línea: 0 KB de imágenes, y nada que descargar. Van en ::before/::after del body para no meter divs. ═══════════════════════════════════════════════════════════════════ */ /* Halo superior. Empuja la mirada al hero sin competir con el texto. */ body::before{ content:''; position:fixed; z-index:0; pointer-events:none; inset:-30vh -20vw auto auto; width:min(900px,110vw); aspect-ratio:1; background: radial-gradient(circle at 62% 38%, rgba(204,255,0,.075), transparent 60%), radial-gradient(circle at 30% 70%, rgba(117,197,222,.045), transparent 62%); filter:blur(10px); } /* Grano. Sin él, un gradiente grande sobre negro se corta en bandas visibles en cualquier pantalla de 8 bits, que son casi todas. El ruido las rompe. */ body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.028; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Trama de puntos ──────────────────────────────────────────────── Cubre los DOS huecos donde el fondo quedaba liso y la página se veía a medio hacer: · TEMA CLARO, en cualquier pantalla. El panal de hexágonos está apagado a propósito ahí (`.fondo-hex` en display:none): es negro sólido y sobre un sitio claro no es una textura, es una pared. · CELULAR, en los dos temas. `fondo.js` no se monta sin mouse — correcto, es una capa a pantalla completa repintándose sobre una batería que no sobra— así que el fondo quedaba en nada. Es un `radial-gradient` repetido: 0 KB, cero JS y cero repintado. La referencia era un componente de React con Tailwind; el mismo resultado son tres líneas de CSS, y el sitio sigue sin frameworks. Va en `html::before` porque los dos del `body` ya están ocupados por el halo y el grano. */ html::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; display:none; background-image:radial-gradient(circle at 1px 1px, var(--punto) 1px, transparent 0); background-size:22px 22px; /* Sin la máscara es un tapiz plano de pared a pared y se lee como papel tapiz. Enmascarado se desvanece hacia abajo y hacia los lados: se lee como profundidad, que es lo que tiene que hacer un fondo. */ -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 5%, #000 40%, transparent 100%); mask-image:radial-gradient(ellipse 120% 90% at 50% 5%, #000 40%, transparent 100%); } /* Sobre negro un punto blanco al 7% no se ve: el ojo necesita más señal en oscuro que en claro para el mismo efecto. Medido mirándolo, no calculado. */ :root{ --punto:rgba(255,255,255,.11) } :root[data-tema="claro"]{ --punto:rgba(0,0,0,.14) } /* En claro, siempre. */ :root[data-tema="claro"]::before{ display:block } /* En celular, en los dos temas: ahí nunca hay panal. */ @media (max-width:900px), (hover:none){ html::before{ display:block } } /* Quien pidió menos movimiento igual ve la trama: no se mueve. Pero si el panal está apagado por eso, esto es lo único que queda de fondo. */ @media (prefers-reduced-motion:reduce){ html::before{ display:block } } /* Todo el contenido va sobre las dos capas. */ .nav, main, .pie, .rutas, .wa-flota{ position:relative; z-index:1 } /* Las secciones alternan tono. Doce secciones seguidas del mismo negro se leen como una sola sábana y el ojo pierde dónde empieza cada idea. */ main > section:nth-of-type(even){ background:linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,.022)); border-block:1px solid rgba(255,255,255,.045); } /* Palabra destacada dentro de un titular. La usa el h1 de cada página: una sola palabra en lima da un punto de entrada a la mirada, que es lo que hacen las webs de la competencia con su color de marca. */ .ac{ color:var(--lima-tinta) } /* Badge de estado. Dice que hay alguien del otro lado, hoy. */ .badge{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--linea-2); border-radius:100px; padding:7px 15px 7px 13px; margin-bottom:var(--s-5); font-size:13px; color:var(--texto-2); background:rgba(255,255,255,.02); } .badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--lima); box-shadow:0 0 0 0 rgba(204,255,0,.55); animation:latido 2.4s var(--e-ui) infinite; } @media (prefers-reduced-motion:reduce){ .badge::before{ animation:none } } /* El botón principal con peso. Plano sobre negro se ve como un rectángulo de color; con el halo se ve como algo en lo que se puede hacer clic. */ .btn-primario{ box-shadow:0 6px 22px rgba(204,255,0,.16), inset 0 1px 0 rgba(255,255,255,.35); } @media (hover:hover){ .btn-primario:hover{ box-shadow:0 10px 30px rgba(204,255,0,.26), inset 0 1px 0 rgba(255,255,255,.4) } } /* ═══════════════════════════════════════════════════════════════════ TEMA CLARO 🔴 EL LIMA NO PUEDE SER TEXTO ACÁ. Medido: #CCFF00 sobre #F7F8F6 da 1.1:1, cuando el mínimo legible es 4.5:1. Pero al revés funciona perfecto: texto negro SOBRE lima da 16.85:1. Así que en claro el lima deja de ser color de tinta y pasa a ser color de superficie — botones, badges y el resaltador de la palabra destacada. La marca se mantiene y se puede leer. El fondo es #F7F8F6 y no blanco puro: el blanco puro a pantalla completa deslumbra y cansa antes de llegar a los precios. ═══════════════════════════════════════════════════════════════════ */ :root[data-tema="claro"]{ --negro: #F7F8F6; --negro-elev: #FFFFFF; --texto: #111111; /* 17.7:1 */ --texto-2: #3A3A3A; /* 10.7:1 */ --texto-3: #5E5E5E; /* 6.1:1 — el gris más claro que sigue pasando AA */ --lima-dim: #5C7A00; /* 4.65:1 — para bordes y líneas finas */ --lima-ghost: #EDFFA8; /* fondo de etiqueta */ --fondo-rgb: 247,248,246; /* el mismo #F7F8F6 de --negro, en canales */ /* 6,2:1 sobre el gris del fondo — pasa AA con holgura incluso en texto chico, que es donde más se usa (viñetas, etiquetas, números). */ --lima-tinta: #46600A; --linea: rgba(0,0,0,.09); --linea-2: rgba(0,0,0,.16); /* Blanco puro sobre el gris del marco: las cajas del diagrama tienen que verse por encima del lienzo, no fundidas con él. */ --fl-caja: #FFFFFF; --fl-agente: #F6FFD6; } /* La barra y el menú, opacos sobre claro. */ :root[data-tema="claro"] .nav{ background:rgba(247,248,246,.86) } @supports (backdrop-filter: blur(12px)){ :root[data-tema="claro"] .nav{ background:rgba(247,248,246,.7) } } :root[data-tema="claro"] .nav.scrolleado{ background:rgba(247,248,246,.95) } :root[data-tema="claro"] .nav-movil{ background:rgba(247,248,246,.98) } :root[data-tema="claro"] .nav-abrir span{ background:var(--texto) } /* El logo es blanco: sobre claro hay que invertirlo. */ :root[data-tema="claro"] .nav-marca img, :root[data-tema="claro"] .pie-marca img{ filter:invert(1) } /* El halo de fondo y el grano son para el modo oscuro. Sobre claro ensucian en vez de dar profundidad. */ :root[data-tema="claro"] body::before{ background: radial-gradient(circle at 62% 38%, rgba(92,122,0,.10), transparent 60%), radial-gradient(circle at 30% 70%, rgba(3,105,161,.06), transparent 62%); } :root[data-tema="claro"] body::after{ opacity:.02; mix-blend-mode:multiply } /* Las secciones alternas necesitan ir más oscuras, no más claras. */ :root[data-tema="claro"] main > section:nth-of-type(even){ background:linear-gradient(180deg, rgba(0,0,0,.016), rgba(0,0,0,.028)); border-block-color:rgba(0,0,0,.07); } /* 🔴 La palabra destacada deja de ser texto lima y pasa a ser texto negro con el lima DETRÁS, como un resaltador. Es el mismo color de marca, con 17:1 de contraste en vez de 1.1:1. */ :root[data-tema="claro"] .ac{ color:var(--texto); background:linear-gradient(transparent 58%, var(--lima) 58%, var(--lima) 94%, transparent 94%); padding-inline:.06em; /* Sin esto, cuando la frase salta de línea el resaltador se dibuja UNA vez estirado entre las dos, y la segunda línea queda con la barra flotando donde no hay letras. Con `clone` cada línea recibe su propio fondo. */ -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* Los bloques que en oscuro se pintan con un lavado de lima quedan amarillentos sobre claro. Se cambian por blanco con borde lima. */ :root[data-tema="claro"] .plan.destacado, :root[data-tema="claro"] .sistema, :root[data-tema="claro"] .calc, :root[data-tema="claro"] .form-wa, :root[data-tema="claro"] .vs-caja.mio{ background:#FFFFFF; border-color:rgba(92,122,0,.4); box-shadow:0 2px 14px rgba(0,0,0,.05); } :root[data-tema="claro"] .plan.destacado .plan-val, :root[data-tema="claro"] .cifra .n, :root[data-tema="claro"] .calc-dato .n, :root[data-tema="claro"] .dolor .horas, :root[data-tema="claro"] .prueba .dato, :root[data-tema="claro"] .num, :root[data-tema="claro"] .ruta-num, :root[data-tema="claro"] .vs-caja.mio .vs-tit, :root[data-tema="claro"] .paso3-tiempo{ color:#3F5500 !important } /* El botón primario: el lima como superficie, texto negro encima. 16.85:1. */ :root[data-tema="claro"] .btn-primario{ color:#0A0A0A; box-shadow:0 4px 14px rgba(92,122,0,.22), inset 0 1px 0 rgba(255,255,255,.5); } :root[data-tema="claro"] .btn-fantasma{ background:#FFFFFF } /* Las tarjetas necesitan sombra en vez de brillo para separarse del fondo. */ :root[data-tema="claro"] .ben, :root[data-tema="claro"] .caso, :root[data-tema="claro"] .plan, :root[data-tema="claro"] .ruta, :root[data-tema="claro"] .viti, :root[data-tema="claro"] .ej, :root[data-tema="claro"] .dolor, :root[data-tema="claro"] .siempre, :root[data-tema="claro"] .faq details, :root[data-tema="claro"] .integra span{ box-shadow:0 1px 3px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.04); } /* La fila del antes/después: el gris del "hoy" y el lavado lima del "con esto" están calculados para fondo oscuro. */ :root[data-tema="claro"] .ad-antes{ background:rgba(0,0,0,.04); color:var(--texto-3) } :root[data-tema="claro"] .ad-desp{ background:rgba(204,255,0,.22); color:var(--texto) } :root[data-tema="claro"] .ad-desp b, :root[data-tema="claro"] .ad-desp .ad-et{ color:#3F5500 } /* Los iconos van dibujados en lima: sobre blanco desaparecen. */ :root[data-tema="claro"] .ben-ico svg, :root[data-tema="claro"] .caso-ico svg, :root[data-tema="claro"] .plan li svg, :root[data-tema="claro"] .siempre-lista svg{ stroke:#3F5500 } :root[data-tema="claro"] .ben-ico, :root[data-tema="claro"] .caso-ico{ background:#F2FFC7; border-color:rgba(92,122,0,.3) } /* Campos de formulario y lienzo del flujo. */ :root[data-tema="claro"] .campo input, :root[data-tema="claro"] .campo textarea, :root[data-tema="claro"] .campo select{ background:#FFFFFF; color:var(--texto) } :root[data-tema="claro"] .flujo-marco{ background:#FFFFFF } :root[data-tema="claro"] .flujo-barra{ background:#F2F3F0 } :root[data-tema="claro"] .nodo{ background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.06) } :root[data-tema="claro"] .nodo-tipo{ color:#3F5500 } :root[data-tema="claro"] .mockup-barra{ background:#EDEEEB } :root[data-tema="claro"] .mockup-url{ background:#FFFFFF } :root[data-tema="claro"] .tel-marco{ border-color:#D6D8D2; background:#FFFFFF } :root[data-tema="claro"] .tel-marco::before{ background:#FFFFFF } /* El pie invertido: cierra la página y separa el contenido del legal. */ :root[data-tema="claro"] .pie{ background:#0A0A0A; border-top-color:transparent } :root[data-tema="claro"] .pie *{ color:#A4A4A4 } :root[data-tema="claro"] .pie .label{ color:#E8E8E8 } :root[data-tema="claro"] .pie-marca img{ filter:none } :root[data-tema="claro"] .pie-fin{ border-top-color:rgba(255,255,255,.1) } /* ── Interruptor de tema ──────────────────────────────────────────── Tenerlo es señal de sitio cuidado, y de paso deja que el visitante elija. Va en el nav, chico, sin robarle sitio al CTA. */ .tema-btn{ width:38px; height:38px; flex:none; display:grid; place-items:center; background:none; border:1px solid var(--linea-2); border-radius:50%; cursor:pointer; color:var(--texto-2); padding:0; transition:border-color var(--t-micro) var(--e-ui), color var(--t-micro) var(--e-ui); } .tema-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round } .tema-btn .sol{ display:none } :root[data-tema="claro"] .tema-btn .sol{ display:block } :root[data-tema="claro"] .tema-btn .luna{ display:none } @media (hover:hover){ .tema-btn:hover{ border-color:var(--lima-dim); color:var(--texto) } } /* El ajuste del nav en celular vive en sitio.css, que carga después. */