/* ========================================================= TECNOPICK · Hoja de estilos Tema oscuro por defecto (es el que mejor sienta a la tecnología) con variante clara en [data-tema="claro"]. ========================================================= */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB; } /* --------------------------------------------------------- Variables --------------------------------------------------------- */ :root { --fondo: #06070d; --fondo-2: #0b0d16; --panel: rgba(255,255,255,.045); --panel-2: rgba(255,255,255,.075); --linea: rgba(255,255,255,.10); --linea-2: rgba(255,255,255,.18); --txt: #eef1f8; --txt-2: #9aa3ba; --txt-3: #6c7590; --acc: #7c5cff; --acc-2: #00d4ff; --acc-txt: #ffffff; --ok: #22c55e; --hot: #ff4d6d; --oro: #ffb020; --sombra: 0 24px 60px -24px rgba(0,0,0,.9); --sombra-s: 0 8px 24px -12px rgba(0,0,0,.7); --radio: 18px; --radio-s: 12px; --max: 1240px; --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --trans: .22s cubic-bezier(.4,0,.2,1); color-scheme: dark; } [data-tema="claro"] { --fondo: #f7f8fc; --fondo-2: #ffffff; --panel: #ffffff; --panel-2: #f1f3f9; --linea: #e4e7f0; --linea-2: #cfd4e2; --txt: #0c0f1d; --txt-2: #5a6178; --txt-3: #858da4; --acc: #5b3df0; --acc-2: #0891b2; --sombra: 0 20px 44px -22px rgba(20,24,50,.35); --sombra-s: 0 6px 18px -10px rgba(20,24,50,.28); color-scheme: light; } /* --------------------------------------------------------- Base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Sin overflow-x aquí ni en el body: cualquiera de los dos rompe la cabecera sticky. Si algo se desborda, se arregla el elemento culpable. */ html { scroll-behavior: smooth; } body { font-family: var(--fuente); background: var(--fondo); color: var(--txt); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Nada de overflow-x aquí: convertiría el body en contenedor de scroll y la cabecera sticky dejaría de pegarse. El recorte lo hace el . */ } /* Halo ambiental de fondo */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 40rem at 15% -10%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%), radial-gradient(50rem 34rem at 95% 6%, color-mix(in srgb, var(--acc-2) 16%, transparent), transparent 60%); opacity: .85; } [data-tema="claro"] body::before { opacity: .35; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.025em; font-weight: 750; } h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: 1.1rem; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .contenedor { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } .seccion { padding-block: clamp(3rem, 7vw, 5.5rem); } .ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------- Botones --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: 999px; font-weight: 650; font-size: .95rem; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc-2) 65%, var(--acc))); color: #fff; border: 1px solid transparent; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--acc) 80%, transparent); transition: transform var(--trans), box-shadow var(--trans), filter var(--trans); } .btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--acc) 85%, transparent); } .btn:active { transform: translateY(0); } .btn--grande { padding: 1.05rem 1.8rem; font-size: 1.05rem; } .btn--peq { padding: .55rem 1rem; font-size: .85rem; } .btn--bloque { width: 100%; } .btn--fantasma { background: var(--panel); color: var(--txt); border: 1px solid var(--linea-2); box-shadow: none; } .btn--fantasma:hover { background: var(--panel-2); filter: none; } .enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 620; color: var(--acc-2); font-size: .95rem; } .enlace-flecha::after { content: '→'; transition: transform var(--trans); } .enlace-flecha:hover::after { transform: translateX(4px); } /* --------------------------------------------------------- Cinta y cabecera --------------------------------------------------------- */ .cinta { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding: .5rem 1rem; font-size: .78rem; color: var(--txt-2); background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 26%, transparent), color-mix(in srgb, var(--acc-2) 22%, transparent)); border-bottom: 1px solid var(--linea); } .cinta strong { color: var(--txt); } .cinta a { color: var(--acc-2); text-decoration: underline; text-underline-offset: 2px; } .cinta__sep { opacity: .4; } /* El div #cabecera solo existe para que layout.js inyecte ahí el HTML. Con display:contents desaparece como caja y la cabecera pasa a ser hija directa del body: sin esto, sticky solo pega dentro de ese div de 130 px y la cabecera se va con el scroll. */ #cabecera { display: contents; } .cab { position: sticky; top: 0; z-index: 60; transition: background var(--trans), box-shadow var(--trans); } .cab--fija { background: color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-s); } .cab__fila { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; } .marca { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; } .marca__rayo { width: 1.6rem; height: 1.6rem; fill: url(#x); stroke: none; fill: var(--acc-2); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--acc-2) 70%, transparent)); } .marca__txt { display: flex; flex-direction: column; line-height: 1; font-weight: 850; letter-spacing: -.04em; font-size: 1.3rem; } .marca__txt small { font-size: .58rem; font-weight: 550; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); margin-top: .28rem; } .nav { display: flex; gap: .25rem; margin-right: auto; flex-wrap: wrap; } .nav a { padding: .5rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 560; color: var(--txt-2); transition: color var(--trans), background var(--trans); } .nav a:hover { color: var(--txt); background: var(--panel); } .nav a[aria-current="page"] { color: var(--txt); background: var(--panel-2); } .cab__acc { display: flex; align-items: center; gap: .35rem; } .ico-btn { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--txt-2); transition: var(--trans); } .ico-btn:hover { background: var(--panel); color: var(--txt); } .ico-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ico-luna { display: none; } [data-tema="claro"] .ico-sol { display: none; } [data-tema="claro"] .ico-luna { display: block; } .contador { position: absolute; top: .1rem; right: .05rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--hot); color: #fff; font-size: .65rem; font-weight: 750; display: grid; place-items: center; } .contador[data-vacio="true"] { display: none; } .hamb { display: none; } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ /* Foto de ambiente detrás del hero. Va muy apagada y difuminada hacia abajo: ambienta, pero el titular tiene que seguir leyéndose sin esfuerzo. OJO: .hero es de ancho completo y el contenedor va dentro. Si lo sangras con -50vw desde el contenedor, el ancho del scroll se desmadra. */ .hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); } .hero::before { content: ''; position: absolute; inset: 0; background: url('../img/hero.jpg') center 30% / cover no-repeat; opacity: .16; filter: saturate(.5); z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%); } [data-tema="claro"] .hero::before { opacity: .1; } .hero > .contenedor { position: relative; z-index: 1; } .hero__reja { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .hero__sello { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .85rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea-2); font-size: .78rem; font-weight: 600; color: var(--txt-2); margin-bottom: 1.3rem; } .hero__sello .punto { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); animation: latido 2s infinite; } @keyframes latido { 50% { opacity: .35; } } .hero h1 { margin-bottom: 1.1rem; } .hero h1 .destello { background: linear-gradient(100deg, var(--acc-2), var(--acc) 60%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__texto { color: var(--txt-2); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 46ch; margin-bottom: 1.8rem; } .hero__acc { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.2rem; } .hero__datos { display: flex; gap: 2.2rem; flex-wrap: wrap; } .hero__datos div { display: flex; flex-direction: column; } .hero__datos span { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; } .hero__datos small { font-size: .78rem; color: var(--txt-3); } /* Tarjeta de oferta del hero */ .hero__caja { position: relative; padding: 1.4rem; border-radius: 26px; background: var(--panel); border: 1px solid var(--linea); backdrop-filter: blur(20px); box-shadow: var(--sombra); } .hero__caja::after { content: ''; position: absolute; inset: -1px; border-radius: 27px; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 60%, transparent), transparent 45%, color-mix(in srgb, var(--acc-2) 55%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hero__caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .hero__caja-cab h2 { font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); font-weight: 650; } .reloj { display: flex; align-items: center; gap: .15rem; font-variant-numeric: tabular-nums; } .reloj span { background: var(--panel-2); border: 1px solid var(--linea); border-radius: 8px; padding: .22rem .42rem; font-size: .85rem; font-weight: 750; } .reloj i { color: var(--txt-3); font-style: normal; } .hero-oferta { display: grid; grid-template-columns: 40% 1fr; gap: 1rem; align-items: center; } .hero-oferta__img { background: var(--panel-2); border-radius: 18px; padding: .5rem; } .hero-oferta__txt h3 { font-size: 1.25rem; margin: .5rem 0 .35rem; } .hero-oferta__txt > p { color: var(--txt-2); font-size: .88rem; margin-bottom: .7rem; } .hero-oferta__ahorro { color: var(--ok); font-size: .85rem; font-weight: 620; margin: .35rem 0 1rem; } .hero-oferta__acc { display: flex; gap: .5rem; flex-wrap: wrap; } .hero-oferta__acc .btn { font-size: .85rem; padding: .6rem 1.05rem; } /* Barra de confianza */ .confianza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-top: 3rem; } .confianza div { background: var(--fondo-2); padding: 1.1rem 1.2rem; } .confianza strong { display: block; font-size: .93rem; margin-bottom: .15rem; } .confianza span { font-size: .82rem; color: var(--txt-2); } /* --------------------------------------------------------- Cabeceras de sección --------------------------------------------------------- */ .sec__cab, .bloque__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; } .sec__cab p { color: var(--txt-2); margin-top: .45rem; max-width: 58ch; } .sec__et { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-2); margin-bottom: .5rem; } /* --------------------------------------------------------- Tarjeta de producto --------------------------------------------------------- */ .reja { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.15rem; } .tarjeta { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans); backdrop-filter: blur(12px); } .tarjeta:hover { transform: translateY(-5px); border-color: var(--linea-2); box-shadow: var(--sombra); } .tarjeta__etiquetas { position: absolute; top: .8rem; left: .8rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; } .et { padding: .25rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; background: var(--panel-2); border: 1px solid var(--linea-2); color: var(--txt); backdrop-filter: blur(8px); } .et--desc { background: var(--hot); border-color: transparent; color: #fff; } .et--min { background: var(--ok); border-color: transparent; color: #04240f; } .fav { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--fondo) 55%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--linea); color: var(--txt-2); transition: var(--trans); } .fav svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .fav:hover { color: var(--hot); transform: scale(1.08); } .fav.activo { color: var(--hot); } .fav.activo svg { fill: var(--hot); } .tarjeta__img { display: block; padding: 1.4rem 1rem .4rem; background: radial-gradient(120% 90% at 50% 0%, var(--panel-2), transparent 70%); } .tarjeta__img .dispositivo { height: 168px; transition: transform .35s cubic-bezier(.34,1.4,.5,1); } .tarjeta:hover .tarjeta__img .dispositivo { transform: scale(1.06) rotate(-1.2deg); } /* Fotos reales de producto. Ocupan el mismo hueco que la silueta SVG, así que la web se ve igual de ordenada tenga fotos o no, y se pueden mezclar. `contain` y no `cover`: en fotos de producto hay que ver el aparato entero, aunque sobre fondo a los lados. */ .foto-producto { width: 100%; height: 100%; object-fit: contain; margin-inline: auto; /* Las fotos de producto suelen venir con fondo blanco. Redondearlas evita que sobre el tema oscuro parezcan un recorte pegado encima. Con PNG transparente esto no molesta, así que vale para los dos casos. */ border-radius: 14px; } .tarjeta__img .foto-producto { height: 168px; transition: transform .35s cubic-bezier(.34,1.4,.5,1); } .tarjeta:hover .tarjeta__img .foto-producto { transform: scale(1.06); } .ficha__escenario .foto-producto { height: clamp(260px, 34vw, 380px); } .duelo__img .foto-producto { height: 108px; } .comp__img .foto-producto { height: 110px; } .pick__img .foto-producto { height: 110px; } .res__img .foto-producto { height: 44px; } .guia-card__img .foto-producto { height: 130px; } .hero-oferta__img .foto-producto { height: 150px; } .tarjeta__cuerpo { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.2rem; flex: 1; } .tarjeta__marca { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); } .tarjeta__nombre { font-size: 1.02rem; line-height: 1.25; } .tarjeta__nombre a:hover { color: var(--acc-2); } .tarjeta__claim { font-size: .83rem; color: var(--txt-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tarjeta__acciones { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: .7rem; } /* Valoración */ .valoracion { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--txt-2); } .estrellas { letter-spacing: -.05em; } .estrella { color: var(--linea-2); } .estrella.llena { color: var(--oro); } .estrella.media { background: linear-gradient(90deg, var(--oro) 50%, var(--linea-2) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .valoracion__n { font-weight: 700; color: var(--txt); } /* Precio */ .precio { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; } .precio__ahora { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; } .precio__antes { font-size: .9rem; color: var(--txt-3); text-decoration: line-through; } .precio__ahorro { font-size: .75rem; font-weight: 650; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: .1rem .45rem; border-radius: 999px; } .precio--grande .precio__ahora { font-size: clamp(2rem, 4vw, 2.6rem); } .precio--grande .precio__antes { font-size: 1.1rem; } .comparar.activo { border-color: var(--acc); color: var(--acc-2); background: color-mix(in srgb, var(--acc) 14%, transparent); } /* --------------------------------------------------------- Selector de color y botón de compra El botón de comprar va en ámbar y no en el violeta de la marca: es la acción que da dinero y tiene que distinguirse de un vistazo del resto. --------------------------------------------------------- */ .btn--comprar { background: linear-gradient(120deg, #ffb020, #f97316); color: #2b1400; font-weight: 750; box-shadow: 0 10px 26px -12px rgba(249, 115, 22, .8); } .btn--comprar:hover { box-shadow: 0 18px 34px -14px rgba(249, 115, 22, .85); } .sel { display: flex; flex-direction: column; gap: .55rem; padding: .85rem; border-radius: var(--radio-s); background: var(--panel-2); border: 1px solid var(--linea); animation: desplegar .2s ease; } @keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } } .sel__t { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); } .sel__color { font-size: .82rem; font-weight: 620; color: var(--txt); margin-top: -.2rem; } .sel__nota { font-size: .7rem; color: var(--txt-3); line-height: 1.4; } .muestras { display: flex; flex-wrap: wrap; gap: .45rem; } .muestra { width: 1.85rem; height: 1.85rem; border-radius: 999px; background: var(--c); border: 1px solid var(--linea-2); cursor: pointer; position: relative; transition: transform var(--trans), box-shadow var(--trans); } .muestra:hover { transform: scale(1.12); } .muestra.activa { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--acc-2); transform: scale(1.06); } .muestra:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 4px; } /* Dentro de una tarjeta el selector va sin caja propia: ya está dentro de una. Y el botón puede romper en dos líneas, porque en móvil son 108 px útiles y .btn lleva nowrap: preferimos dos líneas a que se corte el texto. */ .tarjeta .sel { padding: 0; background: none; border: 0; gap: .4rem; animation: none; } .tarjeta .sel .sel__t, .tarjeta .sel .sel__nota { display: none; } .tarjeta .sel .sel__color { font-size: .76rem; color: var(--txt-2); font-weight: 560; margin: 0; } .tarjeta .sel .btn--comprar { white-space: normal; font-size: .84rem; line-height: 1.25; padding: .65rem .7rem; text-align: center; } .tarjeta .sel .muestra { width: 1.5rem; height: 1.5rem; } /* En la ficha el selector respira más */ .compra .sel { padding: 1.1rem; margin-top: .3rem; } .compra .muestra { width: 2.2rem; height: 2.2rem; } .compra__ficha { display: inline-flex; align-items: center; gap: .4rem; justify-content: center; width: 100%; margin-top: .7rem; font-size: .84rem; color: var(--txt-2); text-decoration: underline; text-underline-offset: 3px; } .compra__ficha:hover { color: var(--acc-2); } /* --------------------------------------------------------- Categorías --------------------------------------------------------- */ .reja-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; } .cat { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); transition: var(--trans); position: relative; overflow: hidden; } .cat::before { content: ''; position: absolute; inset: auto -30% -60% -30%; height: 120px; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 55%, transparent), transparent); opacity: 0; transition: opacity var(--trans); } .cat:hover { transform: translateY(-4px); border-color: var(--linea-2); } .cat:hover::before { opacity: .6; } .cat__ico { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--linea); margin-bottom: .5rem; } .cat__ico .ico { width: 1.35rem; height: 1.35rem; color: var(--acc-2); } .cat__n { font-weight: 700; font-size: 1.02rem; } .cat__d { font-size: .82rem; color: var(--txt-2); } .cat__pie { font-size: .74rem; color: var(--txt-3); margin-top: .4rem; position: relative; } /* --------------------------------------------------------- Duelos --------------------------------------------------------- */ .reja-duelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; } .duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: 1.2rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); transition: var(--trans); } .duelo:hover { transform: translateY(-4px); border-color: var(--linea-2); box-shadow: var(--sombra-s); } .duelo__lado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; } .duelo__img { width: 100%; max-width: 118px; } .duelo__img .dispositivo { height: 108px; } .duelo__lado strong { font-size: .84rem; line-height: 1.25; } .duelo__lado span { font-size: .84rem; font-weight: 750; color: var(--acc-2); } .duelo__vs { font-size: .7rem; font-weight: 850; letter-spacing: .06em; color: var(--txt-3); border: 1px solid var(--linea-2); border-radius: 999px; padding: .3rem .5rem; } .duelo__pie { grid-column: 1 / -1; text-align: center; font-size: .76rem; color: var(--txt-2); border-top: 1px solid var(--linea); padding-top: .7rem; margin-top: .5rem; } /* --------------------------------------------------------- Guías --------------------------------------------------------- */ .reja-guias { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; } .guia-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: var(--trans); } .guia-card:hover { transform: translateY(-4px); border-color: var(--linea-2); box-shadow: var(--sombra); } .guia-card__img { padding: 1.2rem; background: radial-gradient(110% 80% at 50% 0%, var(--panel-2), transparent 70%); } .guia-card__img .dispositivo { height: 130px; } /* Con foto no hay relleno: la imagen va a sangre y ocupa toda la cabecera */ .guia-card__img--foto { padding: 0; overflow: hidden; } .guia-card__img--foto img { width: 100%; height: 174px; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.34,1.1,.5,1); } .guia-card:hover .guia-card__img--foto img { transform: scale(1.05); } .art__portada { margin: 0 0 2.2rem; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); } .art__portada img { width: 100%; height: clamp(200px, 34vw, 380px); object-fit: cover; } .guia-card__txt { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .guia-card__meta { font-size: .74rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--acc-2); } .guia-card__txt h3 { font-size: 1.1rem; line-height: 1.25; } .guia-card__txt p { font-size: .86rem; color: var(--txt-2); } .guia-card__txt .enlace-flecha { margin-top: auto; padding-top: .4rem; } /* --------------------------------------------------------- Newsletter --------------------------------------------------------- */ .news { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.4rem); border-radius: 26px; border: 1px solid var(--linea); background: radial-gradient(70% 120% at 12% 0%, color-mix(in srgb, var(--acc) 35%, transparent), transparent 65%), radial-gradient(60% 110% at 95% 100%, color-mix(in srgb, var(--acc-2) 30%, transparent), transparent 65%), var(--fondo-2); text-align: center; } .news h2 { margin-bottom: .6rem; } .news p { color: var(--txt-2); max-width: 52ch; margin: 0 auto 1.6rem; } .news form { display: flex; gap: .6rem; max-width: 470px; margin-inline: auto; flex-wrap: wrap; } .news input { flex: 1; min-width: 200px; padding: .85rem 1.15rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea-2); color: var(--txt); } .news input::placeholder { color: var(--txt-3); } .news input:focus { outline: 2px solid var(--acc); outline-offset: 1px; } .news__legal { font-size: .74rem; color: var(--txt-3); margin-top: 1rem; } .news__ok { color: var(--ok); font-weight: 650; } /* --------------------------------------------------------- Listado: filtros --------------------------------------------------------- */ .listado { display: grid; grid-template-columns: 258px 1fr; gap: 2rem; align-items: start; } .filtros { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.4rem; padding: 1.3rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); } .filtros h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); margin-bottom: .7rem; } .filtros__grupo { border-bottom: 1px solid var(--linea); padding-bottom: 1.2rem; } .filtros__grupo:last-of-type { border-bottom: 0; padding-bottom: 0; } .pastillas { display: flex; flex-wrap: wrap; gap: .4rem; } .pastilla { padding: .38rem .78rem; border-radius: 999px; font-size: .82rem; font-weight: 560; background: var(--panel-2); border: 1px solid var(--linea); color: var(--txt-2); transition: var(--trans); } .pastilla:hover { color: var(--txt); border-color: var(--linea-2); } .pastilla.activa { background: var(--acc); border-color: transparent; color: #fff; font-weight: 650; } .check { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .87rem; cursor: pointer; color: var(--txt-2); } .check:hover { color: var(--txt); } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__punto { width: 1.05rem; height: 1.05rem; border-radius: 6px; border: 1.5px solid var(--linea-2); flex-shrink: 0; position: relative; transition: var(--trans); } .check input:checked + .check__punto { background: var(--c, var(--acc)); border-color: transparent; } .check input:checked + .check__punto::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800; } .check input:focus-visible + .check__punto { outline: 2px solid var(--acc); outline-offset: 2px; } .check small { margin-left: auto; color: var(--txt-3); font-size: .76rem; } .rango { width: 100%; accent-color: var(--acc); } .rango-val { display: flex; justify-content: space-between; font-size: .8rem; color: var(--txt-2); margin-bottom: .4rem; } .rango-val strong { color: var(--txt); } .listado__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .listado__barra h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); } .listado__cuenta { color: var(--txt-2); font-size: .88rem; } .orden { padding: .55rem 1rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea-2); font-size: .87rem; cursor: pointer; } #abrir-filtros { display: none; } .vacio { grid-column: 1/-1; text-align: center; padding: 3rem 1rem; color: var(--txt-2); } .vacio .btn { margin-top: 1rem; } .vacio--grande { padding: 4.5rem 1rem; } .vacio--grande h2 { color: var(--txt); margin-bottom: .6rem; } /* --------------------------------------------------------- Ficha de producto --------------------------------------------------------- */ .miga { font-size: .8rem; color: var(--txt-3); margin-bottom: 1.5rem; } .miga a:hover { color: var(--acc-2); } .ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .ficha__visual { position: relative; } .ficha__escenario { border-radius: 26px; border: 1px solid var(--linea); background: radial-gradient(100% 80% at 50% 0%, var(--panel-2), var(--panel) 70%); padding: 2rem; position: sticky; top: 5.5rem; } .ficha__escenario .dispositivo { height: clamp(260px, 34vw, 380px); } .ficha__etiquetas { position: absolute; top: 1.2rem; left: 1.2rem; display: flex; gap: .4rem; flex-wrap: wrap; } .ficha__marca { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-2); } .ficha__info h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: .4rem 0 .6rem; } .ficha__claim { color: var(--txt-2); font-size: 1.05rem; margin-bottom: .8rem; } .compra { margin-top: 1.4rem; padding: 1.4rem; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); } .compra__ahorro { color: var(--ok); font-weight: 620; font-size: .9rem; margin: .3rem 0 1.1rem; } .compra__sec { display: flex; gap: .6rem; margin-top: .7rem; } .compra__sec .btn { flex: 1; } .compra__legal { font-size: .74rem; color: var(--txt-3); margin-top: .9rem; text-align: center; } .grafico { margin-top: 1.2rem; padding: 1.2rem 1.3rem; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); } .grafico__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; } .grafico__cab h3 { font-size: .95rem; } .grafico__min { font-size: .8rem; color: var(--txt-2); } .grafico__pie { font-size: .82rem; color: var(--txt-2); margin-top: .4rem; } .ficha__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; } .bloque { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .ficha__cols .bloque { margin-top: 0; } .bloque h2 { margin-bottom: 1rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); } .bloque__intro { color: var(--txt-2); margin-bottom: 1.2rem; } .proycon { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .proycon__col { padding: 1.1rem; border-radius: var(--radio-s); background: var(--panel); border: 1px solid var(--linea); } .proycon__col h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6rem; } .proycon__col--pro h4 { color: var(--ok); } .proycon__col--con h4 { color: var(--hot); } .proycon__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .proycon__col li { font-size: .87rem; color: var(--txt-2); padding-left: 1.2rem; position: relative; } .proycon__col--pro li::before { content: '+'; position: absolute; left: 0; color: var(--ok); font-weight: 800; } .proycon__col--con li::before { content: '−'; position: absolute; left: 0; color: var(--hot); font-weight: 800; } .tabla-specs { width: 100%; border-collapse: collapse; font-size: .88rem; } .tabla-specs th, .tabla-specs td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--linea); } .tabla-specs th { color: var(--txt-3); font-weight: 600; width: 38%; } .tabla-specs tr:last-child th, .tabla-specs tr:last-child td { border-bottom: 0; } .tabla-specs tr:nth-child(odd) { background: var(--panel); } /* --------------------------------------------------------- Comparador ---------------------------------------------------------*/ .tabla-comp__scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); } .tabla-comp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .87rem; } .tabla-comp th, .tabla-comp td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; } .tabla-comp thead th { position: relative; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--linea-2); padding-top: 1.4rem; } .tabla-comp tbody th { color: var(--txt-3); font-weight: 600; width: 160px; } .tabla-comp tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-2) 55%, transparent); } .comp__img { display: block; margin-inline: auto; max-width: 120px; } .comp__img .dispositivo { height: 110px; } .comp__marca { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); margin-top: .4rem; } .comp__nombre { display: block; font-size: .92rem; font-weight: 700; margin-top: .15rem; } .comp__nombre:hover { color: var(--acc-2); } .comp__precio { font-size: 1.15rem; font-weight: 800; } .gana { color: var(--ok); } .tag-gana { display: block; font-size: .7rem; font-weight: 700; color: var(--ok); } .fila-destacada td, .fila-destacada th { padding-block: 1rem; } .fila-cta td { padding-block: 1.1rem; } .comp__lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .comp__lista li { font-size: .82rem; color: var(--txt-2); padding-left: 1rem; position: relative; } .comp__lista--pro li::before { content: '+'; position: absolute; left: 0; color: var(--ok); font-weight: 800; } .comp__lista--con li::before { content: '−'; position: absolute; left: 0; color: var(--hot); font-weight: 800; } .quitar-comp { position: absolute; top: .4rem; right: .4rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--panel-2); color: var(--txt-3); font-size: .75rem; line-height: 1; } .quitar-comp:hover { color: var(--hot); } .veredicto { margin-top: 2rem; padding: 1.6rem 1.8rem; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); } .veredicto h2 { font-size: 1.3rem; margin-bottom: .9rem; } .veredicto ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .veredicto li { color: var(--txt-2); font-size: .93rem; padding-left: 1.3rem; position: relative; } .veredicto li::before { content: '→'; position: absolute; left: 0; color: var(--acc-2); } .veredicto__nota { font-size: .78rem; color: var(--txt-3); margin-top: 1rem; } /* --------------------------------------------------------- Artículo / guía --------------------------------------------------------- */ .art__cab { max-width: 62ch; margin-bottom: 2.5rem; } .art__meta { font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-2); } .art__cab h1 { margin: .6rem 0 .8rem; font-size: clamp(1.9rem, 4.4vw, 3rem); } .art__resumen { color: var(--txt-2); font-size: 1.1rem; } .art__cuerpo { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .art__texto { max-width: 68ch; } .art__texto h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 2rem 0 .7rem; } .art__texto p { color: var(--txt-2); margin-bottom: 1rem; } .art__intro { font-size: 1.08rem; color: var(--txt) !important; } .art__aviso { margin-top: 2rem; padding: 1.1rem 1.3rem; border-radius: var(--radio-s); background: var(--panel); border-left: 3px solid var(--acc); font-size: .87rem; color: var(--txt-2); } .art__picks { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1rem; } .art__picks > h2 { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); } .pick { padding: 1.1rem; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: .45rem; } .pick__etiqueta { align-self: flex-start; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: .22rem .6rem; border-radius: 999px; background: linear-gradient(120deg, var(--acc), var(--acc-2)); } .pick__img { background: var(--panel-2); border-radius: 14px; padding: .4rem; } .pick__img .dispositivo { height: 110px; } .pick h3 { font-size: .98rem; } .pick h3 a:hover { color: var(--acc-2); } .pick p { font-size: .84rem; color: var(--txt-2); } /* --------------------------------------------------------- Lista de seguimiento --------------------------------------------------------- */ .resumen-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-bottom: 1.6rem; } .resumen-lista div { background: var(--fondo-2); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; } .resumen-lista span { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; } .resumen-lista small { font-size: .78rem; color: var(--txt-3); } .resumen-lista--ok span { color: var(--ok); } /* --------------------------------------------------------- Páginas de texto --------------------------------------------------------- */ .texto { max-width: 72ch; margin-inline: auto; } .texto h1 { margin-bottom: .8rem; } .texto .art__meta { display: block; margin-bottom: 1.6rem; } .texto h2 { font-size: 1.35rem; margin: 2.2rem 0 .7rem; } .texto h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; } .texto p, .texto li { color: var(--txt-2); margin-bottom: .85rem; } .texto ul, .texto ol { padding-left: 1.3rem; margin-bottom: 1rem; } .texto a { color: var(--acc-2); text-decoration: underline; text-underline-offset: 2px; } .texto .destacado { padding: 1.1rem 1.3rem; border-radius: var(--radio-s); background: var(--panel); border-left: 3px solid var(--acc); } .texto .destacado p:last-child { margin-bottom: 0; } .tabla-simple { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 1.2rem; } .tabla-simple th, .tabla-simple td { padding: .7rem .8rem; border-bottom: 1px solid var(--linea); text-align: left; } .tabla-simple th { color: var(--txt-3); font-weight: 650; } /* --------------------------------------------------------- Buscador --------------------------------------------------------- */ .buscador { position: fixed; inset: 0; z-index: 90; padding: 8vh 1.2rem; background: color-mix(in srgb, var(--fondo) 78%, transparent); backdrop-filter: blur(10px); animation: aparecer .18s ease; } @keyframes aparecer { from { opacity: 0; } } .buscador__caja { width: min(100%, 620px); margin-inline: auto; background: var(--fondo-2); border: 1px solid var(--linea-2); border-radius: 22px; box-shadow: var(--sombra); overflow: hidden; } .buscador__campo { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--linea); } .buscador__campo .ico { color: var(--txt-3); width: 1.2rem; height: 1.2rem; } .buscador__campo input { flex: 1; background: none; border: 0; outline: none; font-size: 1.05rem; } .buscador__res { max-height: 56vh; overflow-y: auto; padding: .5rem; } .buscador__titulo { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); padding: .5rem .7rem; } .buscador__vacio { padding: 1.6rem; text-align: center; color: var(--txt-2); font-size: .9rem; } .res { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: 12px; transition: background var(--trans); } .res:hover { background: var(--panel); } .res__img { width: 44px; flex-shrink: 0; } .res__img .dispositivo { height: 44px; } .res__txt { display: flex; flex-direction: column; flex: 1; } .res__txt strong { font-size: .9rem; font-weight: 620; } .res__txt small { font-size: .76rem; color: var(--txt-3); } .res__precio { font-weight: 750; font-size: .93rem; } /* --------------------------------------------------------- Barra de comparación --------------------------------------------------------- */ .barra-comparar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 70; width: min(100% - 1.6rem, 900px); background: color-mix(in srgb, var(--fondo-2) 92%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--linea-2); border-radius: 18px; box-shadow: var(--sombra); animation: subir .25s cubic-bezier(.3,1.3,.5,1); } @keyframes subir { from { transform: translate(-50%, 120%); } } .barra-comparar__int { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; flex-wrap: wrap; } .barra-comparar__t { font-size: .85rem; white-space: nowrap; } .barra-comparar__chips { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; } .chip-comp { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--linea); font-size: .78rem; color: var(--txt-2); max-width: 210px; } .chip-comp span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-comp:hover { color: var(--hot); border-color: var(--hot); } .barra-comparar__acc { display: flex; gap: .5rem; } /* --------------------------------------------------------- Cookies y avisos --------------------------------------------------------- */ .cookies { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; width: min(100% - 2rem, 420px); padding: 1.1rem 1.2rem; border-radius: var(--radio); background: var(--fondo-2); border: 1px solid var(--linea-2); box-shadow: var(--sombra); } .cookies p { font-size: .83rem; color: var(--txt-2); margin-bottom: .9rem; } .cookies a { color: var(--acc-2); text-decoration: underline; } .cookies__acc { display: flex; gap: .5rem; justify-content: flex-end; } .avisos { position: fixed; right: 1rem; top: 1rem; z-index: 95; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; } .aviso { padding: .7rem 1.1rem; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--linea-2); box-shadow: var(--sombra-s); font-size: .85rem; animation: entrar .25s cubic-bezier(.3,1.3,.5,1); } .aviso.fuera { opacity: 0; transform: translateX(20px); transition: .3s; } @keyframes entrar { from { opacity: 0; transform: translateX(20px); } } /* --------------------------------------------------------- Pie --------------------------------------------------------- */ .pie { margin-top: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--linea); background: var(--fondo-2); padding-bottom: 5rem; } .pie__top { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); } .pie__marca p { font-size: .86rem; color: var(--txt-2); margin-top: 1rem; max-width: 40ch; } .pie__nota { font-size: .78rem !important; color: var(--txt-3) !important; } .marca--pie { margin-bottom: .2rem; } .pie__col { display: flex; flex-direction: column; gap: .5rem; } .pie__col h4 { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); margin-bottom: .3rem; } .pie__col a { font-size: .87rem; color: var(--txt-2); transition: color var(--trans); } .pie__col a:hover { color: var(--acc-2); } .pie__bajo { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; padding-top: 1.5rem; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: .4rem; font-size: .76rem; color: var(--txt-3); } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 1080px) { .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: .8rem; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 0 0 18px 18px; } .nav.abierto { display: flex; } .nav a { padding: .7rem .9rem; } .cab__fila { position: relative; } .hamb { display: grid; } .pie__top { grid-template-columns: 1fr 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } } @media (max-width: 900px) { .hero__reja { grid-template-columns: 1fr; } .confianza { grid-template-columns: 1fr 1fr; } .ficha { grid-template-columns: 1fr; } .ficha__escenario { position: static; } .ficha__escenario .dispositivo { height: 230px; } .ficha__cols { grid-template-columns: 1fr; } .art__cuerpo { grid-template-columns: 1fr; } .art__picks { position: static; } .listado { grid-template-columns: 1fr; } #abrir-filtros { display: inline-flex; } .filtros { position: static; display: none; } .filtros.abierto { display: flex; } } @media (max-width: 640px) { .contenedor { width: min(100% - 1.6rem, var(--max)); } .cab__fila { width: min(100% - 1.6rem, var(--max)); gap: .5rem; } /* En móvil la cinta se queda solo con el aviso de afiliación, que es el que tiene que estar sí o sí; la fecha ya aparece en el pie. */ .cinta { font-size: .72rem; } .cinta__fecha, .cinta__sep { display: none; } .hero-oferta { grid-template-columns: 1fr; text-align: center; } .hero-oferta__acc { justify-content: center; } .confianza { grid-template-columns: 1fr; } .proycon { grid-template-columns: 1fr; } .reja { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; } .tarjeta__img .dispositivo { height: 128px; } .tarjeta__cuerpo { padding: .8rem .85rem 1rem; } .precio__ahora { font-size: 1.2rem; } .pie__top { grid-template-columns: 1fr 1fr; } .barra-comparar__chips { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* Foco visible coherente en todo el sitio */ :focus-visible { outline: 2px solid var(--acc-2); outline-offset: 3px; border-radius: 6px; }