/* ═══════════════════════════════════════════════════════════════════════════════════════════ css/style_mejores.css — plantilla maestra de comparativas «Los mejores…» Doc: docs/proyectos/PROYECTO_COMPARATIVAS_MEJORES_2026-09-11.md · Página: blog_ficha_mejores.php 🔑 Se enlaza en el de la plantilla con ?v=filemtime, FUERA del compilado de megaMetatags: así el CSS de la primera pantalla llega antes de pintar (el de blog va al pie) y un cambio no obliga a subir VERSION, que tira la caché de assets de toda la web. Móvil primero (360-430) → 768 → 1024 → 1440. Rosa sólo para acciones; los demás colores de marca distinguen ganadores y datos, con moderación. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .mj{ --mj-rosa:#f04d98; --mj-rosa-oscuro:#d63a82; --mj-rosa-suave:#fdeef5; --mj-azul:#6aade4; --mj-lila:#c48bda; --mj-verde:#50c9b5; --mj-amarillo:#ffb71b; --mj-tinta:#1f2230; --mj-texto:#3b3f4e; --mj-gris:#6b7080; --mj-linea:#e7e8ef; --mj-fondo:#f7f8fc; --mj-radio:14px; --mj-radio-s:9px; --mj-top:47px; /* alto de nav.navbar, que es fija; js/mejores.js lo mide y lo corrige */ color:var(--mj-texto); font-size:15px; line-height:1.55; overflow-x:clip; position:relative; /* 🔴 sin esto el absoluto de la tabla toma la ventana como bloque contenedor y saca 300 px de scroll lateral en 768-1024 */ } .mj *{box-sizing:border-box} .mj h1,.mj h2,.mj h3,.mj h4{color:var(--mj-tinta); letter-spacing:-.01em; text-transform:none; font-weight:700} /* ⚠️ style.css fija h1-h5 con !important (h2 20px, h3 18px…): sin !important aquí no hay jerarquía */ .mj h2{font-size:1.4rem !important; line-height:1.2; margin:0 0 .35rem} .mj h3{font-size:1.08rem !important; line-height:1.25; margin:0} .mj-titulito{font-size:11.5px; font-weight:700; color:var(--mj-tinta); text-transform:uppercase; letter-spacing:.05em; margin:0 0 .45rem !important; display:flex; align-items:center; gap:.35rem} .mj h3 a, .mj-ganador-nombre, .mj-td-producto span{word-break:normal; overflow-wrap:break-word; hyphens:manual} .mj p{margin:0 0 .75rem} .mj a{color:var(--mj-rosa-oscuro)} .mj-gris{color:var(--mj-gris)} .mj-oculto{position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .mj-ico{width:1.05em; height:1.05em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em} .mj-sub{color:var(--mj-gris); margin:0 0 1rem} .mj #category-breadcrumb{margin:.4rem 0 0} .mj-previa{background:var(--mj-tinta); color:#fff; text-align:center; font-size:.8rem; padding:.45rem 1rem} /* ── Botones ─────────────────────────────────────────────────────────────── */ .mj-btn{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; background:var(--mj-rosa); color:#fff !important; font-weight:700; font-size:.88rem; border-radius:999px; padding:.62rem 1.1rem; text-decoration:none !important; border:0; line-height:1.2; transition:background .15s; white-space:nowrap} .mj-btn:hover{background:var(--mj-rosa-oscuro)} .mj-btn-ancho{display:flex; width:100%; white-space:normal; text-align:center} .mj-btn-mini{padding:.38rem .85rem; font-size:.8rem} .mj-btn-borde{background:#fff; color:var(--mj-rosa-oscuro) !important; box-shadow:inset 0 0 0 1.5px var(--mj-rosa); white-space:normal; text-align:center} .mj-btn-borde:hover{background:var(--mj-rosa-suave)} .mj-enlace{display:inline-flex; align-items:center; gap:.3rem; font-weight:600; font-size:.85rem; text-decoration:none} .mj-agotado{font-size:.78rem; color:var(--mj-gris); font-weight:600} /* ── Hero ───────────────────────────────────────────────────────────────── */ .mj-hero{padding:.6rem 0 1rem} .mj-hero h1{font-size:1.55rem !important; line-height:1.15; margin:.35rem 0 .6rem} .mj-entradilla{font-size:1rem; color:var(--mj-texto); max-width:46rem} .mj-cifras{list-style:none; margin:1rem 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem} .mj-cifras li{display:flex; gap:.55rem; align-items:flex-start; background:var(--mj-fondo); border-radius:var(--mj-radio-s); padding:.55rem .65rem; font-size:.8rem; line-height:1.25} .mj-cifras .mj-ico{color:var(--mj-rosa); width:1.2rem; height:1.2rem; margin-top:.05rem} .mj-cifras b{display:block; color:var(--mj-tinta); font-size:.95rem} .mj-cifras small{display:block; color:var(--mj-gris); font-size:11.5px} .mj-firma{display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--mj-gris); margin:0} .mj-firma img{border-radius:50%; width:40px; height:40px; object-fit:cover} .mj-firma a{font-weight:600} .mj-indice{display:none} /* ── Navegación de secciones ─────────────────────────────────────────────── */ .mj-nav{position:sticky; top:var(--mj-top); z-index:9; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(6px); border-bottom:1px solid var(--mj-linea)} .mj-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} .mj-nav ul::-webkit-scrollbar{display:none} .mj-nav a{display:block; white-space:nowrap; padding:.62rem .7rem; font-size:.82rem; font-weight:600; color:var(--mj-gris); text-decoration:none; border-bottom:2px solid transparent} .mj-nav a.mj-activa{color:var(--mj-tinta); border-bottom-color:var(--mj-rosa)} /* ── Bloques ────────────────────────────────────────────────────────────── */ .mj-contenido{padding-bottom:2rem} .mj-bloque{padding:1.6rem 0; scroll-margin-top:calc(var(--mj-top) + 3.2rem); border-bottom:1px solid var(--mj-linea)} .mj-bloque:last-child{border-bottom:0} .mj-cab-bloque{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.5rem 1rem} /* ── Badges y notas ─────────────────────────────────────────────────────── */ .mj-badge{display:inline-flex; align-items:center; gap:.3rem; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.26rem .55rem; border-radius:999px; color:var(--mj-tinta); background:#fff4dc; white-space:nowrap} .mj-badge .mj-ico{width:.95rem; height:.95rem} .mj-c-amarillo{background:#fff1d1} .mj-c-amarillo .mj-ico{color:#d9920a} .mj-c-verde{background:#e1f6f2} .mj-c-verde .mj-ico{color:#23a08c} .mj-c-azul{background:#e5f0fb} .mj-c-azul .mj-ico{color:#3b86c6} .mj-c-lila{background:#f4eaf8} .mj-c-lila .mj-ico{color:#9c5fb5} .mj-c-rosa{background:var(--mj-rosa-suave)} .mj-c-rosa .mj-ico{color:var(--mj-rosa)} .mj-c-turquesa{background:#e1f6f2} .mj-c-turquesa .mj-ico{color:#23a08c} .mj-nota{display:inline-flex; align-items:baseline; gap:.05rem; font-variant-numeric:tabular-nums; color:var(--mj-tinta); line-height:1} .mj-nota b{font-size:1.05rem} .mj-nota small{font-size:11px; color:var(--mj-gris)} .mj-nota-tabla{background:#fff1d1; border-radius:6px; padding:.25rem .4rem} .mj-nota-grande b{font-size:2rem} .mj-nota-grande small{font-size:.9rem} .mj-estrellas{display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; white-space:nowrap; font-variant-numeric:tabular-nums} .mj-estrellas-fondo{position:relative; display:inline-block; color:#dfe1e8; letter-spacing:-.05em; font-size:.85rem; line-height:1} .mj-estrellas-lleno{position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--mj-amarillo)} .mj-estrellas b{color:var(--mj-tinta)} .mj-precio{font-weight:700; color:var(--mj-tinta); font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap} .mj-precio-grande{font-size:1.5rem} /* ── 2 · Ganadores ──────────────────────────────────────────────────────── */ .mj-bloque-ganadores{border-bottom:0} .mj-ganadores{display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.2rem .1rem .8rem; margin:0 -15px; padding-left:15px; padding-right:15px; scrollbar-width:thin} .mj-ganador{flex:0 0 72%; max-width:250px; min-width:0; scroll-snap-align:start; background:#fff; border:1px solid var(--mj-linea); border-top:3px solid var(--mj-amarillo); border-radius:var(--mj-radio); padding:.8rem .85rem .85rem; display:flex; flex-direction:column; gap:.45rem; position:relative} .mj-borde-verde{border-top-color:var(--mj-verde)} .mj-borde-azul{border-top-color:var(--mj-azul)} .mj-borde-lila{border-top-color:var(--mj-lila)} .mj-borde-rosa{border-top-color:var(--mj-rosa)} .mj-borde-turquesa{border-top-color:var(--mj-verde)} .mj-ganador .mj-badge{align-self:flex-start} .mj-ganador-img{display:block; text-align:center} .mj-ganador-img img{width:100%; max-width:150px; height:auto; aspect-ratio:1; object-fit:contain; margin:0 auto} .mj-ganador-nombre{font-size:.98rem !important} .mj-ganador-nombre a{color:var(--mj-tinta); text-decoration:none} .mj-ganador-datos{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap} .mj-ganador-razon{font-size:.8rem; color:var(--mj-gris); margin:0; line-height:1.35; flex:1} .mj-ganador-pie{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.45rem; margin-top:.2rem} .mj-cupon{font-size:.82rem; color:var(--mj-gris); margin:.2rem 0 0} .mj-cupon b{color:var(--mj-tinta); border:1px dashed var(--mj-rosa); border-radius:6px; padding:.08rem .4rem; margin-left:.2rem} /* ── 3 · Tabla / tarjetas ───────────────────────────────────────────────── */ .mj-vistas{display:none} .mj-tabla-envoltorio{margin-top:.6rem} .mj-tabla{width:100%; border-collapse:collapse; font-size:.84rem} .mj-tabla th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mj-gris); font-weight:700; text-align:left; padding:.55rem .5rem; background:var(--mj-fondo); white-space:nowrap} .mj-tabla td{padding:.5rem; border-bottom:1px solid var(--mj-linea); vertical-align:middle} .mj-td-producto a{display:flex; align-items:center; gap:.55rem; color:var(--mj-tinta); text-decoration:none; font-weight:600} .mj-td-producto img{width:44px; height:44px; object-fit:contain; border-radius:8px; background:#fff; flex:none} .mj-td-producto small{display:block; color:var(--mj-gris); font-weight:500; font-size:11px} .mj-td-puesto{font-weight:700; color:var(--mj-tinta); text-align:center; width:2rem} .mj-td-precio{font-weight:700; color:var(--mj-tinta); white-space:nowrap} .mj-tabla tr.mj-extra{display:none} .mj-todos .mj-tabla tr.mj-extra{display:table-row} .mj-ver-todos{margin:.8rem auto 0; display:flex; align-items:center; gap:.35rem; background:none; border:0; color:var(--mj-rosa-oscuro); font-weight:700; font-size:.88rem; cursor:pointer; padding:.4rem} .mj-ver-todos[aria-expanded="true"] .mj-ico{transform:rotate(180deg)} /* Móvil: la tabla se convierte en tarjetas compactas (nada de tabla microscópica) */ /* Móvil: que el primer ganador asome en la primera pantalla (390×844) — las cifras del hero, en compacto */ @media (max-width:767.98px){ .mj-hero h1{font-size:1.45rem !important} .mj-entradilla{font-size:.95rem; margin-bottom:.5rem} .mj-cifras{gap:.15rem .6rem; margin:.5rem 0 .6rem} .mj-cifras li{background:none; padding:.1rem 0; font-size:12px} .mj-cifras b{display:inline; font-size:.88rem} .mj-cifras small{display:inline; font-size:11.5px} .mj-cifras .mj-ico{width:1rem; height:1rem} .mj-firma img{width:32px; height:32px} .mj-bloque-ganadores{padding-top:1rem} .mj-ganador-img img{max-width:110px} .mj-firma{display:none} /* la autoría sigue en «Sobre esta comparativa» */ .mj-bloque-ganadores .mj-sub{display:none} } @media (max-width:991.98px){ .mj-tabla thead{display:none} .mj-tabla, .mj-tabla tbody{display:block} .mj-tabla tr{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .75rem; border:1px solid var(--mj-linea); border-radius:var(--mj-radio-s); padding:.6rem .7rem; margin-bottom:.5rem; background:#fff} .mj-tabla tr.mj-extra{display:none} .mj-todos .mj-tabla tr.mj-extra{display:flex} .mj-tabla td{border:0; padding:0} .mj-tabla td.mj-td-puesto{order:1; width:auto; font-size:1rem} .mj-tabla td.mj-td-producto{order:2; flex:1 1 calc(100% - 7rem); min-width:0} .mj-tabla td.mj-td-cta{order:3} .mj-tabla td[data-th]{order:4; display:inline-flex; align-items:center; gap:.25rem; font-size:.78rem} .mj-tabla td[data-th]::before{content:attr(data-th); color:var(--mj-gris); font-size:11px} .mj-tabla td[data-th="Nota"]::before, .mj-tabla td[data-th="Precio"]::before, .mj-tabla td[data-th="Opiniones"]::before, .mj-tabla td[data-th="Mejor para"]::before{content:none} .mj-tabla td[data-th="Mejor para"]{flex-basis:100%} .mj-tabla td.mj-td-vacia{display:none} .mj-tabla td.mj-solo-escritorio{display:none} .mj-tabla-metodo tr{display:block} .mj-tabla-metodo td{display:block; margin:0 0 .3rem} } /* ── 4 · Cómo elegimos ──────────────────────────────────────────────────── */ .mj-bloque-metodo{background:var(--mj-fondo); border-radius:var(--mj-radio); padding:1.3rem 1rem; margin:1rem 0; border:0} .mj-fuentes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.4rem} .mj-fuentes li{background:#fff; border-radius:var(--mj-radio-s); padding:.55rem .7rem; display:grid; grid-template-columns:1fr auto; gap:0 .5rem; font-size:.84rem} .mj-fuentes b{color:var(--mj-tinta)} .mj-fuentes small{grid-column:1 / -1; color:var(--mj-gris); font-size:.75rem; line-height:1.35; display:none} .mj-fuentes li{align-items:baseline} .mj-peso{font-weight:700; color:var(--mj-rosa-oscuro); font-variant-numeric:tabular-nums} .mj-metodo-lado{margin-top:1rem; font-size:.86rem} /* ── 5 · Análisis ───────────────────────────────────────────────────────── */ .mj-producto{border:1px solid var(--mj-linea); border-radius:var(--mj-radio); padding:1rem; margin:1rem 0; scroll-margin-top:calc(var(--mj-top) + 3.4rem); background:#fff} .mj-producto-cab{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"puesto titulo" "nota nota"; gap:.3rem .6rem; align-items:start; margin-bottom:.8rem} .mj-puesto{grid-area:puesto; background:var(--mj-rosa-suave); color:var(--mj-rosa-oscuro); font-weight:800; border-radius:8px; padding:.3rem .5rem; font-size:.95rem; line-height:1} .mj-producto-titulo{grid-area:titulo; min-width:0} .mj-producto-titulo h3 a{color:var(--mj-tinta); text-decoration:none} .mj-producto-titulo p{font-size:.78rem; margin:.1rem 0 .35rem; line-height:1.3} .mj-producto-nota{grid-area:nota; display:flex; align-items:baseline; gap:.5rem; border-top:1px solid var(--mj-linea); padding-top:.5rem} .mj-producto-nota small{font-size:11px; color:var(--mj-gris); text-transform:uppercase; letter-spacing:.03em} .mj-producto-cuerpo{display:grid; grid-template-columns:1fr; gap:1rem} .mj-producto-media{display:grid; grid-template-columns:110px 1fr; gap:.5rem .8rem; align-items:center; align-content:start} .mj-producto-foto img{width:110px; height:110px; object-fit:contain} .mj-miniaturas{display:none} .mj-compra{display:flex; flex-direction:column; gap:.35rem; align-items:flex-start} .mj-compra s{font-size:.8rem} .mj-producto-texto p{font-size:.9rem} .mj-resumen{font-weight:600; color:var(--mj-tinta)} .mj-pros-contras{display:grid; grid-template-columns:1fr; gap:.6rem; margin:.6rem 0} .mj-pros,.mj-contras{border-radius:var(--mj-radio-s); padding:.65rem .75rem} .mj-pros{background:#eaf8f5} .mj-pros h4 .mj-ico{color:#23a08c} .mj-contras{background:#fdf0f5} .mj-contras h4 .mj-ico{color:var(--mj-rosa)} .mj-pros ul,.mj-contras ul{margin:0 !important; padding:0; font-size:.85rem} .mj-pros li,.mj-contras li{margin:.2rem 0; padding-left:.9rem; position:relative; line-height:1.4} .mj-pros li::before,.mj-contras li::before{content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:#23a08c} .mj-contras li::before{background:var(--mj-rosa)} .mj-ideal,.mj-otro{margin-top:.6rem} .mj-ideal p,.mj-otro p{font-size:.88rem; margin:0} .mj-chip{display:inline-block; background:var(--mj-fondo); border-radius:999px; padding:.18rem .6rem; font-size:.78rem; margin:0 .3rem .3rem 0} .mj-barras{list-style:none; margin:0 0 .8rem; padding:0} .mj-barras li{display:grid; grid-template-columns:1fr 2.1rem; grid-template-areas:"nombre nota" "barra barra" "dato dato"; gap:.12rem .4rem; margin-bottom:.55rem} .mj-barra-nombre{grid-area:nombre; font-size:.8rem; font-weight:600; color:var(--mj-tinta)} .mj-barra{grid-area:barra; height:6px; border-radius:6px; background:#eceef4; overflow:hidden} .mj-barra i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--mj-rosa),#f57db4)} .mj-barra-vacia{background:repeating-linear-gradient(90deg,#eceef4 0 6px,#fff 6px 9px)} .mj-barra-nota{grid-area:nota; text-align:right; font-size:.8rem; font-weight:700; color:var(--mj-tinta); font-variant-numeric:tabular-nums} .mj-barra-dato{grid-area:dato; font-size:11px; color:var(--mj-gris); line-height:1.3} .mj-mas > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem; color:var(--mj-rosa-oscuro); padding:.55rem .7rem; border:1px solid var(--mj-linea); border-radius:var(--mj-radio-s); margin-bottom:.6rem} .mj-mas > summary::-webkit-details-marker{display:none} .mj-mas > summary .mj-ico:last-child{margin-left:auto} .mj-mas[open] > summary .mj-ico:last-child{transform:rotate(180deg)} .mj-clientes{background:var(--mj-fondo); border-radius:var(--mj-radio-s); padding:.7rem .8rem} .mj-clientes-cifra{margin:0 0 .4rem} .mj-clientes-resumen{font-size:.86rem} .mj-temas{margin:0 0 .4rem} .mj-tema{display:inline-block; font-size:11.5px; border-radius:999px; padding:.14rem .5rem; margin:0 .2rem .25rem 0; background:#fff} .mj-tema-bien{color:#1d8a78} .mj-tema-mal{color:#b83a70} .mj-nota-ia{font-size:11px; color:var(--mj-gris); display:flex; gap:.3rem; align-items:center} .mj .mj-cita{margin:.5rem 0; padding:.55rem .7rem; background:#fff; border-left:3px solid var(--mj-amarillo); border-radius:0 8px 8px 0; font-size:.85rem; line-height:1.45; color:var(--mj-texto); overflow:visible} .mj-cita p{margin:0 0 .25rem; font-style:italic} .mj-cita-autor{display:block; font-size:11px; color:var(--mj-gris); font-style:normal} /* ── 6 · ¿Cuál elegir? ──────────────────────────────────────────────────── */ .mj-necesidades{display:grid; grid-template-columns:1fr; gap:.55rem} .mj-necesidad{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico txt" "prod prod" "enl enl"; gap:.4rem .6rem; align-items:center; border:1px solid var(--mj-linea); border-radius:var(--mj-radio); padding:.75rem .85rem; text-decoration:none !important; color:var(--mj-texto) !important; background:#fff; transition:border-color .15s, box-shadow .15s} .mj-necesidad:hover{border-color:var(--mj-rosa); box-shadow:0 4px 14px rgba(240,77,152,.08)} .mj-necesidad-ico{grid-area:ico; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--mj-rosa-suave); color:var(--mj-rosa); display:flex; align-items:center; justify-content:center} .mj-necesidad-ico .mj-ico{width:1.1rem; height:1.1rem} .mj-necesidad-txt{grid-area:txt; font-weight:700; color:var(--mj-tinta); font-size:.92rem; line-height:1.25} .mj-necesidad-prod{grid-area:prod; display:flex; align-items:center; gap:.55rem; font-size:.84rem} .mj-necesidad-prod img{width:48px; height:48px; object-fit:contain} .mj-necesidad-prod b{display:block; color:var(--mj-tinta)} .mj-necesidad-prod small{color:var(--mj-gris)} .mj-necesidad .mj-enlace{grid-area:enl; color:var(--mj-rosa-oscuro)} /* ── Guía ────────────────────────────────────────────────────────────────── */ .mj-guia{max-width:64rem} .mj-guia > p{max-width:46rem} .mj-guia h3{margin:1rem 0 .5rem} .mj-guia img{max-width:min(100%,420px); height:auto; border-radius:var(--mj-radio-s); display:block; margin:.6rem 0} /* La lista de la guía, compacta: sin las cajas de colores de style_blog.css */ .mj-guia ol{counter-reset:mjg; list-style:none; margin:.8rem 0 !important; padding:0; display:grid; grid-template-columns:1fr; gap:.5rem} .mj-guia ol > li{counter-increment:mjg; list-style:none; position:relative; margin:0; padding:.6rem .8rem .6rem 2.5rem; background:var(--mj-fondo); border-radius:var(--mj-radio-s); font-size:.9rem; line-height:1.45} .mj-guia ol > li::before{content:counter(mjg); position:absolute; left:.85rem; top:.55rem; font-weight:800; color:var(--mj-rosa); font-size:1rem} .mj-guia ol > li strong{color:var(--mj-tinta)} .mj-guia ul{padding-left:1.3rem} .mj-guia ul li{list-style:disc; margin:.45rem 0} .mj-guia iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:var(--mj-radio-s)} /* ── 7 · FAQ y 8 · transparencia ────────────────────────────────────────── */ .mj-cierre{display:grid; grid-template-columns:minmax(0,1fr); gap:0 2rem} .mj-cierre > *{min-width:0} .mj-faq{border-bottom:1px solid var(--mj-linea)} .mj-faq summary{list-style:none; cursor:pointer; padding:.8rem 0; font-weight:600; color:var(--mj-tinta); display:flex; justify-content:space-between; gap:.8rem; align-items:center} .mj-faq summary::-webkit-details-marker{display:none} .mj-faq[open] summary .mj-ico{transform:rotate(180deg)} .mj-faq p{font-size:.9rem; padding-bottom:.6rem} .mj-bloque-transparencia{background:var(--mj-fondo); border-radius:var(--mj-radio); padding:1.2rem 1rem; border:0; margin:1rem 0} .mj-ficha{display:grid; grid-template-columns:1fr; gap:.1rem; margin:.6rem 0; font-size:.86rem} .mj-ficha dt{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mj-gris); margin-top:.45rem} .mj-ficha dd{margin:0; color:var(--mj-tinta)} .mj-aviso{font-size:.78rem; color:var(--mj-gris)} /* ── Metodología completa ───────────────────────────────────────────────── */ .mj-metodologia summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem} .mj-metodologia summary::-webkit-details-marker{display:none} .mj-metodologia summary h2{margin:0} .mj-metodologia[open] summary .mj-ico{transform:rotate(180deg)} .mj-metodologia-cuerpo{padding-top:.6rem; font-size:.88rem} .mj-metodologia-cuerpo h3{font-size:.98rem; margin:1rem 0 .35rem} .mj-tabla-metodo td{font-size:.8rem; vertical-align:top} .mj-puertas{columns:2; font-size:.82rem; padding-left:1.1rem} .mj-relacionadas{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:.5rem} .mj-relacionadas a{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--mj-tinta); font-weight:600; font-size:.86rem} .mj-relacionadas img{border-radius:8px; object-fit:cover; flex:none} /* ═══ ≥ 768 ═══════════════════════════════════════════════════════════════ */ @media (min-width:768px){ .mj{font-size:15.5px; --mj-top:106px} .mj h2{font-size:1.6rem !important} .mj-hero h1{font-size:2.05rem !important} .mj-cifras{grid-template-columns:repeat(4,1fr)} .mj-ganador{flex-basis:40%} .mj-vistas{display:none; gap:.35rem} .mj-vista{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--mj-linea); background:#fff; border-radius:8px; padding:.4rem .7rem; font-size:.8rem; font-weight:600; color:var(--mj-gris); cursor:pointer} .mj-vista[aria-pressed="true"]{border-color:var(--mj-rosa); color:var(--mj-rosa-oscuro); background:var(--mj-rosa-suave)} .mj-tabla-envoltorio{overflow-x:visible} .mj-tabla tr{max-width:none} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla thead{display:none} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla tbody{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla tr{display:grid; grid-template-columns:auto 1fr auto; gap:.3rem .6rem; border:1px solid var(--mj-linea); border-radius:var(--mj-radio-s); padding:.7rem} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla tr.mj-extra{display:none} .mj-tabla-envoltorio[data-mj-modo="tarjetas"].mj-todos .mj-tabla tr.mj-extra{display:grid} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla td{border:0; padding:0} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla td[data-th]{grid-column:1 / -1; font-size:.8rem} .mj-tabla-envoltorio[data-mj-modo="tarjetas"] .mj-tabla td[data-th]::before{content:attr(data-th) ": "; color:var(--mj-gris)} .mj-fuentes{grid-template-columns:repeat(2,1fr)} .mj-fuentes small{display:block} .mj-bloque-metodo{padding:1.6rem 1.5rem} .mj-producto{padding:1.3rem 1.4rem} .mj-producto-cab{grid-template-columns:auto 1fr auto; grid-template-areas:"puesto titulo nota"} .mj-producto-nota{border:0; padding:0; flex-direction:column; align-items:flex-end; gap:0} .mj-producto-cuerpo{grid-template-columns:200px 1fr} .mj-producto-media{grid-template-columns:1fr; align-items:start} .mj-producto-foto img{width:200px; height:200px} .mj-miniaturas{display:flex; gap:.4rem} .mj-miniaturas img{width:56px; height:56px; object-fit:contain; border:1px solid var(--mj-linea); border-radius:8px} .mj-producto-datos{grid-column:1 / -1} .mj-mas > summary{display:none} .mj-necesidades{grid-template-columns:repeat(2,1fr)} .mj-ficha{grid-template-columns:auto 1fr; gap:.35rem 1rem} .mj-ficha dt{margin:0} .mj-relacionadas{grid-template-columns:repeat(2,1fr)} .mj-guia ol{grid-template-columns:1fr 1fr} } /* ═══ ≥ 1024 ══════════════════════════════════════════════════════════════ */ @media (min-width:1024px){ .mj-hero{padding:.3rem 0 .8rem} .mj-hero-rejilla{display:grid; grid-template-columns:1fr 280px; gap:2.5rem; align-items:start} .mj-hero h1{font-size:2.2rem !important; margin-bottom:.4rem} .mj-cifras{margin:.7rem 0} .mj-cifras li{padding:.45rem .6rem} .mj-indice{display:block; background:#fff; border:1px solid var(--mj-linea); border-radius:var(--mj-radio); padding:1rem 1.1rem; margin-top:.8rem; box-shadow:0 8px 24px rgba(31,34,48,.05)} .mj-indice-titulo{font-weight:700; color:var(--mj-tinta); margin:0 0 .4rem; font-size:.9rem} .mj-indice ol{margin:0 0 .9rem; padding-left:1.2rem; font-size:.84rem; line-height:1.9} .mj-indice a{color:var(--mj-texto); text-decoration:none} .mj-indice a:hover{color:var(--mj-rosa-oscuro)} .mj-ganador{flex-basis:30%} .mj-pros-contras{grid-template-columns:1fr 1fr} .mj-bloque-ganadores{background:linear-gradient(180deg,#fff5fa 0,#fff 100%); border-radius:var(--mj-radio); padding:1.1rem 1.4rem 1rem; margin-top:.4rem} .mj-bloque-ganadores .mj-sub{margin-bottom:.6rem} .mj-vistas{display:inline-flex} .mj-tabla-envoltorio{overflow-x:auto} .mj-td-producto{min-width:190px} .mj-necesidades{grid-template-columns:repeat(3,1fr)} .mj-cierre{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} .mj-cierre .mj-bloque{border-bottom:0} .mj-relacionadas{grid-template-columns:repeat(3,1fr)} .mj-puertas{columns:4} } /* Las columnas de lujo sólo con sitio de verdad: a 1024 los ganadores cortaban «MEJOR CALIDAD/PRECI…» y el análisis a tres columnas dejaba los pros y contras en 130 px (capturas del 2026-09-11). */ @media (max-width:1279.98px){ .mj-tabla th.mj-solo-escritorio, .mj-tabla td.mj-solo-escritorio{display:none} } @media (min-width:1280px){ .mj-ganadores{display:grid; grid-template-columns:repeat(var(--mj-n,5),minmax(0,1fr)); overflow:visible; margin:0; padding:.2rem 0 .6rem} .mj-ganador{max-width:none; padding:.75rem .7rem .8rem} .mj-ganador-pie .mj-btn{flex:1 1 auto; padding:.55rem .6rem} .mj-ganador-img img{max-width:130px} .mj-metodo-rejilla{display:grid; grid-template-columns:1fr 300px; gap:2rem; align-items:start} .mj-fuentes{grid-template-columns:repeat(3,1fr)} .mj-metodo-lado{margin-top:0; background:#fff; border-radius:var(--mj-radio-s); padding:1rem} .mj-producto-cuerpo{grid-template-columns:220px minmax(0,1fr) 300px} .mj-producto-datos{grid-column:auto} .mj-necesidades{grid-template-columns:repeat(var(--mj-n,5),minmax(0,1fr))} .mj-necesidad{grid-template-columns:1fr; grid-template-areas:"ico" "txt" "prod" "enl"; align-content:start} } @media (min-width:1400px){ .mj-hero h1{font-size:2.4rem !important} } /* ── El cupón: tarjeta a media comparativa y barra fija abajo ─────────────── */ /* 🔑 El aspecto original vive en css/style_blog.css, que en la zona «blog» SÍ se carga, pero AL PIE (scripts_comunes.php:513). Repetirlo aquí, en el , evita que el cupón se pinte sin estilo durante la primera pantalla y que dependa de que el CSS del blog siga cargándose en esta página. Mismos valores; lo que va con `.mj-cupon-tarjeta` delante gana por especificidad. */ .mj-cupon-tarjeta{border:2px dashed var(--mj-rosa); background:#fff0f5; padding:20px; max-width:400px; margin:1.6rem auto; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.1); text-align:center; position:relative; overflow:hidden; box-sizing:border-box} .mj-cupon-tarjeta::before,.mj-cupon-tarjeta::after{content:''; position:absolute; background:#fff; border-radius:50%; width:30px; height:30px; top:50%; transform:translateY(-50%); z-index:1} .mj-cupon-tarjeta::before{left:-15px} .mj-cupon-tarjeta::after{right:-15px} .mj-cupon-tarjeta .coupon-header{background:var(--mj-rosa); color:#fff; padding:10px 0; margin:-20px -20px 20px; border-radius:8px 8px 0 0} .mj-cupon-tarjeta .discount-percentage{font-size:2.6rem; font-weight:800; line-height:1; margin:0 0 5px} .mj-cupon-tarjeta .discount-text{font-size:1.05rem; text-transform:uppercase; letter-spacing:1px; margin:0} .mj-cupon-tarjeta .coupon-body{padding:10px 0} .mj-cupon-tarjeta .coupon-description{font-size:1rem; color:var(--mj-texto); margin:0 0 1rem; line-height:1.4; position:relative; z-index:2} .mj-cupon-tarjeta .coupon-description b{color:var(--mj-rosa)} .mj-cupon-tarjeta .coupon-description a{color:var(--mj-rosa-oscuro); font-weight:700; text-decoration:none} .mj-cupon-tarjeta .coupon-code-box{background:#ffe0f0; border:1px solid var(--mj-rosa); padding:10px 15px; margin:0 auto; border-radius:5px; display:inline-block; position:relative; z-index:2} .mj-cupon-tarjeta .coupon-code{font-size:1.6rem; font-weight:800; color:var(--mj-rosa); letter-spacing:2px; margin:0; user-select:all} /* La barra: compacta a propósito (56-64 px). No puede comerse media pantalla en un móvil. */ .mj-barra-cupon{position:fixed; left:0; right:0; bottom:0; z-index:18; background:#993de8; color:#fff; font-size:12px; box-shadow:0 0 5px rgba(31,34,48,.45); animation:mj-sube .35s ease-out both} @keyframes mj-sube{from{transform:translateY(100%)} to{transform:translateY(0)}} .mj-barra-cupon .row{align-items:center} .mj-barra-cupon a{color:#fff} .mj-barra-pct{font-size:22px; font-weight:700; line-height:1.1} .mj-barra-dto{display:block; font-size:11px; letter-spacing:.04em} .mj-barra-cupon .fcodigo{display:block; border:1px dashed #fff; border-radius:4px; padding:1px 4px; font-size:14px; font-weight:700; letter-spacing:.05em} .mj-barra-cupon .btn-uno{height:auto; line-height:1.2; padding:.6rem .8rem; font-size:.78rem; white-space:normal} /* Sitio para la barra al final de la página: si no, tapa el pie */ body.mj-con-barra{padding-bottom:76px} @media (min-width:768px){ .mj-barra-pct{font-size:27px; font-weight:600} .mj-barra-cupon .fcodigo{font-size:18px} .mj-barra-cupon .btn-uno{padding:.7rem 1.2rem; font-size:.85rem} body.mj-con-barra{padding-bottom:86px} } @media print{ .mj-barra-cupon{display:none} } @media (prefers-reduced-motion:reduce){ .mj *{transition:none !important} html{scroll-behavior:auto} .mj-barra-cupon{animation:none} }