/* ================================================================= SPATLY · SHARED STYLESHEET (multi-page site) Merged + deduplicated from spatly-landing.html and spatly-previews/A-el-terreno-v4.html. Requiere: Satoshi (Fontshare) + IBM Plex Mono cargados en . ================================================================= */ /* ─── Design tokens (single source of truth) ─── */ :root{ --font:"Satoshi",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* ink / dark */ --ink:#16213a; --ink-900:#11151d; --navy:#132d46; --dark-deep:#0d1520; /* brand green */ --green:#01c38e; --green-dark:#00a578; --green-ink:#051c0e; --mint:#9ff5dd; /* surfaces (site paper = #f5f3ee from the v4 hero) */ --paper:#f5f3ee; --paper-2:#f1f4ef; --white:#ffffff; /* semaphore */ --ok:#01c38e; --warn:#e6c36b; --risk:#d97979; /* muted text */ --muted-dark:rgba(22,33,58,.66); --muted-mid:rgba(22,33,58,.58); --muted-light:rgba(255,255,255,.62); /* lines */ --line-dark:rgba(26,30,41,.11); --line-soft:rgba(26,30,41,.07); --line-light:rgba(255,255,255,.11); /* dark gradients */ --grad-dark:linear-gradient(160deg,var(--navy) 0%,var(--ink) 55%,var(--dark-deep) 100%); --grad-dark-alt:linear-gradient(170deg,var(--navy) 0%,#0e1a24 55%,var(--ink) 100%); /* shadows */ --shadow-card:0 1px 2px rgba(26,30,41,.03),0 8px 20px -14px rgba(26,30,41,.1); --shadow-card-lg:0 2px 4px rgba(26,30,41,.04),0 12px 32px -18px rgba(26,30,41,.14); } /* ─── Reset ─── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{cursor:pointer;border:none;background:none;font-family:inherit;} ul{list-style:none;} /* ─── Typography ─── */ h1{font-size:clamp(48px,6.5vw,86px);font-weight:800;letter-spacing:-.045em;line-height:.96;} h2{font-size:clamp(36px,4.3vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.04;} h3{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.028em;line-height:1.1;} p{line-height:1.55;} /* ─── Layout ─── */ .container{width:min(1160px,calc(100% - 48px));margin-inline:auto;} section{padding:100px 0;} /* ─── Eyebrow (UNIFICADO: pill verde de marca, idéntico en claro y oscuro) ─── */ .eyebrow,.eyebrow-pill,.hero-tag{ display:inline-block;max-width:100%; font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;line-height:1.4; color:var(--green); background:rgba(1,195,142,.10); border:1px solid rgba(1,195,142,.30); border-radius:6px; padding:5px 12px; margin-bottom:20px; white-space:normal; } /* ─── Buttons ─── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:50px;padding:0 26px;border-radius:10px; background:var(--green);color:var(--green-ink); font-family:var(--font);font-size:15px;font-weight:800;letter-spacing:-.01em; border:1px solid rgba(1,195,142,.3);cursor:pointer;white-space:nowrap; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; box-shadow:0 14px 24px -12px rgba(1,195,142,.5),0 2px 5px rgba(26,30,41,.06); } .btn:hover{transform:translateY(-2px);background:var(--green-dark);box-shadow:0 20px 32px -12px rgba(1,195,142,.55),0 3px 7px rgba(26,30,41,.08);} .btn:active{transform:none;} .btn:focus-visible{outline:2px solid var(--green);outline-offset:3px;} .btn-sm{min-height:42px;padding:0 20px;font-size:14px;} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-dark);box-shadow:none;} .btn-ghost:hover{background:rgba(26,30,41,.04);transform:none;box-shadow:none;} .btn-ghost-light{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none;} .btn-ghost-light:hover{background:rgba(255,255,255,.13);transform:none;box-shadow:none;} /* ─── Reveal animation ─── */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;} .reveal.visible{opacity:1;transform:none;} .d1{transition-delay:.08s;}.d2{transition-delay:.16s;}.d3{transition-delay:.24s;}.d4{transition-delay:.32s;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.meter-fill{transition:none;}} /* ================================================================= SITE HEADER — Dirección "Borderless minimal" (de A-el-terreno-v4) Estado is-scrolled / is-open lo togglea site.js. ================================================================= */ .site-header{ --sh-ink:#1a1e29; --sh-ink-soft:rgba(26,30,41,.6); --sh-paper:#f5f3ee; --sh-green:#01c38e; --sh-green-dark:#00a578; --sh-on-green:#051c0e; --sh-h:72px; /* alinea ópticamente el logo con el texto del hero (container ~1200px) */ --sh-edge:max(24px, calc((100vw - 1200px)/2 + 60px)); position:sticky; top:0; z-index:1000; width:100%; background:transparent; /* borderless en reposo: hairline transparente que reserva el espacio para que nada haga reflow al aparecer el estado scrolled */ border-bottom:1px solid transparent; transition:background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease; } /* al hacer scroll: papel esmerilado translúcido + una sola hairline */ .site-header.is-scrolled{ background:rgba(245,243,238,.72); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); border-bottom-color:rgba(26,30,41,.08); box-shadow:0 1px 0 rgba(255,255,255,.55) inset; } .site-header__bar{ height:var(--sh-h); padding-left:var(--sh-edge); /* margen derecho generoso para no competir con la tarjeta de mapa flotante */ padding-right:max(24px, calc((100vw - 1200px)/2 + 60px)); display:flex; align-items:center; gap:32px; } /* ---- marca ---- */ .site-header__brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; margin-right:auto; /* empuja nav + CTA a la derecha */ border-radius:8px; } .site-header .brand-logo{ height:32px; width:auto; display:block; } /* micro-tag mono opcional que refuerza la identidad "dossier de ubicación" */ .site-header__tag{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--sh-ink-soft); background:rgba(1,195,142,.07); padding:3px 7px; border-radius:4px; line-height:1; position:relative; top:1px; } /* ---- nav desktop (a la derecha, subordinada) ---- */ .site-header__nav{ flex:0 0 auto; } .site-header__list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px; } .site-header__link{ position:relative; display:inline-flex; align-items:center; height:44px; padding:0 14px; border-radius:8px; /* touch target >=44px */ font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--sh-ink-soft); text-decoration:none; transition:color .2s ease; } /* micro-interacción: subrayado verde que crece desde la izquierda */ .site-header__link::after{ content:""; position:absolute; left:14px; right:14px; bottom:11px; height:1.5px; background:var(--sh-green); transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .site-header__link:hover{ color:var(--sh-ink); } .site-header__link:hover::after{ transform:scaleX(1); } .site-header__link:active{ color:var(--sh-green-dark); } /* ---- estado activo (página actual) ---- */ .site-header__link.is-active{ color:var(--ink); font-weight:700; } .site-header__link.is-active::after{ transform:scaleX(1); } /* ---- acciones ---- */ .site-header__actions{ flex:0 0 auto; display:flex; align-items:center; gap:10px; } /* CTA primario: único elemento verde sólido */ .site-header__cta{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:9px; font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; text-decoration:none; color:var(--sh-on-green); background:var(--sh-green); box-shadow:0 1px 2px rgba(5,28,14,.18), 0 6px 16px -8px rgba(1,195,142,.6); transition:background-color .2s ease, transform .12s ease, box-shadow .2s ease; } .site-header__cta-icon{ display:block; transition:transform .25s cubic-bezier(.22,.61,.36,1); } .site-header__cta:hover{ background:var(--sh-green-dark); box-shadow:0 1px 2px rgba(5,28,14,.2), 0 10px 22px -8px rgba(1,195,142,.65); } .site-header__cta:hover .site-header__cta-icon{ transform:translateX(3px); } .site-header__cta:active{ transform:translateY(1px); } /* ---- hamburguesa (oculta en desktop) ---- */ .site-header__toggle{ display:none; width:44px; height:44px; flex:0 0 auto; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(26,30,41,.14); border-radius:9px; cursor:pointer; color:var(--sh-ink); transition:border-color .2s ease, background-color .2s ease; } .site-header__toggle:hover{ border-color:rgba(26,30,41,.28); background:rgba(26,30,41,.03); } .site-header__toggle-bars, .site-header__toggle-bars::before, .site-header__toggle-bars::after{ content:""; display:block; width:18px; height:1.6px; border-radius:2px; background:currentColor; transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease; } .site-header__toggle-bars{ position:relative; } .site-header__toggle-bars::before{ position:absolute; top:-6px; left:0; } .site-header__toggle-bars::after{ position:absolute; top:6px; left:0; } /* ---- panel móvil ---- */ .site-header__mobile{ position:absolute; top:100%; left:0; right:0; padding:8px 16px 18px; background:rgba(245,243,238,.97); -webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px); border-bottom:1px solid rgba(26,30,41,.08); box-shadow:0 18px 40px -22px rgba(26,30,41,.4); } .site-header__mobile[hidden]{ display:none; } .site-header__mobile-link{ display:flex; align-items:center; height:48px; padding:0 12px; border-radius:9px; font-family:var(--font); font-size:16px; font-weight:500; color:var(--sh-ink); text-decoration:none; } .site-header__mobile-link:hover{ background:rgba(1,195,142,.08); color:var(--sh-green-dark); } .site-header__mobile-link.is-active{ color:var(--sh-green-dark); font-weight:700; } /* ---- focus-visible: outline verde de marca ---- */ .site-header__brand:focus-visible, .site-header__link:focus-visible, .site-header__mobile-link:focus-visible, .site-header__cta:focus-visible, .site-header__toggle:focus-visible{ outline:2px solid var(--sh-green); outline-offset:3px; } /* RESPONSIVE ≤760px — links colapsan a hamburguesa, CTA permanece */ @media (max-width:760px){ .site-header{ --sh-h:64px; --sh-edge:20px; } .site-header__bar{ padding-right:20px; gap:14px; } .site-header__tag{ display:none; } .site-header__nav{ display:none; } /* nav inline oculta; usa el panel */ .site-header__toggle{ display:inline-flex; } /* hamburguesa -> X cuando is-open */ .site-header.is-open .site-header__toggle-bars{ background:transparent; } .site-header.is-open .site-header__toggle-bars::before{ transform:translateY(6px) rotate(45deg); } .site-header.is-open .site-header__toggle-bars::after{ transform:translateY(-6px) rotate(-45deg); } } /* en pantallas muy estrechas el CTA conserva la flecha y oculta el label */ @media (max-width:380px){ .site-header__cta-label{ display:none; } .site-header__cta{ padding:0 14px; } } /* respeta prefers-reduced-motion */ @media (prefers-reduced-motion:reduce){ .site-header, .site-header *, .site-header *::before, .site-header *::after{ transition:none !important; animation:none !important; } } /* ================================================================= HERO v4 — split izquierda texto + tarjeta de mapa flotante oscura ================================================================= */ .hero{ min-height:calc(100vh - 72px); /* crece si el contenido es alto, no desborda */ position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(32px,5vw,72px); overflow:hidden; /* solo recorta las curvas/glow decorativos */ padding-block:48px 64px; /* contenedor ~1240px con gutters: el texto y la tarjeta comparten el espacio y la tarjeta queda separada del borde derecho */ padding-inline:max(24px, calc((100vw - 1240px)/2 + 24px)); } /* Topographic background curves */ .hero::before{ content:''; position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg width='1400' height='900' viewBox='0 0 1400 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100 600 Q 300 480 700 540 Q 1100 600 1500 480' stroke='rgba(26,30,41,.05)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M-100 660 Q 320 540 720 600 Q 1120 660 1500 540' stroke='rgba(26,30,41,.038)' stroke-width='1.2' fill='none'/%3E%3Cpath d='M-100 720 Q 340 610 740 660 Q 1140 710 1500 600' stroke='rgba(26,30,41,.028)' stroke-width='1' fill='none'/%3E%3Cpath d='M-100 520 Q 280 410 680 470 Q 1080 530 1500 420' stroke='rgba(26,30,41,.04)' stroke-width='1.2' fill='none'/%3E%3Cpath d='M-100 440 Q 260 340 660 400 Q 1060 460 1500 350' stroke='rgba(26,30,41,.03)' stroke-width='1' fill='none'/%3E%3C/svg%3E"); background-size:100% 100%; } /* Subtle green glow bottom-right */ .hero::after{ content:''; position:absolute; width:600px;height:600px; bottom:-200px;right:-100px; pointer-events:none; background:radial-gradient(circle,rgba(1,195,142,.06),transparent 65%); } /* ─── Left text block ─── */ .hero-text{ position:relative;z-index:2; max-width:600px; } .hero-tag{ /* estilo visual heredado del bloque unificado .eyebrow/.hero-tag */ margin-bottom:26px; animation:fadeUp .6s ease both; } .hero h1{ font-size:clamp(40px,4.6vw,66px); font-weight:800;letter-spacing:-.042em;line-height:1.0; color:var(--ink);margin-bottom:22px; animation:fadeUp .6s ease .1s both; } .hero h1 .accent{color:var(--green);} .hero-lead{ font-size:17px;color:rgba(26,30,41,.6);line-height:1.65; margin-bottom:32px; animation:fadeUp .6s ease .18s both; } .ctas{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin-bottom:16px; animation:fadeUp .6s ease .26s both; } .hero-micro{ font-family:var(--mono);font-size:11px; color:rgba(26,30,41,.58);letter-spacing:.02em; animation:fadeUp .6s ease .32s both; } /* Cred strip */ .cred{ display:flex;gap:0;margin-top:36px;padding-top:24px; border-top:1px solid rgba(26,30,41,.1); animation:fadeUp .6s ease .38s both; } .cred-item{flex:1;padding:0 16px;} .cred-item:first-child{padding-left:0;} .cred-item+.cred-item{border-left:1px solid rgba(26,30,41,.1);} .cred-v{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1;} .cred-v.g{color:var(--green);} .cred-l{font-size:11px;color:rgba(26,30,41,.58);margin-top:5px;line-height:1.35;} /* ─── HERO floating map card (tarjeta de mapa oscura, solo en el hero del inicio) ─── */ .hero-mapcard{ position:relative;z-index:3; justify-self:end; width:100%;max-width:560px; transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg); border-radius:20px; overflow:hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.16), 0 60px 120px rgba(0,0,0,.2); animation:cardIn .9s cubic-bezier(.16,1,.3,1) .2s both; } @keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } @keyframes cardIn{ from{opacity:0;transform:translateX(28px) perspective(1200px) rotateY(-4deg) rotateX(1.5deg)} to{opacity:1;transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg)} } /* Map card chrome */ .mc-chrome{ background:#0c1610; border-bottom:1px solid rgba(1,195,142,.12); padding:12px 16px; display:flex;align-items:center;justify-content:space-between; } .mc-dots{display:flex;gap:6px;} .mc-dot{width:10px;height:10px;border-radius:50%;} .mc-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(1,195,142,.6);} .mc-badge{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:2px 7px;} /* Map body */ .mc-body{position:relative;background:#060d0a;height:clamp(300px,40vw,460px);} /* Scanlines */ .mc-body::after{ content:'';position:absolute;inset:0;z-index:8;pointer-events:none; background:repeating-linear-gradient( 0deg,transparent,transparent 3px,rgba(0,0,0,.035) 3px,rgba(0,0,0,.035) 4px ); } /* HUD top */ .mc-hud{ position:absolute;top:12px;left:12px;right:12px;z-index:10; display:flex;align-items:center;justify-content:space-between; } .mc-hud-pill{ font-family:var(--mono);font-size:9.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase; background:rgba(6,13,10,.82);backdrop-filter:blur(8px); border:1px solid rgba(1,195,142,.22);border-radius:4px; padding:4px 10px;color:rgba(1,195,142,.9); } .mc-hud-live{ display:flex;align-items:center;gap:5px; font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.3); background:rgba(6,13,10,.75);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:4px 9px; } .live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink 2s ease infinite;} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} /* Score footer card */ .mc-footer{ background:rgba(6,13,10,.9); backdrop-filter:blur(14px); border-top:1px solid rgba(1,195,142,.15); padding:12px 16px; } .mc-rows{display:flex;flex-direction:column;gap:7px;} .mc-row{display:grid;grid-template-columns:1fr 70px 38px;align-items:center;gap:10px;} .mc-name{font-size:12px;font-weight:700;color:#fff;letter-spacing:-.02em;} .mc-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;} .mc-fill{height:100%;border-radius:2px;} .mc-fill.ok{background:linear-gradient(90deg,#01c38e,#6ee7c0);width:82%;} .mc-fill.warn{background:linear-gradient(90deg,#e6c36b,#f0d88a);width:76%;} .mc-fill.risk{background:linear-gradient(90deg,#d97979,#eda0a0);width:64%;} .mc-score{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.04em;text-align:right;line-height:1;} .mc-score.ok{color:var(--ok);}.mc-score.warn{color:var(--warn);}.mc-score.risk{color:var(--risk);} /* Pulse rings animation (pins) */ @keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(2.4);opacity:0}} .pin-ring{animation:ring 2.6s ease-out infinite;} .pin-ring-b{animation:ring 2.6s ease-out .85s infinite;} /* ─── Hero responsive ─── */ @media (max-width:1024px){ .hero{ grid-template-columns:1fr; text-align:center; padding-inline:24px; } .hero-text{ max-width:640px; margin:0 auto; } .hero-tag{ margin-inline:auto; } .ctas{ justify-content:center; } .cred{ justify-content:center; } .hero-mapcard{ display:none; } /* el mapa real está en la sección Gastro-Report */ } @media (max-width:560px){ .hero h1{ font-size:clamp(32px,9vw,44px); } .cred-item{ padding:0 10px; } .ctas{flex-direction:column;} .ctas .btn{width:100%;} } /* ================================================================= SOURCES BAR ================================================================= */ .sources-bar{background:var(--paper);border-bottom:1px solid var(--line-soft);padding:18px 0;} .sources-bar-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .sources-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-mid);flex-shrink:0;} .sources-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .source-chip{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted-dark);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:5px;padding:3px 9px;} /* ================================================================= PROBLEM ================================================================= */ .problem{background:var(--paper);} .problem-header{text-align:center;max-width:680px;margin:0 auto 56px;} .problem-header h2{margin-bottom:16px;} .problem-header .lead{font-size:18px;color:var(--muted-dark);} .problem-header .lead sup{font-size:10px;font-family:var(--mono);opacity:.7;} .problem-stats{display:flex;gap:40px;justify-content:center;margin-bottom:52px;flex-wrap:wrap;} .stat-block{text-align:center;} .stat-num{font-family:var(--mono);font-size:54px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.04em;font-feature-settings:"tnum";} .stat-num sup{font-size:28px;} .stat-label{font-size:13px;color:var(--muted-dark);margin-top:6px;max-width:170px;margin-inline:auto;line-height:1.4;} .stat-src{font-family:var(--mono);font-size:10px;color:var(--muted-mid);letter-spacing:.04em;margin-top:5px;} .comparison-grid{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);margin-bottom:44px;box-shadow:var(--shadow-card-lg);} .comp-col{padding:34px 30px;} .comp-col.old{background:var(--white);} .comp-col.new{background:var(--paper-2);} .comp-col-title{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:8px;color:var(--muted-dark);} .col-indicator{width:7px;height:7px;border-radius:50%;flex-shrink:0;} .comp-col.old .col-indicator{background:var(--risk);} .comp-col.new .col-indicator{background:var(--ok);} .comp-items{display:flex;flex-direction:column;gap:12px;} .comp-items li{font-size:15px;color:var(--ink);display:flex;align-items:flex-start;gap:10px;line-height:1.45;} .comp-items li::before{content:'—';color:var(--muted-mid);flex-shrink:0;font-family:var(--mono);} .comp-col.new .comp-items li::before{content:'✓';color:var(--ok);font-weight:700;font-size:13px;} .comp-verdict{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:13px;font-weight:600;color:var(--muted-dark);font-style:italic;} .problem-quote{max-width:620px;margin:0 auto;text-align:center;} .problem-quote blockquote{font-size:20px;font-weight:500;color:var(--ink);line-height:1.48;letter-spacing:-.022em;margin-bottom:12px;} .problem-quote blockquote::before{content:'\201C';color:var(--green);font-size:44px;line-height:.7;display:block;margin-bottom:10px;font-family:Georgia,serif;} .problem-quote cite{font-size:12px;color:var(--muted-mid);font-style:normal;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;} /* ================================================================= FLOW BRANCH — "ya tengo locales" / "no sé dónde abrir" (bloque nuevo, coherente con las cards de papel) ================================================================= */ .flow-branch{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px; } .flow-card{ display:flex;flex-direction:column;align-items:flex-start;gap:14px; background:var(--white);border:1px solid var(--line-soft); border-radius:16px;padding:30px 28px;text-decoration:none;color:inherit; box-shadow:var(--shadow-card); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; } .flow-card:hover{ transform:translateY(-4px); border-color:rgba(1,195,142,.32); box-shadow:0 2px 4px rgba(26,30,41,.04),0 18px 40px -18px rgba(26,30,41,.22); } .flow-card:focus-visible{outline:2px solid var(--green);outline-offset:3px;} .flow-card__icon{ width:46px;height:46px;border-radius:12px;flex-shrink:0; background:rgba(1,195,142,.1);border:1px solid rgba(1,195,142,.22); display:flex;align-items:center;justify-content:center; } .flow-card__icon svg{width:22px;height:22px;stroke:var(--green);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;} .flow-card__title{font-size:19px;font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1.18;} .flow-card__sub{font-size:14px;color:var(--muted-dark);line-height:1.55;} .flow-card__cta{ margin-top:auto;display:inline-flex;align-items:center;gap:6px; font-size:14px;font-weight:700;color:var(--green);letter-spacing:-.01em; transition:gap .2s ease; } .flow-card:hover .flow-card__cta{gap:10px;} /* ================================================================= HOW IT WORKS ================================================================= */ .how-it-works{background:var(--paper-2);} .section-header{max-width:600px;margin:0 0 56px;} .section-header h2{margin-bottom:14px;} .section-header .lead{font-size:17px;color:var(--muted-dark);line-height:1.6;} .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .step{background:var(--white);border:1px solid var(--line-soft);border-radius:14px;padding:30px 26px;box-shadow:var(--shadow-card);} .step-num{font-family:var(--mono);font-size:56px;font-weight:600;color:rgba(26,30,41,.10);letter-spacing:-.06em;line-height:1;margin-bottom:18px;font-feature-settings:"tnum";} .step h3{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-bottom:10px;} .step p{font-size:15px;color:var(--muted-dark);line-height:1.55;} /* ================================================================= GASTRO-REPORT (dark) + ranking / meters ================================================================= */ .gastro-report{background:var(--grad-dark-alt);position:relative;overflow:hidden;} .gastro-report::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;} .gastro-header{position:relative;z-index:1;text-align:center;max-width:660px;margin:0 auto 52px;} .gastro-header h2{color:#fff;margin-bottom:14px;} .gastro-header .lead{font-size:17px;color:rgba(255,255,255,.58);} .gastro-demo{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr 1fr;gap:18px;align-items:start;} /* Map card (gastro — tarjeta en-flujo dentro del grid, NO flotante) */ .map-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;} .map-card-header{padding:14px 18px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;} .map-card-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.45);} .map-tag{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:2px 8px;letter-spacing:.06em;} .map-svg-wrap{padding:6px;} .map-svg-wrap svg{width:100%;height:auto;display:block;} .map-caption{padding:12px 18px 16px;} .map-caption-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:4px;} .map-caption-sub{font-size:12px;color:rgba(255,255,255,.6);line-height:1.45;} /* Ranking card */ .ranking-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:18px;} .ranking-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);} .ranking-card-title{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.45);} .ranking-badge{font-family:var(--mono);font-size:10px;color:var(--green);background:rgba(1,195,142,.12);border:1px solid rgba(1,195,142,.22);border-radius:4px;padding:2px 8px;letter-spacing:.04em;} .rank-items{display:flex;flex-direction:column;gap:8px;} .rank-item{border-radius:12px;overflow:hidden;} .rank-item.featured{background:rgba(1,195,142,.07);border:1px solid rgba(1,195,142,.22);} .rank-item.secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);} .rank-item-top{padding:13px 14px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;} .rank-pos{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.28);margin-bottom:3px;} .rank-item.featured .rank-pos{color:rgba(1,195,142,.65);} .rank-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:3px;} .rank-item.secondary .rank-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.82);} .rank-verdict{font-size:11px;color:rgba(255,255,255,.6);line-height:1.4;} .rank-item.featured .rank-verdict{color:rgba(255,255,255,.52);} .rank-score{text-align:right;flex-shrink:0;} .score-num{font-family:var(--mono);font-size:34px;font-weight:600;color:var(--mint);letter-spacing:-.04em;line-height:1;display:block;font-feature-settings:"tnum";} .rank-item.secondary .score-num{font-size:26px;color:rgba(255,255,255,.55);} .score-lbl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-top:2px;display:block;} /* Variable rows */ .rank-vars{padding:0 14px 12px;display:flex;flex-direction:column;gap:7px;} .rank-var{display:flex;flex-direction:column;gap:3px;} .var-row{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:8px;} .var-name{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.35);} .meter-track{height:5px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;} .meter-fill{height:100%;border-radius:999px;width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1);} .meter-fill.ok{background:var(--ok);} .meter-fill.warn{background:var(--warn);} .meter-fill.risk{background:var(--risk);} .var-status{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:right;white-space:nowrap;} .var-status.ok{color:var(--ok);} .var-status.warn{color:var(--warn);} .var-status.risk{color:var(--risk);} .var-detail{font-size:11px;color:rgba(255,255,255,.32);padding-left:76px;line-height:1.3;} /* Anchor chips */ .anchors{padding:2px 14px 13px;display:flex;flex-wrap:wrap;gap:5px;} .anchor-chip{font-family:var(--mono);font-size:10px;font-weight:500;color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:4px;padding:3px 8px;letter-spacing:.02em;} /* Gastro footer */ .gastro-footer{position:relative;z-index:1;margin-top:22px;text-align:center;} .gastro-footer-text{font-family:var(--mono);font-size:11px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.06em;} .gastro-footer-sep{color:rgba(255,255,255,.14);margin:0 10px;} /* ================================================================= METHODOLOGY ================================================================= */ .methodology{background:var(--paper);} .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px;} .pillar-card{background:var(--white);border:1px solid var(--line-soft);border-radius:14px;padding:24px;box-shadow:0 1px 2px rgba(26,30,41,.03),0 8px 22px -14px rgba(26,30,41,.1);} .pillar-icon{width:38px;height:38px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .pillar-icon svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;} .pillar-title{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px;} .pillar-sub{font-size:13px;color:var(--muted-dark);margin-bottom:14px;line-height:1.4;} .pillar-vars{display:flex;flex-direction:column;gap:6px;} .pillar-var{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted-dark);display:flex;justify-content:space-between;gap:6px;align-items:baseline;} .pillar-var .vw{color:var(--green);font-weight:600;flex-shrink:0;} .methodology-note{max-width:640px;} .methodology-note p{font-size:15px;color:var(--muted-dark);line-height:1.6;} .methodology-note .weight-note{font-family:var(--mono);font-size:11px;color:var(--muted-mid);margin-top:12px;letter-spacing:.02em;} /* ================================================================= WHY SPATLY (comparison table) ================================================================= */ .why-spatly{background:var(--paper-2);} .table-wrap{border-radius:14px;box-shadow:0 1px 2px rgba(26,30,41,.04),0 12px 28px -16px rgba(26,30,41,.12);} /* --- DESKTOP / WEB BALANCE ------------------------------------------------- table-layout:fixed con anchos explícitos: la dimensión es angosta, las 3 alternativas comparten un ancho menor y la columna Spatly recibe más espacio. Así el texto denso de Spatly respira y las celdas cortas ("No","Ninguno") ya no estiran columnas a lo ancho — la tabla se siente sólida, no vacía. */ .comp-table{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--white);border-radius:14px;overflow:hidden;} .comp-table col.c-dim{width:14%;} .comp-table col.c-alt{width:20.5%;} .comp-table col.c-spatly{width:24.5%;} .comp-table thead th{padding:16px 18px;text-align:left;font-size:13px;font-weight:700;letter-spacing:-.01em;border-bottom:1px solid var(--line-soft);background:var(--white);vertical-align:bottom;} .comp-table thead th:first-child{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-mid);} .comp-table thead .col-spatly{background:rgba(1,195,142,.07);color:var(--green);border-bottom:2px solid rgba(1,195,142,.32);font-size:14px;border-top-right-radius:14px;} .comp-table tbody tr{border-bottom:1px solid var(--line-soft);} .comp-table tbody tr:last-child{border-bottom:none;} .comp-table tbody td{padding:14px 18px;font-size:14px;vertical-align:top;line-height:1.48;color:var(--ink);} .comp-table tbody td:first-child, .comp-table tbody td.dim-cell{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-mid);} /* atenuar las 3 alternativas en desktop: la jerarquía cae natural en Spatly */ .comp-table tbody td:not(.col-spatly):not(.dim-cell){color:var(--muted-dark);} /* Columna Spatly como héroe en desktop: wash más marcado + regla verde a la izquierda que la separa visualmente del bloque de alternativas. */ .comp-table thead .col-spatly, .comp-table tbody .col-spatly{box-shadow:inset 1px 0 0 rgba(1,195,142,.18);} .comp-table tbody .col-spatly{background:rgba(1,195,142,.05);font-weight:500;} .comp-table tbody tr:last-child .col-spatly{border-bottom-right-radius:14px;} /* data-label de los encabezados solo se usa en mobile; oculto/inerte en web */ .comp-table tbody td::before{display:none;} .ico-ok{color:var(--ok);font-weight:700;margin-right:5px;} .ico-bad{color:var(--risk);opacity:.65;margin-right:5px;} /* --- MOBILE: ENFOQUE B — SPATLY-DESTACADO / "vs el resto" ------------------ <=640px la tabla deja de ser tabla y cada fila (dimensión) se vuelve una tarjeta. Dentro de la tarjeta: Spatly sube al tope como respuesta héroe (verde, grande, con borde); las 3 alternativas caen debajo, compactas y en gris, cada una rotulada con su fuente vía data-label. El min-width y el scroll horizontal desaparecen: nada queda oculto fuera de pantalla. */ @media (max-width:640px){ .table-wrap{overflow:visible;background:transparent;box-shadow:none;border-radius:0;} .comp-table{display:block;width:100%;min-width:0;table-layout:auto;background:transparent;border-radius:0;} /* el thead es redundante: cada celda lleva su propio rótulo */ .comp-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .comp-table colgroup{display:none;} .comp-table tbody{display:block;} /* cada fila = una tarjeta de dimensión. FLEX-COLUMN para que `order` funcione (con display:block el order es inerte y Spatly cae al fondo de la tarjeta). */ .comp-table tbody tr{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow-card); padding:6px 16px 14px; margin-bottom:14px; } .comp-table tbody tr:last-child{border-bottom:1px solid var(--line-soft);margin-bottom:0;} .comp-table tbody td{display:block;padding:0;border:none;box-shadow:none;} /* 1 · título de la dimensión, arriba del todo */ .comp-table tbody td.dim-cell{ order:-2; padding:12px 0 0; font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;color:var(--muted-mid); } /* 2 · Spatly = HÉROE, justo bajo el título */ .comp-table tbody td.col-spatly{ order:-1; position:relative; background:rgba(1,195,142,.07); border:1px solid rgba(1,195,142,.22); border-left:3px solid var(--green); border-radius:11px; padding:13px 14px 13px 15px; margin:10px 0 6px; font-size:15.5px;font-weight:600;line-height:1.4;color:var(--ink); box-shadow:none; } /* rótulo "SPATLY" sobre la respuesta héroe */ .comp-table tbody td.col-spatly::before{ content:'Spatly'; display:block; font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:var(--green); margin-bottom:5px; } .comp-table tbody td.col-spatly .ico-ok{ font-size:16px;margin-right:6px; } /* 3 · las 3 alternativas: bloque compacto, gris, secundario */ .comp-table tbody td:not(.col-spatly):not(.dim-cell){ display:grid; grid-template-columns:minmax(96px,38%) 1fr; gap:10px; align-items:baseline; padding:9px 0; font-size:13px;line-height:1.42;color:var(--muted-dark); border-top:1px solid var(--line-soft); } /* rótulo de la fuente (Corredor / ChatGPT / Caminar la cuadra) */ .comp-table tbody td:not(.col-spatly):not(.dim-cell)::before{ content:attr(data-label); display:block; font-family:var(--mono);font-size:10px;font-weight:500; letter-spacing:.04em;text-transform:uppercase;color:var(--muted-mid); line-height:1.4; } /* el ✕ de las alternativas: discreto, no compite con el ✓ héroe */ .comp-table tbody td:not(.col-spatly):not(.dim-cell) .ico-bad{ opacity:.55;margin-right:3px; } } /* ================================================================= FAQ ================================================================= */ .faq{background:var(--paper-2);} .faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;align-items:start;} .faq-intro h2{margin-bottom:14px;} .faq-intro p{font-size:16px;color:var(--muted-dark);line-height:1.65;} .faq-list{display:flex;flex-direction:column;gap:3px;} .faq-item{background:var(--white);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;} .faq-item+.faq-item{margin-top:2px;} .faq-item summary{list-style:none;cursor:pointer;padding:17px 20px;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px;user-select:none;transition:background .15s;} .faq-item summary:hover{background:rgba(26,30,41,.02);} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:'+';font-size:20px;font-weight:300;color:var(--green);flex-shrink:0;transition:transform .22s ease;line-height:1;} .faq-item[open] summary::after{transform:rotate(45deg);} .faq-body{padding:0 20px 17px;font-size:15px;color:var(--muted-dark);line-height:1.62;} /* ================================================================= MINI CTA ================================================================= */ .mini-cta-wrap{text-align:center;padding:32px 0 8px;} .mini-cta-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--green);letter-spacing:-.01em;border-bottom:1.5px solid rgba(1,195,142,.3);padding-bottom:2px;transition:border-color .2s,opacity .2s;} .mini-cta-link:hover{border-color:var(--green);opacity:.85;} /* ================================================================= FINAL CTA (dark) + LEAD FORM ================================================================= */ .final-cta{background:var(--grad-dark);position:relative;overflow:hidden;} .final-cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;} .final-cta::after{content:'';position:absolute;width:620px;height:620px;border-radius:50%;right:-200px;top:-260px;background:radial-gradient(circle,rgba(1,195,142,.22),transparent 64%);pointer-events:none;} .final-cta-inner{position:relative;z-index:1;max-width:580px;margin:0 auto;text-align:center;} .final-cta h2{color:#fff;margin-bottom:14px;} .final-cta .lead{font-size:17px;color:rgba(255,255,255,.58);margin-bottom:44px;line-height:1.6;} .final-cta .lead strong{color:rgba(255,255,255,.88);} .lead-form{text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:12px;} .fg{display:flex;flex-direction:column;gap:6px;} .fg.full{grid-column:1/3;} .fg.hidden{display:none;} .fg label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.48);} .fg input,.fg select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:13px 15px;color:#fff;font-family:var(--font);font-size:15px;width:100%;transition:border-color .18s,background .18s;appearance:none;-webkit-appearance:none;} .fg input::placeholder{color:rgba(255,255,255,.26);} .fg input:focus,.fg select:focus{outline:none;border-color:var(--green);background:rgba(1,195,142,.08);} .fg select option{background:var(--ink);color:#fff;} .fg input.invalid,.fg select.invalid{border-color:#ff8a8a;background:rgba(255,138,138,.08);} .field-error{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;line-height:1.3;color:#ff9a9a;} .field-error:empty{margin-top:0;} .select-wrap{position:relative;} .select-wrap::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255,255,255,.4);pointer-events:none;} .form-submit{grid-column:1/3;display:flex;flex-direction:column;align-items:stretch;gap:10px;} .btn-submit{width:100%;min-height:54px;font-size:16px;border-radius:12px;} .form-disclaimer{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.26);text-align:center;line-height:1.5;} .form-success{display:none;text-align:center;padding:36px 0;} .form-success.active{display:block;} .success-icon{width:52px;height:52px;border-radius:50%;background:rgba(1,195,142,.14);border:2px solid rgba(1,195,142,.28);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;} .success-icon svg{width:26px;height:26px;stroke:var(--green);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;} .form-success h3{color:#fff;font-size:22px;margin-bottom:8px;} .form-success p{color:rgba(255,255,255,.55);font-size:15px;} /* ================================================================= TRANSPARENCY ================================================================= */ .transparency{background:var(--paper);} .transparency .section-header{margin-inline:auto;text-align:center;} .transparency p{font-size:15px;color:var(--muted-dark);line-height:1.7;} .transparency .mono-note{font-family:var(--mono);font-size:11px;color:var(--muted-mid);letter-spacing:.02em;line-height:1.6;} /* ================================================================= SITE FOOTER (nuevo, sobrio, sobre papel) ================================================================= */ .site-footer{background:var(--paper);border-top:1px solid var(--line-soft);padding:48px 0 36px;} .site-footer__inner{display:flex;flex-direction:column;gap:32px;} .site-footer__cols{ display:flex;align-items:flex-start;justify-content:space-between; gap:32px;flex-wrap:wrap; } .site-footer__brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;} .site-footer__brand .brand-logo{height:30px;width:auto;display:block;} .site-footer__brand-tag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-mid);} .site-footer__nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;} .site-footer__nav a{font-size:14px;font-weight:600;color:var(--muted-dark);letter-spacing:-.01em;transition:color .2s ease;} .site-footer__nav a:hover{color:var(--ink);} .site-footer__nav a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} .site-footer__disclaimer{font-family:var(--mono);font-size:10px;color:var(--muted-mid);max-width:680px;line-height:1.62;letter-spacing:.01em;} .site-footer__copy{font-size:13px;color:var(--muted-mid);} /* ================================================================= WHATSAPP FLOAT ================================================================= */ .wa-float{position:fixed;bottom:26px;right:26px;z-index:200;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.4);transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;} .wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 26px rgba(37,211,102,.55);} .wa-float svg{width:27px;height:27px;} /* ================================================================= RESPONSIVE (componentes — el hero y el header tienen el suyo arriba) ================================================================= */ @media(max-width:1100px){.pillars-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:940px){ section{padding:80px 0;} .steps-grid{grid-template-columns:repeat(2,1fr);} .gastro-demo{grid-template-columns:1fr;} .faq-grid{grid-template-columns:1fr;gap:40px;} .lead-form{grid-template-columns:1fr;} .fg.full,.form-submit{grid-column:1;} .flow-branch{grid-template-columns:1fr;} } @media(max-width:760px){ .comparison-grid{grid-template-columns:1fr;} .comp-col{padding:26px 22px;} .site-footer__cols{flex-direction:column;align-items:flex-start;gap:24px;} } @media(max-width:560px){ section{padding:60px 0;} .container{width:calc(100% - 32px);} .problem-stats{gap:28px;} .steps-grid,.pillars-grid{grid-template-columns:1fr;} .sources-bar-inner{gap:10px;} .site-footer__nav{gap:16px;} } /* ================================================================= ENRIQUECIMIENTOS SVG (revisión final) — chips con icono, tarjetas de transparencia ================================================================= */ /* ─── Tratamiento duotono (tinta + verde) para fotos ─── */ .duotone{position:relative;background:#10141c;isolation:isolate;} .duotone img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04) brightness(.98);mix-blend-mode:luminosity;opacity:.96;} /* verde solo como acento sutil en una esquina, NO lavado turquesa */ .duotone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,rgba(1,195,142,.16) 0%,transparent 42%);mix-blend-mode:screen;} /* viñeta inferior para profundidad y para que el texto/leyenda respire */ .duotone::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(to bottom,transparent 48%,rgba(10,16,24,.5));} /* ─── CTA final con foto de fondo en duotono ─── */ .final-cta.has-photo{position:relative;overflow:hidden;} .cta-photo{position:absolute;inset:0;z-index:0;} .cta-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.55;} .final-cta.has-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(150deg,rgba(19,45,70,.90) 0%,rgba(13,21,32,.93) 60%),radial-gradient(circle at 82% 18%,rgba(1,195,142,.22),transparent 60%);} .final-cta.has-photo>.container{position:relative;z-index:2;} .stat-label-lg{font-size:19px;color:var(--ink);font-weight:500;line-height:1.4;max-width:340px;margin-top:8px;letter-spacing:-.01em;} /* ─── Source chips con icono ─── */ .source-chip{display:inline-flex;align-items:center;gap:6px;} .source-chip svg{width:13px;height:13px;flex:0 0 13px;color:var(--green);opacity:.85;} /* ─── Transparencia: 3 tarjetas ─── */ .transp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px;} .transp-card{background:var(--white);border:1px solid var(--line-soft);border-radius:16px;padding:26px;box-shadow:var(--shadow-card);} .transp-icon{width:42px;height:42px;border-radius:10px;background:rgba(1,195,142,.08);border:1px solid rgba(1,195,142,.18);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .transp-icon svg{width:20px;height:20px;color:var(--green);} .transp-card h3{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;line-height:1.25;} .transp-card p{font-size:14px;color:var(--muted-dark);line-height:1.55;} @media(max-width:940px){ .transp-grid{grid-template-columns:1fr;} } /* (eyebrow unificado: mismo pill verde de marca en TODAS las secciones, claras y oscuras — sin override de color) */ /* ─── Botón flotante de WhatsApp (todas las páginas) ─── */ .wa-float{position:fixed;bottom:26px;right:26px;z-index:200;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.4);transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;} .wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 26px rgba(37,211,102,.55);} .wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px;} .wa-float svg{width:28px;height:28px;} @media(max-width:560px){.wa-float{bottom:18px;right:18px;width:50px;height:50px;}} /* ─── Pedir análisis: panel sólido detrás del form (legibilidad sobre foto) ─── */ .final-cta.has-photo #form-wrap{ background:rgba(13,21,32,.82); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:clamp(20px,3vw,32px); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 30px 80px -30px rgba(0,0,0,.6); } .final-cta.has-photo .fg label{color:rgba(255,255,255,.66);} .final-cta.has-photo .fg input,.final-cta.has-photo .fg select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);} /* ================================================================= PROBLEMA — panel de 4 factores (reemplaza el dot-grid · panel UX) ================================================================= */ /* ═══ PROBLEMA · sección oscura con foto de fondo + tarjeta tipo mapa ═══ */ .problem{position:relative;overflow:hidden;background:var(--ink-900);color:#fff;} .problem-bg{position:absolute;inset:0;z-index:0;} .problem-bg img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;filter:grayscale(1) contrast(1.04) brightness(.6);} .problem-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(13,21,32,.95) 0%,rgba(13,21,32,.8) 44%,rgba(13,21,32,.55) 100%),radial-gradient(circle at 84% 22%,rgba(1,195,142,.12),transparent 55%);} .problem .container{position:relative;z-index:1;} .problem-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(32px,5vw,64px);align-items:center;} /* copy en texto claro */ .problem-copy .eyebrow{margin-bottom:16px;} .problem-copy .stat-num{font-size:clamp(64px,8.5vw,112px);color:var(--green);line-height:1;letter-spacing:-.04em;font-feature-settings:"tnum";} .problem-copy .stat-num sup{font-size:.4em;top:-.12em;color:var(--green);} .problem-copy .stat-label-lg strong{color:#fff;font-weight:700;} .problem-copy .stat-label-lg{font-size:19px;color:rgba(255,255,255,.86);font-weight:500;line-height:1.4;max-width:360px;margin-top:10px;letter-spacing:-.01em;} .problem-copy .stat-src{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.5);margin-top:8px;} .problem-quote-inline{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:17px;font-weight:500;color:rgba(255,255,255,.78);line-height:1.5;letter-spacing:-.01em;max-width:430px;} .problem-quote-inline strong{color:var(--green);font-weight:700;} /* gráfica de supervivencia · estilo McKinsey: sin recuadro, difuminada en el fondo */ .survival-viz{position:relative;padding:6px 4px; background:radial-gradient(120% 95% at 58% 42%, rgba(6,13,10,.55), transparent 72%);} .sv-title{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--green);margin-bottom:10px;} .sv-svg{width:100%;height:auto;display:block;overflow:visible;} .sv-takeaway{font-size:17px;color:#fff;font-weight:500;line-height:1.45;margin-top:14px;max-width:42ch;} .sv-takeaway b{color:var(--green);font-weight:700;} .sv-takeaway b.sv-dead-txt{color:#e09a9a;} .sv-src{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.4);margin-top:8px;} @media(max-width:940px){ .problem-grid{grid-template-columns:1fr;gap:32px;} .problem-bg img{object-position:center;} .problem-bg::after{background:linear-gradient(180deg,rgba(13,21,32,.92),rgba(13,21,32,.82));} } @media(max-width:540px){ .sc-foot{flex-direction:column;gap:8px;} }