/* ========================================================================== Ergosetup · 4-paginas.css Estilos propios de cada tipo de página: portada, categoría, ficha de producto, comparador, guía y páginas legales. ========================================================================== */ /* ========================================================================== Portada · sección principal ========================================================================== */ .portada-hero { padding-block: var(--e-9) var(--e-8); } /* ========================================================================== Fondo de malla Vive en el (clase "fondo-malla", puesta por defecto en plantillas/base.py::documento()), no en un pseudo-elemento del hero: así se pinta como fondo del propio elemento —el navegador lo dibuja siempre detrás de sus hijos— y no compite en z-index con la cabecera ni con nada más. Al estar en el body cubre toda la página de forma continua, no solo una seccion concreta. PRUEBA A NIVEL DE SITIO: estaba solo en la portada; ahora se aplica a todas las paginas para ver como queda. Para volver a dejarlo solo en la portada: en base.py, cambia el valor por defecto de clase_body en documento() de "fondo-malla" a "", y anade clase_body="fondo-malla" unicamente en la llamada de plantillas/portada.py. ========================================================================== */ body.fondo-malla { background-image: radial-gradient(ellipse 900px 480px at 50% -80px, var(--brand-soft) 0%, transparent 70%), linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px); background-repeat: no-repeat, repeat, repeat; background-position: top center, 0 0, 0 0; background-size: auto, 46px 46px, 46px 46px; /* El resplandor se desplaza con el contenido (aparece una vez, arriba del todo, y se va al hacer scroll); la malla se queda fija respecto a la ventana, dando una textura sutil constante durante todo el scroll. */ background-attachment: scroll, fixed, fixed; } /* Las secciones alternas usan un fondo solido en el resto del sitio para diferenciarse visualmente. En la portada, con la malla de fondo activa, ese solido la taparia a franjas. Se deja transparente solo aqui. */ body.fondo-malla .seccion--alt { background: transparent; } .portada-hero__contenido { max-width: 46rem; } .portada-hero h1 { margin-bottom: var(--e-5); } .portada-hero h1 em { font-style: normal; color: var(--brand); /* Subrayado orgánico que no toca los descendentes de las letras */ background: linear-gradient(transparent 62%, var(--brand-soft) 62%); } .portada-hero__entradilla { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55; max-width: 40rem; margin-bottom: var(--e-6); } .portada-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); } /* Tres pilares del método, bajo el hero */ .pilares { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--line); } .pilar__num { font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 700; color: var(--brand); letter-spacing: .05em; display: block; margin-bottom: var(--e-2); } .pilar h3 { font-size: var(--t-md); margin-bottom: var(--e-2); } .pilar p { font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; } /* ========================================================================== Rejilla de categorías ========================================================================== */ .tarjeta-categoria { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); min-height: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: var(--transicion); } .tarjeta-categoria:hover { border-color: var(--brand-line); box-shadow: var(--sombra-2); transform: translateY(-3px); color: inherit; } .tarjeta-categoria__icono { width: 42px; height: 42px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); border-radius: var(--r-md); } .tarjeta-categoria__icono svg { width: 22px; height: 22px; } .tarjeta-categoria h3 { font-size: var(--t-lg); margin: 0; } .tarjeta-categoria p { font-size: var(--t-base); color: var(--ink-2); margin: 0; line-height: 1.55; } .tarjeta-categoria__pie { margin-top: auto; padding-top: var(--e-3); font-size: var(--t-sm); font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: var(--e-2); } .tarjeta-categoria:hover .tarjeta-categoria__pie svg { transform: translateX(3px); } .tarjeta-categoria__pie svg { width: 14px; height: 14px; transition: var(--transicion); } /* ========================================================================== Ficha de producto ========================================================================== */ .producto-cabecera { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: var(--e-6) var(--e-8); align-items: start; } @media (max-width: 900px) { .producto-cabecera { grid-template-columns: 1fr; gap: var(--e-6); } } .producto-cabecera__info { display: grid; gap: var(--e-4); align-content: start; } .producto-cabecera h1 { font-size: var(--t-2xl); margin: 0; } .producto-cabecera__entradilla { font-size: var(--t-md); color: var(--ink-2); line-height: 1.6; margin: 0; } .producto-cabecera__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); } /* Caja de compra: precio + botón afiliado */ .caja-compra { padding: var(--e-5); background: var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--r-lg); box-shadow: var(--sombra-1); display: grid; gap: var(--e-4); } .caja-compra__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; } /* Puntos clave junto a la galería */ .puntos-clave { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); } .puntos-clave li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); font-size: var(--t-base); color: var(--ink-2); line-height: 1.5; margin: 0; } .puntos-clave li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--brand); border-radius: var(--r-full); } /* --- Navegación interna pegajosa de la ficha ----------------------------- */ .indice-ficha { position: sticky; top: var(--alto-cabecera); z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); margin-bottom: var(--e-7); } .indice-ficha ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; } .indice-ficha ul::-webkit-scrollbar { display: none; } .indice-ficha a { display: block; white-space: nowrap; padding: var(--e-3) var(--e-4); font-size: var(--t-base); font-weight: 550; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; transition: var(--transicion); } .indice-ficha a:hover { color: var(--ink); } .indice-ficha a.activo { color: var(--brand); border-bottom-color: var(--brand); } .bloque-ficha { padding-block: var(--e-6); scroll-margin-top: calc(var(--alto-cabecera) + 56px); } .bloque-ficha + .bloque-ficha { border-top: 1px solid var(--line); } .bloque-ficha > h2 { font-size: var(--t-xl); margin-bottom: var(--e-5); } /* --- Veredicto destacado ------------------------------------------------- */ .veredicto { padding: var(--e-6); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-lg); } .veredicto h2 { font-size: var(--t-lg); margin-bottom: var(--e-3); color: var(--brand); } .veredicto p { font-size: var(--t-md); line-height: 1.65; color: var(--ink); margin: 0; } /* --- Perfiles de usuario ------------------------------------------------- */ .perfiles { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); } .perfil { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); padding: var(--e-4) var(--e-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .perfil__marca { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-full); flex-shrink: 0; } .perfil--si .perfil__marca { background: var(--bien-soft); color: var(--bien); } .perfil--no .perfil__marca { background: var(--mal-soft); color: var(--mal); } .perfil__marca svg { width: 16px; height: 16px; } .perfil h3 { font-size: var(--t-base); font-weight: 650; margin: 0 0 var(--e-2); } .perfil p { font-size: var(--t-base); color: var(--ink-2); margin: 0; line-height: 1.55; } /* --- Especificaciones ---------------------------------------------------- */ .specs-grupo + .specs-grupo { margin-top: var(--e-5); } .specs-grupo__titulo { font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--e-3); } /* --- Cumplimiento normativo (sillas) ------------------------------------- */ .cumplimiento { display: grid; gap: var(--e-2); } .cumplimiento__fila { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: start; padding: var(--e-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } @media (max-width: 640px) { .cumplimiento__fila { grid-template-columns: auto 1fr; } .cumplimiento__fuente { grid-column: 2; } } .cumplimiento__icono { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-full); } .cumplimiento__icono svg { width: 14px; height: 14px; } .cumplimiento__fila[data-estado="cumple"] .cumplimiento__icono { background: var(--bien-soft); color: var(--bien); } .cumplimiento__fila[data-estado="parcial"] .cumplimiento__icono { background: var(--aviso-soft); color: var(--aviso); } .cumplimiento__fila[data-estado="sin-dato"] .cumplimiento__icono { background: var(--neutro-soft); color: var(--neutro); } .cumplimiento__requisito { font-weight: 600; font-size: var(--t-base); display: block; margin-bottom: 2px; } .cumplimiento__detalle { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; } /* --- Reseñas ------------------------------------------------------------- */ .resenas-panel { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; } @media (max-width: 780px) { .resenas-panel { grid-template-columns: 1fr; } } .resenas-resumen { padding: var(--e-5); background: var(--surface-2); border-radius: var(--r-lg); text-align: center; } .resenas-resumen__nota { font-family: var(--fuente-titulo); font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); } .resenas-resumen__num { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--e-2); } .resenas-resumen .histograma { margin-top: var(--e-5); text-align: left; } .temas { display: grid; gap: var(--e-3); margin-top: var(--e-5); } .tema { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-md); background: var(--surface-2); } .tema__punto { width: 8px; height: 8px; border-radius: var(--r-full); margin-top: 8px; } .tema[data-sentimiento="positivo"] .tema__punto { background: var(--bien); } .tema[data-sentimiento="negativo"] .tema__punto { background: var(--mal); } .tema[data-sentimiento="mixto"] .tema__punto { background: var(--aviso); } .tema strong { display: block; font-size: var(--t-base); margin-bottom: 2px; } .tema p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.5; } .citas { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); margin-top: var(--e-5); } .cita { padding: var(--e-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: var(--e-3); } .cita__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; } .cita__titulo { font-weight: 650; font-size: var(--t-base); line-height: 1.35; } .cita blockquote { margin: 0; font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; } .cita blockquote::before { content: "«"; color: var(--line-fuerte); margin-right: 2px; } .cita blockquote::after { content: "»"; color: var(--line-fuerte); margin-left: 2px; } .cita__pie { font-size: var(--t-xs); color: var(--ink-3); display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; } /* ========================================================================== Comparador ergonómico vs. convencional ========================================================================== */ .comparador-hero { padding-block: var(--e-7) var(--e-6); } /* Cabecera de duelo: los dos productos enfrentados */ .duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e-4); align-items: stretch; margin-bottom: var(--e-7); } @media (max-width: 760px) { .duelo { grid-template-columns: 1fr; } .duelo__vs { justify-self: center; } } .duelo__lado { padding: var(--e-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--e-3); align-content: start; } .duelo__lado--ergonomico { border-color: var(--brand-line); background: var(--brand-soft); } .duelo__lado--convencional { background: var(--surface-2); } .duelo__etiqueta { font-family: var(--fuente-titulo); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .duelo__lado--ergonomico .duelo__etiqueta { color: var(--brand); } .duelo__lado--convencional .duelo__etiqueta { color: var(--ink-3); } .duelo__media { position: relative; aspect-ratio: 3 / 2; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; } .duelo__media img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 76%; width: auto; height: auto; object-fit: contain; } .duelo__nombre { font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: 600; line-height: 1.3; } .duelo__nombre a { color: var(--ink); text-decoration: none; } .duelo__nombre a:hover { color: var(--brand); } .duelo__datos { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; font-size: var(--t-sm); color: var(--ink-2); } .duelo__vs { display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-sm); letter-spacing: .1em; color: var(--ink-3); width: 44px; height: 44px; align-self: center; background: var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--r-full); } /* Las tres capas del comparador */ .capa { padding-block: var(--e-7); } .capa + .capa { border-top: 1px solid var(--line); } .capa__num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--brand); color: #fff; font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--e-3); } /* Tabla comparativa: la pieza central del sitio */ .tabla-comparativa { width: 100%; border-collapse: collapse; font-size: var(--t-base); min-width: 640px; } .tabla-comparativa th, .tabla-comparativa td { padding: var(--e-4); text-align: left; vertical-align: top; } .tabla-comparativa thead th { font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 600; background: var(--surface-2); border-bottom: 2px solid var(--line-fuerte); white-space: nowrap; } .tabla-comparativa thead th:nth-child(2) { color: var(--brand); background: var(--brand-soft); } .tabla-comparativa tbody tr { border-bottom: 1px solid var(--line); } .tabla-comparativa tbody tr:last-child { border-bottom: 0; } .tabla-comparativa th[scope="row"] { font-weight: 600; color: var(--ink); width: 22%; } .tabla-comparativa td:nth-child(2) { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); font-weight: 550; } .tabla-comparativa .celda-valor { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; } .tabla-comparativa .explicacion { display: block; margin-top: var(--e-2); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; font-weight: 400; } .marca-ventaja { flex-shrink: 0; width: 15px; height: 15px; } .marca-ventaja--bien { color: var(--bien); } /* Tabla de hallazgos de estudio */ .tabla-hallazgos { width: 100%; border-collapse: collapse; font-size: var(--t-base); min-width: 560px; } .tabla-hallazgos th, .tabla-hallazgos td { padding: var(--e-3) var(--e-4); text-align: left; } .tabla-hallazgos thead th { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line-fuerte); } .tabla-hallazgos tbody tr { border-bottom: 1px solid var(--line); } .tabla-hallazgos tbody tr:last-child { border-bottom: 0; } .tabla-hallazgos .valor-mejor { font-weight: 700; color: var(--bien); } .tabla-hallazgos .valor-peor { color: var(--ink-2); } .tabla-hallazgos .valor-p { font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--ink-3); } /* Bloques de evidencia */ .bloque-evidencia { padding: var(--e-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: var(--e-3); } .bloque-evidencia + .bloque-evidencia { margin-top: var(--e-4); } .bloque-evidencia--destacado { border-color: var(--aviso-line); background: var(--aviso-soft); } .bloque-evidencia h3 { font-size: var(--t-md); margin: 0; } .bloque-evidencia p { font-size: var(--t-base); color: var(--ink-2); line-height: 1.65; margin: 0; } .bloque-evidencia--destacado p { color: var(--ink); } /* Columnas de reseñas enfrentadas */ .resenas-duelo { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); } .resenas-columna { padding: var(--e-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--e-4); align-content: start; } .resenas-columna--ergonomico { border-color: var(--brand-line); } .resenas-columna__nota { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; } .resenas-columna dl { margin: 0; display: grid; gap: var(--e-3); } .resenas-columna dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } .resenas-columna dd { margin: 0; font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; } /* Veredicto del comparador */ .veredicto-comparador { padding: var(--e-6); border-radius: var(--r-lg); background: var(--brand); color: #fff; } .veredicto-comparador h2 { color: #fff; font-size: var(--t-xl); margin-bottom: var(--e-4); } .veredicto-comparador p { font-size: var(--t-md); line-height: 1.65; color: rgba(255,255,255,.92); } .veredicto-comparador .condicion { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid rgba(255,255,255,.22); font-size: var(--t-base); color: rgba(255,255,255,.82); } /* Bloque de honestidad: qué NO resuelve el producto ergonómico */ .honestidad { padding: var(--e-6); border: 1px dashed var(--line-fuerte); border-radius: var(--r-lg); background: var(--surface-2); } .honestidad h2 { font-size: var(--t-lg); margin-bottom: var(--e-4); } .honestidad ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); } .honestidad li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; margin: 0; } .honestidad li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; flex-shrink: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236E7A85'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E"); } /* ========================================================================== Guías de compra y artículos ========================================================================== */ .articulo-cabecera { padding-block: var(--e-7) var(--e-6); border-bottom: 1px solid var(--line); } .articulo-cabecera h1 { max-width: 20ch; } .articulo-cabecera__entradilla { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55; max-width: var(--ancho-texto); margin-block: var(--e-4); } .articulo-cabecera__meta { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: var(--t-sm); color: var(--ink-3); } .articulo-diseno { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr) 250px; padding-block: var(--e-7); align-items: start; } @media (max-width: 1000px) { .articulo-diseno { grid-template-columns: 1fr; } } .articulo-cuerpo { max-width: var(--ancho-texto); font-size: var(--t-md); } .articulo-cuerpo h2 { font-size: var(--t-xl); margin-top: var(--e-7); margin-bottom: var(--e-4); scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4)); } .articulo-cuerpo h2:first-child { margin-top: 0; } .articulo-cuerpo h3 { font-size: var(--t-md); margin-top: var(--e-5); margin-bottom: var(--e-2); } .articulo-cuerpo p { line-height: 1.72; color: var(--ink-2); } .articulo-cuerpo p strong { color: var(--ink); } /* Sumario lateral pegajoso */ .sumario { position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); } @media (max-width: 1000px) { .sumario { position: static; } } .sumario h2 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--e-3); } .sumario ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-1); counter-reset: sum; } .sumario li { margin: 0; } .sumario a { display: grid; grid-template-columns: 1.6em 1fr; gap: var(--e-2); padding: var(--e-2) var(--e-2); font-size: var(--t-base); color: var(--ink-2); text-decoration: none; border-radius: var(--r-sm); border-left: 2px solid transparent; transition: var(--transicion); line-height: 1.4; } .sumario a::before { counter-increment: sum; content: counter(sum) "."; color: var(--ink-3); font-variant-numeric: tabular-nums; } .sumario a:hover { color: var(--ink); background: var(--surface-2); } .sumario a.activo { color: var(--brand); border-left-color: var(--brand); background: var(--brand-soft); } /* ========================================================================== PANEL DE LECTURA DE LAS GUÍAS (clase "guia-lectura" en el ) -------------------------------------------------------------------------- La malla de fondo funciona bien en páginas de bloques (portada, categorías), pero detrás de varios miles de palabras seguidas cansa: las líneas cruzan el texto y compiten con los renglones. En vez de quitarla, que se llevaría por delante la identidad visual del sitio, el texto se sube a un panel opaco y la malla se queda donde no molesta: márgenes, cabecera, sumario y pie. Lo llevan todas las guías: plantillas/guia.py añade esta clase junto a "fondo-malla" en el de cada una (constante CLASE_BODY_GUIA). Para dejar una guía suelta sin panel habría que volver a condicionar ahí la clase; el CSS de aquí no hace falta tocarlo. ========================================================================== */ body.guia-lectura { /* Misma malla, más tenue (30 % en vez de 60 %): sigue dando textura alrededor del panel sin pelearse con él. El resplandor superior de marca no se toca, que es lo que da carácter a la cabecera. */ background-image: radial-gradient(ellipse 900px 480px at 50% -80px, var(--brand-soft) 0%, transparent 70%), linear-gradient(color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px); } .guia-lectura .articulo-cuerpo { --panel-x: var(--e-6); /* Se suma el acolchado al ancho máximo para que la medida de lectura real siga siendo --ancho-texto (68ch) y no se estreche al meter el panel. */ max-width: calc(var(--ancho-texto) + var(--panel-x) * 2); padding: var(--e-6) var(--panel-x) var(--e-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra-1); } /* Los bloques que ya traían fondo --surface quedarían fundidos con el panel, que ahora es de ese mismo color: se bajan un escalón para que se sigan leyendo como bloques aparte. */ .guia-lectura .articulo-cuerpo .tabla-envoltorio, .guia-lectura .articulo-cuerpo .faq details, .guia-lectura .articulo-cuerpo .recomendacion { background: var(--surface-2); } .guia-lectura .articulo-cuerpo .tabla tbody tr:hover { background: var(--surface-3); } @media (max-width: 640px) { .guia-lectura .articulo-cuerpo { --panel-x: var(--e-4); border-radius: var(--r-md); } } /* Lista con títulos dentro de artículos */ .lista-detallada { list-style: none; padding: 0; margin: 0 0 var(--e-5); display: grid; gap: var(--e-4); } .lista-detallada li { padding-left: var(--e-5); border-left: 2px solid var(--brand-line); margin: 0; } .lista-detallada strong { display: block; font-size: var(--t-md); color: var(--ink); margin-bottom: var(--e-1); } .lista-detallada span { font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; } /* Recomendaciones dentro de una guía */ .recomendaciones { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); } .recomendacion { display: grid; grid-template-columns: 92px 1fr; gap: var(--e-4); padding: var(--e-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); align-items: center; } @media (max-width: 560px) { .recomendacion { grid-template-columns: 68px 1fr; gap: var(--e-3); } } .recomendacion__media { position: relative; aspect-ratio: 1; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; } .recomendacion__media img { position: absolute; inset: 0; margin: auto; max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; } .recomendacion__cuerpo { display: grid; gap: var(--e-2); } .recomendacion h3 { font-size: var(--t-md); margin: 0; } .recomendacion h3 a { color: var(--ink); text-decoration: none; } .recomendacion h3 a:hover { color: var(--brand); } .recomendacion p { font-size: var(--t-base); color: var(--ink-2); margin: 0; line-height: 1.5; } /* Preguntas frecuentes */ .faq { display: grid; gap: var(--e-2); } .faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .faq details[open] { border-color: var(--brand-line); } .faq summary { padding: var(--e-4) var(--e-5); font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236E7A85'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); transition: transform var(--transicion); } .faq details[open] summary::after { transform: rotate(180deg); } .faq details > div { padding: 0 var(--e-5) var(--e-5); font-size: var(--t-base); color: var(--ink-2); line-height: 1.65; } /* ========================================================================== Páginas legales ========================================================================== */ .legal { padding-block: var(--e-7); } .legal__cuerpo { max-width: var(--ancho-texto); font-size: var(--t-base); } .legal__cuerpo h2 { font-size: var(--t-lg); margin-top: var(--e-6); margin-bottom: var(--e-3); } .legal__cuerpo h3 { font-size: var(--t-md); margin-top: var(--e-5); margin-bottom: var(--e-2); } .legal__cuerpo p, .legal__cuerpo li { color: var(--ink-2); line-height: 1.7; } .legal__cuerpo table { margin-block: var(--e-4); } /* Marcador visual de los datos que faltan por rellenar */ .pendiente { display: inline-block; padding: 1px 7px; background: var(--aviso-soft); border: 1px dashed var(--aviso); border-radius: var(--r-sm); font-family: var(--fuente-mono); font-size: .85em; color: var(--aviso); font-weight: 600; } /* ========================================================================== Banner de cookies ========================================================================== */ .cookies { position: fixed; z-index: 150; left: var(--e-4); right: var(--e-4); bottom: var(--e-4); max-width: 460px; padding: var(--e-5); background: var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--r-lg); box-shadow: var(--sombra-3); display: none; } .cookies[data-visible="true"] { display: block; } .cookies h2 { font-size: var(--t-md); margin-bottom: var(--e-2); } .cookies p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-bottom: var(--e-4); } .cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); } .cookies__acciones .boton { flex: 1; min-width: 120px; padding-block: var(--e-2); } /* ========================================================================== Generador de comparativas (/comparador/) El visitante elige categoría y dos productos, y estaticos/js/generador.js monta la comparativa en el navegador. Todo lo que se pinta ahí usa el prefijo .gen-, y una convención de color que se repite de arriba abajo: el producto A es siempre teal (--brand) y el B siempre ámbar (--cta), en las fichas, en las barras, en la tabla, en el radar y en los botones de compra. Es lo que permite leer un medidor sin volver a mirar cuál era cuál. ========================================================================== */ /* -------------------------------------------------------------------------- El panel del formulario -------------------------------------------------------------------------- */ .generador { position: relative; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 55%), radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--cta) 6%, transparent), transparent 55%), var(--surface); border: 1px solid var(--line-fuerte); border-radius: var(--r-xl); padding: var(--e-6); box-shadow: var(--sombra-3); } /* Filo superior teal → ámbar: anuncia de qué va la herramienta antes de leerla */ .generador::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--cta)); border-radius: var(--r-xl) var(--r-xl) 0 0; } @media (max-width: 640px) { .generador { padding: var(--e-4); border-radius: var(--r-lg); } } .gen-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); } .gen-paso { margin: 0; } .gen-paso + .gen-paso { border-top: 1px solid var(--line); padding-top: var(--e-5); } /* Un paso aún no disponible se apaga, pero sigue legible: con opacidad baja de verdad el panel entero parecía roto nada más entrar en la página. */ .gen-paso[aria-disabled="true"] .gen-paso__titulo { color: var(--ink-3); } .gen-paso[aria-disabled="true"] .gen-paso__num { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); } .gen-paso__cabecera { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); } .gen-paso__num { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); font-family: var(--fuente-titulo); font-size: var(--t-xs); font-weight: 700; } .gen-paso__titulo { font-size: var(--t-md); margin: 0; } /* Paso 1 · categorías. Rejilla y no flex: con flex-wrap las fichas quedaban de anchos distintos y la segunda fila parecía un descuido. */ .gen-chips { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); /* Todas las filas iguales: por defecto cada fila se ajusta a su propio contenido y un nombre que ocupa una linea mas engorda esa fila entera. */ grid-auto-rows: 1fr; } @media (max-width: 480px) { .gen-chips { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } .gen-chip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 var(--e-3); padding: var(--e-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; text-align: left; color: var(--ink); transition: var(--transicion); } .gen-chip:hover { border-color: var(--line-fuerte); background: var(--surface-3); transform: translateY(-1px); } .gen-chip__icono { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--surface-3); color: var(--ink-2); transition: var(--transicion); } .gen-chip__nombre { font-family: var(--fuente-titulo); font-size: var(--t-base); font-weight: 600; line-height: 1.25; align-self: end; } .gen-chip__num { font-size: var(--t-xs); color: var(--ink-3); align-self: start; } .gen-chip.es-activo { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 6px 18px color-mix(in srgb, var(--brand) 18%, transparent); } .gen-chip.es-activo .gen-chip__icono { background: var(--brand); color: #06201C; } .gen-chip.es-activo .gen-chip__num { color: var(--brand); } /* Paso 2 · los dos productos */ .gen-eleccion { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e-4); align-items: start; } @media (max-width: 720px) { .gen-eleccion { grid-template-columns: 1fr; } .gen-intercambio { justify-self: center; margin: 0; } } .gen-campo { display: grid; gap: var(--e-2); min-width: 0; } .gen-campo label { display: flex; align-items: center; gap: var(--e-2); font-family: var(--fuente-titulo); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .gen-campo label::before { content: "A"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-full); color: #06201C; background: var(--brand); font-size: 11px; letter-spacing: 0; } .gen-campo--a label { color: var(--brand); } .gen-campo--b label { color: var(--cta); } .gen-campo--b label::before { content: "B"; background: var(--cta); color: #2A1A08; } .gen-campo select { width: 100%; max-width: 100%; appearance: none; -webkit-appearance: none; font-family: inherit; font-size: var(--t-base); color: var(--ink); background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A9B4BB'%3E%3Cpath d='M5.5 8L10 12.5 14.5 8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--e-3) center; background-size: 20px; border: 1px solid var(--line-fuerte); border-radius: var(--r-md); padding: var(--e-3) var(--e-7) var(--e-3) var(--e-4); cursor: pointer; transition: var(--transicion); } .gen-campo select:hover:not(:disabled) { border-color: var(--ink-3); background-color: var(--surface-3); } .gen-campo select:disabled { cursor: not-allowed; color: var(--ink-3); } .gen-campo--a select:focus-visible { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; } .gen-campo--b select:focus-visible { border-color: var(--cta); outline: 2px solid var(--cta); outline-offset: 1px; } /* Ficha en miniatura del producto elegido, bajo su desplegable */ .gen-vista { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--line-fuerte); border-radius: var(--r-md); animation: gen-entrar 240ms ease both; } .gen-campo--a .gen-vista { border-left-color: var(--brand); } .gen-campo--b .gen-vista { border-left-color: var(--cta); } .gen-vista__img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: var(--r-sm); padding: 3px; } .gen-vista__texto { display: grid; gap: 1px; min-width: 0; } .gen-vista__marca { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .gen-vista__nombre { font-family: var(--fuente-titulo); font-size: var(--t-base); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gen-vista__datos { display: grid; justify-items: end; gap: 2px; text-align: right; } .gen-vista__nota { font-size: var(--t-xs); color: var(--ink-3); } .gen-vista__precio { font-family: var(--fuente-titulo); font-size: var(--t-base); font-weight: 700; color: var(--ink); } @media (max-width: 420px) { .gen-vista { grid-template-columns: auto 1fr; } .gen-vista__datos { grid-column: 2; justify-items: start; text-align: left; } } @keyframes gen-entrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .gen-intercambio { width: 46px; height: 46px; margin-top: 26px; flex-shrink: 0; display: grid; place-items: center; font-size: var(--t-lg); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-fuerte); border-radius: var(--r-full); cursor: pointer; transition: var(--transicion); } .gen-intercambio:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: var(--ink-3); transform: rotate(180deg); } .gen-intercambio:disabled { opacity: .4; cursor: not-allowed; } /* Paso 3 · lanzar */ .gen-lanzar { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; } .gen-boton { font-size: var(--t-md); padding: var(--e-4) var(--e-6); box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 28%, transparent); } .gen-boton:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; transform: none; box-shadow: none; } .gen-estado { font-size: var(--t-sm); color: var(--ink-3); margin: 0; } .gen-estado--aviso { color: var(--aviso); } /* -------------------------------------------------------------------------- El resultado -------------------------------------------------------------------------- */ .gen-comparativa { margin-top: var(--e-7); opacity: 0; transform: translateY(12px); transition: opacity 320ms ease, transform 320ms ease; } .gen-comparativa.es-visible { opacity: 1; transform: none; } .gen-comparativa:focus { outline: none; } @media (prefers-reduced-motion: reduce) { .gen-comparativa { transition: none; } } .gen-comparativa__cabecera { margin-bottom: var(--e-4); } .gen-comparativa__titulo { font-size: var(--t-xl); margin: var(--e-2) 0 0; } /* Índice pegajoso: la comparativa mide varias pantallas y sin esto hay que volver arriba para cambiar de bloque. Cuelga directamente de .gen-comparativa, que es el elemento alto; dentro de la cabecera, que mide dos líneas, sticky no serviría de nada. */ .gen-indice { position: sticky; top: var(--alto-cabecera); z-index: 6; display: flex; flex-wrap: wrap; gap: var(--e-2); padding-block: var(--e-3); margin-bottom: var(--e-5); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .gen-indice a { font-size: var(--t-sm); text-decoration: none; color: var(--ink-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); } .gen-indice a:hover { color: var(--ink); border-color: var(--brand); background: var(--brand-soft); } .gen-bloque { padding-block: var(--e-6); scroll-margin-top: calc(var(--alto-cabecera) + 64px); } .gen-bloque + .gen-bloque { border-top: 1px solid var(--line); } .gen-bloque__titulo { font-size: var(--t-lg); margin-bottom: var(--e-2); } .gen-bloque__entradilla { color: var(--ink-2); font-size: var(--t-base); max-width: 72ch; margin-bottom: var(--e-5); } /* Fichas enfrentadas */ .gen-duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e-4); align-items: stretch; } @media (max-width: 760px) { .gen-duelo { grid-template-columns: 1fr; } .gen-duelo__centro { display: none; } } .gen-ficha { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); } .gen-ficha--a { border-top: 3px solid var(--brand); } .gen-ficha--b { border-top: 3px solid var(--cta); } .gen-ficha__barra { display: flex; align-items: center; gap: var(--e-2); } .gen-ficha__letra { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--r-full); font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-xs); } .gen-ficha--a .gen-ficha__letra { background: var(--brand); color: #06201C; } .gen-ficha--b .gen-ficha__letra { background: var(--cta); color: #2A1A08; } .gen-ficha__marca { flex: 1; font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gen-ficha__puntos { font-family: var(--fuente-titulo); font-size: var(--t-sm); padding: 2px var(--e-2); border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); } .gen-ficha__puntos b { font-size: var(--t-md); } .gen-ficha__puntos i { font-style: normal; color: var(--ink-3); } .gen-ficha--a .gen-ficha__puntos b { color: var(--brand); } .gen-ficha--b .gen-ficha__puntos b { color: var(--cta); } /* La foto ocupaba media pantalla y empujaba los datos fuera de la vista */ .gen-ficha__media { position: relative; aspect-ratio: 16 / 10; max-height: 190px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; } .gen-ficha__media img { position: absolute; inset: 0; margin: auto; max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; } .gen-ficha__nombre { font-size: var(--t-md); margin: 0; } .gen-ficha__nombre a { color: var(--ink); text-decoration: none; } .gen-ficha__nombre a:hover { color: var(--brand); } .gen-ficha__datos { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: center; font-size: var(--t-sm); color: var(--ink-3); } .gen-ficha__nota { font-weight: 700; color: var(--ink); } .gen-ficha__precio { margin-left: auto; font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: 700; color: var(--ink); } .gen-ficha__entradilla { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .gen-ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; } .gen-ficha__acciones .boton-comprar { font-size: var(--t-sm); } .gen-enlace-ficha { font-size: var(--t-sm); color: var(--ink-2); } .gen-enlace-ficha:hover { color: var(--brand); } .gen-duelo__centro { display: grid; place-items: center; } .gen-duelo__vs { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line-fuerte); font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-sm); letter-spacing: .08em; color: var(--ink-3); box-shadow: var(--sombra-2); } /* Balanza: reparto de medidas ganadas */ .gen-balanza { margin-top: var(--e-5); } .gen-balanza__titulo { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--e-2); } .gen-balanza__pista { display: flex; height: 38px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .gen-balanza__lado { display: flex; align-items: center; font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-sm); transition: width 560ms cubic-bezier(.4,0,.2,1); } .gen-balanza__lado--a { background: var(--brand); color: #06201C; justify-content: flex-start; padding-left: var(--e-4); } .gen-balanza__lado--b { background: var(--cta); color: #2A1A08; flex: 1; justify-content: flex-end; padding-right: var(--e-4); } .gen-balanza__pie { font-size: var(--t-sm); color: var(--ink-2); margin: var(--e-3) 0 0; } /* Medidores enfrentados */ .gen-medidores__cabecera { display: flex; justify-content: space-between; gap: var(--e-4); font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e-2); padding-bottom: var(--e-3); border-bottom: 1px solid var(--line); } .gen-etiqueta-a { color: var(--brand); } .gen-etiqueta-b { color: var(--cta); } .gen-medidor { padding-block: var(--e-3); } .gen-medidor + .gen-medidor { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .gen-medidor--flojo { opacity: .6; } .gen-medidor__fila { display: grid; grid-template-columns: 1fr minmax(160px, 200px) 1fr; gap: var(--e-3); align-items: center; } .gen-medidor__lado { display: grid; gap: var(--e-2); min-width: 0; } .gen-medidor__lado--a { text-align: right; } .gen-medidor__cifra { display: flex; align-items: baseline; gap: var(--e-2); font-family: var(--fuente-titulo); font-size: var(--t-md); font-weight: 600; color: var(--ink-2); } .gen-medidor__lado--a .gen-medidor__cifra { justify-content: flex-end; } .gen-medidor__lado.es-ganador .gen-medidor__cifra { color: var(--ink); } .gen-medidor__lado.es-vacio .gen-medidor__cifra { font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); font-style: italic; } .gen-medidor__marca { font-size: var(--t-sm); } .gen-medidor__lado--a.es-ganador .gen-medidor__marca { color: var(--brand); order: 2; } .gen-medidor__lado--b.es-ganador .gen-medidor__marca { color: var(--cta); } .gen-medidor__matiz { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; } .gen-medidor__pista { display: flex; height: 14px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; } .gen-medidor__lado--a .gen-medidor__pista { justify-content: flex-end; } .gen-medidor__barra { height: 100%; border-radius: var(--r-full); transition: width 620ms cubic-bezier(.4,0,.2,1); } .gen-medidor__lado--a .gen-medidor__barra { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 35%, transparent), var(--brand)); } .gen-medidor__lado--b .gen-medidor__barra { background: linear-gradient(90deg, var(--cta), color-mix(in srgb, var(--cta) 35%, transparent)); } .gen-medidor__lado--a.es-ganador .gen-medidor__barra { box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 45%, transparent); } .gen-medidor__lado--b.es-ganador .gen-medidor__barra { box-shadow: 0 0 14px color-mix(in srgb, var(--cta) 45%, transparent); } .gen-medidor__centro { text-align: center; display: grid; gap: 3px; } .gen-medidor__etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--ink); line-height: 1.3; } .gen-medidor__quien { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; } .gen-medidor__quien--a { color: var(--brand); } .gen-medidor__quien--b { color: var(--cta); } .gen-medidor__quien--info { color: var(--aviso); } /* La ayuda era un "Cómo leer este dato" repetido en cada fila, diez líneas de texto gris compitiendo con las cifras. Ahora es un punto de interrogación. */ .gen-medidor__nota { margin-top: var(--e-2); text-align: center; } .gen-medidor__nota summary { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-full); cursor: pointer; list-style: none; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); transition: var(--transicion); } .gen-medidor__nota summary::-webkit-details-marker { display: none; } .gen-medidor__nota summary:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); } .gen-medidor__nota[open] summary { color: var(--brand); border-color: var(--brand); } .gen-medidor__nota p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; margin: var(--e-3) auto 0; max-width: 64ch; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } @media (max-width: 720px) { .gen-medidor__fila { grid-template-columns: 1fr; gap: var(--e-2); } .gen-medidor__centro { order: -1; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); } .gen-medidor__lado--a { text-align: left; } .gen-medidor__lado--a .gen-medidor__cifra { justify-content: flex-start; } .gen-medidor__lado--a .gen-medidor__pista { justify-content: flex-start; } .gen-medidor__lado--a .gen-medidor__barra { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 35%, transparent)); } .gen-medidor__lado--a.es-ganador .gen-medidor__marca { order: 0; } .gen-medidor__nota { text-align: left; } } /* Radar: posición dentro de la categoría */ .gen-tarjeta-radar { padding: var(--e-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); } .gen-radar { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: var(--e-6); align-items: center; } @media (max-width: 760px) { .gen-radar { grid-template-columns: 1fr; } } .gen-radar__svg { width: 100%; height: auto; overflow: visible; } .gen-radar__rejilla { fill: none; stroke: var(--line); stroke-width: 1; } .gen-radar__eje { stroke: var(--line); stroke-width: 1; } .gen-radar__disco { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; } .gen-radar__num { fill: var(--ink-2); font-size: 12px; font-family: var(--fuente-titulo); font-weight: 700; } .gen-radar__area { stroke-width: 2; stroke-linejoin: round; } .gen-radar__area--a { fill: color-mix(in srgb, var(--brand) 26%, transparent); stroke: var(--brand); } .gen-radar__area--b { fill: color-mix(in srgb, var(--cta) 22%, transparent); stroke: var(--cta); } .gen-radar__vertice--a { fill: var(--brand); } .gen-radar__vertice--b { fill: var(--cta); } .gen-radar__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); } .gen-radar__leyenda li { display: grid; grid-template-columns: 22px 1fr 74px auto; gap: var(--e-3); align-items: center; font-size: var(--t-sm); color: var(--ink-2); padding-bottom: var(--e-2); border-bottom: 1px solid var(--line); } .gen-radar__leyenda li:last-child { border-bottom: 0; padding-bottom: 0; } .gen-radar__indice { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; } .gen-radar__doble { display: grid; gap: 3px; } .gen-radar__mini { display: block; height: 5px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; } .gen-radar__mini i { display: block; height: 100%; border-radius: var(--r-full); } .gen-radar__mini-a { background: var(--brand); } .gen-radar__mini-b { background: var(--cta); } .gen-radar__valores { display: grid; gap: 3px; font-family: var(--fuente-titulo); font-size: var(--t-xs); text-align: right; } .gen-valor-a { color: var(--brand); } .gen-valor-b { color: var(--cta); } @media (max-width: 480px) { .gen-radar__leyenda li { grid-template-columns: 22px 1fr auto; } .gen-radar__doble { display: none; } } .gen-nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--e-4); } .gen-punto { width: 10px; height: 10px; border-radius: var(--r-full); display: inline-block; } .gen-punto + * { margin-right: var(--e-4); } .gen-punto--a { background: var(--brand); } .gen-punto--b { background: var(--cta); } /* Tabla de especificaciones enfrentadas */ .gen-interruptor { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; margin-bottom: var(--e-4); padding: var(--e-2) var(--e-3); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); } .gen-interruptor:hover { border-color: var(--line-fuerte); color: var(--ink); } .gen-interruptor input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; } .gen-tabla-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); } .gen-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); min-width: 640px; } .gen-tabla th, .gen-tabla td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top; } .gen-tabla thead th { font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: 600; background: var(--surface-2); border-bottom: 2px solid var(--line-fuerte); } .gen-tabla thead .gen-col-a { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); } .gen-tabla thead .gen-col-b { color: var(--cta); box-shadow: inset 0 -2px 0 var(--cta); } .gen-tabla__grupo th { font-family: var(--fuente-titulo); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--surface-2); border-block: 1px solid var(--line); padding-block: var(--e-2); } .gen-tabla tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .gen-tabla tbody tr:nth-child(even):not(.gen-tabla__grupo) { background: color-mix(in srgb, var(--surface) 55%, transparent); } .gen-tabla tbody tr:last-child { border-bottom: 0; } .gen-tabla th[scope="row"] { font-weight: 600; color: var(--ink); width: 26%; } .gen-tabla td { color: var(--ink-2); width: 37%; } .gen-tabla td.es-ganador { color: var(--ink); font-weight: 550; background: color-mix(in srgb, var(--bien-soft) 70%, transparent); } .gen-tabla tr[hidden] { display: none; } .gen-sin-dato { color: var(--ink-3); font-style: italic; } .gen-check { color: var(--bien); font-weight: 700; margin-left: var(--e-2); } /* Paneles enfrentados: pros y contras, perfiles, reseñas */ .gen-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--e-4); } .gen-panel { padding: var(--e-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--e-3); align-content: start; } .gen-panel--a { border-top: 3px solid var(--brand); } .gen-panel--b { border-top: 3px solid var(--cta); } .gen-panel__titular { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--e-2) var(--e-3); font-size: var(--t-md); margin: 0; padding-bottom: var(--e-3); border-bottom: 1px solid var(--line); } .gen-panel__titular img { grid-row: span 2; width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: var(--r-sm); padding: 3px; } .gen-panel__letra { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; } .gen-panel--a .gen-panel__letra { background: var(--brand); color: #06201C; } .gen-panel--b .gen-panel__letra { background: var(--cta); color: #2A1A08; } .gen-panel p { font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; margin: 0; } .gen-panel__titulo { font-family: var(--fuente-titulo); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: var(--e-2) 0 0 !important; } .gen-panel__titulo--pros { color: var(--bien); } .gen-panel__titulo--contras { color: var(--mal); } .gen-panel__nota { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-3); } .gen-panel__nota strong { font-family: var(--fuente-titulo); font-size: var(--t-md); color: var(--ink); } .gen-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); } .gen-lista li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin: 0; } .gen-lista li::before { font-weight: 700; } .gen-lista--pros li::before { content: "✓"; color: var(--bien); } .gen-lista--contras li::before { content: "✕"; color: var(--mal); } .gen-perfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); } .gen-perfil { display: grid; gap: 2px; padding: var(--e-3); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.55; margin: 0; border-left: 3px solid var(--line-fuerte); background: var(--surface-2); } .gen-perfil strong { color: var(--ink); } .gen-perfil span { color: var(--ink-2); } .gen-perfil--si { border-left-color: var(--bien); } .gen-perfil--no { border-left-color: var(--mal); } .gen-temas { display: flex; flex-wrap: wrap; gap: var(--e-2); } .gen-tema { font-size: var(--t-xs); font-weight: 600; padding: 4px var(--e-3); border-radius: var(--r-full); background: var(--neutro-soft); color: var(--neutro); } .gen-tema--positivo { background: var(--bien-soft); color: var(--bien); } .gen-tema--negativo { background: var(--mal-soft); color: var(--mal); } .gen-tema--mixto { background: var(--aviso-soft); color: var(--aviso); } /* Cierre: lectura rápida, límites y compra */ .gen-veredicto { padding: var(--e-5); border-radius: var(--r-lg); background: var(--brand-soft); border: 1px solid var(--brand-line); display: grid; gap: var(--e-3); } .gen-veredicto p { font-size: var(--t-md); line-height: 1.65; color: var(--ink); margin: 0; } .gen-honestidad { margin-top: var(--e-4); padding: var(--e-5); border: 1px dashed var(--line-fuerte); border-radius: var(--r-lg); background: var(--surface-2); } .gen-honestidad h4 { font-size: var(--t-md); margin: 0 0 var(--e-3); } .gen-honestidad ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); } /* Vinneta con el punto en position:absolute y no en una columna de rejilla: estos puntos llevan dentro, y en una rejilla cada elemento en linea se convierte en una celda mas y parte la frase por la mitad. */ .gen-honestidad li { position: relative; padding-left: var(--e-5); font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; margin: 0; } .gen-honestidad li::before { content: "•"; position: absolute; left: var(--e-2); top: 0; color: var(--ink-3); font-weight: 700; } /* Dos botones naranjas a lo ancho eran dos brochazos: ahora cada compra va en su tarjeta, con la foto y el precio al lado del botón. */ .gen-cierre-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--e-4); margin-top: var(--e-5); } .gen-compra { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: center; padding: var(--e-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .gen-compra--a { border-left: 3px solid var(--brand); } .gen-compra--b { border-left: 3px solid var(--cta); } .gen-compra img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: var(--r-sm); padding: 4px; } .gen-compra__texto { display: grid; gap: 2px; min-width: 0; } .gen-compra__nombre { font-family: var(--fuente-titulo); font-size: var(--t-base); font-weight: 600; color: var(--ink); } .gen-compra__precio { font-size: var(--t-sm); color: var(--ink-3); } .gen-compra .boton-comprar { grid-column: 1 / -1; justify-content: center; }