/* ╔══════════════════════════════════════════════════════════════════════════════╗ ║ RE-SUPERFICIES · jerarquía de cajas en tres niveles 17-ago-2026 ║ ║ ║ ║ QUÉ MEDÍ ANTES DE ESCRIBIR ║ ║ Conté los rellenos de las cajas que el ojo lee como "el mismo objeto" ║ ║ (tarjeta). Salen más de 20 valores distintos, y varios son el mismo color ║ ║ escrito de dos formas — que es la peor versión del problema: ║ ║ · base.css:215 .card → var(--panel) = #ffffff (claro) ║ ║ · base.css:221 .window-card → #fff literal ║ ║ · base.css:222 .acto-dark .window-card → var(--panel) = #101016 ║ ║ · base.css:276 .acc → var(--panel) + borde 1.5px ║ ║ · sections.css:993 .f03-bono → #fff ║ ║ · sections.css:945 .f03-ancla → #fff ║ ║ · sections.css:1032 .f04-wrap → var(--panel) ║ ║ · sections.css:1060 .f04-tp → rgba(36,64,255,.07) ║ ║ · base.css:218 .glass → var(--glass-bg) rgba(255,255,255,.7) ║ ║ · base.css:234 .sticker → #f4efe6 · .pill--crema #f4efe6 ║ ║ · base.css:494 .t04-toggle → var(--bg-2) #ece6d9 ║ ║ ...y encima TODAS llevaban el mismo adorno: .card--contorno (base.css:216) ║ ║ reparte borde #09090e + sombra dura a t01, t04, las 3 reseñas, z01-ask y ║ ║ los 4 bonos. Si el gesto más fuerte del sistema lo tiene todo el mundo, ║ ║ no destaca nadie: eso es exactamente lo que se ve como "descuidado". ║ ║ ║ ║ EL CRITERIO (una sola ley, tres niveles) ║ ║ 1 · PROTAGONISTA — UNA por sección. Es la que quiero que miren. ║ ║ Superficie más luminosa del acto + borde de tinta lleno + bloque duro ║ ║ desplazado + (sólo en acto claro) sombra difusa. ║ ║ 2 · BASE — la caja normal. Superficie un paso más apagada que la ║ ║ protagonista, línea de tinta al 16-20%, sin bloque duro. ║ ║ 3 · APOYO — no es una caja: es contenido con una línea alrededor. ║ ║ Sin relleno (o un velo por legibilidad), sin sombra. ║ ║ El bloque duro desplazado (4px 4px 0) deja de ser decoración y pasa a ser ║ ║ INFORMACIÓN: sólo lo lleva el nivel 1. Los stickers y las píldoras siguen ║ ║ con el suyo porque no son cajas — no compiten en esta jerarquía. ║ ║ ║ ║ MATERIA, PERO HONESTA ║ ║ · Degradado en vez de color liso, siempre 180deg y siempre con la luz ║ ║ entrando por arriba: en acto oscuro el filo de luz se ve de verdad ║ ║ (inset 0 1px 0 crema); en acto claro NO se ve (blanco sobre blanco), así ║ ║ que ahí la materia la da el degradado cayendo + la línea de contacto ║ ║ ABAJO. Fingir un filo invisible es gastar un shadow en nada. ║ ║ · La sombra difusa SÓLO existe en el acto claro. Sobre #060608 y #0b0d26 ║ ║ una sombra negra difusa no se ve: cuesta un repaint y no dibuja nada. ║ ║ En los actos oscuros la sombra ES el bloque azul desplazado (que es lo ║ ║ que ya hace base.css:55 con --sombra-dura en .acto-dark). ║ ║ · Dirección única de luz: todos los desplazamientos son +x +y (abajo a la ║ ║ derecha), como el 4px 4px 0 que ya usa la página. Cero sombras centradas. ║ ║ ║ ║ ORDEN DE CARGA (importante): este archivo va DESPUÉS de sections.css y de ║ ║ escala.css. Casi todo aquí empata en especificidad con sections.css a ║ ║ propósito (#seccion .clase) y gana por orden, no por !important. ║ ║ ║ ║ ║ ║ NO TOCA (regla dura, verificado selector por selector): no aparece en este ║ ║ archivo ni #t03-sietedias, ni #t04b-chat, ni #f02-calc, ni #f01-como, ni ║ ║ ninguno de sus hijos. Por eso NO uso los selectores globales .card / ║ ║ .window-card / .card--contorno: .t03-remate es .card, .t03-window y ║ ║ .f02-card son .window-card y .t04b-fono es .card--contorno — tocar la ║ ║ familia habría entrado en los cuatro juguetes calibrados. Cada nivel se ║ ║ asigna instancia por instancia, con el id de su sección delante. Es más ║ ║ verboso y es a propósito: en esta carpeta editan varias sesiones a la vez. ║ ║ Tampoco redefino ningún token existente (--panel, --bg-2, --line, ║ ║ --sombra-dura, --shadow-card): .f02-card lee var(--panel) del acto oscuro, ║ ║ así que redeclararlo habría cambiado la calculadora sin nombrarla nunca. ║ ║ Los tokens nuevos van todos con prefijo --sup- y no los usa nadie más. ║ ║ ║ ║ Sin mix-blend-mode, sin blur nuevo, sin will-change, sin animaciones ni ║ ║ transiciones: nada aquí depende de :hover (regla mobile-first) y no hay ║ ║ movimiento que reducir, así que prefers-reduced-motion no necesita bloque. ║ ║ Espaciado: cero. El padding de estas cajas lo manda escala.css (--s1..--s8) ║ ║ y este archivo no discute con él. ║ ╚══════════════════════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────────────────────── 1 · EL SISTEMA · tres recetas por acto Los valores no salen de la nada: son la familia que ya existe en base.css (--panel #ffffff / #101016, --line rgba(9,9,14,.1) y rgba(244,239,230,.11), --sombra-dura 4px 4px 0 #09090e / rgba(36,64,255,.9)), sólo ordenada en escalones que se distinguen a un metro de la pantalla. ───────────────────────────────────────────────────────────────────────────── */ :root{ /* ACTO CLARO — secciones con data-bg #fbfaf6, #eef1fb, #ffffff, #fafaf8. Ojo al caso difícil: t05-resenas tiene data-bg #ffffff, así que una caja blanca ahí es invisible sin línea. Por eso el nivel 2 claro NO es blanco puro: arranca en #fdfcfa y cae a #f6f2ea, y así se lee como papel apoyado sobre la sección incluso cuando la sección también es blanca. */ --sup-1-fondo:linear-gradient(180deg,#ffffff 0%,#fdfaf5 100%); --sup-1-linea:#09090e; --sup-1-grosor:2px; --sup-1-filo:inset 0 -1px 0 rgba(9,9,14,.08); /* línea de contacto, no filo: ver cabecera */ --sup-1-sombra:4px 4px 0 #09090e,7px 20px 38px -20px rgba(9,9,14,.30); --sup-2-fondo:linear-gradient(180deg,#fdfcfa 0%,#f6f2ea 100%); --sup-2-linea:rgba(9,9,14,.16); --sup-2-grosor:1.5px; --sup-2-filo:inset 0 -1px 0 rgba(9,9,14,.05); --sup-2-sombra:3px 12px 26px -16px rgba(9,9,14,.24); --sup-3-fondo:transparent; /* apoyo = sin relleno, de verdad */ --sup-3-linea:rgba(9,9,14,.13); } /* ACTO OSCURO — c01, t02, t06, z02 sobre #060608. Aquí sí hay filo de luz visible y aquí NO hay sombra difusa (ver cabecera). */ .acto-dark{ --sup-1-fondo:linear-gradient(180deg,#1b1b27 0%,#0e0e15 82%); --sup-1-linea:rgba(244,239,230,.26); --sup-1-grosor:1.5px; --sup-1-filo:inset 0 1px 0 rgba(244,239,230,.18); --sup-1-sombra:4px 4px 0 rgba(36,64,255,.9); --sup-2-fondo:linear-gradient(180deg,#121219 0%,#0c0c11 84%); --sup-2-linea:rgba(244,239,230,.13); --sup-2-grosor:1px; --sup-2-filo:inset 0 1px 0 rgba(244,239,230,.08); --sup-2-sombra:none; --sup-3-fondo:rgba(244,239,230,.03); /* velo mínimo: despega el texto del negro */ --sup-3-linea:rgba(244,239,230,.14); } /* ACTO AZUL — f03 sobre #0b0d26, con tarjetas blancas. El nivel 1 conserva el 8px 8px 0 azul que la destacada ya tenía medido (sections.css:960): funciona y es la firma de la sección. */ .acto-blue{ --sup-1-fondo:linear-gradient(180deg,#ffffff 0%,#f2f4ff 100%); --sup-1-linea:var(--azul); --sup-1-grosor:2.5px; --sup-1-filo:inset 0 -1px 0 rgba(9,9,14,.08); --sup-1-sombra:8px 8px 0 rgba(36,64,255,.9); --sup-2-fondo:linear-gradient(180deg,#fbfbfd 0%,#f2f2f7 100%); --sup-2-linea:rgba(9,9,14,.2); --sup-2-grosor:1.5px; --sup-2-filo:inset 0 -1px 0 rgba(9,9,14,.05); --sup-2-sombra:none; /* En el acto azul el "apoyo" NO es una caja clara: es la propia noche azul con una línea. Un velo blanco al 5,5% alcanza para que el texto no flote. */ --sup-3-fondo:rgba(255,255,255,.055); --sup-3-linea:rgba(255,255,255,.2); } /* ───────────────────────────────────────────────────────────────────────────── 2 · NIVEL 3 · APOYO Va primero para que el 2 y el 1 le ganen por orden sin subir especificidad. ───────────────────────────────────────────────────────────────────────────── */ /* t02 · los 3 pasos del trato. escala.css:46 ya les daba padding var(--s4) pero no tenían NINGÚN fondo: una caja con relleno y sin superficie se lee como algo a medio hacer. Con la línea, el padding por fin significa algo. DISIENTO A PROPÓSITO del "protagonista = la del medio donde haya tres": esto no son tres opciones, es una secuencia 1→2→3. Destacar la del medio rompe la lectura del orden. La protagonista de t02 no es una caja: es el sello 50/50 giratorio, y los pasos son su leyenda. */ #t02-garantia .t02-paso{ background:var(--sup-3-fondo); border:1px solid var(--sup-3-linea); border-radius:var(--rad); box-shadow:none; } /* z01 · las 26 preguntas. Eran 26 cajas rellenas (base.css:276, var(--panel)) una debajo de la otra: la mayor masa visual de la página, y toda al mismo volumen. Cerrada = fila de lista; abierta = superficie real (nivel 2). Así la única caja "encendida" del FAQ es la que el visitante está leyendo. */ #z01-faq .acc{ background:var(--sup-3-fondo); border:1px solid var(--sup-3-linea); box-shadow:none; } /* base.css:287 pinta el borde azul del abierto con .acc[open] (0-2-0) y mi regla de arriba es 1-1-0: se la comía. Se devuelve con id delante, y de paso el abierto sube al nivel 2 con su propia materia. */ #z01-faq .acc[open]{ background:var(--sup-2-fondo); border:var(--sup-2-grosor) solid rgba(36,64,255,.42); box-shadow:var(--sup-2-filo),var(--sup-2-sombra); } /* f03 · los 4 bonos. Eran 4 tarjetas BLANCAS más las 3 de los planes más el ancla: 8 rectángulos blancos en una sola sección, todos gritando. Pasan a apoyo — que era su papel real: son el detalle de lo que ya incluye el plan. Al quitarles el relleno blanco hay que devolver la tinta clara: sections.css :1280 les había forzado tinta oscura (--crema #1a1a22) justamente porque eran blancas. Sin este re-scope quedarían texto negro sobre azul noche (el bug mudo clásico de esta página). */ #f03-planes .f03-bono{ --crema:#f4efe6; --white:#ffffff; --muted:rgba(244,239,230,.74); --faint:rgba(244,239,230,.6); --azul-glow:#6d86ff; color:var(--muted); background:var(--sup-3-fondo); border:1px solid var(--sup-3-linea); box-shadow:none; } /* La etiqueta de valor (~$80.000) llevaba 2px 2px 0 #09090e: negro sobre #0b0d26 = sombra que no existe. Se pasa al azul, que es la convención de sombra dura en fondo oscuro de base.css:55. */ #f03-planes .f03-bono-valor{box-shadow:2px 2px 0 rgba(36,64,255,.9)} /* ───────────────────────────────────────────────────────────────────────────── 3 · NIVEL 2 · BASE ───────────────────────────────────────────────────────────────────────────── */ /* t05 · las 3 tarjetas de confianza, con la MISMA receta (31-ago). Antes: las laterales en nivel 2 (borde 1px al 16% → 1,54:1 de contraste) y solo la del medio en nivel 1 (borde 2px negro → 19,87:1). Doce veces de diferencia: por eso una invitaba a leerse y las otras dos no. Aquí no se compara nada entre ellas, así que las tres suben al nivel de la buena. Va por SELECTOR, nunca por nth-child: así aguanta si una tarjeta se reemplaza, se reordena o se elimina. */ #t05-resenas .t05-card{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* La marca azul del título: la misma barra del kicker que ya existe en base.css:168. El azul es el acento que destaca, no el color del texto. */ #t05-resenas .t05-nombre{display:flex;align-items:center;gap:.55rem} #t05-resenas .t05-nombre::before{ content:"";flex:0 0 18px;width:18px;height:2px; background:var(--azul);border-radius:2px } /* f03 · los otros dos planes. Blancos sí, pero un paso atrás de Sitio Completo: sin el bloque azul desplazado, que ahora sólo lleva la recomendada. */ #f03-planes .f03-card{ background:var(--sup-2-fondo); border:var(--sup-2-grosor) solid var(--sup-2-linea); box-shadow:var(--sup-2-filo); } /* f03 · el ancla de precio ("una agencia cobra desde $500.000"). Tenía #fff + 2px #09090e + sombra dura (sections.css:945): competía de igual a igual con las tarjetas que venían abajo, cuando su trabajo es preparar la comparación, no ganarla. */ #f03-planes .f03-ancla{ background:var(--sup-2-fondo); border:var(--sup-2-grosor) solid var(--sup-2-linea); box-shadow:var(--sup-2-filo),0 16px 34px -22px rgba(2,3,16,.9); } /* f04 · la tabla de escritorio. A propósito con relleno PLANO y no degradado: un 180deg sobre 7 filas oscurece la última y se lee como suciedad, no como materia. La jerarquía de esta tabla la carga la columna Tu Plantilla. */ #f04-comparacion .f04-wrap{ background:#fcfaf6; border:2px solid #09090e; box-shadow:6px 6px 0 #09090e,7px 20px 38px -20px rgba(9,9,14,.30); } /* Popup de cotización: por naturaleza es lo único en pantalla cuando aparece, así que es protagonista sin competencia — pero vive fuera de los actos y hereda los tokens claros de :root, que es justo lo que necesita. */ .popup .popup-card{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),0 26px 60px -18px rgba(9,9,14,.5); } /* ───────────────────────────────────────────────────────────────────────────── 4 · NIVEL 1 · PROTAGONISTAS · una por sección c01 → el formulario · t01 → la tarjeta de quiénes somos · t04 → el widget de mantención · t05 → la reseña del medio · f03 → Sitio Completo · f04 → la columna Tu Plantilla · f05 → la banda del pack · z01 → "¿tu duda no está aquí?" · z02 → el formulario de cierre. (t02 y t06 no llevan protagonista de caja: en t02 manda el sello y en t06 los teléfonos son dispositivos, no tarjetas — ahí no toco nada.) ───────────────────────────────────────────────────────────────────────────── */ /* c01 · la ventana del hero. Es una ventana CLARA forzada dentro del acto oscuro (sections.css:91), así que aquí NO puedo usar var(--sup-1-*): en .acto-dark esas variables valen la receta oscura y me habría pintado el formulario de negro. Van los valores claros escritos a mano. Conserva su 8px 8px 0 azul medido: es la caja más grande del acto y el bloque más gordo es correcto ahí. */ #c01-hero .c01-window{ background:linear-gradient(180deg,#ffffff 0%,#fdfaf5 100%); border-color:#09090e; box-shadow:8px 8px 0 rgba(36,64,255,.9),inset 0 -1px 0 rgba(9,9,14,.08); } /* t01 · única tarjeta de su sección: protagonista por definición. */ #t01-equipo .t01-card{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* t04 · el widget CON/SIN mantención. */ #t04-mantencion .t04-widget{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* COLISIÓN REAL, resuelta: sections.css:491 pone el borde rojo del estado "sin mantención" con .t04-widget.is-sin (0-2-0) y mi regla de arriba es 1-1-0 — le ganaba y el interruptor perdía su señal roja. Se devuelve con id delante, y además el estado conserva la materia del nivel 1 (antes el is-sin reemplazaba la sombra completa por --sombra-dura y la tarjeta se "aplanaba" al tocar el botón). */ #t04-mantencion .t04-widget.is-sin{ border-color:rgba(192,57,43,.55); box-shadow:var(--sup-1-filo),4px 4px 0 #c0392b,7px 20px 38px -20px rgba(9,9,14,.30); } /* t05 · la regla que subía SOLO a la del medio se retiró el 31-ago: ahora las tres comparten el nivel 1 en la regla de arriba. */ /* f03 · Sitio Completo, el plan recomendado. Mi regla de nivel 2 de arriba es #f03-planes .f03-card (1-1-0) y sections.css:960 marcaba la destacada con .f03-card--destacada (0-1-0): sin esta regla la destacada perdía su borde azul. Va después y con id, así gana sin !important. */ #f03-planes .f03-card--destacada{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* f04 · la columna Tu Plantilla es un OBJETO dentro de la tabla: fondo blanco sólido, flancos azules por los dos lados y cabecera azul llena (estática: el juez de coherencia recortó el "encendido" animado — un estado invisible menos que cuidar). */ #f04-comparacion .f04-tp{ background:#fff; border-left:2.5px solid var(--azul); border-right:2.5px solid var(--azul); } #f04-comparacion .f04-tp--head{background:var(--azul);color:#fff!important} #f04-comparacion .f04-vered .f04-tp{background:rgba(36,64,255,.10)} /* f05 · la banda del pack de redes: única caja de la sección. */ #f05-packredes .f05-banda{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* z01 · la tarjeta de "escribe tu duda": es el único CTA del FAQ y ahora, con las 26 preguntas en nivel apoyo, es lo único encendido de la sección. */ #z01-faq .z01-ask{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* z02 · el formulario de cierre. Aquí la ventana SÍ es oscura (.acto-dark .window-card → var(--panel) #101016), así que usa la receta oscura tal cual: filo de luz arriba + bloque azul, cero sombra difusa. */ #z02-cierre .z02-form-card{ background:var(--sup-1-fondo); border:var(--sup-1-grosor) solid var(--sup-1-linea); box-shadow:var(--sup-1-filo),var(--sup-1-sombra); } /* ───────────────────────────────────────────────────────────────────────────── 5 · LA BARRA AZUL DE LAS VENTANAS · el único sitio donde el filo de luz se ve en las cajas claras base.css:223 la pinta con var(--azul) liso. Es la pieza más "objeto" del sistema (es un cromo de ventana) y era la más plana. Un degradado corto y dos líneas insertadas la convierten en un borde con volumen — y como en las ventanas el degradado del cuerpo queda tapado por esta barra, aquí es donde la luz de arriba tiene que entrar. Listadas una por una: NO incluyo la barra de #t03-sietedias ni la de #f02-calc, que son juguetes intocables. ───────────────────────────────────────────────────────────────────────────── */ #c01-hero .c01-window .window-bar, #f03-planes .f03-card .window-bar, #f05-packredes .f05-banda .window-bar, #z02-cierre .z02-form-card .window-bar{ background:linear-gradient(180deg,#3b53ff 0%,#2440ff 58%,#1d34dd 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(9,9,14,.22); } /* ───────────────────────────────────────────────────────────────────────────── 6 · NOTAS DE LO QUE DEJO COMO ESTÁ (y por qué) ───────────────────────────────────────────────────────────────────────────── */ /* · .t05-negocio aparecía en el inventario de superficies, pero no es una: es el

con el rubro y la ciudad dentro de .t05-head. No tiene fondo y no se lo pongo. Lo que sí hay ahí es un choque ajeno que dejo anotado y no toco (es de otro archivo): escala.css:46 le da padding:var(--s4) a .t05-negocio, y por el contexto — la lista es .card, .window-card, .f03-grid>*, .f04-card, .t05-negocio, .t02-paso — parece que quería decir .t05-card. Hoy son 20px de relleno alrededor de un subtítulo de 0.78rem. · escala.css:46 también apunta a ".z01-wrap .acc-item", y ese elemento no existe en index.html: el acordeón del FAQ es

con .acc-sum/.acc-body. Ese selector no está haciendo nada. · Los chips y píldoras (.chip, .pill--crema, .f05-chip, .c01-badge, .c01-eyebrow) también suman fondos al recuento, pero son otra familia: etiquetas, no cajas. Meterlos aquí habría sido cambiar dos sistemas en un archivo, y varios de ellos viven dentro de f01, que es intocable. · .t02-paso-num lleva box-shadow:3px 3px 0 #09090e sobre #060608: negro sobre negro, sombra que no se ve. No lo cambio porque es un distintivo, no una superficie, pero queda dicho — es la misma clase de bug mudo que arreglé en .f03-bono-valor. · Los radios (16px en .card/.window-card, 14px en .acc/.f03-bono/.f03-ancla) quedan como estaban. Este archivo mueve UN eje — relleno, línea y sombra; unificar radios en la misma pasada haría imposible saber qué cambió qué. */