/* ===== GP Home Builder — sistema de diseño ===== */
.ghb-home {
    --ghb-bg: #0a0a12;
    --ghb-text: #f3f4f7;
    --ghb-muted: #b6bccb;
    --ghb-accent: #e01f73;
    --ghb-accent2: #18e0c8;
    --ghb-card-bg: rgba(255,255,255,.04);
    --ghb-card-border: rgba(255,255,255,.10);
    --ghb-radius: 16px;
    --ghb-font-head: 'Orbitron', system-ui, sans-serif;
    --ghb-font-body: 'Inter', system-ui, sans-serif;
    --ghb-maxw: 1140px;
    background: var(--ghb-bg);
    color: var(--ghb-text);
    font-family: var(--ghb-font-body);
}

/* ---- SKINS ---- */
.ghb-skin-neon      { --ghb-bg:#0a0a12; --ghb-text:#f3f4f7; --ghb-muted:#b6bccb; --ghb-accent:#e01f73; --ghb-accent2:#18e0c8; --ghb-font-head:'Orbitron',sans-serif; }
.ghb-skin-dark-gold { --ghb-bg:#14110d; --ghb-text:#f4efe6; --ghb-muted:#bdb39c; --ghb-accent:#d4af37; --ghb-accent2:#b8860b; --ghb-card-bg:rgba(212,175,55,.06); --ghb-card-border:rgba(212,175,55,.25); --ghb-font-head:'Playfair Display',serif; }
.ghb-skin-light     { --ghb-bg:#ffffff; --ghb-text:#16181d; --ghb-muted:#5b616e; --ghb-accent:#2563eb; --ghb-accent2:#0ea5e9; --ghb-card-bg:#f7f8fa; --ghb-card-border:#e6e8ec; --ghb-font-head:'Poppins',sans-serif; --ghb-font-body:'Inter',sans-serif; }
.ghb-skin-pastel    { --ghb-bg:#fdf6f9; --ghb-text:#3a2e35; --ghb-muted:#8a7b83; --ghb-accent:#e8739b; --ghb-accent2:#a78bfa; --ghb-card-bg:#ffffff; --ghb-card-border:#f0e0e8; --ghb-radius:22px; --ghb-font-head:'Poppins',sans-serif; }
.ghb-skin-bold      { --ghb-bg:#0d0d0d; --ghb-text:#ffffff; --ghb-muted:#a9a9a9; --ghb-accent:#ffd400; --ghb-accent2:#ff4d00; --ghb-radius:8px; --ghb-font-head:'Poppins',sans-serif; }
.ghb-skin-ocean     { --ghb-bg:#0d1b2a; --ghb-text:#e8f1fb; --ghb-muted:#9fb3c8; --ghb-accent:#38bdf8; --ghb-accent2:#22d3ee; --ghb-card-bg:rgba(56,189,248,.07); --ghb-card-border:rgba(56,189,248,.2); --ghb-font-head:'Poppins',sans-serif; }
.ghb-skin-nature    { --ghb-bg:#0f1a12; --ghb-text:#eaf5ec; --ghb-muted:#a3bfa9; --ghb-accent:#34d399; --ghb-accent2:#a3e635; --ghb-card-bg:rgba(52,211,153,.07); --ghb-card-border:rgba(52,211,153,.2); --ghb-font-head:'Poppins',sans-serif; }
.ghb-skin-corporate { --ghb-bg:#0f172a; --ghb-text:#f1f5f9; --ghb-muted:#94a3b8; --ghb-accent:#3b82f6; --ghb-accent2:#64748b; --ghb-card-bg:#1e293b; --ghb-card-border:#334155; --ghb-radius:12px; --ghb-font-head:'Inter',sans-serif; }
.ghb-skin-editorial-acid { --ghb-bg:#06070a; --ghb-text:#f4f3ef; --ghb-muted:#9a9a94; --ghb-accent:#ccff00; --ghb-accent2:#ff3d81; --ghb-card-bg:rgba(255,255,255,.035); --ghb-card-border:rgba(204,255,0,.22); --ghb-radius:4px; --ghb-font-head:'Space Grotesk',sans-serif; }

/* ---- 13 DIRECCIONES VISUALES (A–M) ---- */
.ghb-skin-sello-oficial { --ghb-bg:#EDEBE3; --ghb-text:#1B1D2A; --ghb-muted:#68665B; --ghb-accent:#A93226; --ghb-accent2:#1F3B5C; --ghb-card-bg:#F8F7F2; --ghb-card-border:#D9D5C9; --ghb-radius:6px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-archivo-nocturno { --ghb-bg:#17140F; --ghb-text:#EDE6D6; --ghb-muted:#A79C88; --ghb-accent:#C8983D; --ghb-accent2:#4B6B5B; --ghb-card-bg:#221D16; --ghb-card-border:#3A3226; --ghb-radius:6px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-tinta-papel { --ghb-bg:#F4F5F3; --ghb-text:#16324F; --ghb-muted:#5C6B75; --ghb-accent:#16324F; --ghb-accent2:#B8862E; --ghb-card-bg:#FFFFFF; --ghb-card-border:#DCE0DE; --ghb-radius:6px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-azul-cobalto { --ghb-bg:#0E1626; --ghb-text:#E4E7ED; --ghb-muted:#8A93A6; --ghb-accent:#3D6FE0; --ghb-accent2:#E8794F; --ghb-card-bg:#16213A; --ghb-card-border:#243357; --ghb-radius:10px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-pizarra-corporativa { --ghb-bg:#EEF1F4; --ghb-text:#22303C; --ghb-muted:#667685; --ghb-accent:#3E5C76; --ghb-accent2:#C1666B; --ghb-card-bg:#FFFFFF; --ghb-card-border:#D7DEE3; --ghb-radius:10px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-medianoche-indigo { --ghb-bg:#131029; --ghb-text:#E8E6F5; --ghb-muted:#9691B8; --ghb-accent:#5B54D6; --ghb-accent2:#E0A458; --ghb-card-bg:#1D1940; --ghb-card-border:#2A2650; --ghb-radius:10px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-azul-editorial { --ghb-bg:#FFFFFF; --ghb-text:#1B2A4A; --ghb-muted:#5A6B85; --ghb-accent:#1B2A4A; --ghb-accent2:#B58A3E; --ghb-card-bg:#F7F8FA; --ghb-card-border:#E4E7ED; --ghb-radius:4px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }

.ghb-skin-glass-aurora { --ghb-bg:#0B0F1A; --ghb-text:#EDEFFA; --ghb-muted:#C7CDE6; --ghb-accent:#6C7BFF; --ghb-accent2:#22B8CF; --ghb-card-bg:rgba(255,255,255,.07); --ghb-card-border:rgba(255,255,255,.18); --ghb-radius:16px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-glass-aurora { background:
    radial-gradient(circle at 18% 15%, #4C6EF522 0%, transparent 42%),
    radial-gradient(circle at 85% 25%, #7C5CFC22 0%, transparent 48%),
    radial-gradient(circle at 45% 95%, #22B8CF1c 0%, transparent 50%),
    var(--ghb-bg); }
.ghb-skin-glass-aurora .ghb-card-i { backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12); }

.ghb-skin-neumorfismo { --ghb-bg:#E4E9F0; --ghb-text:#2B3A55; --ghb-muted:#6B7690; --ghb-accent:#5568D3; --ghb-accent2:#5568D3; --ghb-card-bg:#E4E9F0; --ghb-card-border:transparent; --ghb-radius:20px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-neumorfismo .ghb-card-i { box-shadow:8px 8px 16px #C3C9D4, -8px -8px 16px #FFFFFF; }
.ghb-skin-neumorfismo .ghb-btn, .ghb-skin-neumorfismo .ghb-btn-primary { background:#E4E9F0 !important; color:var(--ghb-accent) !important; box-shadow:5px 5px 10px #C3C9D4, -5px -5px 10px #FFFFFF; }

.ghb-skin-elevacion-material { --ghb-bg:#F3F1EC; --ghb-text:#1B1E29; --ghb-muted:#5D6270; --ghb-accent:#3654E0; --ghb-accent2:#3654E0; --ghb-card-bg:#FFFFFF; --ghb-card-border:transparent; --ghb-radius:16px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-elevacion-material .ghb-card-i { box-shadow:0 1px 2px rgba(20,20,10,.05), 0 10px 28px rgba(20,20,10,.11); }

.ghb-skin-inclinacion-3d { --ghb-bg:#0D1117; --ghb-text:#EDE8FA; --ghb-muted:#C3B6E8; --ghb-accent:#A78BFA; --ghb-accent2:#A78BFA; --ghb-card-bg:#1B1033; --ghb-card-border:rgba(255,255,255,.07); --ghb-radius:16px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-inclinacion-3d .ghb-cards-block { perspective:1000px; }
.ghb-skin-inclinacion-3d .ghb-card-i:first-child { transform:rotateY(-6deg) rotateX(3deg); box-shadow:20px 26px 40px -16px rgba(0,0,0,.6); }
.ghb-skin-inclinacion-3d .ghb-card-i:first-child:hover { transform:rotateY(-6deg) rotateX(3deg) translateY(-4px); }

.ghb-skin-bisel-brillante { --ghb-bg:#FBF6EE; --ghb-text:#4A3A26; --ghb-muted:#8A7A5F; --ghb-accent:#D9861D; --ghb-accent2:#D9861D; --ghb-card-bg:#FFFFFF; --ghb-card-border:#EFE3CE; --ghb-radius:14px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-bisel-brillante .ghb-card-ico {
    display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px;
    background:radial-gradient(circle at 30% 25%, #FFD98E, #F0A63B 60%, #D9861D 100%);
    box-shadow:0 6px 14px rgba(217,134,29,.35), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -3px 4px rgba(0,0,0,.18);
}

.ghb-skin-degrade-solido { --ghb-bg:#0A0E1A; --ghb-text:#EEF1FF; --ghb-muted:rgba(255,255,255,.78); --ghb-accent:#2451FF; --ghb-accent2:#7B2FF7; --ghb-card-bg:#141A2E; --ghb-card-border:transparent; --ghb-radius:16px; --ghb-font-head:'Fraunces',serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-degrade-solido .ghb-card-i { background:linear-gradient(135deg,#2451FF 0%,#7B2FF7 100%) !important; box-shadow:0 20px 40px -16px rgba(36,81,255,.45); }
.ghb-skin-degrade-solido .ghb-card-i h3, .ghb-skin-degrade-solido .ghb-card-i p { color:#fff !important; }

/* ---- N–U: paquetes estructurales (mismos tokens que sus Direcciones Visuales) ---- */
.ghb-skin-archivo-vivo { --ghb-bg:#F1EEE4; --ghb-text:#201C14; --ghb-muted:#6B6656; --ghb-accent:#7A2E2E; --ghb-accent2:#1B2A1E; --ghb-card-bg:#FBF9F2; --ghb-card-border:#D8D2BE; --ghb-radius:0px; --ghb-font-head:'Courier Prime',monospace; --ghb-font-body:'Source Serif 4',serif; }
.ghb-skin-archivo-vivo .ghb-card-i { border-radius:0; box-shadow:none; border-bottom:1px solid var(--ghb-card-border); }

.ghb-skin-bloque-bruto { --ghb-bg:#F2F2ED; --ghb-text:#0A0A0A; --ghb-muted:#56534A; --ghb-accent:#FF3D00; --ghb-accent2:#0A0A0A; --ghb-card-bg:#0A0A0A; --ghb-card-border:#0A0A0A; --ghb-radius:0px; --ghb-font-head:'Archivo Black',sans-serif; --ghb-font-body:'Work Sans',sans-serif; }
.ghb-skin-bloque-bruto .ghb-card-i { border-radius:0; border:3px solid #0A0A0A; box-shadow:8px 8px 0 var(--ghb-accent); }
.ghb-skin-bloque-bruto .ghb-card-i h3, .ghb-skin-bloque-bruto .ghb-card-i p { color:#F2F2ED !important; }
.ghb-skin-bloque-bruto .ghb-btn { border-radius:0; border:3px solid #0A0A0A; box-shadow:6px 6px 0 #0A0A0A; }

.ghb-skin-cinta-tecnica { --ghb-bg:#E7EEF2; --ghb-text:#0F2436; --ghb-muted:#4E6373; --ghb-accent:#E8600C; --ghb-accent2:#0F3D5C; --ghb-card-bg:#FFFFFF; --ghb-card-border:#0F3D5C; --ghb-radius:2px; --ghb-font-head:'Space Grotesk',sans-serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-cinta-tecnica .ghb-card-i { border:1.5px dashed var(--ghb-card-border); border-radius:2px; box-shadow:none; }

.ghb-skin-vitrina-editorial { --ghb-bg:#FFFFFF; --ghb-text:#1A1814; --ghb-muted:#7A7468; --ghb-accent:#1A1814; --ghb-accent2:#1A1814; --ghb-card-bg:#FFFFFF; --ghb-card-border:#E5E1D8; --ghb-radius:0px; --ghb-font-head:'Bodoni Moda',serif; --ghb-font-body:'Work Sans',sans-serif; }
.ghb-skin-vitrina-editorial .ghb-card-i { border-radius:0; border:none; border-top:1px solid var(--ghb-card-border); box-shadow:none; }

.ghb-skin-taller-analogo { --ghb-bg:#17140F; --ghb-text:#E8E2D5; --ghb-muted:#A79A85; --ghb-accent:#C4472C; --ghb-accent2:#E8E2D5; --ghb-card-bg:#221D16; --ghb-card-border:#3A3226; --ghb-radius:3px; --ghb-font-head:'Bebas Neue',sans-serif; --ghb-font-body:'Barlow',sans-serif; }
.ghb-skin-taller-analogo .ghb-card-i { clip-path:polygon(1% 0%,100% 0%,99% 100%,0% 98%); transform:rotate(-.4deg); box-shadow:none; }

.ghb-skin-panel-control { --ghb-bg:#0B0E10; --ghb-text:#E4EAEA; --ghb-muted:#7C8A8A; --ghb-accent:#7FE0C4; --ghb-accent2:#F2B33D; --ghb-card-bg:#12161A; --ghb-card-border:#223028; --ghb-radius:4px; --ghb-font-head:'JetBrains Mono',monospace; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-panel-control .ghb-card-i { border:1px solid var(--ghb-card-border); box-shadow:none; }

.ghb-skin-piedra-bronce { --ghb-bg:#EDEAE2; --ghb-text:#201F1B; --ghb-muted:#726C5E; --ghb-accent:#9C7A3C; --ghb-accent2:#2B2A26; --ghb-card-bg:#F5F3EC; --ghb-card-border:#D9D3C3; --ghb-radius:0px; --ghb-font-head:'Cinzel',serif; --ghb-font-body:'EB Garamond',serif; }
.ghb-skin-piedra-bronce .ghb-card-i { border:1px solid var(--ghb-card-border); box-shadow:none; }

.ghb-skin-cinta-transportadora { --ghb-bg:#E9E9E4; --ghb-text:#1B1E22; --ghb-muted:#5B6169; --ghb-accent:#F2C230; --ghb-accent2:#2B3138; --ghb-card-bg:#FFFFFF; --ghb-card-border:#C9CBC5; --ghb-radius:0px; --ghb-font-head:'Oswald',sans-serif; --ghb-font-body:'IBM Plex Sans',sans-serif; }
.ghb-skin-cinta-transportadora .ghb-card-i { border:none; border-left:6px solid var(--ghb-accent); border-radius:0; box-shadow:none; }

/* ---- ENCUADRES (ancho / padding) ---- */
.ghb-block { width: 100%; }
.ghb-inner { width: 100%; }
.ghb-w-boxed  .ghb-inner { max-width: var(--ghb-maxw); margin: 0 auto; }
.ghb-w-narrow .ghb-inner { max-width: 760px; margin: 0 auto; }
.ghb-w-full   .ghb-inner { max-width: 100%; }
.ghb-w-boxed, .ghb-w-narrow, .ghb-w-full { padding-left: 20px; padding-right: 20px; }
.ghb-pad-none { padding-top: 0; padding-bottom: 0; }
.ghb-pad-sm   { padding-top: 18px; padding-bottom: 18px; }
.ghb-pad-md   { padding-top: 44px; padding-bottom: 44px; }
.ghb-pad-lg   { padding-top: 84px; padding-bottom: 84px; }

/* ---- HERO ---- */
.ghb-hero { padding: 96px 20px; text-align: center; }
.ghb-hero-inner { max-width: 880px; margin: 0 auto; }
.ghb-hero h1 { font-family: var(--ghb-font-head); font-size: calc(clamp(2.1rem, 5.5vw, 3.8rem) * var(--ghb-ts, 1)); font-weight: 800; margin: 0 0 18px; line-height: 1.08; letter-spacing: .5px; }
.ghb-hero-sub { font-size: calc(clamp(1.05rem, 2.5vw, 1.45rem) * var(--ghb-bs, 1)); opacity: .9; margin: 0 0 28px; }

/* ---- TIPOGRAFÍA ---- */
.ghb-heading { font-family: var(--ghb-font-head); font-weight: 800; line-height: 1.18; margin: 0 0 20px; font-size: calc(clamp(1.6rem, 3.5vw, 2.4rem) * var(--ghb-ts, 1)); }
.ghb-text { line-height: 1.85; font-size: calc(16.5px * var(--ghb-bs, 1)); color: var(--ghb-muted); }
.ghb-text p { margin: 0 0 14px; }
.ghb-text a { color: var(--ghb-accent); }

/* ---- BOTONES ---- */
.ghb-btn { display: inline-block; padding: 14px 32px; border-radius: var(--ghb-radius); font-weight: 700; text-decoration: none; transition: transform .15s, filter .15s, box-shadow .15s; font-family: var(--ghb-font-head); }
.ghb-btn, .ghb-btn-primary { background: var(--ghb-accent); color: #fff !important; box-shadow: 0 8px 24px -8px var(--ghb-accent); }
.ghb-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ghb-btn-outline { background: transparent !important; color: var(--ghb-accent) !important; border: 2px solid var(--ghb-accent); box-shadow: none; }
.ghb-btn-ghost { background: var(--ghb-card-bg) !important; color: var(--ghb-text) !important; border: 1px solid var(--ghb-card-border); box-shadow: none; }

/* ---- TARJETAS ---- */
.ghb-cards { display: grid; gap: 22px; margin-top: 8px; }
.ghb-cols-1 { grid-template-columns: 1fr; }
.ghb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ghb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ghb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ghb-card-i { background: var(--ghb-card-bg); border: 1px solid var(--ghb-card-border); border-radius: var(--ghb-radius); padding: 28px 24px; text-align: center; transition: transform .18s, border-color .18s; display: block; }
a.ghb-card-i { text-decoration: none; color: inherit; }
.ghb-card-i:hover { transform: translateY(-4px); border-color: var(--ghb-accent); }
.ghb-card-ico { font-size: 40px; margin-bottom: 12px; }
.ghb-card-i h3 { font-family: var(--ghb-font-head); margin: 0 0 10px; font-size: calc(1.2rem * var(--ghb-ts, 1)); }
.ghb-card-i p { color: var(--ghb-muted); margin: 0; line-height: 1.7; font-size: calc(15px * var(--ghb-bs, 1)); }

/* ---- COLUMNAS ---- */
.ghb-columns { display: grid; gap: 24px; }
.ghb-columns.ghb-gap-none { gap: 0; }
.ghb-columns.ghb-gap-sm { gap: 12px; }
.ghb-columns.ghb-gap-lg { gap: 40px; }
.ghb-column { min-width: 0; }
.ghb-column > .ghb-block:first-child { margin-top: 0; }

/* ---- SEPARADOR ---- */
.ghb-divider { border: 0; border-top-width: 2px; margin: 8px 0; }

/* ---- CITA / TESTIMONIO ---- */
.ghb-quote { max-width: 720px; margin: 0 auto; text-align: center; border: 0; padding: 0; }
.ghb-quote p { font-family: var(--ghb-font-head); font-size: calc(1.4rem * var(--ghb-bs, 1)); line-height: 1.6; color: var(--ghb-text); margin: 0 0 16px; }
.ghb-quote p::before { content: '“'; } .ghb-quote p::after { content: '”'; }
.ghb-quote footer { color: var(--ghb-muted); font-size: calc(14px * var(--ghb-bs, 1)); }
.ghb-quote footer span { opacity: .8; }

/* ---- LISTA DE ÍCONOS ---- */
.ghb-icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 720px; }
.ghb-icon-list li { display: flex; align-items: flex-start; gap: 14px; }
.ghb-icon-list-ico { font-size: 24px; line-height: 1; flex-shrink: 0; }
.ghb-icon-list-txt { color: var(--ghb-text); line-height: 1.6; }

/* ---- VIDEO ---- */
.ghb-video { position: relative; max-width: 900px; margin: 0 auto; }
.ghb-video iframe, .ghb-video video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--ghb-radius); display: block; }

/* ---- EMBEDS (tienda / formularios / portal) ---- */
.ghb-embed { width: 100%; }
.ghb-form .ghb-embed { max-width: 820px; margin: 0 auto; background: var(--ghb-card-bg); border: 1px solid var(--ghb-card-border); border-radius: var(--ghb-radius); padding: 28px; }

.ghb-empty { max-width: 700px; margin: 60px auto; padding: 40px; text-align: center; border: 2px dashed var(--ghb-card-border); border-radius: var(--ghb-radius); color: var(--ghb-muted); }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .ghb-cols-3, .ghb-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .ghb-tablet-hide { display: none !important; }
    .ghb-tablet-pad-none { padding-top: 0 !important; padding-bottom: 0 !important; }
    .ghb-tablet-pad-sm { padding-top: 20px !important; padding-bottom: 20px !important; }
    .ghb-tablet-pad-md { padding-top: 40px !important; padding-bottom: 40px !important; }
    .ghb-tablet-pad-lg { padding-top: 64px !important; padding-bottom: 64px !important; }
}
@media (max-width: 600px) {
    .ghb-hero { padding: 60px 16px; }
    .ghb-pad-lg { padding-top: 48px; padding-bottom: 48px; }
    .ghb-pad-md { padding-top: 30px; padding-bottom: 30px; }
    .ghb-cols-2, .ghb-cols-3, .ghb-cols-4 { grid-template-columns: 1fr; }
    .ghb-w-boxed, .ghb-w-narrow, .ghb-w-full { padding-left: 16px; padding-right: 16px; }
    .ghb-mobile-hide { display: none !important; }
    .ghb-mobile-pad-none { padding-top: 0 !important; padding-bottom: 0 !important; }
    .ghb-mobile-pad-sm { padding-top: 16px !important; padding-bottom: 16px !important; }
    .ghb-mobile-pad-md { padding-top: 30px !important; padding-bottom: 30px !important; }
    .ghb-mobile-pad-lg { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ═══════════════════════════════════════════════════════════
   SKIN "EDITORIAL ÁCIDO" — dirección de arte propia.
   Sin WebGL/Spline ni GSAP a propósito (mismo criterio ya acordado
   para el resto del sitio: nada de dependencias nuevas ni riesgo de
   performance para un sitio de pyme) — todo lo demás del brief sí,
   logrado 100% en CSS: tipografía monumental fluida, mix-blend-mode,
   glassmorphism, grilla "rota" (offsets/rotación por tarjeta) y
   scroll-reveal nativo (animation-timeline, sin JS).
   ═══════════════════════════════════════════════════════════ */

/* Tipografía monumental fluida, con fusión sobre el fondo */
.ghb-skin-editorial-acid .ghb-hero h1 {
    font-size: calc(clamp(3rem, 9vw, 7.5rem) * var(--ghb-ts, 1));
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fff;
    mix-blend-mode: difference;
}
.ghb-skin-editorial-acid .ghb-heading {
    font-size: calc(clamp(1.9rem, 4.5vw, 3.4rem) * var(--ghb-ts, 1));
    letter-spacing: -0.02em;
}

/* Glassmorphism marcado en tarjetas y botones */
.ghb-skin-editorial-acid .ghb-card-i {
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -24px rgba(0,0,0,.7);
}
.ghb-skin-editorial-acid .ghb-btn,
.ghb-skin-editorial-acid .ghb-btn-primary {
    color: #06070a !important;
    box-shadow: 0 0 0 1px rgba(204,255,0,.4), 0 14px 34px -12px rgba(204,255,0,.45);
}

/* Grilla "rota": offsets y rotación alternados por tarjeta, sin abandonar el grid real */
.ghb-skin-editorial-acid .ghb-cards { row-gap: 40px; }
.ghb-skin-editorial-acid .ghb-card-i:nth-child(2n) { transform: translateY(30px); }
.ghb-skin-editorial-acid .ghb-card-i:nth-child(3n) { transform: translateY(-14px) rotate(-0.6deg); }
.ghb-skin-editorial-acid .ghb-card-i:nth-child(2n):hover { transform: translateY(24px) translateY(-4px); }
.ghb-skin-editorial-acid .ghb-card-i:nth-child(3n):hover { transform: translateY(-18px) rotate(-0.6deg); }

/* Scroll-reveal nativo en CSS (sin GSAP): navegadores sin soporte simplemente no animan, sin quedar invisibles.
   Las tarjetas usan una versión solo-opacidad (no transform) para no pisar el offset fijo de la grilla rota de arriba. */
@supports (animation-timeline: view()) {
    .ghb-skin-editorial-acid .ghb-heading,
    .ghb-skin-editorial-acid .ghb-text {
        animation: ghb-ea-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
    .ghb-skin-editorial-acid .ghb-card-i {
        animation: ghb-ea-fade linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}
@keyframes ghb-ea-reveal {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: none; }
}
@keyframes ghb-ea-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ghb-skin-editorial-acid .ghb-heading,
    .ghb-skin-editorial-acid .ghb-card-i,
    .ghb-skin-editorial-acid .ghb-text {
        animation: none;
    }
}

/* ===========================================================
   BLOQUES NUEVOS (2.0)
   Usan los tokens del skin, así heredan la identidad del sitio.
   =========================================================== */

/* FAQ / acordeón */
.ghb-faq { max-width: 820px; margin: 0 auto; }
.ghb-faq-i { border-bottom: 1px solid var(--ghb-card-border); padding: 4px 0; }
.ghb-faq-i summary {
    cursor: pointer; padding: 16px 4px; font-weight: 600; font-family: var(--ghb-font-head);
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.ghb-faq-i summary::-webkit-details-marker { display: none; }
.ghb-faq-i summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ghb-accent); flex: none; }
.ghb-faq-i[open] summary::after { content: "–"; }
.ghb-faq-a { padding: 0 4px 18px; color: var(--ghb-muted); line-height: 1.75; }

/* Tabla de precios */
.ghb-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ghb-plan {
    background: var(--ghb-card-bg); border: 1px solid var(--ghb-card-border);
    border-radius: var(--ghb-radius); padding: 28px 24px; text-align: center;
    display: flex; flex-direction: column; gap: 12px;
}
.ghb-plan h3 { margin: 0; font-family: var(--ghb-font-head); }
.ghb-plan-precio { font-size: calc(clamp(1.8rem, 4vw, 2.6rem) * var(--ghb-ts, 1)); font-weight: 800; color: var(--ghb-accent); line-height: 1.1; }
.ghb-plan-desc { color: var(--ghb-muted); line-height: 1.7; flex: 1; }

/* Estadísticas */
.ghb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; text-align: center; }
.ghb-stat { display: flex; flex-direction: column; gap: 6px; }
.ghb-stat-n { font-size: calc(clamp(2rem, 5vw, 3.2rem) * var(--ghb-ts, 1)); font-weight: 800; color: var(--ghb-accent); font-family: var(--ghb-font-head); line-height: 1; }
.ghb-stat-l { color: var(--ghb-muted); font-size: calc(14px * var(--ghb-bs, 1)); }

/* Línea de tiempo */
.ghb-timeline { list-style: none; margin: 0 auto; padding: 0 0 0 26px; max-width: 760px; border-left: 2px solid var(--ghb-card-border); }
.ghb-tl-i { position: relative; padding: 0 0 26px 14px; }
.ghb-tl-i::before {
    content: ""; position: absolute; left: -33px; top: 6px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--ghb-accent); box-shadow: 0 0 0 4px var(--ghb-bg);
}
.ghb-tl-f { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ghb-accent); font-weight: 700; margin-bottom: 4px; }
.ghb-tl-i p { color: var(--ghb-muted); margin: 4px 0 0; line-height: 1.7; }

/* Últimas del blog */
.ghb-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.ghb-post {
    background: var(--ghb-card-bg); border: 1px solid var(--ghb-card-border);
    border-radius: var(--ghb-radius); overflow: hidden; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.ghb-post:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(0,0,0,.4); }
.ghb-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ghb-post-b { padding: 18px 20px 22px; }
.ghb-post-f { font-size: 12px; color: var(--ghb-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ghb-post-b h3 { margin: 6px 0 8px; font-family: var(--ghb-font-head); font-size: calc(18px * var(--ghb-ts, 1)); line-height: 1.35; }
.ghb-post-b p { margin: 0; color: var(--ghb-muted); line-height: 1.65; font-size: calc(14px * var(--ghb-bs, 1)); }

/* Cuenta regresiva */
.ghb-countdown { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ghb-countdown > div {
    background: var(--ghb-card-bg); border: 1px solid var(--ghb-card-border);
    border-radius: var(--ghb-radius); padding: 18px 22px; min-width: 92px; text-align: center;
}
.ghb-countdown span { display: block; font-size: calc(clamp(1.6rem, 4vw, 2.4rem) * var(--ghb-ts, 1)); font-weight: 800; color: var(--ghb-accent); font-variant-numeric: tabular-nums; line-height: 1; }
.ghb-countdown small { color: var(--ghb-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* Separador de formas */
.ghb-shape-block .ghb-inner { padding: 0; max-width: none; }
.ghb-shape { display: block; width: 100%; height: clamp(50px, 8vw, 120px); color: var(--ghb-card-bg); }

/* ===========================================================
   TERMINACIÓN (2.0) — sólo con el modo encendido.
   =========================================================== */

/* Tipografía fluida: el motivo #1 por el que un sitio se ve amateur
   es el tamaño de texto que no acompaña el ancho de la pantalla. */
.ghb-v2 h1, .ghb-v2 .ghb-hero h1 { font-size: calc(clamp(2rem, 5vw, 3.6rem) * var(--ghb-ts, 1)); line-height: 1.12; }
.ghb-v2 h2, .ghb-v2 .ghb-heading { font-size: calc(clamp(1.5rem, 3.4vw, 2.4rem) * var(--ghb-ts, 1)); line-height: 1.2; }
.ghb-v2 h3 { font-size: calc(clamp(1.1rem, 2vw, 1.4rem) * var(--ghb-ts, 1)); line-height: 1.3; }
.ghb-v2 p { line-height: 1.75; }

/* Foco visible: navegar con teclado tiene que ser posible y verse. */
.ghb-v2 a:focus-visible,
.ghb-v2 button:focus-visible,
.ghb-v2 summary:focus-visible,
.ghb-v2 [tabindex]:focus-visible {
    outline: 3px solid var(--ghb-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Imágenes sin saltos de maquetado mientras cargan. */
.ghb-v2 img { max-width: 100%; height: auto; }
.ghb-v2 .ghb-card-i img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ===========================================================
   REFINAMIENTO 2.0
   Sólo bajo .ghb-v2, así que con el modo apagado nada de esto aplica.

   Qué corrige, concretamente — son las cinco cosas que hacían que
   las pantallas se vieran hechas por IA:
     1. Emojis de tres estilos distintos en la misma grilla.
     2. Todo centrado, sin jerarquía de lectura.
     3. Radios grandes y sombras difusas por todos lados.
     4. Párrafos que cruzan 1400px de ancho, imposibles de leer.
     5. Títulos con el mismo peso visual que el cuerpo.
   =========================================================== */

.ghb-v2 {
    --ghb-medida: 68ch;          /* largo de línea cómodo */
    --ghb-r-chico: 6px;
    --ghb-r-medio: 10px;
    --ghb-borde: color-mix(in srgb, var(--ghb-text) 12%, transparent);
    --ghb-sombra: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -18px rgba(0,0,0,.35);
}

/* ---- Tipografía: jerarquía real ---- */
.ghb-v2 h1,
.ghb-v2 h2,
.ghb-v2 h3,
.ghb-v2 .ghb-heading {
    font-family: var(--ghb-font-head);
    letter-spacing: -0.02em;     /* los títulos grandes piden tracking negativo */
    text-wrap: balance;          /* evita la línea huérfana de una palabra */
    margin-top: 0;
}
.ghb-v2 h1 { letter-spacing: -0.03em; }
.ghb-v2 h3 { letter-spacing: -0.01em; font-size: calc(clamp(1.05rem, 1.6vw, 1.25rem) * var(--ghb-ts, 1)); }

/* Largo de línea: un párrafo de 1400px no se lee, se escanea y se abandona. */
.ghb-v2 .ghb-text,
.ghb-v2 .ghb-hero-sub,
.ghb-v2 .ghb-card-i p,
.ghb-v2 .ghb-faq-a { max-width: var(--ghb-medida); }
.ghb-v2 .ghb-text[style*="center"],
.ghb-v2 .ghb-hero-sub { margin-left: auto; margin-right: auto; }

.ghb-v2 .ghb-card-i p,
.ghb-v2 .ghb-text { color: var(--ghb-muted); }

/* ---- Íconos de línea ---- */
.ghb-ico { width: 22px; height: 22px; display: block; flex: none; }

.ghb-v2 .ghb-card-ico {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ghb-r-chico);
    background: color-mix(in srgb, var(--ghb-accent) 12%, transparent);
    color: var(--ghb-accent);
    margin-bottom: 16px;
    font-size: 20px;             /* para los emojis que sigan en uso */
}

/* ---- Tarjetas: alineadas a la izquierda, borde fino, sombra contenida ---- */
.ghb-v2 .ghb-card-i {
    text-align: left;
    border-radius: var(--ghb-r-medio);
    border: 1px solid var(--ghb-borde);
    box-shadow: none;
    padding: 26px 24px 28px;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ghb-v2 .ghb-card-i:hover {
    border-color: color-mix(in srgb, var(--ghb-accent) 40%, transparent);
    box-shadow: var(--ghb-sombra);
}
.ghb-v2 .ghb-card-i h3 { margin: 0 0 8px; }
.ghb-v2 .ghb-card-i p { margin: 0; font-size: 15px; line-height: 1.65; }

/* ---- Eyebrow: el H3 chico que abre una sección ---- */
.ghb-v2 .ghb-heading[style*="left"] + .ghb-text,
.ghb-v2 h3.ghb-heading {
    letter-spacing: .08em;
}
.ghb-v2 h3.ghb-heading {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: var(--ghb-accent);
    margin-bottom: 10px;
}

/* ---- Botones: menos redondeados, más presencia ---- */
.ghb-v2 .ghb-btn {
    border-radius: var(--ghb-r-chico);
    padding: 13px 26px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ghb-v2 .ghb-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--ghb-sombra); }

/* ---- Ritmo vertical: aire donde hace falta ---- */
.ghb-v2 .ghb-pad-lg { padding-block: clamp(64px, 9vw, 120px); }
.ghb-v2 .ghb-pad-md { padding-block: clamp(40px, 5vw, 64px); }
.ghb-v2 .ghb-pad-sm { padding-block: clamp(20px, 2.5vw, 32px); }
.ghb-v2 .ghb-cards { gap: 20px; }

/* ---- Hero: peso tipográfico, no decoración ---- */
.ghb-v2 .ghb-hero { padding-block: clamp(88px, 13vw, 168px); }
.ghb-v2 .ghb-hero h1 { margin-bottom: 20px; }
.ghb-v2 .ghb-hero-sub { font-size: clamp(1rem, 1.6vw, 1.175rem); line-height: 1.7; margin-bottom: 32px; opacity: .92; }

/* ---- Los bloques nuevos, con el mismo criterio ---- */
.ghb-v2 .ghb-plan { text-align: left; border-radius: var(--ghb-r-medio); border-color: var(--ghb-borde); box-shadow: none; padding: 30px 26px; }
.ghb-v2 .ghb-plan-precio { letter-spacing: -0.03em; }
.ghb-v2 .ghb-stat-n { letter-spacing: -0.03em; }
.ghb-v2 .ghb-stat-l { text-transform: uppercase; letter-spacing: .07em; font-size: 12px; font-weight: 600; }
.ghb-v2 .ghb-faq-i summary { font-size: 16px; }
.ghb-v2 .ghb-post { border-radius: var(--ghb-r-medio); border-color: var(--ghb-borde); }
.ghb-v2 .ghb-post:hover { box-shadow: var(--ghb-sombra); }
.ghb-v2 .ghb-countdown > div { border-radius: var(--ghb-r-medio); border-color: var(--ghb-borde); }
.ghb-v2 .ghb-timeline { border-left-color: var(--ghb-borde); }

/* ---- Lista de íconos: alineada, no centrada ---- */
.ghb-v2 .ghb-icon-list { max-width: var(--ghb-medida); }
.ghb-v2 .ghb-icon-list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.ghb-v2 .ghb-icon-list .ghb-ico { color: var(--ghb-accent); margin-top: 2px; }

/* ---- Cita: tipografía, no comillas gigantes ---- */
.ghb-v2 .ghb-quote { border-left: 2px solid var(--ghb-accent); padding-left: 26px; }
.ghb-v2 .ghb-quote p { font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.5; letter-spacing: -0.015em; font-family: var(--ghb-font-head); }
.ghb-v2 .ghb-quote footer { margin-top: 16px; font-size: 14px; color: var(--ghb-muted); }

/* ---- Móvil ---- */
@media (max-width: 720px) {
    .ghb-v2 .ghb-card-i { padding: 22px 20px 24px; }
    .ghb-v2 .ghb-card-ico { width: 38px; height: 38px; margin-bottom: 12px; }
    .ghb-v2 .ghb-quote { padding-left: 18px; }
}

/* ── Tipografía a medida (GHB_Design): grosor, mayúsculas y espaciado de títulos.
   Las variables las pone el style del contenedor o del bloque; las clases sólo
   aparecen si alguien eligió algo, así que sin configurar no cambia nada. ── */
.ghb-d-hw :is(h1, h2, h3, .ghb-heading, .ghb-stat-n, .ghb-plan-precio):not([class*="gpt-"]) { font-weight: var(--ghb-hw); }
.ghb-d-uc :is(h1, h2, h3, .ghb-heading):not([class*="gpt-"]) { text-transform: uppercase; }
.ghb-d-tr :is(h1, h2, h3, .ghb-heading):not([class*="gpt-"]) { letter-spacing: var(--ghb-htr); }
.ghb-block[style*="--ghb-font-body"] { font-family: var(--ghb-font-body); }

/* ── Colores de botón a medida (GHB_Design). Clase doble + !important: tienen que
   ganarle a los skins que fijan el color del botón con !important. Sin configurar,
   las clases no aparecen y los botones quedan como siempre. ── */
.ghb-d-bb.ghb-d-bb .ghb-btn:not(.ghb-btn-outline):not(.ghb-btn-ghost) { background: var(--ghb-btn-bg) !important; box-shadow: 0 8px 24px -8px var(--ghb-btn-bg); }
.ghb-d-bb.ghb-d-bb .ghb-btn-outline { color: var(--ghb-btn-bg) !important; border-color: var(--ghb-btn-bg) !important; }
.ghb-d-bt.ghb-d-bt .ghb-btn:not(.ghb-btn-outline):not(.ghb-btn-ghost) { color: var(--ghb-btn-text) !important; }
.ghb-d-bh.ghb-d-bh .ghb-btn:not(.ghb-btn-ghost):hover { background: var(--ghb-btn-hover) !important; filter: none; }
.ghb-d-bh.ghb-d-bh .ghb-btn-outline:hover { color: var(--ghb-btn-text, #fff) !important; border-color: var(--ghb-btn-hover) !important; }