/* ── SYNASTRY · compatibilidad/sin-filtro.css ──────────────────────────────── Las 12 páginas por signo "Sin filtro" (público 18-25, sin emojis). Una sola hoja para todas: cada página elige su elemento con la clase del (fuego, agua, tierra, aire) y la paleta cambia sola. PALETA DE LOS ELEMENTOS (decisión de Albert, 24 sep 2026): fuego → rojo Aries, Leo, Sagitario agua → azul Cáncer, Escorpio, Piscis tierra → marrón Tauro, Virgo, Capricornio aire → blanco gris Géminis, Libra, Acuario El blanco grisáceo del aire solo es legible sobre oscuro, así que el aire pinta su portada y sus bloques en grafito, y usa un gris medio (--marca) para los detalles sobre papel. Los otros tres ponen su color de fondo. Variables por elemento: --color el color del elemento, puro --sobre-color el texto que se lee encima de --color --claro un tono suave del elemento para bandas de fondo --marca el color para detalles pequeños SOBRE PAPEL (siempre legible) --heroe / --heroe-texto fondo y texto de la portada ─────────────────────────────────────────────────────────────────────────── */ :root { --papel: #F3EDE3; --tinta: #17130F; --tinta-suave: #4A4038; --t-s: #E2542B; --t-a: #F2994A; --t-b: #EFC75E; --t-c: #A9C4A4; --t-d: #B9B2C9; --borde: 3px solid var(--tinta); } .fuego { --color:#E2542B; --sobre-color:#17130F; --claro:#F9D3C3; --marca:#C8401B; --heroe:#E2542B; --heroe-texto:#17130F; } .agua { --color:#2F6FD6; --sobre-color:#F3EDE3; --claro:#D3E1F8; --marca:#2458B0; --heroe:#2F6FD6; --heroe-texto:#F3EDE3; } .tierra { --color:#8A5A36; --sobre-color:#F3EDE3; --claro:#E8D8C3; --marca:#7A4E2E; --heroe:#8A5A36; --heroe-texto:#F3EDE3; } .aire { --color:#E4E6EA; --sobre-color:#17130F; --claro:#DDE0E5; --marca:#5E646E; --heroe:#2A2D33; --heroe-texto:#E4E6EA; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } body { background: var(--papel); color: var(--tinta); font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } .ancho { max-width: 820px; margin: 0 auto; padding: 0 20px; } .titular { font-family: 'Bricolage Grotesque', sans-serif; } /* ── Portada a sangre ── */ .heroe { background: var(--heroe); color: var(--heroe-texto); border-bottom: var(--borde); position: relative; overflow: hidden; } .barra { display:flex; justify-content:space-between; align-items:center; padding:18px 0; } .firma { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:17px; letter-spacing:.18em; text-decoration:none; } .sello { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; background: var(--tinta); color: var(--papel); padding:6px 10px; transform: rotate(-3deg); display:inline-block; } .aire .sello, .agua .sello, .tierra .sello { background: var(--papel); color: var(--tinta); } .migas { font-size:13px; opacity:.85; } .migas a { text-decoration:none; border-bottom:1px solid currentColor; } .gigante { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; display:block; font-size: clamp(110px, 31vw, 290px); line-height:.78; letter-spacing:-.055em; margin: 26px 0 0 -.06em; white-space: nowrap; } .heroe h1 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: clamp(26px, 5.6vw, 40px); line-height:1.05; letter-spacing:-.015em; max-width: 17ch; margin-top: 18px; } .heroe .entradilla { font-size: 20px; line-height:1.5; max-width: 32em; margin: 18px 0 0; font-weight:500; } .pegatina { position:absolute; right: 22px; top: 92px; transform: rotate(8deg); background: var(--t-b); color: var(--tinta); border: var(--borde); box-shadow: 4px 4px 0 var(--tinta); font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:15px; line-height:1.2; padding:12px 14px; text-align:center; } .pegatina small { display:block; font-weight:500; font-size:12px; margin-top:3px; } @media (max-width:620px) { .pegatina { position:static; display:inline-block; transform: rotate(-4deg); margin-top:20px; } } .heroe-pie { padding-bottom: 34px; } /* ── Cinta que corre ── */ .cinta { background: var(--tinta); color: var(--papel); border-bottom: var(--borde); overflow:hidden; white-space:nowrap; } .cinta-pista { display:inline-block; padding: 12px 0; animation: correr 26s linear infinite; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; } .cinta-pista span { margin: 0 18px; } .cinta-pista .gema { color: var(--color); } .aire .cinta-pista .gema { color: var(--color); } @keyframes correr { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } } /* ── Bloques ── */ .bloque { padding: 64px 0; border-bottom: var(--borde); } .bloque.claro { background: var(--claro); } .bloque.oscuro { background: var(--tinta); color: var(--papel); } h2 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: clamp(34px, 7vw, 56px); line-height:.98; letter-spacing:-.03em; margin-bottom: 22px; } h2 .subrayado { background: linear-gradient(transparent 60%, var(--color) 60%); padding: 0 4px; } .aire h2 .subrayado { background: linear-gradient(transparent 60%, #C5C9D0 60%); } .bloque p + p { margin-top: 14px; } .bloque .grande { font-size: 20px; line-height:1.55; } /* Estadísticas de personaje */ .stats { display:grid; gap: 14px; margin-top: 8px; } .stat { display:grid; grid-template-columns: 170px 1fr 56px; gap: 14px; align-items:center; } @media (max-width:560px) { .stat { grid-template-columns: 1fr 48px; } .stat .barra-stat { grid-column: 1 / -1; order: 3; } } .stat b { font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size: 17px; } .stat .num { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 20px; text-align:right; } .barra-stat { height: 20px; border: var(--borde); background: var(--papel); } .barra-stat i { display:block; height:100%; background: var(--color); border-right: var(--borde); } .aire .barra-stat i { background: #9AA0AA; } .stat-nota { font-size: 14px; color: var(--tinta-suave); margin-top: 16px; font-style: italic; } /* Green / red flags */ .banderas { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width:640px) { .banderas { grid-template-columns: 1fr; } } .bandera { border: var(--borde); box-shadow: 7px 7px 0 var(--tinta); padding: 20px; background: var(--papel); } .bandera.verde { transform: rotate(-1deg); } .bandera.roja { transform: rotate(1.2deg); } .bandera h3 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 26px; margin-bottom: 8px; display:flex; gap:10px; align-items:center; } .bandera h3::before { content:''; width: 20px; height: 20px; border: var(--borde); } .bandera.verde h3::before { background: var(--t-c); } .bandera.roja h3::before { background: #E2542B; } .bandera ul { list-style:none; } .bandera li { padding: 9px 0; border-top: 2px dashed rgba(23,19,15,.3); } .bandera li:first-child { border-top:none; } .bandera .aparte { margin-top: 10px; font-size: 14.5px; font-style: italic; color: var(--tinta-suave); } /* Situaciones */ .situaciones { counter-reset: sit; display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width:640px) { .situaciones { grid-template-columns: 1fr; } } .situacion { border: var(--borde); background: var(--papel); padding: 18px 18px 16px; position: relative; } .situacion::before { counter-increment: sit; content: counter(sit, decimal-leading-zero); font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 44px; line-height:1; color: var(--marca); display:block; margin-bottom: 6px; } .situacion h3 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 21px; margin-bottom: 4px; } /* Tier list */ .tier-intro { font-size: 15.5px; margin-bottom: 20px; } .tiers { border: var(--borde); box-shadow: 8px 8px 0 var(--tinta); background: var(--papel); } .tier { display:grid; grid-template-columns: 86px 1fr; border-top: var(--borde); } .tier:first-child { border-top: none; } .tier-letra { display:flex; align-items:center; justify-content:center; border-right: var(--borde); font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 46px; color: var(--tinta); } .tier-s .tier-letra { background: var(--t-s); } .tier-a .tier-letra { background: var(--t-a); } .tier-b .tier-letra { background: var(--t-b); } .tier-c .tier-letra { background: var(--t-c); } .tier-d .tier-letra { background: var(--t-d); } .tier-signos { display:flex; flex-wrap:wrap; gap: 10px; padding: 14px; align-items:center; } .tier-signos a { text-decoration:none; background: var(--papel); border: var(--borde); padding: 7px 13px; font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size: 16px; display:inline-flex; gap: 8px; align-items: baseline; transition: transform .15s, box-shadow .15s; } .tier-signos a:hover { transform: translate(-3px,-3px) rotate(-2deg); box-shadow: 4px 4px 0 var(--tinta); } .tier-signos a small { font-family:'DM Sans', sans-serif; font-weight:500; font-size: 12px; color: var(--tinta-suave); } .tier-nota { margin-top: 22px; font-size: 15px; } .duo { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } @media (max-width:640px) { .duo { grid-template-columns: 1fr; } } .duo div { border: var(--borde); padding: 16px; background: var(--papel); } .duo div.match { background: var(--t-s); } .duo div.reto { background: var(--t-d); } .duo b { font-family:'Bricolage Grotesque', sans-serif; font-size: 21px; display:block; margin-bottom: 4px; } /* Puente hacia la calculadora */ .puente { background: var(--heroe); color: var(--heroe-texto); padding: 70px 0; border-bottom: var(--borde); } .puente h2 { font-size: clamp(40px, 9vw, 76px); } .puente p { font-size: 20px; max-width: 30em; font-weight: 500; } .boton { display:inline-block; margin-top: 26px; background: var(--tinta); color: var(--papel); border: var(--borde); padding: 16px 24px; text-decoration:none; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 19px; box-shadow: 6px 6px 0 var(--papel); transition: transform .15s, box-shadow .15s; } .aire .boton { background: var(--color); color: var(--tinta); box-shadow: 6px 6px 0 #6B717B; } .boton:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--papel); } .otra-via { margin-top: 22px !important; font-size: 16px !important; } .otra-via a { font-weight: 800; } /* Preguntas */ details { border-top: var(--borde); padding: 18px 0; } details:last-of-type { border-bottom: var(--borde); } summary { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 21px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap: 14px; } summary::-webkit-details-marker { display:none; } summary::after { content:'+'; color: var(--marca); font-size: 26px; line-height: 1; } details[open] summary::after { content:'\2212'; } details p { margin-top: 10px; } /* Los otros signos: cada uno con el color de su elemento */ .signos { display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width:560px) { .signos { grid-template-columns: repeat(3, 1fr); } } .signos a { text-decoration:none; border: var(--borde); padding: 12px 4px; text-align:center; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size: 15px; transition: transform .15s; } .signos a:hover { transform: rotate(-3deg) scale(1.04); } .signos .e-fuego { background:#E2542B; color:#17130F; } .signos .e-agua { background:#2F6FD6; color:#F3EDE3; } .signos .e-tierra { background:#8A5A36; color:#F3EDE3; } .signos .e-aire { background:#2A2D33; color:#E4E6EA; } footer { padding: 34px 0 60px; font-size: 14px; color: var(--tinta-suave); } footer .firma { color: var(--tinta); } footer p { margin-top: 8px; }