/* Visual home. Motion supports the examples; media loads on request. */
.visual-home { --paper:#fcfcfb; --brand:#2576b8; background:var(--paper); color:#14212d; }
.visual-home [hidden] { display:none!important; }
.visual-home :focus-visible { outline:3px solid #2576b8; outline-offset:5px; }
.visual-home section[id], .visual-home [id="video"], .visual-home [id="metodo"] { scroll-margin-top:105px; }
.home-container { width:min(1320px,calc(100% - 64px)); margin-inline:auto; }
.home-header { position:sticky; top:0; z-index:50; background:rgba(252,252,251,.94); backdrop-filter:blur(14px); border-bottom:1px solid #e5eaf0; }
.home-nav { min-height:86px; display:flex; gap:24px; align-items:center; justify-content:space-between; }
.home-nav-links,.home-nav-actions { display:flex; gap:30px; align-items:center; }
.home-nav-links { font-size:14px; font-weight:650; }
.home-nav-actions { gap:18px; }
.language-link { font-size:13px; font-weight:800; padding:10px 5px; }
.home-button { display:inline-flex; gap:24px; align-items:center; justify-content:center; min-height:54px; padding:15px 25px; background:#2576b8; color:white; border-radius:12px; font-size:15px; font-weight:750; transition:background .2s,transform .2s; }
.home-button:hover { background:#185f9a; transform:translateY(-2px); }
.home-button.small { min-height:44px; padding:10px 17px; font-size:13px; gap:16px; }
.home-button.light { background:white; color:#174f7d; }
.home-text-link { font-weight:750; font-size:15px; text-decoration:underline; text-decoration-color:#9fb9ce; text-underline-offset:5px; }
.home-eyebrow { margin:0 0 18px; color:#2576b8; text-transform:uppercase; font-weight:750; font-size:11px; letter-spacing:.17em; }
.home-hero { padding:55px 0 36px; }
.hero-copy { text-align:center; }
.hero-copy h1 { font-size:clamp(44px,6.1vw,86px); line-height:1.025; letter-spacing:-.065em; margin:0 0 24px; font-weight:770; }
.hero-copy h1 em { font-style:normal; color:#2576b8; }
.hero-intro { font-size:17px; line-height:1.65; max-width:690px; margin:0 auto 25px; color:#586875; }
.hero-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:27px; }
.home-showcase { margin-top:42px; }
.hero-reels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; padding:12px 0; }
.reel-card { min-width:0; margin:0; }
.reel-open { position:relative; display:block; aspect-ratio:9/16; border-radius:22px; overflow:hidden; background:#dce5eb; isolation:isolate; }
.reel-open::after { content:""; pointer-events:none; position:absolute; inset:50% 0 0; z-index:1; background:linear-gradient(transparent,rgba(4,13,20,.65)); }
.reel-open img { width:100%; height:100%; object-fit:cover; transition:none; }
.reel-open:hover img { transform:none; }
.reel-person { position:absolute; top:14px; left:14px; padding:4px 10px; background:rgba(9,20,29,.66); color:white; border-radius:20px; font-size:11px; font-weight:700; }
.reel-play { position:absolute; top:14px; right:14px; width:31px; height:31px; display:grid; place-items:center; color:#192d3c; background:white; border-radius:50%; font-size:11px; padding-left:2px; box-shadow:0 2px 12px #0002; }
.reel-tag { position:absolute; left:14px; right:14px; bottom:16px; width:fit-content; max-width:calc(100% - 28px); padding:7px 12px; background:white; border-radius:30px; color:#243b4b; font-size:11px; font-weight:650; z-index:2; }


.hero-reels .reel-card { align-self:start; }
.reel-card.is-active .reel-open { outline:3px solid #4aa7e9; outline-offset:-3px; }
.hero-caption { display:flex; justify-content:space-between; align-items:center; padding-top:22px; color:#50616f; font-size:12px; }
.hero-caption p { margin:0; }
.hero-caption span { display:inline-block; }
.reel-arrows { display:none; gap:8px; }
.reel-arrows button { width:38px; height:38px; border:1px solid #cfdae2; border-radius:50%; background:white; cursor:pointer; }
.home-connections { padding:12px 0; border-block:1px solid #e6ebee; }
.connection-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.connection-heading h2 { font-size:15px; font-weight:600; letter-spacing:0; line-height:1.5; margin:0; color:#5b707f; }
.connection-heading button { font-size:11px; white-space:nowrap; border:1px solid #d8e1e7; padding:7px 12px; border-radius:20px; background:transparent; cursor:pointer; }
.logo-window { overflow:hidden; margin:8px 0; }
.logo-track { width:100%; }
.logo-list { list-style:none; margin:0; padding:0 32px; display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
.logo-list li { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; letter-spacing:-.04em; white-space:nowrap; }
.logo-list img { width:26px; height:26px; object-fit:contain; border-radius:5px; }
.home-connections.motion-ready .logo-track { width:max-content; display:flex; animation:cf-logos var(--logo-duration,55s) linear infinite; }
.home-connections.motion-ready .logo-list { flex-wrap:nowrap; padding:0 22px; gap:28px; }
.home-connections.motion-ready:is(.paused,:hover,:focus-within) .logo-track { animation-play-state:paused; }
.connection-note { font-size:11px; color:#596d7d; margin-bottom:0; }
.connection-note a { color:#2576b8; text-decoration:underline; text-underline-offset:3px; }
@keyframes cf-logos { to { transform:translateX(-50%); } }
.home-section { padding:100px 0; }
.home-section-heading { display:grid; grid-template-columns:1.35fr 1fr; gap:7%; margin-bottom:38px; align-items:end; }
.visual-home h2 { font-size:clamp(32px,3.9vw,53px); line-height:1.1; letter-spacing:-.05em; font-weight:730; }
.home-section-heading h2 { margin-bottom:0; }
.home-section-heading > p { font-size:16px; line-height:1.75; color:#627582; margin:0 0 3px; max-width:440px; }
.gallery-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:25px; }
.gallery-filters { display:flex; gap:9px; flex-wrap:wrap; }
.gallery-filters button { background:transparent; border:1px solid #d6dfe5; border-radius:25px; padding:10px 18px; font-weight:650; font-size:12px; cursor:pointer; }
.gallery-filters button[aria-pressed="true"] { background:#18354b; border-color:#18354b; color:white; }
.gallery-count { font-size:12px; color:#50616f; white-space:nowrap; }
.reel-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 22px; }
.reel-gallery .reel-open { aspect-ratio:9/16; }
.reel-gallery .reel-open img { object-fit:cover; }
.reel-gallery h3 { font-size:15px; letter-spacing:-.01em; line-height:1.4; margin:13px 4px 0; font-weight:650; }
.home-fineprint { font-size:12px; color:#596d7d; margin:20px 0 0; line-height:1.65; }
.home-product { background:#102c42; color:white; }
.home-product .home-eyebrow { color:#83c7fa; }
.home-product .home-section-heading>p,.home-product .home-fineprint { color:#b5cad8; }
.home-journey { list-style:none; padding:0; margin:44px 0 64px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.home-journey li { border-top:1px solid #527084; padding-top:17px; }
.home-journey li>span { font-size:12px; color:#78c2f8; }
.home-journey h3 { font-size:20px; letter-spacing:-.025em; margin:21px 0 13px; }
.home-journey p { font-size:14px; color:#b5cad8; line-height:1.65; max-width:230px; margin:0; }
.home-demo { display:grid; grid-template-columns:.85fr 1.5fr; gap:45px; align-items:center; border-top:1px solid #3d596c; padding-top:54px; }
.demo-copy h3 { font-size:clamp(25px,2.8vw,37px); line-height:1.1; margin:0 0 22px; }
.demo-copy p:not(.home-eyebrow) { color:#b5cad8; }
.demo-copy .home-text-link { display:inline-block; margin-top:18px; }
.product-film { display:block; position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:#163c57; }
.product-film img { width:100%; height:100%; object-fit:cover; }
.film-play { position:absolute; left:20px; bottom:20px; display:flex; gap:14px; align-items:center; border-radius:35px; padding:12px 22px; background:white; color:#163b58; }
.film-play b { font-size:13px; }
.business-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.business-card { border-radius:28px; padding:40px; display:flex; flex-direction:column; align-items:flex-start; }
.business-card h2 { font-size:clamp(30px,3vw,41px); }
.business-card>p:not(.home-eyebrow):not(.home-fineprint) { color:#506b7d; font-size:15px; max-width:430px; }
.business-card .home-text-link { margin-top:20px; }
.conversations { background:#e9f3f9; }
.campaigns { background:#f2f0e9; }
.workflow-sketch { width:100%; display:flex; flex-direction:column; align-items:center; padding:24px 0; gap:6px; margin:auto 0; }
.workflow-sketch span { width:88%; padding:14px 20px; background:white; border:1px solid #c8dce9; border-radius:12px; font-size:14px; }
.workflow-sketch b { color:#2576b8; font-weight:400; }
.workflow-sketch .sketch-final { background:#2576b8; color:white; border-color:transparent; }
.campaign-sketch { display:grid; width:100%; grid-template-columns:1fr 1.35fr; align-items:center; gap:26px; padding:20px 0; margin:auto 0; }
.campaign-sketch img { width:100%; aspect-ratio:9/13; object-fit:cover; border-radius:15px; }
.campaign-sketch span { display:block; font-size:10px; letter-spacing:.12em; color:#50616f; margin-bottom:14px; }
.campaign-sketch strong { font-size:21px; line-height:1.3; letter-spacing:-.035em; }
.campaign-sketch p { font-size:12px; margin:16px 0 0; color:#50616f; }
.home-team { padding-top:15px; }
.home-directors { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.home-director { border:1px solid #e2e8ed; border-radius:17px; overflow:hidden; background:white; }
.home-director img { width:100%; height:185px; object-fit:cover; object-position:center top; background:color-mix(in srgb,var(--director) 9%,white); }
.home-director>div { padding:15px 13px 18px; border-top:3px solid var(--director); }
.home-director h3 { font-size:19px; margin-bottom:6px; }
.home-director p { font-size:11px; line-height:1.5; margin:0; color:#697d8d; }
.home-team .home-text-link { display:inline-block; margin-top:16px; }
.visual-home .cf-trust-strip { background:#f0f6fa; }
.visual-home .cf-trust-strip .container { width:min(1320px,calc(100% - 64px)); }
.plans-panel { border:1px solid #dce6ed; border-radius:28px; display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:60px; padding:50px; background:white; }
.plans-panel h2 { font-size:clamp(29px,3.8vw,47px); }
.plans-panel>div>p:not(.home-eyebrow) { color:#657987; }
.plans-summary { border-left:1px solid #dae4eb; padding-left:50px; }
.plans-summary>span { font-size:13px; color:#596d7d; }
.plans-summary>p { font-size:16px; }
.plans-summary strong { font-size:68px; line-height:1.2; letter-spacing:-.06em; color:#1b4769; }
.plans-summary hr { border:0; border-top:1px solid #e2e8ec; margin:24px 0; }
.plans-summary small { font-size:12px; color:#596d7d; }
.home-faq { padding-top:0; }
.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.faq-layout>div>p { color:#627787; max-width:300px; font-size:15px; }
.home-faq details { border-bottom:1px solid #dfe6ec; }
.home-faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-weight:650; font-size:16px; cursor:pointer; list-style:none; }
.home-faq summary::-webkit-details-marker { display:none; }
.home-faq summary span { font-size:23px; font-weight:400; color:#2576b8; }
.home-faq details[open] summary span { transform:rotate(45deg); }
.home-faq details p { font-size:14px; color:#5e7484; margin:0 0 22px; line-height:1.8; }
.home-faq .home-text-link { display:inline-block; margin-top:28px; }
.home-closing { padding:90px 0; text-align:center; background:#2576b8; color:white; }
.home-closing .home-eyebrow { color:#fff; }
.home-closing h2 { font-size:clamp(38px,5vw,70px); margin-bottom:32px; }
.home-footer { background:#f5f8fa; padding:58px 0 25px; }
.footer-content { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-content>div>p { font-size:14px; max-width:255px; color:#596d7d; margin-top:20px; }
.footer-content nav { display:flex; flex-direction:column; gap:12px; font-size:13px; color:#5d7282; }
.footer-content nav strong { margin-bottom:7px; color:#253e50; }
.footer-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:11px; color:#596d7d; border-top:1px solid #dee7ee; padding-top:24px; margin-top:40px; }
.reel-dialog { padding:18px; border:1px solid #415363; border-radius:22px; width:min(840px,calc(100% - 24px)); max-height:calc(100dvh - 24px); background:#0e202e; color:white; overflow:auto; }
.reel-dialog::backdrop { background:#001323dc; backdrop-filter:blur(8px); }
.reel-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
.reel-dialog-header h2 { font-size:16px; line-height:1.4; letter-spacing:0; margin:0; }
.reel-dialog-header button { border:1px solid #647682; border-radius:50%; color:white; width:39px; height:39px; flex-shrink:0; font-size:25px; background:transparent; cursor:pointer; }
.reel-dialog video { width:100%; height:min(68dvh,660px); background:#07131d; object-fit:contain; border-radius:12px; }
.reel-dialog-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#bfd2df; font-size:11px; }
.reel-dialog-footer a { text-decoration:underline; text-underline-offset:4px; }
.video-status { font-size:12px; margin:9px 0; }
body.reel-opened { overflow:hidden; }
@media(min-width:1500px) { .home-container { max-width:1380px; } }
@media(max-width:1100px) { .home-nav-links { gap:18px; } .home-directors { grid-template-columns:repeat(4,1fr); } .home-director img { height:200px; } .home-section-heading { gap:35px; } .business-card { padding:28px; } .home-nav { gap:16px; } }
@media(max-width:760px) {
 .home-container { width:calc(100% - 36px); } .home-nav { min-height:72px; gap:12px; } .home-nav-links { display:none; } .home-nav-actions { gap:10px; }
 .home-nav .brand { font-size:14px; gap:7px; } .home-nav .brand img { width:26px; height:26px; } .home-nav .home-button.small { padding:9px 11px; font-size:11px; gap:10px; }
 .home-hero { padding-top:35px; } .hero-copy h1 { font-size:clamp(35px,7.8vw,58px); letter-spacing:-.055em; margin-bottom:20px; } .home-eyebrow { font-size:10px; letter-spacing:.12em; }
 .hero-intro { font-size:15px; line-height:1.65; } .hero-actions { gap:20px; } .hero-actions .home-text-link { font-size:13px; } .home-button { font-size:13px; min-height:49px; padding:13px 20px; }
 .home-showcase { margin-top:28px; } .hero-reels { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:10px 5px 15px; scrollbar-width:thin; }
 .hero-reels .reel-card { flex:0 0 58%; max-width:255px; scroll-snap-align:center; transform:none!important; } .reel-open { border-radius:17px; }
 .hero-caption { gap:20px; padding-top:10px; align-items:flex-start; font-size:11px; } .hero-caption p { max-width:240px; } .reel-arrows { display:flex; flex-shrink:0; }
 .home-connections { padding:12px 0; } .connection-heading h2 { font-size:12px; line-height:1.6; } .connection-heading { gap:18px; } .connection-heading button { font-size:10px; } .connection-note { font-size:10px; }
 .logo-list li { font-size:17px; } .logo-list img { width:23px; height:23px; } .home-section { padding:62px 0; } .home-section-heading { display:block; margin-bottom:28px; }
 .home-section-heading>p { font-size:14px; margin-top:22px; line-height:1.7; } .visual-home h2 { font-size:34px; } .gallery-controls { display:block; } .gallery-filters { gap:7px; } .gallery-filters button { font-size:11px; padding:8px 13px; } .gallery-count { display:block; margin-top:12px; font-size:11px; }
 .reel-gallery { grid-template-columns:1fr 1fr; gap:22px 12px; } .reel-gallery .reel-open { aspect-ratio:9/16; } .reel-gallery h3 { font-size:12px; margin:10px 1px 0; }
 .reel-person { top:10px; left:10px; font-size:10px; padding:3px 8px; } .reel-play { top:10px; right:10px; width:25px; height:25px; font-size:9px; } .reel-tag { left:10px; right:10px; bottom:12px; font-size:9px; padding:5px 9px; max-width:calc(100% - 20px); }
 .home-fineprint { font-size:11px; } .home-journey { grid-template-columns:1fr 1fr; gap:25px 20px; margin:35px 0 40px; } .home-journey h3 { font-size:17px; margin:16px 0 12px; } .home-journey p { font-size:12px; }
 .home-demo { grid-template-columns:1fr; gap:28px; padding-top:35px; } .demo-copy h3 { font-size:32px; } .demo-copy>p:not(.home-eyebrow) { font-size:14px; } .demo-copy .home-fineprint { font-size:11px!important; } .home-demo .home-text-link { font-size:13px; }
 .business-grid { grid-template-columns:1fr; gap:18px; } .business-card { padding:27px; } .business-card h2 { font-size:31px; } .business-card>p:not(.home-eyebrow):not(.home-fineprint) { font-size:14px; }
 .campaign-sketch { gap:20px; } .campaign-sketch strong { font-size:19px; } .home-directors { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .home-director img { height:120px; } .home-director>div { padding:10px 8px 12px; } .home-director h3 { font-size:15px; } .home-director p { font-size:10px; } .home-team { padding-top:0; }
 .visual-home .cf-trust-strip .container { width:calc(100% - 36px); } .plans-panel { display:block; padding:28px; } .plans-panel h2 { font-size:32px; } .plans-panel>div>p:not(.home-eyebrow) { font-size:14px; } .plans-summary { padding:27px 0 0; margin-top:32px; border-left:0; border-top:1px solid #dae4eb; } .plans-summary strong { font-size:59px; }
 .faq-layout { display:block; } .faq-layout>div:first-child { margin-bottom:22px; } .home-faq { padding-top:0; } .home-faq summary { font-size:14px; } .home-faq details p { font-size:13px; } .home-closing { padding:65px 0; } .home-closing h2 { font-size:38px; }
 .footer-content { grid-template-columns:1fr 1fr; gap:30px; } .footer-content>div { grid-column:1/-1; } .footer-content nav { font-size:12px; } .home-footer { padding-top:40px; } .reel-dialog video { height:60dvh; } .reel-dialog-header h2 { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .visual-home { scroll-behavior:auto; } html { scroll-behavior:auto; } .visual-home * { animation:none!important; transition:none!important; } .home-connections .logo-track { width:100%!important; display:block!important; transform:none!important; } .home-connections .logo-list { flex-wrap:wrap!important; gap:20px!important; } .logo-list[aria-hidden="true"] { display:none; } .connection-heading button { display:none; } }
@media(max-width:380px){.connection-heading{flex-wrap:wrap;gap:12px}.connection-heading h2{flex-basis:100%}.connection-heading button{flex-shrink:0}}

/* Keep the technology strip compact; generic home h2 styling must not override it. */
.visual-home .connection-heading h2 { font-size:clamp(17px,1.5vw,21px); line-height:1.4; font-weight:650; letter-spacing:-.025em; max-width:740px; }
.visual-home .logo-list li { font-size:14px; font-weight:650; letter-spacing:-.025em; gap:8px; }
.visual-home .logo-list img { width:26px; height:26px; flex:none; }
.logo-list li>a { display:flex; align-items:center; min-height:44px; gap:8px; color:inherit; text-decoration:none; }
.logo-list li>a:focus-visible { outline:2px solid #2576b8; outline-offset:5px; border-radius:4px; }

/* Compact brand typography above the technology strip. */
.visual-home .connection-title { margin:12px auto 18px; padding:0 24px; max-width:900px; text-align:center; color:#111; font-family:inherit; font-size:clamp(18px,2vw,24px); font-weight:600; line-height:1.35; letter-spacing:-.025em; }

/* Small labels on tinted cards need stronger text contrast. */
.business-card > .home-eyebrow { color:#22669c; }

/* Keep the creation credit beneath its video, within the same grid column. */
.home-demo-media { min-width:0; }

/* Keep the opening composition together on desktop viewports. */
.home-connections .logo-window{padding-block:15px;margin-block:10px}
@media(min-width:768px) and (min-height:600px){
 .home-hero{height:calc(100svh - 240px);min-height:390px;box-sizing:border-box;display:flex;flex-direction:column;padding:clamp(12px,2vh,28px) 0 14px;gap:clamp(10px,2vh,24px)}
 .home-hero .hero-copy{flex:0 0 auto}.home-hero .home-eyebrow{margin-bottom:10px}
 .home-hero .hero-copy h1{font-size:clamp(30px,min(5.1vw,6.6vh),78px);margin-bottom:12px}
 .home-hero .hero-intro{font-size:clamp(13px,1.7vh,18px);line-height:1.4;margin-bottom:14px;max-width:1000px}
 .home-hero .hero-actions{gap:24px}.home-hero .hero-actions .home-button{padding:12px 22px}
 .home-hero .home-showcase{margin-top:0;flex:1;min-height:0;display:flex;flex-direction:column}
 .home-hero .hero-reels{flex:1;min-height:0;display:flex;justify-content:center;gap:clamp(10px,2vw,28px);padding:6px 0}
 .home-hero .hero-reels .reel-card{height:100%;flex:0 1 auto;aspect-ratio:9/16}
 .home-hero .hero-reels .reel-surface,.home-hero .hero-reels .reel-open{height:100%;width:100%}
 .home-hero .hero-caption{flex:0 0 auto;padding-top:12px;font-size:11px;text-align:center;justify-content:center}
 .home-connections{box-sizing:border-box;padding:12px 0}.home-connections .connection-title{margin:0;font-size:16px;line-height:24px}
}