/* ============================================================ MANDARINA 2026 · capa de diseño Lleva el sistema visual de los dossiers a la web. Se carga LA ÚLTIMA: si quitas su , la web vuelve a como estaba. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,600;1,7..72,400&family=Space+Mono:wght@400;700&display=swap'); :root{ --m-paper:#FAF1E6; --m-paper-2:#F3E9DC; --m-ink:#241311; --m-ink-soft:#6B5750; --m-dark:#14070C; --m-green:#2E8B4C; /* verde de botones y enlaces, más luminoso */ --m-green-deep:#2E8B4C; /* titulars i testimonis: el mateix to lluminós dels botons */ --m-green-hover:#1F6B39; /* només per al :hover, perquè es noti */ --m-green-ink:#12331D; /* el fosc, només per a fons foscos */ --m-green-tint:#E3EEE4; --m-berry:#C43D6B; --m-berry-deep:#8A2E52; --m-berry-tint:#F7DDE7; --m-gold:#A8783A; /* color del pie: verde bosque para infantil y general, frambuesa en las páginas de adultos (igual que el que ya tenías) */ --m-footer:#47785C; /* verd salvia apagat */ /* acento por defecto: verde, que es el color de la marca. En páginas de adultos, añade class="adults" al . */ --m-accent:var(--m-green); --m-accent-deep:var(--m-green-deep); --m-accent-tint:var(--m-green-tint); --m-accent-hover:var(--m-green-hover); } body.adults{ --m-footer:#96566F; /* malva apagat */ --m-accent:var(--m-berry); --m-accent-deep:var(--m-berry-deep); --m-accent-tint:var(--m-berry-tint); --m-accent-hover:var(--m-berry-deep); } /* ---------- base ---------- */ body{ background:var(--m-paper) !important; color:var(--m-ink) !important; font-family:"Literata",Georgia,serif !important; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; } p,li,td,dd{font-family:"Literata",Georgia,serif !important;color:var(--m-ink);} .lead{ font-family:"Literata",Georgia,serif !important; font-size:1.12em !important;line-height:1.62 !important; color:var(--m-ink-soft) !important;font-weight:400 !important; } /* ---------- titulares ---------- */ h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{ font-family:"Instrument Serif",Georgia,serif !important; font-weight:400 !important; letter-spacing:0 !important; color:var(--m-accent-deep) !important; text-transform:none !important; } h1,.h1{font-size:2.9em !important;line-height:1.08 !important;} h2,.h2{font-size:2.15em !important;line-height:1.14 !important;} h3,.h3{font-size:1.55em !important;line-height:1.2 !important;} h4,.h4{font-size:1.2em !important;} h1 em,h2 em,h3 em{font-style:italic;} /* etiquetas, menús y datos: monoespaciada, como en los dossiers */ .nav-bar .menu > li > a, .uppercase,.label,.badge,.breadcrumb, .footer-1 .sub-menu a, .btn{ font-family:"Space Mono",monospace !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-weight:400 !important; } /* ---------- navegación ---------- */ .nav-bar,.nav-bar.nav-fixed,.menu-horizontal{ background:var(--m-paper) !important; border-bottom:.5px solid rgba(36,19,17,.14) !important; box-shadow:none !important; } .nav-bar .menu > li > a{ color:var(--m-ink) !important;font-size:11px !important; } .nav-bar .menu > li > a:hover, .nav-bar .menu > li.active > a{color:var(--m-accent) !important;} .nav-bar .sub-menu{ background:var(--m-paper) !important; border:.5px solid rgba(36,19,17,.14) !important; box-shadow:0 10px 30px rgba(36,19,17,.08) !important; } .nav-bar .sub-menu a{ font-family:"Literata",Georgia,serif !important; text-transform:none !important;letter-spacing:0 !important; color:var(--m-ink) !important;font-size:14px !important; } .nav-bar .sub-menu a:hover{color:var(--m-accent) !important;background:var(--m-accent-tint) !important;} /* ---------- secciones y fondos ---------- */ section,.module,.main-container{background-color:transparent;} .bg-secondary,.bg-light,section.bg-secondary{background-color:var(--m-paper-2) !important;} .bg-white{background-color:#fff !important;} .bg-dark,.bg-primary,section.bg-dark{background-color:var(--m-dark) !important;} .bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4, .image-bg h1,.image-bg h2,.image-bg h3{color:var(--m-paper) !important;} .bg-dark p,.bg-dark .lead,.image-bg p,.image-bg .lead{color:rgba(250,241,230,.86) !important;} .image-bg.overlay:before{background:rgba(20,7,12,.62) !important;} /* filete dorado fino, el hilo transversal del sistema */ hr,.divider{border-color:var(--m-gold) !important;opacity:.5;} /* ---------- botones ---------- */ .btn{ border-radius:40px !important; font-size:10.5px !important; padding:.95em 2.1em !important; border-width:1px !important; transition:all .18s ease !important; } .btn,.btn-primary,.btn-filled,.btn.btn-lg{ background:var(--m-accent) !important; border-color:var(--m-accent) !important; color:var(--m-paper) !important; } .btn:hover,.btn-primary:hover,.btn-filled:hover{ background:var(--m-accent-hover) !important;border-color:var(--m-accent-hover) !important; color:var(--m-paper) !important; } .btn-white,.btn-light,.btn-outline-danger,.btn-rounded{ background:transparent !important; border-color:var(--m-accent) !important; color:var(--m-accent) !important; } .btn-white:hover,.btn-light:hover,.btn-outline-danger:hover,.btn-rounded:hover{ background:var(--m-accent) !important;color:var(--m-paper) !important; } .bg-dark .btn-white,.image-bg .btn-white{ border-color:var(--m-paper) !important;color:var(--m-paper) !important;background:transparent !important; } .bg-dark .btn-white:hover,.image-bg .btn-white:hover{ background:var(--m-paper) !important;color:var(--m-ink) !important; } /* ---------- enlaces ---------- */ a{color:var(--m-accent);} a:hover,a:focus{color:var(--m-accent-hover);} /* ---------- bloques de testimonios ---------- */ blockquote,.testimonial,.bg-secondary blockquote{ font-family:"Instrument Serif",Georgia,serif !important; font-style:italic;font-size:1.35em;line-height:1.4; color:var(--m-accent-deep) !important; border:0 !important;border-left:1.5px solid var(--m-gold) !important; background:transparent !important;padding:.2em 0 .2em 1.4em !important; } blockquote footer,blockquote cite,.testimonial small{ font-family:"Space Mono",monospace !important; font-style:normal;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--m-accent) !important; } /* ---------- pie ---------- */ footer.footer-1,footer,.fondo-02, .footer-color-1,.footer-color-2,.footer-color-6{ background:var(--m-footer) !important; color:rgba(250,241,230,.86) !important; border-top:0 !important; } /* las páginas de adultos ya traen su propio frambuesa, se respeta */ footer p,footer li,footer a,footer span{color:rgba(250,241,230,.8) !important;} footer a:hover{color:#fff !important;} footer .btn,footer .btn-white{ border-color:rgba(250,241,230,.55) !important; color:rgba(250,241,230,.92) !important;background:transparent !important; } footer .btn:hover,footer .btn-white:hover{ background:rgba(250,241,230,.95) !important;color:var(--m-footer) !important; border-color:rgba(250,241,230,.95) !important; } footer hr,footer .title{border-color:rgba(250,241,230,.28) !important;} footer h1,footer h2,footer h3,footer h4{color:var(--m-paper) !important;} /* ---------- imágenes y tarjetas ---------- */ img{border-radius:2px;} .card,.panel,.feature{ background:#fff !important;border:.5px solid rgba(36,19,17,.12) !important; border-radius:3px !important;box-shadow:none !important; } /* ---------- detalles ---------- */ ::selection{background:var(--m-accent-tint);color:var(--m-ink);} .text-muted,small{color:var(--m-ink-soft) !important;} input,textarea,select{ font-family:"Literata",Georgia,serif !important; border-radius:3px !important;border:1px solid rgba(36,19,17,.2) !important; background:#fff !important;color:var(--m-ink) !important; } @media (max-width:767px){ h1,.h1{font-size:2.1em !important;} h2,.h2{font-size:1.65em !important;} body{font-size:15px;} } /* ---------- bloques sobre fondo verde oscuro (testimonis de la portada) ---------- */ .fondo-02, .fondo-02 h1,.fondo-02 h2,.fondo-02 h3,.fondo-02 h4,.fondo-02 h5,.fondo-02 h6, .fondo-02 p,.fondo-02 b,.fondo-02 strong,.fondo-02 span,.fondo-02 li{ color:#FAF1E6 !important; } .fondo-02 .color-10,.fondo-02 .quote-author h6{ color:rgba(250,241,230,.78) !important; } .fondo-02 a:not(.btn){color:#FAF1E6 !important;text-decoration:underline;} .fondo-02 .btn{ background:transparent !important;border-color:rgba(250,241,230,.6) !important; color:#FAF1E6 !important; } .fondo-02 .btn:hover{ background:#FAF1E6 !important;color:var(--m-footer) !important;border-color:#FAF1E6 !important; } /* ---------- caixa de testimonis de la portada ---------- */ .fondo-01:not(footer){ background:#EDF3EA !important; border:.5px solid rgba(46,139,76,.22) !important; border-radius:10px !important; padding:34px 34px 30px !important; color:var(--m-ink) !important; } .fondo-01:not(footer) h1,.fondo-01:not(footer) h2,.fondo-01:not(footer) h3, .fondo-01:not(footer) h4,.fondo-01:not(footer) h5{color:var(--m-accent) !important;} .fondo-01:not(footer) p,.fondo-01:not(footer) b,.fondo-01:not(footer) strong{color:var(--m-ink) !important;} .fondo-01:not(footer) h4 b{color:var(--m-accent-deep) !important;} .fondo-01:not(footer) .color-10{color:var(--m-accent) !important;} .fondo-01:not(footer) .btn{ background:transparent !important;border-color:var(--m-accent) !important;color:var(--m-accent) !important; } .fondo-01:not(footer) .btn:hover{ background:var(--m-accent) !important;color:#FAF1E6 !important;border-color:var(--m-accent) !important; } /* les pàgines d'adults porten el seu propi color al