a propósito (100vw) para ocupar toda la pantalla; esto evita que ese cálculo deje una barra de scroll horizontal de un pixel por el ancho del scrollbar. */ overflow-x: hidden; } h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: -0.015em; } h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 .6rem; } h2 { font-size: 1.2rem; margin: 2.2rem 0 .7rem; } h3 { font-size: 1rem; margin: 2rem 0 .5rem; } main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------------- sprite de íconos ---------------- */ /* Un solo trazo/tamaño para todo el sitio (ver el de cada uno al principio de ): sin esto los / del sprite no tienen ni relleno ni trazo por defecto y quedan invisibles. */ .icono { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; } /* Las formas rellenas dentro de un símbolo (el punto del ícono de etiqueta, los círculos de "sliders"...) llevan esta clase en vez de quedar con trazo */ .icono-relleno { fill: currentColor; stroke: none; } /* ---------------- barra superior ---------------- */ .barra { display: flex; align-items: center; gap: 1.25rem; padding: .85rem 1.25rem; background: var(--panel); border-bottom: 1px solid var(--linea); flex-wrap: wrap; transition: background-color var(--rapido), border-color var(--rapido); } .marca { display: flex; align-items: center; gap: .45rem; font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--tinta); text-decoration: none; } .marca-icono { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: var(--radio); background: var(--vivo); color: #fff; } .marca-icono .icono { width: 1.05rem; height: 1.05rem; } .nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; } .nav button { display: flex; align-items: center; gap: .4rem; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--suave); padding: .3rem .55rem; border-radius: var(--radio); cursor: pointer; transition: background-color var(--rapido), color var(--rapido); } .nav button:hover { color: var(--tinta); } .nav button.activa { color: var(--tinta); background: var(--fondo); } .nav button:active { transform: scale(.96); } .nav-icono { font-size: 1rem; line-height: 1; } .nav-anonimo { flex: 1; } .nav-anonimo button { border: 0; background: none; font: inherit; font-size: .92rem; font-weight: 500; color: var(--tinta); padding: .3rem .55rem; border-radius: var(--radio); cursor: pointer; transition: background-color var(--rapido); } .nav-anonimo button:hover { background: var(--fondo); } .sesion { margin-left: auto; display: flex; align-items: center; gap: .8rem; } .quien { font-size: .88rem; color: var(--suave); } .tema-toggle { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: 1.05rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido); } .tema-toggle:hover { border-color: var(--vivo); } .tema-toggle:active { transform: scale(.9); } /* ---------------- avisos ---------------- */ .aviso { max-width: 60rem; margin: 1rem auto -.5rem; padding: .7rem .9rem; border-left: 3px solid var(--vivo); border-radius: 0 var(--radio) var(--radio) 0; background: var(--vivo-claro); color: var(--tinta); font-size: .92rem; transition: background-color var(--rapido), color var(--rapido); } .aviso.error { border-left-color: var(--alerta); background: var(--alerta-claro); color: var(--alerta); } /* ---------------- portada: hero ---------------- */ /* Sin fotografía real: en vez de fingir una, la profundidad la da el degradado — varias capas radiales sobre el fondo oscuro de base. Con tema claro se aclaran para no perder contraste con el texto blanco del hero. */ .hero { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; margin-top: -1.5rem; padding: 5.5rem 1.25rem 4.5rem; background: radial-gradient(ellipse 60rem 30rem at 15% -10%, rgba(79, 191, 164, .35), transparent 60%), radial-gradient(ellipse 50rem 30rem at 100% 10%, rgba(224, 165, 58, .18), transparent 55%), #0e1013; color: #f3f4f5; overflow: hidden; text-align: center; } .hero-contenido { max-width: 40rem; margin: 0 auto; position: relative; z-index: 1; } .hero-marca { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1rem; letter-spacing: .28em; text-transform: uppercase; line-height: 1.5; color: #9adfcd; margin: 0 0 1.6rem; } .hero-titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 3.4rem; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 1.1rem; color: #fff; } .hero-sub { font-size: 1.05rem; line-height: 1.6; color: #c7ccd1; max-width: 34rem; margin: 0 auto 2.2rem; } .hero-acciones { display: flex; flex-direction: column; align-items: center; gap: .9rem; } .hero-acciones .principal { font-size: 1rem; padding: .8rem 1.8rem; } .hero-acciones .enlace { color: #c7ccd1; } .hero-acciones .enlace:hover { color: #fff; } /* ---------------- portada: secciones ---------------- */ .seccion-portada { max-width: 60rem; margin: 3.5rem auto; padding: 0 1.25rem; } .seccion-portada h2 { text-align: center; font-size: 1.4rem; margin: 0 0 1.75rem; } .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; } .paso { text-align: center; padding: 0 1rem; } .paso-numero { display: inline-block; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.5rem; color: var(--vivo); margin-bottom: .5rem; } .paso h3 { margin: 0 0 .5rem; } .paso p { color: var(--suave); margin: 0; font-size: .92rem; line-height: 1.55; } .confianza-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; } .confianza-lista li { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; line-height: 1.5; } .confianza-check { flex-shrink: 0; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vivo-claro); color: var(--vivo); font-size: .8rem; font-weight: 700; margin-top: .1rem; } /* ---------------- promo de asociados (portada) y Sobre nosotros ---------------- */ /* Mismo lenguaje visual que .escudo-explicacion (borde izquierdo + fondo tenue en el color de marca) en vez de un bloque sólido: así el contraste ya queda resuelto en los dos temas sin definir un color nuevo. */ .promo-asociados { max-width: 60rem; margin: 3.5rem auto; padding: 1.75rem 2rem; display: flex; align-items: center; gap: 1.5rem; border: 1px solid var(--linea); border-left: 4px solid var(--vivo); border-radius: var(--radio); background: var(--vivo-claro); transition: background-color var(--rapido), border-color var(--rapido); } .promo-asociados > .icono { width: 2.5rem; height: 2.5rem; flex-shrink: 0; color: var(--vivo); stroke-width: 1.3; } .promo-asociados-texto { flex: 1; min-width: 0; } .promo-asociados-texto h2 { margin: 0 0 .35rem; text-align: left; color: var(--vivo); font-size: 1.25rem; } .promo-asociados-texto p { margin: 0; color: var(--tinta); font-size: .92rem; line-height: 1.55; } .promo-asociados .principal { flex-shrink: 0; white-space: nowrap; } @media (max-width: 40rem) { .promo-asociados { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; } .promo-asociados-texto h2 { text-align: center; } .promo-asociados .principal { align-self: center; } } .sobre-nosotros-intro { max-width: 40rem; color: var(--suave); font-size: 1rem; line-height: 1.6; } .trabaja-con-nosotros { margin: 1.75rem 0; padding: 1.5rem 1.75rem; border: 1px solid var(--linea); border-left: 4px solid var(--vivo); border-radius: var(--radio); background: var(--vivo-claro); max-width: 40rem; } .trabaja-con-nosotros h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; color: var(--vivo); } .trabaja-con-nosotros p { margin: 0 0 .9rem; color: var(--tinta); font-size: .94rem; line-height: 1.6; } .trabaja-con-nosotros .principal { margin-top: .3rem; } .sobre-nosotros-ayuda { color: var(--suave); font-size: .9rem; margin-top: 2rem; } .valores-lista { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; } .valores-lista li { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; line-height: 1.5; color: var(--tinta); } .valores-lista li::before { content: "✓"; flex-shrink: 0; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vivo-claro); color: var(--vivo); font-size: .8rem; font-weight: 700; margin-top: .1rem; } /* ---------------- privacidad y tratamiento de datos ---------------- */ .privacidad-intro { max-width: 40rem; color: var(--suave); font-size: 1rem; line-height: 1.6; } .privacidad-doc { max-width: 46rem; margin: 1.75rem 0; padding: 1.75rem 2rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra); } .privacidad-doc h3 { margin: 0 0 .3rem; } .privacidad-doc .privacidad-fecha { color: var(--suave); font-size: .85rem; margin: 0 0 1.2rem; } .privacidad-doc h4 { margin: 1.4rem 0 .5rem; font-size: 1rem; } .privacidad-doc h4:first-of-type { margin-top: 1.6rem; } .privacidad-doc p, .privacidad-doc li { color: var(--tinta); font-size: .94rem; line-height: 1.6; } .privacidad-doc + .privacidad-doc { margin-top: 2.5rem; } /* ---------------- pie de página ---------------- */ .pie { border-top: 1px solid var(--linea); background: var(--panel); margin-top: 3rem; padding: 3rem 1.25rem 1.5rem; transition: background-color var(--rapido), border-color var(--rapido); } .pie-contenido { max-width: 60rem; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } .pie-marca .marca { margin-bottom: .6rem; } .pie-marca p { color: var(--suave); font-size: .86rem; line-height: 1.6; margin: 0; max-width: 22rem; } .pie h4 { margin: 0 0 .75rem; font-family: var(--fuente-titulo); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } .pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .pie a, .pie button.enlace { color: var(--tinta); text-decoration: none; font-size: .88rem; background: none; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; } .pie a:hover, .pie button.enlace:hover { color: var(--vivo); } .pie li { color: var(--suave); font-size: .88rem; } .pie-legal { max-width: 60rem; margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--linea); color: var(--suave); font-size: .8rem; } @media (max-width: 40rem) { .pie-contenido { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 34rem) { .hero { padding: 4rem 1rem 3rem; } .hero-titulo { font-size: 2.3rem; } .hero-sub { font-size: .95rem; } } /* ---------------- modal de acceso ---------------- */ .modal-fondo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(10, 11, 13, .55); animation: modal-fondo-entra .15s ease; } @keyframes modal-fondo-entra { from { opacity: 0; } to { opacity: 1; } } .modal-caja { position: relative; max-width: 100%; max-height: 90vh; overflow: auto; animation: modal-caja-entra .18s ease; } @keyframes modal-caja-entra { from { opacity: 0; transform: translateY(.75rem) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-fondo, .modal-caja { animation: none; } } .modal-cerrar { position: absolute; top: -.6rem; right: -.6rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--rapido), transform .1s ease; z-index: 1; } .modal-cerrar:hover { border-color: var(--vivo); } .modal-cerrar:active { transform: scale(.9); } /* ---------------- formularios ---------------- */ .acceso { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); max-width: 24rem; padding: 1.25rem; } .pestanas { display: flex; gap: 1.25rem; margin-bottom: 1.1rem; } .pestanas button { border: 0; background: none; font: inherit; font-size: .95rem; color: var(--suave); padding: 0 0 .35rem; border-bottom: 2px solid transparent; cursor: pointer; } .pestanas button.activa { color: var(--tinta); border-bottom-color: var(--vivo); } .acceso-ayuda { color: var(--suave); font-size: .88rem; line-height: 1.5; margin: 0 0 .3rem; } .formulario { display: flex; flex-direction: column; gap: .85rem; } .formulario.ancho { max-width: 30rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; } .formulario label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; color: var(--suave); } .formulario small { color: var(--suave); font-size: .8rem; } .buscador { position: relative; margin-bottom: 1.5rem; } .buscador-fila { display: flex; gap: .6rem; } .buscador-fila input[type="search"] { flex: 1; } /* Categoría, marca, precio y orden viven acá adentro: cerrado por defecto, así la barra de arriba no compite con el listado por atención. */ .filtro-toggle { display: flex; align-items: center; gap: .4rem; white-space: nowrap; font: inherit; font-size: .88rem; color: var(--tinta); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem .9rem; cursor: pointer; transition: border-color var(--rapido), color var(--rapido); } .filtro-toggle:hover { border-color: var(--vivo); } .filtro-toggle.activo { border-color: var(--vivo); color: var(--vivo); } .filtro-flecha { font-size: .7rem; transition: transform var(--rapido); } .filtro-toggle[aria-expanded="true"] .filtro-flecha { transform: rotate(180deg); } .filtro-panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 15; display: flex; flex-direction: column; gap: .2rem; width: 17rem; max-width: calc(100vw - 2.5rem); padding: 1rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra), 0 12px 32px rgba(20, 22, 26, .12); } .filtro-panel label { font-size: .82rem; color: var(--suave); margin: .5rem 0 .25rem; } .filtro-panel label:first-child { margin-top: 0; } .filtro-acciones { display: flex; align-items: center; gap: 1rem; margin-top: .85rem; } input, textarea, select { font: inherit; font-size: .95rem; color: var(--tinta); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem .6rem; width: 100%; transition: border-color var(--rapido), background-color var(--rapido); } textarea { resize: vertical; } input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--vivo); outline-offset: 1px; } input:hover, textarea:hover, select:hover { border-color: var(--suave); } .modo { border: 1px solid var(--linea); padding: .8rem .9rem; margin: 0; } .modo legend { font-size: .88rem; color: var(--suave); padding: 0 .3rem; } .radio { flex-direction: row !important; align-items: flex-start; gap: .55rem; color: var(--tinta); } .radio input { width: auto; margin-top: .28rem; } .radio strong { font-weight: 500; display: block; } .radio span { font-size: .88rem; color: var(--suave); } /* Checkboxes de especialidad/servicio/zona: mismo lenguaje que .radio, en una cuadrícula que se ajusta sola en vez de una lista vertical larga. */ .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem .9rem; } .checks label { flex-direction: row !important; align-items: center; gap: .5rem; color: var(--tinta); font-size: .92rem; } .checks input { width: auto; } .capacidad-con-unidad { display: flex; gap: .5rem; } .capacidad-con-unidad input { flex: 1; } .capacidad-con-unidad select { width: auto; } /* ---------------- botones ---------------- */ .principal { font: inherit; font-size: .95rem; background: var(--vivo); color: #fff; border: 0; border-radius: var(--radio); padding: .58rem 1.1rem; cursor: pointer; align-self: flex-start; transition: background-color var(--rapido), transform .1s ease, box-shadow var(--rapido); } .principal:hover { background: #17493f; } .principal:active:not([disabled]) { transform: scale(.97); } .principal[disabled] { background: var(--suave); cursor: default; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .principal:hover { background: #6cd0b6; } } :root[data-tema="oscuro"] .principal:hover { background: #6cd0b6; } /* Mismo tamaño que .principal, solo cambia el color — para un botón que necesita distinguirse de la acción principal (ej. "Iniciar sesión" al lado de "Crear cuenta") sin bajar a texto plano como .enlace. */ .principal.azul { background: var(--cielo); } .principal.azul:hover { background: #026aa3; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .principal.azul:hover { background: #7dd3fc; } } :root[data-tema="oscuro"] .principal.azul:hover { background: #7dd3fc; } .enlace { font: inherit; font-size: .88rem; background: none; border: 0; color: var(--suave); padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; transition: color var(--rapido); } .enlace:hover { color: var(--tinta); } .enlace:active { transform: scale(.97); } .volver { margin-bottom: 1.2rem; } .convertir-fecha { width: auto; font-size: .85rem; padding: .35rem .5rem; } /* ---------------- migas de navegación ---------------- */ .migas { display: flex; align-items: center; gap: .35rem; margin: 1.4rem 0 .3rem; font-size: .84rem; color: var(--suave); } .migas .icono { width: .85rem; height: .85rem; } .miga-enlace { background: none; border: 0; padding: 0; color: var(--suave); font: inherit; cursor: pointer; } .miga-enlace:hover { color: var(--vivo); } .migas .actual { color: var(--tinta); font-weight: 500; } /* ---------------- mercado: filtros + grilla + anuncios ---------------- */ /* Tres columnas piden más aire del que da

(60rem, pensado para texto corrido) — el mismo quiebre de ancho que ya usa .hero, pero con un techo propio en vez de 100vw a secas: no queremos una cuadrícula infinita en monitores anchos. */ .mercado-layout { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 78rem; box-sizing: border-box; padding: 0 1.25rem; display: flex; gap: 1.75rem; align-items: flex-start; } .mercado-principal { flex: 1; min-width: 0; } .panel-filtros { width: 14rem; flex-shrink: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem; transition: background-color var(--rapido), border-color var(--rapido); } .panel-filtros h2 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .9rem; font-size: .95rem; } .buscador-panel { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; margin-bottom: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--suave); background: var(--fondo); } .buscador-panel .icono { width: 1rem; height: 1rem; flex-shrink: 0; } .buscador-panel input { border: 0; background: none; padding: 0; width: 100%; color: var(--tinta); } .buscador-panel input:focus { outline: none; } .grupo-filtro { padding: .9rem 0; border-top: 1px solid var(--linea); } .grupo-filtro:first-of-type { border-top: 0; padding-top: 0; } .grupo-filtro h3 { margin: 0 0 .55rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); } .lista-categorias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; } .opcion-categoria { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: var(--radio); background: none; color: var(--tinta); font-size: .86rem; text-align: left; cursor: pointer; transition: background-color var(--rapido), color var(--rapido); } .opcion-categoria .icono { width: 1rem; height: 1rem; color: var(--suave); flex-shrink: 0; } .opcion-categoria:hover { background: var(--fondo); } .opcion-categoria.activa { background: var(--vivo-claro); color: var(--vivo); font-weight: 600; } .opcion-categoria.activa .icono { color: var(--vivo); } .rango-precio { display: flex; align-items: center; gap: .5rem; color: var(--suave); } .rango-precio input { min-width: 0; } .opcion-filtro { display: flex; align-items: center; gap: .5rem; font-size: .86rem; padding: .25rem 0; cursor: pointer; } .opcion-filtro input { width: auto; margin: 0; } .panel-filtros .principal.ancho-completo { width: 100%; margin-top: 1rem; } .panel-filtros .enlace { display: block; width: 100%; text-align: center; margin-top: .5rem; font-size: .84rem; } .barra-resultados { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .cuenta-resultados { color: var(--suave); font-size: .88rem; } .orden { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--suave); } .orden select { width: auto; } .mercado-sidebar { width: 15rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; } .panel-anuncios { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem; transition: background-color var(--rapido), border-color var(--rapido); } .panel-anuncios h3 { margin: 0 0 .75rem; font-size: .92rem; } .lista-anuncios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; } .lista-anuncios a { display: block; text-decoration: none; color: inherit; transition: opacity var(--rapido); } .lista-anuncios a:hover { opacity: .82; } .lista-anuncios a:active { opacity: .65; } .lista-anuncios img, .anuncio-imagen-vacia { width: 100%; height: 6rem; object-fit: cover; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .4rem; background: var(--fondo); } .anuncio-imagen-vacia { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .anuncio-titulo { display: block; font-size: .86rem; font-weight: 500; } .anuncio-sub { display: block; font-size: .78rem; color: var(--suave); margin-top: .15rem; } /* Bento: el primer destacado ocupa las dos columnas y una imagen más grande, el resto queda en mosaico parejo — así el ojo escanea por tamaño, no por orden de lista, y el destacado más reciente siempre se nota primero. */ .lista-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; } .lista-bento > li:first-child { grid-column: 1 / -1; } .lista-bento > li:first-child img, .lista-bento > li:first-child .anuncio-imagen-vacia { height: 8rem; font-size: 2.4rem; } .lista-bento img, .lista-bento .anuncio-imagen-vacia { height: 4.5rem; } .lista-bento .anuncio-titulo { font-size: .8rem; } /* ---------------- listas ---------------- */ .lista { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; transition: background-color var(--rapido), border-color var(--rapido); } .lista:empty { display: none; } .fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--linea); cursor: pointer; position: relative; transition: background-color var(--rapido); } .fila:last-child { border-bottom: 0; } .fila:hover { background: var(--fondo); } .fila:active { background: var(--linea); } .fila.quieta { cursor: default; } .fila.quieta:hover, .fila.quieta:active { background: none; } .fila.cargar-mas { justify-content: center; } /* Mientras el carril cambia de imagen, se apaga hasta que la nueva carga */ .tarjeta-imagen .miniatura.cambiando { opacity: 0; } /* ---------------- esqueleto de carga ---------------- */ @keyframes brillo-esqueleto { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton .tarjeta-imagen, .skeleton .tarjeta-categoria, .skeleton .tarjeta-titulo, .skeleton .tarjeta-sub { display: block; color: transparent; border-color: transparent; background: linear-gradient(90deg, var(--linea) 25%, var(--fondo) 50%, var(--linea) 75%); background-size: 250% 100%; animation: brillo-esqueleto 1.3s ease-in-out infinite; } .skeleton .tarjeta-categoria { width: 40%; height: .74rem; border-radius: var(--radio); margin-bottom: .3rem; } .skeleton .tarjeta-titulo { width: 75%; height: 1.05rem; border-radius: var(--radio); } .skeleton .tarjeta-sub { width: 45%; height: .8rem; border-radius: var(--radio); margin-top: .4rem; } @media (prefers-reduced-motion: reduce) { .skeleton .tarjeta-imagen, .skeleton .tarjeta-categoria, .skeleton .tarjeta-titulo, .skeleton .tarjeta-sub { animation: none; } } /* min-width en rem (no 0): con flex-wrap, un valor mínimo razonable hace que .cifra-fila/los botones salten a su propia línea en vez de ir arrinconando el título letra por letra cuando no entran todos en una sola fila (pasaba en el panel de admin, con un