/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:          #fbfaf7;
  --bg-soft:     #f2f7f6;
  --bg-violet:   #f8eefb;
  --paper:       #ffffff;

  --ink:         #182236;
  --ink-soft:    #3c4a63;
  --ink-mute:    #6d7889;

  --turquoise:      #1fb3a8;
  --turquoise-deep: #007c6e;
  --violet:         #a72bc7;
  --violet-deep:    #7a1d96;
  --gold:           #e3a13a;

  --line:        rgba(24, 34, 54, 0.10);
  --line-soft:   rgba(24, 34, 54, 0.06);

  --gradient-brand: linear-gradient(120deg, var(--turquoise) 0%, var(--violet) 100%);
  --gradient-soft:  linear-gradient(160deg, rgba(31,179,168,0.12) 0%, rgba(167, 43, 199,0.12) 100%);

  --shadow-soft: 0 20px 60px rgba(24, 34, 54, 0.08);
  --shadow-lift: 0 30px 70px rgba(122, 29, 150, 0.16);

  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 76px;
  --container: 1180px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); font-family: var(--serif); font-weight: 500; }

::selection { background: var(--turquoise); color: #fff; }

:focus-visible {
  outline: 2px solid var(--turquoise-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.2rem; background: var(--ink); color: #fff;
  border-radius: 100px; font-weight: 600; font-size: .9rem;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.eyebrow {
  display: inline-block;
  font-family: var(--sans); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--turquoise-deep);
}
em { font-style: italic; color: var(--violet-deep); font-family: var(--serif); }

.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: .6rem; }
.section-head p { color: var(--ink-mute); font-size: 1.05rem; margin-top: 1rem; max-width: 52ch; }
.section-head.is-center p { margin-inline: auto; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem; border-radius: 100px;
  font-weight: 600; font-size: .96rem; letter-spacing: .01em;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background .4s var(--ease-out), color .4s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--gradient-brand); color: #fff;
  box-shadow: 0 14px 34px rgba(122, 29, 150, 0.28);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(122, 29, 150, 0.36); }
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-ghost {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
@supports not (backdrop-filter: blur(1px)) { .btn-ghost { background: rgba(255,255,255,0.92); } }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--turquoise); box-shadow: var(--shadow-soft); }

.btn-block { width: 100%; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .nav.is-scrolled { background: rgba(251, 250, 247, 0.98); } }

/* Over the dark hero (before scrolling) nav text needs to flip light */
body.has-dark-hero .nav:not(.is-scrolled) .nav-brand,
body.has-dark-hero .nav:not(.is-scrolled) .nav-link { color: #fff; }
body.has-dark-hero .nav:not(.is-scrolled) .nav-link { color: rgba(255,255,255,.88); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); transition: color .4s var(--ease-out); }
.nav-brand img { width: 34px; height: 34px; border-radius: 50%; }
.nav-links { display: none; align-items: center; gap: 1.5rem; white-space: nowrap; }
.nav-link { position: relative; padding: .3rem 0; font-weight: 600; font-size: .92rem; color: var(--ink-soft); transition: color .4s var(--ease-out); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gradient-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }

.nav-burger {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
.nav-burger svg { width: 18px; height: 18px; }
.nav-burger .icon-close { display: none; }
.nav-burger[aria-expanded="true"] .icon-open { display: none; }
.nav-burger[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: var(--paper);
  display: grid; place-items: center;
  clip-path: circle(0% at 92% 6%);
  transition: clip-path .7s var(--ease-soft);
  padding-inline: 1.5rem;
}
.nav-mobile[aria-hidden="false"] { clip-path: circle(150% at 92% 6%); }
.nav-mobile-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
.nav-mobile a { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); }
.nav-mobile .btn { margin-top: 1rem; }

@media (min-width: 1280px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}

/* =============================================================
   6. Splash loader (double safety net — see gotcha A.9)
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  pointer-events: auto;
  transition: opacity .9s var(--ease-out), clip-path 1s var(--ease-soft);
  /* MANDATORY safety net: hides itself even if JS never runs */
  animation: splashSafety .01s 4.5s forwards;
}
.splash img { animation: sway 3.2s var(--ease-soft) infinite; }
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
}

/* =============================================================
   7. Organic decoration (blobs, waves, sway)
   ============================================================= */
.blob-field { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob {
  position: absolute;
  background: var(--gradient-soft);
  filter: blur(32px);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: blobMorph 24s var(--ease-soft) infinite alternate, blobDrift 30s ease-in-out infinite;
  will-change: transform;
}
.blob--a { width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; top: -10vw; left: -8vw; }
.blob--b { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; bottom: -12vw; right: -6vw; animation-delay: -6s, -10s; }
.blob--c { width: 20vw; height: 20vw; max-width: 320px; max-height: 320px; top: 30%; right: 8%; opacity: .7; animation-delay: -12s, -4s; }

@keyframes blobMorph {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50%  { border-radius: 58% 42% 39% 61% / 55% 63% 37% 45%; }
  100% { border-radius: 46% 54% 51% 49% / 60% 40% 60% 40%; }
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2.5%, -3%) scale(1.06); }
}

.wave-divider { position: relative; line-height: 0; z-index: 1; }
.wave-divider svg { width: 100%; height: auto; display: block; }
.wave-divider--flip { transform: scaleY(-1); }

.sway {
  animation: sway 7s var(--ease-soft) infinite;
  transform-origin: 50% 12%;
}
@keyframes sway {
  0%, 100% { transform: rotate(-2.2deg) translateY(0); }
  50%      { transform: rotate(2.2deg) translateY(-6px); }
}

.bob {
  animation: bob 6s var(--ease-soft) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.grain-veil { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; }

/* =============================================================
   8. Hero
   ============================================================= */
.hero {
  position: relative;
  /* Taller than one screen on purpose: the content is pinned near the
     top (not vertically centered), and the extra height below it is
     exactly the room the mountains need to stretch further down —
     more of the range gets to show, at the cost of a bit more scroll
     to reach the next section. */
  min-height: calc(100svh + 220px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 6rem;
  overflow: clip;
  text-align: center;
  background: linear-gradient(180deg,
    #0a0d28 0%, #201a4a 24%, #5c2f74 48%, #a8425f 68%, #e8813f 86%, #ffcf7a 100%);
  color: #f2eefa;
}
.hero-star-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-star {
  position: absolute; border-radius: 50%; background: #fff;
  opacity: .2; animation: heroStarTwinkle 4s var(--ease-soft) infinite;
}
@keyframes heroStarTwinkle {
  0%, 100% { opacity: calc(var(--max-o, .95) * .16); }
  50%      { opacity: var(--max-o, .95); }
}
.hero-horizon-glow {
  position: absolute; z-index: 0; left: 50%; bottom: 10%;
  width: 180vw; height: 70vh; max-width: 2000px;
  transform: translate(-50%, 42%);
  pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at center, rgba(255,214,150,.55) 0%, rgba(255,160,90,.22) 30%, transparent 60%);
  animation: emblemPulse 6.5s var(--ease-soft) infinite;
}
.hero {
  --mtn-h: clamp(380px, 46vh, 620px);
}
.hero-mountains {
  /* Full width, always — object-position anchored to the TOP so any
     cropping (on short/wide viewports) eats into the dark foothills
     at the bottom, never the peaks. The image itself is a cutout —
     transparent above the ridge line — so the CSS night sky and stars
     behind it show straight through, right up to the actual silhouette.
     No fade/mask needed any more: the cut IS the horizon. */
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  height: var(--mtn-h);
  line-height: 0; pointer-events: none; overflow: hidden;
}
.hero-mountains img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.hero-content { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; padding-inline: 1.5rem; }
.hero-name { color: #fff; }
.hero-emblem {
  position: relative;
  width: clamp(150px, 20vw, 210px); margin-inline: auto; margin-bottom: 1.5rem;
  filter: drop-shadow(0 22px 40px rgba(122, 29, 150,0.24));
}
.hero-emblem img { position: relative; z-index: 1; border-radius: 50%; }

.hero-name { font-size: clamp(2.5rem, 6vw, 4.4rem); max-width: 15ch; margin-inline: auto; }
.hero-tagline {
  margin: 1.1rem auto 0; min-height: 1.3em;
}
.word-cycle {
  /* Width is locked by JS to the widest padded word, and every word is
     padded (with invisible hair-spaces, split evenly) to the same
     letter count — so the box never resizes and text-align:center
     (inherited) keeps every word centered on its own, with nothing
     but the letters themselves ever moving. */
  display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem); color: #fff;
  transition: color 1.4s var(--ease-soft);
  white-space: nowrap;
}
/* Each letter dissolves like a wisp of smoke — a turbulent SVG
   displacement (#wc-smoke) plus blur breaks its shape up as it fades,
   right in place (no rise, no fall, just opacity and focus changing).
   The whole word fades out this way, left to right, fully gone before
   the next word condenses back in the same unhurried wave — never a
   jittery snap, never overlapping. */
.wc-char {
  display: inline-block; color: inherit;
  transition: opacity .95s var(--ease-soft), filter .95s var(--ease-soft);
  filter: blur(0);
}
.wc-char.is-flip {
  opacity: .1;
  filter: url(#wc-smoke) blur(6px);
}

/* Living emblem — the artwork is a flat illustration, so "movement" is
   layered light on top: pulsing sun/moon glow + a slow rotating swirl
   of energy over the roots. Positions are tuned to the cropped logo. */
.emblem-glow {
  position: absolute; z-index: 2; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen;
}
.emblem-glow--sun {
  width: 30%; height: 30%; left: 25.5%; top: 22.5%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,205,120,.95) 0%, rgba(255,160,60,.55) 38%, transparent 72%);
  animation: emblemPulse 4.5s var(--ease-soft) infinite;
}
.emblem-glow--moon {
  width: 24%; height: 24%; left: 76.5%; top: 25.5%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(215,228,255,.9) 0%, rgba(180,200,255,.4) 42%, transparent 72%);
  animation: emblemPulse 5.6s var(--ease-soft) infinite; animation-delay: -2.1s;
}
.emblem-glow--spiral {
  width: 21%; height: 21%; left: 51%; top: 84%; transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg, transparent 0%, rgba(160,230,255,.7) 30%, transparent 62%);
  animation: emblemSpiralSpin 8s linear infinite;
}
@keyframes emblemPulse {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes emblemSpiralSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.emblem-sparkle {
  position: absolute; z-index: 2; left: var(--x); top: var(--y);
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 72%);
  mix-blend-mode: screen; pointer-events: none;
  animation: emblemSparkle 3.4s var(--ease-soft) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes emblemSparkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50%      { opacity: 1; transform: scale(1.7); }
}

.hero-sub {
  margin-top: 1.4rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(242,238,250,.78); max-width: 46ch; margin-inline: auto;
}
.hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.hero .btn-ghost {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff;
}
.hero .btn-ghost:hover { border-color: var(--turquoise); background: rgba(255,255,255,.16); }
.hero-brandline {
  margin-top: 3rem; display: flex; align-items: center; justify-content: center; gap: .8rem;
  color: rgba(242,238,250,.65); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.hero-brandline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gradient-brand); }

.hero-bottom-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; }

/* =============================================================
   9. Reveal
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* =============================================================
   10. Sobre mí
   ============================================================= */
.about { background: var(--paper); }
.about-grid {
  display: grid; gap: 3rem; align-items: center;
}
.about-figure { position: relative; margin-inline: auto; max-width: 420px; }
.about-figure-shape {
  position: relative; border-radius: 46% 54% 58% 42% / 50% 46% 54% 50%;
  overflow: hidden; box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 5;
}
.about-figure-shape img { width: 100%; height: 100%; object-fit: cover; }
.about-figure-ring {
  position: absolute; inset: -18px; z-index: -1;
  border-radius: 46% 54% 58% 42% / 50% 46% 54% 50%;
  background: var(--gradient-brand); opacity: .18;
  animation: blobMorph 18s var(--ease-soft) infinite alternate;
}
.about-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: .6rem; }
.about-body { color: var(--ink-soft); font-size: 1.05rem; margin-top: 1.2rem; }
.about-body p + p { margin-top: 1.1rem; }
.about-pull {
  margin-top: 1.8rem; padding-left: 1.2rem; border-left: 3px solid transparent;
  border-image: var(--gradient-brand) 1;
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--violet-deep);
}
.about-note {
  margin-top: .7rem; font-size: .84rem;
  font-weight: 600; letter-spacing: .04em; color: var(--violet-deep);
  text-align: right;
}

/* =============================================================
   Neon glass cards — genuinely transparent, frosted color washes
   (no dark/grey backing) used as an accent on specific cards (the
   quote's author, the service cards). The page shows through; only a
   tint of color, a soft border and a matching glow give each one its
   own "neon" identity. Text stays in the page's normal ink colors,
   since there's no dark backing to need light text for contrast.
   ============================================================= */
.glass-card {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
}
/* An infinitesimal glass reflection — a soft diagonal glint from the
   top-left, barely-there, blended so the type underneath stays clean
   and readable. */
.glass-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 26%,
    rgba(255,255,255,0) 74%, rgba(255,255,255,.2) 100%);
  mix-blend-mode: overlay;
}
.glass-card.service-card { box-shadow: 0 20px 40px -24px rgba(24,34,54,.25); }
.glass-card h3 { color: var(--ink); }
.glass-card p { color: var(--ink-soft); }

.glass-card.glass-turquoise {
  background: linear-gradient(155deg, rgba(52,230,207,.26), rgba(52,230,207,.05) 75%);
  border-color: rgba(31,179,168,.38);
  box-shadow: 0 20px 40px -24px rgba(24,34,54,.2), 0 0 34px -14px rgba(52,230,207,.46);
}
.glass-turquoise .service-format { color: var(--turquoise-deep); }

.glass-card.glass-violet {
  background: linear-gradient(155deg, rgba(214,82,234,.22), rgba(214,82,234,.05) 75%);
  border-color: rgba(167,43,199,.36);
  box-shadow: 0 20px 40px -24px rgba(24,34,54,.2), 0 0 34px -14px rgba(214,82,234,.4);
}
.glass-violet .service-format { color: var(--violet-deep); }

.glass-card.glass-gradient {
  /* The softest, most "almost transparent" of the three — just a
     whisper of both colors over clear glass. */
  background: linear-gradient(150deg, rgba(52,230,207,.12), rgba(214,82,234,.12) 70%, rgba(255,255,255,.06));
  border-color: rgba(150,110,220,.3);
  box-shadow: 0 20px 40px -24px rgba(24,34,54,.16), 0 0 30px -14px rgba(180,150,240,.38);
}
.glass-gradient .service-format { color: var(--violet-deep); }

@media (min-width: 860px) {
  .about-grid { grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; }
  .about-figure { margin-inline: 0; }
}

/* =============================================================
   11. Servicios
   ============================================================= */
.services { background: var(--bg-soft); }
.services-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.service-card {
  position: relative; background: var(--paper); border-radius: 28px;
  padding: 2.2rem 1.9rem; box-shadow: var(--shadow-soft);
  border: 1px solid var(--line-soft);
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.service-icon {
  width: 52px; height: 52px; border-radius: 46% 54% 58% 42% / 50% 46% 54% 50%;
  background: var(--gradient-brand); margin-bottom: 1.3rem;
  display: grid; place-items: center; color: #fff;
}
.service-icon svg { width: 24px; height: 24px; }
.service-format { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--turquoise-deep); margin-top: .5rem; margin-bottom: .8rem; }
.service-card h3 { font-size: 1.3rem; }
.service-card p { color: var(--ink-mute); font-size: .98rem; }
.service-card--accent { border-color: rgba(167, 43, 199,0.25); background: linear-gradient(180deg, #fff 0%, var(--bg-violet) 130%); }
.service-tag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet-deep); background: rgba(167, 43, 199,0.12); padding: .35rem .7rem; border-radius: 100px;
}

@media (min-width: 720px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   12. Especialidades
   ============================================================= */
.specialties { background: var(--paper); position: relative; overflow: clip; }
.specialty-cloud { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; max-width: 900px; margin-inline: auto; }
.specialty-pill {
  padding: .8rem 1.5rem; border-radius: 100px; font-family: var(--serif); font-size: 1.05rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), border-color .45s var(--ease-soft), background .45s var(--ease-soft);
}
.specialty-pill:hover, .specialty-pill:focus-visible {
  transform: translateY(-4px) scale(1.03);
  background: var(--gradient-brand); color: #fff; border-color: transparent;
  box-shadow: 0 16px 34px rgba(122, 29, 150,0.22);
}

/* =============================================================
   13. El espacio
   ============================================================= */
.space-section { background: var(--bg-violet); }
.space-grid { display: grid; gap: 1.2rem; }
.space-media { position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-soft); }
.space-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-soft); }
.space-media:hover img { transform: scale(1.06); }
.space-media--tall { aspect-ratio: 3 / 4; }
.space-media--wide { aspect-ratio: 16 / 10; }
.space-text { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: 2.4rem; }
.space-text h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: .6rem; }
.space-text p { color: var(--ink-mute); font-size: 1.05rem; margin-top: 1rem; }

@media (min-width: 760px) {
  .space-grid { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
}

/* =============================================================
   14. Reseñas
   ============================================================= */
.reviews { background: var(--paper); }
.reviews-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 2.6rem; }
.reviews-rating { display: flex; align-items: center; gap: .9rem; }
.reviews-rating-score { font-family: var(--serif); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--ink); }
.reviews-rating-meta { display: flex; flex-direction: column; gap: .3rem; }
.reviews-stars { display: flex; gap: 2px; color: var(--gold); }
.reviews-stars svg { width: 16px; height: 16px; }
.reviews-rating-label { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .92rem; color: var(--ink); }
.reviews-rating-label .google-g { width: 15px; height: 15px; flex-shrink: 0; }
.review-card {
  /* Neutral, Google-widget-style card: light gray, no color coding —
     the trust signals are the stars, the Google mark and the avatar,
     not a brand tint. */
  background: rgba(24,34,54,.045); border-radius: 20px; padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid rgba(24,34,54,.06); position: relative;
  display: flex; flex-direction: column; gap: .6rem;
}
.review-top { display: flex; align-items: center; justify-content: space-between; }
.review-stars { display: flex; gap: 2px; color: var(--gold); }
.review-stars .star-ico { width: 15px; height: 15px; }
.review-top .google-g { width: 18px; height: 18px; flex-shrink: 0; }
.review-text {
  font-size: .96rem; line-height: 1.55; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.review-card.is-expanded .review-text { -webkit-line-clamp: unset; overflow: visible; }
.review-more {
  align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -.3rem;
  font: inherit; font-size: .86rem; font-weight: 700; color: var(--turquoise-deep); cursor: pointer;
}
.review-more:hover { text-decoration: underline; }
.review-more[hidden] { display: none; }
.review-person { display: flex; align-items: center; gap: .65rem; margin-top: auto; padding-top: .4rem; }
.review-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .86rem;
}
.review-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.review-card--cta {
  align-items: center; justify-content: center; text-align: center; gap: 1.1rem;
  background: var(--bg-violet); border-style: dashed; border-color: rgba(167,43,199,.3);
}
.review-card-cta-text { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--violet-deep); }

/* ---- Carousel ---- */
.reviews-carousel { position: relative; }
.reviews-track {
  display: flex; gap: 1.4rem;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: .4rem .2rem 1rem;
  margin: -.4rem -.2rem -1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .reviews-track { cursor: grab; } }
.reviews-track .review-card {
  flex: 0 0 100%; scroll-snap-align: start;
}
@media (min-width: 540px)  { .reviews-track .review-card { flex-basis: calc((100% - 1.4rem) / 2); } }
@media (min-width: 960px)  { .reviews-track .review-card { flex-basis: calc((100% - 2.8rem) / 3); } }

.carousel-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 46px; height: 46px; border-radius: 50%; z-index: 3;
  display: grid; place-items: center;
  background: var(--paper); box-shadow: var(--shadow-soft); border: 1px solid var(--line-soft);
  color: var(--ink); transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), opacity .3s;
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-lift); }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-arrow--prev { left: -.6rem; }
.carousel-arrow--next { right: -.6rem; }
@media (min-width: 720px) {
  .carousel-arrow--prev { left: -1.4rem; }
  .carousel-arrow--next { right: -1.4rem; }
}

/* =============================================================
   15. Contacto
   ============================================================= */
.contact { position: relative; background: var(--ink); color: #f4f2ef; overflow: clip; }
.contact .blob { opacity: .5; }
.contact-grid { position: relative; z-index: 2; display: grid; gap: 3rem; }
.contact-info h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: .6rem; }
.contact-info p { color: rgba(244,242,239,0.72); font-size: 1.05rem; margin-top: 1rem; max-width: 46ch; }
.contact-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-list a, .contact-list span { display: flex; align-items: center; gap: .8rem; font-weight: 600; color: #fff; }
.contact-list a { transition: color .3s var(--ease-out); width: fit-content; }
.contact-list a:hover, .contact-list a:focus-visible { color: var(--turquoise); }
.contact-list .ico {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .3s var(--ease-out);
}
.contact-list a:hover .ico, .contact-list a:focus-visible .ico { background: rgba(255,255,255,0.18); }
.contact-list .ico svg { width: 17px; height: 17px; }

.contact-form {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 28px; padding: 2rem; backdrop-filter: blur(10px);
  position: relative;
}
@supports not (backdrop-filter: blur(1px)) { .contact-form { background: rgba(30,30,45,0.9); } }
.field { position: relative; margin-bottom: 1.3rem; }
.field input, .field textarea {
  width: 100%; padding: 1.3rem 1rem .55rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff;
  font-family: var(--sans); font-size: .98rem; transition: border-color .3s var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--turquoise); outline: none; }
.field label {
  position: absolute; left: 1rem; top: 1rem;
  pointer-events: none; transition: all .25s var(--ease-out);
  color: rgba(244,242,239,0.55); font-size: .95rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: .45rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise);
}
.contact-form-note { margin-top: 1rem; font-size: .8rem; color: rgba(244,242,239,0.55); }
.contact-form.is-sending .btn-primary { opacity: .7; pointer-events: none; }

/* =============================================================
   16. Footer
   ============================================================= */
.site-footer { background: var(--ink); color: rgba(244,242,239,0.7); padding-block: 2.6rem; font-size: .86rem; }
.footer-inner { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }
.footer-links a:hover { color: #fff; }
.footer-legal { color: rgba(244,242,239,0.45); }
@media (min-width: 720px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* =============================================================
   17. Legal / credits page shell
   ============================================================= */
.page-shell { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + 3rem) 1.5rem 5rem; }
.page-shell h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.6rem; }
.page-shell h2 { font-size: 1.35rem; margin-top: 2.4rem; margin-bottom: .8rem; }
.page-shell p, .page-shell li { color: var(--ink-soft); margin-bottom: .9rem; }
.page-shell ul { padding-left: 1.2rem; list-style: disc; }
.page-back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--turquoise-deep); margin-bottom: 2rem; }
.legal-flag {
  background: var(--bg-soft); border-radius: 16px; padding: 1rem 1.2rem;
  font-size: .88rem; color: var(--ink-mute); margin-bottom: 2rem;
}
.credits-list li { padding: .9rem 0; border-bottom: 1px solid var(--line-soft); }
.credits-list a { color: var(--turquoise-deep); font-weight: 600; }

/* =============================================================
   18. Responsive base spacing
   ============================================================= */
@media (min-width: 540px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container { padding-inline: 2.5rem; } }

/* =============================================================
   19. Reduced motion — only intrusive effects
   ============================================================= */
/* Nothing on this site is intrusive (no autoplay video, no particles,
   no large parallax) — the organic blob drift, logo sway and image
   bob are gentle functional motion and stay on, per gotcha A.2. */