/* ========================================================================== Muchapala — hoja de estilos Estilo editorial: fondo blanco, casi todo en blanco y negro, y el verde reservado para lo que de verdad importa. Cuando el color aparece una sola vez, se ve. Cuando lo llenas todo de color, no se ve nada. Titulares en Syne, en mayúsculas y muy juntas. Texto en Archivo. Las dos viven en `fuentes/`: no se pide nada a ningún servidor de fuera. Sin dependencias externas: funciona sin conexión a internet. ========================================================================== */ :root { /* --- Base monocroma --- */ --fondo: #ffffff; --sup: #ffffff; --sup-2: #f5f5f5; --borde: #e6e6e6; --borde-fuerte: #d0d0d0; --texto: #0d0d0d; --texto-2: #707070; --texto-3: #8e8e8e; /* --- El acento. Uno solo, y se nota --- */ --verde: #14452b; --verde-fondo: #0d0d0d; --verde-2: #1d6340; --verde-3: #2b8a58; --verde-suave: #eef6f0; --lima: #b9e819; --lima-2: #a3cf13; --lima-tinta: #0d0d0d; --sobre-verde: #ffffff; /* --- Avisos. Apagados a propósito: informan, no gritan --- */ --demo: #a8480a; --demo-fondo: #fdf5ee; --ok: #17734a; --ok-fondo: #f0f7f3; --avi: #8a5000; --avi-fondo: #fbf6ec; --mal: #a81f1a; --mal-fondo: #fcf1f0; /* --- Tipografía --- */ --fuente: 'Archivo', "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --titular: 'Syne', 'Archivo', "Segoe UI Variable Display", "Arial Narrow", var(--fuente); --mono: 'Archivo', "Cascadia Mono", Consolas, monospace; /* Los titulares van en mayúsculas, muy apretados y con la línea justa. Es lo que les da ese aire de portada de revista. */ --tit-espaciado: -.04em; --tit-altura: 1; --tit-peso: 700; /* Los rótulos pequeños de interfaz (pestañas, etiquetas, botones) van al revés: mayúsculas pero SEPARADAS, para que se lean de un vistazo. */ --rotulo-espaciado: .08em; /* --- Medidas --- Las cajas van con esquina viva (0). Sólo botones y campos llevan un redondeo mínimo. Es lo que separa un diseño editorial de uno blando. */ --r: 0px; --r-s: 4px; --r-g: 0px; /* Casi nada de sombra: en este estilo la separación la hace la línea fina, no el desenfoque. */ --sombra: none; --sombra-alta: 0 8px 28px rgba(13, 13, 13, .10); --ancho: 1240px; } /* Modo oscuro: desactivado a propósito. La web va siempre en blanco, que es lo que se pidió. El bloque se conserva por si algún día se añade un botón para cambiar de tema: bastaría con poner data-theme="dark" en el . */ :root[data-theme="dark"] { --verde: #7fd6a2; --verde-fondo: #0d2416; --verde-2: #5ec98a; --verde-3: #3fae74; --verde-suave: #14301f; --lima: #c2f53f; --lima-2: #a8dd23; --lima-tinta: #10240a; --demo: #ffb267; --demo-fondo: #35220f; --ok: #6ddba4; --ok-fondo: #11291d; --avi: #f2c37b; --avi-fondo: #2e2413; --mal: #f59189; --mal-fondo: #2e1a18; --fondo: #091a10; --sup: #11271a; --sup-2: #183324; --borde: #27452f; --borde-fuerte: #3a5e45; --texto: #e9f2ea; --texto-2: #a9bfb1; --texto-3: #8aa394; --sobre-verde: #f2f7f3; --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .3); --sombra-alta: 0 6px 24px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fuente); font-size: 16px; line-height: 1.55; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--titular); text-transform: uppercase; letter-spacing: .005em; line-height: 1.02; margin: 0 0 .45em; font-weight: 700; } h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); } h3 { font-size: 1.2rem; } h4 { font-size: .95rem; margin: 0 0 .4em; font-weight: 700; } p { margin: 0 0 1em; } a { color: var(--verde-3); } img { max-width: 100%; display: block; } :focus-visible { outline: 3px solid var(--verde-3); outline-offset: 2px; border-radius: 4px; } .salta-a { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--verde-fondo); color: #fff; padding: .7rem 1.1rem; } .salta-a:focus { left: 0; } .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; } .oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } main { min-height: 60vh; padding: 1.6rem 0 1rem; } /* ---------- Banda de demostración ---------- */ .banda-demo { background: var(--demo-fondo); border-bottom: 2px solid var(--demo); color: var(--demo); font-size: .82rem; font-weight: 700; padding: .5rem 1rem; text-align: center; position: sticky; top: 0; z-index: 50; letter-spacing: .01em; } /* ---------- Cabecera ---------- */ .cab { background: var(--verde-fondo); border-bottom: 4px solid var(--lima); } .cab-fila { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; max-width: var(--ancho); margin: 0 auto; } .logo { display: flex; align-items: center; gap: .55rem; font-family: var(--titular); text-transform: uppercase; font-weight: 700; font-size: 1.35rem; color: #fff; text-decoration: none; letter-spacing: .01em; white-space: nowrap; } .logo-pelota { width: 24px; height: 24px; border-radius: 50%; background: var(--lima); flex: none; position: relative; } .logo-pelota::after { content: ""; position: absolute; inset: 3px 7px; border-left: 2px solid var(--verde-fondo); border-right: 2px solid var(--verde-fondo); border-radius: 50%; } .cab-espacio { flex: 1; } .nav-boton { display: none; background: transparent; border: 2px solid rgba(255,255,255,.35); border-radius: var(--r-s); padding: .35rem .6rem; font-size: 1.1rem; color: #fff; cursor: pointer; } .nav { display: flex; gap: .1rem; flex-wrap: wrap; } .nav a { padding: .45rem .75rem; border-radius: var(--r-s); text-decoration: none; color: rgba(255, 255, 255, .84); font-size: .82rem; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; } .nav a[aria-current="page"] { background: var(--lima); color: var(--lima-tinta); } @media (max-width: 900px) { .nav-boton { display: block; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--verde-fondo); flex-direction: column; padding: .5rem; gap: .1rem; box-shadow: var(--sombra-alta); z-index: 40; } .nav.abierta { display: flex; } .cab-fila { position: relative; } .nav a { padding: .7rem; } } /* ---------- Pie ---------- */ .pie { background: var(--verde-fondo); color: var(--sobre-verde); margin-top: 3.5rem; padding: 2.4rem 0; font-size: .87rem; border-top: 4px solid var(--lima); } .pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem; } .pie h4 { color: var(--lima); text-transform: uppercase; letter-spacing: .05em; font-family: var(--titular); font-size: 1rem; } .pie ul { list-style: none; margin: 0; padding: 0; } .pie li { margin-bottom: .25rem; } .pie a { color: var(--sobre-verde); } /* ---------- Componentes base ---------- */ .tarjeta, .tarjeta-plana { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.2rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1.3rem; border-radius: 999px; border: 2px solid transparent; background: var(--lima); color: var(--lima-tinta); font: inherit; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .12s, filter .12s; } .btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn-sec { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); } .btn-sec:hover { background: var(--sup-2); } .btn-peq { padding: .35rem .8rem; font-size: .74rem; } .btn-ancho { width: 100%; } .etq { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .71rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--sup-2); color: var(--texto-2); border: 1px solid var(--borde); } .etq-demo { background: var(--demo-fondo); color: var(--demo); border-color: var(--demo); } .etq-ok { background: var(--ok-fondo); color: var(--ok); border-color: transparent; } .etq-avi { background: var(--avi-fondo); color: var(--avi); border-color: transparent; } .etq-mal { background: var(--mal-fondo); color: var(--mal); border-color: transparent; } .etq-pri { background: var(--lima); color: var(--lima-tinta); border-color: transparent; } .etq-afiliado { background: var(--verde-suave); color: var(--verde-3); border-color: var(--verde-3); } .aviso { border-radius: var(--r-s); padding: .9rem 1.1rem; font-size: .9rem; border-left: 5px solid var(--verde-3); background: var(--verde-suave); margin-bottom: 1.1rem; } .aviso-avi { border-left-color: var(--avi); background: var(--avi-fondo); } .aviso-demo { border-left-color: var(--demo); background: var(--demo-fondo); } .aviso-ojo { border-left-color: var(--avi); background: var(--avi-fondo); } .aviso-ok { border-left-color: var(--ok); background: var(--ok-fondo); } .aviso p:last-child { margin-bottom: 0; } .sin-dato { color: var(--texto-3); font-style: italic; } /* ---------- Valoraciones ---------- */ .barra { height: 9px; background: var(--sup-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--borde); } .barra > i { display: block; height: 100%; background: var(--verde-3); border-radius: 999px; } .barra-insuf > i { background: repeating-linear-gradient(45deg, var(--borde-fuerte) 0 4px, transparent 4px 8px); } .dim { padding: .65rem 0; border-bottom: 1px solid var(--borde); } .dim:last-child { border-bottom: 0; } .dim-cab { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem; } .dim-nom { grid-column: 1; font-weight: 700; font-size: .95rem; } .dim-val { grid-column: 2; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; font-family: var(--titular); } .dim-cab .conf { grid-column: 1 / -1; justify-self: start; margin-top: .15rem; } .dim-meta { font-size: .76rem; color: var(--texto-3); } .dim-ayuda { font-size: .82rem; color: var(--texto-2); } .conf { font-size: .68rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .conf-alta { background: var(--ok-fondo); color: var(--ok); } .conf-media { background: var(--verde-suave); color: var(--verde-3); } .conf-baja { background: var(--avi-fondo); color: var(--avi); } .conf-insuficiente { background: var(--sup-2); color: var(--texto-3); } /* ---------- Estrellas ---------- */ .estrellas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .estrellas-grupo { display: inline-flex; gap: 2px; } .estrella { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; } .estrella svg { width: 100%; height: 100%; display: block; pointer-events: none; } .estrella .fondo { fill: var(--sup-2); stroke: var(--borde-fuerte); stroke-width: 1.5; } .estrella .relleno { fill: var(--lima); } .estrella:hover .fondo { stroke: var(--verde-3); } .estrella-mitad { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; } .estrella-mitad.izq { left: 0; } .estrella-mitad.der { right: 0; } .estrellas-valor { font-family: var(--titular); font-weight: 700; font-size: 1.1rem; min-width: 3.2rem; text-align: center; background: var(--sup-2); padding: .15rem .5rem; border-radius: var(--r-s); font-variant-numeric: tabular-nums; } .estrellas-valor.vacio { font-style: italic; font-size: .82rem; color: var(--texto-3); font-family: var(--fuente); } .estrellas-no { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: .3rem .7rem; } .estrellas-no.activa { background: var(--sup-2); border-color: var(--texto-3); color: var(--texto-2); } .estrellas-lectura .estrella { width: 18px; height: 18px; cursor: default; } .estrellas-lectura .estrella .fondo { stroke-width: 2; } /* ---------- Gráfico hexagonal ---------- */ .hex-caja { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); padding: 1rem; } .hex-svg { width: 100%; height: auto; display: block; max-width: 520px; margin: 0 auto; } .hex-malla { fill: none; stroke: var(--borde); stroke-width: 1; } .hex-malla-ext { fill: var(--sup-2); fill-opacity: .55; } .hex-eje { stroke: var(--borde); stroke-width: 1; } .hex-etq { font-size: 11px; font-weight: 800; fill: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; font-family: var(--titular); } .hex-num { font-size: 9px; fill: var(--texto-3); } .hex-forma { fill-opacity: .18; stroke-width: 2.5; stroke-linejoin: round; } .hex-punto { stroke: var(--sup); stroke-width: 1.5; } .hex-leyenda { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: .8rem; } .hex-leyenda span { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; } .hex-color { width: 14px; height: 14px; border-radius: 4px; flex: none; } .hex-aviso { font-size: .78rem; color: var(--texto-3); text-align: center; margin-top: .5rem; } /* ---------- Ejes bipolares ---------- */ .bipolar { margin-bottom: 1.1rem; } .bipolar-cab { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); margin-bottom: .3rem; } .bipolar-pista { position: relative; height: 26px; border-radius: 999px; background: linear-gradient(90deg, var(--verde-3) 0%, var(--sup-2) 50%, var(--lima) 100%); border: 1px solid var(--borde); } .bipolar-centro { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--borde-fuerte); } .bipolar-marca { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--sup); border: 3px solid var(--texto); display: flex; align-items: center; justify-content: center; } .bipolar-marca small { font-size: 8px; font-weight: 800; } .bipolar-vacio { height: 26px; border-radius: 999px; background: repeating-linear-gradient(45deg, var(--sup-2) 0 6px, transparent 6px 12px); border: 1px dashed var(--borde-fuerte); display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--texto-3); font-style: italic; } .bipolar-pie { font-size: .76rem; color: var(--texto-3); margin-top: .25rem; } /* ---------- Rejillas y tarjetas de pala ---------- */ .rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .pala-tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; } .pala-tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); } .pala-img { height: 140px; display: flex; align-items: center; justify-content: center; background: var(--verde-fondo); position: relative; overflow: hidden; } .pala-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 55%, rgba(185, 232, 25, .28) 55%); } .pala-forma { width: 58px; height: 94px; border: 3px solid var(--lima); border-radius: 50% 50% 46% 46%; position: relative; z-index: 1; } .pala-forma.diamante { border-radius: 44% 44% 50% 50% / 28% 28% 72% 72%; } .pala-forma.redonda { border-radius: 50%; height: 80px; width: 74px; } .pala-cuerpo { padding: .9rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; } .pala-marca { font-size: .72rem; font-weight: 800; color: var(--verde-3); text-transform: uppercase; letter-spacing: .08em; } .pala-nombre { font-family: var(--titular); text-transform: uppercase; font-weight: 700; font-size: 1.15rem; line-height: 1.1; margin: 0; } .pala-nombre a { color: var(--texto); text-decoration: none; } .pala-nombre a:hover { color: var(--verde-3); } .pala-sub { font-size: .79rem; color: var(--texto-2); } .pala-etqs { display: flex; gap: .3rem; flex-wrap: wrap; } .pala-pie { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--borde); display: flex; align-items: center; gap: .5rem; } .pala-precio { font-family: var(--titular); font-weight: 700; font-size: 1.25rem; } .pala-precio small { font-weight: 400; font-size: .68rem; color: var(--texto-3); display: block; font-family: var(--fuente); text-transform: none; } /* ---------- Filtros ---------- */ .con-lateral { display: grid; grid-template-columns: 270px 1fr; gap: 1.6rem; align-items: start; } @media (max-width: 900px) { .con-lateral { grid-template-columns: 1fr; } } .filtros { position: sticky; top: 3.2rem; } .filtro-grupo { border-bottom: 1px solid var(--borde); padding: .85rem 0; } .filtro-grupo:last-of-type { border-bottom: 0; } .filtro-grupo > h3 { font-size: .78rem; letter-spacing: .07em; color: var(--texto-3); margin-bottom: .55rem; } .filtro-ops { display: flex; flex-direction: column; gap: .3rem; } .filtro-op { display: flex; align-items: center; gap: .5rem; font-size: .89rem; cursor: pointer; } .filtro-op input { width: 18px; height: 18px; accent-color: var(--verde-3); flex: none; cursor: pointer; } .filtro-op .cuenta { margin-left: auto; font-size: .74rem; color: var(--texto-3); } input[type="text"], input[type="number"], input[type="email"], select, textarea { width: 100%; padding: .55rem .7rem; border: 2px solid var(--borde-fuerte); border-radius: var(--r-s); background: var(--sup); color: var(--texto); font: inherit; font-size: .92rem; } textarea { min-height: 78px; resize: vertical; } input[type="range"] { width: 100%; accent-color: var(--verde-3); } label { font-size: .89rem; font-weight: 700; } .barra-orden { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding: .65rem .9rem; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); } .barra-orden .res { font-size: .89rem; color: var(--texto-2); } .barra-orden select { width: auto; } /* ---------- Tablas ---------- */ .tabla-env { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); } table { border-collapse: collapse; width: 100%; font-size: .89rem; } th, td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; } th { background: var(--verde-fondo); color: var(--sobre-verde); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } th a { color: var(--lima); } tbody tr:last-child td { border-bottom: 0; } td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } tr.dif td { background: var(--avi-fondo); } /* ---------- Ficha ---------- */ .ficha-cab { display: grid; grid-template-columns: 250px 1fr; gap: 1.6rem; margin-bottom: 1.6rem; } @media (max-width: 760px) { .ficha-cab { grid-template-columns: 1fr; } } .ficha-img { background: var(--verde-fondo); border-radius: var(--r); display: flex; align-items: center; justify-content: center; min-height: 250px; position: relative; overflow: hidden; } .ficha-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 55%, rgba(185,232,25,.28) 55%); } .ficha-img .pala-forma { width: 88px; height: 138px; } .ficha-titulo { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: .15rem; } .ficha-meta { color: var(--texto-2); font-size: .95rem; margin-bottom: .8rem; } .pestanas { display: flex; gap: .2rem; border-bottom: 3px solid var(--borde); margin-bottom: 1.3rem; overflow-x: visible; flex-wrap: wrap; } @media (max-width: 700px) { .pestanas { overflow-x: auto; flex-wrap: nowrap; } } .pestanas button { background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -3px; padding: .6rem 1rem; font: inherit; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); cursor: pointer; white-space: nowrap; } .pestanas button:hover { color: var(--texto); } .pestanas button[aria-selected="true"] { color: var(--verde-3); border-bottom-color: var(--lima); } .especs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .1rem; } .espec { padding: .65rem .1rem; border-bottom: 1px solid var(--borde); } .espec-nom { font-size: .72rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .espec-val { font-weight: 700; font-size: 1.05rem; font-family: var(--titular); } .espec-fuente { font-size: .73rem; color: var(--texto-3); margin-top: .1rem; } .espec-fuente a { color: var(--texto-3); } .pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 640px) { .pros-contras { grid-template-columns: 1fr; } } .lista-marcada { list-style: none; padding: 0; margin: 0; } .lista-marcada li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; font-size: .92rem; } .lista-marcada li::before { position: absolute; left: 0; font-weight: 800; } .pros li::before { content: "▲"; color: var(--ok); font-size: .7rem; top: .2rem; } .contras li::before { content: "▼"; color: var(--mal); font-size: .7rem; top: .2rem; } /* ---------- Ofertas ---------- */ .oferta { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .9rem; align-items: center; padding: .9rem; border: 1px solid var(--borde); border-radius: var(--r); background: var(--sup); margin-bottom: .6rem; } .oferta-agotada { opacity: .6; background: var(--sup-2); } .oferta-pos { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lima); color: var(--lima-tinta); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; font-family: var(--titular); } .oferta-agotada .oferta-pos { background: var(--sup-2); color: var(--texto-3); border: 1px solid var(--borde); } .oferta-tienda { font-weight: 800; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .oferta-det { font-size: .8rem; color: var(--texto-2); margin-top: .15rem; } .oferta-cond { font-size: .78rem; color: var(--avi); margin-top: .2rem; } .oferta-precio { text-align: right; } .oferta-total { font-weight: 700; font-size: 1.45rem; white-space: nowrap; font-family: var(--titular); } .oferta-desglose { font-size: .74rem; color: var(--texto-3); white-space: nowrap; } @media (max-width: 620px) { .oferta { grid-template-columns: 2.4rem 1fr; } .oferta-precio { grid-column: 2; text-align: left; } } /* ---------- Opiniones ---------- */ .opinion { border: 1px solid var(--borde); border-radius: var(--r); padding: 1.1rem; background: var(--sup); margin-bottom: .8rem; } .opinion-cab { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--verde-fondo); color: var(--lima); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; flex: none; } .opinion-alias { font-weight: 800; } .opinion-meta { font-size: .77rem; color: var(--texto-3); } .opinion-notas { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7rem 0; font-size: .8rem; } .opinion-notas span { background: var(--sup-2); padding: .2rem .55rem; border-radius: var(--r-s); } .opinion-acc { display: flex; gap: .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--borde); } .distribucion { display: flex; flex-direction: column; gap: .25rem; } .dist-fila { display: grid; grid-template-columns: 4.6rem 1fr 2.4rem; gap: .5rem; align-items: center; font-size: .8rem; } /* ---------- Comparador ---------- */ .sel-palas { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem .8rem; background: var(--verde-fondo); color: #fff; border-radius: 999px; font-size: .82rem; font-weight: 700; } .chip button { background: none; border: 0; color: var(--lima); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; } /* ---------- Rankings ---------- */ .rank-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; } .rank-lista { list-style: none; padding: 0; margin: 0; } .rank-lista li { display: flex; gap: .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--borde); } .rank-lista li:last-child { border-bottom: 0; } .rank-pos { width: 1.8rem; height: 1.8rem; border-radius: var(--r-s); background: var(--sup-2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex: none; font-family: var(--titular); } .rank-lista li:first-child .rank-pos { background: var(--lima); color: var(--lima-tinta); } .rank-nom { font-size: .92rem; font-weight: 700; line-height: 1.2; } .rank-nom a { color: var(--texto); text-decoration: none; } .rank-nom a:hover { color: var(--verde-3); } .rank-val { margin-left: auto; font-weight: 700; font-family: var(--titular); font-size: 1.1rem; font-variant-numeric: tabular-nums; } .rank-vacio { padding: 1rem; text-align: center; color: var(--texto-3); font-size: .86rem; background: var(--sup-2); border-radius: var(--r-s); } /* ---------- Formularios ---------- */ .form-seccion { border: 1px solid var(--borde); border-radius: var(--r); padding: 1.2rem; margin-bottom: 1.1rem; background: var(--sup); } .form-seccion > .desc { font-size: .87rem; color: var(--texto-2); margin-bottom: 1rem; } .campo { margin-bottom: 1.2rem; } .campo > label { display: block; margin-bottom: .35rem; } .campo .ayuda { font-size: .82rem; color: var(--texto-2); margin-bottom: .4rem; } .obligatorio { color: var(--mal); font-weight: 800; } .opciones-radio { display: flex; gap: .45rem; flex-wrap: wrap; } .opciones-radio label { position: relative; padding: .55rem .95rem; border: 2px solid var(--borde-fuerte); border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 600; background: var(--sup); transition: all .12s; } .opciones-radio label:hover { border-color: var(--verde-3); } .opciones-radio input { position: absolute; opacity: 0; width: 0; height: 0; } .opciones-radio label.sel { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); font-weight: 800; } .paso-num { display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lima); color: var(--lima-tinta); align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; margin-right: .6rem; font-family: var(--titular); } /* ---------- Varios ---------- */ .migas { font-size: .82rem; color: var(--texto-3); margin-bottom: .8rem; } .migas a { color: var(--texto-2); } .seccion { margin-bottom: 2.2rem; } .seccion-cab { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .9rem; } .seccion-cab h2 { margin: 0; } .seccion-cab .mas { margin-left: auto; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .centrado { text-align: center; } .hero { background: var(--verde-fondo); color: var(--sobre-verde); border-radius: var(--r-g); padding: 2.6rem 1.8rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -20%; right: -8%; width: 45%; height: 150%; background: var(--lima); opacity: .15; transform: skewX(-18deg); } .hero > * { position: relative; z-index: 1; } .hero h1 { margin-bottom: .5rem; color: #fff; } .hero h1 em { font-style: normal; color: var(--lima); } .hero p { color: rgba(242, 247, 243, .88); max-width: 62ch; } .hero-acc { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; } .hero .btn-sec { color: #fff; border-color: rgba(255,255,255,.45); } .hero .btn-sec:hover { background: rgba(255,255,255,.12); } .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-top: 1.8rem; } .hero .cifras { border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.4rem; } .cifra { text-align: center; } .cifra b { display: block; font-size: 2.4rem; font-weight: 700; color: var(--verde-3); line-height: 1; font-family: var(--titular); } .hero .cifra b { color: var(--lima); } .cifra span { font-size: .76rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .hero .cifra span { color: rgba(242,247,243,.75); } .vacio { text-align: center; padding: 3rem 1rem; color: var(--texto-2); } .md h2 { margin-top: 2rem; padding-top: 1.1rem; border-top: 3px solid var(--lima); } .md h3 { margin-top: 1.3rem; } .md code { background: var(--sup-2); padding: .1rem .35rem; border-radius: 4px; font-family: var(--mono); font-size: .88em; } .md blockquote { border-left: 5px solid var(--lima); background: var(--verde-suave); margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 0 var(--r-s) var(--r-s) 0; } @media print { .banda-demo, .cab, .pie, .filtros { display: none; } } /* Filtros: píldoras más compactas para que quepan en la columna lateral */ .filtros .opciones-radio label { padding: .35rem .75rem; font-size: .8rem; } /* Comparador: el hexágono necesita sitio para leerse */ .comp-grid { display: grid; grid-template-columns: minmax(360px, 1.1fr) 1fr; gap: 1.6rem; align-items: start; } @media (max-width: 900px) { .comp-grid { grid-template-columns: 1fr; } } /* Permisos: casillas grandes y separadas, nunca premarcadas */ .permisos { display: flex; flex-direction: column; gap: .5rem; } .permiso { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border: 2px solid var(--borde-fuerte); border-radius: var(--r-s); cursor: pointer; font-weight: 400; font-size: .89rem; background: var(--sup); } .permiso:hover { border-color: var(--verde-3); } .permiso input { width: 20px; height: 20px; accent-color: var(--verde-3); flex: none; margin-top: .1rem; } /* Cuarta forma: híbrida. La usan varias marcas reales. */ .pala-forma.hibrida { border-radius: 46% 46% 48% 48% / 36% 36% 64% 64%; } /* ---------- Silueta vectorial de la pala ---------- */ .pala-svg { height: 100%; width: auto; max-height: 100%; display: block; position: relative; z-index: 1; } .pala-cabeza { fill: var(--sup); stroke: none; } .pala-borde { fill: none; stroke: var(--verde-fondo); stroke-width: 3.5; } .pala-agujeros circle { fill: var(--verde-fondo); opacity: .78; } .pala-puente { fill: var(--verde-fondo); } .pala-mango { fill: var(--verde-fondo); } .pala-grip path { stroke: var(--lima); stroke-width: 2; opacity: .75; } .pala-img .pala-svg { height: 120px; } .ficha-img .pala-svg { height: 200px; } /* Modo oscuro: desactivado a propósito. La web va siempre en blanco, que es lo que se pidió. El bloque se conserva por si algún día se añade un botón para cambiar de tema: bastaría con poner data-theme="dark" en el . */ :root[data-theme="dark"] .pala-cabeza { fill: #e9f2ea; } /* ---------- Imagen de producto: fondo claro, como una foto de catálogo ---------- */ .pala-img, .ficha-img { background: #f3f5f2; } .pala-img::before, .ficha-img::before { display: none; } .pala-img { height: 172px; } .pala-img .pala-svg { height: 152px; } .ficha-img .pala-svg { height: 218px; } .ficha-img { min-height: 260px; } .pala-cabeza { fill: #ffffff; } .pala-borde { fill: none; stroke: #16281d; stroke-width: 3.5; } .pala-agujeros circle { fill: #16281d; opacity: .82; } .pala-puente { fill: #16281d; } .pala-mango { fill: #1d1f1e; } .pala-grip path { stroke: #7f8a82; stroke-width: 2; opacity: .9; } /* Modo oscuro: desactivado a propósito. La web va siempre en blanco, que es lo que se pidió. El bloque se conserva por si algún día se añade un botón para cambiar de tema: bastaría con poner data-theme="dark" en el . */ :root[data-theme="dark"] .pala-cabeza { fill: #ffffff; } /* Foto real de producto, cuando hay licencia registrada */ .pala-foto { max-height: 100%; max-width: 92%; width: auto; object-fit: contain; position: relative; z-index: 1; } .pala-img .pala-foto { max-height: 156px; } .ficha-img .pala-foto { max-height: 222px; } /* Refinado del dibujo de la pala */ .pala-sombra { fill: #0e1a13; opacity: .10; } .pala-tope { fill: #101211; } .pala-borde { stroke-width: 5; stroke-linejoin: round; } .pala-grip path { stroke: #59635c; stroke-width: 1.6; opacity: .85; stroke-linecap: round; } /* ========================================================================== AJUSTES DE ESTÉTICA SOBRE FONDO BLANCO El fondo de la web es blanco. Sobre blanco, un borde fino no basta para separar las tarjetas: se pierden. Se les da relieve con sombra suave y se quita el bloque gris de la zona de la foto, que cortaba la tarjeta en dos. ========================================================================== */ /* --- Tarjetas: relieve suave en vez de caja marcada --- */ .tarjeta, .tarjeta-plana, .pala-tarjeta { border-color: #eceeed; box-shadow: 0 1px 2px rgba(20, 37, 27, .04), 0 4px 16px rgba(20, 37, 27, .05); } .pala-tarjeta { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .pala-tarjeta:hover { border-color: var(--verde-3); box-shadow: 0 2px 6px rgba(20, 37, 27, .06), 0 14px 32px rgba(20, 37, 27, .12); transform: translateY(-4px); } /* --- Zona de la foto: blanca, sin corte gris --- */ .pala-img, .ficha-img { background: #ffffff; border-bottom: 1px solid #f1f3f2; } .ficha-img { border: 1px solid #eceeed; border-radius: var(--r); } .pala-foto { mix-blend-mode: multiply; } /* --- La banda de aviso, más discreta sobre blanco --- */ .banda-modo, #banda-modo { background: var(--verde-suave); color: var(--verde); border-bottom: 1px solid #dfeae2; } /* --- Separadores y tablas: líneas más finas --- */ table th, table td { border-color: #edefee; } /* La cabecera de las tablas sigue en verde oscuro con texto claro: si se le pone fondo claro, el texto claro deja de leerse. */ thead th { background: var(--verde-fondo); color: var(--sobre-verde); } tbody tr:nth-child(even) td { background: #fbfcfb; } /* --- Móvil: que las columnas puedan encogerse --- Por defecto, un elemento dentro de un grid o un flex no se deja encoger por debajo del ancho de su contenido (min-width: auto). En la ficha de pala eso hacía que la columna de la foto midiera 373 px dentro de una pantalla de 345, y la página se desplazaba en horizontal. */ .ficha-cab > *, .rejilla > *, .comp-cab > * { min-width: 0; } .ficha-img img, .pala-img img { max-width: 100%; } /* Las pestañas de la ficha no caben en un móvil estrecho. Se dejan deslizar en horizontal DENTRO de su caja: sin esto arrastraban toda la página. `min-width: 0` es lo que permite que la caja se encoja; `overflow-x: auto` sin él no sirve de nada. */ .pestanas { overflow-x: auto; flex-wrap: nowrap; min-width: 0; max-width: 100%; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .pestanas button { flex: none; } /* Etiquetas largas: que partan en vez de estirar la caja */ .etq { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* Cinturón de seguridad: nada puede provocar desplazamiento horizontal */ /* Nada de overflow-x:hidden global: eso esconde los desbordes en vez de arreglarlos, y en móvil cortaba los botones de filtro. */ /* ---------- Estimación a partir de la ficha ---------- Va DEBAJO de la nota y con otro aspecto: es lo que se deduce de los datos, no lo que dice quien ha jugado. Nunca deben confundirse. */ .est { margin-top: .55rem; padding: .6rem .75rem; background: #f7faf8; border: 1px dashed #cfdcd4; border-radius: var(--r-s); } .est-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; } .est-etq { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); } .est-val { font-weight: 800; color: var(--texto-2); font-size: .95rem; } .barra-est { height: 6px; } .barra-est i { background: repeating-linear-gradient(90deg, var(--verde-3) 0 6px, #a9c6b6 6px 10px); opacity: .75; } /* ========================================================================== CAPA EDITORIAL (18-09-2026) Reescribe el aspecto de los componentes siguiendo el estilo de referencia: fondo blanco, líneas finas en vez de sombras, esquina viva, titulares en mayúsculas muy apretadas y rótulos pequeños muy separados. Va al final a propósito: así manda sobre lo de arriba sin tener que borrar nada, y si algún día no gusta, se quita este bloque y vuelve lo anterior. ========================================================================== */ /* --- Texto ------------------------------------------------------------- */ body { font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--texto); background: var(--fondo); } h1, h2, h3, h4 { font-family: var(--titular); text-transform: uppercase; letter-spacing: var(--tit-espaciado); line-height: var(--tit-altura); font-weight: var(--tit-peso); color: var(--texto); } h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 0 0 .35em; } h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: 0 0 .4em; } h3 { font-size: 1.15rem; letter-spacing: -.02em; } h4 { font-size: .8rem; letter-spacing: var(--rotulo-espaciado); font-family: var(--fuente); font-weight: 600; } a { color: var(--texto); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--verde-3); } /* --- Cabecera: blanca, con una línea fina debajo ------------------------ */ .cab { background: var(--fondo); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 40; } .cab-fila { padding: 1.05rem 1.5rem; gap: 1.5rem; max-width: var(--ancho); } .logo { color: var(--texto); font-size: 1.15rem; letter-spacing: var(--tit-espaciado); gap: .5rem; } .logo-pelota { width: 18px; height: 18px; background: var(--lima); } .logo-pelota::after { inset: 2px 5px; border-left-color: var(--texto); border-right-color: var(--texto); } .nav { gap: 0; } .nav a { font-family: var(--fuente); font-size: .72rem; font-weight: 500; letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--texto-2); background: none; border-radius: 0; padding: .3rem .7rem; border-bottom: 2px solid transparent; } .nav a:hover { background: none; color: var(--texto); } .nav a[aria-current="page"] { background: none; color: var(--texto); border-bottom-color: var(--verde); font-weight: 600; } .nav-boton { border-color: var(--borde-fuerte); color: var(--texto); border-width: 1px; } /* --- La banda de aviso, como una cinta de titulares --------------------- */ .banda-modo, .banda-demo { background: var(--texto); color: #fff; font-size: .68rem; font-weight: 500; letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; text-align: center; padding: .55rem 1.5rem; border: 0; } .banda-modo strong, .banda-demo strong { font-weight: 700; color: var(--lima); } .banda-modo a, .banda-demo a { color: var(--lima); } /* --- Cajas: esquina viva, línea fina, cero sombra ----------------------- */ .tarjeta, .tarjeta-plana { border-radius: 0; box-shadow: none; border: 1px solid var(--borde); padding: 1.5rem; } .hex-caja, .dim, .est, .oferta, .opinion, .bipolar, .seccion { border-radius: 0; } /* --- Botones ------------------------------------------------------------ */ .btn { border-radius: var(--r-s); border-width: 1px; background: var(--verde); color: #fff; border-color: var(--verde); font-family: var(--fuente); font-weight: 500; font-size: .75rem; letter-spacing: var(--rotulo-espaciado); padding: .8rem 2.2rem; transition: background .18s, color .18s, border-color .18s; } .btn:hover { background: var(--texto); border-color: var(--texto); color: #fff; filter: none; transform: none; } .btn-sec { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); } .btn-sec:hover { background: var(--texto); border-color: var(--texto); color: #fff; } .btn-peq { padding: .45rem 1.1rem; font-size: .68rem; } /* --- Etiquetas: rótulo pequeño, muy separado ---------------------------- */ .etq { border-radius: 2px; font-weight: 600; font-size: .64rem; letter-spacing: var(--rotulo-espaciado); padding: .25rem .6rem; font-family: var(--fuente); } .etq-pri { background: var(--lima); color: var(--texto); } .chip { border-radius: 2px; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; } /* --- Pestañas: sin pastilla, sólo una línea debajo ---------------------- */ .pestanas { border-bottom: 1px solid var(--borde); gap: 0; } .pestanas button, .pestanas a { border-radius: 0; background: none; border: 0; border-bottom: 2px solid transparent; font-size: .72rem; font-weight: 500; letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--texto-2); padding: .8rem 1.1rem; } .pestanas [aria-selected="true"], .pestanas .activa { background: none; color: var(--texto); border-bottom-color: var(--verde); font-weight: 600; } /* --- Tarjetas de pala: rejilla editorial -------------------------------- */ .pala-tarjeta { border-radius: 0; box-shadow: none; border: 1px solid var(--borde); transition: border-color .2s; } .pala-tarjeta:hover { box-shadow: none; transform: none; border-color: var(--texto); } .pala-foto, .pala-img { background: var(--sup-2); border-radius: 0; } .pala-marca { font-size: .64rem; letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--texto-2); font-weight: 600; text-decoration: none; } .pala-nombre { font-family: var(--titular); text-transform: uppercase; letter-spacing: -.03em; line-height: 1.05; font-weight: 700; text-decoration: none; } .pala-sub, .pala-pie { font-size: .74rem; color: var(--texto-2); text-decoration: none; } .pala-tarjeta * { text-decoration: none; } /* --- Rótulos y textos de apoyo ----------------------------------------- */ .dim-meta, .espec-fuente, .oferta-cond, .hex-aviso { font-size: .74rem; color: var(--texto-2); line-height: 1.45; } .est-etq, .seccion-cab, .filtro-grupo > span:first-child { font-size: .64rem; letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; font-weight: 600; color: var(--texto-2); } .hero-acc { font-size: 1.05rem; color: var(--texto-2); max-width: 62ch; } /* --- Campos de formulario ---------------------------------------------- */ input, select, textarea { border-radius: var(--r-s); border: 1px solid var(--borde-fuerte); font-family: var(--fuente); font-size: .9rem; padding: .65rem .8rem; background: var(--fondo); color: var(--texto); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; } /* --- Tablas ------------------------------------------------------------- */ table { border-collapse: collapse; width: 100%; font-size: .85rem; } th { background: var(--texto); color: #fff; text-align: left; font-size: .64rem; letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; font-weight: 600; padding: .7rem .9rem; } td { padding: .7rem .9rem; border-bottom: 1px solid var(--borde); } /* --- Pie: blanco, con una línea fina arriba ----------------------------- */ .pie { background: var(--fondo); color: var(--texto-2); border-top: 1px solid var(--borde); margin-top: 5rem; padding: 3.5rem 0; } .pie h4 { color: var(--texto); } .pie a { color: var(--texto-2); } .pie a:hover { color: var(--texto); } /* --- Avisos: línea a la izquierda, sin esquina redonda ------------------ */ .aviso { border-radius: 0; border-width: 0 0 0 3px; padding: 1.1rem 1.3rem; } /* --- Remates de la capa editorial --------------------------------------- */ /* La banda de arriba se declaró más arriba con #banda-modo, que pesa más que una clase. Se repite aquí con la misma fuerza para que gane esta. */ .banda-modo, #banda-modo, .banda-demo { background: var(--texto); color: #fff; border-bottom: 0; } /* Portada: negro liso. La cuña verde en diagonal era del estilo anterior y aquí sobra: en este lenguaje el peso lo llevan la tipografía y el aire. */ .hero { background: var(--texto); border-radius: 0; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem); margin-bottom: 3rem; } .hero::before { display: none; } .hero h1 { max-width: 16ch; } .hero p { color: rgba(255, 255, 255, .72); } .hero .btn { background: var(--lima); color: var(--texto); border-color: var(--lima); } .hero .btn:hover { background: #fff; border-color: #fff; } .hero .btn-sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .hero .btn-sec:hover { background: #fff; color: var(--texto); border-color: #fff; } /* Entradilla de sección: es un párrafo, no la fila de botones de la portada. Lleva clase propia para no chocar con .hero-acc. */ .entradilla { font-size: 1.05rem; color: var(--texto-2); max-width: 62ch; margin: 0 0 1.6rem; } /* El menú cabía justo y se partía en dos líneas. Con menos aire entre opciones entra del tirón hasta que la pantalla se estrecha de verdad. */ @media (min-width: 901px) { .nav a { padding: .3rem .52rem; font-size: .7rem; letter-spacing: .05em; } .cab-fila { gap: 1rem; } } /* Cifras grandes de la portada */ .cifra strong, .cifras strong { font-family: var(--titular); letter-spacing: -.03em; } /* La línea verde suelta encima del pie era el remate del estilo anterior. */ .pie { border-top: 1px solid var(--borde); box-shadow: none; } main { padding-bottom: 0; } /* La tabla del panel se salía 47 px en móvil. El envoltorio ya sabía hacer scroll, pero al estar dentro de una rejilla crecía con su contenido en vez de encogerse. Es la norma 30 otra vez: se arregla la causa (min-width: 0), no se esconde con overflow oculto. */ .tabla-env { min-width: 0; max-width: 100%; border-radius: 0; } @media (max-width: 700px) { th, td { padding: .55rem .6rem; font-size: .8rem; } } /* Los titulares en mayúsculas y grandes no caben en una pantalla estrecha si la palabra es larga y no se le deja partir. El desborde de 47 px del panel salía de aquí, no de la tabla. */ h1, h2, h3, h4, .pala-nombre, .ficha-titulo { overflow-wrap: break-word; } h1 { font-size: clamp(1.75rem, 8vw, 4.6rem); }