/* Generado por build.mjs — no editar. Fuente: src/css/ */

/* ===== 01-tokens.css ===== */
/*
 * Design tokens. One theme axis: dark (the editorial brand identity) and light
 * (the palette of the logo: navy #2E4999, blue #2C56B4, sky #50B0F9). The accent
 * draws from that same logo palette in both themes: sky in dark, blue in light.
 *
 * The base value of every token is the dark one, which doubles as the fallback
 * for browsers without light-dark(). Inside @supports both themes are declared
 * side by side — light-dark(light, dark) — so a token is edited in one place.
 *
 * The effective theme is (system preference) XOR (#theme-switch checked).
 * Only `color-scheme` toggles; light-dark() reads the theme from it.
 */
:root{
  color-scheme:dark;

  /* Surfaces: deep ink blue, not black */
  --void:#0B1622;
  --void-deep:#070E17;
  --surface:#122130;
  --surface-2:#1A2E40;

  /* Rules */
  --hairline:rgba(159,178,196,.14);
  --hairline-strong:rgba(159,178,196,.28);

  /* Text */
  --bone:#EFEAE1;
  --mist:#A6B8C8;
  --mist-dim:#7C90A2;

  /* Accent: logo blue in both themes — sky in the dark theme, blue in the light one */
  --accent:#50B0F9;
  --accent-hot:#7DC4FA;
  --accent-mute:#2C56B4;
  --accent-glow:rgba(80,176,249,.10);
  --on-accent:#0B1622;

  /* Cold support colour, data only */
  --ice:#8FB8D8;

  /* Form feedback */
  --success:#6FC48F;
  --success-glow:rgba(111,196,143,.10);
  --danger:#EE8B76;
  --danger-glow:rgba(238,139,118,.10);

  /* Depth and veils laid over photography */
  --shadow:rgba(0,0,0,.92);
  --scrim-heavy:rgba(7,14,23,.86);
  --scrim:rgba(11,22,34,.72);
  --scrim-soft:rgba(7,14,23,.55);
  --scrim-faint:rgba(7,14,23,.35);
  --duotone:#8E4E17;

  /* Photographic treatment (see the block at the end: not colours) */
  --photo-opacity:.62;
  --photo-opacity-soft:.22;
  --photo-saturate:.72;
  --photo-lift:1;
  --exposure:.78;
  --exposure-dim:.58;

  /* Typefaces */
  --font-display:'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Measures */
  --wrap:1200px;
  --gutter:clamp(20px, 5vw, 44px);
  --r-sm:3px;
  --r-md:10px;
  --pad-section:clamp(72px, 9vw, 132px);
}

@supports (color: light-dark(#000, #fff)){
  :root{
    /* Follow the operating system until the header switch says otherwise */
    color-scheme:light dark;

    --void:light-dark(#F6F9FE, #0B1622);
    --void-deep:light-dark(#EBF1FB, #070E17);
    --surface:light-dark(#FFFFFF, #122130);
    --surface-2:light-dark(#E5EDF9, #1A2E40);

    --hairline:light-dark(rgba(30,58,120,.14), rgba(159,178,196,.14));
    --hairline-strong:light-dark(rgba(30,58,120,.32), rgba(159,178,196,.28));

    --bone:light-dark(#152540, #EFEAE1);
    --mist:light-dark(#4A5A76, #A6B8C8);
    --mist-dim:light-dark(#586880, #7C90A2);

    --accent:light-dark(#2C56B4, #50B0F9);
    --accent-hot:light-dark(#24469A, #7DC4FA);
    --accent-mute:light-dark(#A8BEE4, #2C56B4);
    --accent-glow:light-dark(rgba(44,86,180,.07), rgba(80,176,249,.10));
    --on-accent:light-dark(#FFFFFF, #0B1622);

    --ice:light-dark(#1F76C4, #8FB8D8);

    --success:light-dark(#177245, #6FC48F);
    --success-glow:light-dark(rgba(23,114,69,.07), rgba(111,196,143,.10));
    --danger:light-dark(#B3261E, #EE8B76);
    --danger-glow:light-dark(rgba(179,38,30,.06), rgba(238,139,118,.10));

    --shadow:light-dark(rgba(21,37,64,.22), rgba(0,0,0,.92));
    --scrim-heavy:light-dark(rgba(255,255,255,.88), rgba(7,14,23,.86));
    --scrim:light-dark(rgba(246,249,254,.80), rgba(11,22,34,.72));
    --scrim-soft:light-dark(rgba(246,249,254,.68), rgba(7,14,23,.55));
    --scrim-faint:light-dark(rgba(255,255,255,.40), rgba(7,14,23,.35));
    --duotone:light-dark(#2C56B4, #8E4E17);
  }

  /* The header switch inverts the system preference, in both directions.
     `not all and` keeps the negation readable by every engine and also covers
     browsers that report no preference at all. */
  @media not all and (prefers-color-scheme: light){
    :root:has(#theme-switch:checked){color-scheme:light;}
  }
  @media (prefers-color-scheme: light){
    :root:has(#theme-switch:checked){color-scheme:dark;}
  }

  /* light-dark() only resolves colours, so the photographic treatment — which
     is opacity and filter amounts — switches through the same two conditions.
     Light surfaces need the photography brighter and less desaturated. */
  @media (prefers-color-scheme: light){
    :root{
      --photo-opacity:.72;
      --photo-opacity-soft:.48;
      --photo-saturate:.96;
      --photo-lift:1.45;
      --exposure:.96;
      --exposure-dim:.88;
    }
    :root:has(#theme-switch:checked){
      --photo-opacity:.62;
      --photo-opacity-soft:.22;
      --photo-saturate:.72;
      --photo-lift:1;
      --exposure:.78;
      --exposure-dim:.58;
    }
  }
  @media not all and (prefers-color-scheme: light){
    :root:has(#theme-switch:checked){
      --photo-opacity:.72;
      --photo-opacity-soft:.48;
      --photo-saturate:.96;
      --photo-lift:1.45;
      --exposure:.96;
      --exposure-dim:.88;
    }
  }
}

/* ===== 02-base.css ===== */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  color:var(--bone);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}

a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
address{font-style:normal;}

::selection{background:var(--accent);color:var(--on-accent);}

:focus-visible{
  outline:2px solid var(--accent-hot);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:8px;
  z-index:999;
  padding:12px 18px;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:600;
}
.skip-link:focus{left:8px;}

/* Out of sight, still focusable and still read out loud */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ===== 03-layout.css ===== */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--pad-section);
}

/* Section header: mono eyebrow, serif title, supporting line */
.section__head{
  max-width:660px;
  margin-bottom:clamp(40px, 5vw, 68px);
}

.eyebrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-bottom:20px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.section__title{
  font-size:clamp(2rem, 4.2vw, 3.3rem);
  margin-bottom:20px;
}
.section__title em{
  font-style:italic;
  color:var(--accent);
}

.section__lead{
  color:var(--mist);
  font-size:clamp(16px, 1.35vw, 18.5px);
  max-width:60ch;
}

/* Soft reveal on scroll, only where the browser supports it. Range stays inside
   the "entry" phase (not "cover"): a "cover" endpoint needs scroll room past the
   element, which the last blocks on the page (or in a section) don't always have,
   leaving them stuck at partial opacity. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .section__head,
    .flow,
    .service,
    .plan,
    .quote,
    .about__figure,
    .scheduler,
    .factors,
    .cta-band{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 65%;
    }
  }
}

@keyframes rise{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

/* ===== 04-components.css ===== */
/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:15px;
  font-weight:600;
  letter-spacing:.005em;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn--lg{padding:16px 30px;font-size:15.5px;}
.btn--block{width:100%;}

.btn--solid{
  background:var(--accent);
  color:var(--on-accent);
}
.btn--solid:hover{background:var(--accent-hot);transform:translateY(-1px);}

.btn--ghost{
  background:transparent;
  color:var(--bone);
  border-color:var(--hairline-strong);
}
.btn--ghost:hover{border-color:var(--bone);transform:translateY(-1px);}

/* Only a submit button carries [disabled]: the spinner stays out of the
   flex row until that state turns it on */
.btn__spinner{
  display:none;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:42 100;
}
.btn[disabled] .btn__spinner{display:block;}

@media (prefers-reduced-motion: no-preference){
  .btn[disabled] .btn__spinner{animation:btn-spin .7s linear infinite;}
}
@keyframes btn-spin{
  to{transform:rotate(360deg);}
}

/* --- Wordmark --- */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.1;}
.brand__name{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--bone);
}
.brand__name em{font-style:italic;color:var(--accent);}
.brand__tag{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist-dim);
  margin-top:3px;
}
.brand__logo{
  display:block;
  height:40px;
  width:auto;
}

/* --- Technology tags --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chips li{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  padding:6px 11px;
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--mist);
}
.chips--sm li{font-size:10.5px;padding:5px 10px;}

/* --- Checked lists --- */
.checklist li,
.ticks li{
  position:relative;
  padding-left:24px;
  color:var(--mist);
  font-size:15px;
  margin-bottom:10px;
}
.checklist li::before,
.ticks li::before{
  content:"";
  position:absolute;
  left:1px;
  top:.42em;
  width:6px;
  height:11px;
  border-right:1.6px solid var(--accent);
  border-bottom:1.6px solid var(--accent);
  transform:rotate(42deg);
}
.ticks li{font-size:14px;}

/* --- Full-width call to action --- */
.cta-band{
  margin-top:clamp(48px, 6vw, 80px);
  padding:clamp(36px, 4.5vw, 56px) var(--gutter);
  text-align:center;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.cta-band h3{font-size:clamp(1.5rem, 2.6vw, 2.1rem);margin-bottom:12px;}
.cta-band p{color:var(--mist);max-width:52ch;margin:0 auto 26px;}

/* ===== 05-header.css ===== */
.site-head{
  position:sticky;
  top:0;
  z-index:60;
  background:color-mix(in srgb, var(--void-deep) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
@supports not (backdrop-filter: blur(1px)){
  .site-head{background:var(--void-deep);}
}

.site-head__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:16px;
}

.site-nav{display:none;}
.site-nav ul{display:flex;gap:clamp(16px, 2vw, 30px);}
.site-nav a{
  font-size:14.5px;
  color:var(--mist);
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.site-nav a:hover{color:var(--bone);border-bottom-color:var(--accent);}

.site-head__cta{display:none;}

/* --- Theme switch --- */
/* A checkbox the tokens read through :root:has(): the whole light/dark axis
   works without a line of JavaScript. See src/css/01-tokens.css. */
.site-head__tools{
  display:flex;
  align-items:center;
  gap:12px;
}

.theme-toggle{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  color:var(--accent);
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.theme-toggle:hover{
  border-color:var(--accent);
  background:var(--accent-glow);
}
.theme-switch:focus-visible + .theme-toggle{
  outline:2px solid var(--accent-hot);
  outline-offset:3px;
}
.theme-toggle__icon{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}

/* Only the icon of the theme the button leads to is on screen. The effective
   theme is (system preference) XOR (switch checked), so both conditions decide. */
.theme-toggle__moon{display:none;}
:root:has(#theme-switch:checked) .theme-toggle__sun{display:none;}
:root:has(#theme-switch:checked) .theme-toggle__moon{display:block;}
@media (prefers-color-scheme: light){
  .theme-toggle__sun{display:none;}
  .theme-toggle__moon{display:block;}
  :root:has(#theme-switch:checked) .theme-toggle__sun{display:block;}
  :root:has(#theme-switch:checked) .theme-toggle__moon{display:none;}
}

/* Without light-dark() there is a single theme, so the switch would do nothing */
@supports not (color: light-dark(#000, #fff)){
  .theme-toggle{display:none;}
}

/* --- Drop-down menu for narrow viewports, no JavaScript involved --- */
.menu{position:relative;}
.menu summary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  cursor:pointer;
  list-style:none;
}
.menu summary::-webkit-details-marker{display:none;}
.menu__bars{
  position:relative;
  width:15px;
  height:9px;
  border-top:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
}
.menu[open] summary{border-color:var(--accent);}

.menu__panel{
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:min(78vw, 280px);
  padding:10px;
  background:var(--surface);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);
  box-shadow:0 24px 54px -26px var(--shadow);
}
.menu__panel a{
  display:block;
  padding:11px 12px;
  border-radius:var(--r-sm);
  font-size:15px;
  color:var(--mist);
  transition:background-color .16s ease, color .16s ease;
}
.menu__panel a:hover{background:var(--surface-2);color:var(--bone);}
.menu__cta{
  margin-top:6px;
  background:var(--accent);
  color:var(--on-accent) !important;
  font-weight:600;
  text-align:center;
}
.menu__cta:hover{background:var(--accent-hot);}

@media (min-width:620px) and (max-width:999px){
  .site-head__cta{display:inline-flex;}
  .menu__cta{display:none;}
}
@media (min-width:1000px){
  .site-nav{display:block;}
  .site-head__cta{display:inline-flex;}
  .menu{display:none;}
}

/* ===== 06-hero.css ===== */
.hero{
  position:relative;
  isolation:isolate;
  /* minmax(0,1fr) keeps wide content from stretching the column on mobile */
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-content:end;
  min-height:clamp(600px, 90svh, 940px);
  padding-block:clamp(90px, 12vw, 150px) clamp(56px, 7vw, 92px);
  background:var(--void-deep);
  overflow:hidden;
}

.hero__photo{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:var(--photo-opacity);
  /* The night photograph is dark: on light surfaces it needs lifting to stay
     readable as an image instead of turning into a grey stain */
  filter:brightness(var(--photo-lift));
}

/* Veil that sinks the photo into the palette and protects headline legibility */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to top, var(--void) 4%, var(--scrim) 42%, var(--scrim-soft) 100%),
    linear-gradient(to right, var(--scrim-heavy) 0%, var(--scrim-faint) 62%, transparent 100%);
}

.hero__inner{position:relative;}

.hero__title{
  font-size:clamp(2.9rem, 7.4vw, 5.6rem);
  line-height:.98;
  letter-spacing:-.028em;
  margin-bottom:26px;
  max-width:17ch;
}
.hero__title em{
  font-style:italic;
  color:var(--accent);
}

.hero__lead{
  color:var(--mist);
  font-size:clamp(16.5px, 1.5vw, 19.5px);
  max-width:52ch;
  margin-bottom:36px;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:clamp(40px, 6vw, 64px);
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:0 28px;
  padding-top:20px;
  border-top:1px solid var(--hairline-strong);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mist-dim);
}
.hero__meta li{position:relative;padding-block:4px;}

@media (min-width:900px){
  .hero__meta{gap:0 40px;}
}

/* ===== 08-about.css ===== */
.about{background:var(--void);}

.about__grid{
  display:grid;
  gap:clamp(40px, 5vw, 72px);
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
}

.about__figure{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
}
.about__figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:60% center;
}
.about__body p{
  color:var(--mist);
  margin-bottom:16px;
  max-width:58ch;
}
.about__body .chips{margin-top:24px;}

/* Engagement steps: order carries real information here, so they are numbered */
.steps{
  margin-top:clamp(40px, 5vw, 56px);
  counter-reset:stage;
  border-top:1px solid var(--hairline);
}
.steps__item{
  counter-increment:stage;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 20px;
  padding-block:22px;
  border-bottom:1px solid var(--hairline);
}
.steps__item::before{
  content:counter(stage, decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--accent);
  padding-top:5px;
}
.steps__item h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:16.5px;
  letter-spacing:0;
  margin-bottom:4px;
}
.steps__item p{
  color:var(--mist);
  font-size:14.5px;
  margin:0;
  max-width:52ch;
}

@media (min-width:940px){
  .about__grid{grid-template-columns:.85fr 1.15fr;}
  .about__figure{position:sticky;top:104px;}
}

/* ===== 09-services.css ===== */
.services{
  background:var(--void-deep);
  border-block:1px solid var(--hairline);
}

.services__grid{
  display:grid;
  gap:14px;
  grid-template-columns:minmax(0, 1fr);
}

.service{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.service:hover{
  border-color:var(--hairline-strong);
  background:var(--surface-2);
  transform:translateY(-2px);
}

.service h3{
  font-size:clamp(1.25rem, 1.9vw, 1.55rem);
  letter-spacing:-.015em;
}
.service p{
  color:var(--mist);
  font-size:14.5px;
  flex:1;
}
.service .chips{margin-top:2px;}

/* Photo cards: the image spans the full top edge */
.service--photo{padding:0;gap:0;overflow:hidden;}
.service--photo img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  /* Exposure and saturation follow the theme: dark surfaces need the
     photography pulled down, light ones need it close to the original */
  filter:saturate(var(--photo-saturate)) contrast(1.06) brightness(var(--exposure));
  transition:filter .3s ease, transform .4s ease;
}
.service--photo:hover img{
  filter:saturate(1) contrast(1.06) brightness(calc(var(--exposure) + .1));
  transform:scale(1.02);
}
/* For overexposed sources that would otherwise glare on the cards */
.service--dim{--exposure:var(--exposure-dim);}
.service__body{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  padding:24px 26px 26px;
  border-top:1px solid var(--hairline);
}

/* Closing card */
.service--cta{
  background:var(--accent-glow);
  border-color:var(--accent);
  justify-content:center;
}
.service--cta:hover{background:var(--accent-glow);border-color:var(--accent-hot);}
/* Keeps the block together instead of stretching to the height of photo cards */
.service--cta p{color:var(--mist);flex:0 1 auto;}
.service--cta .btn{align-self:flex-start;margin-top:6px;}

@media (min-width:700px){
  .services__grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (min-width:1040px){
  .services__grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* ===== 10-testimonials.css ===== */
.testimonials{
  position:relative;
  isolation:isolate;
  background:var(--void);
  overflow:hidden;
}

.testimonials__photo{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:var(--photo-opacity-soft);
  filter:grayscale(.5);
}
.testimonials::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to bottom, var(--void) 0%, var(--scrim) 45%, var(--void) 100%);
}

.quotes{
  display:grid;
  gap:14px;
  grid-template-columns:minmax(0, 1fr);
}

.quote{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:30px 28px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}

.quote blockquote{
  position:relative;
  flex:1;
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 1.9vw, 1.5rem);
  font-style:italic;
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--bone);
}
.quote blockquote::before{
  content:"“";
  display:block;
  font-size:2.4rem;
  line-height:.6;
  color:var(--accent);
  margin-bottom:10px;
}

.quote figcaption{
  display:grid;
  gap:3px;
  padding-top:18px;
  border-top:1px solid var(--hairline);
}
.quote__role{
  font-size:14.5px;
  font-weight:600;
  color:var(--bone);
}
.quote__ctx{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mist-dim);
}

@media (min-width:880px){
  .quotes{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* ===== 11-booking.css ===== */
.booking{
  background:var(--void-deep);
  border-top:1px solid var(--hairline);
}

.booking__grid{
  display:grid;
  gap:clamp(40px, 5vw, 68px);
  grid-template-columns:minmax(0, 1fr);
  align-items:center;
}

.booking__body p{
  color:var(--mist);
  margin-bottom:22px;
  max-width:52ch;
}
.booking__body .checklist{margin-bottom:32px;}

/* Duotone — copper in the dark theme, logo blue in the light one — so the
   bright stock photography joins whichever palette is active */
.scheduler__figure{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--duotone);
}
.scheduler__figure img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  object-position:center 32%;
  filter:grayscale(1) contrast(1.06);
  mix-blend-mode:luminosity;
}

/* Slot panel, mounted over the photograph */
.scheduler__panel{
  position:relative;
  margin:-44px 16px 0;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);
  box-shadow:0 26px 60px -30px var(--shadow);
}

.scheduler__form .form__alert{margin-bottom:18px;}

/* Only a submit button carries [disabled] here too: the busy state of a form
   that isn't wrapped in .form still needs the same treatment as 13-contact.css */
.scheduler__form .btn[disabled]{cursor:progress;opacity:.62;}

.scheduler__head{
  margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mist-dim);
}

.scheduler__days{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
  margin-bottom:36px;
}
.scheduler__slots{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-bottom:7px;
}

/* Breathing room after the (usually empty) time-error line, so it doesn't
   read as glued to the inputs below it — mirrors the .field override below. */
.scheduler__form .form__row{margin-top:12px;}

/* Matches the 7px gap .field already keeps between its own input and error
   line, but replaces its default 6px trailing margin with the same 12px used
   above — the row is followed by the submit button, not another field, and
   the wider gap keeps an error message from reading as glued to the button.
   Together with the two rules above, every gap in the scheduler (days→slots,
   slots→inputs, inputs→button) lands on the same ~36px rhythm. */
.scheduler__form .form__row .field{margin-bottom:12px;}
/* The <li> stays a bare grid cell; the button inside carries the box look so
   the day/slot pickers are real controls instead of styled text */
.scheduler__days li,
.scheduler__slots li{display:contents;}

.scheduler__days button{
  display:grid;
  gap:2px;
  width:100%;
  padding:9px 4px;
  text-align:center;
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mist-dim);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.scheduler__days button:hover:not(:disabled){border-color:var(--mist-dim);}
.scheduler__days b{font-size:15px;font-weight:500;color:var(--mist);}
.scheduler__days button[aria-pressed="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.scheduler__days button[aria-pressed="true"] b{color:var(--on-accent);}
.scheduler__days button:disabled{
  border-style:dashed;
  border-color:var(--hairline);
  color:var(--mist-dim);
  text-decoration:line-through;
  cursor:not-allowed;
}
.scheduler__days button:disabled b{color:var(--mist-dim);}

.scheduler__slots button{
  width:100%;
  padding:11px 0;
  text-align:center;
  background:transparent;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--bone);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.scheduler__slots button:hover:not(:disabled){border-color:var(--mist-dim);}
.scheduler__slots button[aria-pressed="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.scheduler__slots button:disabled{
  border-style:dashed;
  border-color:var(--hairline);
  color:var(--mist-dim);
  text-decoration:line-through;
  cursor:not-allowed;
}

.scheduler__days button:focus-visible,
.scheduler__slots button:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:2px;
}

.scheduler__note{
  margin-top:16px;
  font-size:12px;
  line-height:1.5;
  color:var(--mist-dim);
}

@media (min-width:940px){
  .booking__grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .scheduler__panel{margin:-72px 32px 0;padding:26px;}
}

/* ===== 12-pricing.css ===== */
.pricing{
  background:var(--void);
  border-top:1px solid var(--hairline);
}

.pricing__grid{
  display:grid;
  gap:14px;
  grid-template-columns:minmax(0, 1fr);
}

.plan{
  display:flex;
  flex-direction:column;
  padding:28px;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.plan--featured{
  border-color:var(--accent);
  background:var(--surface-2);
}

.plan__kind{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist-dim);
  margin-bottom:14px;
}
.plan--featured .plan__kind{color:var(--accent);}

.plan h3{
  font-size:clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom:10px;
}
.plan__desc{
  color:var(--mist);
  font-size:14.5px;
  margin-bottom:22px;
  /* Pushes specs and benefits onto a shared baseline across cards */
  flex:1;
}

.plan__specs{
  display:grid;
  gap:0;
  margin-bottom:20px;
  border-top:1px solid var(--hairline);
}
.plan__specs > div{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  padding-block:11px;
  border-bottom:1px solid var(--hairline);
}
.plan__specs dt{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mist-dim);
  padding-top:2px;
}
.plan__specs dd{font-size:14.5px;font-weight:600;}

/* Budget drivers are not a sequence, so they stay unnumbered */
.factors{margin-top:clamp(48px, 6vw, 80px);}
.factors__title{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  padding-bottom:18px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:0;
}
.factors__list{
  display:grid;
  gap:0;
  grid-template-columns:minmax(0, 1fr);
}
.factors__list > div{
  padding-block:20px;
  border-bottom:1px solid var(--hairline);
}
.factors__list dt{
  font-size:15.5px;
  font-weight:600;
  margin-bottom:5px;
}
.factors__list dd{
  color:var(--mist);
  font-size:14px;
  max-width:44ch;
}

@media (min-width:900px){
  .pricing__grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .factors__list{grid-template-columns:repeat(4, minmax(0, 1fr));gap:0 32px;}
}

/* ===== 13-contact.css ===== */
.contact{
  background:var(--void-deep);
  border-top:1px solid var(--hairline);
}

.contact__grid{
  display:grid;
  gap:clamp(36px, 4.5vw, 64px);
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
}

.contact-list{border-top:1px solid var(--hairline);}
.contact-list li{
  display:grid;
  gap:4px;
  padding-block:18px;
  border-bottom:1px solid var(--hairline);
}
.contact-list__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist-dim);
}
.contact-list a,
.contact-list p{
  font-size:16.5px;
  color:var(--bone);
}
.contact-list a{
  justify-self:start;
  border-bottom:1px solid var(--hairline-strong);
  transition:border-color .18s ease, color .18s ease;
}
.contact-list a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* --- Form --- */
.form{
  padding:clamp(24px, 3vw, 34px);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.form__row{
  display:grid;
  gap:14px;
  grid-template-columns:minmax(0, 1fr);
}

/* --- Submission result --- */
/* The block only exists on screen once the script fills it in */
.form__alert[hidden]{display:none;}
.form__alert{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-bottom:22px;
  padding:13px 15px;
  border:1px solid currentColor;
  border-radius:var(--r-sm);
  font-size:14.5px;
  line-height:1.45;
}
.form__alert-icon{
  flex:none;
  width:19px;
  height:19px;
  margin-top:1px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.form__alert-text{flex:1 1 auto;color:var(--bone);}

/* Dismiss: inherits the colour of the state it sits in */
.form__alert-close{
  flex:none;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  margin:-3px -4px -3px 0;
  background:transparent;
  border:0;
  border-radius:var(--r-sm);
  color:inherit;
  cursor:pointer;
  opacity:.72;
  transition:opacity .18s ease, background-color .18s ease;
}
.form__alert-close svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.form__alert-close:hover{opacity:1;background-color:currentColor;}
.form__alert-close:hover svg{stroke:var(--surface);}
.form__alert-close:focus-visible{
  opacity:1;
  outline:1px solid currentColor;
  outline-offset:2px;
}

/* One state, one colour and one icon: the other icon leaves the flow */
.form__alert--ok{
  color:var(--success);
  background:var(--success-glow);
}
.form__alert--ok .form__alert-icon--error{display:none;}
.form__alert--error{
  color:var(--danger);
  background:var(--danger-glow);
}
.form__alert--error .form__alert-icon--ok{display:none;}

@media (prefers-reduced-motion: no-preference){
  .form__alert{animation:alert-in .28s ease both;}
  .form__alert.form__alert--closing{animation:alert-out .22s ease both;}
  @keyframes alert-in{
    from{opacity:0;transform:translateY(-6px);}
    to{opacity:1;transform:none;}
  }
  @keyframes alert-out{
    from{opacity:1;transform:none;}
    to{opacity:0;transform:translateY(-6px);}
  }
}

/* align-content:start keeps the control at its own height: a neighbour whose
   error message is two lines long must not stretch it */
.field{
  display:grid;
  gap:7px;
  align-content:start;
  margin-bottom:6px;
}
.field label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mist-dim);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  background-color:var(--void-deep);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  font-size:15.5px;
  color:var(--bone);
  transition:border-color .18s ease, background-color .18s ease;
}
.field textarea{resize:vertical;min-height:120px;}
/* Custom caret so the control matches the palette in both themes */
.field select{
  cursor:pointer;
  appearance:none;
  padding-right:40px;
  background-image:linear-gradient(45deg, transparent 50%, var(--mist) 50%),
                   linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position:calc(100% - 21px) center, calc(100% - 15px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--mist-dim);}
.field input:hover,
.field select:hover,
.field textarea:hover{border-color:var(--mist-dim);}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  outline:1px solid var(--accent);
  outline-offset:0;
  background-color:var(--void);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--danger);}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{
  border-color:var(--danger);
  outline-color:var(--danger);
}

/* The gap is always reserved — one line's worth — so an error appearing does not
   shift the field next to it in the row, nor push the rest of the form down.
   That is also why every message is written to fit a single line. */
.field__error{
  min-height:1.35em;
  font-size:12.5px;
  line-height:1.35;
  color:var(--danger);
}

/* Honeypot: out of sight for people, still submitted by bots */
.form__trap{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.form .btn[disabled]{
  cursor:progress;
  opacity:.62;
}

.form__note{
  margin-top:14px;
  font-size:12px;
  color:var(--mist-dim);
  text-align:center;
}

@media (min-width:560px){
  .form__row{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (min-width:940px){
  .contact__grid{grid-template-columns:.75fr 1.25fr;}
}

/* ===== 14-footer.css ===== */
.site-foot{
  background:var(--void);
  border-top:1px solid var(--accent);
  padding-block:clamp(40px, 5vw, 60px);
}

.site-foot__top{
  display:grid;
  gap:32px;
  grid-template-columns:1fr;
  padding-bottom:28px;
  margin-bottom:24px;
  border-bottom:1px solid var(--hairline);
}

.site-foot__nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
}
.site-foot__nav a{
  font-size:14.5px;
  color:var(--mist);
  transition:color .18s ease;
}
.site-foot__nav a:hover{color:var(--accent);}

.site-foot__contact{
  display:grid;
  gap:5px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--mist);
}
.site-foot__contact a{transition:color .18s ease;}
.site-foot__contact a:hover{color:var(--accent);}
.site-foot__contact span{color:var(--mist-dim);}

.site-foot__social{
  display:flex;
  gap:14px;
}
.site-foot__social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--hairline);
  border-radius:50%;
  color:var(--mist);
  transition:color .18s ease, border-color .18s ease;
}
.site-foot__social a:hover{
  color:var(--accent);
  border-color:var(--accent);
}
.site-foot__social svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.site-foot__legal{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--mist-dim);
  line-height:1.7;
}

@media (min-width:820px){
  .site-foot__top{
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:32px;
  }
  .site-foot__nav ul{justify-content:center;}
  .site-foot__contact{justify-items:end;text-align:right;}
}

/* ===== 15-back-to-top.css ===== */
/* Floating shortcut back to the hero. Visible by default so it works with no
   JavaScript and no scroll-driven animation support; where the browser has
   scroll-progress timelines it stays hidden until the visitor has actually
   scrolled, same reveal-on-scroll pattern as 03-layout.css. */
/* bottom sube ~68px respecto al borde para dejar libre el badge que
   reCAPTCHA v3 inyecta solo (fixed, abajo a la derecha, ~60px de alto con
   14px de margen) cuando el formulario de contacto o el de agenda lo
   activan -- ver src/php/recaptcha.php. Sin reCAPTCHA configurado el botón
   simplemente queda con más aire debajo, no hay problema en que sobre. */
.back-to-top{
  position:fixed;
  right:clamp(16px, 4vw, 32px);
  bottom:clamp(84px, 4vw + 68px, 100px);
  z-index:70;
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:999px;
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:0 18px 40px -18px var(--shadow);
  transition:background-color .18s ease, transform .18s ease;
}
.back-to-top:hover{
  background:var(--accent-hot);
  transform:translateY(-2px);
}
.back-to-top__icon{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .back-to-top{
      animation:back-to-top-reveal linear both;
      animation-timeline:scroll(root);
      animation-range:320px 520px;
    }
  }
}

@keyframes back-to-top-reveal{
  from{opacity:0; pointer-events:none;}
  to{opacity:1; pointer-events:auto;}
}

/* ===== 16-error-404.css ===== */
/* Página de error 404: sin fotografía ni patrón numerado, solo la misma
   tipografía y paleta del resto del sitio. Centrada dentro del viewport
   restante bajo el header, con el mismo padding-block de .section. */
.error-404{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70vh;
  text-align:center;
}
.error-404 .eyebrow{justify-content:center;}

.error-404__inner{max-width:640px;margin-inline:auto;}

.error-404__code{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(5rem, 16vw, 9rem);
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.error-404__code em{font-style:italic;color:var(--accent);}

.error-404__title{
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom:16px;
}

.error-404__lead{
  color:var(--mist);
  font-size:clamp(15px, 1.35vw, 17px);
  max-width:52ch;
  margin-inline:auto;
  margin-bottom:36px;
}

.error-404__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}