/* Hallmark · propuesta 1/5 · macrostructure: Marquee Hero · nav: N1b Canonical SaaS three-section · footer: multi-column
 * theme: custom (preserved) · display: Fraunces · body: Inter */
:root{
  --color-paper: oklch(97.4% 0.010 81.8); --color-paper-2: oklch(95% 0.012 81.8);
  --color-ink: oklch(20% 0.020 195); --color-ink-2: oklch(38% 0.025 195); --color-muted: oklch(50% 0.020 195);
  --color-rule: oklch(85% 0.015 84);
  --color-accent: oklch(50% 0.089 198.8); --color-accent-deep: oklch(40.2% 0.072 198.8);
  --color-accent-2: oklch(79.6% 0.092 84.6); --color-accent-ink: oklch(97.4% 0.010 81.8);
  --color-focus: oklch(46% 0.100 199);
  --font-display:"Fraunces","Georgia",serif; --font-body:"Inter",system-ui,sans-serif;
  --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1.25rem; --space-md:2rem; --space-lg:3.5rem; --space-xl:5.5rem; --space-2xl:8rem;
  --text-xs:.8rem; --text-sm:.95rem; --text-base:1.0625rem; --text-md:1.3rem; --text-lg:1.7rem; --text-xl:2.2rem;
  --text-display:clamp(2.4rem,4.6vw+1rem,4.4rem);
  --radius:12px; --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0}
p{margin:0 0 var(--space-sm);max-width:60ch}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--space-md)}
@media(max-width:640px){.wrap{padding-inline:var(--space-sm)}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-bottom:1px solid transparent;transition:background .2s ease,border-color .2s ease;}
.nav.scrolled{background:oklch(97.4% 0.010 81.8/.9);backdrop-filter:blur(10px);border-color:var(--color-rule);}
.nav__brand{display:flex;align-items:center}
.nav__logo{display:block;height:34px;width:auto}
.nav__links{display:flex;gap:var(--space-md);font-size:var(--text-sm)}
.nav__links a{text-decoration:none;color:var(--color-ink-2);transition:color 150ms ease}
.nav__links a:hover{color:var(--color-accent)}
.nav__links a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.nav__right{display:flex;align-items:center;gap:var(--space-md)}
.nav__social{display:flex;align-items:center;gap:var(--space-sm)}
.nav__social a{display:flex;color:var(--color-ink-2);width:20px;height:20px;transition:color 150ms ease,transform 160ms var(--ease-out)}
.nav__social a:hover{color:var(--color-accent)}
.nav__social a:active{transform:scale(.9)}
.nav__social a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}
.nav__social svg{width:100%;height:100%}
.nav__cta{background:var(--color-accent);color:var(--color-accent-ink);padding:.6em 1.2em;border-radius:999px;text-decoration:none;font-size:var(--text-sm);min-height:38px;display:inline-flex;align-items:center;transition:background 150ms ease,transform 160ms var(--ease-out)}
.nav__cta:hover{background:var(--color-accent-deep)}
.nav__cta:active{transform:scale(.97)}
.nav__cta:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media(max-width:768px){.nav__social{display:none}}

.nav__toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--color-ink);border-radius:2px;transition:transform .2s var(--ease-out),opacity .2s ease}
.nav__toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav__toggle{display:inline-flex}
  .nav__links{
    display:flex;flex-direction:column;gap:var(--space-2xs);
    position:absolute;top:100%;left:0;right:0;
    background:var(--color-paper);border-bottom:1px solid var(--color-rule);
    padding:var(--space-sm) var(--space-md) var(--space-md);
    transform:scaleY(0);transform-origin:top;opacity:0;pointer-events:none;
    transition:transform .2s var(--ease-in-out),opacity .2s ease;
  }
  .nav__links.open{transform:scaleY(1);opacity:1;pointer-events:auto}
  .nav__links a{padding:.7em 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--color-rule)}
  .nav__links a:last-child{border-bottom:none}
}

.nav__noscript{display:none}
@media(max-width:768px){
  .nav__noscript{
    display:flex;flex-direction:column;
    border-bottom:1px solid var(--color-rule);
    padding-block:var(--space-2xs) var(--space-sm);
  }
  .nav__noscript a{padding:.7em 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--color-rule);text-decoration:none;color:var(--color-ink-2)}
  .nav__noscript a:last-child{border-bottom:none}
}

.hero{padding-block:var(--space-2xl) var(--space-xl)}
.hero__grid{display:grid;grid-template-columns:1.6fr .4fr;gap:var(--space-xl);align-items:center}
.hero__content{text-align:left}
.hero__eyebrow{display:inline-block;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-deep);margin-bottom:var(--space-sm)}
.hero h1{font-size:var(--text-display);max-width:16ch}
.hero .lede{margin:var(--space-sm) 0 0;max-width:46ch;font-size:var(--text-md);color:var(--color-ink-2)}
.hero__actions{margin-top:var(--space-md);display:flex;justify-content:flex-start;gap:var(--space-sm);flex-wrap:wrap}
.hero__media{display:flex;justify-content:center}
.hero__photo{width:180px;height:180px;max-width:100%;object-fit:cover;border-radius:50%;box-shadow:0 16px 32px -16px oklch(20% 0.02 195/.4)}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__content{text-align:center}
  .hero h1{margin-inline:auto}
  .hero .lede{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__media{order:-1;margin-bottom:var(--space-md)}
  .hero__photo{width:160px;height:160px}
}
.btn{display:inline-flex;align-items:center;padding:.9em 1.6em;border-radius:999px;text-decoration:none;font-size:var(--text-sm);min-height:44px;transition:background 150ms ease,border-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--color-accent);color:var(--color-accent-ink)}
.btn-primary:hover{background:var(--color-accent-deep)}
.btn-secondary{border:1px solid var(--color-rule);color:var(--color-ink)}
.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

section{padding-block:var(--space-xl)}
section:nth-of-type(even){background:var(--color-paper-2)}
.section-head{max-width:56ch;margin-bottom:var(--space-lg)}
.section-head .kicker{display:block;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2xs)}
.section-head h2{font-size:var(--text-xl)}

.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-xl);align-items:start}
.about__media{display:flex}
.about__photo{width:100%;max-width:380px;height:auto;display:block;border-radius:var(--radius);box-shadow:0 20px 40px -18px oklch(20% 0.02 195/.35)}
@media(max-width:820px){
  .about__grid{grid-template-columns:1fr}
  .about__media{order:-1;margin-bottom:var(--space-md);justify-content:center}
}

.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.feature-grid .feature:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}.feature-grid .feature:last-child:nth-child(odd){grid-column:auto}}
.feature{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);padding:var(--space-md);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),border-color 200ms ease}
.feature h3{font-size:var(--text-md);margin-bottom:var(--space-2xs)}
.feature p{font-size:var(--text-sm);color:var(--color-ink-2);margin:0}
@media(hover:hover) and (pointer:fine){
  .feature:hover{transform:translateY(-3px);border-color:var(--color-accent-2);box-shadow:0 14px 28px -18px oklch(20% 0.02 195/.35)}
}

.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
@media(max-width:640px){.pair{grid-template-columns:1fr}}
.pair .card{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);padding:var(--space-md);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),border-color 200ms ease}
@media(hover:hover) and (pointer:fine){
  .pair .card:hover{transform:translateY(-3px);border-color:var(--color-accent-2);box-shadow:0 14px 28px -18px oklch(20% 0.02 195/.35)}
}

.testi-card{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),border-color 200ms ease}
.testi-card p{margin:0;font-size:var(--text-sm);color:var(--color-ink-2);font-style:italic}
.testi-card .testi-author{font-size:var(--text-xs);color:var(--color-muted)}

.testi-carousel{max-width:680px;margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:var(--space-sm)}
.testi-viewport{grid-column:2;grid-row:1;overflow:hidden}
.testi-track{display:flex;transition:transform 500ms var(--ease-in-out)}
.testi-track .testi-card{flex:0 0 100%;min-height:150px;justify-content:center}
@media(hover:hover) and (pointer:fine){
  .testi-carousel .testi-card:hover{transform:none;box-shadow:none}
}
.testi-arrow{grid-row:1;flex:none;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-ink-2);cursor:pointer;transition:border-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.testi-arrow svg{width:18px;height:18px}
.testi-arrow:hover{border-color:var(--color-accent);color:var(--color-accent)}
.testi-arrow:active{transform:scale(.93)}
.testi-arrow:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.testi-arrow--prev{grid-column:1}
.testi-arrow--next{grid-column:3}
@media(max-width:560px){.testi-arrow{width:34px;height:34px}.testi-arrow svg{width:16px;height:16px}}
.testi-dots{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;gap:.6em;margin-top:var(--space-md)}
.testi-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--color-rule);cursor:pointer;transition:background 200ms ease,transform 200ms var(--ease-out)}
.testi-dot:hover{background:var(--color-accent-2)}
.testi-dot.active{background:var(--color-accent);transform:scale(1.3)}
.testi-dot:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

.faq-item{border-top:1px solid var(--color-rule)}
.faq-item:last-child{border-bottom:1px solid var(--color-rule)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) 0;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);min-height:44px;align-items:center;transition:color 150ms ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--color-accent)}
.faq-item summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}
.faq-icon{flex:none;width:18px;height:18px;position:relative;transition:transform 220ms var(--ease-out)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%)}
.faq-icon::before{width:12px;height:2px}
.faq-icon::after{width:2px;height:12px;transition:opacity 200ms ease}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
/* Anima el alto de apertura/cierre en vez del salto instantáneo nativo */
.faq-item .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms var(--ease-in-out)}
.faq-item[open] .faq-body{grid-template-rows:1fr}
.faq-item .faq-body > p{overflow:hidden;min-height:0;padding-bottom:var(--space-sm);color:var(--color-ink-2);font-size:var(--text-sm);margin:0}

.contact-primary{display:flex;justify-content:center;margin-bottom:var(--space-lg)}
.contact-primary__btn{gap:.65em;font-size:var(--text-md);padding:.85em 1.8em}
.contact-primary__btn .contact-icon{width:22px;height:22px}

.contact-secondary{display:flex;justify-content:center;gap:var(--space-xl);flex-wrap:wrap}
.contact-secondary a{text-decoration:none;color:var(--color-ink-2);display:flex;flex-direction:column;align-items:center;gap:.5em;font-size:var(--text-sm);transition:color 150ms ease,transform 160ms var(--ease-out)}
.contact-secondary a:hover{color:var(--color-accent)}
.contact-secondary a:active{transform:scale(.96)}
.contact-secondary a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}
.contact-secondary .contact-icon{width:44px;height:44px;padding:11px;box-sizing:border-box;border-radius:50%;border:1px solid var(--color-rule);transition:border-color 150ms ease}
.contact-secondary a:hover .contact-icon{border-color:var(--color-accent)}
.contact-icon{display:inline-flex;width:26px;height:26px}
.contact-icon svg{width:100%;height:100%}
@media(max-width:480px){
  .contact-secondary{gap:var(--space-lg)}
  .contact-primary__btn{width:100%;justify-content:center}
}

footer{border-top:1px solid var(--color-rule);padding-block:var(--space-lg)}
.footer__logo{display:block;width:200px;height:auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-md)}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h3{font-family:var(--font-display);font-size:var(--text-sm);margin-bottom:var(--space-2xs)}
.footer-grid ul{display:flex;flex-direction:column;gap:.4em}
.footer-grid a{text-decoration:none;color:var(--color-ink-2);font-size:var(--text-sm);transition:color 150ms ease}
.footer-grid a:hover{color:var(--color-accent)}
.footer-bottom{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-rule);font-size:var(--text-xs);color:var(--color-muted)}
.footer-bottom a{color:var(--color-muted);text-decoration:underline;text-underline-offset:2px;transition:color 150ms ease}
.footer-bottom a:hover{color:var(--color-accent)}

.legal__content{max-width:70ch}
.legal .section-head{display:block;max-width:none}
.legal .section-head h1{font-size:var(--text-xl)}
.legal__updated{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-lg)}
.legal h2{font-size:var(--text-md);margin-top:var(--space-lg);margin-bottom:var(--space-xs)}
.legal p{color:var(--color-ink-2)}
.legal a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--color-accent-deep)}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--color-ink);transform:translateY(100%);opacity:0;pointer-events:none;transition:transform 300ms var(--ease-out),opacity 300ms ease}
.cookie-banner.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.cookie-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;padding-block:var(--space-sm)}
.cookie-banner p{margin:0;font-size:var(--text-sm);color:var(--color-paper);max-width:60ch}
.cookie-banner a{color:var(--color-accent-2);text-decoration:underline;text-underline-offset:2px}
.cookie-banner a:hover{color:var(--color-paper)}
.cookie-banner__btn{flex:none;white-space:nowrap}
.cookie-banner__actions{display:flex;gap:var(--space-xs);flex:none}
.cookie-banner .btn-secondary{border-color:var(--color-paper);color:var(--color-paper);background:transparent;cursor:pointer}
.cookie-banner .btn-secondary:hover{background:var(--color-paper);color:var(--color-ink);border-color:var(--color-paper)}
.cookie-banner button{font-family:inherit;cursor:pointer}
@media(max-width:640px){.cookie-banner__inner{flex-direction:column;align-items:stretch;text-align:center}.cookie-banner__actions{flex-direction:column}.cookie-banner__btn{width:100%;justify-content:center}}