/* Our changes on top of Dan's site.css, linked after it on every page.
   They live here, not in site/, so a new export from Dan does not erase them. */

/* The hero fills the first screen, so the next section starts below the fold instead of peeking in as an empty band. */
.hero{min-height:calc(100svh - 65px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.hero>.wrap{width:100%}

/* "Cómo funciona" fits one screen on a laptop: less section padding, and the diagram sized to the space left. */
@media (min-width:1041px){
  #como-funciona{padding:var(--space-12) 0}
  #como-funciona .head{margin-bottom:var(--space-8)}
  #como-funciona .vsteps li{padding-bottom:18px}
  #como-funciona .vsteps li:last-child{padding-bottom:0}
  #como-funciona .flow-wrap{padding:16px}
  /* --how-head is the heading plus the figure caption (overrides.js). 204px: the 64px anchor offset, the 48px top padding, the 32px under the heading, the panel's padding and border, and some air. */
  #como-funciona .flow{width:auto;max-width:100%;height:calc(100svh - 204px - var(--how-head, 150px));min-height:420px;aspect-ratio:600/560;margin:0 auto}
}

/* Use-case links land on the "Para quién" heading (overrides.js) and mark the chosen card. */
.seg{transition:border-color .3s,box-shadow .3s}
.seg.is-target{border-color:var(--violeta);box-shadow:0 0 0 1px var(--violeta)}
/* The header is 65px with its border; 64px tucks the previous section under it instead of showing a strip of it. */
[id]{scroll-margin-top:64px}

.seg a{color:var(--ink);text-decoration-color:var(--violeta-2);text-underline-offset:3px}
.seg a:hover{color:var(--violeta)}

.dd-menu a[aria-current]{box-shadow:none}

/* Integration logos inside the "Tu stack" pills, one ink colour like the rest of the page. */
.pills .sb-pill{gap:10px}
.pills .sb-pill svg{height:18px;width:auto;flex:none;fill:currentColor;color:var(--ink-2)}
.pills .sb-pill .logo-zoho{height:19px}
.pills .sb-pill .logo-typeform{height:14px}

/* Dan's sections pad 128px above and 64px below, so each block sat low in its band. Even it out. */
section:where(:not(.hero):not(.page-hero):not(.tight):not(.cta)){padding-top:96px;padding-bottom:96px}
/* Two sections with the same background in a row: the first one's bottom padding is already the gap. */
section:not(.band):not(.tight) + section:not(.band):not(.tight):not(.cta),
section.band + section.band{padding-top:0}

.sb-card .card-icon{width:36px;height:36px;color:var(--ink-2);margin-bottom:var(--space-3)}

/* A pen sketch in the right column that stays in view while the FAQ scrolls (build.py). Hidden where the column is too narrow. */
.side-sketch{display:none}
@media (min-width:1240px){
  .has-side-sketch .wrap{position:relative}
  .has-side-sketch .side-sketch{display:block;position:absolute;top:0;bottom:0;right:32px;width:260px;pointer-events:none}
  .side-sketch img{position:sticky;top:120px;width:100%;opacity:.32}
  .has-side-sketch .side-sketch.sketch-desk{width:380px;top:-24px}
  .has-side-sketch:has(.sketch-desk) .head{max-width:calc(100% - 420px)}
}

/* A wide pen sketch along the bottom of a page header, drawn like the campus in the hero (sketches/, build.py). */
.page-hero.header-sketch{position:relative;padding-bottom:220px}
.page-hero.header-sketch .wrap{position:relative;z-index:1}
.page-hero.header-sketch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:240px;background:center bottom/auto 100% no-repeat;opacity:.32;pointer-events:none}
.page-hero.sketch-archive::after{background-image:url("archive.svg")}

/* Links inside running text: Dan left them as browser-blue. */
main p a:not([class]){color:var(--ink);text-decoration:underline;text-decoration-color:var(--violeta-2);text-underline-offset:3px}
main p a:not([class]):hover{color:var(--violeta)}

/* The closing call to action sat 128px below the section before it: 64px after a band, none after a same-colour section, whose own bottom padding is the gap. */
section.cta{padding-top:var(--space-16)}
section:not(.band) + section.cta{padding-top:0}
.sb-cta-band .cta-agent{width:72px;height:72px;color:var(--panel-text);opacity:.85;margin-bottom:calc(-1 * var(--space-2))}

/* Motion: quiet, paper-like. Hidden states only apply once overrides.js has armed them (html.anim),
   so the page reads fine without JS, and nothing moves for people who ask for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes vio-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes vio-sketch{from{opacity:0;transform:translateY(18px)}to{opacity:.24;transform:none}}
  .hero .wrap>*{animation:vio-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero .wrap>:nth-child(2){animation-delay:.08s}
  .hero .wrap>:nth-child(3){animation-delay:.16s}
  .hero .wrap>:nth-child(4){animation-delay:.24s}
  .hero::after{animation:vio-sketch 1.6s .3s cubic-bezier(.2,.7,.2,1) both}
  /* Page headers are short, so their sketch arrives with the text instead of after it. */
  @keyframes vio-sketch-page{from{opacity:0;transform:translateY(10px)}to{opacity:.32;transform:none}}
  .page-hero.header-sketch::after{animation:vio-sketch-page .7s cubic-bezier(.2,.7,.2,1) both}

  html.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
  html.anim .rv.in{opacity:1;transform:none}
  html.anim .flow .rv{transform:translateY(6px)}
  html.anim .flow .rv.in{transform:none}
}