/* === Mocionario — banco de mociones de Debatien.do · acento ROJO === Encolado por FUNAJIT Páginas solo donde hay shortcodes [mocionario_...]. TODO cuelga de .mo a propósito: el diseño de origen usaba nombres como .card, .grid, .wrap, .chip o .hero, que en un WordPress con WPBakery y un tema encima chocan con media docena de reglas ajenas. Aquí nada sale de .mo y nada toca body ni etiquetas sueltas. Rojos: los mismos de Debatien.do (#991B1B / #B91C1C / #DC2626) para que la página se lea como parte del programa y no como un micrositio aparte. */ .mo { --mo-red:#DC2626; --mo-red-d:#B91C1C; --mo-red-x:#991B1B; --mo-red-soft:#fdf0f0; --mo-navy:#001127; --mo-navy-2:#0a1a33; --mo-ink:#0a1628; --mo-ink-2:#4b5a75; --mo-grey:#66748c; --mo-line:#dee3ec; --mo-soft:#f4f6fb; --mo-r:14px; --mo-sh:0 2px 10px rgba(10,22,40,.07); --mo-sh-lg:0 18px 50px rgba(10,22,40,.18); font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--mo-ink); -webkit-font-smoothing:antialiased; } .mo *, .mo *::before, .mo *::after { box-sizing:border-box; } /* El reinicio va dentro de :where() a propósito: así pesa CERO y cualquier clase de componente lo gana sin pelear. Escrito como `.mo button` pesaba más que `.mo-chip` o `.mo-btn` (una clase + una etiqueta contra una clase sola) y les borraba el borde, el fondo y el margen a todos los botones y párrafos del módulo. */ :where(.mo p) { margin:0; } :where(.mo button) { font:inherit; color:inherit; cursor:pointer; border:0; background:none; margin:0; padding:0; text-align:inherit; } :where(.mo a) { color:var(--mo-red-d); text-decoration:none; } :where(.mo a:hover) { text-decoration:underline; } /* Base de TODOS los botones del módulo. Existe porque el tema pinta `.button, input[type=button], input[type=submit], button` con fondo cian #54c8ef, texto blanco, padding 15px 30px y border-radius propio. Esa regla pesa (0,0,1): más que el reinicio de arriba, que va en :where() y pesa cero. Cualquier componente que no declarase esas propiedades se volvía un botón cian del tema — pasó con los fantasma, los de línea, los iconos de las tarjetas y la equis de cerrar. Va ANTES que las clases de componente a propósito: misma especificidad, gana la última, así que cada componente sigue poniendo lo suyo encima sin !important. */ .mo-btn, .mo-chip, .mo-mini, .mo-ico, .mo-lvl, .mo-x, .mo-tag { background:transparent; color:inherit; line-height:normal; padding:0; border:0; border-radius:0; box-shadow:none; text-transform:none; letter-spacing:normal; } .mo :focus-visible { outline:3px solid rgba(220,38,38,.35); outline-offset:3px; border-radius:6px; } .mo-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .mo-wrap { max-width:1180px; margin:0 auto; padding:0 22px; } /* Los controles que no hacen nada sin JavaScript se ocultan solos (ver el