/* ============================================================= tema-arena.css — PALETA de Alejandro González. Solo de él. Es la plantilla madre con otra paleta: la ESTRUCTURA no cambia, cambian los valores. Por eso este archivo es una traducción de tema-inicio.css color por color y no un diseño aparte — el de Alexis (tema-editorial.css) sí es un diseño aparte, y se nota en que son 860 lineas contra estas. Los pesos de la paleta: Arena #F6F3EE — el fondo de casi toda la pagina Arena media #EBE6DE — bandas alternas y segundos planos Arena honda #E3DDD3 — tercer plano y estados Negro tinta #17150F — texto y lineas Negro grafito #1F1C15 — la MARCA: botones y bloques llenos Laton oscuro #6B5520 — el acento que SEÑALA, sobre fondo claro Laton #C9A961 — el mismo acento, sobre fondo oscuro Sepia #767063 — adornos y lineas POR QUE EL NEGRO ES LA MARCA Y EL LATON SOLO SEÑALA --------------------------------------------------- Alejandro pidió exactamente esto: «debemos pensar en manejar otro color más neutro, tal vez el naranja mínimo solo para indicar el cambio de página o el escríbeme». El negro carga el peso visual y el latón aparece solo donde hay que mirar: el precio, la liga, el botón de WhatsApp. Un acento que está en todas partes deja de ser acento y se vuelve fondo — es lo que le pasaba a la propuesta del naranja. DE NOCHE EL LATON TOMA EL LUGAR DEL NEGRO ----------------------------------------- La marca no puede seguir siendo negra sobre una pagina negra: el boton desapareceria. De noche la marca ES el laton, y el elemento que de dia era negro (el boton de enviar la busqueda) pasa a arena clara. Asi los dos nunca se confunden, ni de dia ni de noche. ============================================================= */ :root{ --ancho:1140px; /* Arena: el fondo por defecto */ --papel:#F6F3EE; --papel-translucido:rgba(246,243,238,.90); /* Arena media y honda: segundos planos */ --superficie:#EBE6DE; --superficie-2:#E3DDD3; --banda:#E3DDD3; --tinta:#17150F; /* Sepia de texto: tiene que pasar 4.5:1 sobre las tres arenas */ --suave:#5E584D; --sepia-deco:#767063; /* La marca: negro grafito. El laton oscuro es el acento que señala. */ --marca:#1F1C15; --marca-fuerte:#0F0D09; --marca-txt:#F6F3EE; --acento:#6B5520; --sombra-marca:0 8px 20px -12px rgba(15,13,9,.55); /* Terminal: el boton que manda la busqueda por WhatsApp. En esta paleta coincide en color con la marca, porque los dos son el negro grafito — y esta bien: de dia no hay nada que distinguir. De noche si se separan (marca a laton, terminal a arena clara). */ --terminal:#1F1C15; --terminal-txt:#F6F3EE; --terminal-suave:rgba(246,243,238,.70); --linea:rgba(23,21,15,.13); --linea-fuerte:rgba(23,21,15,.26); --sombra:0 1px 2px rgba(23,21,15,.04), 0 10px 26px -20px rgba(23,21,15,.35); --sombra-alta:0 2px 5px rgba(23,21,15,.06), 0 22px 44px -24px rgba(23,21,15,.45); /* Elevación: la profundidad de las tarjetas y los botones */ --elev-0:0 1px 2px rgba(23,21,15,.05); --elev-1:0 1px 2px rgba(23,21,15,.05), 0 8px 16px -6px rgba(23,21,15,.15); --elev-2:0 2px 4px rgba(23,21,15,.07), 0 18px 30px -10px rgba(23,21,15,.24); --elev-marca:0 2px 4px rgba(15,13,9,.18), 0 12px 22px -6px rgba(23,21,15,.45); --filo:inset 0 0 0 0 transparent; /* Chapa "Asesor" del encabezado: la placa que gira como una moneda */ /* Placa negra con el nombre en laton, no una moneda de oro. En una paleta cuyo acento YA es laton, un degradado de metal encima lo vuelve ruido: dos metales peleando. Placa plana y texto en laton se lee como grabado, y el contraste no depende de en que parte del degradado caiga la letra — que es el problema que tenia la madre. */ --chapa-fondo:linear-gradient(135deg,#2A261B 0%,#1F1C15 55%,#15130E 100%); --chapa-txt:#C9A961; --chapa-sombra:0 2px 5px rgba(15,13,9,.42), inset 0 1px 0 rgba(255,255,255,.34); --pulso:107,85,32; --op-fondo:#F6F3EE; --pan-fondo:#141209; --portico-nombre:#938B7E; --pan-textura-movil:radial-gradient(120% 80% at 30% 20%, #312C1E 0%, #211D13 45%, #14110B 100%); --chip-fondo:rgba(23,21,15,.10); --chip-txt:#54410F; --chip-linea:rgba(23,21,15,.26); --estado-fondo:#E3DDD3; --estado-txt:#3A352C; --pie-fondo:#17150F; --pie-txt:#F6F3EE; --pie-suave:rgba(246,243,238,.62); --pie-linea:rgba(246,243,238,.16); --pie-acento:#C9A961; /* --- Los acentos PROPIOS de cada desarrollo ------------------------- Las subpáginas de NUA y nivara traen tres tokens que la plantilla madre no tiene: --oro y --oro-claro (NUA) y --acento-claro (nivara). Si este tema no los define, sobreviven con el color del desarrollo: en la subpágina de nivara las cejas salían en AZUL PÁLIDO, que es el único tono que no tiene nada que ver con esta paleta. Se traducen al latón, y en dos valores distintos a propósito: --oro se usa sobre fondo CLARO → latón oscuro --oro-claro se usa sobre fondo OSCURO → latón claro --acento-claro se usa sobre fondo OSCURO → latón claro El mismo color no puede servir para las dos cosas: el latón claro sobre arena da 2.2:1 y el oscuro sobre negro da 3.0:1. */ --oro:#6B5520; --oro-claro:#C9A961; --acento-claro:#C9A961; } /* Variante nocturna: aqui si el fondo es la Tinta. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --papel:#15130E; --papel-translucido:rgba(21,19,14,.90); --superficie:#1E1B15; --superficie-2:#282419; --banda:#1A1711; --tinta:#F6F3EE; --suave:#ADA69A; --marca:#C9A961; --marca-fuerte:#DCBE78; --marca-txt:#15130E; --acento:#DCBE78; --sombra-marca:0 8px 20px -12px rgba(0,0,0,.8); --terminal:#F6F3EE; --terminal-txt:#15130E; --terminal-suave:rgba(21,19,14,.70); --linea:rgba(246,243,238,.15); --linea-fuerte:rgba(246,243,238,.28); --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -20px rgba(0,0,0,.8); --sombra-alta:0 2px 6px rgba(0,0,0,.6), 0 22px 44px -22px rgba(0,0,0,.9); --elev-0:0 1px 2px rgba(0,0,0,.55); --elev-1:0 1px 2px rgba(0,0,0,.55), 0 10px 20px -8px rgba(0,0,0,.8); --elev-2:0 2px 6px rgba(0,0,0,.65), 0 22px 36px -12px rgba(0,0,0,.92); --elev-marca:0 2px 6px rgba(0,0,0,.6), 0 12px 24px -6px rgba(220,190,120,.42); --filo:inset 0 1px 0 rgba(246,243,238,.07); --chapa-fondo:linear-gradient(135deg,#34301F 0%,#282419 55%,#1C1A12 100%); --chapa-txt:#DCBE78; --chapa-sombra:0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4); --pulso:201,169,97; --op-fondo:#282419; --pan-fondo:#0D0B07; --portico-nombre:#ADA69A; --pan-textura-movil:radial-gradient(120% 80% at 30% 20%, #282212 0%, #19160D 45%, #0C0A05 100%); --chip-fondo:rgba(220,190,120,.15); --chip-txt:#DCBE78; --chip-linea:rgba(220,190,120,.32); --estado-fondo:rgba(246,243,238,.11); --estado-txt:#EBE6DE; --pie-fondo:#100E0A; /* De noche se invierte el reparto: los elementos que de día estaban sobre arena ahora están sobre negro, así que --oro TAMBIÉN tiene que aclararse o desaparece. */ --oro:#DCBE78; /* Estos dos NO se aclaran de noche, al contrario que --oro. Sus usos mandan: la portada del desarrollo (velo oscuro fijo), la .banda-oscura (negro fijo) y el botón del visor —que necesita fondo claro porque su texto es oscuro— son oscuros en los dos modos. Los únicos bloques que cambian son .obra/.construido/.pool, y ésos se corrigen más abajo. */ --oro-claro:#C9A961; --acento-claro:#C9A961; } } /* El mismo juego de tokens, pero forzado con data-theme="dark". Por que hace falta duplicarlo: el media query solo reacciona al ajuste del sistema. Sin este bloque, alguien con la Mac en claro no podria elegir oscuro nunca — y alguien con la Mac en oscuro no podria ver el diseno claro, que es la identidad de la marca. */ :root[data-theme="dark"]{ --papel:#15130E; --papel-translucido:rgba(21,19,14,.90); --superficie:#1E1B15; --superficie-2:#282419; --banda:#1A1711; --tinta:#F6F3EE; --suave:#ADA69A; --marca:#C9A961; --marca-fuerte:#DCBE78; --marca-txt:#15130E; --acento:#DCBE78; --sombra-marca:0 8px 20px -12px rgba(0,0,0,.8); --terminal:#F6F3EE; --terminal-txt:#15130E; --terminal-suave:rgba(21,19,14,.70); --linea:rgba(246,243,238,.15); --linea-fuerte:rgba(246,243,238,.28); --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -20px rgba(0,0,0,.8); --sombra-alta:0 2px 6px rgba(0,0,0,.6), 0 22px 44px -22px rgba(0,0,0,.9); --elev-0:0 1px 2px rgba(0,0,0,.55); --elev-1:0 1px 2px rgba(0,0,0,.55), 0 10px 20px -8px rgba(0,0,0,.8); --elev-2:0 2px 6px rgba(0,0,0,.65), 0 22px 36px -12px rgba(0,0,0,.92); --elev-marca:0 2px 6px rgba(0,0,0,.6), 0 12px 24px -6px rgba(220,190,120,.42); --filo:inset 0 1px 0 rgba(246,243,238,.07); --chapa-fondo:linear-gradient(135deg,#34301F 0%,#282419 55%,#1C1A12 100%); --chapa-txt:#DCBE78; --chapa-sombra:0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4); --pulso:201,169,97; --op-fondo:#282419; --pan-fondo:#0D0B07; --portico-nombre:#ADA69A; --pan-textura-movil:radial-gradient(120% 80% at 30% 20%, #282212 0%, #19160D 45%, #0C0A05 100%); --chip-fondo:rgba(220,190,120,.15); --chip-txt:#DCBE78; --chip-linea:rgba(220,190,120,.32); --estado-fondo:rgba(246,243,238,.11); --estado-txt:#EBE6DE; --pie-fondo:#100E0A; /* De noche se invierte el reparto: los elementos que de día estaban sobre arena ahora están sobre negro, así que --oro TAMBIÉN tiene que aclararse o desaparece. */ --oro:#DCBE78; /* Estos dos NO se aclaran de noche, al contrario que --oro. Sus usos mandan: la portada del desarrollo (velo oscuro fijo), la .banda-oscura (negro fijo) y el botón del visor —que necesita fondo claro porque su texto es oscuro— son oscuros en los dos modos. Los únicos bloques que cambian son .obra/.construido/.pool, y ésos se corrigen más abajo. */ --oro-claro:#C9A961; --acento-claro:#C9A961; } /* Textura de papel, muy tenue */ body{ background-image:radial-gradient(circle at 1px 1px, rgba(118,112,99,.13) 1px, transparent 0); background-size:26px 26px; } @media (prefers-color-scheme: dark){ body:not([data-theme="light"]){background-image:radial-gradient(circle at 1px 1px, rgba(240,236,228,.06) 1px, transparent 0)} } /* El cuadrito al lado de cada titulo de seccion. Aqui va en LATON y no en el negro de la marca, al contrario que en la plantilla madre. Es la aplicacion literal de lo que pidio Alejandro: un cuadrito negro sobre papel arena es un punto mas de tinta y no dice nada; en laton es una señal de «aqui empieza algo». */ .cabeza h2{position:relative} .cabeza h2::before{content:"";position:absolute;left:-20px;top:.34em;width:7px;height:7px;background:var(--acento)} @media (max-width:920px){.cabeza h2::before{display:none}} /* --- Bandas: dos tonos de arena, sin bloques de color ---------- */ .banda-suave{background:var(--banda)} .banda-papel{background:var(--superficie)} /* Se quedan definidas para las subpaginas, pero la principal ya no las usa */ .banda-oscura{background:#17150F;color:#F6F3EE} .banda-oscura h2,.banda-oscura h3,.banda-oscura h4{color:#F6F3EE} .banda-oscura p{color:rgba(246,243,238,.78)} .banda-oscura .eyebrow{color:#C9A961} .banda-oscura .cabeza h2::before{background:#C9A961} /* --- Islas claras dentro del modo oscuro ----------------------- Dos bloques se quedan en arena clara aunque la página esté en oscuro: el panel de resultados del buscador y el pie. Es a propósito: son los dos lugares donde el visitante lee con calma, y la arena los separa del resto de la pantalla. Se escribe para los dos contextos oscuros —el del sistema operativo y el del interruptor de la página— porque son selectores distintos. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .resultado{ /* Vuelve a ser papel claro dentro del modo oscuro. Ojo con la línea de `color`: no sobra. Redefinir --tinta aquí NO cambia el texto, porque `color` ya se resolvió en body con el --tinta de la raíz y los descendientes heredan ese valor calculado, no la variable. Declarar color otra vez dentro de la isla lo obliga a re-resolverse, y de ahí sí lo heredan los hijos. */ color:var(--tinta); --papel:#F6F3EE; --papel-translucido:rgba(246,243,238,.92); --superficie:#EBE6DE; --superficie-2:#E3DDD3; --banda:#E3DDD3; --op-fondo:#F6F3EE; --tinta:#17150F; --suave:#5E584D; --acento:#6B5520; --marca:#1F1C15; --marca-fuerte:#0F0D09; --marca-txt:#F6F3EE; --linea:rgba(23,21,15,.14); --linea-fuerte:rgba(23,21,15,.28); --filo:inset 0 0 0 0 transparent; --elev-0:0 1px 2px rgba(23,21,15,.05); --elev-1:0 1px 2px rgba(23,21,15,.05), 0 8px 16px -6px rgba(23,21,15,.15); --elev-2:0 2px 4px rgba(23,21,15,.07), 0 18px 30px -10px rgba(23,21,15,.24); --elev-marca:0 2px 4px rgba(15,13,9,.18), 0 12px 22px -6px rgba(23,21,15,.45); --chip-fondo:rgba(23,21,15,.10); /* El mismo latón OSCURO de la raíz clara, no el acento. La isla es papel arena: con el latón del acento (#6B5520) la etiqueta daba 4.33:1 sobre la banda y el mínimo es 4.5. Heredé esa diferencia de la plantilla madre, donde el chip y el acento son colores distintos por razones que aquí no aplican. */ --chip-txt:#54410F; --chip-linea:rgba(23,21,15,.26); /* La isla es un contexto de DIA: los acentos de los desarrollos van con sus valores de dia. Sin esto heredarian los de la raiz oscura. */ --oro:#6B5520; --oro-claro:#C9A961; --acento-claro:#C9A961; --estado-fondo:rgba(23,21,15,.06); --estado-txt:#3A352C; --terminal:#1F1C15; --terminal-txt:#F6F3EE; --terminal-suave:rgba(246,243,238,.70); --sombra:0 1px 2px rgba(23,21,15,.04), 0 10px 26px -20px rgba(23,21,15,.35); --sombra-alta:0 2px 5px rgba(23,21,15,.06), 0 22px 44px -24px rgba(23,21,15,.45); } :root:not([data-theme="light"]) body > footer{ /* El pie también pasa a arena clara en modo oscuro. Su acento baja al latón oscuro: el latón claro (#C9A961) sobre arena da 2.2:1 y es ilegible — el mismo color funciona sobre negro y no sobre arena, y por eso hay dos. Y `color` se vuelve a declarar por lo mismo que en el panel de resultados. */ color:var(--pie-txt); --pie-fondo:#F6F3EE; --pie-txt:#17150F; --pie-suave:rgba(23,21,15,.66); --pie-linea:rgba(23,21,15,.16); --pie-acento:#6B5520; } } :root[data-theme="dark"] .resultado{ /* Vuelve a ser papel claro dentro del modo oscuro. Ojo con la línea de `color`: no sobra. Redefinir --tinta aquí NO cambia el texto, porque `color` ya se resolvió en body con el --tinta de la raíz y los descendientes heredan ese valor calculado, no la variable. Declarar color otra vez dentro de la isla lo obliga a re-resolverse, y de ahí sí lo heredan los hijos. */ color:var(--tinta); --papel:#F6F3EE; --papel-translucido:rgba(246,243,238,.92); --superficie:#EBE6DE; --superficie-2:#E3DDD3; --banda:#E3DDD3; --op-fondo:#F6F3EE; --tinta:#17150F; --suave:#5E584D; --acento:#6B5520; --marca:#1F1C15; --marca-fuerte:#0F0D09; --marca-txt:#F6F3EE; --linea:rgba(23,21,15,.14); --linea-fuerte:rgba(23,21,15,.28); --filo:inset 0 0 0 0 transparent; --elev-0:0 1px 2px rgba(23,21,15,.05); --elev-1:0 1px 2px rgba(23,21,15,.05), 0 8px 16px -6px rgba(23,21,15,.15); --elev-2:0 2px 4px rgba(23,21,15,.07), 0 18px 30px -10px rgba(23,21,15,.24); --elev-marca:0 2px 4px rgba(15,13,9,.18), 0 12px 22px -6px rgba(23,21,15,.45); --chip-fondo:rgba(23,21,15,.10); /* El mismo latón OSCURO de la raíz clara, no el acento. La isla es papel arena: con el latón del acento (#6B5520) la etiqueta daba 4.33:1 sobre la banda y el mínimo es 4.5. Heredé esa diferencia de la plantilla madre, donde el chip y el acento son colores distintos por razones que aquí no aplican. */ --chip-txt:#54410F; --chip-linea:rgba(23,21,15,.26); /* La isla es un contexto de DIA: los acentos de los desarrollos van con sus valores de dia. Sin esto heredarian los de la raiz oscura. */ --oro:#6B5520; --oro-claro:#C9A961; --acento-claro:#C9A961; --estado-fondo:rgba(23,21,15,.06); --estado-txt:#3A352C; --terminal:#1F1C15; --terminal-txt:#F6F3EE; --terminal-suave:rgba(246,243,238,.70); --sombra:0 1px 2px rgba(23,21,15,.04), 0 10px 26px -20px rgba(23,21,15,.35); --sombra-alta:0 2px 5px rgba(23,21,15,.06), 0 22px 44px -24px rgba(23,21,15,.45); } :root[data-theme="dark"] body > footer{ /* El pie también pasa a arena clara en modo oscuro. Su acento baja al latón oscuro: el latón claro (#C9A961) sobre arena da 2.2:1 y es ilegible — el mismo color funciona sobre negro y no sobre arena, y por eso hay dos. Y `color` se vuelve a declarar por lo mismo que en el panel de resultados. */ color:var(--pie-txt); --pie-fondo:#F6F3EE; --pie-txt:#17150F; --pie-suave:rgba(23,21,15,.66); --pie-linea:rgba(23,21,15,.16); --pie-acento:#6B5520; } /* Dentro de las islas claras, el texto que traía color de una regla de afuera se vuelve a atar a los tokens de la isla. Los dos bloques van SEPARADOS a propósito: el panel de resultados usa --tinta y el pie usa --pie-txt. Juntarlos en una sola lista de selectores fue un error que cometí: dentro del panel, --pie-txt no está definido, así que caía al valor de la raíz —arena— y los títulos quedaban invisibles otra vez. */ /* --- el panel de resultados --- */ :root[data-theme="dark"] .resultado h1, :root[data-theme="dark"] .resultado h2, :root[data-theme="dark"] .resultado h3, :root[data-theme="dark"] .resultado h4, :root[data-theme="dark"] .resultado b, :root[data-theme="dark"] .resultado strong{color:var(--tinta)} :root[data-theme="dark"] .resultado p, :root[data-theme="dark"] .resultado li{color:inherit} :root[data-theme="dark"] .resultado .res-sub, :root[data-theme="dark"] .resultado .res-cierre p{color:var(--suave)} /* --- el pie --- */ :root[data-theme="dark"] body > footer b, :root[data-theme="dark"] body > footer strong, :root[data-theme="dark"] body > footer .pie-datos a{color:var(--pie-txt)} :root[data-theme="dark"] body > footer .pie-links a{color:var(--pie-suave)} :root[data-theme="dark"] body > footer .legal{color:var(--pie-suave)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .resultado h1, :root:not([data-theme="light"]) .resultado h2, :root:not([data-theme="light"]) .resultado h3, :root:not([data-theme="light"]) .resultado h4, :root:not([data-theme="light"]) .resultado b, :root:not([data-theme="light"]) .resultado strong{color:var(--tinta)} :root:not([data-theme="light"]) .resultado p, :root:not([data-theme="light"]) .resultado li{color:inherit} :root:not([data-theme="light"]) .resultado .res-sub, :root:not([data-theme="light"]) .resultado .res-cierre p{color:var(--suave)} :root:not([data-theme="light"]) body > footer b, :root:not([data-theme="light"]) body > footer strong, :root:not([data-theme="light"]) body > footer .pie-datos a{color:var(--pie-txt)} :root:not([data-theme="light"]) body > footer .pie-links a{color:var(--pie-suave)} :root:not([data-theme="light"]) body > footer .legal{color:var(--pie-suave)} } /* --- Lo que el HTML compartido trae con el color escrito a mano --------- El botón que manda la búsqueda por WhatsApp (.res-cta) lleva su sombra escrita a mano en el