/* ============================================================ Veta · configurador de lámparas El color de la marca vive en --acento; el producto sigue mandando. Dos paletas (data-tema), atadas al modo día/noche (17-sep): Greda de día, Basalto de noche. app.js las cambia. ============================================================ */ /* ------------------------------------------------------------ PALETAS · se cambian con REGLA QUE MANDA: los renders traen el fondo horneado en #EFEBE4. El fondo de la página TIENE que separarse de ese valor, o cada lámpara se disuelve en la página. (Ese era el problema: el fondo era #F0EEE9, a 3 puntos del render.) ------------------------------------------------------------ */ /* Fallback sin data-tema: claro, y oscuro si el sistema lo pide. */ :root{ --paper:#E3DACB; --paper-2:#F5F0E7; --ink:#2A241C; --ink-soft:#615746; --line:#CEC3B0; --field:#D8CEBC; --acento:#9A4A1B; --acento-ink:#FFFFFF; --marco:#FBFAF7; --marco-linea:#E0D8CA; --focus:var(--ink); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-tema]){ --paper:#17150F; --paper-2:#211E16; --ink:#F2EDE3; --ink-soft:#A79C8B; --line:#322D23; --field:#262218; --acento:#E0A54A; --acento-ink:#17150F; --marco:#FAF9F6; --marco-linea:#3A3428; } } :root[data-theme="dark"]:not([data-tema]){ --paper:#17150F; --paper-2:#211E16; --ink:#F2EDE3; --ink-soft:#A79C8B; --line:#322D23; --field:#262218; --acento:#E0A54A; --acento-ink:#17150F; --marco:#FAF9F6; --marco-linea:#3A3428; } /* 1 · BASALTO — oscuro cálido, acento ámbar (la luz misma). Es lo que hacen las marcas premium de iluminación: fondo oscuro para que la lámpara encendida brille de verdad. */ :root[data-tema="basalto"]{ --paper:#17150F; --paper-2:#211E16; --ink:#F2EDE3; --ink-soft:#A79C8B; --line:#322D23; --field:#262218; --acento:#E0A54A; --acento-ink:#17150F; --marco:#FAF9F6; --marco-linea:#3A3428; } /* 2 · GREDA — yeso cálido, acento ocre quemado. El neutro cálido que domina 2026: caramelo, plaster, arcilla. */ :root[data-tema="greda"]{ --paper:#E3DACB; --paper-2:#F5F0E7; --ink:#2A241C; --ink-soft:#615746; --line:#CEC3B0; --field:#D8CEBC; --acento:#9A4A1B; --acento-ink:#FFFFFF; --marco:#FBFAF7; --marco-linea:#E0D8CA; } *{box-sizing:border-box} body,.top,.anuncio{transition:background-color .35s ease, color .35s ease} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:1120px; margin:0 auto; padding:0 24px} img{display:block; max-width:100%} b{font-weight:500} h1,h2,.marca,.nom,.precio{ font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; letter-spacing:-.015em; text-wrap:balance; } /* títulos de sección del catálogo */ #destacados h2,#catalogo h2,#catalogo-colgantes h2{font-size:22px; margin:44px 0 20px} #destacados h2{margin-top:30px} #destacados:not([hidden]) + #catalogo h2:first-child{margin-top:44px} #catalogo h2:first-child{margin-top:30px} /* nombre del producto en la ficha */ #f-nombre{font-size:34px; margin:0; line-height:1.05} .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .eyebrow,.lab,.spec,.med,.claim,.fino,.volver,.nota{ font-family:"Spline Sans Mono","SFMono-Regular",ui-monospace,monospace; } /* ---- banda de portada (video de ambientación) ---- Va full-bleed arriba del header. La altura se recorta con object-fit:cover en vez de dejar el 16:9 entero, que en desktop se comería media pantalla antes de mostrar una sola lámpara. Editable: el clamp de abajo es alto mínimo / ideal / máximo. */ .portada{ margin:0; position:relative; background:var(--paper-2); border-bottom:1px solid var(--line); } /* El alto va en proporción al ancho, NO en píxeles fijos. Con un tope en px (400) pasaba esto: el video escala con el ancho de la pantalla, así que en un monitor grande el recuadro se quedaba chico y recortaba cada vez más — a 1512 px se veía menos de la mitad del cuadro y los colgantes quedaban cortados. Con 36vw el recorte es siempre el mismo (~63% del cuadro) en cualquier monitor; 62vh es el freno para que en una pantalla baja la portada no se coma todo antes del catálogo. El 58% vertical elige QUÉ se recorta: deja los cables arriba y llega hasta la encimera abajo. */ .portada-media{ width:100%; height:clamp(220px,36vw,62vh); object-fit:cover; object-position:50% 58%; } .portada-fija{display:none} /* solo aparece con movimiento reducido */ .portada-nota{ position:absolute; left:0; right:0; bottom:0; padding:30px 0 9px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.03em; color:#FFFFFF; text-shadow:0 1px 3px rgba(0,0,0,.55); /* velo oscuro apenas perceptible: la encimera encendida es clara y sin esto el texto blanco se pierde justo ahí */ background:linear-gradient(to top,rgba(0,0,0,.6) 35%,rgba(0,0,0,0)); pointer-events:none; } .portada-nota .wrap{display:block} /* para que alinee con el logo */ /* Quien pide "reducir movimiento" ve la imagen fija y el video ni se reproduce. El .jpg es el mismo archivo del poster, así que no pesa. */ @media (prefers-reduced-motion:reduce){ .portada-video{display:none} .portada-fija{display:block} } @media (max-width:560px){ .portada-media{height:clamp(160px,46vw,240px)} } /* Al bajar a una sección (menú, líneas, botones del hero) el título queda BAJO el header pegajoso y la barra de anuncio si no se deja este margen. */ main > section{scroll-margin-top:calc(var(--anuncio-h,31px) + 74px)} @media (max-width:780px){ main > section{scroll-margin-top:70px} } /* ---- barra de anuncio (17-sep) ---- */ .anuncio{ position:sticky; top:0; z-index:6; background:var(--ink); color:var(--paper); text-align:center; } .anuncio p{ margin:0 auto; padding:8px 24px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.06em; line-height:1.4; } @media (max-width:780px){ .anuncio{position:static} /* en celular no se lleva la pantalla */ .anuncio p{font-size:10.5px; padding:8px 16px; letter-spacing:.03em} } /* ---- bloque de las páginas estáticas (generar_paginas.py): texto para el buscador; app.js lo saca al arrancar. Discreto por si alcanza a verse. ---- */ .prerender{padding:24px 0; color:var(--ink-soft); font-size:14px} .prerender h1{margin:4px 0; font-size:28px; color:var(--ink)} .prerender img{max-width:320px; width:100%; height:auto; border-radius:3px} /* ---- header ---- */ .top{ position:sticky; top:var(--anuncio-h,33px); z-index:5; background:var(--paper); border-bottom:1px solid var(--line); } .top-in{display:flex; align-items:center; justify-content:space-between; padding:16px 24px 12px} .marca{ font-size:21px; text-decoration:none; letter-spacing:0; display:inline-flex; align-items:center; color:var(--ink); } .marca-svg{height:34px; width:auto; display:block} /* 16-sep: la marca manda en el header */ .marca:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:2px} .claim{ margin:0; padding-bottom:14px; color:var(--ink-soft); font-size:12px; line-height:1.5; max-width:62ch; } .luz{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:2px; overflow:hidden} .luz-lbl{ display:flex; align-items:center; padding:0 10px 0 12px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); border-right:1px solid var(--line); } .visor .luz .luz-lbl{color:#D5CCBC; border-right-color:rgba(242,237,227,.30)} .luz button{ border:0; background:transparent; padding:8px 15px; cursor:pointer; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); } .luz button.on{background:var(--acento); color:var(--acento-ink)} /* ---- las 4 líneas ---- */ .lineas{ display:grid; gap:14px; margin:0 0 12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .linea{ display:grid; gap:5px; text-align:left; cursor:pointer; background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:16px 16px 15px; font:inherit; color:inherit; transition:border-color .15s ease; } .linea:hover{border-color:var(--acento)} .linea.on{border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); background:var(--paper-2)} .linea:focus-visible{outline:2px solid var(--focus); outline-offset:3px} .linea-sw{display:flex; gap:6px; margin-bottom:4px} .linea-sw .pip{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.14); } .linea-nom{ font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; font-size:16px; letter-spacing:-.015em; } .linea-par{ font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); } .linea-txt{color:var(--ink-soft); font-size:12.5px; line-height:1.45} /* ---- catálogo ---- */ .grilla{ display:grid; gap:32px 24px; margin:0 0 64px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); } .card{cursor:pointer; background:none; border:0; padding:0; text-align:left; text-decoration:none; color:inherit; display:block; font:inherit; color:inherit; width:100%} .card .mat{ background:var(--marco); border:1px solid var(--marco-linea); border-radius:3px; aspect-ratio:1/1; overflow:hidden; transition:border-color .15s ease; } .card .mat img{width:100%; height:100%; object-fit:cover; transition:opacity .18s ease} .card:hover .mat{border-color:var(--acento)} .card:focus-visible{outline:2px solid var(--focus); outline-offset:3px} .card .nom{font-size:19px; margin:13px 0 3px} .card .d{color:var(--ink-soft); font-size:13.5px; margin:0 0 11px; min-height:2.7em} .card .row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-top:1px solid var(--line); padding-top:9px; font-size:11px; letter-spacing:.03em; } .card .med{color:var(--ink-soft); text-transform:uppercase} .card .pr{color:var(--ink); font-variant-numeric:tabular-nums} .card .pr-nota{ display:block; text-align:right; margin-top:3px; color:var(--ink-soft); font-size:10.5px; letter-spacing:.02em; } /* ---- ficha / configurador ---- */ .volver{ border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:26px 0 4px; } .volver:hover{color:var(--ink)} .ficha-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; padding-bottom:72px; } .col-img{display:flex; flex-direction:column; gap:16px; align-self:start} .visor{margin:0} .visor img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px; background:var(--marco); border:1px solid var(--marco-linea); transition:opacity .18s ease; } .foto-real{margin:0} .foto-real img{ width:100%; height:auto; border-radius:3px; border:1px solid var(--marco-linea); background:var(--marco); display:block; } .foto-real figcaption{ margin-top:8px; color:var(--ink-soft); font-size:11px; line-height:1.45; font-family:"Spline Sans Mono",ui-monospace,monospace; letter-spacing:.01em; } .panel{padding-top:4px} .eyebrow{ margin:0 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .desc{color:var(--ink-soft); margin:12px 0 4px; max-width:42ch} .spec{ color:var(--ink-soft); font-size:11px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 30px; } .grupo{margin-bottom:26px} .lab{ margin:0 0 12px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); } .lab .val{color:var(--ink)} .swatches{display:flex; gap:12px; flex-wrap:wrap} .sw{ width:36px; height:36px; border-radius:50%; cursor:pointer; padding:0; border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 0 0 3px var(--paper-2); } .sw.sel{outline:2px solid var(--acento); outline-offset:3px} .sw:focus-visible{outline:2px solid var(--focus); outline-offset:3px} .sw.pronto{opacity:.55} .sw.pronto.sel{opacity:1} .desc-color{ margin:12px 0 0; color:var(--ink-soft); font-size:12.5px; line-height:1.45; max-width:40ch; } .lab .val i{font-style:normal; color:var(--ink-soft); font-size:.85em} /* ---- sistemas de luz ---- */ .opts{display:grid; gap:8px} .opt{ display:grid; gap:3px; text-align:left; cursor:pointer; width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:11px 13px; font:inherit; color:inherit; transition:border-color .15s ease; } .opt:hover{border-color:var(--ink-soft)} .opt.sel{border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento)} .opt:focus-visible{outline:2px solid var(--focus); outline-offset:2px} .op-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px} .op-nom{font-size:13.5px; font-weight:500} .op-costo{ font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.02em; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; } .opt.sel .op-costo{color:var(--ink)} .op-desc{color:var(--ink-soft); font-size:12px; line-height:1.4} .aviso{ margin:4px 0 26px; padding:11px 13px; border:1px solid var(--line); border-radius:3px; background:var(--paper-2); color:var(--ink-soft); font-size:11.5px; line-height:1.5; font-family:"Spline Sans Mono",ui-monospace,monospace; letter-spacing:.01em; } /* ---- modo de compra (completa / solo pantalla) ---- */ .modos{display:flex; gap:0; border:1px solid var(--line); border-radius:2px; overflow:hidden} .modos button{ flex:1; border:0; background:transparent; padding:9px 12px; cursor:pointer; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); } .modos button + button{border-left:1px solid var(--line)} .modos button.on{background:var(--acento); color:var(--acento-ink)} .compat{ margin:-6px 0 22px; padding:10px 12px; border-left:2px solid var(--line); color:var(--ink-soft); font-size:12px; line-height:1.5; max-width:44ch; } .cross{ margin:14px 0 0; padding:11px 13px; border:1px dashed var(--line); border-radius:3px; color:var(--ink); font-size:12.5px; line-height:1.5; } .hermano{margin:12px 0 0} .hermano a{ color:var(--acento); font-size:12.5px; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; } .hermano a:hover{border-color:var(--ink)} /* ---- bloque "cambia la pantalla" en portada ---- */ #recambio-intro{margin:40px 0 8px; padding:22px 0 4px; border-top:1px solid var(--line)} #recambio-intro h2{margin:0 0 8px; font-size:22px} #recambio-intro p{margin:0; color:var(--ink-soft); font-size:13.5px; max-width:60ch} .cierre{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px; margin-top:32px; } .precio-box{display:grid; gap:3px} .precio{font-size:27px; font-variant-numeric:tabular-nums} .precio-det{ margin:0; color:var(--ink-soft); font-size:11px; line-height:1.4; font-family:"Spline Sans Mono",ui-monospace,monospace; letter-spacing:.01em; max-width:34ch; } .pedir{ background:var(--acento); color:var(--acento-ink); text-decoration:none; padding:13px 24px; border-radius:2px; font-weight:500; font-size:14px; } .pedir:hover{opacity:.88} .pedir:focus-visible{outline:2px solid var(--focus); outline-offset:3px} .pedir.off{ background:var(--field); color:var(--ink-soft); cursor:default; pointer-events:none; font-size:12px; letter-spacing:.02em; } .nota{color:var(--ink-soft); font-size:11px; letter-spacing:.02em; margin:14px 0 0} /* ---- pie ---- */ .pie{border-top:1px solid var(--line); padding:24px 0 56px} .pie p{margin:0; color:var(--ink-soft); font-size:12px} .pie .fino{opacity:.7; margin-top:3px; font-size:11px} @media (max-width:780px){ .ficha-in{grid-template-columns:1fr; gap:24px} #f-nombre{font-size:28px} .top{top:0} } @media (prefers-reduced-motion:reduce){ *{transition:none !important} } /* ---- packs de la portada ---- */ #packs{margin:0 0 44px} #packs h2{margin:0 0 6px} .packs-intro{ color:var(--ink-soft); font-size:13.5px; line-height:1.55; max-width:56ch; margin:0 0 18px; } .packs-grilla{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .pack{ background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:16px 17px 18px; display:flex; flex-direction:column; } /* un pack al que todavía no le sacamos la foto: el texto se centra para que no quede un hueco debajo, al lado de las tarjetas que sí tienen */ .pack.sin-img{justify-content:center} /* la ambientación del pack: va arriba, saliéndose del padding de la tarjeta para que llegue hasta los bordes */ .pack-img{ display:block; margin:-16px -17px 14px; border-bottom:1px solid var(--line); border-radius:3px 3px 0 0; overflow:hidden; background:var(--paper); } .pack-img img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; } .pack h3{margin:0; font-size:15px} .pack-p{ margin:7px 0 0; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:20px; color:var(--acento); font-variant-numeric:tabular-nums; } .pack-d{margin:8px 0 0; color:var(--ink-soft); font-size:12.5px; line-height:1.5} /* ---- cuántas pantallas (colgantes) ---- */ .opt-n{font-size:13.5px; font-weight:500} .opt-p{ font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums; } .opt-p em{font-style:normal; color:var(--acento); font-size:11.5px} .opt-d{color:var(--ink-soft); font-size:12px; line-height:1.4} /* ---- aviso del pack elegido ---- */ .pack-nota{ margin:-6px 0 20px; padding:10px 12px; border-left:2px solid var(--acento); color:var(--ink); font-size:12.5px; line-height:1.5; max-width:46ch; } /* ---- altura: velador / mesa alta ---- */ #grupo-alto .opt-nota{color:var(--ink-soft); font-size:12px} /* ---- ambientación (imagen generada, va primero) ---- */ .ambiente{margin:0 0 18px} .ambiente img{ width:100%; display:block; border-radius:3px; background:var(--field); aspect-ratio:1; object-fit:cover; } .ambiente figcaption{ margin-top:8px; color:var(--ink-soft); font-size:11.5px; line-height:1.5; max-width:52ch; } .visor-cap{ color:var(--ink-soft); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; } /* ---- atribución del diseño (obligatoria por licencia) ---- */ .credito{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:12px; line-height:1.5; } .credito a{color:var(--ink-soft); text-decoration:underline} .credito a:hover{color:var(--acento)} /* ---- colores de base que van a pedido ---- */ .base-otros{ margin:6px 0 0; color:var(--ink-soft); font-size:11.5px; line-height:1.5; font-style:italic; } /* ============================================================ REDISEÑO CINEMATOGRÁFICO · agregado sep-2026 Va todo AL FINAL a propósito: así pisa lo de arriba sin tocar una sola línea de lo anterior. Si algo no gusta, se borra este bloque completo y la página vuelve exactamente a como estaba. Tres ideas: 1. La portada ocupa la pantalla y el texto va ENCIMA del video. 2. El header queda flaco: solo la marca y el día/noche. 3. La ficha respira más y el precio pesa lo que tiene que pesar. ============================================================ */ /* ---- 1 · la portada es la pantalla ---- */ .portada{border-bottom:0; background:#0F0E0A} /* El alto sube de 36vw a 78vh. Sigue siendo proporcional, no un número fijo: en un monitor grande se ve el mismo encuadre. */ .portada-media{ height:clamp(460px,78vh,860px); object-position:50% 54%; } /* Velo oscuro. Sin esto el texto blanco desaparece justo sobre la encimera encendida, que es la parte más clara del cuadro. */ .portada::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(180deg, rgba(10,9,6,.80) 0%, rgba(10,9,6,.16) 30%, rgba(10,9,6,.52) 68%, rgba(10,9,6,.95) 100%); } .portada-txt{ position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; pointer-events:none; /* el clic pasa al video... */ } .portada-txt a{pointer-events:auto} /* ...menos en el botón */ .portada-txt-in{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-bottom:clamp(30px,4.6vw,66px); } .portada-eyebrow{ margin:0; color:var(--acento); font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; } .portada-titulo{ margin:0; color:#FFFCF6; font-size:clamp(32px,5.4vw,72px); line-height:.99; letter-spacing:-.022em; text-wrap:balance; font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; text-shadow:0 2px 26px rgba(0,0,0,.42); } .portada-bajada{ margin:0; color:#E7E0D3; font-size:clamp(14.5px,1.25vw,17px); line-height:1.55; max-width:46ch; text-shadow:0 1px 12px rgba(0,0,0,.5); } .portada-cta-fila{margin:6px 0 0; display:flex; gap:10px; flex-wrap:wrap} .portada-cta{ display:inline-block; background:var(--acento); color:var(--acento-ink); text-decoration:none; padding:15px 30px; border-radius:2px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; } .portada-cta:hover{opacity:.9} .portada-cta.sec{ background:rgba(23,21,15,.35); color:#FFFCF6; box-shadow:inset 0 0 0 1px rgba(255,252,246,.7); backdrop-filter:blur(4px); } .portada-cta:focus-visible{outline:2px solid #FFFCF6; outline-offset:3px} .portada-fuente{ margin:2px 0 0; color:rgba(255,252,246,.62); font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.03em; text-shadow:0 1px 4px rgba(0,0,0,.6); } /* En celular el titular necesita aire: la portada crece en vez de achicarse. Un hero de 240 px con texto encima no se lee. */ @media (max-width:560px){ .portada-media{height:clamp(480px,118vw,660px)} .portada-txt-in{gap:13px} .portada-cta{padding:14px 24px} } /* ---- 2 · el header, flaco ---- */ .top-in{padding:13px 24px} .marca-svg{height:28px} .luz button{padding:7px 14px; font-size:10.5px} /* ---- 3 · catálogo: un poco más de aire y foco en la imagen ---- */ #destacados h2,#catalogo h2,#catalogo-colgantes h2{font-size:25px; margin:56px 0 22px} #catalogo h2:first-child{margin-top:44px} .grilla{gap:38px 26px} .card .mat img{transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .18s ease} .card:hover .mat img{transform:scale(1.035)} .card .nom{font-size:20px} /* ---- 4 · la ficha respira ---- */ .ficha-in{gap:52px} #f-nombre{font-size:clamp(30px,3.4vw,46px)} .visor-cap{margin-bottom:9px; letter-spacing:.09em} .cierre{ align-items:flex-end; padding-top:26px; margin-top:38px; border-top-color:var(--acento); } .precio{ font-size:38px; letter-spacing:-.025em; font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; } .pedir{ padding:17px 30px; border-radius:2px; font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; } /* ---- 6 · el catálogo, como el book ---- Tarjetas más grandes (3 por fila en vez de 4), título con la cuenta al lado, y la baldosa "ver todas" cerrando la tanda. */ .grilla{grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:40px 26px} .cat-tit{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; } .cat-cuenta{ font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; font-weight:400; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); opacity:.8; } /* la baldosa que abre el resto del grupo */ .mas{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:13px; aspect-ratio:1/1; width:100%; cursor:pointer; text-align:left; background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:0 30px; font:inherit; color:var(--ink); transition:border-color .15s ease, background .15s ease; } .mas:hover{border-color:var(--acento); background:var(--field)} .mas:focus-visible{outline:2px solid var(--focus); outline-offset:3px} .mas-n{ font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif; font-weight:600; font-size:27px; line-height:1.08; letter-spacing:-.015em; text-wrap:balance; } .mas-ver{ font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acento); } .mas-ver::after{content:" →"} /* la medida se apaga un poco: el precio es lo que se busca */ .card .med{opacity:.75} /* ---- 7 · el pie, en el mismo tono que el resto ---- */ .pie{padding:34px 0 60px} .pie p{ font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.03em; line-height:1.75; } /* ---- 8 · EL ARREGLO IMPORTANTE ---- .mat es un . Un span es texto en linea, asi que el navegador IGNORA aspect-ratio, la altura y el overflow:hidden: el marco cuadrado no existia y la imagen se dibujaba del alto que queria. Resultado: la tarjeta medía 445 px pero su contenido 590, y esos 145 px de sobra caían encima de la tarjeta de abajo, tapando el nombre, la descripción y el precio. Con display:block el span pasa a ser una caja de verdad y las tres reglas vuelven a valer. (Esto también pasa en la web actual.) */ .card .mat{display:block} /* La tarjeta en columna: así crece siempre hasta donde llega su contenido, sin depender de cómo un