/* ========================================================= SISTEMA V3 — se carga DESPUÉS de main.css y de las hojas de archive/product/cart, así que sus reglas mandan. Acá vive todo lo que el rediseño V3 cambia respecto del sistema anterior. Está en un archivo aparte a propósito: para revisar el diff de un vistazo y para poder desactivarlo entero sacando un enqueue si hace falta volver. Ver las maquetas en _previews/ (v3-ajustada.html, v3-tienda.html, v3-producto.html) y el comparador en _previews/index.html. ========================================================= */ /* --------------------------------------------------------- 1 · BASE --------------------------------------------------------- */ body { font-size: 16px; line-height: 1.55; } h1, h2, h3, h4, .pf { letter-spacing: -.022em; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; } /* El `display` del navegador para [hidden] es una regla de hoja de usuario, así que CUALQUIER `display:flex/grid` nuestro lo pisa y el elemento sigue a la vista aunque el JS lo haya marcado como oculto. Pasó con el sello "Listo" del combo y con la fila de descuento. Se arregla de raíz acá. */ [hidden] { display: none !important; } /* --------------------------------------------------------- 2 · SECCIONES: título a la izquierda, sin la rayita roja. La rayita aparecía bajo los 8 títulos de la home y era el mayor delator de plantilla. Se reemplaza por una bajada al costado. --------------------------------------------------------- */ .fnt-section { padding-block: clamp(60px, 7.5vw, 108px); } .fnt-section__head { text-align: left; display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; margin-bottom: clamp(30px, 4vw, 50px); } .fnt-section__title { font-size: clamp(31px, 4.2vw, 54px); line-height: 1.04; max-width: 17ch; color: var(--ink); } .fnt-section__title::after { content: none; } /* fuera la rayita */ .fnt-section__sub { font-size: 17px; color: var(--ink-2); margin-top: 0; max-width: 46ch; } .fnt-section__cta { text-align: left; margin-top: 40px; } @media (min-width: 900px) { .fnt-section__head { grid-template-columns: 1.25fr .85fr; gap: 48px; } } /* --------------------------------------------------------- 2.5 · SELECTOR DE CANTIDAD — uno solo para todo el sitio. Había dos: el del side-cart y el carrito (pastilla con botones redondos que se rellenan de navy al pasar el mouse) y el de la ficha de producto (botones cuadrados que se rellenaban de gris claro). Manda el primero, que es el que se ve más veces y el que tiene un hover que se entiende. El selector apunta a los steppers que usan NUESTRO botón, así que alcanza a la ficha y al destacado de la home sin tocar el del carrito, que ya usa este mismo patrón con su propia clase. --------------------------------------------------------- */ .quantity:has(.fnt-qty-btn) { display: inline-flex; align-items: center; gap: 2px; padding: 3px; overflow: visible; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; } .fnt-qty-btn { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; line-height: 1; color: var(--navy); background: transparent; border: 0; border-radius: var(--r-pill); transition: background .15s ease, color .15s ease; } .fnt-qty-btn:hover { background: var(--navy); color: #fff; } .fnt-qty-btn:disabled { opacity: .35; pointer-events: none; } .quantity:has(.fnt-qty-btn) input.qty { width: 44px; height: 34px; border: 0; background: transparent; text-align: center; font: 600 15px var(--body); color: var(--ink); } /* --------------------------------------------------------- 3 · BOTONES --------------------------------------------------------- */ .fnt-btn { border-radius: var(--r-pill); padding: 15px 30px; font-size: 15px; font-weight: 600; border: 1px solid transparent; transition: background .18s var(--out), color .18s var(--out), border-color .18s var(--out), transform .12s var(--out); } .fnt-btn:hover { opacity: 1; } .fnt-btn:active { transform: scale(.985); } .fnt-btn--primario { background: var(--navy); color: #fff; } .fnt-btn--primario:hover { background: var(--navy-700); } .fnt-btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); } .fnt-btn--ghost:hover { border-color: var(--navy); background: var(--surface); } /* Sobre fondo gris el hover en gris no se nota: ahí el relleno va en blanco. */ .fnt-section--soft .fnt-btn--ghost:hover { background: #fff; } /* --------------------------------------------------------- 4 · TARJETA DE PRODUCTO La foto va sobre BLANCO y en encuadre normal (antes se apoyaba abajo y subía en hover). El hover cambia a la 2ª imagen del producto. --------------------------------------------------------- */ .fnt-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; transition: border-color .22s var(--out), box-shadow .22s var(--out); } .fnt-card:hover { transform: none; border-color: #c3ccda; box-shadow: var(--sombra-card); } .fnt-card__media { position: relative; aspect-ratio: 1 / 1; background: #fff; padding: 14px; display: block; } .fnt-card__media img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; transition: opacity .3s var(--out); } .fnt-card:hover .fnt-card__media img { transform: none; } .fnt-card__media-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--out); } .fnt-card__media-hover img, .fnt-card__media-hover video { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; } .fnt-card:hover .fnt-card__media-hover { opacity: 1; } @media (hover: none) { .fnt-card__media-hover { display: none; } } .fnt-card__body { padding: 18px; gap: 9px; border-top: 1px solid var(--line); } .fnt-card__linea { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); } .fnt-card__title { font-size: 15px; font-weight: 500; line-height: 1.35; font-family: var(--body); } .fnt-card__title a { color: var(--ink); } /* --------------------------------------------------------- 5 · CHIPS de atributo: vuelven los iconos, con trazo legible a 15px. --------------------------------------------------------- */ .fnt-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 11px 6px 8px; line-height: 1.2; } .fnt-chip__icon { display: inline-flex; } .fnt-chip__icon svg { width: 15px; height: 15px; color: var(--navy); opacity: .85; stroke-width: 1.9; } /* --------------------------------------------------------- 6 · PRECIOS El tachado vuelve al rojo al 50%, como en el tema original. El precio actual NUNCA va en rojo. --------------------------------------------------------- */ .fnt-price__main { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .fnt-price__regular { color: color-mix(in srgb, var(--rojo) 50%, transparent); } .fnt-price__kg { font-size: 13px; color: var(--ink-2); } /* --------------------------------------------------------- 7 · HERO a sangre: foto + degradado navy + un solo mensaje. Antes eran 469 px de alto con un packshot recortado sobre blanco. --------------------------------------------------------- */ .fnt-hero { position: relative; min-height: min(86vh, 700px); display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-900); } .fnt-hero__bg { position: absolute; inset: 0; } .fnt-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 44%; } .fnt-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,18,44,.95) 6%, rgba(0,24,53,.78) 46%, rgba(0,24,53,.22) 82%, rgba(0,24,53,.1) 100%); } @media (min-width: 860px) { .fnt-hero__bg img { object-position: 65% 50%; } .fnt-hero__bg::after { background: linear-gradient(105deg, rgba(0,18,44,.92) 0%, rgba(0,24,53,.78) 34%, rgba(0,24,53,.26) 62%, rgba(0,24,53,.06) 100%); } } .fnt-hero__inner { position: relative; z-index: 2; display: block; padding-block: clamp(52px, 8vw, 96px); width: 100%; } .fnt-hero__text { padding: 0; align-items: flex-start; } .fnt-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--on-navy-2); font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 20px; } .fnt-hero__eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); margin: 0; } .fnt-hero__title { font-size: clamp(40px, 6vw, 78px); line-height: 1.02; color: #fff; max-width: 15ch; margin-bottom: 22px; } .fnt-hero__desc { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--on-navy); max-width: 44ch; margin-bottom: 34px; } .fnt-hero__cta { gap: 18px; align-items: center; } .fnt-hero__cta .fnt-btn--primario { background: #fff; color: var(--navy-900); } .fnt-hero__cta .fnt-btn--primario:hover { background: var(--on-navy); } .fnt-hero__cta-alt { border-color: rgba(255,255,255,.6); color: #fff; } .fnt-hero__cta-alt:hover { background: rgba(255,255,255,.12); } .fnt-hero__visual, .fnt-hero__badge, .fnt-hero__carousel { display: none; } /* La garantía salió de la fila de botones y ahora es uno de los tres elementos de confianza de abajo. La regla queda por si algún hero viejo todavía la trae. */ .fnt-hero__guarantee { display: inline-flex; align-items: center; gap: 10px; color: var(--on-navy); font-size: 14.5px; } .fnt-hero__guarantee svg { flex: none; color: #fff; } /* --- Elementos de confianza del hero --- Mobile en columna (cada uno en su renglón, se leen de un vistazo); desde tablet en fila, alineados con los botones de arriba. */ .fnt-hero__perks { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; } .fnt-hero__perks li { padding-left: 26px; font-size: 14.5px; font-weight: 500; color: #fff; } .fnt-hero__perks li::before { width: 18px; height: 18px; top: 1px; background: var(--verde-2); font-size: 10px; } @media (min-width: 768px) { .fnt-hero__perks { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 30px; } } .fnt-hero__dots { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 3; } .fnt-hero__dot { background: rgba(255,255,255,.35); } .fnt-hero__dot.is-active { background: #fff; } /* --------------------------------------------------------- 8 · PRUEBA SOCIAL: reemplaza a la trustbar, al marquee y a los sellos, que decían lo mismo tres veces. --------------------------------------------------------- */ .fnt-proof { background: var(--surface); border-bottom: 1px solid var(--line); } .fnt-proof__in { display: grid; grid-template-columns: 1fr; gap: 20px; padding-block: 26px; align-items: center; } .fnt-proof__score { display: flex; align-items: center; gap: 12px; } .fnt-proof__n { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; } .fnt-proof__st { color: var(--ambar); font-size: 14px; letter-spacing: 2px; display: block; } .fnt-proof__lb { font-size: 13.5px; color: var(--ink-2); } .fnt-proof__q { font-size: 16.5px; line-height: 1.5; color: var(--ink); max-width: 52ch; font-family: var(--display); font-weight: 500; } .fnt-proof__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ink-2); } .fnt-proof__meta span { display: flex; align-items: center; gap: 7px; } .fnt-proof__meta svg { color: var(--navy); flex: none; width: 15px; height: 15px; } @media (min-width: 900px) { .fnt-proof__in { grid-template-columns: auto 1fr auto; gap: 44px; } } /* --------------------------------------------------------- 9 · TARJETAS DE LÍNEA: foto de escena + degradado + texto blanco. Antes eran seis pasteles con un rectángulo blanco adentro (el fondo de la foto de producto). Un solo sistema, no dos como había en main.css. --------------------------------------------------------- */ .fnt-cats__grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .fnt-cat-card { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 5; isolation: isolate; background: var(--navy-900) !important; border: 0 !important; padding: 0; min-height: 0; } .fnt-cat-card:hover { transform: none; box-shadow: none; } .fnt-cat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; transform: none; filter: none; transition: transform .7s var(--out); } .fnt-cat-card:hover .fnt-cat-card__img { transform: scale(1.045); } .fnt-cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,18,44,.88) 0%, rgba(0,18,44,.5) 38%, rgba(0,18,44,.04) 72%); } .fnt-cat-card__body { position: relative; z-index: 2; max-width: none; width: 100%; padding: 26px; border-bottom: 3px solid var(--fnt-linea-color, var(--navy)); display: flex; flex-direction: column; gap: 7px; } .fnt-cat-card__eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .72; } .fnt-cat-card__name { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: #fff; line-height: 1; } .fnt-cat-card__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 14px; font-weight: 600; color: #fff; opacity: .001; transform: translateY(6px); transition: opacity .26s var(--out), transform .26s var(--out); } .fnt-cat-card:hover .fnt-cat-card__go, .fnt-cat-card:focus-visible .fnt-cat-card__go { opacity: 1; transform: none; } @media (min-width: 640px) { .fnt-cats__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .fnt-cats__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } .fnt-cat-card--lg { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .fnt-cat-card--lg .fnt-cat-card__name { font-size: clamp(38px, 4vw, 52px); } .fnt-cat-card--lg .fnt-cat-card__body { padding: 36px; } } /* main.css tiene una regla `.fnt-cat-card--lg .fnt-cat-card__img` (dos clases) que le gana en especificidad a la de arriba y dejaba la foto ocupando solo media tarjeta. Hay que anularla con el mismo selector. */ .fnt-cat-card--lg .fnt-cat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; } .fnt-cat-card--lg:hover .fnt-cat-card__img { transform: scale(1.045); } /* --------------------------------------------------------- 10 · PESTAÑAS perro / gato: se mantiene el toggle tipo pill del tema anterior, centrado. Se probó pasarlo a subrayado alineado a la izquierda y se descartó: el pill se lee como control y el subrayado como navegación. --------------------------------------------------------- */ .fnt-toppicks__head { display: flex; justify-content: center; } .fnt-toppicks__tabs { margin-top: 0; } .fnt-toppicks__tab { font-family: var(--body); } .fnt-toppicks .fnt-section__cta { text-align: center; } /* --------------------------------------------------------- 11 · BLOQUE PLEGABLE (descripción y análisis de la ficha) --------------------------------------------------------- */ .fnt-fold { position: relative; } /* Se anima max-height a propósito: es la única forma de ir de "N líneas" a "alto real del contenido" sin saber el alto de antemano. Es un click puntual sobre un bloque corto, no una animación continua. */ .fnt-fold__c { position: relative; overflow: hidden; transition: max-height .38s var(--out); } .fnt-fold:not(.is-open) .fnt-fold__c { max-height: var(--fold-h, 82px); } .fnt-fold:not(.is-open) .fnt-fold__c::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--fold-bg, #fff) 82%); } .fnt-fold.is-open .fnt-fold__c { max-height: var(--fold-full, 1200px); } .fnt-fold__t { margin-top: 4px; background: none; border: 0; padding: 0; font: 600 14.5px var(--body); color: var(--navy); display: inline-flex; align-items: center; gap: 7px; } .fnt-fold__t:hover { text-decoration: underline; } .fnt-fold__t svg { transition: transform .28s var(--out); } .fnt-fold.is-open .fnt-fold__t svg { transform: rotate(180deg); } /* --------------------------------------------------------- 12 · BARRA DE ENVÍO GRATIS --------------------------------------------------------- */ .fnt-ship { background: var(--surface); border-radius: var(--r); padding: 13px 16px; margin-bottom: 24px; } .fnt-ship__top { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); } .fnt-ship__top svg { flex: none; color: var(--navy); } .fnt-ship__top b { color: var(--ink); font-weight: 700; } .fnt-ship__bar { height: 5px; background: #dfe4ea; border-radius: 99px; overflow: hidden; margin-top: 10px; } .fnt-ship__bar i { display: block; height: 100%; width: 100%; background: var(--navy); border-radius: 99px; transform: scaleX(var(--pct, 0)); transform-origin: left; transition: transform .45s var(--out); /* transform, no width: sin reflow */ } .fnt-ship.is-ok .fnt-ship__top, .fnt-ship.is-ok .fnt-ship__top svg, .fnt-ship.is-ok .fnt-ship__top b { color: var(--verde); } .fnt-ship.is-ok .fnt-ship__bar i { background: var(--verde-2); } /* --------------------------------------------------------- 13 · COMPARATIVA y RESEÑAS --------------------------------------------------------- */ .fnt-compare { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow-x: auto; } .fnt-compare table { min-width: 620px; } .fnt-compare th, .fnt-compare td { padding: 15px 18px; border-bottom: 1px solid var(--line); } .fnt-compare thead th { background: var(--surface); color: var(--ink-2); font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; } .fnt-compare thead th.is-us { background: var(--navy); color: #fff; } .fnt-compare td.is-us { background: #f5f8fc; font-weight: 600; } .fnt-testi { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; } .fnt-testi__quote { font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); } .fnt-testi__author { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); } .fnt-testi__author b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 2px; } /* --------------------------------------------------------- 14 · CIERRE navy con foto --------------------------------------------------------- */ .fnt-end { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; text-align: center; } .fnt-end > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; } .fnt-end__in { position: relative; z-index: 2; padding-block: clamp(68px, 9vw, 124px); } .fnt-end h2 { font-size: clamp(32px, 4.8vw, 62px); line-height: 1.03; margin-bottom: 18px; max-width: 18ch; margin-inline: auto; color: #fff; } .fnt-end p { color: var(--on-navy); font-size: 18px; margin-bottom: 32px; max-width: 48ch; margin-inline: auto; } .fnt-end .fnt-btn { background: #fff; color: var(--navy-900); } .fnt-end .fnt-btn:hover { background: var(--on-navy); } /* --------------------------------------------------------- 15 · MOTION Visible por defecto: el estado oculto solo existe si el JS arma la animación, así nada se pierde sin JS ni en un render headless. --------------------------------------------------------- */ .fnt-rise { opacity: 1; transform: none; } html.fnt-anim .fnt-rise { transition: opacity .6s var(--out), transform .6s var(--out); } html.fnt-anim .fnt-rise:not(.is-in) { opacity: 0; transform: translateY(18px); } @media (prefers-reduced-motion: reduce) { html.fnt-anim .fnt-rise, html.fnt-anim .fnt-rise:not(.is-in) { opacity: 1; transform: none; transition: none; } .fnt-cat-card__img { transition: none; } } /* --------------------------------------------------------- 16 · COMBO: el estado inicial no es un error Los dos avisos arrancaban en rojo con un "+" antes de que el usuario tocara nada, y los totales en "—". Mientras nadie eligió, son instrucciones neutras; el rojo queda para cuando falta algo de verdad. --------------------------------------------------------- */ .fnt-bb__missing--idle { color: var(--ink-2); font-weight: 500; } .fnt-bb__missing--idle::before { background: var(--surface-2); color: var(--ink-2); } .fnt-bb__trow--discount { color: var(--rojo); font-weight: 600; } /* --------------------------------------------------------- 17 · ARREGLOS DE LA HOME sobre el sistema anterior --------------------------------------------------------- */ /* El cierre es navy: el botón fantasma quedaba navy sobre navy, invisible. */ .fnt-cta-final .fnt-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; } .fnt-cta-final .fnt-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } .fnt-cta-final h2 { font-size: clamp(32px, 4.8vw, 62px); line-height: 1.03; max-width: 18ch; margin-inline: auto; } .fnt-cta-final p { font-size: 18px; max-width: 48ch; margin-inline: auto; } /* FAQ y pestañas de la ficha: ocupan el ancho del contenedor (la FAQ estaba centrada en 760px, con el título pegado a la izquierda) y el "+" pasa a chevron que gira al abrir, como en V3. OJO: el `position: relative` del summary no es decorativo. Sin él el chevron —que va absoluto— se ancla al primer ancestro posicionado y se va a la otra punta de la página; el indicador desaparecía por eso. */ .fnt-faq__list { max-width: none; margin-inline: 0; border-top: 1px solid var(--line); } .fnt-acc { border-bottom: 1px solid var(--line); } .fnt-acc > summary { position: relative; padding: 22px 44px 22px 0; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .fnt-acc > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .24s var(--out); } .fnt-acc[open] > summary::after { content: ""; transform: translateY(-30%) rotate(225deg); } .fnt-acc__body { padding: 0 0 24px; font-size: 16px; color: var(--ink-2); max-width: 70ch; } /* Comparativa: primera columna a la izquierda, cruz tenue en los rivales. */ .fnt-comp thead th:first-child, .fnt-comp tbody td:first-child { text-align: left; } .fnt-comp__no { color: #c2c9d4; font-size: 15px; } .fnt-comp__yes { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--verde-2); color: #fff; font-size: 12px; } /* Testimonios: el autor separado por un filete, como en V3. */ .fnt-testi__author { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); } /* --------------------------------------------------------- 18 · COMBO perro + gato al sistema V3 El resumen deja de ser una franja al pie y pasa a columna al costado, pegajosa mientras recorrés los productos. --------------------------------------------------------- */ .fnt-bb__contents { display: grid; grid-template-columns: 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; } .fnt-bb__contents-title { font-size: 17px; margin-bottom: 6px; } .fnt-bb__hint { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } .fnt-bb__stack-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--verde); background: #eef5f1; border-radius: var(--r); padding: 8px 11px; } .fnt-bb__list { display: flex; flex-direction: column; gap: 10px; } .fnt-bb__totals { display: flex; flex-direction: column; gap: 9px; } .fnt-bb__trow { font-size: 14.5px; color: var(--ink-2); } .fnt-bb__trow b { color: var(--ink); font-weight: 600; } .fnt-bb__trow--total { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px; font-size: 15px; font-weight: 600; align-items: baseline; } .fnt-bb__trow--total b { font-size: 26px; letter-spacing: -.02em; } .fnt-bb__finalize { width: 100%; margin-top: 12px; } @media (min-width: 1040px) { /* El contenedor .fnt-bb es el que tiene al stage y al resumen como hijos (el resumen NO cuelga del stage), así que la grilla de dos columnas va acá. */ .fnt-bb { display: grid; grid-template-columns: 1fr 330px; gap: 32px; align-items: start; } .fnt-bb > * { min-width: 0; } .fnt-bb__contents { position: sticky; top: 96px; align-self: start; } /* Baja el resumen hasta la línea de la primera tarjeta. Sin esto arranca en el borde de arriba de la grilla y queda flotando por encima de las fichas, a la altura del "Elegí uno o más de perros". Los 44 px son el alto de esa cabecera de paso más el aire hasta el carrusel. */ .fnt-bb[data-bb-mode="perro_gato"] .fnt-bb__contents { margin-top: 44px; } } /* --- Paso 1 / paso 2 (perros y gatos) --- */ .fnt-bb[data-bb-mode="perro_gato"] .fnt-bb__stage { gap: 26px; } /* Sin esto el carrusel estira su columna: un item de grid arranca en min-width:auto, o sea "el ancho de todo mi contenido", y las 10 fichas empujan el paso hasta 1130 px dentro de una columna de 826. */ .fnt-bb__stage > *, .fnt-slot > * { min-width: 0; } .fnt-slot__h { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .fnt-slot__n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 12px var(--body); } .fnt-slot__t { font-family: var(--display); font-size: 18px; font-weight: 600; } .fnt-slot__ok { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--verde-2); background: #e8f3ed; border-radius: var(--r-pill); padding: 4px 10px; } /* Aviso de deslizar: sólo en mobile. En desktop están las flechas. */ .fnt-slot__hint { margin-left: auto; display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; color: var(--ink-2); } .fnt-slot__hint svg { flex: none; opacity: .65; } @media (min-width: 620px) { .fnt-slot__hint { display: none; } } /* En mobile el aviso comparte fila con el título: se achican los dos para que "Elegí uno o más de perros" no se parta en dos líneas. Se deja sólo la especie —el resto de la instrucción ya está en la bajada de la sección. */ @media (max-width: 619px) { .fnt-slot__h { gap: 8px; } .fnt-slot__t { font-size: 16px; text-transform: capitalize; } .fnt-slot__t > span { display: none; } .fnt-slot__n { width: 24px; height: 24px; font-size: 11px; } .fnt-slot__ok { font-size: 12px; padding: 3px 9px; } } /* --- Carrusel: scroll-snap nativo, flechas en desktop, puntos siempre --- */ .fnt-car { position: relative; min-width: 0; } .fnt-picks { display: grid; grid-auto-flow: column; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-block: 2px; grid-template-rows: repeat(2, 1fr); /* mobile: 2 fichas apiladas por vista */ grid-auto-columns: 92%; /* el 8% que sobra deja asomar la siguiente */ } .fnt-picks::-webkit-scrollbar { display: none; } .fnt-picks > .fnt-pick { scroll-snap-align: start; } @media (min-width: 620px) { .fnt-picks { grid-template-rows: auto; grid-auto-columns: calc((100% - 20px) / 3); } } .fnt-car__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--navy); cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0,24,78,.3); transition: opacity .2s var(--out), border-color .2s var(--out); } .fnt-car__nav:hover { border-color: var(--navy); } .fnt-car__nav--prev { left: -19px; } .fnt-car__nav--next { right: -19px; } .fnt-car__nav:disabled { opacity: 0; pointer-events: none; } .fnt-car.is-single .fnt-car__nav { display: none; } @media (max-width: 619px) { .fnt-car__nav { display: none; } } .fnt-car__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; } .fnt-car__dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: #c8d0dc; cursor: pointer; transition: background .2s var(--out), width .2s var(--out); } .fnt-car__dot.is-on { background: var(--navy); width: 20px; border-radius: 99px; } /* --- La ficha: es un