/* Affile · estilos del catálogo Colores del logo: lima #AAD500, blanco #FFFFFF, negro #000000. Dos temas: día (por defecto) y noche. El botón de la cabecera cambia data-tema en . */ :root { /* Fijos de marca */ --lima: #AAD500; --negro: #000000; --blanco: #FFFFFF; --amarillo: #F5B301; --rojo-oferta: #DC2626; /* Tema día */ --fondo: #F7F7F2; --superficie: #FFFFFF; --borde: #E2E2DA; --texto: #111111; --texto-suave: #5E5E58; --tachado: #6B6B63; --extra: #3F3F3A; --chip-fondo: #FFFFFF; --chip-borde: #E2E2DA; --marca-fondo: var(--lima); --marca-texto: #111111; --rec-fondo: #000000; --rec-texto: var(--lima); --carac-fondo: #F3F7E3; --carac-borde: #DDE8B0; --hashtags: #111111; --gris-estrella: #D1D5DB; --pie-borde: #000000; color-scheme: light; } :root[data-tema="noche"] { --fondo: #000000; --superficie: #141414; --borde: #262626; --texto: #FFFFFF; --texto-suave: #A3A3A3; --tachado: #8A8A8A; --extra: #D4D4D4; --chip-fondo: #111111; --chip-borde: #2E2E2E; --marca-fondo: transparent; --marca-texto: var(--lima); --rec-fondo: var(--lima); --rec-texto: #000000; --carac-fondo: #1E1E1E; --carac-borde: #2E2E2E; --hashtags: var(--lima); --gris-estrella: #3A3A3A; --pie-borde: #1F1F1F; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* Cabecera: siempre negra, como el logo */ .cabecera { background: var(--negro); color: var(--blanco); padding: 18px 16px 0; } .contenedor { max-width: 1080px; margin: 0 auto; } .barra-superior { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .marca h1 { margin: 0; font-family: "Poppins", "Noto Sans", system-ui, sans-serif; font-style: italic; font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--blanco); } .marca h1 a { color: inherit; text-decoration: none; } .marca h1 span { color: var(--lima); } .acciones { display: flex; align-items: center; gap: 8px; } .boton-tema { width: 40px; height: 40px; display: grid; place-items: center; background: transparent; color: var(--blanco); border: 1.5px solid #3A3A3A; border-radius: 999px; cursor: pointer; padding: 0; } .boton-tema svg { width: 20px; height: 20px; } .boton-tema .sol { display: none; } :root[data-tema="noche"] .boton-tema .sol { display: block; } :root[data-tema="noche"] .boton-tema .luna { display: none; } .siguenos { background: var(--lima); color: var(--negro); font-size: 14px; font-weight: 800; text-decoration: none; border-radius: 999px; padding: 10px 16px; white-space: nowrap; } .siguenos:hover { background: #BFE81A; } .tiendas { display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; } .tienda { padding: 10px 4px; margin-right: 14px; font-weight: 700; font-size: 15px; text-decoration: none; color: #A3A3A3; border-bottom: 3px solid transparent; white-space: nowrap; } .tienda.activa { color: var(--blanco); border-bottom-color: var(--lima); } /* Franja lima: aviso de la revisión de los lunes */ .franja { background: var(--lima); color: var(--negro); padding: 24px 16px 22px; } .franja .contenedor { display: flex; flex-direction: column; gap: 6px; } .franja .fecha-revision { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .franja h2 { margin: 0; font-family: "Poppins", "Noto Sans", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: clamp(30px, 6vw, 44px); line-height: 1.05; letter-spacing: -1px; text-wrap: balance; } .franja p { margin: 0; font-size: 15px; max-width: 60ch; } /* Secciones */ .secciones { display: flex; gap: 8px; padding: 16px; overflow-x: auto; max-width: 1080px; margin: 0 auto; } .seccion { flex: none; border: 1.5px solid var(--chip-borde); background: var(--chip-fondo); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); cursor: pointer; } .seccion small { color: var(--texto-suave); font-weight: 500; margin-left: 4px; } .seccion[aria-selected="true"] { background: var(--lima); border-color: var(--lima); color: var(--negro); font-weight: 700; } .seccion[aria-selected="true"] small { color: var(--negro); } .seccion:focus-visible, .boton:focus-visible, .tienda:focus-visible, .boton-tema:focus-visible, .siguenos:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; } /* Grilla y tarjetas */ .grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; padding: 0 16px 32px; max-width: 1080px; margin: 0 auto; } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .foto { position: relative; aspect-ratio: 1 / 1; background: var(--borde); } .foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .etiqueta { position: absolute; top: 12px; left: 12px; font-weight: 900; border-radius: 10px; padding: 6px 10px; font-size: 15px; } .etiqueta.descuento { background: var(--rojo-oferta); color: var(--blanco); font-size: 18px; } .etiqueta.recomendado { background: var(--rec-fondo); color: var(--rec-texto); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .cuerpo h2 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; } .cuerpo h2 span { background: var(--marca-fondo); color: var(--marca-texto); padding: 0 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } :root[data-tema="noche"] .cuerpo h2 span { padding: 0; } .estrellas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; } .estrellas svg { width: 16px; height: 16px; flex: none; } .estrellas b { color: var(--texto); font-size: 14px; margin-left: 2px; } .estrellas span { white-space: nowrap; } .precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .precio .ahora { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; } .precio .antes { color: var(--tachado); text-decoration: line-through; font-size: 15px; } .extra { font-size: 13px; color: var(--extra); font-weight: 600; margin: 0; } .caracteristicas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 2px 0 4px; } .caracteristicas li { background: var(--carac-fondo); border: 1px solid var(--carac-borde); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; } .boton { margin-top: auto; display: block; text-align: center; background: var(--lima); color: var(--negro); font-weight: 800; font-size: 16px; text-decoration: none; border-radius: 999px; padding: 14px 16px; } .boton:hover { background: #BFE81A; } .fecha { font-size: 11.5px; color: var(--tachado); text-align: center; margin: 0; line-height: 1.5; } .fecha .hashtags { color: var(--hashtags); font-weight: 600; } .fecha a { color: var(--tachado); } .vacio { grid-column: 1 / -1; text-align: center; color: var(--texto-suave); padding: 48px 0; } /* Pie */ .pie { background: var(--negro); border-top: 1px solid var(--pie-borde); padding: 24px 16px 32px; font-size: 13px; color: #B5B5B5; } .pie p { margin: 0 0 8px; max-width: 70ch; } .pie a { color: var(--lima); } @media (prefers-reduced-motion: no-preference) { .boton, .seccion, .siguenos { transition: background-color 0.15s ease, color 0.15s ease; } } /* Página de políticas */ .politicas { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; } .politicas h2 { font-size: 26px; margin: 0 0 4px; } .politicas h3 { font-size: 17px; margin: 24px 0 6px; } .politicas p { margin: 0; color: var(--extra); } .politicas .actualizado { color: var(--texto-suave); font-size: 13px; }