/* g2 Cenefa: la pared de tiras de home, nosotros y FAQ. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } :root { --mz: 54px; --pad: 20px; --riel: cubic-bezier(.7, 0, .2, 1.12); } body { overflow-x: clip; } .muro { overflow-x: clip; } .btn-claro { background: #fff; color: var(--noche); } .btn-claro:hover { background: var(--perla); } .tit, .muro h2, .muro h3 { font-family: var(--display); font-weight: 800; } /* Corte: tipografía grande rebanada por tiras. --al alto de la tira y --de desde dónde corta, en unidades de --fs */ .corte { --fs: 10vw; --tope: .03; } .rb { position: relative; height: calc(var(--fs) * var(--al)); overflow: hidden; background: var(--perla); color: var(--marino); } .rb-inv { background: var(--marino); color: var(--perla); } .rb-nie { background: var(--niebla); color: var(--marino); } .rb-mar { background: var(--marino); color: var(--perla); } .rb-noc { background: var(--noche); color: var(--perla); } .rb-c { position: absolute; inset: 0; will-change: transform; } .rb-t { position: absolute; left: var(--pad); top: calc(var(--fs) * (var(--tope) - var(--de))); font: 800 var(--fs)/.656 var(--display); padding-top: .028em; white-space: nowrap; } .rb-mas { margin-left: .28em; } .rb-ant { position: absolute; right: 100%; margin-right: .28em; } .sm { display: none; } /* Entrada de la home: una sola vez, por CSS, para no depender de JS */ .corte-h .rb:nth-child(odd) .rb-t { animation: entra-der .78s cubic-bezier(.16, .84, .24, 1) .12s backwards; } .corte-h .rb:nth-child(even) .rb-t { animation: entra-izq .62s cubic-bezier(.16, .84, .24, 1) backwards; } .corte-h .rb:nth-child(3) .rb-t { animation-delay: .22s; animation-duration: .9s; } html.persiana-llega .corte-h .rb-t { animation-play-state: paused; } @keyframes entra-der { from { transform: translateX(46%); } } @keyframes entra-izq { from { transform: translateX(-46%); } } /* Cinta: sin motion es un renglón con desplazamiento nativo */ .cinta { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cinta::-webkit-scrollbar { display: none; } .cinta-in { display: flex; flex: none; } .cinta.viva { overflow: clip; } .cinta.viva .cinta-in { will-change: transform; } /* HERO */ .h { --fs: min(26vw, 40svh); --cabeza: 96px; --etq: 78px; display: flex; flex-direction: column; background: var(--perla); } .corte-h { --fs: inherit; } .h-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px; align-items: center; min-height: var(--cabeza); padding: 8px var(--pad); background: var(--placa); } .h-cabeza h1 { font: 800 clamp(42px, 5.6vw, 84px)/.92 var(--display); color: var(--marino); } .h-lado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; } .h-lado p { font-size: 15px; line-height: 1.35; color: var(--acero); max-width: 36ch; } .estante { --fh: max(170px, calc(100svh - 28px - var(--cab) - var(--mz) - var(--cabeza) - var(--fs) * .716 - var(--etq))); background: var(--perla); } .go { display: flex; flex-direction: column; flex: none; width: calc(var(--fh) * .84 + 40px); min-width: 190px; text-decoration: none; color: inherit; } .go-foto { display: block; height: var(--fh); padding: 12px 16px 0; overflow: hidden; } .go-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .3s cubic-bezier(.3, 0, .1, 1); } .go:hover .go-foto img { transform: translateY(-6px); } .go-etq { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; align-content: center; height: var(--etq); padding: 0 14px; background: var(--marino); color: #fff; border-left: 1px solid #2A4564; overflow: hidden; } .go-nom { grid-column: 1 / -1; font-size: 13px; color: #C8D3E0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-etq b { font: 800 34px/1 var(--display); } .go-etq small { font-size: 12px; color: #C8D3E0; text-align: right; white-space: nowrap; } .go:hover .go-etq { background: var(--noche); } .go:focus-visible { outline: 3px solid var(--mostaza); outline-offset: -3px; } /* Rollo de caracteres */ .rollo { position: relative; display: inline-block; white-space: nowrap; } .ch { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; } .ch > span { display: block; height: 1em; transition: transform .42s var(--riel); transition-delay: inherit; } .rueda .ch:not(.igual) > span { transform: translateY(-100%); } /* Tira mostaza: la única, quieta y pegada abajo */ .mostaza { position: sticky; bottom: 0; z-index: 22; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: var(--mz); padding: 0 var(--pad); background: var(--mostaza); color: var(--noche); } .mz-rollo { height: 36px; overflow: hidden; min-width: 0; } .mz-rollo ul { transition: transform .5s var(--riel); } .mz-rollo li { height: 36px; display: flex; align-items: center; font: 800 clamp(22px, 2.2vw, 31px)/1 var(--display); white-space: nowrap; } .mz-btn, .mz-enlace { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 0; border-radius: 2px; background: var(--noche); color: #fff; font: 700 14.5px/1 Figtree, sans-serif; text-decoration: none; white-space: nowrap; } .mz-btn:hover, .mz-enlace:hover { background: var(--marino); } .mostaza :focus-visible { outline: 2px solid var(--noche); outline-offset: 2px; } /* CATEGORÍAS */ .ci { position: relative; display: flex; align-items: center; gap: 16px; flex: none; padding: 0 34px 0 22px; text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(15, 39, 68, .16); } .ci::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--marino); transform: translateY(101%); transition: transform .26s cubic-bezier(.7, 0, .2, 1); } .ci:hover::before, .ci:focus-visible::before { transform: none; } .ci:hover, .ci:focus-visible { color: #fff; } .ci:focus-visible { outline: 3px solid var(--mostaza); outline-offset: -3px; } .ci span { font: 800 1em/1 var(--display); white-space: nowrap; } .ci small { font: 500 13px/1 Figtree, sans-serif; white-space: nowrap; align-self: flex-end; margin-bottom: 1.1em; opacity: .8; } .ci img { object-fit: contain; flex: none; } .c-a { background: var(--placa); color: var(--marino); } .c-a .ci { height: 150px; font-size: 92px; } .c-a .ci img { width: 124px; height: 130px; } .c-b { background: var(--noche); color: var(--perla); } .c-b .ci { height: 88px; font-size: 64px; border-right-color: rgba(255, 255, 255, .16); } .c-b .ci small { margin-bottom: .9em; } .c-b .ci::before { background: var(--marino); } .c-c { background: var(--niebla); color: var(--marino); } .c-c .ci { height: 208px; font-size: 136px; } .c-c .ci img { width: 176px; height: 186px; } .c-c .ci small { margin-bottom: 2.3em; } /* CARRILES CON ARRASTRE */ .carril-s { background: var(--perla); padding-top: 26px; } .carril-b { background: var(--placa); } .carril-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: end; padding: 0 var(--pad) 12px; } .carril-cab h2 { font-size: clamp(42px, 5vw, 76px); line-height: .95; color: var(--marino); } .carril-cab > a { font-size: 14.5px; font-weight: 600; color: var(--marino); text-underline-offset: 3px; padding-bottom: 8px; } .flechas { display: flex; gap: 4px; } .flechas button { width: 46px; height: 42px; border: 0; background: var(--marino); color: #fff; display: grid; place-items: center; } .flechas button:hover { background: var(--noche); } .flechas button:disabled { background: var(--niebla); color: #7A8798; cursor: default; } .carril { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 0; cursor: grab; } .carril::-webkit-scrollbar { display: none; } .carril.agarrado { cursor: grabbing; user-select: none; } .carril.agarrado a { pointer-events: none; } .carril:focus-visible { outline: 3px solid var(--marino); outline-offset: -3px; } .pieza { flex: none; width: 272px; display: flex; flex-direction: column; border-right: 1px solid #2A4564; } .pz-foto { display: block; height: 214px; padding: 12px 22px 0; } .pz-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .3s cubic-bezier(.3, 0, .1, 1); } .pz-foto:hover img { transform: translateY(-6px); } .pz-cenefa { display: flex; flex-direction: column; flex: 1; padding: 10px 14px 14px; background: var(--marino); color: #fff; } .pz-marca { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #C8D3E0; } .pz-marca b { font-weight: 700; color: #fff; } .pz-marca span { color: var(--noche); background: var(--perla); padding: 0 6px; font-weight: 700; font-size: 12px; } .pz-nom { height: 40px; margin-top: 3px; font: 500 14px/20px Figtree, sans-serif !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .pz-precio { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; height: 46px; } .pz-precio .rollo { font: 800 44px/1 var(--display); } .pz-precio small { font-size: 12px; color: #C8D3E0; white-space: nowrap; } .pz-slot { height: 40px; margin-top: 6px; } .pz-ver { width: 100%; height: 40px; border: 1px solid #5F7894; background: none; color: #fff; font-weight: 600; font-size: 13.5px; } .pz-ver:hover { border-color: #fff; } .pz-esc { display: none; grid-template-columns: repeat(3, 1fr); height: 40px; border: 1px solid #5F7894; } .con-sesion .pz-esc { display: grid; } .con-sesion .pz-ver { display: none; } .pz-esc button { border: 0; background: none; color: #E6ECF3; font-size: 13px; font-weight: 600; padding: 0; } .pz-esc button + button { border-left: 1px solid #5F7894; } .pz-esc button[aria-pressed="true"] { background: #fff; color: var(--noche); } .pz-accion { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin-top: 8px; } .pz-accion .paso { border-color: #5F7894; background: none; } .pz-accion .paso button, .pz-accion .paso input { color: #fff; background: none; } .pz-accion .paso input { border-inline-color: #5F7894; } .pz-accion .paso button:hover { background: var(--noche); } .pz-accion .sumar { background: #fff; color: var(--noche); } .pz-accion .sumar:hover { background: var(--perla); } .pz-accion .sumar.hecho { background: var(--perla); } .pz-cenefa :focus-visible { outline-color: #fff; } /* CARTEL DE MODALIDADES. Sin clase .fijo es una lista común */ .cartel { background: var(--marino); color: #fff; } .cartel-cab { padding: 28px var(--pad) 16px; } .cartel-cab h2 { font-size: clamp(42px, 5vw, 76px); line-height: .95; } .cartel-cab p { margin-top: 4px; color: #C8D3E0; } .cartel-corte, .cartel-topes, .cartel-ej { display: none; } .cartel-lista li { padding: 16px var(--pad) 18px; border-top: 1px solid #2A4564; } .cartel-lista li:nth-child(even) { background: var(--noche); } .cartel-lista h3 { font-size: clamp(44px, 12vw, 72px); line-height: .95; } .cartel-lista p { margin-top: 4px; color: #D2DCE8; max-width: 52ch; } .fijo .cartel { height: 420svh; position: relative; } .fijo .cartel-fijo { position: sticky; top: var(--cab); height: calc(100svh - var(--cab)); padding-bottom: var(--mz); overflow: hidden; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(330px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .fijo .cartel-cab { grid-column: 1; padding-top: 18px; } .fijo .cartel-corte { grid-column: 1; grid-row: 2; display: block; container-type: size; overflow: hidden; background: var(--noche); } .cartel-tira { position: relative; overflow: hidden; } .cartel-tira:nth-child(1) { height: 31cqh; background: var(--perla); color: var(--marino); } .cartel-tira:nth-child(2) { height: 16cqh; background: var(--marino); color: var(--perla); } .cartel-tira:nth-child(3) { height: 34cqh; background: var(--niebla); color: var(--marino); } .cartel-tira:nth-child(4) { height: 19cqh; background: var(--noche); color: var(--perla); } .cartel-rail { position: absolute; top: 0; left: 0; display: flex; will-change: transform; } .cl { position: relative; flex: none; width: 100cqw; height: 100cqh; } .cl b { --fs: min(25.4cqw, 66cqh); position: absolute; left: var(--pad); top: calc(50cqh - var(--fs) * .72 - var(--y, 0cqh)); font: 800 var(--fs)/.72 var(--display); white-space: pre; display: block; } .cartel-tira:nth-child(1) b { --y: 0cqh; } .cartel-tira:nth-child(2) b { --y: 31cqh; } .cartel-tira:nth-child(3) b { --y: 47cqh; } .cartel-tira:nth-child(4) b { --y: 81cqh; } .fijo .cartel-topes { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--noche); } .cartel-topes button { position: relative; height: 50px; border: 0; background: none; color: #C8D3E0; font: 800 23px/1 var(--display); text-align: left; padding: 0 var(--pad); overflow: hidden; } .cartel-topes button::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .34s var(--riel); } .cartel-topes button[aria-current]::after { transform: none; } .cartel-topes button[aria-current], .cartel-topes button:hover { color: #fff; } .cartel-topes button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .fijo .cartel-lado { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--perla); color: var(--tinta); min-height: 0; } .fijo .cartel-lista { position: relative; height: 196px; background: var(--placa); } .fijo .cartel-lista li { position: absolute; inset: 0; padding: 18px 22px; border: 0; background: none; opacity: 0; transform: translateY(14px); transition: opacity .16s linear, transform .3s cubic-bezier(.2, .7, .2, 1); } .fijo .cartel-lista li.activa { opacity: 1; transform: none; transition-delay: .1s; } .fijo .cartel-lista h3 { font-size: clamp(46px, 4.6vw, 70px); color: var(--marino); } .fijo .cartel-lista p { color: var(--acero); font-size: 16px; } .fijo .cartel-ej { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; } .ej-foto { min-height: 0; padding: 12px 40px 0; } .ej-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .ej-cenefa { background: var(--marino); color: #fff; padding: 10px 22px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; } .ej-cenefa > p:first-child { grid-column: 1 / -1; font-size: 13.5px; color: #C8D3E0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ej-precio { font: 800 64px/1 var(--display); grid-column: 1; min-height: 64px; } .ej-nota { grid-column: 1; font-size: 13.5px; color: #C8D3E0; } .ej-accion { grid-column: 2; grid-row: 2 / span 2; } .ej-accion .btn { padding: 0 14px; min-height: 40px; font-size: 13.5px; } .ej-cenefa :focus-visible { outline-color: #fff; } /* MARCAS */ .marcas-t { background: var(--placa); } .marcas-tit { padding: 26px var(--pad) 12px; font-size: clamp(42px, 5vw, 76px); line-height: .95; color: var(--marino); } .mt { display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-top: 1px solid var(--filete); overflow: hidden; } .mt-fija { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 var(--pad); background: var(--placa); } .mt-fija img { width: auto; max-width: 100%; } .mt-fija p { font-size: 14.5px; color: var(--acero); } .mt-1 .mt-fija img { height: 42px; } .mt-2 .mt-fija img, .mt-3 .mt-fija img { height: 30px; } .mt-fija a { display: inline-flex; align-items: center; min-height: 44px; } .mt-4 .mt-fija { background: var(--marino); } .mt-4 .mt-fija img { height: 28px; } .mt-4 .mt-fija p { color: var(--niebla); } .mt-1 { height: 236px; } .mt-2 { height: 132px; } .mt-3 { height: 112px; } .mt-4 { height: 84px; } .mt-cinta { background: var(--perla); align-items: stretch; overflow: clip; min-height: 0; height: 100%; } .mt-cinta .cinta-in { align-items: center; height: 100%; } .mt-p { font: 800 1em/1 var(--display); color: var(--niebla); padding: 0 .16em; white-space: nowrap; } .mt-1 .mt-cinta { font-size: 260px; } .mt-2 .mt-cinta { font-size: 150px; background: var(--niebla); } .mt-2 .mt-p { color: #fff; } .mt-3 .mt-cinta { font-size: 130px; } .mt-4 .mt-cinta { font-size: 96px; background: var(--marino); } .mt-4 .mt-p { color: #2A4564; } .mt-cinta img { height: 86%; width: auto; max-width: 300px; object-fit: contain; margin: 0 22px; } .marcas-nota { padding: 14px var(--pad); border-top: 1px solid var(--filete); font-size: 15px; } /* PASOS: secuencia real */ .pasos { background: var(--marino); color: #fff; overflow: hidden; } .pasos li { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 0 var(--pad); will-change: transform; } .pasos li:nth-child(1) { background: var(--noche); min-height: 104px; } .pasos li:nth-child(2) { background: var(--marino); min-height: 132px; } .pasos li:nth-child(3) { background: #1B3C63; min-height: 164px; } .ps-n { font: 800 84px/1 var(--display); color: #fff; } .pasos h3 { font-size: clamp(40px, 4.6vw, 68px); line-height: .95; } .pasos p { color: #D2DCE8; max-width: 50ch; } .pasos a { color: #fff; font-weight: 600; text-underline-offset: 3px; } .pasos :focus-visible { outline-color: #fff; } /* CUENTA */ .cuenta-t { background: var(--noche); color: #fff; } .corte-c { --fs: 12.9vw; } .cuenta-txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 18px var(--pad) 22px; } .cuenta-txt p { color: #D2DCE8; font-size: 17px; max-width: 62ch; } .cuenta-t :focus-visible { outline-color: #fff; } /* ---------- NOSOTROS ---------- */ .n-h { --fs: min(26vw, 42svh); background: var(--placa); } .n-h .h-cabeza { min-height: 0; padding: 22px var(--pad) 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; } .n-h h1 { font-size: clamp(52px, 7vw, 112px); } .n-h .h-cabeza p { font-size: 17px; color: var(--acero); } .cap { container-type: inline-size; position: relative; --fs: min(calc(92cqw / (var(--c) * .4)), 58svh); } .cap-fijo { position: relative; } .cap-corte { position: relative; } .cap-corte .mand { position: relative; height: calc(var(--fs) * .36); overflow: hidden; } .cap-corte .mand-a { background: var(--marino); color: var(--perla); } .cap-corte .mand-b { background: var(--perla); color: var(--marino); } .cap:nth-of-type(even) .mand-a { background: var(--noche); color: var(--niebla); } .cap:nth-of-type(even) .mand-b { background: var(--niebla); color: var(--noche); } .mand-t { position: absolute; left: var(--pad); font: 800 var(--fs)/.656 var(--display); padding-top: .028em; white-space: nowrap; } .mand-a .mand-t { bottom: calc(var(--fs) * -.356); } .mand-b .mand-t { top: calc(var(--fs) * -.328); } .mand-t span { margin-left: .22em; } .cap-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; padding: 32px var(--pad) 36px; background: var(--placa); } .cap:nth-of-type(even) .cap-in { background: var(--perla); } .cap-txt h2 { font-size: clamp(48px, 7vw, 118px); line-height: .94; color: var(--marino); } .cap-txt p { margin-top: 14px; font-size: 20px; line-height: 1.45; max-width: 44ch; } .cap-dib { min-width: 0; margin-right: calc(var(--pad) * -1); color: var(--marino); } .cap-dib svg { display: block; width: 100%; height: auto; max-height: 56svh; overflow: hidden; } .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .ln > span { display: block; } .fijo .cap { height: 200svh; } .fijo .cap-fijo { position: sticky; top: var(--cab); height: calc(100svh - var(--cab)); overflow: hidden; } .fijo .cap-in { height: 100%; padding-top: 72px; padding-bottom: calc(var(--mz) + 72px); } .fijo .cap-corte { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .fijo .cap-corte .mand { position: absolute; left: 0; right: 0; height: 50%; will-change: transform; } .fijo .mand-a { top: 0; } .fijo .mand-b { bottom: 0; } .n-marcas { margin-right: var(--pad); background: var(--placa); border: 2px solid var(--marino); } .n-sanci { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px; } .n-sanci img { width: auto; height: 46px; } .n-sanci span, .n-aut-t { font-size: 15px; color: var(--acero); } .n-aut-t { padding: 8px 18px; border-top: 2px solid var(--marino); } .n-marcas ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filete); border-top: 1px solid var(--filete); } .n-marcas li { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 58px; padding: 6px 10px; background: var(--placa); } .n-marcas li img { width: auto; max-width: 100%; height: 22px; object-fit: contain; } .n-marcas li.m-oscura { background: var(--marino); } .n-marcas b { font: 800 24px/1 var(--display); text-transform: uppercase; color: var(--marino); } .n-fin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 26px var(--pad) 28px; background: var(--marino); color: #fff; } .n-fin h2 { font-size: clamp(42px, 5vw, 76px); line-height: .95; } .n-fin :focus-visible { outline-color: #fff; } /* ---------- FAQ ---------- */ .f-h { --fs: min(25.6vw, 34svh); background: var(--placa); } .f-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 0 var(--pad); min-height: 84px; background: var(--placa); border-bottom: 3px solid var(--marino); } .f-busca input { width: 100%; height: 72px; border: 0; background: none; color: var(--marino); font: 800 clamp(32px, 4vw, 54px)/1 var(--display); padding: 0; border-radius: 0; } .f-busca input::placeholder { color: #66748A; opacity: 1; } .f-busca input:focus { outline: none; } .f-busca:focus-within { background: #fff; box-shadow: inset 0 -4px 0 var(--marino); } .f-busca input::-webkit-search-cancel-button { display: none; } .f-busca p { color: var(--acero); font-size: 14px; white-space: nowrap; } .f-temas { position: sticky; top: var(--cab); z-index: 12; background: var(--noche); } .f-temas ul { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 calc(var(--pad) - 14px); } .f-temas ul::-webkit-scrollbar { display: none; } .f-temas button { position: relative; height: 52px; padding: 0 14px; border: 0; background: none; color: #C8D3E0; font: 800 26px/1 var(--display); white-space: nowrap; } .f-temas button:hover { color: #fff; } .f-temas button[aria-pressed="true"] { color: #fff; } .f-temas button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--riel); } .f-temas button[aria-pressed="true"]::after { transform: none; } .f-temas button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .f-grupo-tira { background: var(--marino); color: var(--perla); font-size: 86px; height: 76px; overflow: hidden; } .f-grupo:nth-child(even) .f-grupo-tira { background: var(--niebla); color: var(--marino); } .f-grupo-tira .cinta-in { align-items: center; height: 76px; } .f-grupo-tira span { font: 800 1em/1 var(--display); padding-right: .2em; white-space: nowrap; } .f-grupo-tira .cinta-in span:not(:first-child) { opacity: .34; } .f-q { --q-fondo: var(--perla); background: var(--q-fondo); border-bottom: 1px solid #BEC8D3; } .f-q:nth-child(even) { --q-fondo: var(--placa); } .f-q h3 { margin: 0; font-size: inherit; } .f-btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; align-items: center; width: 100%; min-height: 84px; padding: 12px var(--pad); border: 0; background: none; color: var(--marino); text-align: left; overflow: hidden; isolation: isolate; font: 800 clamp(32px, 3.6vw, 52px)/1 var(--display); } .f-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--marino); transform: translateX(-101%); transition: transform .34s cubic-bezier(.7, 0, .2, 1); } .f-btn span:first-child { transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .f-btn:hover span:first-child { transform: translateX(14px); } .f-btn[aria-expanded="true"] { color: #fff; transition: color .12s linear .12s; } .f-btn[aria-expanded="true"]::before { transform: none; } .f-btn:focus-visible { outline: 3px solid var(--marino); outline-offset: -3px; } .f-btn[aria-expanded="true"]:focus-visible { outline-color: #fff; } .f-mas { position: relative; width: 30px; height: 30px; justify-self: end; } .f-mas::before, .f-mas::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; background: currentColor; transition: transform .3s var(--riel); } .f-mas::after { transform: rotate(90deg); } .f-btn[aria-expanded="true"] .f-mas::after { transform: rotate(0); } .f-panel { overflow: hidden; background: var(--placa); } .f-resp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: start; padding: 18px var(--pad) 24px; } .f-resp > div { max-width: 68ch; font-size: 18px; line-height: 1.5; } .f-resp p + p, .f-resp ul { margin-top: 8px; } .f-resp li { padding: 6px 0; border-top: 1px solid var(--filete-2); } .f-resp li:first-child { border-top: 0; } .f-resp a { color: var(--marino); font-weight: 600; text-underline-offset: 3px; } .f-link { border: 0; background: none; color: var(--marino); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; white-space: nowrap; } .f-btn mark, .f-resp mark { background: var(--niebla); color: inherit; padding: 0 .08em; } .f-btn[aria-expanded="true"] mark { background: #2A4564; } .f-vacio { padding: 28px var(--pad) 44px; background: var(--placa); } .f-vacio h2 { font-size: clamp(40px, 5vw, 68px); line-height: .95; color: var(--marino); overflow-wrap: anywhere; } .f-vacio p { margin: 6px 0 14px; color: var(--acero); } .f-vacio div { display: flex; flex-wrap: wrap; gap: 8px; } /* Cortes */ @media (max-width: 1100px) { .mt { grid-template-columns: 260px minmax(0, 1fr); } .h-lado { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; } .h { --cabeza: 118px; } .h-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } } @media (max-width: 760px) { :root { --mz: 62px; --pad: 14px; } .h { --fs: 43vw; } .h .corte-h .rb:nth-child(1) { --al: .52 !important; --de: 0 !important; } .h .corte-h .rb:nth-child(2) { --al: .24 !important; --de: .52 !important; } .h .corte-h .rb:nth-child(3) { --al: .72 !important; --de: .76 !important; } .h .corte-h .rb-t { line-height: .72; padding-top: 0; } .sm { display: inline; } .rb-mas, .rb-ant { display: none; } .h-cabeza, .n-h .h-cabeza { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px var(--pad) 12px; } .h-cabeza h1 { font-size: 15.5vw; } .h-lado { grid-template-columns: minmax(0, 1fr); } .h-lado .btn { min-height: 46px; width: 100%; } .estante { --fh: 196px; --etq: 74px; scroll-snap-type: x proximity; } .go { width: 176px; min-width: 0; scroll-snap-align: start; } .go-foto { padding: 10px 12px 0; } .go-etq b { font-size: 30px; } .cats3 .cinta { overflow: visible; display: block; } .cats3 .cinta-in { display: block; } .ci { width: 100%; border-right: 0; border-top: 1px solid rgba(15, 39, 68, .14); gap: 10px; padding: 0 var(--pad); } .c-a .ci, .c-b .ci, .c-c .ci { height: 66px; font-size: 42px; } .ci img { order: 3; margin-left: auto; width: 58px !important; height: 58px !important; } .ci small, .c-b .ci small, .c-c .ci small { margin-bottom: .55em; font-size: 12.5px; } .c-b .ci { border-top-color: rgba(255, 255, 255, .14); } .carril-cab { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .carril-cab > a { grid-column: 1; grid-row: 2; padding: 6px 0; } .flechas { display: none; } .carril { scroll-snap-type: x proximity; cursor: auto; } .pieza { width: 240px; scroll-snap-align: start; } .pz-foto { height: 176px; } .pz-esc button, .pz-ver { min-height: 44px; } .pz-slot, .pz-esc, .pz-ver { height: 46px; } .pz-accion .paso { grid-template-columns: 40px 38px 40px; height: 46px; } .pz-accion .sumar { height: 46px; font-size: 15px; } .mt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; } .mt-fija { padding: 12px var(--pad); } .mt-cinta { height: 96px; font-size: 96px !important; } .mt-1 .mt-cinta { height: 150px; font-size: 170px !important; } .mt-4 .mt-cinta { height: 62px; font-size: 62px !important; } .pasos li { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 8px; padding: 14px var(--pad); min-height: 0 !important; align-items: start; } .ps-n { font-size: 56px; grid-row: span 2; } .pasos p { grid-column: 2; } .cuenta-txt { grid-template-columns: minmax(0, 1fr); } .cuenta-txt .btn { min-height: 46px; } .mostaza { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px var(--pad); } body.con-pedido .mostaza { bottom: 62px; } #mz-accion { display: none; } .mostaza.con-enlace { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .mz-enlace { padding: 0 10px; font-size: 13px; } body[data-pagina="nosotros"] .mostaza.con-enlace { grid-template-columns: minmax(0, 1fr); } body[data-pagina="nosotros"] .mz-enlace { display: none; } .mz-rollo, .mz-rollo li { height: 50px; } .mz-rollo li { font-size: 24px; line-height: 1; white-space: normal; } .n-h { --fs: 26vw; } .n-h h1 { font-size: 17vw; } .cap-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px var(--pad) 26px; } .cap-txt h2 { font-size: 13vw; } .cap-txt p { font-size: 17px; } .cap { --fs: min(calc(92cqw / (var(--c) * .4)), 60vw); } .n-sanci, .n-aut-t { padding-left: 12px; padding-right: 12px; } .n-sanci img { height: 34px; } .n-marcas li { min-height: 48px; padding: 4px 8px; } .n-marcas li img { height: 18px; } .n-marcas b { font-size: 19px; } .n-fin { grid-template-columns: minmax(0, 1fr); } .n-fin .btn { min-height: 46px; } .f-h { --fs: 25.6vw; } .f-busca { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 8px; } .f-busca input { height: 60px; font-size: 32px; } .f-grupo-tira { height: 56px; font-size: 64px; } .f-grupo-tira .cinta-in { height: 56px; } .f-btn { min-height: 72px; font-size: 31px; grid-template-columns: minmax(0, 1fr) 30px; gap: 10px; } .f-resp { grid-template-columns: minmax(0, 1fr); } .f-resp > div { font-size: 17px; } /* En teléfono las rebanadas corridas se leen como letras encimadas: quedan alineadas y quietas. La tira mostaza no tapa texto. */ .corte .rb-c { transform: none !important; will-change: auto; } .corte-h .rb .rb-t { animation: none !important; } .mostaza { position: static; } } @media (prefers-reduced-motion: reduce) { .cinta-in, .cartel-rail, .pasos li { will-change: auto; } .go:hover .go-foto img, .pz-foto:hover img { transform: none; } .f-btn:hover span:first-child { transform: none; } } @media print { .mostaza { display: none; } } /* Sistema real: lo que en la maqueta iba en style="" y