/* Generado por catl_css_unido(). NO SE EDITA: se rehace solo. */ /* ═══ style.css ═══ */ /* Theme Name: Cat Landlord Theme URI: https://catlandlord.com/ Author: Alfredo Ramses Author URI: https://catlandlord.com/author/alfredoramses/ Description: Tema propio de catlandlord.com. Escrito desde cero, sin heredar nada de Newsmag. El sistema de diseño completo — la paleta, el ritmo de color de los bloques, los tres niveles de línea, la tipografía y la regla de los gatos — está documentado en proyectos/gatos-sistema-de-diseno.md del vault. Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.3 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: catlandlord Tags: blog, one-column, custom-menu, featured-images, threaded-comments */ /* ⚠️ ESTE FICHERO NO LLEVA ESTILOS. * * WordPress necesita un style.css con esta cabecera para reconocer el tema, * pero la hoja de verdad es `estilo-base.css`, que la ESCRIBE un script * (export-a-tema.py) a partir de lo que se midió en las maquetas. * * Si los estilos vivieran aquí, la próxima exportación los pisaría. * * Dónde se toca cada cosa: * estilo-base.css generado — NO se edita a mano, se regenera * estilo-tema.css a mano — todo lo que se añada de aquí en adelante */ /* ═══ estilo-base.css ═══ */ /* Las tres familias, alojadas aqui. Ver assets/fonts/LEEME.txt */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/fraunces-900-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} @font-face{font-family:'Fraunces';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/fraunces-900-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 Narrow';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-narrow-600-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} @font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-narrow-600-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 Narrow';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-narrow-700-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} @font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-narrow-700-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:'Faustina';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/faustina-400-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} @font-face{font-family:'Faustina';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/faustina-400-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:'Faustina';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/faustina-600-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} @font-face{font-family:'Faustina';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/faustina-600-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} :root{ --fondo:#E1E6EB;--papel:#EFF2F5;--tinta:#141A1E;--pizarra:#424E59; --azul:#5C9CD1;--azulh:#4E8CC2;--ambar:#F2A81C; /* TRES niveles de linea, y cada uno se ve el doble que el siguiente: --regla 3px tinta solida -> separa BLOQUES de la pagina --filete2 2px tinta solida -> debajo del rotulo de una lista --filete 1px tinta al 13% -> entre dos articulos de una lista */ --filete:rgba(20,26,30,.13);--filete2:rgba(20,26,30,.30); --display:"Fraunces",Georgia,serif;--estrecha:"Archivo Narrow",Arial,sans-serif; --cuerpo:"Faustina",Georgia,serif; } *{box-sizing:border-box} body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--cuerpo); font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:focus-visible{outline:3px solid var(--azul);outline-offset:2px} .env{max-width:1120px;margin:0 auto;padding:0 20px} .rot{font-family:var(--estrecha);font-weight:700;font-size:11px;letter-spacing:.15em; text-transform:uppercase;color:var(--azul)} /* ── cabecera ── */ /* El borde va en .fila y NO en
: el header ocupa toda la pantalla y su borde tambien lo hacia — la unica linea que seguia yendo a sangre. En .fila mide lo mismo que el resto del contenido. */ header.top{position:sticky;top:0;z-index:20;background:var(--fondo)} .top .fila{border-bottom:3px solid var(--tinta)} .top .fila{display:flex;align-items:center;justify-content:space-between;gap:18px; padding:12px 0;flex-wrap:wrap} /* El tamano lo manda cuantas etiquetas hay. Con las 13 habia que bajar a 11,5 px para que no envolviera; ahora que son 8 (Home + 6 + More) caben a 15 px con 20 de hueco y sobran 60 px. Al lado de un logo de 76 px de alto, un nav de 11 px se veia raquitico. */ .top nav{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--estrecha);font-weight:700; font-size:14px;letter-spacing:.08em;color:var(--tinta);align-items:center} .top nav a{padding-bottom:2px} .top nav a:hover{color:var(--azul)} /* ── una huella entre categoria y categoria ─────────────────── Idea de Alfre. Va DISCRETA a proposito: sale seis veces en la misma linea, y un adorno que se repite tanto tiene que ser un susurro o cansa. De ahi los 11 px y la opacidad al 34%. Ligeramente girada para que se lea como una pisada y no como un simbolo. */ .top nav > * + *::before{content:"";display:inline-block; width:11px;height:13px;margin-right:8px;vertical-align:-2px;opacity:.34; transform:rotate(-14deg); background:no-repeat center/contain; background-image:url("data:image/svg+xml;utf8,")} @media (max-width:819px){.top nav > * + *::before{display:none}} /* ── EL BUSCADOR ────────────────────────────────────────────── La lupa NO lleva huella delante: la huella separa categoria de categoria y esto no es una categoria, es una herramienta. Ademas son 19 px que el nav no tiene de sobra. */ .busca{margin-left:6px;display:flex;align-items:center} .top nav > .busca::before{display:none} .busca summary{list-style:none;cursor:pointer;display:block;padding:3px; border-radius:2px} .busca summary::-webkit-details-marker{display:none} .busca summary:focus-visible{outline:2px solid #5C9CD1;outline-offset:2px} .lupa{display:block;width:17px;height:17px;background:no-repeat center/contain; background-image:url("data:image/svg+xml;utf8,");transition:transform .16s ease} .busca summary:hover .lupa{transform:scale(1.14)} /* Abierto, la lupa se queda marcada: es lo unico que le dice al lector que la barra de abajo sale de ahi y que volviendo a pulsar se cierra. */ .busca[open] summary{background:#141A1E} .busca[open] .lupa{filter:invert(1)} /* La barra cae de .fila, igual que el mega menu. Va en TINTA porque no es contenido: es una herramienta, y aqui lo oscuro significa eso. */ .buscaf{position:absolute;left:0;right:0;top:100%;z-index:30; background:#141A1E;color:#EFF2F5;padding:18px 0 22px; border-bottom:3px solid #F2A81C} .buscaf .rot{color:#F2A81C;display:block;margin:0 0 9px} .buscafila{display:flex;gap:0;max-width:660px} .buscafila input{flex:1 1 auto;min-width:0;font-family:var(--cuerpo); font-size:18px;padding:13px 16px;border:none;background:#EFF2F5; color:var(--tinta)} .buscafila input:focus{outline:3px solid #F2A81C;outline-offset:-3px} .buscafila button{flex:0 0 auto;font-family:var(--estrecha);font-weight:700; font-size:14px;letter-spacing:.08em;text-transform:uppercase; padding:13px 26px;border:none;cursor:pointer; background:#F2A81C;color:var(--tinta);transition:background .16s ease} .buscafila button:hover{background:#EFF2F5} @media (max-width:519px){.buscafila{flex-wrap:wrap} .buscafila input,.buscafila button{flex:1 1 100%}} .top nav a:hover{color:var(--azul)} /* ── entrada + hombro ── */ .abre{display:flex;gap:30px;padding:22px 0 26px;border-bottom:3px solid var(--tinta); flex-wrap:wrap;position:relative} /* ── el gato sentado en el filete ───────────────────────────── La columna de la derecha acaba antes que la del titular y deja un hueco de unos 128 px. Pero el gato NO se pone en el hueco: se pone sobre el filete que cierra la seccion, que es un borde de verdad y hace de suelo. En absolute para que no empuje nada, y fuera en cuanto las dos columnas se apilan (por debajo de 900 px), porque entonces ese filete ya no esta ahi. */ .sentado{position:absolute;right:13%;bottom:0;width:88px;height:auto; display:block;pointer-events:none;z-index:1} @media (max-width:899px){.sentado{display:none}} /* Texto que leen Google y los lectores de pantalla, invisible para el ojo. Lo usa el h1 de la portada, donde la marca es un dibujo sin texto. (15 sep 2026 — mismo recurso que usa WordPress en sus temas oficiales.) */ .solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .lead{flex:1 1 520px;min-width:0} .lead img{width:100%;margin-bottom:14px} .lead .lead-t{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.6vw,50px); line-height:1.0;letter-spacing:-.024em;margin:6px 0 0;text-wrap:balance} .lead .ent{font-size:18px;margin:11px 0 0;max-width:58ch;color:#2b3135} .firma{font-family:var(--estrecha);font-size:13px;color:var(--pizarra);margin:11px 0 0} .firma b{color:var(--tinta)} .lado{flex:0 1 300px;min-width:260px;display:flex;flex-direction:column;gap:18px} /* ── hombro: 3 en fila, sin tarjeta ── */ .hombro{display:flex;gap:22px;padding:20px 0;border-bottom:3px solid var(--tinta); flex-wrap:wrap} .hom{flex:1 1 240px;min-width:210px} .hom img{width:100%;margin-bottom:9px} .hcat{font-family:var(--estrecha);font-weight:700;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--azul);display:block;margin-bottom:3px} .hom b{font-family:var(--display);font-weight:900;font-size:21px;line-height:1.06; letter-spacing:-.015em;display:block} /* ── digesto: la pieza que da la densidad ── */ .dig{display:flex;gap:30px;padding:20px 0 24px;border-bottom:3px solid var(--tinta); flex-wrap:wrap} .dig .col{flex:1 1 440px;min-width:280px} .dig h2,.seccion h2,.zonas-tit{font-family:var(--display);font-weight:900;font-size:23px; margin:0 0 10px;letter-spacing:-.015em} .digesto{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)} .digesto li{border-bottom:1px solid var(--filete)} .digesto a{display:flex;align-items:baseline;gap:10px;padding:8px 0; font-family:var(--estrecha);font-weight:600;font-size:16.5px;line-height:1.25} .dcat{font-family:var(--estrecha);font-weight:700;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta);background:var(--azul);padding:2px 6px; flex:0 0 96px;text-align:center;align-self:flex-start;margin-top:2px; white-space:nowrap;overflow:hidden} .dtit{flex:1 1 auto} /* ── las 13 zonas ────────────────────────────────────────────── 13 es primo: en cualquier rejilla sobra uno y se estira solo a lo ancho de la pantalla. Se ve feo y Alfre lo cazó en su monitor. Solución: rejilla de columnas fijas por tamaño y unos cuantos bloques ocupando DOS columnas, para que la cuenta dé filas completas siempre: 5 col -> 13 + 2 dobles = 15 = 3 filas 4 col -> 13 + 3 dobles = 16 = 4 filas 3 col -> 13 + 2 dobles = 15 = 5 filas 2 col -> 13 + 1 doble = 14 = 7 filas El bloque doble no es un parche: es jerarquía, la habitación destacada. */ /* La franja va A SANGRE, mas ancha que la columna de texto: es un recurso editorial, le da ritmo a la pagina. Pero SIN TOPE se rompe: en la pantalla de Alfre (unos 2520px) los bloques se estiraban y el titulo quedaba desalineado con su propia franja. El tope los deja anchos sin desmadre, y el titulo va dentro del mismo envoltorio para que arranquen a la vez. */ .zonas-env{max-width:1520px;margin:0 auto} /* El rotulo de la seccion mas importante de la portada. A 23 px, que es lo que miden los demas h2, se perdia entre ellos. A 34 px manda. */ .zonas-env .zonas-tit{padding:0 14px;font-size:34px;letter-spacing:-.026em; margin:0 0 12px} @media (max-width:619px){.zonas-env .zonas-tit{font-size:26px}} .zonas{display:grid;gap:2px;grid-template-columns:repeat(5,1fr)} /* ── EL BLOQUE DE LAS TRES LISTAS ───────────────────────────── Justo encima hay otra seccion de titulares y se leian como lo mismo. Este bloque no es "mas titulares": es por donde se EMPIEZA. Con fondo propio, filete ambar bajo cada rotulo y los numeros en ambar, se ve de un vistazo que es otra cosa. */ /* En PAPEL este bloque estaba a dE 4,5 del fondo de la pagina: invisible como bloque. En TINTA esta a dE 82. Es la misma medida y la misma solucion que en el panel del menu. Contrastes comprobados sobre la tinta: papel 15,6:1 y ambar 8,7:1. */ /* AZUL SIAMES, y no tinta: el pie tambien es oscuro y los dos bloques, casi pegados, competian. Aqui hace falta algo que se separe del fondo SIN ser oscuro, y el azul de marca es el que mejor cumple las dos condiciones: papel #EFF2F5 dE 4,5 -> no se separa azul #5C9CD1 dE 42,1 -> se separa, y el texto en tinta da 6,0:1 */ .guia{background:#5C9CD1;color:var(--tinta);max-width:1120px; margin:0 auto 4px} .guia .env{padding-top:28px;padding-bottom:34px} /* 26 px de margen + los 22 de padding de .cols hacian 48 px de hueco entre el titulo y las listas, y se veia un vacio. Con 14 y sin el padding de arriba, la cabecera queda pegada a lo que encabeza. */ .guiacab{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; margin:0 0 14px} .guia .cols{padding-top:0} /* La cabecera va en AZUL NOCHE, no en negro: es el mismo tono que el fondo pero mas profundo, y eso se lee como una sola familia en vez de como texto pegado encima. Da 4,71:1 — pasa hasta para el rotulo pequeno. Claro no puede ser: sobre este azul ni el blanco puro llega (2,94:1) y un titular grande necesita 3:1. */ .guiacab h2{font-family:var(--display);font-weight:900;font-size:30px; letter-spacing:-.024em;margin:0;color:#142A5C;border-bottom:none; padding-bottom:0} .guiacab p{margin:0;font-family:var(--estrecha);font-weight:700;font-size:11.5px; letter-spacing:.13em;text-transform:uppercase;color:#142A5C;opacity:.86} @media (max-width:619px){.guiacab h2{font-size:24px}} .guia h2{border-bottom:none;padding-bottom:0;margin-bottom:4px;color:var(--tinta)} .guia ol.num{border-top:3px solid var(--tinta);padding-top:4px;margin-top:8px} .guia ol.num li{border-bottom:1px solid rgba(20,26,30,.22)} .guia ol.num a{color:var(--tinta)} .guia ol.num b{color:var(--tinta);opacity:.55} .guia ol.num a:hover{color:var(--papel)} /* ── LAS FRANJAS DE TEXTO ───────────────────────────────────── Idea de Alfre: romper el ritmo imagen+titular, imagen+titular que tienen TODAS las portadas de blog. Van SIN IMAGEN a proposito — es la ausencia de foto lo que rompe el ritmo, no otro recuadro mas. Regla que se aplican: tienen que decir algo. La segunda enlaza a un articulo real del mapa topico. Si algun dia una de estas franjas no aporta nada, se quita: una frase decorativa se aprende a saltar en dos visitas. */ /* 1 · el lema, justo debajo del header, en el ambar de la marca */ /* Las franjas NO van a sangre. En la pantalla de Alfre (unos 2520 px) una banda de borde a borde con el texto centrado en 1120 deja dos vacios enormes de color y se ve rara. Se alinean con la columna de contenido: el color ya las separa de sobra del resto de la pagina. */ .lema{background:#F2A81C;color:var(--tinta); border-bottom:3px solid var(--tinta); max-width:1120px;margin:0 auto} .lema .env{display:flex;align-items:baseline;justify-content:space-between; gap:18px;flex-wrap:wrap;padding-top:13px;padding-bottom:14px} .lemat{margin:0;font-family:var(--display);font-weight:900;font-size:25px; letter-spacing:-.022em;line-height:1.06} .lemat em{font-style:normal;opacity:.62;margin-left:.42em} /* AQUI NO VA UN CONTEO. Puso "618 guides" y Alfre lo paro el 19 ago 2026: el mapa topico tiene 618 filas, pero publicadas hay una fraccion y subirlas lleva un ano. Anunciar el tamano del PLAN como si fuera el del SITIO es prometer lo que no hay — y es justo el perfil que Google mira con lupa en un dominio nuevo con enlaces de afiliado. Va una credencial, no un inventario. */ .lemas{margin:0;font-family:var(--estrecha);font-weight:700;font-size:11.5px; letter-spacing:.13em;text-transform:uppercase;opacity:.72} /* 2 · el mito, entre el anuncio y las listas, en tinta */ .mito{background:var(--tinta);color:var(--papel);margin:0 auto 4px;overflow:hidden; max-width:1120px;position:relative} /* relative: el gato cuelga de AQUI */ .mito .env{padding-top:30px;padding-bottom:34px} /* el gato se agarra al filete de arriba de la franja. No flota: cuelga de un borde que la pagina ya tiene, que es la unica manera de que no parezca una pegatina. El texto le deja sitio con el padding de la derecha. */ .mitogato{position:absolute;right:8%;top:-8px;width:122px;height:auto; display:block;pointer-events:none} @media (max-width:899px){.mitogato{width:92px;right:8%}} @media (max-width:619px){.mitogato{display:none}} /* Los cinco consejos van APILADOS en la misma celda del grid. Asi el contenedor toma solo la altura del mas alto —sin altura fija y sin saltos— y para que se fundan basta con animar la opacidad de cada uno con su retardo. Cero JavaScript y cero movimiento del layout. */ .consejos{display:grid} .consejo{grid-area:1/1;opacity:0;animation:consejo 40s linear infinite} @keyframes consejo{ 0% {opacity:0} 2.5% {opacity:1} /* entra en 1 s */ 17.5% {opacity:1} /* se queda 6 s */ 20% {opacity:0} /* sale en 1 s, mientras el siguiente entra */ 100% {opacity:0} } @media (prefers-reduced-motion:reduce){ /* sin animacion se quedaria la franja en blanco: se deja fijo el primero */ .consejo{animation:none;opacity:0} .consejo:first-child{opacity:1} } .mitolab{display:block;font-family:var(--estrecha);font-weight:700;font-size:11px; letter-spacing:.15em;text-transform:uppercase;color:#F2A81C;margin:0 0 12px} .mitoq{display:block;margin:0;padding-right:190px;font-family:var(--display); font-weight:900;font-size:clamp(26px,3.4vw,38px);line-height:1.04; letter-spacing:-.024em;max-width:22ch} .mitoq s{text-decoration:line-through;text-decoration-thickness:3px; text-decoration-color:#F2A81C;opacity:.55} .mitor{display:block;margin:14px 0 0;font-size:18px;line-height:1.42;max-width:52ch} .mitor em{font-style:italic;color:#F2A81C} @media (max-width:619px){ .lemat{font-size:20px} .lema .env{padding-top:11px;padding-bottom:12px} .mito .env{padding-top:24px;padding-bottom:26px} } /* ── EL MENU DE CATEGORIAS ──────────────────────────────────── Cada categoria abre un panel con SUS SUBCATEGORIAS y el titular real del articulo pilar de cada una. No es una lista de enlaces: es el mapa topico, y le dice a Google como esta organizado el sitio. Sin una linea de JavaScript: se abre con :hover y con :focus-within, asi que funciona igual con el teclado. El panel se ancla a .fila, que ocupa todo el ancho, y por eso todos caen en el mismo sitio. */ .top .fila{position:relative} .top nav{position:static} .men{position:static;display:inline-block} .mtit{display:inline-block;padding:4px 0} /* UN SOLO fondo, y oscuro. El panel es una capa POR ENCIMA de la pagina y tiene que leerse asi: en papel estaba a dE 4,5 del fondo — invisible como capa. La tinta esta a dE 82. Ademas une la ilustracion y el texto, que antes iban en dos grises distintos y con una raya en medio. */ .panel{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:40; background:var(--tinta);color:var(--papel); border-top:3px solid #F2A81C; box-shadow:0 22px 48px -20px rgba(20,26,30,.55); display:grid;grid-template-columns:228px 1fr; visibility:hidden;opacity:0;transform:translateY(-9px); transition:opacity .2s ease, transform .26s cubic-bezier(.2,.8,.3,1), visibility 0s linear .2s; overflow:hidden} .men:hover .panel,.men:focus-within .panel{visibility:visible;opacity:1; transform:translateY(0);transition-delay:0s,0s,0s} /* el gato ocupa la columna de la izquierda ENTERA, de arriba abajo */ /* sin fondo propio ni borde: la ilustracion vive en el mismo papel que el texto, que es lo que pidio Alfre — "que se sienta que son parte de lo mismo" */ .pgato{display:block;align-self:stretch;background:transparent no-repeat center bottom/cover; transform:translateX(-14px);opacity:0; transition:opacity .3s ease .1s, transform .44s cubic-bezier(.2,.8,.3,1) .1s} .men:hover .pgato,.men:focus-within .pgato{opacity:1;transform:translateX(0)} .pcuerpo{padding:18px 22px 20px;min-width:0} .pcab{display:block;font-family:var(--display);font-weight:900;font-size:21px; letter-spacing:-.02em;color:var(--papel); padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid rgba(239,242,245,.18)} .psubs{display:grid;gap:2px 24px;grid-template-columns:repeat(3,1fr)} .psub{display:block;padding:9px 10px 10px;border-radius:2px; transition:background .16s ease, transform .16s ease} .psub:hover{background:rgba(239,242,245,.09);transform:translateX(3px)} /* ambar 8,7:1 y papel 15,6:1 sobre la tinta: los dos pasan de sobra */ .psub b{display:block;font-family:var(--estrecha);font-weight:700;font-size:11.5px; letter-spacing:.09em;text-transform:uppercase;color:#F2A81C} .psub span{display:block;font-family:var(--texto);font-size:14px;line-height:1.26; color:var(--papel);margin:3px 0 0} @media (max-width:1100px){.psubs{grid-template-columns:repeat(2,1fr)} .panel{grid-template-columns:180px 1fr}} @media (max-width:820px){.panel{display:none}} @media (prefers-reduced-motion:reduce){ .panel,.pgato,.psub{transition:none} .panel,.pgato{transform:none} } /* ── la tarjeta ─────────────────────────────────────────────── La ilustracion es lo mejor que tiene cada tarjeta, asi que NADA la tapa: la banda del texto va debajo, en flujo normal. NORMALES · el bloque mide 3/2, que es el ratio exacto de la ilustracion: con object-fit:cover no se recorta ni un pixel. DOBLES · miden 8/3 y ahi no cabe un 3/2 sin cortar. Van con CONTAIN y el hueco se rellena con el color EXACTO del borde de esa ilustracion (medido pixel a pixel, campo "edge" de colors.json): el relleno es invisible y la ilustracion parece extenderse sola. */ .zona{position:relative;background:var(--z);color:var(--zt);display:flex; flex-direction:column;min-width:0;overflow:hidden;isolation:isolate} .zimg{position:relative;display:block;overflow:hidden;aspect-ratio:3/2; background:var(--ze)} .zimg img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .zban{position:relative;background:var(--zbs);padding:12px 15px 14px; flex:1 1 auto;transition:background .28s ease} .znom{font-family:var(--display);font-weight:900;font-size:20px;display:block; line-height:1.03;letter-spacing:-.018em;text-wrap:balance} .zdes{font-family:var(--estrecha);font-weight:500;font-size:13px;display:block; line-height:1.32;margin:5px 0 0;opacity:.9;max-width:46ch} .zflecha{position:absolute;right:14px;bottom:13px;font-size:19px;line-height:1; opacity:0;transform:translateX(-9px); transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1)} /* ── al pasar por encima: un gato cruza la tarjeta ──────────── No es un efecto, es una secuencia. Cinco huellas caen en diagonal con 55 ms entre cada una; al salir el raton se borran EN ORDEN INVERSO, con el delay calculado al reves — el gato se va por donde vino. Todo transform y opacidad: lo compone la GPU y no mueve el layout. */ .zrastro{position:absolute;inset:0;pointer-events:none;z-index:1} .zhu{position:absolute;width:34px;height:39px;opacity:0; transform:translate(-50%,-50%) rotate(var(--giro)) scale(.55); background:no-repeat center/contain; background-image:url("data:image/svg+xml;utf8,"); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition:opacity .26s ease, transform .34s cubic-bezier(.2,.8,.3,1); transition-delay:calc((4 - var(--i)) * 38ms)} /* al SALIR, del ultimo al primero */ .zona:hover .zhu,.zona:focus-visible .zhu{opacity:.92; transform:translate(-50%,-50%) rotate(var(--giro)) scale(1); transition-delay:calc(var(--i) * 55ms)} /* al ENTRAR, del primero al ultimo */ .zona:hover .zimg img,.zona:focus-visible .zimg img{transform:scale(1.06)} .zban::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:#F2A81C;transform:scaleX(0);transform-origin:left center; transition:transform .42s cubic-bezier(.2,.8,.3,1)} .zona:hover .zban::before,.zona:focus-visible .zban::before{transform:scaleX(1)} .zona:hover .zflecha,.zona:focus-visible .zflecha{opacity:.95;transform:translateX(0)} .zona:focus-visible{outline:3px solid #F2A81C;outline-offset:-3px} @media (prefers-reduced-motion:reduce){ .zimg img,.zban,.zban::before,.zflecha,.zhu{transition:none} .zona:hover .zimg img{transform:none} .zrastro{display:none} } .zona:nth-child(1),.zona:nth-child(8){grid-column:span 2} .zona:nth-child(1) .zimg,.zona:nth-child(8) .zimg{aspect-ratio:8/3} /* en los dobles la ilustracion se ve ENTERA y el hueco lo rellena su color */ .zona:nth-child(1) .zimg img,.zona:nth-child(8) .zimg img{object-fit:contain} @media (max-width:1179px){ .zonas{grid-template-columns:repeat(4,1fr)} .zona:nth-child(8){grid-column:auto} .zona:nth-child(8) .zimg{aspect-ratio:3/2} .zona:nth-child(8) .zimg img{object-fit:cover} .zona:nth-child(1),.zona:nth-child(6),.zona:nth-child(11){grid-column:span 2} .zona:nth-child(6) .zimg,.zona:nth-child(11) .zimg{aspect-ratio:8/3} .zona:nth-child(6) .zimg img,.zona:nth-child(11) .zimg img{object-fit:contain} } @media (max-width:899px){ .zonas{grid-template-columns:repeat(3,1fr)} .zona:nth-child(6),.zona:nth-child(11){grid-column:auto} .zona:nth-child(6) .zimg,.zona:nth-child(11) .zimg{aspect-ratio:3/2} .zona:nth-child(6) .zimg img,.zona:nth-child(11) .zimg img{object-fit:cover} .zona:nth-child(1),.zona:nth-child(8){grid-column:span 2} .zona:nth-child(8) .zimg{aspect-ratio:8/3} .zona:nth-child(1) .zimg,.zona:nth-child(8) .zimg{aspect-ratio:8/3} } @media (max-width:619px){ .zonas{grid-template-columns:repeat(2,1fr)} .zona:nth-child(8){grid-column:auto} .zona:nth-child(8) .zimg{aspect-ratio:3/2} .zona:nth-child(8) .zimg img{object-fit:cover} .zona:nth-child(1){grid-column:span 2} .znom{font-size:18px} } @media (max-width:419px){ .zonas{grid-template-columns:1fr} .zona:nth-child(1){grid-column:auto} .zona:nth-child(1) .zimg{aspect-ratio:3/2} .zona:nth-child(1) .zimg img{object-fit:cover} } /* ── rios de seccion ── */ .seccion{padding:22px 0 26px;border-bottom:3px solid var(--tinta)} .rios{display:flex;gap:34px;flex-wrap:wrap} .rios>div{flex:1 1 420px;min-width:300px} .rio{display:flex;gap:12px;align-items:flex-start;padding:9px 0; border-bottom:1px solid var(--filete)} .rio img{flex:0 0 112px;width:112px} .rio span{font-family:var(--estrecha);font-weight:600;font-size:16px;line-height:1.22} /* ── listas numeradas ── */ .cols{display:flex;gap:34px;flex-wrap:wrap;padding:22px 0} .cols>div{flex:1 1 320px;min-width:270px} ol.num{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)} ol.num li{border-bottom:1px solid var(--filete)} ol.num a{display:flex;gap:11px;align-items:baseline;padding:8px 0; font-family:var(--estrecha);font-weight:600;font-size:16px;line-height:1.22} ol.num b{font-family:var(--display);font-weight:900;font-size:19px;color:var(--azul); flex:0 0 26px;font-variant-numeric:tabular-nums} ol.num a:hover{text-decoration:underline;text-decoration-color:var(--azul); text-decoration-thickness:2px;text-underline-offset:3px} /* ── anuncios ── */ .ad{margin:0} .adlab{font-family:var(--estrecha);font-size:9.5px;letter-spacing:.16em;color:var(--pizarra); display:block;margin:0 0 5px;text-transform:uppercase} .adcaja{background:#fff;border:1px solid #d9dde0;padding:22px 16px;text-align:center; font-family:system-ui,Arial,sans-serif} .adcaja.ancho{padding:26px 16px} .adt{font-size:15px;font-weight:700;color:#1a1a1a} .adx{font-size:12.5px;color:#5a5a5a;margin:5px 0 12px} .adb{display:inline-block;background:#2b6cb0;color:#fff;font-size:12px;font-weight:700; padding:8px 22px;border-radius:3px} /* ── autor ── */ .autor{display:flex;gap:18px;align-items:center;padding:22px 0 26px; border-bottom:3px solid var(--tinta);flex-wrap:wrap} /* Redonda y sin marco. El marco de ventana es el idioma de las FOTOS DE ARTICULO, y una persona no es una ventana: ponerselo era forzar el sistema. Ademas, en una pagina donde todo es rectangular, el circulo llama la atencion justo donde interesa — la cara de quien firma. Alfre lo pidio el 19 ago 2026 y tenia razon. */ .autor .cara{flex:0 0 96px;width:96px;height:96px;object-fit:cover;display:block; border-radius:50%} .autor p{margin:0;max-width:62ch;font-size:16.5px} .autor b{font-family:var(--display);font-weight:900;font-size:19px;display:block; margin-bottom:3px} /* El nombre ES el enlace a la pagina de autor. Se subraya en ambar para que se vea que lleva a algun sitio: una firma que no parece enlace no se pincha, y esa pagina es la que sostiene el E-E-A-T del blog entero. */ .autor b a{border-bottom:2px solid #F2A81C} .autor b a:hover{color:#4E8CC2} /* El oficio, debajo del nombre. Es la linea que convierte "un tipo con un blog" en "alguien que hace esto" — y va en TODAS las paginas del sitio. */ .autor .rolfirma{display:block;font-family:var(--estrecha);font-weight:700; font-size:12px;letter-spacing:.11em;text-transform:uppercase; color:#424E59;margin:0 0 7px} /* ── pie ── */ /* ── EL PIE ─────────────────────────────────────────────────── En tinta, como los otros bloques que no son "una lista mas de articulos". El pie cierra la pagina; en el gris de fondo se diluia. Contrastes sobre la tinta: papel 15,6:1 · ambar 8,7:1 · gris claro 6,6:1. */ footer{background:var(--tinta);color:var(--papel);max-width:1120px; margin:34px auto 0;font-family:var(--estrecha);position:relative} footer .env{padding-top:30px;padding-bottom:34px} /* La marca del pie, al tamano que le corresponde: el icono al mismo alto que el logo de la cabecera (76 px) y el nombre a 34. Sobraba sitio y la marca se veia timida justo donde deberia cerrar la pagina. */ .pie-alto{position:relative;min-height:96px; border-bottom:1px solid rgba(239,242,245,.16);margin:0 0 24px;padding:0 0 24px} .pie-marca{display:flex;align-items:center;gap:20px} .pie-marca svg{display:block;flex:0 0 auto} .pie-nom{margin:0;font-family:var(--display);font-weight:900;font-size:34px; letter-spacing:-.024em;line-height:1} .pie-lema{margin:8px 0 0;font-size:16px;color:#F2A81C;letter-spacing:.01em} @media (max-width:619px){.pie-nom{font-size:26px}.pie-lema{font-size:14px}} footer .rot{color:#F2A81C;margin:0 0 12px} footer .mapa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px 24px; font-size:14px;color:var(--papel);margin:0 0 20px} footer .mapa a{opacity:.82;transition:opacity .15s ease,color .15s ease} footer .mapa a:hover{opacity:1;color:#F2A81C} /* Las paginas de sitio van en su propia fila: son de otra naturaleza que las categorias y mezclarlas con ellas las esconde. */ .pie-sitio{display:flex;justify-content:space-between;align-items:flex-end; gap:20px;flex-wrap:wrap; border-top:1px solid rgba(239,242,245,.16);padding-top:20px;margin:0 0 22px} .pie-paginas{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px} .pie-paginas a{color:var(--papel);opacity:.8; transition:opacity .15s ease,color .15s ease} .pie-paginas a:hover{opacity:1;color:#F2A81C} /* El correo, destacado. Para un dominio nuevo con afiliados, un contacto visible es una senal de que hay alguien detras — como la foto del autor. */ .pie-correo{font-family:var(--display);font-weight:900;font-size:19px; letter-spacing:-.015em;color:#F2A81C;white-space:nowrap; border-bottom:2px solid transparent;padding-bottom:2px; transition:border-color .18s ease} .pie-correo:hover{border-bottom-color:#F2A81C} .pie-bajo{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:1px solid rgba(239,242,245,.16);padding-top:18px} footer .legal{font-size:12.5px;color:#8FA1AF;max-width:70ch;line-height:1.5;margin:0} footer .legal.copy{white-space:nowrap} @media (max-width:899px){footer .mapa{grid-template-columns:repeat(2,1fr)}} @media (max-width:619px){footer .mapa{grid-template-columns:1fr}} /* ── las huellas del fondo ──────────────────────────────────── Capa fija detras de todo. Solo anima OPACIDAD: cero reflow, cero CLS, y Mediavine sigue midiendo bien si el anuncio se vio. */ .huellas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} /* Cada rastro vive SOLO en su margen. El contenido mide 1120 px centrados, o sea que el margen izquierdo acaba en calc(50% - 560px) y el derecho empieza en calc(50% + 560px). Asi las huellas no pisan el texto nunca, salga el ancho de ventana que salga. */ .rastro{position:absolute;top:0;bottom:0} .r-izq{left:0;right:calc(50% + 560px)} .r-der{left:calc(50% + 560px);right:0} /* Por debajo de 1360 px quedan menos de 120 px por lado y una huella de 52 no cabe: se apagan solas. */ @media (max-width:1360px){.huellas{display:none}} .hu{position:absolute;width:var(--tam);height:calc(var(--tam) * 1.15);opacity:0; background:no-repeat center/contain; background-image:url("data:image/svg+xml;utf8,"); animation-duration:var(--seg);animation-timing-function:linear; animation-iteration-count:infinite} /* El keyframe de cada rastro se calcula en keyframes_huellas(): cada huella dura CUATRO intervalos, que es lo que hace que siempre se vean cuatro. Antes duraba un 17% fijo y con 9 huellas eso era 1,5 intervalos. */ @keyframes pisada-izq{0%{opacity:0}1%{opacity:var(--op)}22.22%{opacity:var(--op)}33.33%{opacity:calc(var(--op) * .55)}44.44%{opacity:0}100%{opacity:0}}.r-izq .hu{animation-name:pisada-izq}@keyframes pisada-der{0%{opacity:0}1%{opacity:var(--op)}25.00%{opacity:var(--op)}37.50%{opacity:calc(var(--op) * .55)}50.00%{opacity:0}100%{opacity:0}}.r-der .hu{animation-name:pisada-der} /* en movil la pantalla es estrecha: la misma huella se comeria la pagina */ /* en movil la pantalla es estrecha: las mismas huellas se comerian la pagina */ @media (max-width:619px){.hu{width:calc(var(--tam) * .68);height:calc(var(--tam) * .78)}} @media (prefers-reduced-motion:reduce){.huellas{display:none}} /* ── el cursor: una pata de gato ────────────────────────────── PNG y 24 px a proposito: los cursores SVG fallan en Safari y por encima de 32 px hay navegadores que no los pintan. El punto activo va en la almohadilla de arriba a la izquierda, no en el centro. Sobre un enlace cambia a ambar: no se pierde la senal de "esto se pulsa". */ body{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFD0lEQVR42pVVW2xUVRRd+86dV2eYRzstpZ22wxQKhghUEAEFPioPoTxCBBGQV4zxx0giL42kfIiRH/0wPkIUNaKpFjEo0ggmKDUtUKiUikChUArlUTu20Fo6vffc5YczWLC1uJOTe869e6+z736sDfQjJKWvdyRt96ObFL0/cBFhYv8kgBEAakSkHIAimQPgMQDti8vK9ouI6m3zn5LwUiPpjpv8fm/5fq7b9AorKo/QIN8jufjS5eab727fwT3flbPbZBXJwUm7gcC1ixcvukpKSjSSmz/aWUpAi9vcgwxxetSuPXvZEmvjqMLxhO4yAD2+Zes2muSuhL0OQPoF731uunLt/ANjxilfKFOFowV0+VI5ffY8te7lzRbsbiscLWBGOGK5/WlmRdVRRTLaV560XjG3SD5IcgXJeZebm1Pb2to0h8Mh8Xg3XC4Xmq9e1SorK8Uf8EtPTw9ERAzTlMbGSxqAPJKBsrIyLZETDQB0kloC/PXjJ05uPHjwR23CIxMxckSBZbfbYRiGOBxOdHXdRmpq0Apnh3G8pkZLSfFARCAims/nI4D3L166Ely0aNH1uMk3ReTjO1EhObeiqpqD0gYrOFIMzeVVO0vLuGXrNgIwXb5UAxDz09IyHjleS+guMyUQMmFzGuMnT7UuX73B519Yy8iwkVy8fCXbbnWS5EIAgIigo+v2vhlz5iu7x2/k5I+gL5TJ4aPG8OqNVuud7Tu4bOUa7tlbzq64+a0iPyn/4SCnz5nPZaue5YXGJq5dv4mAptKz8yzA1rPkmdWq22AtSRvsuo76hkunR45+iIGMLBXKymV6dh7ThuTwaE0tSb5N8i2ST/UqiKXxHvNLkp+3xNpbR44uZHBwtpURjjA9O8/KCEd48tSZbpIFmqkUQqG0WCgUsuLxOJ1OJwzDYDAQRDAQjAFYC+BDAKkkPyC5A0DAYbe9ISJL29raz7lcbliWZZFMOgBTKSSTjKDPU7pp48ZHi2fPjt8wDJrd3bJxw3rbsKE5t9pudh46dvzY5Koj1WhoaAAA5Ofnr544YTz+aO/4Oej3OsaOGYMT1dUYkpvLa1eumE8UF9sKhg8/C6ABJLV9++qdJnmgovIwX3xpAz/74itaJGtq6zijeAHtHr8lTo9h9/gNu8dvJPbWjDnzefLX39jUfI2z5i1kWmaY0x6fxabm6/8kOUlUJSUlOsnnEmHYXXe63hySG1V2T8DMzI1ycM7Qu1ZmbpR2b8DMzI2qU2fOsUex6Uj1Ly2dXbfrSK66p3nvZsPbPar06RVrqLkHmVmRYQxl5fa5siLDaHMPMhcvX0VTcQ9Jf7KLk+ByD1UIgPSjNbUX5s5f4FZKUURkAP6iruvyzde7OyeMG5sjIu0kdREx71BFUkREAUhtaWlxd3Z2QtO0AdlX0zR0dHTg99ZWL4DsRMitu7go6Uzi2ZKRnt7h9XqZLLsB/gBer5fpoVAHgBuJmcB/XSAiTPBSa2Hh2KqioiKJxWLK4XD0C+5wOBCLxVRRUZEUFo6tEpHWBAb788aGv+l20qmz5xmOFig9xWf0V0V6is8IRwvUqbPnSXIS+hmpfc4FkkvqTtdzZvEC6ik+dW8f6Ck+NbN4AetO15Pkkr5mCvqbPiRtCU6f/md3/LVDP1VMOFx9DI2NjQCASCSCiQ+Px9RpU456XM5XReRA0ua+Luh9SWI/BcBkAPmJzw0AKkWk4l7d/yUDxvM+dP4Cj5omhvdnWBEAAAAASUVORK5CYII=") 6 4, auto} a,button,summary,[role="button"]{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFOklEQVR42o2WbYyU1RXHf+fcmX2BXXZ2FlrS3ZnZBSp2CzTQAHZrE9/FWikNopZYrTWmjfUDSU2aFBtoY41N00rSkpJa0CYSkRo0ROJbVLQN7lYbFK1UEHYp1N2FHXZnd/ZlZp57Tz/MbAV0gZPc58N5nuf8z/3fc/7nwtQmAHrGqvjc5EPP+fazzJ0nuImAkb7ZqhLfMZ+oE3KHBcz4QspI3mgkUpDrBsJUIDKFT1paWqoHJ/TZ2y/X6zouNZ7fL+x6K2wpFuy19pQ8estlMuPjQXiq0zqjvFs1Otp9svJvOA8rKGRqNoAyLf3zjd9vNXuxuWC7m0u2p8Xf+c20ZdrS1rM1ZbanuWQvNhe23d9qNY2ppyuZxs5N+kyKVCA4yUWvC5ZJNWzbfGdIxA0dHBVXG0OS0y20zYLrlxinTosrTYh+bW4IrxyUL/X8N/GESi5rlXMCjE/ODlEIRstCb613BEutTCdJ1tegxQipjkGxBM2N6OWXmBTGkKpYhU5BFjSrOieZYJnEmjWogJ+MHQNUhBDq0g9d2S4/XbHY9PV/CfuPEcaLxrRqpFCC2mrI5gknsrC4DR0tgll5571DwXyVbJmfpvGFvZm+WEP4XTR8/HEzVBQILnXTrVe73X/5YRSqqy2A6F1/FJ33eVi/Nvgwgul05L4tzh3qE156IPLRhBCrNTvwkbhvP6Lyq1vgqoXGu0eFdduVo722upQ7tssBJGY1bNp6D3ObG0M4NSSxmCBL58C9j6vlhp0GVd38fEy37Q3PfdRHZ/9QfHG6CX2vR/XuP4msW2HcfYMFPwZf/mKI5s8S2dlF+/Zv5R4VgPnzUwf3/oxLZ9Ra8AENBk7h2l8rnfvlDzVJiSZGfadMHH9KgDA9s3ZWI6sGRyxqque6t38ZmhqnYyWPqGAIcsWDUtj/vl+kANkRskNjEqrjWKEEccXyBeF0nuzOm4+tm8hGWzFNukTmz5pIbyMiceqEPRzl/rO2qd4OI4IqQaVcOiLlBAFiAgxkZcfvX9avb77HF2Y6jLjII38Vd+iEDd87mnpj7fXacUW70DrTAKFnQO7aexBeOpD++wc9VvV2t7CqwxgfwJJJi7r+7dzhfj5cw8dHBNAV8+bFX80Wn1u9XK+5cYmx76Cx5RW4bB5s+h4sbQuGM///HlXAi/tnj8qPH4PeIdh+n7GkDQ71wo8ec3QdstWSP7ZLJnVnwwZiv3g4/QNUlhFZcvkCVu65P0hTPTY4gpNzRMUMGuvxp/PINQ+pftjL8a+2UXO4X/r7suG3Ml4p0zPFTSv8TUumdzzzE269emHw2Ryu0lSfsmIETQ34V99Xd9Nv2D12OnYHHM0LeCvvM0x2sgG6Yw3OW2b2gjQrl881hvPoVMEBqmIwnEeXzTG+0mpXNTR4UcFbuYHDmVIBwG1P48GSsxNWWxO3sphcwAyoiRuzG6jL5WLNPpytqHoOrUDpZF+OkYmSmFwEgAATJbG+HCMw1q+KTQrdpwEMFXoH3umWN7uOiMyoM1+Mpg5ejGBGnfmuIyLvdMubQu+AGToVAIAEkPER2bh+p5AdFm2qtyjy4MPZK/LQVG9Rdlh0/U5hfEQ2hsqwutBEU4Fg8ZbbOha5JzfdbiydEwJq4aw+CKJvHVVd94Sw74D/rpRO7JisnAsBADgVfNDUtY2fkwdXLJJlV7ZD68zyy54BeO0DeOGA/WPwpD2g4fjLwXCU5wAXA0Dl4uDLZLZ9gyrriE3zcwGiMXeEouyD7r9JmfDPDH4x5qTCmfIJwVrxyflvJgD8D3j+S19oAyBlAAAAAElFTkSuQmCC") 6 4, pointer} input,textarea,select{cursor:auto} /* ── 1 · el gato del logo parpadea cada 7 s ─────────────────── Los ojos son las dos unicas elipses ambar del SVG, asi que se cogen por el atributo sin tocar los archivos del logo. transform-box:fill-box hace que el origen del giro sea la propia figura y no el lienzo entero. */ header.top svg ellipse[fill="#F2A81C"]{ transform-box:fill-box;transform-origin:center;animation:parpadeo 7s infinite} /* El ojo mide 6 px en pantalla. El primer intento cerraba 154 ms y era sencillamente invisible: no fallaba, es que no daba tiempo a verlo. Y el segundo, con ciclo de 12 s, tardaba una eternidad en arrancar. Ciclo de 7 s: parpadeo lento a los 1,9 s y doble a los 4,8. 1% = 70 ms. */ @keyframes parpadeo{ 0%,26% {transform:scaleY(1)} 27.5% {transform:scaleY(.06)} 34% {transform:scaleY(.06)} 36% {transform:scaleY(1)} 68% {transform:scaleY(1)} 69% {transform:scaleY(.06)} 71.5% {transform:scaleY(.06)} 73% {transform:scaleY(1)} 74% {transform:scaleY(.06)} 76.5% {transform:scaleY(.06)} 78%,100% {transform:scaleY(1)} } /* Aqui hubo zarpazos dibujados a mano. Alfre los quito el 19 ago 2026, y la regla que los sujetaba llevaba un !important que ademas MACHACABA el separador de seccion de 3 px de .hombro y .dig. Por eso todas las lineas de la pagina parecian iguales. Se quita entera: cada bloque ya tiene su separador correcto mas abajo. */ /* ── 3 · el gato dormido en el filete ───────────────────────── El filete es la repisa y el gato esta tumbado en ella. Dibujado a mano en SVG: 600 bytes, sin depender de ningun archivo. */ /* Aqui dormia el gato, que se mudo al canto del footer. Queda como lo que siempre fue: el separador del bloque del autor. Los 126 px de margen eran para dejarle sitio al gato; sin el, sobraban. */ .repisa{position:relative;margin:34px 0 0;height:3px; border-top:3px solid var(--tinta);background:none} /* El gato duerme en el CANTO del footer. La ilustracion mide 3:2 y el cuerpo apoya al 54,6% de su altura: por debajo solo cuelgan la pata y la cola. Subiendolo ese 54,6% (76 px de los 140 que mide), el borde de arriba del bloque cae exactamente en su linea de apoyo: el cuerpo queda fuera, sobre el gris, y la pata cuelga dentro del bloque oscuro. */ .dormido{position:absolute;right:5%;top:-76px;width:210px;height:auto; display:block;pointer-events:none;z-index:2} @media (max-width:899px){.dormido{width:168px;top:-61px}} @media (max-width:619px){.dormido{width:132px;top:-48px;right:3%}} /* ── el hero, visto a traves de la ventana ──────────────────── El mismo marco y el mismo alfeizar que el icono del logo. Dice que estas mirando la historia desde donde la mira el gato — y de paso saca al hero de la plantilla foto-arriba/texto-abajo que usa absolutamente todo el mundo. */ .lead .ventana{position:relative;display:block;background:var(--tinta); padding:11px 11px 0;margin:0 0 26px} .lead .ventana img{display:block;width:100%;height:auto} /* El alfeizar en ambar: el marco sigue siendo negro (hace de sombra y da profundidad, es la ventana del logo) y el naranja entra donde tiene sentido fisico, que es donde da el sol. Elegido por Alfre el 19 ago 2026 entre cuatro versiones. */ .lead .ventana::after{content:"";position:absolute;left:-9px;right:-9px;bottom:-9px; height:11px;background:#F2A81C;border-radius:2px} /* la etiqueta se monta en la esquina y rompe la pila */ .lead .etiq{position:absolute;left:-9px;bottom:-9px;z-index:2; background:#5C9CD1;color:var(--tinta); font-family:var(--estrecha);font-weight:700;font-size:12px;letter-spacing:.12em; text-transform:uppercase;padding:9px 15px 10px} .lead .ventana:hover img{filter:brightness(1.04)} .lead .ventana img{transition:filter .18s ease-out} /* el hombro repite el marco, mas fino, para que sea el mismo idioma */ .hom img{border:6px solid var(--tinta);border-bottom:9px solid #F2A81C} /* ── al pasar por encima, un subrayado ──────────────────────── Aqui hubo un zarpazo de cuatro unas. Cruzaba las letras y se leia como un tachon; y aunque se bajara, salir en los 87 enlaces lo convertia en ruido. Elegido por Alfre el 19 ago 2026 entre cuatro versiones. Se descubre de izquierda a derecha con clip-path: ni reflow ni CLS. */ .lead .lead-t a,.hom b,.digesto .dtit,.rio span,.top nav a{position:relative} .lead .lead-t a::after,.hom b::after,.digesto .dtit::after,.rio span::after, .top nav a::after{ content:"";position:absolute;left:-4px;right:-4px;bottom:-6px;height:2px; background:#F2A81C;opacity:.85;clip-path:inset(0 100% 0 0); transition:clip-path .22s cubic-bezier(.2,.7,.3,1)} .lead .lead-t a:hover::after,.hom:hover b::after,.digesto a:hover .dtit::after, .rio:hover span::after,.top nav a:hover::after{clip-path:inset(0 0 0 0)} /* el titular grande pide un trazo mas grueso y un poco mas separado */ .lead .lead-t a::after{height:3px;bottom:-10px} /* y la etiqueta de categoria da un paso adelante */ .dcat{transition:transform .15s ease-out} .digesto a:hover .dcat{transform:translateX(5px)} /* los numeros de las listas crecen un punto al pasar */ ol.num b{transition:transform .15s ease-out;display:inline-block;transform-origin:center} ol.num a:hover b{transform:scale(1.25)} @media (prefers-reduced-motion:reduce){ .lead .lead-t a::after,.hom b::after,.digesto .dtit::after,.rio span::after, .top nav a::after{transition:none} } /* ── el gato que arana, en los sitios donde sobra hueco ────── Dos sitios elegidos porque estaban VACIOS, no por decorar: el hueco muerto que deja la columna lateral bajo "Most read", y la repisa de antes de la firma, donde ya duerme el otro. Uno arana y el otro duerme. */ .gatoarania{display:block;pointer-events:none} .lado .gatoarania{width:172px;height:152px;margin:22px 0 0 auto;opacity:.92} .repisa .gatoarania{position:absolute;left:9%;bottom:1px;width:134px;height:118px} @media (max-width:899px){.lado .gatoarania{display:none}} @media (max-width:619px){.repisa .gatoarania{width:96px;height:85px;left:4%}} /* ── los gatos, colocados SOBRE algo que la pagina ya tiene ── Nunca flotando en un hueco: un gato encima de un hueco es un adhesivo; enganchado a un borde, vive ahi. */ .mono{display:block;pointer-events:none;position:absolute} /* 2 · asomando por el borde de arriba de la franja de categorias */ .zonas{position:relative} .mono-borde{right:7%;top:-104px;width:156px;height:auto;z-index:4} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ── LA COLUMNA DEL ARTICULO ────────────────────────────────── Texto y barra lateral. El texto se limita a 68 caracteres por linea, que es donde el ojo deja de perder el renglon al saltar de una a otra. */ .art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:46px; align-items:start;padding:26px 0 0} .art .lado{position:sticky;top:96px} @media (max-width:979px){.art{grid-template-columns:1fr;gap:34px} .art .lado{position:static}} /* ── las migas ── */ .migas{display:flex;flex-wrap:wrap;gap:8px;align-items:center; font-family:var(--estrecha);font-weight:700;font-size:11.5px; letter-spacing:.11em;text-transform:uppercase;color:var(--pizarra); margin:0 0 14px} .migas a{color:#4E8CC2} .migas a:hover{color:var(--tinta)} .migas span{opacity:.5} /* ── la cabecera ── */ .arttit{font-family:var(--display);font-weight:900; font-size:clamp(30px,4.4vw,46px);line-height:1.0;letter-spacing:-.026em; margin:0;text-wrap:balance;max-width:20ch} .artent{font-size:19px;line-height:1.45;margin:14px 0 0;max-width:60ch; color:#2b3135} .artfirma{display:flex;align-items:center;gap:12px;margin:20px 0 22px; padding:0 0 20px;border-bottom:3px solid var(--tinta)} .artfirma img{width:46px;height:46px;border-radius:50%;object-fit:cover; flex:0 0 auto} .artfirma p{margin:0;font-family:var(--estrecha);font-size:13.5px; color:var(--pizarra)} .artfirma b{font-family:var(--display);font-weight:900;font-size:16px; color:var(--tinta);display:block;line-height:1.2} /* ── la respuesta rapida ────────────────────────────────────── En TINTA: es lo primero que busca quien llega de Google y tiene que distinguirse del cuerpo a la primera ojeada. */ .respuesta{background:var(--tinta);color:var(--papel);padding:22px 24px 24px; margin:0 0 26px} .respuesta .rot{color:#F2A81C;display:block;margin:0 0 8px} .respuesta p{margin:0;font-size:19px;line-height:1.45} .respuesta strong{color:#F2A81C;font-weight:600} /* ── el indice ── */ .indice{background:var(--papel);border-left:3px solid #F2A81C; padding:16px 20px 18px;margin:0 0 30px} .indice .rot{display:block;margin:0 0 8px} .indice ol{margin:0;padding:0 0 0 18px;font-family:var(--estrecha); font-weight:600;font-size:14.5px} .indice li{margin:5px 0} .indice a{color:var(--tinta)} .indice a:hover{color:#4E8CC2} /* ── el cuerpo ── */ .cuerpo{max-width:68ch} .cuerpo h2{font-family:var(--display);font-weight:900;font-size:29px; letter-spacing:-.022em;line-height:1.08;margin:36px 0 12px; padding:0 0 10px;border-bottom:2px solid var(--tinta);text-wrap:balance} .cuerpo h3{font-family:var(--display);font-weight:900;font-size:21px; letter-spacing:-.018em;margin:26px 0 8px} .cuerpo p{margin:0 0 15px;font-size:17.5px;line-height:1.62} .puntos{margin:0 0 18px;padding:0;list-style:none} .puntos li{position:relative;padding:0 0 0 24px;margin:0 0 9px; font-size:17px;line-height:1.5} .puntos li::before{content:"";position:absolute;left:2px;top:.62em; width:9px;height:9px;background:#F2A81C} /* ── las dos cajas del cuerpo ───────────────────────────────── Distinto color para distinta funcion: el DATO es algo que hay que medir o recordar, el CONSEJO es que hacer. Del mismo color darian igual. */ .dato,.tip{margin:22px 0 24px;padding:18px 22px 20px} .dato{background:#5C9CD1;color:var(--tinta)} .dato .rot{color:#142A5C} .tip{background:#F2A81C;color:var(--tinta)} .tip .rot{color:var(--tinta);opacity:.7} .dato p,.tip p{margin:6px 0 0;font-size:17.5px;line-height:1.5} /* ── las cajas de producto ───────────────────────────────────── Llevan el mismo marco que las fotos del blog —negro con la base ambar— para que se lean como parte del sitio y no como un anuncio pegado. */ .prod{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px; background:var(--papel);border:3px solid var(--tinta); border-bottom-width:9px;border-bottom-color:#F2A81C;padding:20px;margin:24px 0} .prodimg img{width:100%;height:auto;display:block} .prodtxt h3{font-family:var(--display);font-weight:900;font-size:21px; letter-spacing:-.018em;margin:4px 0 2px;line-height:1.1} .prodprecio{font-family:var(--estrecha);font-weight:700;font-size:15px; color:#4E8CC2;margin:0 0 10px} .prodtxt p{margin:0 0 12px;font-size:16.5px;line-height:1.5} .prod .puntos li{font-size:15.5px;margin:0 0 6px} .prodbtn{display:inline-block;background:var(--tinta);color:var(--papel); font-family:var(--estrecha);font-weight:700;font-size:13.5px; letter-spacing:.06em;padding:11px 20px;margin:4px 0 0; border-bottom:3px solid #F2A81C;transition:background .16s ease} .prodbtn:hover{background:#142A5C} @media (max-width:619px){.prod{grid-template-columns:1fr}} /* ── la tabla comparativa ── */ .tablacaja{overflow-x:auto;margin:24px 0} .comp{border-collapse:collapse;width:100%;min-width:520px; font-family:var(--estrecha);font-size:15px} .comp th{background:var(--tinta);color:var(--papel);text-align:left; padding:11px 14px;font-weight:700;font-size:12px;letter-spacing:.09em; text-transform:uppercase} .comp td{padding:11px 14px;border-bottom:1px solid var(--filete)} .comp tbody tr:nth-child(odd){background:var(--papel)} .comp td:first-child{font-weight:700} /* ══ LOS COMENTARIOS ═════════════════════════════════════════ Van DESPUES del autor: primero se sabe quien escribe, luego se discute con el. Y el bloque entero se lee como una conversacion, no como un formulario pegado al final. */ /* SIN filete propio arriba: el bloque del autor ya cierra con el suyo de 3 px, y los dos juntos dibujaban una raya doble. Un separador entre dos bloques lo pone UNO de los dos, nunca los dos. */ .coms{margin:0;padding:34px 0 0} .coms h2{font-family:var(--display);font-weight:900;font-size:29px; letter-spacing:-.022em;margin:0 0 8px;text-wrap:balance} .comintro{margin:0 0 22px;font-size:16.5px;line-height:1.5;max-width:62ch; color:var(--pizarra)} .comlista{list-style:none;margin:0 0 34px;padding:0} .com{padding:16px 0 18px;border-bottom:1px solid var(--filete)} .com p{margin:8px 0 0;font-size:16.5px;line-height:1.56;max-width:66ch} .comcab{display:flex;align-items:center;gap:11px} .comcab b{font-family:var(--display);font-weight:900;font-size:17px; letter-spacing:-.014em} .comfe{font-family:var(--estrecha);font-weight:700;font-size:11.5px; letter-spacing:.11em;text-transform:uppercase;color:var(--pizarra)} /* EL AVATAR ES UNA HUELLA, NO UN GRAVATAR. Gravatar es una peticion a un servidor de fuera por comentario, y le manda el hash del correo de cada lector. Esto son cero peticiones y cero datos fuera. El color sale del nombre, asi que el mismo nombre lleva siempre el mismo. */ .pata{flex:0 0 34px;width:34px;height:34px;border-radius:50%; background:var(--pa) url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:center; background-size:17px 20px} .autorpata{--pa:#F2A81C;background-color:#F2A81C; background-image:url("data:image/svg+xml;utf8,")} /* La respuesta de Alfre, sangrada y con el filete ambar: en un hilo hay que ver de un vistazo cual es la voz de la casa. */ .respuesta{margin-left:34px;padding-left:20px;border-left:3px solid #F2A81C; border-bottom:none} .respuesta .comfe{color:#F2A81C} .comform{background:var(--papel);padding:22px 24px 24px; border-bottom:9px solid #F2A81C} .comform .rot{display:block;margin:0 0 14px} .comform label{display:block;font-family:var(--estrecha);font-weight:700; font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--pizarra);margin:0 0 14px} .comdos{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .comform input,.comform textarea{display:block;width:100%;box-sizing:border-box; margin:6px 0 0;font-family:var(--cuerpo);font-size:16.5px;padding:11px 13px; border:2px solid var(--tinta);background:var(--fondo);color:var(--tinta)} .comform textarea{resize:vertical} .comform input:focus,.comform textarea:focus{outline:3px solid #F2A81C; outline-offset:-2px} .comenvia{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .comform button{font-family:var(--estrecha);font-weight:700;font-size:13.5px; letter-spacing:.07em;text-transform:uppercase;padding:12px 26px;border:none; cursor:pointer;background:var(--tinta);color:var(--papel); border-bottom:3px solid #F2A81C;transition:background .16s ease} .comform button:hover{background:#142A5C} .comnota{font-family:var(--estrecha);font-size:13px;color:var(--pizarra); max-width:38ch;line-height:1.35} @media (max-width:619px){.comdos{grid-template-columns:1fr} .respuesta{margin-left:0;padding-left:14px}} /* ── las preguntas ───────────────────────────────────────────── Con
: se abren sin una linea de JavaScript, y quien llega buscando UNA respuesta la encuentra sin leerse el articulo entero. */ .faq{margin:38px 0 0} .faq h2{font-family:var(--display);font-weight:900;font-size:29px; letter-spacing:-.022em;margin:0 0 14px;padding:0 0 10px; border-bottom:2px solid var(--tinta)} .faqit{border-bottom:1px solid var(--filete)} .faqit summary{cursor:pointer;list-style:none;padding:14px 30px 14px 0; font-family:var(--display);font-weight:900;font-size:18px; letter-spacing:-.014em;position:relative} .faqit summary::-webkit-details-marker{display:none} .faqit summary::after{content:"+";position:absolute;right:4px;top:12px; font-size:22px;color:#F2A81C;transition:transform .2s ease} .faqit[open] summary::after{transform:rotate(45deg)} .faqit p{margin:0 0 16px;font-size:17px;line-height:1.55;max-width:64ch} /* ── los relacionados ── */ .relscaja{max-width:1120px;margin:0 auto} .rels{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:0} .rel{display:block;background:var(--papel);transition:background .16s ease} .rel:hover{background:#5C9CD1} .rel img{width:100%;height:auto;display:block} .rel span{display:block;padding:11px 13px 14px;font-family:var(--display); font-weight:900;font-size:15px;line-height:1.18;letter-spacing:-.014em} @media (max-width:899px){.rels{grid-template-columns:repeat(2,1fr)}} /* ── el gato del articulo ────────────────────────────────────── UNO solo, apoyado en el filete que cierra la firma. En un articulo manda el texto: cuatro gatos aqui serian ruido. */ .artcab{position:relative} /* El que asoma: se agarra con las patas al filete que cierra la firma, en vez de sentarse encima. Es 3:2, asi que a 132 de ancho mide 88 de alto. */ .gatoart{position:absolute;right:0;bottom:0;width:132px;height:auto; display:block;pointer-events:none} @media (max-width:979px){.gatoart{display:none}} /* ── LA CABECERA DE LA CATEGORIA ────────────────────────────── La ilustracion a lo grande con SU color de fondo, el mismo que tiene en la portada: quien llega desde alli reconoce donde ha entrado sin leer nada. */ .catcab{max-width:1120px;margin:0 auto;background:var(--cbg);color:var(--ctx); display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center; overflow:hidden} .catcab .txt{padding:34px 34px 38px} .catcab img{width:100%;height:100%;object-fit:cover;display:block} .catnom{font-family:var(--display);font-weight:900; font-size:clamp(32px,4.6vw,50px);line-height:1;letter-spacing:-.028em; margin:8px 0 0} .catdes{margin:14px 0 0;font-size:19px;line-height:1.45;max-width:46ch; opacity:.92} @media (max-width:759px){.catcab{grid-template-columns:1fr} .catcab .foto{order:-1;aspect-ratio:3/2}} /* ── CADA SUBCATEGORIA ──────────────────────────────────────── El pilar arriba y grande, sus nodos debajo. Esa jerarquia no es adorno: es el mapa topico, y se lee igual de bien con los ojos que con un robot. */ .subs{max-width:1120px;margin:0 auto;padding:8px 0 0} .sub{padding:26px 0 24px;border-bottom:1px solid var(--filete)} .sub:last-child{border-bottom:none} .subcab{display:flex;gap:18px;align-items:flex-start} .subnum{font-family:var(--display);font-weight:900;font-size:34px; line-height:.9;color:#F2A81C;flex:0 0 auto;min-width:52px} .subcab .rot{margin:0 0 2px;display:block} .subcab h2{font-family:var(--display);font-weight:900;font-size:25px; line-height:1.1;letter-spacing:-.02em;margin:0;max-width:34ch; text-wrap:balance} .subcab h2 a{color:var(--tinta)} .subcab h2 a:hover{color:#4E8CC2} .subnodos{list-style:none;margin:14px 0 0 70px;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:2px 30px} .subnodos li{border-bottom:1px solid var(--filete)} .subnodos a{display:block;padding:9px 0;font-size:16px;line-height:1.3} .subnodos a:hover{color:#4E8CC2} @media (max-width:759px){.subnodos{grid-template-columns:1fr;margin-left:0} .subcab{gap:12px}.subnum{font-size:26px;min-width:38px}} /* AQUI NO VA UN GATO SUELTO. Puse uno asomando por el canto de la cabecera y caia justo encima de la ilustracion de la categoria: dos gatos en 200 px. Es el mismo fallo que ya hubo en la portada con el bloque de Scratching. La cabecera YA tiene su gato — el de la ilustracion — y con ese basta. */ .catzona{position:relative} /* ══ LA BANDA DE CABECERA DE CADA PAGINA ══════════════════════ Ninguna banda va a sangre: 1120 como todas las de la portada. En una pantalla de 2520 px una banda de borde a borde deja dos vacios de color. */ .pbanda{max-width:1120px;margin:0 auto;background:var(--pbg);color:var(--ptx); position:relative;overflow:hidden} .pbanda .txt{padding:34px 34px 40px;position:relative;z-index:2} .ptit{font-family:var(--display);font-weight:900; font-size:clamp(30px,4.4vw,48px);line-height:1;letter-spacing:-.028em; margin:8px 0 0;max-width:18ch;text-wrap:balance} .pbsub{margin:15px 0 0;font-size:19px;line-height:1.45;max-width:50ch; opacity:.92} /* .86 y no .66: el rotulo es de 11 px en mayusculas, o sea texto PEQUENO, y ahi WCAG pide 4.5:1. A .66 daba 4.2 sobre el ambar y 3.3 sobre el azul — sobre la tinta se veia bien y por eso no cantaba. La jerarquia ya la hace el cuerpo de letra, no hace falta ademas bajarle la tinta. */ .pbanda .rot{color:inherit;opacity:.86} .pfecha{font-family:var(--estrecha);font-weight:700;font-size:12px; letter-spacing:.1em;text-transform:uppercase;margin:20px 0 0;opacity:.58} /* el gato de la banda: se agarra al CANTO DE ABAJO, que es un borde que la pagina ya tiene. Sin borde seria una pegatina. ⚠️ La pagina de AUTOR no lleva gato: la banda ya tiene la cara de Alfre, y un gato al lado son dos personajes en 260 px — el mismo fallo del bloque de Scratching y de la cabecera de categoria. */ .pbgato{position:absolute;right:9%;bottom:0;z-index:1;pointer-events:none} .pbgato img{display:block;height:auto} /* La pata: el cuerpo del gato esta cortado por el canto IZQUIERDO del lienzo, asi que espejeandolo el corte cae contra el borde derecho de la banda y desaparece. Ademas asi la pata apunta hacia el texto, que es de lo que va la pagina: alguien alargando la mano. */ .pbgato.pata{right:0;transform:scaleX(-1)} @media (max-width:899px){.pbgato{display:none}} /* el sello del contrato */ .sello{position:absolute;right:46px;top:50%;width:132px;height:132px; transform:translateY(-50%) rotate(-11deg);opacity:.22;pointer-events:none} @media (max-width:899px){.sello{display:none}} /* ══ LA PAGINA LEGAL: texto + clausulas al lado ══════════════ */ .pag{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:46px; align-items:start;padding:28px 0 0} .pag .lado{position:sticky;top:96px} .pag.sola{grid-template-columns:minmax(0,1fr);max-width:70ch} @media (max-width:979px){.pag{grid-template-columns:1fr;gap:30px} .pag .lado{position:static}} .clausulas,.otrosdoc{background:var(--papel);border-left:3px solid #F2A81C; padding:16px 18px 18px;margin:0 0 18px} .clausulas .rot,.otrosdoc .rot{display:block;margin:0 0 8px} .clausulas ol{margin:0;padding:0 0 0 18px;font-family:var(--estrecha); font-weight:600;font-size:14px;line-height:1.3} .clausulas li{margin:6px 0} .otrosdoc ul{margin:0;padding:0;list-style:none;font-family:var(--estrecha); font-weight:700;font-size:14.5px} .otrosdoc li{border-top:1px solid var(--filete)} .otrosdoc li:first-child{border-top:none} .otrosdoc a{display:block;padding:9px 0} .clausulas a:hover,.otrosdoc a:hover{color:#4E8CC2} /* ══ LA PROSA LEGAL ══════════════════════════════════════════ Un punto mas pequena que la del articulo y con mas interlineado: un contrato se recorre buscando UNA clausula, no se lee de corrido. */ .legalp .cuerpo p{font-size:16.5px;line-height:1.66;color:#242a2e} .legalp .cuerpo h2{font-size:25px;margin:38px 0 12px} .legalp .cuerpo h3{font-size:18.5px;margin:24px 0 8px;color:var(--pizarra)} .cuerpo h4{font-family:var(--estrecha);font-weight:700;font-size:14px; letter-spacing:.06em;text-transform:uppercase;color:var(--pizarra); margin:20px 0 6px} .cuerpo a{color:#4E8CC2;border-bottom:1px solid rgba(78,140,194,.4)} .cuerpo a:hover{color:var(--tinta);border-bottom-color:#F2A81C} /* las mayusculas del contrato: se marcan como bloque, no como grito */ .aviso{background:var(--papel);border-left:3px solid var(--tinta); padding:14px 18px;margin:22px 0;font-family:var(--estrecha); font-weight:700;font-size:14px;line-height:1.55;letter-spacing:.01em} /* la lista numerada de las prohibiciones */ .numeros{margin:0 0 18px;padding:0 0 0 22px;font-size:16.5px;line-height:1.6} .numeros li{margin:0 0 8px;padding-left:6px} .numeros li::marker{font-family:var(--estrecha);font-weight:700; color:#F2A81C} /* EL TESORO: la ultima linea de cada documento legal. Quien llega hasta aqui se ha leido un contrato entero y se merece encontrar algo. */ .cierre{margin:40px 0 0;padding:18px 0 0;border-top:3px solid var(--tinta); font-family:var(--display);font-weight:900;font-size:19px;line-height:1.35; letter-spacing:-.014em;max-width:44ch} .cierre::before{content:"";display:inline-block;width:17px;height:20px; margin-right:9px;vertical-align:-3px;transform:rotate(-12deg); background:no-repeat center/contain; background-image:url("data:image/svg+xml;utf8,")} /* ══ LOS BLOQUES DE LAS PAGINAS DE PERSONA ═══════════════════ */ /* los inquilinos: los gatos que prueban las cosas */ .tenants{list-style:none;margin:16px 0 20px;padding:0;display:grid; gap:2px} .tenants li{background:var(--papel);border-left:3px solid #F2A81C; padding:14px 18px 15px;font-size:16.5px;line-height:1.5} .tenants li{display:flex;gap:15px;align-items:center} .tenants .gatofoto{flex:0 0 104px;width:104px;height:104px;object-fit:cover; display:block;border-radius:50%;border-bottom:0} .tenants b{font-family:var(--display);font-weight:900;font-size:19px; display:block;letter-spacing:-.016em;margin:0 0 2px} /* los cuatro pasos: el numero grande en ambar, como los de la categoria */ .pasos{list-style:none;margin:18px 0 22px;padding:0;counter-reset:paso} .pasos li{position:relative;counter-increment:paso;padding:0 0 16px 62px; margin:0 0 16px;border-bottom:1px solid var(--filete);font-size:16.5px; line-height:1.55} .pasos li:last-child{border-bottom:none;margin-bottom:0} .pasos li::before{content:counter(paso,decimal-leading-zero); position:absolute;left:0;top:-6px;font-family:var(--display); font-weight:900;font-size:32px;line-height:1;color:#F2A81C} .pasos b{font-family:var(--display);font-weight:900;font-size:19px; display:block;letter-spacing:-.016em;margin:0 0 3px} /* si / no: el color hace el trabajo que haria un parrafo de explicacion */ .puede{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:2px} .puede li{position:relative;background:var(--papel);padding:14px 18px 15px 46px; font-size:16.5px;line-height:1.5} .puede b{font-family:var(--display);font-weight:900;font-size:18px; display:block;letter-spacing:-.016em;margin:0 0 2px} .puede li::before{position:absolute;left:16px;top:14px; font-family:var(--display);font-weight:900;font-size:20px;line-height:1.1} .puede li{border-left:3px solid #6FA84B} .puede li::before{content:"\2713";color:#6FA84B} .puede.nopuede li{border-left:3px solid #E9791B} .puede.nopuede li::before{content:"\00d7";color:#E9791B;font-size:24px; top:11px} /* los tipos de tracker */ .tipos{list-style:none;margin:16px 0 22px;padding:0} .tipos li{padding:12px 0;border-bottom:1px solid var(--filete); font-size:16.5px;line-height:1.5} .tipos b{font-family:var(--estrecha);font-weight:700;font-size:13px; letter-spacing:.09em;text-transform:uppercase;color:#4E8CC2;display:block; margin:0 0 3px} /* el correo, cuando ES la respuesta de la pagina */ .correazo{background:var(--tinta);color:var(--papel);padding:22px 24px 24px; margin:0 0 24px} .correazo .rot{color:#F2A81C;display:block;margin:0 0 6px} .correazo p{margin:0;font-family:var(--display);font-weight:900; font-size:clamp(22px,3.4vw,31px);line-height:1.1;letter-spacing:-.02em} .correazo a{color:#F2A81C;border:none} .correazo a:hover{color:var(--papel)} .firmapag{margin:30px 0 0;padding:16px 0 0;border-top:3px solid var(--tinta); font-family:var(--display);font-weight:900;font-size:18px; letter-spacing:-.014em} /* ══ LAS PAGINAS DE RESCATE (404 y busqueda) ═════════════════ */ .pbanda.rescate{display:grid;grid-template-columns:minmax(0,1fr) 46%; align-items:center;gap:0} .pbanda.rescate .cuadro img{width:100%;height:auto;display:block} .pbanda.rescate .ptit{font-size:clamp(28px,4vw,44px);max-width:15ch} @media (max-width:759px){.pbanda.rescate{grid-template-columns:1fr} .pbanda.rescate .cuadro{order:-1}} /* El buscador grande, sobre el fondo claro de la pagina. El de la cabecera va en tinta porque cae sobre la pagina; este ES la pagina. */ .buscagrande{max-width:1120px;margin:0 auto;padding:30px 0 6px} .buscagrande .rot{display:block;margin:0 0 10px} .buscagrande .buscafila input{border:3px solid var(--tinta); border-right:none;background:var(--papel)} .buscagrande .buscafila{max-width:720px} @media (max-width:519px){.buscagrande .buscafila input{border-right:3px solid var(--tinta)}} /* Los resultados. El rotulo de la habitacion delante del titulo: en una lista de busqueda saber DE DONDE sale cada cosa vale mas que el resumen. */ .resultados{list-style:none;margin:24px 0 0;padding:0;max-width:1120px} .resultados li{border-bottom:1px solid var(--filete)} .resultados li:first-child{border-top:3px solid var(--tinta)} .resultados a{display:block;padding:15px 0} .rrot{display:block;font-family:var(--estrecha);font-weight:700;font-size:11px; letter-spacing:.15em;text-transform:uppercase;color:#4E8CC2;margin:0 0 3px} .rtit{display:block;font-family:var(--display);font-weight:900;font-size:21px; line-height:1.15;letter-spacing:-.018em;max-width:52ch;text-wrap:balance} .resultados a:hover .rtit{color:#4E8CC2} /* la foto grande de la pagina de autor */ .pbanda.persona{display:grid;grid-template-columns:minmax(0,1fr) 260px; align-items:center;gap:0} .pbanda.persona .retrato{padding:0 34px 0 0;align-self:end} .pbanda.persona .retrato img{width:100%;height:auto;display:block; border-bottom:9px solid #F2A81C} @media (max-width:759px){.pbanda.persona{grid-template-columns:1fr} .pbanda.persona .retrato{order:-1;padding:24px 34px 0;max-width:230px}} /* ═══ estilo-tema.css ═══ */ /* AJUSTES DEL TEMA * * Lo que se escribe A MANO. `estilo-base.css` lo genera export-a-tema.py y * cualquier cosa que se ponga ahí se pierde en la siguiente exportación. * * Este fichero se carga DESPUÉS, así que gana. */ /* ── EL ENLACE DE SALTAR AL CONTENIDO ────────────────────────── Existe para quien navega con teclado o lector de pantalla: es lo primero que encuentra, y le ahorra tabular por las 8 entradas del menú en cada página. ⚠️ Va escondido FUERA DE PANTALLA, no con display:none. Con display:none un lector de pantalla no lo anuncia y el enlace deja de existir para quien lo necesita. Al recibir el foco vuelve, y se ve. */ .saltar{position:absolute;left:-9999px;top:0;z-index:100; font-family:var(--estrecha);font-weight:700;font-size:14px; letter-spacing:.06em;text-transform:uppercase; background:var(--tinta);color:var(--papel);padding:12px 20px; border-bottom:3px solid var(--ambar)} .saltar:focus{left:0} /* ── LA MARCA ────────────────────────────────────────────────── El del logo lleva su alto puesto desde PHP. Esto solo evita que el enlace añada su propia línea base debajo. */ .marca{display:block;line-height:0;flex:0 0 auto} .marca svg{display:block} /* ── LOS HUECOS DE ANUNCIO ───────────────────────────────────── Alfre decidio el 21 ago 2026: NADA el dia uno. El `
` se queda en el marcado —en los tres puntos que marco la maqueta— para que el dia que entre Mediavine Journey el anuncio tenga donde ir sin tocar plantillas. Pero mientras esta vacio NO OCUPA: un rectangulo gris esperando un anuncio durante un ano es peor que no tener anuncio. `:empty` es literal — basta un espacio dentro para que deje de aplicar. Por eso catl_anuncio() devuelve el div pegado, sin salto de linea. */ .ad:empty{display:none} /* ⚠️ LA FRANJA DEL ANUNCIO ANCHO SE QUEDA, AUNQUE ESTE VACIA. Se probo a esconderla entera con `.seccion:has(> .ad:empty){display:none}` y fue un error: en la portada esa franja es lo unico que separa las 13 habitaciones de la banda del consejo, y sin ella los dos bloques de color se tocan. Lo vio Alfre el 21 ago 2026. En la maqueta el hueco eran 171 px: 26 de padding arriba, 119 de la caja del anuncio y 26 abajo. Los 119 eran CONTENIDO y se han ido con el anuncio; los 52 de padding son RITMO y se quedan. */ /* ── EL HUECO DE UNA ENTRADA SIN FOTO ────────────────────────── NO ESTA EN LA MAQUETA porque alli todas las entradas tienen foto. En el blog de verdad no va a ser asi durante el primer ano, y una fila de cuatro donde solo dos tienen imagen se ve rota. El hueco lleva el color de su habitacion, asi que sigue diciendo algo. Se comporta como el al que sustituye: ancho completo y el alto que salga de la proporcion, que la pone catl_miniatura() en linea. */ .sinfoto{display:block;width:100%;background:var(--sf)} /* menos en el rio, donde la foto es una columna fija de 112 px a la izquierda del titular — el mismo `flex` que lleva `.rio img`. */ .rio .sinfoto{flex:0 0 112px;width:112px} /* ── LA FOTO DEL ARTICULO ────────────────────────────────────── Va sin el marco de ventana de la portada: Alfre lo decidio el 21 ago 2026, se ve mejor limpia. Y sin la pestaña de la habitacion, que en el articulo nunca tuvo estilo y caia suelta debajo como un pie de foto a medias. Lo unico que hace falta es el aire de abajo: `.respuesta` —la caja negra que va justo despues— no lleva margen por arriba, y sin esto la foto y la caja se tocan. 26 px son los que `.respuesta` ya se pone por abajo, asi que la caja queda con el mismo aire a los dos lados. */ .artfoto{margin:0 0 26px} /* ══════════════════════════════════════════════════════════════════════ LAS ILUSTRACIONES DENTRO DEL TEXTO NUEVAS el 21 ago 2026. Ni la maqueta ni el tema tenian nada para esto: el articulo llevaba UNA sola imagen, la destacada. Alfre decidio que fueran como en clutterless -una por cada H2, todas 4:3- y esto es lo que faltaba para que se pudieran pintar. ANCHO: la imagen ocupa la columna de texto entera (`.cuerpo` es 68ch), con el mismo borde izquierdo que los parrafos. Salirse rompe la columna y el sitio no usa imagenes a sangre dentro del cuerpo. ALTO: el 4:3 se declara con `aspect-ratio`, no con un alto fijo. Asi la caja reserva su sitio ANTES de que la imagen cargue y el layout no da el salto -que es lo que penaliza el CLS, y Mediavine mide si el anuncio se llego a ver. AIRE: 30 px arriba y 26 abajo. El de abajo es el mismo que usa .artfoto, para que una imagen y la destacada respiren igual. */ .cuerpo figure{margin:30px 0 26px} .cuerpo figure img, .cuerpo>img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;background:var(--fondo,#E1E6EB)} .cuerpo figcaption{font-family:var(--estrecha);font-size:13px;line-height:1.45; color:var(--pizarra,#5A666E);margin:9px 0 0; border-left:3px solid var(--ambar,#F2A81C);padding-left:10px} /* Una imagen NUNCA se pega a la H2 que la precede: entre el titulo y la ilustracion tiene que haber texto, o el lector ve dos cosas grandes seguidas y ninguna le dice nada. Esto solo lo suaviza; quien decide de verdad donde va cada una es el Paso 5. */ .cuerpo h2+figure,.cuerpo h3+figure{margin-top:22px} /* ══════════════════════════════════════════════════════════════════════ EL INDICE DEL ARTICULO VA PLEGADO. Decision de Alfre el 21 ago 2026: que este ahi para quien quiera saltar a un apartado, sin robarle media pantalla a quien solo quiere leer. Cerrado ocupa UNA linea. Se abre con
, igual que las preguntas del final. El sitio ya tiene un idioma para "esto se abre" —el + ambar que gira a x— y usar otro distinto para lo mismo es lo que hace que un diseno parezca cosido de trozos. El fondo en papel con el filete ambar a la izquierda es el mismo recurso de las cajas de dato y consejo: "esto no es el texto, es un apoyo". ⚠️ TODAS LAS REGLAS VAN PREFIJADAS CON `.indice`, Y NO ES POR GUSTO. En estilo-base.css sobreviven las del indice viejo, y `.indice ol` pesa (0,1,1) —una clase y una etiqueta— mientras que `.indicel` a secas pesa (0,1,0). Cargar despues NO basta cuando el otro pesa mas: la lista se habria quedado con el `padding:0 0 0 18px` y la tipografia de antes, y pareceria que el cambio no funciono. ══════════════════════════════════════════════════════════════════════ */ .indice{padding:0;margin:0 0 26px} /* ── la fila cerrada ── */ .indice summary{cursor:pointer;list-style:none;position:relative; display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding:14px 44px 14px 20px} .indice summary::-webkit-details-marker{display:none} .indice summary .rot{margin:0} /* la vieja le ponia 8px por abajo */ .indice summary:hover .rot{color:var(--tinta)} .indice summary:focus-visible{outline:3px solid #F2A81C;outline-offset:-3px} /* el mismo signo que las preguntas, y gira igual */ .indice summary::after{content:"+";position:absolute;right:16px;top:9px; font-family:var(--display);font-weight:900;font-size:24px;line-height:1; color:#F2A81C;transition:transform .2s ease} .indice[open] summary::after{transform:rotate(45deg)} .indice[open] summary{padding-bottom:10px} /* el conteo, a la derecha del rotulo: dice de cuanto es el articulo ANTES de abrirlo, que es justo lo que se pregunta quien duda si leerlo */ .indice .indicen{font-family:var(--estrecha);font-weight:600;font-size:12px; letter-spacing:.06em;text-transform:uppercase;color:var(--pizarra); opacity:.75;margin-left:auto;font-variant-numeric:tabular-nums} /* ── la lista abierta ── */ .indice ol.indicel{list-style:none;margin:0;padding:0 20px 18px;font-size:inherit} .indice .indicel > li{margin:0;border-top:1px solid rgba(20,26,30,.10)} .indice .indicel > li:first-child{border-top:none} .indice .indicel > li > a{display:flex;gap:12px;align-items:baseline; padding:9px 0 8px;font-family:var(--estrecha);font-weight:700; font-size:15.5px;line-height:1.25;color:var(--tinta)} /* el numero en ambar, como las listas numeradas del resto del sitio */ .indice .indicel > li > a b{flex:0 0 24px;font-family:var(--display); font-weight:900;font-size:17px;color:#F2A81C;font-variant-numeric:tabular-nums; display:inline-block;transform-origin:center;transition:transform .15s ease-out} .indice .indicel > li > a:hover{color:#4E8CC2} .indice .indicel > li > a:hover b{transform:scale(1.14)} /* ── los subapartados ────────────────────────────────────────── Los H3 cuelgan de su H2 con un filete a la izquierda en vez de un punto: la jerarquia se ve sin gastar un simbolo, y a 14 px ya se distinguen del apartado sin tener que ponerlos de otro color chillon. */ .indice .indicesub{list-style:none;margin:0 0 10px 24px;padding:0 0 0 12px; border-left:2px solid rgba(20,26,30,.13)} .indice .indicesub li{margin:0} .indice .indicesub a{display:block;padding:4px 0;font-family:var(--estrecha); font-weight:600;font-size:14px;line-height:1.3;color:var(--pizarra)} .indice .indicesub a:hover{color:#4E8CC2} @media (max-width:619px){ .indice summary{padding:12px 40px 12px 16px} .indice ol.indicel{padding:0 16px 14px} .indice .indicen{margin-left:0;flex-basis:100%} } @media (prefers-reduced-motion:reduce){ .indice summary::after,.indice .indicel > li > a b{transition:none} } /* ══════════════════════════════════════════════════════════════════════ QUE UN ENLACE A UN APARTADO NO LO DEJE DEBAJO DE LA BARRA La cabecera va `position:sticky`, o sea que siempre esta ahi arriba. Al pulsar un enlace del indice, el navegador lleva el titular al borde de arriba de la ventana — y la barra se lo tapa. Alfre lo vio el 21 ago 2026 pulsando "What to buy, and what it costs": aterrizaba dentro de la ficha del primer producto, con el titular escondido detras de la barra. `scroll-padding-top` en le dice al navegador "el arriba util de esta pagina empieza mas abajo". Una sola regla y vale para TODO lo que salte a un ancla: el indice, el enlace del FAQ, el de saltar al contenido y el "Responder" de los comentarios. EL ALTO DE LA BARRA, MEDIDO: 12 px aire de arriba (.top .fila padding) 76 px el logo (catl_svg lo pone a 76) 12 px aire de abajo 3 px el filete ───── 103 px ⚠️ Los dos valores de pantalla chica son ESTIMADOS, no medidos: ahi `.fila` envuelve y el nav se baja a su propia fila. Se peca de generoso a proposito — pasarse 20 px no se nota, quedarse corto esconde el titular. Hay que comprobarlos en el movil de Alfre. ══════════════════════════════════════════════════════════════════════ */ :root{--barra:103px} @media (max-width:1023px){:root{--barra:140px}} @media (max-width:619px){:root{--barra:172px}} html{scroll-padding-top:calc(var(--barra) + 16px)} /* Y que el salto se vea, en vez de teletransportar: al pulsar el indice, ver la pagina moverse dice "te he llevado ahi" mejor que aparecer de golpe en otro sitio. Se apaga para quien pide menos movimiento. */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* ══════════════════════════════════════════════════════════════════════ EL SUELO DE LA PANTALLA Lo vio venir Alfre el 21 ago 2026, antes de que existiera el problema: cuando el blog entre en Mediavine Journey, la red pega una barra de anuncio ABAJO, a todo el ancho y flotando. Y ahi es justo donde vive la flecha de volver arriba: se la tapa entera. No es solo la flecha: en un movil moderno, abajo tambien esta la barra de gestos del sistema. `env(safe-area-inset-bottom)` la esquiva sola — el navegador dice cuanto mide, no hay que adivinarlo. Del anuncio no lo dice nadie, asi que se deja UNA VARIABLE preparada: · hoy vale 0 y no cambia nada · el dia que entre Journey, se mide su barra y se pone aqui Un solo numero, en un sitio, y todo lo que flote abajo se sube solo. ⚠️ SE MIDE, NO SE ESTIMA. Suele andar entre 50 y 100 px segun el formato que sirvan y si es movil o escritorio, pero eso es de oidas: cuando este puesto se mira de verdad y se escribe el numero con la fecha. ══════════════════════════════════════════════════════════════════════ */ :root{--pie-anuncio:0px} /* ══════════════════════════════════════════════════════════════════════ LA FLECHA DE VOLVER ARRIBA ES EL LOGO, en pequeno: cuadrado ambar, filete de tinta, esquina de 6. Un boton que se parece al logo se lee como parte de la casa; uno gris con una flechita se lee como un plugin. CERO JAVASCRIPT, como el resto del sitio. Aparece sola al bajar gracias a `animation-timeline: scroll()`, que anima con la barra de desplazamiento en vez de con el tiempo. Donde el navegador no lo entienda, se queda SIEMPRE VISIBLE — que es peor pero no roto, y es la razon de que la regla de "siempre visible" vaya FUERA del @supports y la otra dentro. ══════════════════════════════════════════════════════════════════════ */ .arriba{position:fixed;right:26px;z-index:30; /* ⚠️ EL SUELO NO ES EL BORDE DE LA PANTALLA — ver el bloque de arriba. */ bottom:calc(26px + var(--pie-anuncio) + env(safe-area-inset-bottom, 0px)); width:50px;height:50px;display:grid;place-items:center; background:#F2A81C;color:var(--tinta); border:3px solid var(--tinta);border-radius:6px; /* la misma sombra corta del panel del menu: separa sin flotar */ box-shadow:0 10px 22px -12px rgba(20,26,30,.6); transition:transform .18s cubic-bezier(.2,.8,.3,1),background .16s ease} .arriba svg{width:22px;height:22px;display:block; transition:transform .18s cubic-bezier(.2,.8,.3,1)} /* al pasar el raton la flecha da un salto hacia arriba, no el boton entero: el gesto dice a donde lleva */ .arriba:hover{background:#FFB524} .arriba:hover svg{transform:translateY(-3px)} .arriba:active{transform:translateY(1px)} .arriba:focus-visible{outline:3px solid var(--tinta);outline-offset:3px} @media (max-width:619px){ .arriba{right:14px;width:44px;height:44px;border-width:2px; bottom:calc(14px + var(--pie-anuncio) + env(safe-area-inset-bottom, 0px))} .arriba svg{width:19px;height:19px} } /* ── que aparezca al bajar, sin JavaScript ───────────────────── `scroll(root block)` engancha la animacion al scroll de la pagina, y `animation-range` dice ENTRE QUE DOS PUNTOS ocurre: invisible hasta los 500 px —una pantalla larga— y del todo visible a los 800. */ @supports (animation-timeline: scroll()) { .arriba{opacity:0;visibility:hidden; animation:catl-arriba linear both; animation-timeline:scroll(root block); animation-range:500px 800px} @keyframes catl-arriba{ from{opacity:0;visibility:hidden;transform:translateY(10px)} to {opacity:1;visibility:visible;transform:translateY(0)} } } @media (prefers-reduced-motion:reduce){ .arriba,.arriba svg{transition:none} .arriba:hover svg{transform:none} @supports (animation-timeline: scroll()) { /* sigue apareciendo al bajar, pero sin deslizarse */ @keyframes catl-arriba{ from{opacity:0;visibility:hidden} to {opacity:1;visibility:visible} } } } /* ══════════════════════════════════════════════════════════════════════ DOS PIEZAS QUE NINGUNA MAQUETA DIBUJO Ninguna llego a tener el caso: las cuatro maquetas se hicieron con el contenido puesto, y estas dos solo aparecen cuando FALTA contenido o cuando hay TANTO que no cabe. Se escriben con el idioma del resto — Archivo Narrow en versalitas, ambar para lo activo— para que no se noten de otra mano. ══════════════════════════════════════════════════════════════════════ */ /* ── el cuarto todavia vacio ─────────────────────────────────── Durante el primer ano esto se va a ver mucho, asi que no puede parecer un error. Va en su caja, con el filete ambar de las cajas de apoyo: se lee como "aqui todavia no hay nada", no como "algo ha fallado". */ .catvacia{background:var(--papel);border-left:3px solid #F2A81C; margin:26px 0 0;padding:20px 24px 22px; font-family:var(--estrecha);font-weight:600;font-size:17px;line-height:1.45; color:var(--pizarra);max-width:56ch} /* ── la paginacion ──────────────────────────────────────────── Los numeros van sueltos y en cuadrado, como el boton de subir: el cuadrado con filete es la forma de este sitio para "esto se pulsa". */ .paginacion{display:flex;flex-wrap:wrap;gap:6px;align-items:center; margin:28px 0 0;font-family:var(--estrecha);font-weight:700;font-size:14px; font-variant-numeric:tabular-nums} .paginacion .page-numbers{display:grid;place-items:center; min-width:40px;height:40px;padding:0 10px; border:2px solid var(--filete2);color:var(--tinta); transition:background .16s ease,border-color .16s ease} .paginacion a.page-numbers:hover{background:var(--papel); border-color:var(--tinta)} /* la pagina en la que estas: en tinta, sin dudas */ .paginacion .page-numbers.current{background:var(--tinta);color:var(--papel); border-color:var(--tinta)} /* los puntos suspensivos no son un boton */ .paginacion .page-numbers.dots{border-color:transparent;min-width:24px} .paginacion .page-numbers:focus-visible{outline:3px solid #F2A81C; outline-offset:2px} @media (prefers-reduced-motion:reduce){.paginacion .page-numbers{transition:none}} /* ══ LAS PAGINAS DE SITIO ═════════════════════════════════════ Copiadas a mano de `montar()` en build-page.py el 21 ago 2026. */ /* ── la pata de Contact Us ──────────────────────────────────── Se llamaba `.pata`, y `.pata` ya era el avatar de un comentario: un circulo de 34 px con una huella. Al juntarse las cuatro hojas en un fichero, el avatar le caia encima al gato y lo dejaba en 34 x 22,7 px. `.pbgato.pata` acotaba `right` y `transform`, pero el ancho, el alto y el `border-radius` del avatar seguian aplicandose: acotar no basta cuando el nombre ya esta cogido. Renombrada a `pbpata` en `catl_gato_de_pagina()`. El cuerpo del gato esta cortado por el canto IZQUIERDO del lienzo, asi que espejeandolo el corte cae contra el borde derecho de la banda y desaparece. Ademas asi la pata apunta hacia el texto, que es de lo que va la pagina: alguien alargando la mano. */ .pbgato.pbpata{right:0;transform:scaleX(-1)} /* ── el indice de clausulas, pegado ─────────────────────────── La maqueta lo pega a 96 px porque ahi la cabecera no era `sticky`. En el tema si lo es y mide `--barra`, asi que a 96 px la primera clausula se metia debajo de la barra: 7 px en escritorio y 44 en movil, donde la cabecera crece. Se usa la misma cuenta que el `scroll-padding-top` del articulo, para que el indice y los saltos del indice paren en el mismo sitio. */ .pag .lado{top:calc(var(--barra) + 16px)} /* ── el indice de clausulas no numera dos veces ─────────────── Los titulares de los cuatro documentos ya traen SU numero — "1. What is a tracker?" — porque el texto se adapto literal de clutterlessnest y esa numeracion es la del contrato. El indice los metia ademas en un
    , y salia "1. 1. What is a tracker?". Se quita el marcador, no el numero del texto: asi cada linea del indice se lee EXACTAMENTE igual que el titular al que lleva, que es lo que hace que se encuentre la clausula 7 de un vistazo. Y la unica sin numerar —"Contact us" en las cookies— tampoco se inventa uno. Sigue siendo un
      porque un contrato SI es una lista ordenada: lo que sobra es pintar el numero, no la semantica. */ .clausulas ol{list-style:none;padding-left:0} /* ── el enlace "See all N" de un bloque de habitacion ────────────────── Sale solo cuando la subcategoria tiene mas articulos de los que caben en el bloque (12). Con 618 no sale nunca: la mas gorda tiene 11. Va alineado con `.subnodos` —los mismos 70px— para que se lea como el pie de esa lista y no como un elemento suelto de la seccion. En movil los dos pierden la sangria a la vez, en el mismo corte de 759px. */ .submas{margin:12px 0 0 70px;font-family:var(--estrecha);font-weight:700; font-size:13px;letter-spacing:.06em;text-transform:uppercase} .submas a{color:var(--azulh);border-bottom:2px solid rgba(78,140,194,.35); padding-bottom:2px} .submas a:hover{color:var(--tinta);border-bottom-color:var(--ambar)} @media (max-width:759px){.submas{margin-left:0}} /* ══════════════════════════════════════════════════════════════════════════ EL FORMULARIO DE CONTACTO 22 ago 2026 Fluent Forms pinta su propio aspecto —cajas grises redondeadas, un azul #1a7efb de fabrica— y carga DOS hojas de estilo que no se pueden quitar. Esto no las pelea: las tapa. Sus hojas se cargan ANTES que esta, asi que con un `.cuerpo .catlform` por delante gana esta sin un solo !important. 🪤 Y NO SE INVENTA UN IDIOMA NUEVO. Todo lo de aqui esta copiado de `.comform` —el formulario de comentarios—, que ya existia: mismos tamanos, misma tipografia, mismo borde de 2px, mismo foco ambar. Un sitio con dos formularios que no se parecen es un sitio con dos disenadores. Los colores del error y del acierto tampoco son nuevos: son EXACTAMENTE los dos de la lista que hay debajo en esta misma pagina —el verde del ✓ de "What I can help with" y el naranja de la × de "What I can't". El formulario y la lista dicen si y no con el mismo color. ══════════════════════════════════════════════════════════════════════ */ /* la caja, igual que .comform: papel sobre el fondo, y el filo ambar de 9px que en este sitio significa "esto es una pieza, no un parrafo" */ .cuerpo .catlform{background:var(--papel);padding:24px 24px 26px; border-bottom:9px solid var(--ambar);margin:26px 0 34px} /* Fluent Forms envuelve el formulario en dos divs con margenes propios */ .cuerpo .catlform .fluentform, .cuerpo .catlform form{margin:0} .cuerpo .catlform .ff-el-group{margin:0 0 18px} .cuerpo .catlform .ff_submit_btn_wrapper{margin:22px 0 0} /* la etiqueta: el rotulo estrecho en versalitas de todo el sitio */ .cuerpo .catlform .ff-el-input--label{margin:0} .cuerpo .catlform .ff-el-input--label label{display:block; font-family:var(--estrecha);font-weight:700;font-size:12px; letter-spacing:.1em;text-transform:uppercase;color:var(--pizarra); margin:0 0 6px;padding:0;line-height:1.3} /* el asterisco de obligatorio, en ambar. Es el unico sitio de la caja donde el ambar aparece dentro del texto, y por eso se lee como un aviso */ .cuerpo .catlform .ff-el-is-required.asterisk-right label::after{ color:var(--ambar);font-weight:700} /* los campos */ .cuerpo .catlform .ff-el-form-control{display:block;width:100%; box-sizing:border-box;margin:0;font-family:var(--cuerpo);font-size:16.5px; line-height:1.45;padding:11px 13px;border:2px solid var(--tinta); border-radius:0;background:var(--fondo);color:var(--tinta); box-shadow:none;height:auto;transition:none} .cuerpo .catlform textarea.ff-el-form-control{resize:vertical;min-height:158px} /* 🪤 EN EL FOCO VA `background-color`, NO `background`. El atajo `background` borraria la flecha del desplegable —que es una imagen de fondo— y el campo se quedaria sin flecha justo mientras se usa. */ .cuerpo .catlform .ff-el-form-control:focus{outline:3px solid var(--ambar); outline-offset:-2px;border-color:var(--tinta);background-color:var(--papel); box-shadow:none} .cuerpo .catlform .ff-el-form-control::placeholder{color:var(--pizarra); opacity:.6} /* el desplegable: fuera la flecha del sistema, que cambia con cada navegador y en ninguno se parece a este sitio, y dentro una nuestra en tinta */ .cuerpo .catlform select.ff-el-form-control{-webkit-appearance:none; -moz-appearance:none;appearance:none;cursor:pointer;padding-right:44px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%209%27%3E%3Cpath%20d%3D%27M1%201.4L7%207.2L13%201.4%27%20fill%3D%27none%27%20stroke%3D%27%23141A1E%27%20stroke-width%3D%272.6%27%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat; background-position:right 15px center;background-size:14px 9px} /* el boton, calcado del de comentarios */ .cuerpo .catlform .ff-btn-submit{font-family:var(--estrecha);font-weight:700; font-size:13.5px;letter-spacing:.07em;text-transform:uppercase; padding:12px 26px;border:none;border-radius:0;cursor:pointer; background:var(--tinta);color:var(--papel); border-bottom:3px solid var(--ambar);box-shadow:none; transition:background .16s ease} .cuerpo .catlform .ff-btn-submit:hover, .cuerpo .catlform .ff-btn-submit:focus{background:#142A5C;color:var(--papel)} .cuerpo .catlform .ff-btn-submit:focus-visible{outline:3px solid var(--ambar); outline-offset:2px} /* la ayuda debajo de un campo, si algun dia se pone */ .cuerpo .catlform .ff-el-help-message{font-family:var(--estrecha); font-size:12.5px;line-height:1.4;color:var(--pizarra);margin:5px 0 0} /* ── cuando algo esta mal ─────────────────────────────────────────────── El naranja de la × de "What I can't help with". Y el campo se marca por el BORDE ademas de por el texto: quien no distingue el naranja del gris —uno de cada doce hombres— tiene que poder ver cual es el campo. */ .cuerpo .catlform .ff-el-is-error .ff-el-form-control{border-color:#E9791B; background-color:#FBF0E4} .cuerpo .catlform .text-danger{font-family:var(--estrecha);font-weight:700; font-size:13px;letter-spacing:.01em;color:#B35A0C;margin:5px 0 0} .cuerpo .catlform .ff-errors-in-stack{background:var(--tinta);color:var(--papel); padding:14px 18px;margin:0 0 20px;border-bottom:3px solid #E9791B} .cuerpo .catlform .ff-errors-in-stack .error{font-family:var(--estrecha); font-size:14px;color:var(--papel)} /* ── y cuando sale bien ───────────────────────────────────────────────── Caja oscura como `.correazo`, que en este sitio es el tratamiento de "esto importa", y el verde del ✓ de "What I can help with" abajo. Sin el `border:none` se quedaria el marco gris claro del plugin. */ .cuerpo .catlform .ff-message-success{background:var(--tinta); color:var(--papel);padding:22px 24px 24px;margin:0;border:none; border-bottom:5px solid #6FA84B;border-radius:0;box-shadow:none; font-family:var(--cuerpo);font-size:17.5px;line-height:1.52} .cuerpo .catlform .ff-message-success p{margin:0;color:var(--papel)} .cuerpo .catlform .ff-message-success p::before{content:"\2713"; font-family:var(--display);font-weight:900;color:#6FA84B;margin-right:10px} /* en el movil el boton ocupa el ancho, igual que en el buscador */ @media (max-width:519px){ .cuerpo .catlform{padding:18px 16px 20px} .cuerpo .catlform .ff-btn-submit{width:100%} } /* ── EL MENU DEL MOVIL, ESCONDIDO ───────────────────────────────────────── `.menumovil` es la lista de las 13 habitaciones con sus subcategorias que sale al pulsar la hamburguesa. Aqui no existe: cuando hay sitio para la barra, el bueno es el mega menu. ⚠️ Esta linea vive AQUI y no en estilo-movil.css a proposito. Aquel fichero es un solo `@media (max-width:619px)` y NADA de alli puede tocar el escritorio - que es justo lo que haria esconder un elemento por defecto. Lo de movil (abrirlo, pintarlo) sigue todo alli. ⚖️ Y VA CON `.top` DELANTE, QUE NO ES ADORNO. `.menumovil` es un