/* ========================================================================= Arletex Design System v3.5 — Tela de Algodón (/telas/tela-de-algodon) Hoja editorial por página. Prefijo de clase y de token: alg- / --alg-*. Tokens locales con fallback a --ax-* global y, si no, a hex del sistema. ───────────────────────────────────────────────────────────────────────── TEMA: TSG de fibra natural. El algodón tampoco es "una" tela: son 12+ tejidos (manta, bramante, gabardina, loneta, indiolino, cuadrillé, pañalina, bombasi, waffle…) con distinta composición y gramaje. Por eso la página se organiza POR USO (ropa, sábanas, uniformes, bolsas, salud, bebé, limpieza, manualidades, decoración) y remata con el catálogo 100% algodón, las mezclas con poliéster y la guía de grosor. Esqueleto portado de /telas/tela-poliester (pol- → alg-), pasando por el clon de /telas/tela-tul (tul- → alg-) que ya traía el piso tipográfico de 14px. Componentes propios de esta página: .alg-usechip--quote (12ª ficha del índice, cotizar directo), .alg-versus (comparativa Manta/Loneta a 2 paneles), .alg-trio (tesela editorial ×3, bordado/manualidades), .alg-specgrid/.alg-spec (ficha técnica sin foto, catálogo 100% algodón), .alg-scale (escala de grosor gruesa→suave) y .alg-factors/.alg-closing/ .alg-clients/.alg-checks/.alg-subhead/.alg-note__title (ver más abajo). Se retiran los propios de tul sin uso aquí (.alg-compare, .alg-catcard-- lead, .alg-gallery--5, .alg-feature__icon--fa) y se suman los de poliéster que tul no traía (.alg-picks, .alg-gallery--2, .alg-cards*). ≥55% blanco; ink como puntuación (banda mayoreo + footer). Mapa de secciones (registro · apertura · marco · fondo · hover): 01 Hero Vitrina · Dossier + hero fig · Top-rule · white · press-chunky 02 Selector de uso Almanaque · Dossier + parrilla · Index-tab · paper · ink-flood 03 Tipos Dossier · NumberProtagonist · Index-tab · white · lift-orange 04 Ropa y confección Periódico · Zigzag + cards · Double · paper · lift-orange 05 Sábanas Periódico · Zigzag rev · — · white · lift-orange 06 Uniformes Técnico · LabelLateral + feat · Side-rule · cream · lift-orange 07 Bolsas Periódico · Prosa + Versus · Double · white · lift-orange 08 Salud Galería · Prosa + gcards · — · paper · lift-orange 09 Bebé Vitrina · Cards + nota · — · white · lift-orange 10 Limpieza Vitrina · Ribbon enlazable · Double · cream · lift-orange 11 Manualidades Vitrina · Trío editorial · — · white · lift-orange 12 Decoración Vitrina · Band (media+texto) · Double · paper · lift-orange 13 100% algodón Almanaque · IndexRow + specgrid · Index-tab · white · lift-orange 14 Mezclas Almanaque · Ledger + dot-leader · Double · white · ink-flood 15 Grosor Técnico · Escala + picks · — · cream · — 16 Mayoreo Manifiesto · MegaTextBg + form · Bleed · INK · press-chunky 17 Precio Almanaque · RunIn + factores · — · white · — 18 FAQ Dossier · RunIn + acordeón · — · white · side-shift 19 Cierre Vitrina · Caja centrada · Full-frame · paper · press-chunky ========================================================================= */ /* ─── Tokens locales + reset de caja (scoped) ──────────────────────────── */ .alg-page, .alg-section { --alg-ink: var(--ax-ink, #1F2530); --alg-paper: var(--ax-paper, #FAF6EE); --alg-cream: var(--ax-cream, #F2EDE4); --alg-white: var(--ax-white, #FFFFFF); --alg-orange: var(--ax-orange, #F15A29); --alg-orange-deep: var(--ax-orange-deep, #B0401A); --alg-purple: var(--ax-purple, #6A52A2); --alg-yellow: var(--ax-yellow, #FFEB3B); --alg-muted: var(--ax-muted, #6E6A60); --alg-muted-dark: var(--ax-muted-dark, #A8A39A); --alg-rule: rgba(31, 37, 48, 0.16); --alg-rule-on-dark: rgba(250, 246, 238, 0.18); --alg-whatsapp: var(--ax-whatsapp, #25D366); --alg-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif); --alg-font-accent: var(--ax-font-accent, 'Fraunces', Georgia, serif); --alg-font-body: var(--ax-font-body, 'Lato', system-ui, sans-serif); --alg-font-mono: var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace); --alg-ease: cubic-bezier(0.22, 1, 0.36, 1); --alg-motion-fast: 0.16s; } /* Envuelve solo las secciones rediseñadas (NO el slide/breadcrumb legacy). overflow-x:clip contiene sombras offset y mega-text sin romper el sticky. */ .alg-page { overflow-x: clip; } .alg-page *, .alg-page *::before, .alg-page *::after { box-sizing: border-box; } /* Anclas del selector de uso por debajo del header fixed (113/104/158px) */ .alg-section[id] { scroll-margin-top: 116px; } @media (max-width: 991px) { .alg-section[id] { scroll-margin-top: 108px; } } @media (max-width: 767px) { .alg-section[id] { scroll-margin-top: 162px; } } /* ─── Section base ──────────────────────────────────────────────────────── */ .alg-section { width: 100%; position: relative; background: var(--alg-white); color: var(--alg-ink); font-family: var(--alg-font-body); padding: clamp(48px, 8vw, 96px) 0; } .alg-section--paper { background: var(--alg-paper); } .alg-section--cream { background: var(--alg-cream); color: var(--alg-ink); } .alg-section--snug { padding: clamp(38px, 6vw, 68px) 0; } .alg-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .alg-container--narrow { max-width: 780px; } /* Mezclas y precio: a 780px la composición en mono (≈275px) dejaba al nombre y su descripción en una columna de ~110px; la prosa sigue topada por .alg-prose / .alg-usebar__note. */ .alg-container--mid { max-width: 1080px; } /* ─── Marcos de Section (§8.3) ─────────────────────────────────────────── */ .alg-section--top-rule { border-top: 2px solid var(--alg-orange); } .alg-section--double-rule { border-top: 1px solid var(--alg-rule); border-bottom: 1px solid var(--alg-rule); } .alg-section--side-rule { border-left: 3px solid var(--alg-orange); } .alg-section--side-rule > .alg-container { padding-left: clamp(20px, 4vw, 44px); } /* Index-tab (pestaña de archivador) */ .alg-section--index-tab { border-top: 2px solid var(--alg-ink); } .alg-tab { position: absolute; top: 0; /* Alineada con el borde de texto del .alg-container (max-width 1600px centrado + su padding), no con el borde de la viewport. */ left: calc(max(0px, (100% - 1600px) / 2) + clamp(20px, 4vw, 48px)); transform: translateY(-100%); background: var(--alg-ink); color: var(--alg-paper); font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; z-index: 2; white-space: nowrap; } /* Full-frame (máx 1 por página — sección de económicas) */ .alg-section--full-frame { border: 2px solid var(--alg-ink); margin: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 32px); width: auto; } /* ─── Eyebrow stamp (rectángulo recto — firma editorial, radius 0) ──────── */ .alg-eyebrow { font-family: var(--alg-font-accent); font-style: italic; font-weight: 400; font-size: clamp(0.95rem, 1.1vw, 1.15rem); color: var(--alg-muted); line-height: 1.4; margin: 0 0 clamp(16px, 2vw, 22px); display: inline-flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; } .alg-eyebrow[data-stamp]:not([data-stamp=""])::before { content: attr(data-stamp); font-family: var(--alg-font-display); font-style: normal; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.6rem; line-height: 1; border: 1px solid var(--alg-orange-deep); color: var(--alg-orange-deep); /* AA 5.84:1 sobre blanco — orange puro da 3.37:1 */ flex-shrink: 0; } /* Variante purple — señal "mayoreo / producción" */ .alg-eyebrow--mayoreo[data-stamp]:not([data-stamp=""])::before { border-color: var(--alg-purple); color: var(--alg-purple); } /* Cabecera de sección sin apertura propia (solo eyebrow + título) */ .alg-arthead { margin-bottom: clamp(18px, 2.6vw, 26px); } /* ─── Display title Anton + Fraunces (N-04/N-05) ──────────────────── */ .alg-title { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; color: var(--alg-ink); line-height: 0.92; letter-spacing: -0.005em; margin: 0; } .alg-title--xl { font-size: clamp(2.5rem, 7.2vw, 5.5rem) !important; } .alg-title--lg { font-size: clamp(2.1rem, 5.4vw, 4.1rem) !important; } .alg-title--md { font-size: clamp(1.85rem, 4.2vw, 3.2rem) !important; } .alg-title--sm { font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important; } .alg-title em { font-family: var(--alg-font-accent); font-style: italic; font-weight: 400; text-transform: lowercase; letter-spacing: -0.025em; color: var(--alg-orange); } .alg-title a { color: inherit; text-decoration: none; transition: color var(--alg-motion-fast) var(--alg-ease); } .alg-title a:hover { color: var(--alg-orange); } /* ─── Lead / prosa ──────────────────────────────────────────────────────── */ .alg-lead { font-family: var(--alg-font-body); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; color: var(--alg-ink); max-width: 66ch; margin: 0; } .alg-lead + .alg-lead { margin-top: clamp(12px, 1.8vw, 18px); } .alg-lead strong { font-weight: 800; } .alg-lead a { color: var(--alg-ink); text-decoration: underline; text-decoration-color: var(--alg-orange); text-decoration-thickness: 2px; text-underline-offset: 2px; transition: color var(--alg-motion-fast) var(--alg-ease); } .alg-lead a:hover { color: var(--alg-orange-deep); } .alg-prose { max-width: 74ch; } .alg-prose--gap { margin-top: clamp(14px, 2vw, 20px); } /* Prosa a dos columnas (sector salud): 4 párrafos cortos en 74ch dejaban media sección vacía a la derecha; en columnas llena el ancho sin alargar las líneas. */ @media (min-width: 992px) { .alg-prose--cols { max-width: none; columns: 2; column-gap: clamp(32px, 4vw, 64px); column-rule: 2px solid var(--alg-rule); } .alg-prose--cols p { break-inside: avoid; } } /* Dos bloques de prosa lado a lado (bolsas: Manta | Loneta), alineados con las tarjetas del .alg-versus de abajo; mismo filete que .alg-prose--cols. */ @media (min-width: 992px) { .alg-duo { --alg-duo-gap: clamp(16px, 2vw, 32px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .alg-duo > .alg-prose { max-width: none; } .alg-duo > :first-child { padding-right: var(--alg-duo-gap); } .alg-duo > :last-child { padding-left: var(--alg-duo-gap); border-left: 2px solid var(--alg-rule); } } .alg-prose p { font-family: var(--alg-font-body); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.7; color: var(--alg-ink); margin: 0 0 1.1em; } .alg-prose p:last-child { margin-bottom: 0; } .alg-prose strong { font-weight: 800; } .alg-prose a { color: var(--alg-ink); text-decoration: underline; text-decoration-color: var(--alg-orange); text-decoration-thickness: 2px; text-underline-offset: 2px; transition: text-underline-offset var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-prose a:hover { color: var(--alg-orange-deep); text-underline-offset: 4px; } /* Subtítulo suelto dentro de una columna de prosa (varias secciones de uso traen 2-3 preguntas/temas antes de cerrar) — mismo tratamiento que .alg-title pero a menor escala y sin apertura propia. */ .alg-subhead { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; color: var(--alg-ink); line-height: 1.05; font-size: clamp(1.15rem, 2vw, 1.5rem) !important; margin: clamp(22px, 3vw, 30px) 0 10px; } .alg-subhead em { font-family: var(--alg-font-accent); font-style: italic; font-weight: 400; text-transform: lowercase; letter-spacing: -0.025em; color: var(--alg-orange); } /* ─── Puente al cotizador dentro del hero ─────────────────────────────── Para el visitante que llega sin saber el nombre del tejido: la página se navega por uso, pero muchos solo saben QUÉ van a fabricar. Va antes de la barra de garantías —primero resolvemos la duda, luego los datos comerciales— y baja al formulario del cotizador (#alg-mayoreo). Marco Side-rule purple + hover side-shift: no compite con el CTA ink ni con el verde WhatsApp que quedan justo debajo. */ .alg-hbanner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(13px, 1.7vw, 19px); margin: clamp(26px, 3.4vw, 36px) 0 0; padding: clamp(13px, 1.8vw, 18px) clamp(15px, 2vw, 21px); background: var(--alg-cream); border: 2px solid var(--alg-ink); border-left: 6px solid var(--alg-purple); box-shadow: 5px 5px 0 var(--alg-ink); color: var(--alg-ink); text-decoration: none; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease), background-color var(--alg-motion-fast) var(--alg-ease); } .alg-hbanner:hover, .alg-hbanner:focus-visible { transform: translateX(5px); box-shadow: 5px 5px 0 var(--alg-purple); background: var(--alg-white); color: var(--alg-ink); text-decoration: none; } .alg-hbanner:focus-visible { outline-color: var(--alg-purple); } .alg-hbanner__icon { display: grid; place-items: center; width: clamp(42px, 5vw, 50px); height: clamp(42px, 5vw, 50px); background: var(--alg-purple); color: var(--alg-white); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1; } .alg-hbanner__body { min-width: 0; } .alg-hbanner__lbl { display: block; text-wrap: balance; font-family: var(--alg-font-display); font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.16rem); letter-spacing: 0.015em; text-transform: uppercase; line-height: 1.1; color: var(--alg-ink); } .alg-hbanner__txt { display: block; margin-top: 5px; font-family: var(--alg-font-body); font-size: clamp(0.94rem, 1.1vw, 1.02rem); line-height: 1.55; color: var(--alg-ink); } .alg-hbanner__txt strong { font-weight: 800; } .alg-hbanner__cue { display: inline-flex; align-items: center; gap: 9px; font-family: var(--alg-font-display); font-weight: 400; font-size: clamp(0.9rem, 1.05vw, 1rem); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--alg-purple); white-space: nowrap; } .alg-hbanner__cue i { transition: transform var(--alg-motion-fast) var(--alg-ease); } .alg-hbanner:hover .alg-hbanner__cue i, .alg-hbanner:focus-visible .alg-hbanner__cue i { transform: translateY(3px); } /* Móvil: el cue baja a su propia línea, separado por hairline, para que el texto no se estrangule entre el ícono y la flecha. */ @media (max-width: 640px) { .alg-hbanner { grid-template-columns: auto 1fr; row-gap: clamp(11px, 2.2vw, 14px); } .alg-hbanner__cue { grid-column: 1 / -1; justify-content: space-between; padding-top: clamp(10px, 2vw, 12px); border-top: 1px solid var(--alg-rule); } } /* Barra de garantías del hero (compra por rollo · envíos · factura) */ /* Barra de garantías del hero — Compra por rollo · Envíos · Factura. Es el dato que el cliente busca de un vistazo, así que va como tres fichas con el mismo lenguaje de las cards (borde ink 2px, top-rule orange, sombra sólida) en lugar de una línea de texto pequeño. */ .alg-meta { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: clamp(10px, 1.3vw, 14px); margin: clamp(26px, 3.4vw, 36px) 0 0; padding: 0; } .alg-meta li { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 13px); min-height: 74px; padding: clamp(13px, 1.7vw, 17px) clamp(12px, 1.5vw, 16px); background: var(--alg-white); border: 2px solid var(--alg-ink); border-top: 3px solid var(--alg-orange); box-shadow: 4px 4px 0 var(--alg-ink); font-family: var(--alg-font-display); font-weight: 400; font-size: clamp(0.875rem, 1.05vw, 1.02rem); letter-spacing: 0.015em; text-transform: uppercase; line-height: 1.08; color: var(--alg-ink); } .alg-meta li i { flex: 0 0 auto; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1; color: var(--alg-orange); } /* En móvil el auto-fit dejaba 2+1 con una ficha huérfana: mejor apiladas, cada una en una línea. */ @media (max-width: 560px) { .alg-meta { grid-template-columns: 1fr; } .alg-meta li { min-height: 62px; } } /* ─── Acciones + CTA WhatsApp chunky (press-chunky · radius 0) ─────────── */ .alg-actions { margin-top: clamp(24px, 3.6vw, 34px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .alg-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; min-height: 48px; font-family: var(--alg-font-display); font-size: clamp(1rem, 1.5vw, 1.28rem); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; text-decoration: none; border: 2px solid var(--alg-ink); border-radius: 0; cursor: pointer; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease); } .alg-cta--whatsapp { background: var(--alg-whatsapp); color: #fff; box-shadow: 8px 8px 0 var(--alg-ink); } .alg-cta--whatsapp i { font-size: 1.3em; line-height: 1; } .alg-cta--whatsapp:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--alg-ink); color: #fff; text-decoration: none; } .alg-cta--whatsapp:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--alg-ink); } .alg-cta--ink { background: var(--alg-ink); color: var(--alg-paper); box-shadow: 8px 8px 0 var(--alg-orange); } .alg-cta--ink:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--alg-orange); color: var(--alg-paper); text-decoration: none; } .alg-cta--ink:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--alg-orange); } /* Variante verde del CTA de hero que baja al cotizador (no abre WhatsApp directo, pero el formulario termina ahí). Texto en ink: blanco sobre el verde da 1.98:1. */ .alg-cta--quote { background: var(--alg-whatsapp); color: var(--alg-ink); box-shadow: 8px 8px 0 var(--alg-ink); } .alg-cta--quote:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--alg-ink); color: var(--alg-ink); text-decoration: none; } .alg-cta--quote:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--alg-ink); } .alg-cta--quote i { font-size: 1.15em; line-height: 1; } .alg-cta--sm { padding: 12px 22px; font-size: clamp(0.95rem, 1.3vw, 1.1rem); box-shadow: 6px 6px 0 var(--alg-ink); } .alg-cta--sm:hover { box-shadow: 8px 8px 0 var(--alg-ink); } .alg-cta--sm:active { box-shadow: 3px 3px 0 var(--alg-ink); } .alg-cta:focus-visible { outline: 3px solid var(--alg-orange); outline-offset: 3px; } /* ─── Botón (navegación a otra TSG / ver producto) ──────────────────────── */ .alg-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 13px 24px; min-height: 44px; font-family: var(--alg-font-body); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border: 2px solid var(--alg-ink); border-radius: 0; cursor: pointer; color: var(--alg-ink); background: transparent; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease), background var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-btn i { transition: transform var(--alg-motion-fast) var(--alg-ease); } .alg-btn--outline:hover { background: var(--alg-ink); color: var(--alg-white); text-decoration: none; } .alg-btn--outline:hover i { transform: translateX(4px); } .alg-btn--solid { background: var(--alg-orange); color: #fff; border-color: var(--alg-ink); box-shadow: 0 6px 0 var(--alg-orange-deep); } .alg-btn--solid:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--alg-orange-deep); color: #fff; text-decoration: none; } .alg-btn--solid:hover i { transform: translateX(4px); } .alg-btn--solid:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--alg-orange-deep); } /* Botón "Cotiza ahora": se repite al cierre de cada sección y baja al formulario, que termina abriendo WhatsApp — de ahí el verde. Texto en ink, no en blanco: blanco sobre el verde de WhatsApp da 1.98:1 y falla AA; ink da 7.75:1. */ .alg-btn--quote { background: var(--alg-whatsapp); color: var(--alg-ink); border-color: var(--alg-ink); box-shadow: 0 5px 0 #128C4B; } .alg-btn--quote:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #128C4B; color: var(--alg-ink); text-decoration: none; } .alg-btn--quote:active { transform: translateY(2px); box-shadow: 0 2px 0 #128C4B; } .alg-btn--quote i { color: var(--alg-ink); } .alg-btn--quote:hover i { transform: none; } .alg-btn:focus-visible { outline: 3px solid var(--alg-orange); outline-offset: 3px; } /* ─── Figura editorial (frame-chunky · radius 0) ───────────────────────── */ .alg-figure { margin: 0; background: var(--alg-white); border: 2px solid var(--alg-ink); border-top: 3px solid var(--alg-orange); box-shadow: 10px 10px 0 var(--alg-ink); line-height: 0; } .alg-figure img { display: block; width: 100%; height: auto; } /* Varias fotos de uso miden ~480-660px de ancho nativo; con el container al 95% la columna los estiraba de más y se veían pixelados. */ .alg-zz__media, .alg-band__media { max-width: 660px; margin-inline: auto; } /* Banner ancho de sección (par de slide 1900×400 / 700×500): la figura no recorta, deja que cada variante mande su propia proporción. */ .alg-figcaption { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--alg-muted); margin: clamp(10px, 1.6vw, 14px) 0 0; } /* ========================================================================= 01 · Hero — Vitrina · Dossier + figura · Top-rule · white ========================================================================= */ .alg-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(30px, 5vw, 64px); align-items: center; } .alg-hero__text { min-width: 0; } .alg-hero__side { min-width: 0; } .alg-hero__media { min-width: 0; margin: 0; } @media (max-width: 900px) { .alg-hero { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 38px); } /* El aside se disuelve para poder reordenar: figura arriba del texto y el botón de compartir al final de todo el hero. */ .alg-hero__side { display: contents; } .alg-hero__media { order: -1; } .alg-hero__side .alg-share { order: 1; margin: 0; margin-inline: 0; } } .alg-hero__head { margin-bottom: clamp(18px, 2.4vw, 26px); } /* El slide legacy es clicable y baja al índice de usos (sección 02). El va dentro de .slider-nav para no alterar el selector del chrome legacy. */ .alg-slide-link { display: block; line-height: 0; } .alg-slide-link:focus-visible { outline: 3px solid var(--alg-orange); outline-offset: -3px; } /* Botón compartir discreto (abre el modal legacy de Bootstrap) */ .alg-share { margin-top: clamp(18px, 2.4vw, 24px); display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 8px 0; background: none; border: 0; font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alg-muted); cursor: pointer; background-image: linear-gradient(var(--alg-orange) 0 0); background-repeat: no-repeat; background-position: left bottom 6px; background-size: 0% 2px; transition: background-size var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-share:hover, .alg-share:focus-visible { background-size: 100% 2px; color: var(--alg-ink); } /* En el hero vive sobre la figura, alineado al borde derecho del marco: display:flex (nivel de bloque) + max-content para que el margin-left:auto empuje; en inline-flex el margen auto no tendría efecto. */ .alg-hero__side .alg-share { display: flex; max-width: max-content; margin: 0 0 clamp(8px, 1.2vw, 12px) auto; padding-bottom: 0; background-position: left bottom 2px; } /* ========================================================================= 02 · Selector de uso — FIRMA de la página Índice de archivador: 10 fichas que anclan a cada sección de uso. Mobile-first: 2 columnas en móvil, hasta 5 en desktop. Hover side-shift. ========================================================================= */ .alg-usebar__head { display: flex; align-items: baseline; gap: clamp(0.5rem, 2vw, 1rem); margin-bottom: clamp(6px, 1.2vw, 10px); } .alg-usebar__leader { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--alg-rule); transform: translateY(-0.25em); } .alg-usebar__tally { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alg-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .alg-usebar__note { font-family: var(--alg-font-body); font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.6; color: var(--alg-muted); max-width: 62ch; margin: 0 0 clamp(22px, 3vw, 30px); } @media (max-width: 560px) { .alg-usebar__head { flex-wrap: wrap; } .alg-usebar__leader { display: none; } .alg-usebar__tally { flex-basis: 100%; } } /* Tabla-índice sin gaps: hairlines compartidas (mismo tratamiento que la parrilla de familias de /nosotros, .nx-fabrics). Registro Almanaque, hover ink-flood. 12 celdas = 11 usos + acceso al catálogo, así la parrilla cierra exacta a 4, 3 y 2 columnas. */ .alg-usegrid { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--alg-ink); border-left: 1px solid var(--alg-ink); } @media (max-width: 1024px) { .alg-usegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .alg-usegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* El
  • es el grid-item; el lo rellena para que las hairlines y el ink-flood cubran toda la celda. */ .alg-usegrid > li { display: flex; min-width: 0; } .alg-usechip { flex: 1; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 1.8vw, 18px); min-height: 148px; padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2.5vw, 28px); background: var(--alg-ink); border-right: 1px solid var(--alg-ink); border-bottom: 1px solid var(--alg-ink); color: var(--alg-paper); text-decoration: none; transition: color var(--alg-motion-fast) var(--alg-ease); } /* Foto del uso: la pasa el Blade como --alg-usechip-img (con cache-buster). Va en un pseudo para poder hacerle zoom en hover sin mover el texto. */ .alg-usechip::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--alg-usechip-img, none) center / cover no-repeat; transition: transform 0.5s var(--alg-ease), filter 0.35s var(--alg-ease); } /* Velo de tinta: garantiza AA del nombre sobre cualquier foto y deja la esquina inferior (donde vive el título) más oscura que la superior. */ .alg-usechip::after { content: ""; position: absolute; inset: 0; z-index: -1; /* Degradado fijo; lo que se anima es la opacidad (los gradientes no transicionan). Reposo 0.3 ≈ 16%→28% de tinta: la foto se ve casi limpia; la legibilidad del nombre la sostiene su text-shadow. */ background: linear-gradient(180deg, rgba(31, 37, 48, 0.55) 0%, rgba(31, 37, 48, 0.92) 100%); opacity: 0.3; transition: opacity 0.35s var(--alg-ease); } .alg-usechip__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .alg-usechip__num { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.16em; color: var(--alg-paper); opacity: 0.85; font-variant-numeric: tabular-nums; transition: color var(--alg-motion-fast) var(--alg-ease); } /* Flecha: única señal de que la ficha baja a una sección de esta misma página en lugar de navegar fuera. */ .alg-usechip__cue { font-size: 0.8rem; color: var(--alg-paper); transition: transform var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-usechip__name { color: inherit; transition: color var(--alg-motion-fast) var(--alg-ease); font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 1.9vw, 1.65rem) !important; line-height: 1.05; letter-spacing: 0.005em; margin: 0; text-shadow: 0 1px 2px rgba(31, 37, 48, 0.7), 0 0 12px rgba(31, 37, 48, 0.55); } .alg-usechip:hover, .alg-usechip:focus-visible { color: var(--alg-white); text-decoration: none; } .alg-usechip:hover::before, .alg-usechip:focus-visible::before { transform: scale(1.06); } /* Hover: el velo se aclara (la ficha activa "se enciende" frente al resto), el nombre pasa a naranja y la sombra del texto sube para sostener la legibilidad sobre la foto más visible. */ .alg-usechip:hover::after, .alg-usechip:focus-visible::after { opacity: 0.3; } /* Las fichas hermanas se apagan mientras hay una activa (hover o foco en la parrilla): el velo sube y la foto se desatura, para que la encendida resalte. */ .alg-usegrid:has(.alg-usechip:hover, .alg-usechip:focus-visible) .alg-usechip:not(:hover, :focus-visible)::after { opacity: 1; } .alg-usegrid:has(.alg-usechip:hover, .alg-usechip:focus-visible) .alg-usechip:not(:hover, :focus-visible)::before { filter: saturate(0.6); } .alg-usechip:hover .alg-usechip__name, .alg-usechip:focus-visible .alg-usechip__name { color: var(--alg-orange); text-shadow: 0 1px 2px rgba(31, 37, 48, 0.7), 0 0 12px rgba(31, 37, 48, 0.55); } .alg-usechip:hover .alg-usechip__num, .alg-usechip:focus-visible .alg-usechip__num { color: var(--alg-orange); opacity: 1; } .alg-usechip:hover .alg-usechip__cue, .alg-usechip:focus-visible .alg-usechip__cue { color: var(--alg-orange); transform: translateY(3px); } /* Última celda: acceso al catálogo (no es un ancla, no lleva flecha abajo). Sin foto: fondo neutro de tela y texto en tinta, como remate de la parrilla. */ .alg-usechip--all { background: var(--alg-ink); color: var(--alg-paper); transition: background var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-usechip--all::before, .alg-usechip--all::after { display: none; } .alg-usechip--all .alg-usechip__num { color: var(--alg-paper); opacity: 0.85; } .alg-usechip--all .alg-usechip__cue { display: none; } .alg-usechip--all .alg-usechip__name { text-shadow: none; } .alg-usechip--all:hover, .alg-usechip--all:focus-visible { background: var(--alg-white); color: var(--alg-ink); } .alg-usechip--all:hover .alg-usechip__name, .alg-usechip--all:focus-visible .alg-usechip__name { color: var(--alg-ink); text-shadow: none; } /* Etiqueta más larga que un nombre de uso: baja un punto para que quepa en la celda de 2 columnas del móvil. */ .alg-usechip--all .alg-usechip__name { font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important; } /* 12ª celda: acceso directo al cotizador (data-alg-modo="ayuda"). Mismo tratamiento sin foto que --all, pero en naranja: es la única ficha que no lleva al catálogo/una sección sino que abre el formulario. */ .alg-usechip--quote { background: var(--alg-orange); color: var(--alg-ink); transition: background var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-usechip--quote::before, .alg-usechip--quote::after { display: none; } .alg-usechip--quote .alg-usechip__num { color: var(--alg-ink); opacity: 1; } .alg-usechip--quote .alg-usechip__cue { display: none; } .alg-usechip--quote .alg-usechip__name { text-shadow: none; font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important; } .alg-usechip--quote:hover, .alg-usechip--quote:focus-visible { background: var(--alg-ink); color: var(--alg-paper); } .alg-usechip--quote:hover .alg-usechip__name, .alg-usechip--quote:focus-visible .alg-usechip__name { color: var(--alg-paper); text-shadow: none; } .alg-usechip--quote:hover .alg-usechip__num, .alg-usechip--quote:focus-visible .alg-usechip__num { color: var(--alg-paper); } /* ========================================================================= Composiciones: Zigzag · Split · Band ========================================================================= */ .alg-zz { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; } .alg-zz__text { min-width: 0; } .alg-zz__media { min-width: 0; order: 2; margin: 0; } .alg-zz--rev .alg-zz__text { order: 2; } .alg-zz--rev .alg-zz__media { order: 1; } .alg-zz__text .alg-title { margin-bottom: clamp(16px, 2vw, 22px); } .alg-zz__text .alg-prose { max-width: 58ch; } @media (max-width: 860px) { .alg-zz { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); } .alg-zz__media, .alg-zz--rev .alg-zz__media, .alg-zz__text, .alg-zz--rev .alg-zz__text { order: 0; } } /* Band — media compacta + texto (más apretado que el zigzag) */ .alg-band { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; } .alg-band__media { margin: 0; min-width: 0; } .alg-band__text { min-width: 0; } @media (max-width: 860px) { .alg-band { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 30px); } } /* ========================================================================= 07 · Bolsas — Versus (comparativa Manta/Loneta a 2 paneles, componente propio). Circulo "VS" cuadrado (no redondo): la hoja no usa border-radius en ningún elemento — se respeta esa regla aunque el contrato hable de "círculo"; el badge de 64px se lee igual de claro en cuadro. ========================================================================= */ .alg-versus { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); margin-top: clamp(24px, 3vw, 34px); } @media (min-width: 880px) { .alg-versus { grid-template-columns: 1fr auto 1fr; align-items: center; } } .alg-versus__panel { display: flex; flex-direction: column; background: var(--alg-white); border: 2px solid var(--alg-ink); box-shadow: 6px 6px 0 var(--alg-ink); } .alg-versus__media { margin: 0; display: block; /* 7:5 = proporción nativa de la foto de manta (700×500); a 16:10 el cover recortaba el sello de Arletex arriba (manta) y abajo (loneta). */ aspect-ratio: 7 / 5; border-bottom: 2px solid var(--alg-ink); overflow: hidden; line-height: 0; background: var(--alg-cream); } /* Loneta es 4:3: a 7:5 pierde ~5% de alto; anclado abajo, el recorte cae en el fondo de arriba y el logo de la esquina inferior queda entero. */ .alg-versus__media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; } .alg-versus__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.4vw, 24px); } .alg-versus__kicker { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important; line-height: 1.1; color: var(--alg-ink); margin: 0; } .alg-versus__kicker strong { color: var(--alg-orange-deep); } .alg-versus__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .alg-versus__list li { position: relative; font-family: var(--alg-font-body); font-size: 1rem; line-height: 1.4; color: var(--alg-ink); padding-left: 22px; } .alg-versus__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--alg-orange); } .alg-versus__panel .alg-btn { align-self: flex-start; margin-top: 4px; } .alg-versus__vs { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; background: var(--alg-yellow); color: var(--alg-ink); font-family: var(--alg-font-display); font-size: 1.05rem; letter-spacing: 0.03em; border: 2px solid var(--alg-ink); box-shadow: 3px 3px 0 var(--alg-ink); } @media (max-width: 879px) { .alg-versus__vs { width: 48px; height: 48px; font-size: 0.92rem; box-shadow: 2px 2px 0 var(--alg-ink); } } /* ========================================================================= Productos destacados — mini-fichas con miniatura (más peso que un chip) Fila horizontal: thumb cuadrada + nombre + composición. Hover ink-flood, coherente con la parrilla del selector. ========================================================================= */ .alg-featured { margin: clamp(24px, 3vw, 32px) 0 0; padding: clamp(18px, 2.4vw, 24px) 0 0; border-top: 2px solid var(--alg-ink); } /* Mismo tamaño que la etiqueta de "otros tejidos": a 0.68rem se perdía. */ .alg-featured__lbl { display: flex; align-items: center; gap: 0.7rem; font-family: var(--alg-font-mono); font-size: clamp(0.875rem, 1.1vw, 1rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alg-ink); margin: 0 0 clamp(16px, 2vw, 20px); } .alg-featured__lbl::before { content: ""; width: 12px; height: 12px; background: var(--alg-orange); flex-shrink: 0; } .alg-featured__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: clamp(10px, 1.4vw, 14px); } .alg-feat { height: 100%; display: flex; flex-direction: column; background: var(--alg-white); border: 2px solid var(--alg-ink); box-shadow: 4px 4px 0 var(--alg-ink); text-decoration: none; color: var(--alg-ink); overflow: hidden; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease), background var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } /* Miniatura completa arriba: los abanicos de tela se recortaban a una tira vertical en el formato horizontal y no se leía el tejido. */ .alg-feat__media { display: block; aspect-ratio: 1 / 1; background: var(--alg-cream); border-bottom: 2px solid var(--alg-ink); overflow: hidden; line-height: 0; } .alg-feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s var(--alg-ease); } .alg-feat__body { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; padding: clamp(11px, 1.5vw, 14px) clamp(12px, 1.6vw, 15px); } .alg-feat__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .alg-feat__name { font-family: var(--alg-font-body); font-weight: 800; font-size: clamp(0.92rem, 1.15vw, 1.02rem); line-height: 1.25; } .alg-feat__note { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alg-muted); line-height: 1.35; transition: color var(--alg-motion-fast) var(--alg-ease); } .alg-feat__cue { flex: 0 0 auto; font-size: 0.9rem; color: var(--alg-muted); transition: transform var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-feat:hover, .alg-feat:focus-visible { background: var(--alg-ink); color: var(--alg-paper); text-decoration: none; transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--alg-orange); } .alg-feat:hover .alg-feat__note, .alg-feat:focus-visible .alg-feat__note { color: var(--alg-muted-dark); } .alg-feat:hover .alg-feat__cue, .alg-feat:focus-visible .alg-feat__cue { color: var(--alg-orange); transform: translateX(3px); } .alg-feat:hover .alg-feat__media img, .alg-feat:focus-visible .alg-feat__media img { transform: scale(1.07); } /* ========================================================================= 08 · Salud — tarjetas foto con pie (ported de tela-poliester.css) ========================================================================= */ .alg-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: clamp(24px, 3vw, 34px); } .alg-gallery--2 { grid-template-columns: repeat(2, 1fr); } /* Esta parrilla usa banners 850×500 en vez de las miniaturas cuadradas del catálogo: con el recorte 4:3 se comía el rótulo impreso por los lados. */ .alg-gallery--2 .alg-gcard__img { aspect-ratio: 17 / 10; } @media (max-width: 900px) { .alg-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .alg-gallery, .alg-gallery--2 { grid-template-columns: 1fr; } } .alg-gcard { position: relative; display: block; line-height: 0; background: var(--alg-cream); border: 2px solid var(--alg-ink); border-top: 3px solid var(--alg-orange); box-shadow: 6px 6px 0 var(--alg-ink); overflow: hidden; text-decoration: none; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease); } .alg-gcard:hover, .alg-gcard:focus-visible { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--alg-orange); text-decoration: none; } .alg-gcard__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; } .alg-gcard__img img { width: 100%; height: 100%; display: block; object-fit: cover; /* Las miniaturas del catálogo son cuadradas y traen el nombre impreso en la franja inferior: anclando arriba, el recorte 4:3 la deja fuera y no choca con el pie superpuesto de la tarjeta. */ object-position: top; transition: transform 0.45s var(--alg-ease); } .alg-gcard:hover .alg-gcard__img img, .alg-gcard:focus-visible .alg-gcard__img img { transform: scale(1.05); } /* El pie ES el nombre de la tela (el recorte deja fuera el rótulo impreso), así que va en Anton y a tamaño de titular: a 0.82rem no se leía. */ .alg-gcard__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(34px, 5vw, 52px) clamp(13px, 2vw, 18px) clamp(12px, 1.8vw, 16px); font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.08rem, 1.6vw, 1.4rem); letter-spacing: 0.01em; line-height: 1.05; color: #fff; background: linear-gradient(to top, rgba(31, 37, 48, 0.96) 0%, rgba(31, 37, 48, 0.82) 45%, rgba(31, 37, 48, 0) 100%); } .alg-gcard__cap small { display: block; font-family: var(--alg-font-mono); font-weight: 400; /* Piso 14px: en tela-tul.css este subtítulo del pie de tarjeta bajaba a 0.7rem; aquí SÍ lleva texto real ("100% algodón preencogido", 08 · Salud), así que sube al mismo suelo que el resto de la hoja. */ font-size: clamp(0.88rem, 0.95vw, 0.95rem); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); margin-top: 6px; } /* ========================================================================= 04 · Ropa / 09 · Bebé — sub-tarjetas con miniatura y CTA (ported de tela-poliester.css: .pol-cards/.pol-card). El kicker subió de 0.66rem a 0.88rem (piso 14px) con más letter-spacing para compensar el tamaño. ========================================================================= */ .alg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); margin-top: clamp(24px, 3vw, 34px); } @media (max-width: 880px) { .alg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .alg-cards{ grid-template-columns: 1fr; } } /* Variante propia de 4 (04 · Ropa: Manta / Bramante 100% / Gabardina 100% / Bombasi). Mismo criterio de breakpoints que .alg-catgrid--4. */ .alg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1239px) { .alg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .alg-card { --alg-card-pad: clamp(18px, 2.4vw, 24px); display: flex; flex-direction: column; background: var(--alg-white); border: 2px solid var(--alg-ink); border-top: 3px solid var(--alg-orange); box-shadow: 5px 5px 0 var(--alg-ink); padding: var(--alg-card-pad); transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease); } .alg-card:hover, .alg-card:focus-within { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--alg-orange); } .alg-card__head { display: flex; flex-direction: column; margin-bottom: clamp(14px, 1.8vw, 18px); } /* Foto a sangre sobre el padding de la tarjeta: a tamaño de avatar la textura del tejido no se distinguía, y es justo el dato que decide la compra. */ .alg-card__media { display: block; width: auto; margin: calc(var(--alg-card-pad) * -1) calc(var(--alg-card-pad) * -1) clamp(14px, 1.8vw, 18px); aspect-ratio: 4 / 2; background: var(--alg-cream); border-bottom: 2px solid var(--alg-ink); overflow: hidden; line-height: 0; } .alg-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; transition: transform 0.45s var(--alg-ease); } .alg-card:hover .alg-card__media img, .alg-card:focus-within .alg-card__media img { transform: scale(1.07); } .alg-card__headtext { min-width: 0; } .alg-card__headtext .alg-card__kicker, .alg-card__headtext .alg-card__title { margin-bottom: 0; } .alg-card__headtext .alg-card__kicker { margin-bottom: 5px; } .alg-card__kicker { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alg-muted); margin: 0 0 clamp(8px, 1.2vw, 10px); } .alg-card__title { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.5rem) !important; line-height: 1.02; color: var(--alg-ink); margin: 0 0 clamp(10px, 1.4vw, 12px); } .alg-card__title em { font-family: var(--alg-font-accent); font-style: italic; text-transform: lowercase; color: var(--alg-orange-deep); letter-spacing: -0.025em; } .alg-card__desc { font-family: var(--alg-font-body); font-size: 0.96rem; line-height: 1.6; color: var(--alg-ink); margin: 0 0 clamp(14px, 2vw, 18px); flex: 1; } .alg-card__desc strong { font-weight: 800; } .alg-card__foot { margin-top: auto; } /* ========================================================================= 11 · Manualidades — trío editorial (componente propio). ========================================================================= */ .alg-trio { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 32px); margin-top: clamp(24px, 3vw, 34px); } @media (min-width: 900px) { .alg-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .alg-trio__item { display: flex; flex-direction: column; } .alg-trio__media { margin: 0; display: block; aspect-ratio: 4 / 3; border: 2px solid var(--alg-ink); box-shadow: 5px 5px 0 var(--alg-ink); overflow: hidden; line-height: 0; } .alg-trio__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s var(--alg-ease); } .alg-trio__item:hover .alg-trio__media img, .alg-trio__item:focus-within .alg-trio__media img { transform: scale(1.05); } .alg-trio__title { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; line-height: 1.05; color: var(--alg-ink); margin: 16px 0 8px; } .alg-trio__text { font-family: var(--alg-font-body); font-size: 1rem; line-height: 1.6; color: var(--alg-ink); margin: 0; } /* Pista de uso del carrusel: es una instrucción, no un pie decorativo — a 0.68rem en muted pasaba desapercibida y el usuario no descubría que quedaban tejidos fuera de pantalla. */ @media (prefers-reduced-motion: no-preference) { @keyframes alg-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } } } /* ========================================================================= 10 · Limpieza — Ribbon — strip enlazable con miniatura (3 apilados) ========================================================================= */ .alg-ribbon { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 30px); background: var(--alg-ink); color: var(--alg-paper); border: 2px solid var(--alg-ink); border-top: 3px solid var(--alg-orange); box-shadow: 8px 8px 0 var(--alg-orange); padding: clamp(16px, 2.4vw, 24px) clamp(18px, 3vw, 30px); text-decoration: none; overflow: hidden; margin-top: clamp(26px, 3.4vw, 36px); transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease); } .alg-ribbon:hover, .alg-ribbon:focus-visible { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--alg-orange); text-decoration: none; color: var(--alg-paper); } .alg-ribbon__media { flex-shrink: 0; /* Con el container al 95% el cintillo es muy ancho y la miniatura de 160px quedaba perdida: proporción fija y ancho generoso. */ width: clamp(160px, 24vw, 340px); aspect-ratio: 4 / 3; align-self: center; border: 2px solid var(--alg-paper); background: var(--alg-cream); overflow: hidden; line-height: 0; } /* Las fotos son cuadradas con el sello de Arletex en una esquina: anclado arriba, el 4:3 recorta solo abajo y el logo no queda a medias. */ .alg-ribbon__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.45s var(--alg-ease); } .alg-ribbon:hover .alg-ribbon__media img { transform: scale(1.05); } .alg-ribbon__body { display: block; min-width: 0; } .alg-ribbon__kicker { display: block; font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alg-muted-dark); margin: 0 0 6px; } /* En tela-tul.css era un ; aquí es

    (10 · Limpieza usa 3 ribbons apilados como fichas propias, no como forro de un solo producto), de ahí el !important: sin él, el h3 de móvil de style.css lo pisa a 25px. */ .alg-ribbon__title { display: block; font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 2.6vw, 2rem) !important; line-height: 1; color: var(--alg-paper); margin: 0 0 8px; } .alg-ribbon__title em { display: inline; font-family: var(--alg-font-accent); font-style: italic; text-transform: lowercase; color: var(--alg-orange); letter-spacing: -0.025em; } .alg-ribbon__desc { display: block; font-family: var(--alg-font-body); font-size: 0.95rem; line-height: 1.55; color: rgba(250, 246, 238, 0.82); margin: 0; max-width: 72ch; } .alg-ribbon__cue { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--alg-font-body); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alg-orange); white-space: nowrap; } .alg-ribbon__cue i { transition: transform var(--alg-motion-fast) var(--alg-ease); } .alg-ribbon:hover .alg-ribbon__cue i { transform: translateX(4px); } @media (max-width: 760px) { .alg-ribbon { grid-template-columns: 1fr; gap: 16px; } .alg-ribbon__media { width: 100%; } /* el aspect-ratio 4:3 ya fija el alto */ .alg-ribbon__cue { justify-content: flex-start; } } /* ========================================================================= 06 · Uniformes (LabelLateral) + Nota de precisión — se repite en varias secciones de uso (03 Tipos, 04 Ropa, 07 Bolsas, 09 Bebé, 13 100% algodón, 15 Grosor), no es exclusiva de una sola. ========================================================================= */ .alg-lateral { display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; } .alg-lateral__rail { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alg-muted); line-height: 1.5; padding-top: 0.5em; border-top: 2px solid var(--alg-ink); } .alg-lateral__body { min-width: 0; } @media (max-width: 820px) { .alg-lateral { grid-template-columns: 1fr; gap: clamp(14px, 3vw, 20px); } } .alg-note { background: var(--alg-white); border: 2px solid var(--alg-ink); border-left: 5px solid var(--alg-purple); box-shadow: 5px 5px 0 var(--alg-ink); padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px); margin-top: clamp(22px, 3vw, 30px); } .alg-note__lbl { display: inline-block; font-family: var(--alg-font-display); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alg-purple); border: 1px solid var(--alg-purple); padding: 3px 8px; line-height: 1; margin-bottom: clamp(10px, 1.4vw, 12px); } /* Título propio de .alg-note cuando la nota necesita encabezar una pregunta (p.ej. "¿Cuál es la mejor tela de algodón para ropa?") en vez de solo el chip .alg-note__lbl. */ .alg-note__title { font-family: var(--alg-font-body); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important; line-height: 1.25; color: var(--alg-ink); margin: 0 0 8px; } .alg-note p { font-family: var(--alg-font-body); font-size: 0.98rem; line-height: 1.65; color: var(--alg-ink); margin: 0; } .alg-note p + p { margin-top: 0.8em; } .alg-note strong { font-weight: 800; } .alg-note a { color: var(--alg-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--alg-purple); text-decoration-thickness: 2px; text-underline-offset: 2px; } .alg-note a:hover { color: var(--alg-purple); } /* Checklist "¿conviene 100% algodón o una mezcla?" (06 · Uniformes) — 2 columnas en desktop, marcador cuadrado naranja con palomita (sin depender de FontAwesome). */ .alg-checks { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px 28px; margin: clamp(16px, 2.2vw, 22px) 0 0; padding: 0; } @media (min-width: 760px) { .alg-checks { grid-template-columns: 1fr 1fr; } } .alg-checks li { position: relative; font-family: var(--alg-font-body); font-size: 1rem; line-height: 1.45; color: var(--alg-ink); padding: 10px 0 10px 34px; border-bottom: 1px solid var(--alg-rule); } .alg-checks li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--alg-orange); color: var(--alg-ink); font-size: 0.76rem; font-weight: 700; line-height: 1; } /* ========================================================================= 03 · Tipos de tela / 13 · 100% algodón — fichas con datos comerciales ========================================================================= */ .alg-numhead { display: grid; grid-template-columns: 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); align-items: end; margin-bottom: clamp(20px, 3vw, 30px); padding-bottom: clamp(14px, 2vw, 20px); border-bottom: 2px solid var(--alg-ink); } @media (min-width: 760px) { .alg-numhead { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); } } .alg-numhead__num { font-family: var(--alg-font-display); font-size: clamp(3.6rem, 11vw, 8rem); line-height: 0.78; letter-spacing: -0.04em; color: var(--alg-orange); font-variant-numeric: tabular-nums; display: block; } .alg-numhead__num small { display: block; font-family: var(--alg-font-accent); font-style: italic; /* 0.19em del número baja a ~11px en móvil (3.6rem): piso de 14px. */ font-size: max(0.9rem, 0.19em); letter-spacing: 0; color: var(--alg-muted); text-transform: lowercase; margin-top: 0.25em; } .alg-numhead__body { min-width: 0; } .alg-catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); margin-top: clamp(24px, 3vw, 34px); } @media (max-width: 940px) { .alg-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .alg-catgrid { grid-template-columns: 1fr; } } /* Variante de 8 fichas (13 · 100% algodón): 4 columnas en vez de 3, mismo componente .alg-catcard. Cierra a 2 columnas antes que la parrilla base (1239 en vez de 940) para que las fichas no se aprieten de más. */ .alg-catgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1239px) { .alg-catgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .alg-catcard { display: flex; flex-direction: column; background: var(--alg-white); border: 2px solid var(--alg-ink); border-top: 3px solid var(--alg-orange); box-shadow: 6px 6px 0 var(--alg-ink); overflow: hidden; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease); } .alg-catcard:hover, .alg-catcard:focus-within { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--alg-orange); } .alg-catcard__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; line-height: 0; background: var(--alg-cream); } .alg-catcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s var(--alg-ease); } .alg-catcard:hover .alg-catcard__media img { transform: scale(1.05); } .alg-catcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 2.2vw, 22px); } .alg-catcard__kicker { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alg-muted); margin: 0 0 6px; line-height: 1.4; } .alg-catcard__desc { font-family: var(--alg-font-body); font-size: clamp(0.95rem, 1.2vw, 1.02rem); line-height: 1.6; color: var(--alg-ink); margin: 0 0 clamp(14px, 2vw, 18px); } .alg-catcard__desc strong { font-weight: 800; } .alg-catcard__title { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.5rem) !important; line-height: 1.02; color: var(--alg-ink); margin: 0 0 clamp(12px, 1.6vw, 14px); } .alg-catcard__specs { margin: 0 0 clamp(14px, 2vw, 18px); padding: 0; border-top: 1px solid var(--alg-rule); } .alg-catcard__specs > div { display: flex; align-items: baseline; gap: 0.75rem; padding: 7px 0; border-bottom: 1px solid var(--alg-rule); } .alg-catcard__specs dt { flex: 0 0 auto; font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alg-muted); font-weight: 400; margin: 0; min-width: 6.5em; } .alg-catcard__specs dd { margin: 0; flex: 1; font-family: var(--alg-font-body); font-size: 0.88rem; font-weight: 700; line-height: 1.4; color: var(--alg-ink); } .alg-catcard__foot { margin-top: auto; } /* ========================================================================= 13 · 100% algodón — ficha técnica compacta SIN foto (componente propio) Catálogo por composición: no repite el patrón con miniatura del catgrid (serían 8 fotos ya vistas en la sección 03); aquí manda el dato — top- rule orange, num + título + filas de definición y CTA al pie. ========================================================================= */ .alg-specgrid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; } @media (max-width: 1239px) { .alg-specgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Sin scroller: es una ficha de datos (texto), no una foto — se lee mejor apilada de 1 columna que recortada en un carrusel horizontal. */ @media (max-width: 620px) { .alg-specgrid { grid-template-columns: 1fr; } } .alg-spec { display: flex; flex-direction: column; background: var(--alg-white); border: 2px solid var(--alg-ink); border-top: 4px solid var(--alg-orange); box-shadow: 4px 4px 0 var(--alg-ink); --alg-spec-pad: clamp(16px, 2vw, 22px); padding: var(--alg-spec-pad); transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease); } .alg-spec:hover, .alg-spec:focus-within { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--alg-orange); } /* Foto a sangre sobre el padding de la ficha. Las miniaturas del catálogo llevan el rótulo impreso abajo: con el recorte 3:2 anclado arriba solo se ve el tejido y el nombre no se repite con el

    . */ .alg-spec__media { display: block; margin: calc(var(--alg-spec-pad) * -1) calc(var(--alg-spec-pad) * -1) var(--alg-spec-pad); aspect-ratio: 3 / 2; background: var(--alg-cream); border-bottom: 2px solid var(--alg-ink); overflow: hidden; line-height: 0; } .alg-spec__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; transition: transform 0.45s var(--alg-ease); } .alg-spec:hover .alg-spec__media img, .alg-spec:focus-within .alg-spec__media img { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .alg-spec:hover .alg-spec__media img, .alg-spec:focus-within .alg-spec__media img { transform: none; } } .alg-spec__num { display: block; font-family: var(--alg-font-mono); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--alg-orange-deep); margin-bottom: 6px; font-variant-numeric: tabular-nums; } .alg-spec__title { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important; line-height: 1.05; color: var(--alg-ink); margin: 0 0 clamp(12px, 1.6vw, 14px); } .alg-spec__rows { margin: 0 0 clamp(14px, 2vw, 16px); padding-top: 2px; border-top: 1px solid var(--alg-rule); } .alg-spec__rows > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--alg-rule); } .alg-spec__rows dt { font-family: var(--alg-font-mono); font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alg-muted); margin: 0; } .alg-spec__rows dd { font-family: var(--alg-font-body); font-size: 0.98rem; font-weight: 700; line-height: 1.4; color: var(--alg-ink); margin: 0; } .alg-spec__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--alg-font-body); font-weight: 800; font-size: 0.95rem; color: var(--alg-ink); text-decoration: none; } .alg-spec__link::after { content: "\2192"; color: var(--alg-orange-deep); transition: transform var(--alg-motion-fast) var(--alg-ease); } .alg-spec__link:hover, .alg-spec__link:focus-visible { text-decoration: underline; text-decoration-color: var(--alg-orange); color: var(--alg-ink); } .alg-spec__link:hover::after, .alg-spec__link:focus-visible::after { transform: translateX(3px); } /* Fila de "otros tejidos" al pie del catálogo (ported de tela-poliester.css: .pol-picks) — enlaces secundarios pero no decorativos: borde ink 2px, sombra sólida y flecha permanente, con ink-flood al hover. */ .alg-picks { margin: clamp(30px, 4vw, 42px) 0 0; padding: clamp(20px, 2.6vw, 28px) 0 0; border-top: 2px solid var(--alg-ink); } .alg-picks__lbl { display: flex; align-items: center; gap: 0.7rem; font-family: var(--alg-font-mono); font-size: clamp(0.875rem, 1.1vw, 1rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--alg-ink); margin-bottom: clamp(16px, 2vw, 20px); } .alg-picks__lbl::before { content: ""; width: 12px; height: 12px; background: var(--alg-orange); flex-shrink: 0; } .alg-picks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(9px, 1.2vw, 12px); } .alg-pick { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 46px; padding: 11px 15px; background: var(--alg-white); border: 2px solid var(--alg-ink); box-shadow: 3px 3px 0 var(--alg-ink); color: var(--alg-ink); font-family: var(--alg-font-body); font-weight: 800; font-size: 0.92rem; line-height: 1.2; text-decoration: none; transition: transform var(--alg-motion-fast) var(--alg-ease), box-shadow var(--alg-motion-fast) var(--alg-ease), background var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } /* Flecha siempre visible: es lo que distingue el chip de una etiqueta */ .alg-pick::after { content: "\2192"; font-size: 0.95em; line-height: 1; color: var(--alg-orange-deep); transition: transform var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-pick:hover, .alg-pick:focus-visible { background: var(--alg-ink); color: var(--alg-paper); text-decoration: none; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--alg-orange); } .alg-pick:hover::after, .alg-pick:focus-visible::after { color: var(--alg-orange); transform: translateX(3px); } .alg-pick:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--alg-orange); } /* Video embebido (¿Qué telas son 100% algodón?) — caja 16:9 con el mismo frame-chunky que .alg-figure, sombra naranja en vez de ink para que no se confunda con una foto de producto. */ .alg-video { display: block; /* A todo el ancho del contenedor (1600px) el video dominaba la sección. */ max-width: 880px; margin: clamp(24px, 3vw, 34px) 0 0; aspect-ratio: 16 / 9; background: var(--alg-ink); border: 2px solid var(--alg-ink); box-shadow: 8px 8px 0 var(--alg-orange); overflow: hidden; } .alg-video iframe { display: block; width: 100%; height: 100%; border: 0; } /* Video + aside (más telas en catálogo + CTA): solo, el video de 880px dejaba vacía la mitad derecha de la sección. */ .alg-videosplit { margin-top: clamp(30px, 4vw, 42px); } .alg-videosplit .alg-video { margin-top: 0; } @media (min-width: 992px) { .alg-videosplit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; } .alg-videosplit .alg-video { max-width: none; } .alg-videosplit__aside .alg-picks { margin-top: 0; } } /* ========================================================================= 15 · Mezclas — ledger de índice (Almanaque · dot-leader) ========================================================================= */ .alg-ledger { display: flex; flex-direction: column; margin-top: clamp(22px, 3vw, 32px); border-top: 2px solid var(--alg-ink); } .alg-ledger__row { display: flex; align-items: center; gap: 0.5rem; padding: clamp(14px, 2vw, 20px) clamp(10px, 1.6vw, 16px); border-bottom: 1px solid var(--alg-rule); text-decoration: none; color: var(--alg-ink); transition: background var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-ledger__row:hover, .alg-ledger__row:focus-visible { background: var(--alg-ink); color: var(--alg-paper); text-decoration: none; } .alg-ledger__media { flex: 0 0 auto; display: block; width: clamp(112px, 13vw, 168px); aspect-ratio: 4 / 3; background: var(--alg-cream); border: 1px solid var(--alg-ink); overflow: hidden; line-height: 0; align-self: center; margin-right: clamp(10px, 1.4vw, 14px); } .alg-ledger__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .alg-ledger__row:hover .alg-ledger__media { border-color: var(--alg-paper); } /* Envoltorio del nombre + descripción — ocupa el lugar que antes era solo el nombre; permite una segunda línea de contexto sin tocar el resto de la fila (miniatura, dot-leader, composición, flecha). */ .alg-ledger__txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .alg-ledger__name { font-family: var(--alg-font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.05; color: inherit; } .alg-ledger__row:hover .alg-ledger__name { color: var(--alg-paper); } .alg-ledger__desc { font-family: var(--alg-font-body); font-size: 0.95rem; line-height: 1.35; color: var(--alg-muted); text-transform: none; transition: color var(--alg-motion-fast) var(--alg-ease); } .alg-ledger__row:hover .alg-ledger__desc { color: rgba(250, 246, 238, 0.72); } .alg-ledger__lead { /* Con descripción en la fila, el leader corto deja el ancho al texto: a flex:1 partía "Alternativa para sábanas…" en 3-4 líneas. */ flex: 0 1 clamp(20px, 5vw, 64px); min-width: 20px; border-bottom: 2px dotted var(--alg-rule); } .alg-ledger__row:hover .alg-ledger__lead { border-bottom-color: var(--alg-rule-on-dark); } .alg-ledger__val { flex: 0 0 auto; font-family: var(--alg-font-mono); /* Piso 14px: en tela-tul.css bajaba a 0.78rem por debajo de 1040px de viewport (la mayoría de móviles/tablets); aquí es la composición (dato real, p.ej. "50% algodón · 50% poliéster"), así que sube. */ font-size: clamp(0.88rem, 1.2vw, 0.98rem); letter-spacing: 0.05em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--alg-orange-deep); /* AA 5.42:1 sobre paper */ text-align: right; } .alg-ledger__row:hover .alg-ledger__val, .alg-ledger__row:focus-visible .alg-ledger__val { color: var(--alg-orange); } /* orange-deep sobre ink no llega a AA */ .alg-ledger__cue { flex: 0 0 auto; color: var(--alg-muted); font-size: 0.95rem; margin-left: 0.4rem; transition: transform var(--alg-motion-fast) var(--alg-ease), color var(--alg-motion-fast) var(--alg-ease); } .alg-ledger__row:hover .alg-ledger__cue { color: var(--alg-orange); transform: translateX(4px); } @media (max-width: 620px) { .alg-ledger__row { flex-wrap: wrap; } .alg-ledger__lead { display: none; } /* Miniatura + texto comparten la primera línea; composición + flecha la segunda. Con flex-basis:auto el texto largo saltaba bajo la foto y la flecha quedaba sola en una tercera línea. */ .alg-ledger__txt { flex: 1 1 0; } .alg-ledger__val { flex: 1 1 calc(100% - 2.5rem); text-align: left; margin-top: 6px; } .alg-ledger__cue { margin-top: 6px; } } /* ========================================================================= 16 · Mayoreo (INK · MegaTextBg · Manifiesto) ========================================================================= */ .alg-section--ink { background: var(--alg-ink); color: var(--alg-paper); overflow: hidden; } .alg-section--ink::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(250, 246, 238, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(250, 246, 238, 0.045) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .alg-section--ink > .alg-container { position: relative; z-index: 1; } .alg-section--ink .alg-title { color: var(--alg-paper); } .alg-section--ink .alg-eyebrow { color: rgba(250, 246, 238, 0.62); } .alg-section--ink .alg-lead { color: rgba(250, 246, 238, 0.84); } .alg-section--ink .alg-lead strong { color: var(--alg-paper); } .alg-section--ink .alg-prose p { color: rgba(250, 246, 238, 0.84); } .alg-section--ink .alg-prose strong { color: var(--alg-paper); } .alg-section--ink .alg-cta--whatsapp { border-color: var(--alg-paper); box-shadow: 8px 8px 0 var(--alg-orange); } .alg-section--ink .alg-cta--whatsapp:hover { box-shadow: 11px 11px 0 var(--alg-orange); } .alg-section--ink .alg-cta--whatsapp:active { box-shadow: 4px 4px 0 var(--alg-orange); } .alg-section--ink .alg-btn--outline { color: var(--alg-paper); border-color: var(--alg-paper); } /* El purple sobre ink cae a 2.45:1; sobre oscuro la señal de mayoreo va en yellow (único elemento yellow de la página). */ .alg-section--ink .alg-eyebrow--mayoreo[data-stamp]:not([data-stamp=""])::before { border-color: var(--alg-yellow); color: var(--alg-yellow); } .alg-section--ink .alg-btn--outline:hover { background: var(--alg-paper); color: var(--alg-ink); } .alg-megahead { position: relative; isolation: isolate; /* El mega-text mide ~0.78em de alto: el padding debe dejarlo pasar o el eyebrow queda ilegible encima de la palabra de fondo. */ padding-top: clamp(46px, 10vw, 118px); margin-bottom: clamp(18px, 2.6vw, 28px); } .alg-megahead__bg { position: absolute; top: 0; left: 0; font-family: var(--alg-font-display); font-size: clamp(3.4rem, 14vw, 10rem); line-height: 0.78; letter-spacing: -0.03em; text-transform: uppercase; color: var(--alg-rule-on-dark); white-space: nowrap; pointer-events: none; z-index: -1; } .alg-megahead__fg { position: relative; max-width: 34ch; } /* Chips de "quién compra" dentro de .alg-quote__text — texto plano sobre ink, sin ink-flood (no son enlaces): solo un borde paper para que lean como etiquetas y no como botones. */ .alg-clients { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(20px, 2.6vw, 26px) 0 0; padding: 0; } .alg-clients li { border: 2px solid var(--alg-paper); color: var(--alg-paper); font-family: var(--alg-font-body); font-weight: 800; font-size: 0.95rem; line-height: 1.2; padding: 9px 14px; } /* ========================================================================= 16b · Cotizador (FormCard §10.6) — vive dentro de la banda ink Card en paper sobre ink: el contraste lo separa del fondo sin necesitar otro color. Sin backend: arma el mensaje y abre WhatsApp. ========================================================================= */ .alg-quote { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 60px); align-items: start; } @media (min-width: 1040px) { .alg-quote { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } } .alg-quote__text { min-width: 0; } .alg-form { position: relative; background: var(--alg-paper); color: var(--alg-ink); border: 2px solid var(--alg-ink); border-top: 4px solid var(--alg-orange); box-shadow: 12px 12px 0 var(--alg-orange); padding: clamp(22px, 3.2vw, 40px); min-width: 0; } /* Reset del reboot de Bootstrap dentro del formulario. `label` trae margin-bottom:.5rem y `legend` además font-size:1.5rem: por eso los campos cuya fila de etiqueta es un