/* ========================================================================== novasites.shop — hoja de estilo de las tiendas Puerto directo del prototipo validado. UN solo archivo para TODAS las tiendas: lo que cambia entre una y otra son las variables CSS que inyecta Tienda\Tema en el . Por eso la tienda número mil no cuesta nada. Diseñado móvil primero. Los cortes usan CONTAINER QUERIES, no media queries: el layout responde al ancho de su contenedor, lo que permite embeber la misma tienda en el previsualizador del panel sin duplicar CSS. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .tienda { container-type: inline-size; min-height: 100vh; background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .tienda h1, .tienda h2, .tienda h3, .tienda .hd { font-family: var(--font-head); letter-spacing: var(--track); } .tienda img { display: block; max-width: 100%; height: auto; } .tienda a { text-decoration: none; } /* El color se hereda en los enlaces normales, pero NO en los que son botón: `.tienda a` (0,1,1) le gana a `.btn` (0,1,0) y dejaba el texto del botón primario en --c-text sobre --c-primary. Con :not(.btn) el botón conserva su --c-on-primary. */ .tienda a:not(.btn) { color: inherit; } .tienda button { font-family: inherit; cursor: pointer; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pad { padding-left: var(--pad); padding-right: var(--pad); } .sect { padding-top: calc(var(--gap) * 1.5); padding-bottom: calc(var(--gap) * .5); } /* ---------------------------------------------------------------- HEADER -- */ .hdr { position: sticky; top: 0; z-index: 30; background: var(--c-surface); border-bottom: 1px solid var(--c-border); } .hdr-in { display: flex; align-items: center; gap: 10px; padding: 10px var(--pad); } .logo { font-family: var(--font-head); font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: var(--track); } .logo-img { max-height: 36px; width: auto; display: block; } .logo em { display: block; font-size: 9.5px; font-style: normal; font-weight: 500; color: var(--c-muted); letter-spacing: .12em; text-transform: uppercase; } .hdr.centrado { position: relative; } .hdr.centrado .hdr-in { flex-direction: column; gap: 8px; text-align: center; } .hdr.centrado .icons { position: absolute; right: var(--pad); top: 12px; } .icons { display: flex; gap: 6px; margin-left: auto; } .ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text); font-size: 13px; position: relative; } .ico b { position: absolute; top: -4px; right: -4px; background: var(--c-accent); color: #fff; font-size: 9px; min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; padding: 0 3px; } .buscador { flex: 1; display: flex; align-items: center; gap: 7px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: calc(var(--r) * .8); padding: 0 11px; min-width: 0; } .buscador input { flex: 1; border: 0; background: transparent; color: var(--c-text); font: inherit; font-size: 13px; padding: 9px 0; min-width: 0; outline: none; } .buscador input::placeholder { color: var(--c-muted); } .buscador button { border: 0; background: transparent; color: var(--c-muted); padding: 0; } /* En móvil el buscador baja a su propia línea; arriba de 640 va en la misma. */ .hdr.buscador-protagonista .hdr-in { flex-wrap: wrap; } .hdr.buscador-protagonista .buscador { order: 3; flex: 1 0 100%; } @container (min-width: 640px) { .hdr.buscador-protagonista .buscador { order: 0; flex: 1 1 auto; } } .nav { display: none; gap: 18px; font-size: 13px; padding: 0 var(--pad) 10px; font-weight: 500; } .nav a { padding-bottom: 3px; border-bottom: 2px solid transparent; } .nav a[aria-current] { border-color: var(--c-primary); color: var(--c-primary); } @container (min-width: 640px) { .nav { display: flex; justify-content: center; } } .ticker { background: var(--c-primary); color: var(--c-on-primary); font-size: 11px; text-align: center; padding: 6px 10px; font-weight: 600; letter-spacing: .03em; } /* ----------------------------------------------------------------- CHIPS -- */ .chips { display: flex; gap: 7px; overflow-x: auto; padding: 11px var(--pad); scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; } .chip.on { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); } /* ------------------------------------------------------------------ HERO -- */ .hero { position: relative; margin: 0 var(--pad); border-radius: var(--r); overflow: hidden; aspect-ratio: 16/11; } .hero.full { margin: 0; border-radius: 0; aspect-ratio: 4/5; } .hero-txt { position: absolute; inset: auto 0 0 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,.68)); color: #fff; } .hero-txt h2 { font-size: 23px; margin: 0 0 6px; line-height: 1.12; font-weight: 800; } .hero-txt p { margin: 0 0 12px; font-size: 13px; opacity: .9; max-width: 46ch; } .btn { display: inline-block; background: var(--c-primary); color: var(--c-on-primary); border: 0; border-radius: calc(var(--r) * .7); padding: 11px 20px; font-size: 13.5px; font-weight: 700; } .btn.ghost { background: transparent; border: 1.5px solid currentColor; color: #fff; align-self: flex-start; } /* WhatsApp: verde de marca fijo, igual que .ico.wa. En fase 1 este botón ES la venta (ADR-002); no debe depender de que el vendedor haya elegido un primario legible — titimimi tiene --c-primary: #000000. */ .btn.wa { background: #25D366; color: #fff; } @container (min-width: 640px) { .hero { aspect-ratio: 21/8; } .hero.full { aspect-ratio: 16/7; } .hero-txt { padding: 34px; } .hero-txt h2 { font-size: 34px; } } @container (min-width: 1000px) { .hero-txt { padding: 48px; } .hero-txt h2 { font-size: 44px; } } /* ------------------------------------------------- TÍTULOS DE SECCIÓN ----- */ .st { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 0 var(--pad) 11px; } .st h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; } .st p { margin: 3px 0 0; font-size: 12.5px; color: var(--c-muted); } .st a { font-size: 12.5px; color: var(--c-primary); font-weight: 600; white-space: nowrap; } .st.center { flex-direction: column; align-items: center; text-align: center; padding-bottom: 16px; } @container (min-width: 640px) { .st h3 { font-size: 21px; } } /* ----------------------------------------------------------- COLECCIONES -- */ .colls { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); padding: 0 var(--pad); } .colls.big { grid-template-columns: 1fr; } .coll { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 1/1; display: block; } .colls.big .coll { aspect-ratio: 3/2; } .coll span { position: absolute; inset: auto 0 0 0; padding: 10px; color: #fff; font-weight: 700; font-size: 13px; font-family: var(--font-head); background: linear-gradient(transparent, rgba(0,0,0,.6)); } @container (min-width: 640px) { .colls { grid-template-columns: repeat(4, 1fr); } .colls.big { grid-template-columns: repeat(3, 1fr); } .colls.big .coll { aspect-ratio: 4/5; } } @container (min-width: 1000px) { .colls { grid-template-columns: repeat(5, 1fr); } } /* -------------------------------------------------------------- CARRUSEL -- */ .car { display: flex; gap: var(--gap); overflow-x: auto; padding: 2px var(--pad) 6px; scroll-snap-type: x mandatory; scrollbar-width: none; } .car::-webkit-scrollbar { display: none; } .car > * { flex: 0 0 44%; scroll-snap-align: start; } @container (min-width: 640px) { .car > * { flex-basis: 23%; } } @container (min-width: 1000px) { .car > * { flex-basis: 18%; } } /* ----------------------------------------------------------------- GRIDS -- */ .grid { display: grid; gap: var(--gap); padding: 0 var(--pad); grid-template-columns: repeat(2, 1fr); } .grid.editorial { gap: calc(var(--gap) * 1.6); } @container (min-width: 640px) { .grid { grid-template-columns: repeat(4, 1fr); } .grid.editorial { grid-template-columns: repeat(3, 1fr); } } @container (min-width: 1000px) { .grid { grid-template-columns: repeat(6, 1fr); } .grid.editorial { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------ TARJETAS (4 variantes, misma data) -- */ .card { background: var(--c-surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--c-border); position: relative; display: block; } .card .ph { aspect-ratio: 1/1; position: relative; background-size: cover; background-position: center; } .card .body { padding: 9px; } .card .nm { font-size: 12.5px; line-height: 1.32; margin: 0 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .precio { font-weight: 800; font-size: 15px; color: var(--c-text); font-family: var(--font-head); } .antes { font-size: 11px; color: var(--c-muted); text-decoration: line-through; margin-left: 5px; } .meta { font-size: 10.5px; color: var(--c-muted); margin-top: 4px; display: flex; gap: 6px; align-items: center; } .badge { position: absolute; top: 7px; left: 7px; background: var(--c-accent); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 5px; letter-spacing: .03em; } .badge.oscuro { background: rgba(0,0,0,.72); } .apart { font-size: 10px; color: var(--c-primary); border: 1px dashed var(--c-primary); border-radius: 4px; padding: 2px 5px; display: inline-block; margin-top: 6px; font-weight: 600; } .card.compact { border: 0; } .card.compact .body { padding: 7px 8px 10px; } .card.compact .nm { font-size: 11.5px; color: var(--c-muted); } .card.compact .precio { font-size: 17px; color: var(--c-accent); } .card.edit { background: transparent; border: 0; border-radius: 0; } .card.edit .ph { aspect-ratio: 3/4; border-radius: calc(var(--r) * .5); overflow: hidden; } .card.edit .body { padding: 11px 2px 0; text-align: center; } .card.edit .nm { font-size: 13px; -webkit-line-clamp: 1; font-family: var(--font-head); } .card.edit .precio { font-size: 13.5px; font-weight: 600; } .lista { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--pad); } @container (min-width: 1000px) { .lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } } .fila { display: flex; gap: 11px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r); padding: 9px; align-items: center; } .fila .ph { width: 76px; height: 76px; flex: 0 0 76px; border-radius: calc(var(--r) * .6); background-size: cover; background-position: center; } .fila .body { flex: 1; min-width: 0; padding: 0; } .fila .nm { font-size: 13px; -webkit-line-clamp: 2; margin-bottom: 3px; } .fila .act { flex: 0 0 auto; background: var(--c-primary); color: var(--c-on-primary); border: 0; border-radius: calc(var(--r) * .6); padding: 9px 12px; font-size: 12px; font-weight: 700; } /* ------------------------------------------------------ PROMO / HOT SALE -- */ .promo { margin: 0 var(--pad); border-radius: var(--r); padding: 16px; color: #fff; background: linear-gradient(100deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 45%, var(--c-primary))); display: flex; flex-direction: column; gap: 11px; } .promo .lbl { font-size: 10.5px; letter-spacing: .16em; opacity: .9; font-weight: 700; } .promo h3 { margin: 0; font-size: 23px; font-weight: 900; line-height: 1.05; } .promo p { margin: 0; font-size: 12.5px; opacity: .92; } .reloj { display: flex; gap: 6px; align-items: center; } .reloj b { background: rgba(0,0,0,.28); border-radius: 6px; padding: 6px 8px; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; } .reloj i { font-style: normal; font-size: 11px; opacity: .8; } @container (min-width: 640px) { .promo { flex-direction: row; align-items: center; justify-content: space-between; padding: 22px 26px; } .promo h3 { font-size: 30px; } } /* -------------------------------------------------------------- EDITORIAL -- */ .rich { padding: calc(var(--gap) * 1.4) var(--pad); text-align: center; max-width: 62ch; margin: 0 auto; } .rich h3 { font-size: 19px; margin: 0 0 8px; font-weight: 800; } .rich p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.62; } @container (min-width: 640px) { .rich h3 { font-size: 26px; } .rich p { font-size: 15px; } } /* ------------------------------------------------------------ TESTIMONIOS -- */ .revs { display: grid; gap: var(--gap); padding: 0 var(--pad); grid-template-columns: 1fr; } @container (min-width: 640px) { .revs { grid-template-columns: repeat(3, 1fr); } } .rev { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r); padding: 14px; } .rev .estrellas { color: #f5a623; font-size: 12px; letter-spacing: 1px; } .rev p { margin: 7px 0 9px; font-size: 13px; line-height: 1.5; } .rev cite { font-size: 11.5px; color: var(--c-muted); font-style: normal; } /* ------------------------------------------------------------ NEWSLETTER -- */ .news { margin: calc(var(--gap) * 1.5) var(--pad) 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r); padding: 20px; text-align: center; } .news h3 { margin: 0 0 6px; font-size: 17px; } .news p { margin: 0 0 13px; font-size: 12.5px; color: var(--c-muted); } .news form { display: flex; gap: 7px; max-width: 390px; margin: 0 auto; } .news input { flex: 1; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); border-radius: calc(var(--r) * .7); padding: 11px; font-size: 13px; min-width: 0; } /* ---------------------------------------------------------------- FOOTER -- */ .ftr { margin-top: calc(var(--gap) * 2); background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 22px var(--pad) 26px; } .ftr .cols { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @container (min-width: 640px) { .ftr .cols { grid-template-columns: repeat(4, 1fr); } } .ftr h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 9px; color: var(--c-muted); } .ftr ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; color: var(--c-muted); } .ftr .legal { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-muted); text-align: center; } .pagos { display: flex; gap: 5px; justify-content: center; margin-top: 9px; flex-wrap: wrap; } .pagos span { border: 1px solid var(--c-border); border-radius: 4px; padding: 3px 7px; font-size: 9.5px; color: var(--c-muted); } /* ------------------------------------------------- NAV INFERIOR (móvil) --- */ .bnav { position: sticky; bottom: 0; z-index: 30; display: flex; background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 7px 0 9px; } .bnav a { flex: 1; text-align: center; font-size: 9.5px; color: var(--c-muted); } .bnav a u { display: block; font-size: 16px; text-decoration: none; margin-bottom: 1px; } .bnav a[aria-current] { color: var(--c-primary); font-weight: 600; } .espaciador { height: 14px; } @container (min-width: 640px) { .bnav { display: none; } } /* ------------------------------------------------------ FICHA DE PRODUCTO -- */ .ficha { display: grid; gap: var(--gap); padding: var(--gap) var(--pad); } @container (min-width: 900px) { .ficha { grid-template-columns: 1.1fr 1fr; gap: 32px; } } /* El fondo vive en .marco porque es el único punto que el JS toca al cambiar de miniatura; .principal lo hereda. Por eso .marco necesita también contain y no-repeat: con los valores por omisión pintaba la foto a tamaño natural y repetida, y eso asomaba en cuanto .principal dejó de ser opaco. */ .ficha .galeria .marco { aspect-ratio: 1/1; border-radius: var(--r); overflow: hidden; background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid var(--c-border); cursor: zoom-in; position: relative; } .ficha .galeria .principal { position: relative; width: 100%; height: 100%; background: inherit; /* `background: inherit` arrastra también el color del padre. Sin volverlo transparente aquí, .principal pinta un opaco a pantalla completa y tapa el fondo de la página en las franjas de una foto vertical. */ background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; } .ficha .galeria .tiras { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; } .ficha .galeria .tiras .tira { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; background-size: cover; background-position: center; cursor: pointer; border: 2px solid transparent; } .ficha .galeria .tiras .tira.activo { border-color: var(--c-primary); } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; } .ficha h1 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; font-weight: 800; } @container (min-width: 900px) { .ficha h1 { font-size: 27px; } } .ficha .precios { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .ficha .precios .precio { font-size: 28px; } .ficha .desc { color: var(--c-muted); font-size: 14px; line-height: 1.65; margin: 14px 0; } .ficha .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; } .ficha .acciones .btn { flex: 1 1 160px; text-align: center; border: 0; } .ficha .btn.sec { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-primary); } /* Va aquí y no junto a .btn.wa porque `.ficha .acciones .btn` pone border: 0 más abajo en el archivo y se lo comía. Verde un punto más oscuro que el fondo: dibuja el contorno sin dejar de ser el mismo botón. */ .ficha .btn.wa { border: 1.5px solid #1da851; } .atributos { border-top: 1px solid var(--c-border); margin-top: 16px; padding-top: 14px; } .atributos dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; } .atributos dt { color: var(--c-muted); } .atributos dd { margin: 0; } .aviso-apartado { background: var(--c-surface); border: 1px dashed var(--c-primary); border-radius: var(--r); padding: 12px; font-size: 12.5px; margin: 14px 0; } .aviso-apartado b { color: var(--c-primary); } /* ---------------------------------------------------------------- VACÍOS -- */ .vacio { padding: 48px var(--pad); text-align: center; color: var(--c-muted); } .vacio h2 { font-family: var(--font-head); color: var(--c-text); font-size: 19px; margin: 0 0 8px; } /* ------------------------------------------------- MODO DE VENTA ---------- */ /* Algunos productos no se compran desde el sitio: se preguntan al vendedor. La tarjeta y la ficha lo dicen antes de que el cliente busque el carrito. */ .apart.contacto { color: var(--c-accent); border-color: var(--c-accent); border-style: solid; } .nota-venta { display: inline-block; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: calc(var(--r) * .6); padding: 6px 11px; font-size: 12.5px; color: var(--c-muted); margin: 10px 0 0; } .pie-contacto { font-size: 12.5px; color: var(--c-muted); margin: 4px 0 0; max-width: 52ch; } /* ------------------------------------------------ PORTADA DE PLATAFORMA -- */ /* El home de novasites.shop, no el de una tienda. Deliberadamente sobrio: quien llega aquí viene a encontrar una tienda, no a que le vendan algo. */ .portada { padding: 44px var(--pad) 26px; text-align: center; } .portada h1 { font-family: var(--font-head); font-size: 27px; letter-spacing: -.02em; margin: 0 0 6px; color: var(--c-text); } .portada h1 span { color: var(--c-muted); font-weight: 400; } .portada p { margin: 0; color: var(--c-muted); font-size: 13.5px; } .fila .desc { font-size: 12px; color: var(--c-muted); margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* WhatsApp: color de marca fijo (#25D366) para que se reconozca al instante, independiente del color primario de la tienda. */ .ico.wa { background: #25D366; color: #fff; text-decoration: none; font-size: 15px; } .ico.wa:hover { filter: brightness(1.08); }