/* ============================================================ GAT Fashion Lab · Design Tokens Colors + Type foundations · Webflow-ready, Google-Fonts only. Import this once at the top of any HTML surface. In Webflow: 1. Add the 3 Google Fonts in Project Settings → Fonts. Poppins · 400, 500, 600, 700 Cormorant Garamond · 500 italic, 600 italic JetBrains Mono · 400, 500 2. Paste this file inside an Embed in the (or as a Project-level Custom Code block under Custom Code). ============================================================ */ /* Single Google Fonts request — only the weights we actually use. Self-hosted TTFs removed to keep payload tiny (≈1.4MB saved). */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------- BASE COLOR TOKENS ---------- */ /* Neutrals — warm off-white + near-black "ink". The stone tone is the signature GAT accent: paper/linen adjacent. */ --gat-bg: #F7F7F7; /* page background */ --gat-bg-warm: #E8E6E1; /* outer/off-canvas warm gray */ --gat-stone: #EDE8DF; /* accent surface, chips, tray */ --gat-ink: #0F0F0F; /* primary text, dark surfaces */ --gat-ink-soft: #222222; /* subheadings */ --gat-muted: #6B6B6B; /* secondary text */ --gat-line: #E3DDD2; /* hairline on warm surfaces */ --gat-line-cool: #ECE7DD; /* hairline on cards */ --gat-border: #D5CFC2; /* interactive borders (inputs, chips) */ --gat-border-soft: #D8D2C5; /* progress rail */ /* Brand — monochrome. Pure black & graphite for CTAs, focus, selection, links. Sin acento de color: blanco y negro. */ --gat-brand: #0F0F0F; --gat-brand-dark: #000000; --gat-brand-50: #F2F2F2; /* selected card fill */ --gat-brand-100: #E6E6E6; /* chips */ --gat-brand-200: #C0C0C0; /* chip border */ /* Semantic — muted, not saturated. Mapping factory status signals. */ --gat-success: #2E7D5B; --gat-success-bg: #E5F1EA; --gat-warning: #C08A1E; --gat-warning-bg: #FFF4DF; --gat-warning-ink: #5A3E11; --gat-error: #B04A3B; --gat-error-bg: #FDECEA; --gat-error-ink: #7A2A22; /* Channel-specific */ --gat-whatsapp: #25D366; /* ---------- SEMANTIC COLOR ALIASES ---------- */ --fg-1: var(--gat-ink); --fg-2: var(--gat-ink-soft); --fg-3: var(--gat-muted); --fg-on-brand: #FFFFFF; --bg-page: var(--gat-bg); --bg-surface: #FFFFFF; --bg-sunken: var(--gat-stone); --bg-inverse: var(--gat-ink); --accent: var(--gat-brand); --accent-hover: var(--gat-brand-dark); --accent-soft: var(--gat-brand-50); /* ---------- TYPE FOUNDATIONS ---------- */ --font-sans: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; /* Tracking: headlines are tight, UI is neutral, eyebrows are open. */ --tracking-tight: -0.03em; --tracking-display: -0.02em; --tracking-body: 0; --tracking-eyebrow: 0.06em; --tracking-micro: 0.04em; /* Type scale — desktop. Use clamp in surfaces that must respond. */ --fs-display: 48px; --lh-display: 1.05; --fs-h1: 38px; --lh-h1: 1.1; --fs-h2: 30px; --lh-h2: 1.15; --fs-h3: 22px; --lh-h3: 1.25; --fs-h4: 16px; --lh-h4: 1.35; --fs-body: 14px; --lh-body: 1.5; --fs-body-lg: 16px; --lh-body-lg: 1.55; --fs-small: 13px; --lh-small: 1.45; --fs-xs: 12px; --lh-xs: 1.4; --fs-micro: 11px; --lh-micro: 1.35; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---------- SPACING + SHAPE ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; /* inputs, cards inner */ --radius-xl: 14px; /* cards */ --radius-2xl: 18px; /* modals */ --radius-pill: 999px; /* buttons, pills */ /* ---------- ELEVATION ---------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.05); --shadow-2: 0 4px 20px rgba(0,0,0,.08); --shadow-3: 0 10px 40px rgba(0,0,0,.12); --shadow-modal: 0 20px 60px rgba(0,0,0,.3); --shadow-sheet: 0 -10px 30px rgba(0,0,0,.2); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(.2,.6,.2,1); --dur-fast: 120ms; --dur-base: 150ms; --dur-slow: 240ms; } /* ============================================================ SEMANTIC TYPE UTILITIES Apply as classes OR copy the declarations into component rules. ============================================================ */ .gat-display, h1.gat-display { font-family: var(--font-sans); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); font-weight: var(--fw-semibold); color: var(--fg-1); } .gat-h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); color: var(--fg-1); } .gat-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); color: var(--fg-1); } .gat-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); color: var(--fg-1); } .gat-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--fg-1); } .gat-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } .gat-body-lg { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-3); } .gat-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); } .gat-micro { font-family: var(--font-sans); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--fg-3); } /* Eyebrow — tiny, uppercase, tracked. Used on step indicators and section kickers ("PASO 4 DE 4 · DATOS"). */ .gat-eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-3); } /* Wordmark style — used for the GAT inline logotype. */ .gat-wordmark { font-family: var(--font-sans); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .gat-mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; } /* ============================================================ GAT Fashion Lab · Rediseño web — capa editorial-tech FUENTE: Claude Design proyecto 57108a5c (web/site.css), aprobado 2026-07-16. Copia verbatim + bloque "adaptaciones build estático" al final. Se sirve concatenado DESPUÉS de Brand colors_and_type.css. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--gat-bg);color:var(--gat-ink);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--gat-ink)} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--gat-ink);color:#fff} .wrap{max-width:1360px;margin:0 auto;padding:0 56px} @media(max-width:760px){.wrap{padding:0 24px}} /* ---------- primitivas editoriales ---------- */ .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--gat-muted);display:inline-flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:28px;height:1px;background:var(--gat-ink)} .eyebrow.light{color:rgba(255,255,255,.6)} .eyebrow.light::before{background:rgba(255,255,255,.4)} .sec-num{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--gat-muted);font-weight:500} em.sig,h1 em,h2 em,h3 em{font-family:var(--font-serif);font-style:italic;font-weight:600;font-size:1.22em;line-height:.8;letter-spacing:-.01em} .mono{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .hline{height:1px;background:var(--gat-line);width:100%} /* ---------- botones ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding:14px 26px;border-radius:999px;border:1px solid transparent;transition:all 150ms var(--ease-standard);white-space:nowrap;cursor:pointer} .btn-ink{background:var(--gat-ink);color:#fff} .btn-ink:hover{background:#000;color:#fff;transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--gat-ink);border-color:var(--gat-border)} .btn-ghost:hover{border-color:var(--gat-ink)} .btn-light{background:#fff;color:var(--gat-ink)} .btn-light:hover{background:var(--gat-stone);color:var(--gat-ink)} .btn-lg{font-size:15px;padding:17px 30px} .btn .arr{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-right:-10px;flex-shrink:0} .btn-light .arr,.btn-ghost .arr{background:var(--gat-ink);color:#fff} .arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gat-ink);border-bottom:1px solid var(--gat-border);padding-bottom:3px;transition:border-color 120ms} .arrow-link::after{content:"→"} .arrow-link:hover{border-color:var(--gat-ink)} .sec.ink .arrow-link,.ink-head .arrow-link{color:#fff;border-color:rgba(255,255,255,.35)} .sec.ink .arrow-link:hover{border-color:#fff} /* ---------- header ---------- */ .gnav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,#F7F7F7 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--gat-line)} .gnav-in{max-width:1360px;margin:0 auto;padding:0 56px;height:76px;display:flex;align-items:center;gap:40px;position:relative} .gnav-logo img{height:44px;width:auto} .gnav-links{display:flex;gap:30px;margin-left:auto;align-items:center} .gnav-links a{font-size:14px;color:var(--gat-ink-soft);transition:color 120ms} .gnav-links a:hover{color:var(--gat-ink)} .gnav-links a.on{color:var(--gat-ink);font-weight:600} .gnav-links a.gnav-lang{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;display:inline-flex;align-items:center;gap:8px;color:var(--gat-ink-soft);padding:6px 2px;border-bottom:1px solid transparent} .gnav-links a.gnav-lang:hover{color:var(--gat-ink);border-bottom-color:var(--gat-ink)} .gnav-lang svg{border-radius:2px;box-shadow:0 0 0 1px rgba(15,15,15,.12)} .gnav-links a.gnav-cta,.gnav-links a.gnav-cta:hover{background:var(--gat-ink);color:#fff;padding:12px 22px;border-radius:999px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:9px} .gnav-cta .arr{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;margin-right:-8px} /* nav responsive: menú hamburguesa cuando las opciones no caben (≤1060px) */ .gnav-burger{display:none} @media(max-width:1060px){ .gnav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;cursor:pointer;padding:11px;border-radius:8px} .gnav-burger span{display:block;height:2px;width:100%;background:var(--gat-ink);border-radius:2px;transition:transform 200ms var(--ease-standard),opacity 150ms} .gnav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--gat-bg);border-top:1px solid var(--gat-line);border-bottom:1px solid var(--gat-line);padding:6px 0;display:none;box-shadow:0 24px 40px -20px rgba(15,15,15,.28)} .gnav-toggle:checked ~ .gnav-links{display:flex} .gnav-links a{display:block;padding:15px 56px;font-size:16px;border-bottom:1px solid var(--gat-line)} .gnav-links a.gnav-cta,.gnav-links a.gnav-cta:hover{margin:12px 56px 8px;justify-content:center;border-bottom:0} .gnav-links a.gnav-lang{border-bottom:0;display:flex;justify-content:flex-start;padding:15px 56px} .gnav-toggle:checked ~ .gnav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .gnav-toggle:checked ~ .gnav-burger span:nth-child(2){opacity:0} .gnav-toggle:checked ~ .gnav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:760px){.gnav-in{padding:0 24px}.gnav-links a,.gnav-links a.gnav-cta,.gnav-links a.gnav-lang{padding-left:24px;padding-right:24px}.gnav-links a.gnav-cta{margin-left:24px;margin-right:24px}} .crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gat-muted);display:flex;gap:10px;align-items:center} .crumb a:hover{color:var(--gat-ink)} /* ---------- hero ---------- */ .hero{padding:88px 0 0;position:relative;overflow:hidden;background:var(--gat-bg)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(15,15,15,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(15,15,15,.03) 1px,transparent 1px);background-size:96px 96px} .hero .wrap{position:relative;z-index:1} .hero-head{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px;align-items:center;padding-bottom:56px} .hero-head .crumb{margin-bottom:28px} .page-trabaja-con-nosotros .hero-head{align-items:center} .hero h1{font-size:clamp(44px,6vw,88px);line-height:.98;letter-spacing:-.04em;font-weight:500;text-wrap:balance} .hero-side{display:flex;flex-direction:column;gap:24px;padding-bottom:8px} .hero-side .sub{font-size:17px;line-height:1.6;color:var(--gat-muted);text-wrap:pretty} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-media{position:relative;border-top:1px solid var(--gat-line)} .hero-media .img-ph{border-radius:0;border-left:0;border-right:0;border-top:0} .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--gat-line)} .hero-stats .it{padding:32px 30px 32px 30px;display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--gat-line)} .hero-stats .it:nth-child(3n+1){border-left:0;padding-left:0} .hero-stats .it:nth-child(n+4){border-top:1px solid var(--gat-line)} .hero-stats .num{font-size:clamp(42px,3.4vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1} .hero-stats .num small{font-size:.4em;font-weight:500;color:var(--gat-muted);letter-spacing:0} .hero-stats .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gat-muted)} @media(max-width:1000px){.hero-head{grid-template-columns:1fr;gap:32px;align-items:start}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats .it:nth-child(odd){border-left:0;padding-left:0}} /* hero: cap de altura de la imagen en desktop (no debe comerse el scroll) */ @media(min-width:1001px){.hero-media .img-ph,.hero-media img{max-height:min(58vh,540px)}.hero-media img{width:100%;object-fit:cover;display:block}} /* banner de clientes bajo el hero (reemplaza las stats; logos negros sobre fondo claro) */ .hero-clients{display:flex;flex-direction:column;gap:20px;padding:40px 0 4px;border-bottom:1px solid var(--gat-line)} .brand-wall-ink .brand-track img{opacity:.72} .brand-wall-ink .brand-track a:hover img{opacity:1} /* byline de artículo (autor + fechas, EEAT) */ .byline{display:flex;align-items:center;gap:14px;margin-top:36px;border-top:1px solid var(--gat-line);padding:22px 0 4px} .byline-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--gat-line)} .byline-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .byline-name{font-size:14px;font-weight:600;color:var(--gat-ink)} .byline-name a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gat-border)} .byline-name a:hover{border-bottom-color:var(--gat-ink)} .byline-role{font-size:12.5px;color:var(--gat-muted);text-wrap:pretty} .byline-dates{display:flex;gap:10px;align-items:center;margin-top:3px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gat-muted)} .byline-dates span{opacity:.45} /* ---------- placeholder de imagen (mismos IDs del diccionario) ---------- */ .img-ph{background:var(--gat-stone);background-image:radial-gradient(ellipse at 30% 20%,#F2EEE6 0%,var(--gat-stone) 70%);display:flex;align-items:center;justify-content:center;color:var(--gat-muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-align:center;padding:24px;width:100%;position:relative;border-radius:18px;overflow:hidden} .img-ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(15,15,15,.12);border-radius:10px;pointer-events:none} .img-ph[data-aspect="3:2"]{aspect-ratio:3/2} .img-ph[data-aspect="21:9"]{aspect-ratio:21/9} .img-ph[data-aspect="4:3"]{aspect-ratio:4/3} .img-ph[data-aspect="4:5"]{aspect-ratio:4/5} .img-ph[data-aspect="3:4"]{aspect-ratio:3/4} .img-ph[data-aspect="1:1"]{aspect-ratio:1/1} .img-ph[data-aspect="16:9"]{aspect-ratio:16/9} /* imagen real de la DB (misma caja del placeholder: hereda aspect/radius/contexto) */ .img-ph.has-img{padding:0;margin-top:0;margin-bottom:0} .img-ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .img-ph.has-img::after{border-color:rgba(255,255,255,.22)} .img-ph--todo{flex-direction:column;gap:12px;padding:28px;background:repeating-linear-gradient(-45deg,#FBF4E6,#FBF4E6 13px,#F4E9D2 13px,#F4E9D2 26px)} .img-ph--todo::after{border:1.5px dashed rgba(176,120,24,.55)} .img-ph-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--gat-ink);color:#fff;padding:4px 11px;border-radius:999px} .img-ph-desc{font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:0;line-height:1.5;text-transform:none;color:var(--gat-ink);max-width:36ch} /* ---------- answer-first (AEO) ---------- */ .answer{padding:72px 0;border-bottom:1px solid var(--gat-line)} .answer-in{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start} .answer .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gat-muted);display:flex;flex-direction:column;gap:12px} .answer .tag::after{content:"";width:44px;height:1px;background:var(--gat-ink)} .answer p{font-size:clamp(20px,2.1vw,27px);line-height:1.45;letter-spacing:-.015em;font-weight:400;color:var(--gat-ink);max-width:920px;text-wrap:pretty} .answer p strong{font-weight:600} /* §5.b.4: sin el rótulo , el answer no reserva su pista angosta (solo desktop; móvil ya es 1 col) */ @media(min-width:861px){.answer-in:not(:has(> .tag)){grid-template-columns:1fr}} @media(max-width:860px){.answer-in{grid-template-columns:1fr;gap:24px}} /* ---------- secciones ---------- */ .sec{padding:104px 0} .sec.tight{padding:88px 0} .sec.alt{background:#fff;border-top:1px solid var(--gat-line);border-bottom:1px solid var(--gat-line)} .sec.warm{background:var(--gat-bg-warm)} .sec-head{display:grid;grid-template-columns:140px minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;padding-bottom:40px;border-bottom:1px solid var(--gat-line);margin-bottom:56px} .sec-head h2{font-size:clamp(34px,3.6vw,54px);line-height:1.02;letter-spacing:-.03em;font-weight:500;text-wrap:balance} .sec-head .lede{font-size:16px;color:var(--gat-muted);line-height:1.6;text-wrap:pretty;max-width:46ch} .sec-head.narrow{grid-template-columns:140px 1fr} /* §5.b.4: sin el rótulo , la sec-head no reserva la pista de 140px */ .sec-head.narrow:not(:has(> .sec-num)){grid-template-columns:1fr} @media(min-width:961px){.sec-head:not(:has(> .sec-num)){grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}} @media(max-width:960px){.sec-head{grid-template-columns:1fr;gap:18px;align-items:start}} /* ---------- cards ---------- */ .grid{display:grid;gap:24px} /* los items de grid nacen con min-width:auto y no pueden encoger bajo su contenido: un hijo ancho (marquee de logos con width:max-content) desborda toda la página en mobile */ .grid>*{min-width:0} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:1060px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--gat-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform 150ms var(--ease-standard),box-shadow 150ms} .card:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(15,15,15,.08)} .card .img-ph{border-radius:0} .card .img-ph::after{inset:12px;border-radius:8px} .card figure.card-img{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--gat-stone)} .card figure.card-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block} .case-links{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap} .case-links a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gat-ink-soft);display:inline-flex;align-items:center;gap:5px;transition:color 120ms} .case-links a:hover{color:var(--gat-ink)} .card-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:10px;flex:1} .card-kind{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gat-muted);font-weight:500} .card h3{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance} .card p{font-size:14px;color:var(--gat-muted);line-height:1.55;text-wrap:pretty} .card .arrow-link{margin-top:auto;padding-top:14px;border-bottom:0;font-size:13px} .card.flat{border-radius:18px} .card.flat .card-body{padding:30px} /* ---------- steps / listas numeradas ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gat-line);border:1px solid var(--gat-line);border-radius:18px;overflow:hidden} .step{background:#fff;padding:38px 34px;display:flex;flex-direction:column;gap:14px} .step .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--gat-muted)} .step h3{font-size:20px;font-weight:600;letter-spacing:-.015em} .step p{font-size:14px;color:var(--gat-muted);line-height:1.6} @media(max-width:860px){.steps{grid-template-columns:1fr}} .feature-rows{display:grid;gap:0;border-top:1px solid var(--gat-line)} .frow{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);gap:4px 40px;padding:24px 0;border-bottom:1px solid var(--gat-line);align-items:center} .frow .n{grid-column:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gat-muted);margin-bottom:2px} .frow h3{grid-column:1;grid-row:2;font-size:18px;font-weight:600;letter-spacing:-.015em;margin-top:0} .frow p{grid-column:2;grid-row:1/3;font-size:14.5px;color:var(--gat-muted);line-height:1.6} @media(max-width:860px){.frow{grid-template-columns:1fr;gap:6px}.frow p{grid-column:1;grid-row:auto;margin-top:6px}.frow h3{grid-column:1;grid-row:auto}} /* ---------- chips ---------- */ .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid var(--gat-border);color:var(--gat-ink-soft);max-width:100%} .chip.solid{background:var(--gat-ink);color:#fff;border-color:var(--gat-ink)} /* ---------- sección ink (stats / prueba) ---------- */ .ink{background:var(--gat-ink);color:#fff} .ink .eyebrow{color:rgba(255,255,255,.55)} .ink .eyebrow::before{background:rgba(255,255,255,.4)} .ink-head{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:0} .ink-head h2{font-size:clamp(36px,4vw,60px);line-height:1;letter-spacing:-.03em;font-weight:500;text-wrap:balance} .ink-head p{font-size:16px;color:rgba(255,255,255,.65);line-height:1.6} @media(max-width:900px){.ink-head{grid-template-columns:1fr;gap:24px}} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:rgba(255,255,255,.14)} /* con 5-6 datos, auto-fit deja una fila con un solo item suelto (el .wrap topa en 1360px y solo entran 5 pistas). Se fija por cantidad real: 3 columnas en pantalla media, 6 en grande. */ @media(min-width:901px){.stats-grid:has(.stat:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1200px){.stats-grid:has(.stat:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}} .stat{background:var(--gat-ink);padding:44px 26px 48px;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden} .stat .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);overflow-wrap:anywhere} .stat .num{font-size:clamp(32px,2.7vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1;margin-top:14px;white-space:nowrap;min-width:0} .stat .num small{display:block;font-size:.26em;font-weight:500;opacity:.6;margin-left:0;margin-top:8px;letter-spacing:.02em;line-height:1.1} .stat .desc{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.5} @media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}} .ink-foot{display:flex;justify-content:space-between;gap:24px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);flex-wrap:wrap} /* muro de logos = marquee animado (una sola línea que corre en loop; pausa al pasar el mouse). los logos son siluetas monocromas de proporciones muy distintas (escudo vs wordmark ancho): se acotan por caja, no por alto, para que ninguno domine la fila. */ .brand-wall{overflow:hidden;min-width:0;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)} .brand-track{display:flex;align-items:center;width:max-content;animation:brand-marquee 45s linear infinite} .brand-track > *{flex:0 0 auto;margin-right:52px} .brand-track a{display:inline-flex;align-items:center;line-height:0} .brand-track img{max-height:38px;max-width:132px;width:auto;height:auto;opacity:.82;transition:opacity 140ms;display:block} .brand-track a:hover img{opacity:1} .brand-wall:hover .brand-track{animation-play-state:paused} .brand-wall-stack{display:flex;flex-direction:column;gap:20px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .brand-wall-stack .brand-track{animation-duration:55s} .brand-wall-stack .brand-track-r{animation-direction:reverse} /* proof oscuro a 2 columnas: texto legible | muro de logos (Alejo 2026-07-25) */ .proof-cols{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:56px;align-items:center} .proof-text{display:flex;flex-direction:column;gap:18px;align-items:flex-start} .proof-text > p{margin:0} @media(max-width:860px){.proof-cols{grid-template-columns:1fr;gap:28px}} /* muro de 4 filas, todas al mismo sentido, escalonadas por contenido rotado */ .brand-wall-cols{display:flex;flex-direction:column;gap:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .brand-wall-cols .brand-track img{max-height:30px} .brand-wall-cols .brand-track:nth-child(1){animation-duration:58s} .brand-wall-cols .brand-track:nth-child(2){animation-duration:70s} .brand-wall-cols .brand-track:nth-child(3){animation-duration:62s} .brand-wall-cols .brand-track:nth-child(4){animation-duration:74s} .brand-wall-stack.brand-wall-ink .brand-track img{opacity:.72} @keyframes brand-marquee{to{transform:translateX(-50%)}} /* marquee de logos: animado SIEMPRE (pedido Alejo 2026-07-25), incluso con reduce-motion; es un movimiento suave y horizontal, de bajo riesgo. */ @media(max-width:600px){.brand-track img{max-height:26px;max-width:104px}.brand-track > *{margin-right:36px}} /* ---------- FAQ ---------- */ /* sin border-top: la .sec-head de arriba ya cierra con su propia línea (si no, salen dos separadores) */ .faq-it{border-bottom:1px solid var(--gat-line)} .faq-q{padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;font-size:18px;font-weight:500;letter-spacing:-.01em} .faq-q .ico{width:30px;height:30px;border-radius:50%;background:var(--gat-stone);display:grid;place-items:center;flex-shrink:0;transition:transform 150ms,background 150ms} .faq-it.open .faq-q .ico{background:var(--gat-ink);color:#fff;transform:rotate(45deg)} .faq-a{display:none;padding:0 0 28px;color:var(--gat-muted);font-size:15.5px;line-height:1.65;max-width:820px;text-wrap:pretty} .faq-a a{border-bottom:1px solid var(--gat-border);color:var(--gat-ink)} .faq-it.open .faq-a{display:block} /* ---------- CTA final ---------- */ .cta-band{background:var(--gat-ink);color:#fff;padding:120px 0;position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;top:-40%;right:-15%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%)} .cta-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:28px;max-width:840px} .cta-in h2{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.035em;font-weight:500;text-wrap:balance} .cta-in p{font-size:17px;color:rgba(255,255,255,.65);line-height:1.6;max-width:52ch} /* ---------- footer ---------- */ .footer{background:var(--gat-ink);color:#fff;padding:88px 0 36px;border-top:1px solid rgba(255,255,255,.1)} .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:56px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.14)} .footer-brand img{height:36px;filter:brightness(0) invert(1);margin-bottom:22px} .footer-brand p{color:rgba(255,255,255,.55);font-size:14px;line-height:1.6;max-width:300px} .footer-brand .badges{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap} .footer-brand .badges span{border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:999px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)} .footer h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:20px;font-weight:600} .footer ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer ul a{color:rgba(255,255,255,.82);font-size:13.5px} .footer ul a:hover{color:#fff} .footer-bottom{padding-top:30px;margin-top:30px;display:flex;justify-content:space-between;gap:20px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);flex-wrap:wrap} .footer-bottom a{color:rgba(255,255,255,.6)} .footer-bottom a:hover{color:#fff} @media(max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}} /* ---------- prosa (artículos / playbooks) ---------- */ .prose{max-width:760px} .prose p{font-size:16.5px;line-height:1.75;color:var(--gat-ink-soft);margin-bottom:22px;text-wrap:pretty} .prose h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;font-weight:600;line-height:1.15;margin:56px 0 20px} .prose h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:40px 0 14px} .prose ul,.prose ol{padding-left:22px;margin-bottom:22px;display:flex;flex-direction:column;gap:9px;color:var(--gat-ink-soft);font-size:16px;line-height:1.6} .prose li::marker{font-family:var(--font-mono);color:var(--gat-muted);font-size:.85em} .prose a{border-bottom:1px solid var(--gat-border);color:var(--gat-ink);font-weight:500} .prose a:hover{border-color:var(--gat-ink)} .prose strong{font-weight:600} .prose .img-ph{margin:36px 0} .prose blockquote{border-left:2px solid var(--gat-ink);padding:6px 0 6px 28px;margin:32px 0;font-family:var(--font-serif);font-style:italic;font-size:24px;line-height:1.4;color:var(--gat-ink)} /* ---------- tablas ---------- */ .tbl{width:100%;border-collapse:collapse;border:1px solid var(--gat-line);border-radius:18px;overflow:hidden;background:#fff;font-size:14px} .tbl-wrap{border:1px solid var(--gat-line);border-radius:18px;overflow:hidden;background:#fff;margin:32px 0} .tbl th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;text-align:left;padding:16px 22px;background:var(--gat-stone);color:var(--gat-ink-soft);border-bottom:1px solid var(--gat-line)} .tbl td{padding:15px 22px;border-bottom:1px solid var(--gat-line-cool);color:var(--gat-ink-soft);vertical-align:top;line-height:1.5} .tbl tr:last-child td{border-bottom:0} .tbl td:first-child{font-weight:600;color:var(--gat-ink);white-space:nowrap} /* ---------- misc ---------- */ .note{border-left:2px solid var(--gat-ink);padding:6px 0 6px 26px;font-size:15.5px;line-height:1.65;color:var(--gat-ink-soft);text-wrap:pretty} .kicker-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} /* ============================================================ Adaptaciones del build estático (no vienen del design system): FAQ nativo
(sin JS), archivo .idx de hubs, prosa sobre fondo ink, badge de preview. Mantener al final. ============================================================ */ summary.faq-q{list-style:none} summary.faq-q::-webkit-details-marker{display:none} details.faq-it .faq-a{display:block} details.faq-it[open] .faq-q .ico{background:var(--gat-ink);color:#fff;transform:rotate(45deg)} .faq-a p{margin-bottom:12px} .faq-a p:last-child{margin-bottom:0} .idx{columns:3;column-gap:48px} .idx a{display:block;padding:11px 0;border-bottom:1px solid var(--gat-line-cool);font-size:13.5px;color:var(--gat-ink-soft);line-height:1.45;break-inside:avoid} .idx a:hover{color:var(--gat-ink)} @media(max-width:1000px){.idx{columns:2}} @media(max-width:640px){.idx{columns:1}} .ink-body{margin-top:44px} .ink-body p{font-size:15.5px;color:rgba(255,255,255,.68);line-height:1.65;max-width:820px;margin-bottom:14px} .ink-body strong{color:#fff;font-weight:600} .ink-body a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)} .ink-body ul,.ink-body ol{color:rgba(255,255,255,.75);padding-left:20px;display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .ink-body h3,.ink-body h4{color:#fff;margin:28px 0 10px;font-weight:600} .ink-body .img-ph{margin:28px 0} .hero.no-media .hero-head{padding-bottom:72px} .faq-group{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding:56px 0;border-top:1px solid var(--gat-line);align-items:start} .faq-group .gh{position:sticky;top:104px} .faq-group h2{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:14px} .faq-group .faq-q{font-size:16.5px} @media(max-width:860px){.faq-group{grid-template-columns:1fr;gap:20px}.faq-group .gh{position:static}} .prose h4{font-size:17px;font-weight:600;margin:28px 0 10px} code{font-family:var(--font-mono);font-size:.85em;background:var(--gat-stone);padding:2px 6px;border-radius:6px} .preview-badge{position:fixed;bottom:12px;right:12px;z-index:99;background:var(--gat-warning-bg);color:var(--gat-warning-ink);border:1px solid var(--gat-warning);border-radius:999px;font-family:var(--font-mono);font-size:10px;padding:4px 10px;opacity:.85} /* ---------- fixes mobile (Alejo 2026-07-16, iPhone 12 mini) ---------- */ /* 1. las columnas 1fr no encogen bajo su min-content → los stats desbordan el viewport */ body{overflow-x:clip} @media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1000px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.stat{padding:32px 22px 36px}.stat .num{font-size:44px}} /* botones agrupados: mismo ancho en desktop (regla Alejo — 2 botones en la misma vista = mismo ancho). El contenedor toma el ancho del botón más ancho (max-content) y ambos botones lo llenan al 100%. */ @media(min-width:681px){ .hero-ctas{flex-direction:column;align-items:stretch;flex-wrap:nowrap;width:max-content;max-width:100%} .hero-ctas .btn{width:100%;justify-content:center} } /* 2. botones: mismo ancho y centrados en mobile (todos los .btn del contenido) */ @media(max-width:680px){ main .btn{width:min(100%,340px);justify-content:center} .hero-ctas{flex-direction:column;align-items:center;align-self:stretch} .cta-in{align-items:center;text-align:center} .cta-in p{margin:0 auto} } /* figura de imagen en artículos (blog/playbooks): placeholder o real + caption */ .img-ph-fig{margin:32px 0} .img-ph-fig > img{height:auto;max-width:100%} .img-ph-fig figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--gat-muted);margin-top:10px;text-align:center} /* Banner de consentimiento de cookies (Alejo 2026-07-25) */ .gat-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:2147482000;max-width:640px;margin-inline:auto;background:var(--gat-ink,#151515);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 18px;box-shadow:0 12px 44px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:14px;font-size:13.5px;line-height:1.55} .gat-cookie p{margin:0;color:rgba(255,255,255,.82)} .gat-cookie-btns{display:flex;gap:10px;justify-content:flex-end;flex-shrink:0} .gat-cookie button{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:999px;cursor:pointer;border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;transition:opacity .15s,background .15s} .gat-cookie .gck-acc{background:#fff;color:var(--gat-ink,#151515);border-color:#fff;font-weight:600} .gat-cookie button:hover{opacity:.82} .gat-cookie .gck-acc:focus-visible,.gat-cookie .gck-rej:focus-visible{outline:2px solid #fff;outline-offset:2px} @media(min-width:600px){.gat-cookie{flex-direction:row;align-items:center;justify-content:space-between}} /* Buscador de FAQs (Alejo 2026-07-25) */ /* solo para lectores de pantalla: mantiene el h1 de la página sin mostrarlo (páginas sin-chrome) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* página sin chrome (el cotizador): sin nav ni footer, el formulario ocupa la pantalla. Va a sangre y en blanco puro: sin .wrap que lo enmarque y sin el gris del sitio, para que la barra superior del propio cotizador cubra todo el ancho (Alejo 2026-07-27). */ .sin-chrome{background:#fff} .sin-chrome #main{min-height:100vh;padding:0} .wai-host{width:100%;max-width:none;margin:0;padding:0;background:#fff} /* comparación a dos imágenes: se mantiene en 2 columnas también en móvil, porque el punto es compararlas */ .img-compare-in{display:grid;grid-template-columns:1fr 1fr;gap:16px} .img-compare-lbl{display:block;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gat-muted)} /* resultados del buscador que viven en OTRA página del sitio */ .faq-global{margin:0 0 30px;max-width:820px} .faq-global-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gat-muted);margin:0 0 10px} .faq-global-it{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--gat-line)} .faq-global-it:hover .faq-global-q{border-bottom-color:var(--gat-ink)} .faq-global-q{font-size:15.5px;font-weight:500;border-bottom:1px solid transparent;transition:border-color 120ms} .faq-global-p{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gat-muted);white-space:nowrap;flex-shrink:0} @media(max-width:640px){.faq-global-it{flex-direction:column;gap:5px}.faq-global-p{white-space:normal}} .faq-search{margin:0 0 26px;max-width:540px} .faq-search input{width:100%;padding:14px 20px;border:1px solid var(--gat-border);border-radius:999px;font:inherit;font-size:15px;background:#fff;color:var(--gat-ink);transition:border-color .15s} .faq-search input:focus{outline:none;border-color:var(--gat-ink)} .faq-noresults{display:block;margin-top:14px;color:var(--gat-muted);font-size:14px} .faq-it[hidden]{display:none} .faq-group[hidden]{display:none} /* Fixes responsive mobile stats/grids (Alejo 2026-07-25) */ .hero-stats .num{white-space:nowrap} .hero-stats .num small{margin-left:.16em} @media(max-width:560px){ .hero-stats{grid-template-columns:1fr} .hero-stats .it{border-left:0;border-top:1px solid var(--gat-line);padding-left:0} .hero-stats .it:first-child{border-top:0} .stats-grid{grid-template-columns:1fr} .stat{padding:30px 24px 32px} } @media(max-width:680px){.sec{padding:60px 0}.sec.tight{padding:48px 0}.sec.ink{padding-top:60px;padding-bottom:60px}}