/* ================================================
   ECOFISIO SALUD — Clinical Luxury Redesign
   Cormorant Garant · DM Mono · Instrument Sans
   ================================================ */

/* 1. CUSTOM PROPERTIES */
:root {
  --ink:        #0A0D09;
  --ink-2:      #131710;
  --ink-3:      #1C2118;
  --cream:      #F4EFE6;
  --cream-dim:  #E6E0D4;
  --cream-muted: rgba(244,239,230,.55);
  --gold:       #FBB820;
  --gold-dark:  #D99A00;
  --gold-glow:  rgba(251,184,32,.28);
  --gold-dim:   rgba(251,184,32,.08);
  --wa:         #25D366;
  --wa-dark:    #1DAA55;

  --font-display: 'Spectral', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-body:    'Outfit', system-ui, sans-serif;

  --max-w:     1200px;
  --header-h:  72px;
  --radius:    4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --ease:     cubic-bezier(.25,.46,.45,.94);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t:        .3s var(--ease);
  --t-slow:   .6s var(--ease-out);
}

/* 2. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--ink);
  color: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: none; }
ul { list-style: none; }
button { cursor: none; font: inherit; border: none; background: none; }
em { font-style: italic; }

/* 3. CUSTOM CURSOR */
.cursor {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .15s, height .15s, opacity .15s;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1px solid rgba(251,184,32,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              border-color .3s, opacity .3s;
}
.cursor.hover { width: 10px; height: 10px; }
.cursor-ring.hover { width: 48px; height: 48px; border-color: var(--gold); }
@media (hover: none) {
  .cursor, .cursor-ring { display: none; }
  body, a, button { cursor: auto; }
}

/* 4. GRAIN TEXTURE */
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .032;
  pointer-events: none;
  z-index: 1;
  background-size: 256px 256px;
}

/* 5. UTILITIES */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
.mono { font-family: var(--font-mono); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-num {
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 300;
  color: rgba(251,184,32,.07);
  line-height: 1;
  letter-spacing: -.05em;
  display: block;
  flex-shrink: 0;
  margin-top: -.5rem;
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.section-header--stacked { flex-direction: column; gap: .6rem; }
.section-header__text { display: flex; flex-direction: column; gap: .5rem; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--cream);
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { --d: .1s; }
.d2 { --d: .2s; }
.d3 { --d: .3s; }
.d4 { --d: .4s; }
.d5 { --d: .5s; }
.d6 { --d: .6s; }
.d7 { --d: .7s; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.75rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: var(--t);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--gold-glow);
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--gold-glow);
}
.btn-wa {
  background: var(--wa);
  color: #fff;
  border-color: var(--wa);
}
.btn-wa:hover {
  background: var(--wa-dark);
  border-color: var(--wa-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37,211,102,.3);
}
.btn-dark {
  background: var(--ink);
  color: var(--cream);
  border-color: rgba(244,239,230,.2);
}
.btn-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-muted);
  border-bottom: 1px solid rgba(244,239,230,.2);
  padding-bottom: .2rem;
  transition: color var(--t), border-color var(--t);
}
.btn-ghost:hover { color: var(--cream); border-color: var(--cream); }
.icon { flex-shrink: 0; }

/* 6. HEADER */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  transition: background var(--t), backdrop-filter var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(10,13,9,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(244,239,230,.07);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.header__logo img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: opacity var(--t);
}
.header__logo:hover img { opacity: 1; }

.header__nav {
  display: flex;
  gap: 2.5rem;
}
.header__nav a {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(244,239,230,.6);
  transition: color var(--t);
  position: relative;
}
.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.header__nav a:hover { color: var(--cream); }
.header__nav a:hover::after,
.header__nav a.active::after { transform: scaleX(1); }
.header__nav a.active { color: var(--cream); }

.header__actions { display: flex; align-items: center; gap: 1rem; }

.header__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: .4rem;
}
.header__burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--cream);
  transition: var(--t);
}
.header__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.open span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 30%;
  background: var(--ink-2);
  z-index: 890;
  padding: 6rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateX(100%);
  transition: transform .45s var(--ease-out);
  border-left: 1px solid rgba(244,239,230,.06);
}
.mobile-nav.open { transform: none; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--cream-muted);
  padding: .75rem 0;
  border-bottom: 1px solid rgba(244,239,230,.06);
  transition: color var(--t);
}
.mobile-nav a:hover { color: var(--cream); }
.mobile-nav__cta {
  margin-top: 2rem;
  font-family: var(--font-mono) !important;
  font-size: .75rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-bottom: none !important;
  padding: .8rem 1.5rem !important;
}
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,13,9,.7);
  z-index: 889;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  backdrop-filter: blur(4px);
}
.mobile-nav__overlay.show { opacity: 1; pointer-events: all; }

/* 7. HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  padding-top: 0;
}
.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 3.5rem;
  position: relative;
  z-index: 2;
}

.hero__label {
  font-size: .68rem;
  letter-spacing: .2em;
  color: rgba(244,239,230,.4);
  margin-bottom: 1.5rem;
}

.hero__title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.hero__title-line {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 8rem);
  font-weight: 600;
  line-height: .93;
  letter-spacing: -.045em;
  color: var(--cream);
  display: block;
}
.hero__title-em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.hero__sub {
  font-size: 1.08rem;
  color: var(--cream-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(244,239,230,.08);
}
.hero__stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero__stat-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,239,230,.35);
  margin-top: .2rem;
}
.hero__stat-sep {
  font-size: 1rem;
  color: rgba(244,239,230,.15);
}

/* Hero visual */
.hero__visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.hero__img-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 78% 100%, 0 100%);
  border-radius: 2px;
  position: relative;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.hero.loaded .hero__img { transform: scale(1); }
.hero__img-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10,13,9,.1) 0%,
    rgba(10,13,9,.0) 50%,
    rgba(10,13,9,.4) 100%
  );
}

.hero__badge {
  position: absolute;
  bottom: 2rem;
  left: -1.5rem;
  background: var(--ink-2);
  border: 1px solid rgba(244,239,230,.1);
  border-radius: var(--radius-md);
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
}
.hero__badge span {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(244,239,230,.45);
}

.hero__ring {
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(251,184,32,.1);
  pointer-events: none;
}
.hero__ring::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(251,184,32,.06);
}

/* Hero marquee */
.hero__marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(244,239,230,.07);
  padding: 1rem 0;
  background: rgba(251,184,32,.03);
}
.hero__marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 32s linear infinite;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .25em;
  color: rgba(244,239,230,.3);
}
.hero__marquee-dot { color: var(--gold); opacity: .4; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 8. PARTNERS */
.partners {
  background: var(--cream);
  padding: 2rem 0;
  overflow: hidden;
}
.partners__label { display: none; }
.partners__track-wrap {
  overflow: hidden;
  position: relative;
}
.partners__track-wrap::before,
.partners__track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 1;
  pointer-events: none;
}
.partners__track-wrap::before { left: 0; background: linear-gradient(to right, var(--cream), transparent); }
.partners__track-wrap::after  { right: 0; background: linear-gradient(to left, var(--cream), transparent); }
.partners__logos {
  display: flex;
  align-items: center;
  will-change: transform;
  animation: partnersScroll 30s linear infinite;
}
.partners__set {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem; /* iguala el gap entre sets → juntura invisible */
  flex-shrink: 0;
}
@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 4 sets → -50% = exactamente 2 sets */
}
.partners__logos img {
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .45;
  transition: var(--t);
}
.partners__logos img:hover { filter: none; opacity: 1; }

/* 9. SERVICES */
.services {
  position: relative;
  background: var(--ink);
  padding: 7rem 0 8rem;
}
.services .section-header { gap: 2rem; }

.services__grid {
  display: grid;
}

.scard {
  background: var(--ink);
  padding: 2.5rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background var(--t);
  overflow: hidden;
}
.scard::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.scard:hover { background: var(--ink-2); }
.scard:hover::before { transform: scaleX(1); }

.scard__ghost {
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-size: 5rem;
  font-weight: 300;
  color: rgba(251,184,32,.05);
  line-height: 1;
  letter-spacing: -.05em;
  pointer-events: none;
  transition: color var(--t);
}
.scard:hover .scard__ghost { color: rgba(251,184,32,.09); }

.scard__badge {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 1px;
  margin-bottom: 1.25rem;
  width: fit-content;
}

.scard__icon {
  color: var(--gold);
  margin-bottom: 1.5rem;
  opacity: .7;
  transition: opacity var(--t);
}
.scard:hover .scard__icon { opacity: 1; }

.scard__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.scard__desc {
  font-size: .875rem;
  color: var(--cream-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.75rem;
}

.scard__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,239,230,.35);
  transition: color var(--t), gap var(--t);
}
.scard__link:hover { color: var(--gold); gap: .8rem; }
.scard:hover .scard__link { color: rgba(244,239,230,.6); }

.scard--featured {
  background: linear-gradient(145deg, #141810 0%, #0A0D09 100%);
}
.scard--featured .scard__title { color: var(--cream); }
.scard--featured .scard__ghost { color: rgba(251,184,32,.12); }

/* 10. ABOUT */
.about {
  background: var(--cream);
  padding: 7rem 0 8rem;
}
.about .eyebrow { color: var(--ink); }
.about .eyebrow::before { background: var(--ink); }
.about .section-title { color: var(--ink); }
.about .section-title em { color: var(--gold-dark); }
.about__inner {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: 6rem;
  align-items: center;
}

.about__visual {
  position: relative;
}
.about__img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.about__img {
  width: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .6s var(--ease);
}
.about__img-wrap:hover .about__img { transform: scale(1.03); }

.about__verified {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.about__verified svg { color: var(--gold); }

.about__num-bg {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  font-size: 12rem;
  font-weight: 300;
  color: rgba(10,13,9,.07);
  line-height: 1;
  letter-spacing: -.05em;
  pointer-events: none;
  z-index: 0;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.about__text {
  font-size: .975rem;
  color: rgba(10,13,9,.65);
  line-height: 1.8;
}

.about__features {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.about__feat {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(10,13,9,.08);
  border-radius: var(--radius);
  transition: border-color var(--t), background var(--t);
}
.about__feat:hover {
  border-color: rgba(217,154,0,.3);
  background: rgba(217,154,0,.04);
}
.about__feat-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .15rem;
  color: var(--ink);
}
.about__feat strong {
  display: block;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .2rem;
}
.about__feat span {
  font-size: .825rem;
  color: rgba(10,13,9,.55);
  line-height: 1.6;
}

/* 11. TESTIMONIALS */
.testimonials {
  position: relative;
  background: var(--ink-2);
  padding: 7rem 0 8rem;
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.testimonials__score {
  font-size: 3rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.03em;
}
.testimonials__stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: .2em;
}
.testimonials__source {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cream-muted);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.tcard {
  background: rgba(244,239,230,.03);
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius);
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.tcard:hover {
  background: rgba(244,239,230,.05);
  border-color: rgba(251,184,32,.2);
  transform: translateY(-4px);
}
.tcard__quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: .8;
  color: rgba(251,184,32,.15);
  margin-bottom: 1rem;
  font-weight: 700;
}
.tcard__text {
  font-size: .9rem;
  color: rgba(244,239,230,.65);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 2rem;
}
.tcard__footer {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(244,239,230,.07);
}
.tcard__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
}
.tcard__verified {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  color: rgba(244,239,230,.3);
}
.tcard__stars {
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .1em;
  margin-left: auto;
  flex-shrink: 0;
}
.testimonials__cta { text-align: center; }

/* 12. CONTACT */
.contact {
  background: var(--cream);
  padding: 7rem 0 8rem;
}
.contact .eyebrow { color: var(--ink); }
.contact .eyebrow::before { background: var(--ink); }
.contact .section-title { color: var(--ink); }
.contact .section-title em { color: var(--gold-dark); }
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: start;
}
.contact__info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact__sub {
  font-size: .95rem;
  color: rgba(10,13,9,.55);
  line-height: 1.7;
}

.contact__methods {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.cmethod {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(10,13,9,.1);
  border-radius: var(--radius);
  transition: var(--t);
}
.cmethod:not(.cmethod--static):hover {
  border-color: var(--gold-dark);
  box-shadow: 0 4px 20px rgba(217,154,0,.12);
  transform: translateX(4px);
}
.cmethod--wa {
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
}
.cmethod--wa:hover {
  background: var(--wa-dark) !important;
  border-color: var(--wa-dark) !important;
  box-shadow: 0 4px 20px rgba(37,211,102,.25) !important;
}
.cmethod--static { cursor: default; }
.cmethod__icon {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: rgba(10,13,9,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}
.cmethod--wa .cmethod__icon { background: rgba(255,255,255,.2); color: #fff; }
.cmethod__body { flex: 1; }
.cmethod__body strong {
  display: block;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.cmethod--wa .cmethod__body strong { color: #fff; }
.cmethod__body span { font-size: .8rem; color: rgba(10,13,9,.5); }
.cmethod--wa .cmethod__body span { color: rgba(255,255,255,.75); }
.cmethod__arrow {
  font-size: .9rem;
  color: var(--gold-dark);
  transition: transform var(--t);
}
.cmethod--wa .cmethod__arrow { color: rgba(255,255,255,.6); }
.cmethod:hover .cmethod__arrow { transform: translateX(4px); }

.contact__social {
  display: flex;
  gap: .6rem;
}
.contact__social-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(10,13,9,.45);
  border: 1px solid rgba(10,13,9,.12);
  border-radius: 2px;
  padding: .5rem 1rem;
  transition: var(--t);
}
.contact__social-link:hover {
  color: var(--ink);
  border-color: var(--gold-dark);
}

.contact__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  align-self: stretch;
  margin-top: 4rem;
  border: none;
  box-shadow: 0 4px 40px rgba(10,13,9,.08);
  position: relative;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 13. FOOTER */
.footer {
  background: var(--ink);
  color: rgba(244,239,230,.5);
  padding: 5rem 0 0;
  border-top: 1px solid rgba(244,239,230,.06);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(244,239,230,.06);
}
.footer__brand img {
  height: 26px;
  filter: brightness(0) invert(1);
  opacity: .7;
  margin-bottom: 1.25rem;
}
.footer__brand p {
  font-size: .85rem;
  line-height: 1.75;
  max-width: 220px;
  margin-bottom: 1.5rem;
}
.footer__social { display: flex; gap: .6rem; }
.footer__social-link {
  width: 34px; height: 34px;
  border-radius: 2px;
  border: 1px solid rgba(244,239,230,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244,239,230,.4);
  transition: var(--t);
}
.footer__social-link:hover { border-color: var(--gold); color: var(--gold); }

.footer__col h4 {
  font-size: .63rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244,239,230,.3);
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer__col ul a {
  font-size: .85rem;
  color: rgba(244,239,230,.4);
  transition: color var(--t);
}
.footer__col ul a:hover { color: var(--cream); }

.footer__bottom { padding: 1.5rem 0; }
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer__bottom p {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  color: rgba(244,239,230,.25);
}
.footer__bottom a { color: rgba(244,239,230,.35); transition: color var(--t); }
.footer__bottom a:hover { color: var(--gold); }
.footer__credit span { color: var(--gold); }

/* 14. FLOATING WHATSAPP */
.wa-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 800;
  width: 54px; height: 54px;
  background: var(--wa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 28px rgba(37,211,102,.4);
  transition: var(--t);
  animation: waPulse 3s ease infinite;
}
.wa-float:hover {
  transform: scale(1.1);
  background: var(--wa-dark);
  animation: none;
}
.wa-float__tip {
  position: absolute;
  right: 66px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  padding: .45rem .9rem;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: var(--t);
  border: 1px solid rgba(244,239,230,.1);
}
.wa-float:hover .wa-float__tip { opacity: 1; transform: none; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 6px 40px rgba(37,211,102,.65), 0 0 0 10px rgba(37,211,102,.07); }
}

/* 15. RESPONSIVE */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; padding-bottom: 4rem; }
  .hero__visual { max-width: 480px; margin: 0 auto; }
  .hero__ring { display: none; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .about__inner { grid-template-columns: 1fr; gap: 3rem; }
  .about__num-bg { display: none; }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .header__nav, .header__actions .btn { display: none; }
  .header__burger { display: flex; }

  .hero__inner { padding-top: 2.5rem; }
  .hero__title-line { font-size: clamp(3rem, 10vw, 4.5rem); }
  .hero__actions { gap: 1rem; }
  .hero__stats { gap: 1rem; flex-wrap: wrap; }

  .services__grid { grid-template-columns: 1fr; }
  .section-num { font-size: 5rem; }
  .section-header { gap: 1rem; }

  .about__img { aspect-ratio: 16/9; }

  .testimonials__grid { grid-template-columns: 1fr; }

  .contact__map { height: 300px; margin-top: 0; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .hero__badge { left: 0; right: 0; bottom: 1rem; }
  .hero__stats { gap: .75rem; }
  .hero__stat-sep { display: none; }
}

/* ================================================
   FONT TUNING — Spectral + Outfit
   ================================================ */

/* Spectral has wider proportions than Cormorant — tighten card headings */
.scard__title    { letter-spacing: -.015em; }
.tmember__name   { letter-spacing: -.015em; }
.pillar__title   { letter-spacing: -.015em; }

/* Outfit body needs slightly less line-height than Instrument Sans */
body { line-height: 1.65; }
.hero__sub { line-height: 1.7; }

/* ================================================
   ENHANCEMENT LAYER — UI/UX Pro Max v2
   ================================================ */

/* 16. EXTENDED TOKENS */
:root {
  --shadow-sm:   0 2px 8px rgba(0,0,0,.2);
  --shadow-md:   0 8px 32px rgba(0,0,0,.3);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.45);
  --glow-gold:   0 0 40px rgba(251,184,32,.2), 0 0 80px rgba(251,184,32,.08);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* 17. SKIP LINK */
.skip-link {
  position: fixed;
  top: -80px; left: 1rem;
  z-index: 10000;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem 1.25rem;
  border-radius: 2px;
  transition: top .25s var(--ease-out);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(251,184,32,.45);
}
.skip-link:focus { top: .75rem; }

/* 18. FOCUS RING */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* 19. PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cursor, .cursor-ring { display: none !important; }
  body, a, button { cursor: auto !important; }
}

/* 20. HERO — AMBIENT RADIAL GLOW */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 58% at 18% 44%, rgba(251,184,32,.072) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 88% 10%, rgba(244,239,230,.018) 0%, transparent 55%);
}

/* 21. HERO LABEL — CSS LINE */
.hero__label {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.75rem;
}
.hero__label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(251,184,32,.45);
  flex-shrink: 0;
}

/* 22. HERO STATS — GLASS CONTAINER */
.hero__stats {
  background: rgba(244,239,230,.028);
  border: 1px solid rgba(244,239,230,.08);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 23. HERO BADGE — FLOAT + SHADOW */
.hero__badge {
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(251,184,32,.1);
  animation: badgeFloat 5s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .hero__badge { animation: none; } }

/* 24. HERO RING — SLOW ORBIT */
.hero__ring {
  animation: ringOrbit 28s linear infinite;
}
@keyframes ringOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .hero__ring { animation: none; } }

/* 25. BUTTONS — SHIMMER SWEEP */
@keyframes btnShimmer {
  from { left: -80%; }
  to   { left: 130%; }
}
.btn-wa::after,
.btn-primary::after,
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.17) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
}
.btn-wa:hover::after,
.btn-primary:hover::after,
.btn-gold:hover::after {
  opacity: 1;
  animation: btnShimmer .55s var(--ease-out) forwards;
}
.btn:active { transform: translateY(1px) scale(.99) !important; transition-duration: .08s !important; }

/* 26. SERVICES — FEATURED GOLD INSET */
.scard--featured {
  box-shadow: inset 0 0 0 1px rgba(251,184,32,.28);
}
.scard--featured:hover {
  box-shadow: inset 0 0 0 1px rgba(251,184,32,.52), inset 0 0 50px rgba(251,184,32,.04);
}

/* Spring timing on top-edge reveal */
.scard::before {
  transition: transform .55s cubic-bezier(.34,1.56,.64,1);
}

/* 27. TESTIMONIALS — GLASSMORPHISM */
.tcard {
  background: linear-gradient(145deg, rgba(244,239,230,.045) 0%, rgba(244,239,230,.018) 100%);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-color: rgba(244,239,230,.09);
  box-shadow: 0 4px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(244,239,230,.06);
}
.tcard:hover {
  background: rgba(244,239,230,.058);
  border-color: rgba(251,184,32,.22);
  box-shadow: 0 14px 44px rgba(0,0,0,.32), 0 0 0 1px rgba(251,184,32,.13), inset 0 1px 0 rgba(244,239,230,.1);
  transform: translateY(-5px);
}

/* Rating glass pill */
.testimonials__rating {
  display: flex;
  width: fit-content;
  padding: 1rem 2rem;
  background: rgba(244,239,230,.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(244,239,230,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 28. ABOUT — IMAGE GOLD TINT */
.about__img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(217,154,0,.07) 0%, transparent 100%);
  pointer-events: none;
}

/* Feature mark spring */
.about__feat-mark {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.about__feat:hover .about__feat-mark {
  transform: scale(1.15);
  box-shadow: 0 0 16px rgba(217,154,0,.45);
}

/* 29. CONTACT — MAP GOLD FRAME */
.contact__map {
  box-shadow:
    0 0 0 2px rgba(217,154,0,.5),
    0 0 0 5px rgba(217,154,0,.1),
    0 0 0 6px rgba(217,154,0,.04),
    0 20px 60px rgba(10,13,9,.14),
    0 4px 24px rgba(217,154,0,.1);
}

/* 30. FOOTER — GRADIENT BORDER */
.footer { border-top: none; position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(251,184,32,.22) 25%, rgba(251,184,32,.22) 75%, transparent 100%);
}

/* 31. HEADER CTA — SCROLL PULSE */
.header.scrolled .btn-primary {
  animation: headerCtaPulse 4.5s ease 2s infinite;
}
@keyframes headerCtaPulse {
  0%, 55%, 100% { box-shadow: none; }
  30%            { box-shadow: 0 0 0 5px rgba(251,184,32,.15); }
}
@media (prefers-reduced-motion: reduce) {
  .header.scrolled .btn-primary { animation: none; }
}

/* 32. SECTION NUMBER — GRADIENT TEXT */
.section-num {
  background: linear-gradient(135deg, rgba(251,184,32,.15) 0%, rgba(251,184,32,.04) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 33. PARTNERS — FRAME LINES */
.partners { position: relative; }
.partners::before,
.partners::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  pointer-events: none;
}
.partners::before { top: 0; background: linear-gradient(90deg, transparent, rgba(10,13,9,.1) 40%, rgba(10,13,9,.1) 60%, transparent); }
.partners::after  { bottom: 0; background: linear-gradient(90deg, transparent, rgba(10,13,9,.1) 40%, rgba(10,13,9,.1) 60%, transparent); }

/* 34. MOBILE OVERRIDES */
@media (max-width: 768px) {
  /* Stats grid */
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem;
    gap: 0;
    text-align: center;
  }
  .hero__stat { align-items: center; }
  .hero__stat-sep { display: none; }
  .hero__stat-num { font-size: 1.15rem; }
  .hero__stat-lbl { font-size: .58rem; }

  /* Hero badge centered */
  .hero__badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    animation: none;
    width: max-content;
    bottom: 1rem;
  }

  /* Touch targets */
  .mobile-nav a { padding: 1rem 0; min-height: 52px; display: flex; align-items: center; }

  /* Component padding */
  .scard { padding: 2rem 1.5rem; }
  .tcard { padding: 2rem 1.5rem 1.5rem; }
  .cmethod { min-height: 56px; }

  /* Section breathing room */
  .services, .about, .testimonials, .contact { padding: 5rem 0 5.5rem; }
}

@media (max-width: 480px) {
  .hero__stat-num { font-size: 1rem; }
  .hero__stat-lbl { font-size: .55rem; }
}

/* ================================================
   EDITORIAL REDESIGN — Full-Screen Hero + Scale
   ================================================ */

/* — HERO: FULLSCREEN BACKGROUND IMAGE — */

/* Kill the glow — image covers it */
.hero::before { display: none; }

/* Constrain content width for readability over image */
.hero__content { max-width: 680px; position: relative; z-index: 1; }

/* Visual column becomes fullscreen background layer */
.hero__visual {
  position: absolute;
  inset: 0;
  z-index: auto; /* no stacking context — children can use z-index relative to .hero */
  display: block;
  align-self: unset;
  pointer-events: none;
  /* override reveal translateY so background doesn't shift on load */
  transform: none !important;
}

/* Image fills entire hero */
.hero__img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  clip-path: none;
  border-radius: 0;
  overflow: hidden;
  /* Vignette: dissolve image edges into dark bg — zero hard cuts */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 10%, black 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 5%, black 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, black 10%, black 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 5%, black 91%, transparent 100%);
  mask-composite: intersect;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es vertical y el hueco del hero es apaisado, asi que cover recorta
     mucho en alto. Al 70% la franja visible pega el ecografo, la pantalla con
     la imagen y la pierna del paciente: se lee que hay un tratamiento en curso.
     Mas arriba solo se ve la maquina; mas abajo se come la pantalla y sobra
     pierna. */
  object-position: center 70%;
  transform: scale(1.04);
}

/* Directional overlay: dark left → reveal right, dark bottom */
.hero__img-tint {
  background:
    linear-gradient(110deg,
      rgba(10,13,9,.97) 0%,
      rgba(10,13,9,.94) 12%,
      rgba(10,13,9,.87) 24%,
      rgba(10,13,9,.74) 36%,
      rgba(10,13,9,.55) 48%,
      rgba(10,13,9,.33) 60%,
      rgba(10,13,9,.14) 74%,
      rgba(10,13,9,.04) 86%,
      rgba(10,13,9,0)   100%
    ),
    linear-gradient(to top,
      rgba(10,13,9,.82) 0%,
      rgba(10,13,9,.3) 18%,
      transparent 32%
    );
}

/* Badge: float in bottom-right of the full hero */
.hero__badge {
  position: absolute;
  bottom: 4rem;
  /* offsetParent es .hero__visual, que hereda el ancho de .container (--max-w).
     Offset simple desde su borde derecho — nada de restar el gutter del viewport. */
  right: 2rem;
  left: auto;
  z-index: 3;
  pointer-events: auto;
}

/* Ring: top-right */
.hero__ring {
  position: absolute;
  top: calc(var(--header-h) + 3rem);
  right: 1.5rem;
  bottom: auto;
  z-index: 2;
}

/* — HERO TYPOGRAPHY — */
.hero__title { margin-bottom: 1.5rem; }
.hero__label { margin-bottom: 1.25rem; }
.hero__actions { margin-bottom: 2.5rem; }

/* Bigger primary WhatsApp CTA */
.hero__actions .btn-wa {
  padding: 1rem 2.25rem;
  font-size: .82rem;
}

/* — SERVICES: INDIVIDUAL CARDS WITH GAP — */

.scard {
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius-md);
  padding: 3rem 2.5rem;
}

/* Reset featured card from grid-level inset to standalone.
   El borde se hace transparente en vez de quitarlo: con border:none la
   tarjeta destacada perdia 1px de caja y su contenido quedaba 1px mas alto
   que el del resto de la fila. El anillo dorado lo pinta el box-shadow. */
.scard--featured {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(251,184,32,.3);
}
.scard--featured:hover {
  box-shadow: inset 0 0 0 1px rgba(251,184,32,.55), inset 0 0 60px rgba(251,184,32,.05);
}

/* — ABOUT: FULL-HEIGHT IMAGE — */
.about__inner  { align-items: stretch; }
.about__visual { display: flex; flex-direction: column; }
.about__img-wrap { flex: 1; min-height: 540px; }
.about__img { height: 100%; }

/* — RESPONSIVE FIXES — */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-h) + 3.5rem);
    padding-bottom: 4.5rem;
  }
  .hero__content { max-width: 100%; }

  /* Stronger overlay on tablet (content full-width) */
  .hero__img-tint {
    background:
      linear-gradient(180deg,
        rgba(10,13,9,.88) 0%,
        rgba(10,13,9,.82) 25%,
        rgba(10,13,9,.65) 50%,
        rgba(10,13,9,.80) 75%,
        rgba(10,13,9,.94) 100%
      );
  }

  /* Badge: center-bottom on tablet.
     El hero pasa a 1 columna, asi que el badge (overlay absoluto) cae encima
     de .hero__stats. Reservamos alto extra abajo y lo bajamos por debajo. */
  .hero__inner { padding-bottom: 11.5rem; }
  .hero__badge {
    bottom: 3rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    animation: none;
    width: max-content;
  }
  .hero__ring { display: none; }

  /* About: restore normal image aspect on tablet */
  .about__img-wrap { min-height: 380px; }
}

@media (max-width: 768px) {
  .hero__title-line { font-size: clamp(3.8rem, 12vw, 5.5rem); }
  /* Espacio reservado para el badge centrado bajo .hero__stats */
  .hero__inner { padding-bottom: 10.5rem; }

  /* Badge: truly centered */
  .hero__badge {
    left: 50%;
    transform: translateX(-50%);
    bottom: 3rem;
  }

  /* Service cards mobile */
  .scard { padding: 2.25rem 1.75rem; }
  .scard__title { font-size: 1.4rem; }

  /* Mobile hero image: only top/bottom fade, no side clipping */
  .hero__img-wrap {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 90%, transparent 100%);
    -webkit-mask-composite: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 90%, transparent 100%);
    mask-composite: none;
  }
}

@media (max-width: 480px) {
  .hero__title-line { font-size: clamp(3.2rem, 14vw, 4.5rem); }
  .hero__badge { bottom: 3rem; }
}

/* ================================================
   EXPANSION LAYER — v3 · Pillars · Team · Schedule
   ================================================ */

/* PILLARS */
.pillars {
  background: var(--ink-2);
  padding: 4.5rem 0 5rem;
  border-top: 1px solid rgba(244,239,230,.05);
  border-bottom: 1px solid rgba(244,239,230,.05);
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pillar {
  padding: 2rem 2rem 2.5rem;
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius-md);
  transition: border-color var(--t), background var(--t);
  position: relative;
  overflow: hidden;
}
.pillar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.pillar:hover { border-color: rgba(251,184,32,.18); background: rgba(244,239,230,.018); }
.pillar:hover::after { transform: scaleX(1); }
.pillar__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: rgba(251,184,32,.07);
  border: 1px solid rgba(251,184,32,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 1.5rem;
  margin-top: .5rem;
  transition: background var(--t), border-color var(--t);
}
.pillar:hover .pillar__icon { background: rgba(251,184,32,.12); border-color: rgba(251,184,32,.25); }
.pillar__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: .7rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.pillar__desc {
  font-size: .875rem;
  color: var(--cream-muted);
  line-height: 1.75;
}
@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: 1fr; gap: 1rem; }
  .pillar { padding: 1.5rem; }
}

/* SERVICES — 4-col override */
.services__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.services__grid .scard { padding: 2.25rem 1.75rem; }
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 600px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__grid .scard { padding: 2rem 1.5rem; }
}

/* TEAM SECTION */
.team {
  position: relative;
  background: var(--ink);
  padding: 6rem 0 7rem;
  overflow: hidden;
}
.team .eyebrow { color: var(--gold); }
.team .eyebrow::before { background: var(--gold); }
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.tmember {
  background: var(--ink-2);
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.tmember:hover {
  border-color: rgba(251,184,32,.2);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.tmember--lead {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 220px 1fr;
}
.tmember--lead .tmember__img-wrap { aspect-ratio: unset; height: 100%; min-height: 280px; }
.tmember--lead .tmember__img { height: 100%; }
.tmember__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.tmember__img-wrap--placeholder {
  background: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmember__initials {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: rgba(251,184,32,.3);
  letter-spacing: .1em;
}
.tmember__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .6s var(--ease);
}
.tmember:hover .tmember__img { transform: scale(1.05); }
.tmember__body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.tmember__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: .1rem;
}
.tmember__role {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .8;
  margin-bottom: .4rem;
}
.tmember__bio {
  font-size: .83rem;
  color: rgba(244,239,230,.5);
  line-height: 1.7;
  flex: 1;
  margin-top: .25rem;
}
.tmember__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(244,239,230,.06);
}
.tmember__tag {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(251,184,32,.07);
  border: 1px solid rgba(251,184,32,.15);
  padding: .2rem .6rem;
  border-radius: 2px;
}
@media (max-width: 1100px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .tmember--lead { grid-column: span 2; }
}
@media (max-width: 640px) {
  .team__grid { grid-template-columns: 1fr; }
  .tmember--lead { grid-column: span 1; grid-template-columns: 1fr; }
  .tmember--lead .tmember__img-wrap { height: 260px; }
}

/* SCHEDULE BANNER */
.schedule {
  background: var(--ink-2);
  padding: 4rem 0;
  border-top: 1px solid rgba(244,239,230,.06);
  border-bottom: 1px solid rgba(244,239,230,.06);
}
.schedule__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: center;
}
.schedule__left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.schedule__hours {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.schedule__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.2rem;
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius);
}
.schedule__row--open {
  border-color: rgba(251,184,32,.14);
  background: rgba(251,184,32,.025);
}
.schedule__row--closed { opacity: .38; }
.schedule__day {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,239,230,.5);
}
.schedule__time {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--gold);
  letter-spacing: .05em;
}
.schedule__row--closed .schedule__time { color: rgba(244,239,230,.3); }
.schedule__right {
  padding: 2.5rem 2rem;
  border: 1px solid rgba(244,239,230,.07);
  border-radius: var(--radius-lg);
  background: rgba(244,239,230,.02);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.schedule__cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.schedule__cta-text em { font-style: italic; color: var(--gold); }
.schedule__cta-sub {
  font-size: .875rem;
  color: var(--cream-muted);
  line-height: 1.7;
  max-width: 340px;
}
@media (max-width: 768px) {
  .schedule__inner { grid-template-columns: 1fr; gap: 2rem; }
  .schedule { padding: 3rem 0; }
}

/* EXTRA TESTIMONIALS — 6-card support */
.testimonials__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .testimonials__grid { grid-template-columns: 1fr; } }

/* ================================================
   PATCH LAYER v4 — UX refinements
   ================================================ */

/* 1. HERO STATS — larger, centered, dividers */
.hero__stats {
  gap: 0;
  align-items: stretch;
  padding: 1.4rem 2rem;
}
.hero__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.75rem;
  position: relative;
}
.hero__stat + .hero__stat::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 1px;
  background: rgba(244,239,230,.1);
}
.hero__stat-sep { display: none !important; }
.hero__stat-num {
  font-size: 1.9rem;
  letter-spacing: -.025em;
  line-height: 1;
  margin-bottom: .28rem;
  font-weight: 500;
}
.hero__stat-lbl {
  font-size: .59rem;
  letter-spacing: .14em;
  text-align: center;
  color: rgba(244,239,230,.35);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .hero__stat-num { font-size: 1.45rem; }
  .hero__stat + .hero__stat::before { top: 10%; bottom: 10%; }
}
@media (max-width: 480px) {
  .hero__stats { padding: 1rem; }
  .hero__stat { padding: 0 1rem; }
  .hero__stat-num { font-size: 1.2rem; }
  .hero__stat-lbl { font-size: .54rem; letter-spacing: .1em; }
}

/* 2. HERO BADGE — refined typography */
.hero__badge {
  padding: 1.1rem 1.5rem;
  gap: 1rem;
  min-width: 210px;
}
.hero__badge strong {
  font-size: 1.12rem;
  font-style: italic;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hero__badge span {
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--gold);
  opacity: 1;
  text-transform: uppercase;
}

/* 3. PARTNERS — larger, more visible */
.partners__set {
  gap: 3.5rem;
  padding-right: 3.5rem;
  flex-shrink: 0;
  min-width: max-content;
}
.partners__logos img {
  height: 80px;
  opacity: .8;
  filter: grayscale(.5);
}
.partners__logos img:hover { filter: none; opacity: 1; }

/* 4. TEAM SECTION REDESIGN — Lead + Profile row */
.team__body {
  display: flex;
  flex-direction: column;
}

/* Featured lead — centrado */
.team__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 3.5rem;
  gap: 1.5rem;
}
.team__lead-img {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(251,184,32,.3);
  box-shadow: 0 0 0 6px rgba(251,184,32,.06), 0 20px 50px rgba(10,13,9,.5);
  flex-shrink: 0;
}
.team__lead-img::after { display: none; }
.team__lead-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .7s var(--ease);
}
.team__lead:hover .team__lead-img img { transform: scale(1.06); }
.team__lead-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.team__lead-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -.025em;
  margin: .3rem 0 .2rem;
}
.team__lead-cred {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244,239,230,.32);
}
.team__lead-bio {
  font-size: .9rem;
  color: rgba(244,239,230,.48);
  line-height: 1.78;
  max-width: 520px;
}

/* Separator between lead and profiles */
.team__separator {
  height: 1px;
  background: linear-gradient(to right, var(--gold) 0%, transparent 55%);
  opacity: .16;
  margin: 0 0 3.5rem;
}

/* Profile quintet — cuadrado + círculo + hover reveal */
.team__profiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.tprofile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ink-2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(244,239,230,.06);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.tprofile:hover {
  border-color: rgba(251,184,32,.28);
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}

/* Círculo de foto — centrado en el cuadrado */
.tprofile__photo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(251,184,32,.22);
  box-shadow: 0 0 0 10px rgba(251,184,32,.04);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  z-index: 1;
}
.tprofile:hover .tprofile__photo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}
.tprofile__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* Nombre siempre visible bajo el círculo */
.tprofile__label {
  position: absolute;
  bottom: 1.6rem;
  left: 0; right: 0;
  text-align: center;
  transition: opacity .4s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.tprofile:hover .tprofile__label { opacity: 0; }
.tprofile__label-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -.015em;
  display: block;
}
.tprofile__label-role {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
  display: block;
  margin-top: .25rem;
}

/* Panel de texto — aparece en hover */
.tprofile__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.75rem;
  background: rgba(19,23,16,.97);
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 2;
  gap: .55rem;
}
.tprofile:hover .tprofile__info { opacity: 1; }

.tprofile__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -.02em;
  line-height: 1.1;
  text-align: center;
}
.tprofile__role {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
  text-align: center;
}
.tprofile__bio {
  font-size: 1rem;
  color: rgba(244,239,230,.5);
  line-height: 1.65;
  text-align: center;
  max-width: 100%;
  margin-top: .15rem;
}
.tprofile__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin-top: .3rem;
}
.tprofile__tag {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(251,184,32,.07);
  border: 1px solid rgba(251,184,32,.15);
  padding: .2rem .55rem;
  border-radius: 2px;
}

/* 8a. SECTION HEADER — zero margin where parent gap handles spacing */
.about__content  .section-header,
.contact__info   .section-header,
.schedule__left  .section-header { margin-bottom: 0; }

/* 8. SECTION TITLE — per-section sizing */
.services .section-title  { font-size: clamp(3rem, 5.5vw, 5.2rem); }   /* hero section, max punch */
.about .section-title     { font-size: clamp(2.6rem, 4.5vw, 4.2rem); } /* paired with photo */
.team .section-title      { font-size: clamp(2.6rem, 4.5vw, 4.2rem); } /* section intro */
.schedule .section-title  { font-size: clamp(2.4rem, 4vw, 4rem); }     /* utility section */
.contact .section-title   { font-size: clamp(2.6rem, 4.5vw, 4.2rem); } /* cream bg */

@media (max-width: 960px) {
  .team__profiles { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 580px) {
  .team__profiles { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* Fix: info panel overflow en tarjetas medianas (3-col, 299px) */
@media (max-width: 1200px) and (min-width: 961px) {
  .tprofile__info  { padding: 1rem 1.25rem; gap: .35rem; }
  .tprofile__name  { font-size: 1.4rem; }
  .tprofile__bio   { font-size: .875rem; line-height: 1.55; }
  .tprofile__links { margin-top: .2rem; }
}

/* 5. FIX: TEAM LEAD PHOTO — fade white background edges to transparent via mask */
.team__lead-img img {
  -webkit-mask-image:
    radial-gradient(ellipse 80% 85% at 48% 32%, black 35%, transparent 80%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 80% 85% at 48% 32%, black 35%, transparent 80%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 86%, transparent 100%);
  mask-composite: intersect;
  filter: brightness(0.94) saturate(0.88);
}

/* ══════════════════════════════════════════
   GALLERY — Cinta infinita separadora
   ══════════════════════════════════════════ */
.gallery {
  background: var(--ink);
  border-top:    1px solid rgba(244,239,230,.07);
  border-bottom: 1px solid rgba(244,239,230,.07);
  overflow: hidden;
  user-select: none;
}
.gallery__strip-wrap {
  position: relative;
}
.gallery__strip-wrap::before,
.gallery__strip-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 1;
  pointer-events: none;
}
.gallery__strip-wrap::before { left:  0; background: linear-gradient(to right, var(--ink), transparent); }
.gallery__strip-wrap::after  { right: 0; background: linear-gradient(to left,  var(--ink), transparent); }

.gallery__strip {
  display: flex;
  gap: 6px;
  will-change: transform;
  cursor: grab;
}
.gallery__strip.dragging { cursor: grabbing; }

.gimg {
  position: relative;
  flex: 0 0 auto;
  height: 260px;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink-2);
}
.gimg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform .6s var(--ease);
}
.gallery__strip:not(.dragging) .gimg:hover img { transform: scale(1.04); }
.gimg figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem .9rem .65rem;
  background: linear-gradient(to top, rgba(10,13,9,.8), transparent);
  color: rgba(244,239,230,.75);
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.gallery__strip:not(.dragging) .gimg:hover figcaption { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .gimg { height: 200px; }
}

/* ══════════════════════════════════════════
   MAP — Address overlay card
   ══════════════════════════════════════════ */
.contact__map-card {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  background: rgba(10,13,9,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(251,184,32,.22);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 210px;
  max-width: 270px;
}
.map-card__addr {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.map-card__addr svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.map-card__addr strong {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: .25rem;
}
.map-card__addr span {
  display: block;
  font-size: .72rem;
  color: rgba(244,239,230,.48);
  line-height: 1.55;
}
.map-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .55rem 1rem;
  border-radius: 5px;
  transition: background var(--t), transform var(--t);
}
.map-card__btn:hover { background: var(--gold-dark); transform: translateY(-1px); }

/* ══════════════════════════════════════════
   SERVICE ICONS — Micro-animations on hover
   ══════════════════════════════════════════ */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
.scard:hover .scard__icon {
  opacity: 1;
}
.scard:hover .scard__icon svg {
  animation: iconFloat 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(251,184,32,.45));
}

/* ══════════════════════════════════════════
   TEAM — Profile external links
   ══════════════════════════════════════════ */
.tprofile__links {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .6rem;
}
.tprofile__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,239,230,.4);
  border-bottom: 1px solid rgba(244,239,230,.14);
  padding-bottom: .15rem;
  transition: color var(--t), border-color var(--t);
}
.tprofile__link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ══════════════════════════════════════════
   LIGHTBOX — Gallery fullscreen viewer
   ══════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5,7,5,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(88vw, 1160px);
  max-height: 90vh;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(90vh - 3.5rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 40px 90px rgba(0,0,0,.65);
  transition: opacity .18s;
  display: block;
}
.lightbox__img.loading { opacity: .35; }
.lightbox__caption {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,239,230,.35);
  margin-top: .85rem;
  text-align: center;
  min-height: 1em;
}
.lightbox__counter {
  position: fixed;
  top: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: rgba(244,239,230,.3);
  pointer-events: none;
}
.lightbox__close {
  position: fixed;
  top: 1.1rem;
  right: 1.4rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(244,239,230,.06);
  border: 1px solid rgba(244,239,230,.12);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), border-color var(--t);
  cursor: pointer;
  z-index: 1;
}
.lightbox__close:hover {
  background: rgba(244,239,230,.13);
  border-color: rgba(244,239,230,.28);
}
.lightbox__prev,
.lightbox__next {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(244,239,230,.05);
  border: 1px solid rgba(244,239,230,.1);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t), color var(--t);
  cursor: pointer;
}
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(244,239,230,.1);
  border-color: var(--gold);
  color: var(--gold);
}

@media (max-width: 640px) {
  .lightbox { gap: 0; }
  .lightbox__prev,
  .lightbox__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    background: rgba(5,7,5,.7);
  }
  .lightbox__prev { left: .5rem; }
  .lightbox__next { right: .5rem; }
  .lightbox__stage { max-width: 82vw; }
}

/* Gallery images: cursor zoom-in (custom cursor disabled via hover:none on touch) */
@media (hover: hover) {
  .gallery__strip:not(.dragging) .gimg { cursor: zoom-in; }
}

/* ══════════════════════════════════════════
   MOBILE — Comprehensive responsive polish
   Tested: iPhone 14 Pro (390×844)
   ══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* — HERO — */

  /* Tint: horizontal gradient → vertical (text siempre arriba en móvil) */
  .hero__img-tint {
    background:
      linear-gradient(to bottom,
        rgba(10,13,9,.90) 0%,
        rgba(10,13,9,.60) 30%,
        rgba(10,13,9,.42) 52%,
        rgba(10,13,9,.68) 78%,
        rgba(10,13,9,.92) 100%
      ),
      linear-gradient(to right,
        rgba(10,13,9,.70) 0%,
        rgba(10,13,9,.22) 55%,
        transparent 100%
      );
  }

  /* Mask: fade left menos agresivo para ver más imagen en móvil */
  .hero__img-wrap {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, black 15%, black 100%),
      linear-gradient(to bottom, transparent 0%, black 6%, black 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, black 15%, black 100%),
      linear-gradient(to bottom, transparent 0%, black 6%, black 86%, transparent 100%);
    mask-composite: intersect;
  }

  /* Badge: alejar del botón WA flotante (right: 80px) */
  .hero__badge {
    right: 5.5rem;
    bottom: 2.5rem;
  }

  /* — TEAM: foto sube para dejar espacio al nombre — */
  .tprofile__photo { top: 33%; width: 54%; }

  /* — SECTION TÍTULOS: reducir tamaño mínimo — */
  .services   .section-title { font-size: clamp(1.9rem, 7vw, 3.2rem); }
  .about      .section-title { font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .team       .section-title { font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .contact    .section-title { font-size: clamp(1.9rem, 6vw, 2.8rem); }

  /* — SECTION-NUM: ghost number más pequeño — */
  .section-num { font-size: clamp(3.5rem, 16vw, 5rem); }

  /* — SECTION PADDING: reducir espacio vertical — */
  .pillars      { padding: 3rem 0 3.5rem; }
  .services     { padding: 3.5rem 0 4rem;  }
  .about        { padding: 3.5rem 0 4rem;  }
  .team         { padding: 3.5rem 0 4rem;  }
  .testimonials { padding: 3.5rem 0 4rem;  }
  .schedule     { padding: 3rem 0;         }
  .contact      { padding: 3.5rem 0 4rem;  }

  /* — SECTION HEADER — */
  .section-header { gap: .75rem; margin-bottom: 2rem; }
  .section-header__text { gap: .3rem; }

  /* — FOOTER — */
  .footer          { padding-top: 3rem; }
  .footer__grid    { gap: 1.5rem; padding-bottom: 2.25rem; }
  .footer__brand p { font-size: .82rem; max-width: 100%; margin-bottom: .85rem; }
  .footer__brand img { margin-bottom: .6rem; }
  .footer__col h4  { margin-bottom: .75rem; }
  .footer__col ul  { gap: .45rem; }
  .footer__col ul a { font-size: .82rem; }
}

/* — Teléfonos muy pequeños (≤ 480px) — */
@media (max-width: 480px) {

  /* Hero title: un poco más pequeño */
  .hero__title-line { font-size: clamp(2.5rem, 9vw, 3.6rem); }

  /* Hero sub: menos máximo */
  .hero__sub { font-size: 1rem; }

  /* Footer: brand full-width, services + clínica en 2 columnas */
  .footer__grid         { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .footer__brand        { grid-column: 1 / -1; }
  .footer__col:last-child { grid-column: 1 / -1; }

  /* Testimonials rating pill: más compacto */
  .testimonials__rating { padding: .75rem 1.25rem; flex-wrap: wrap; gap: .4rem; }
  .testimonials__score  { font-size: 2.25rem; line-height: 1; }
  .testimonials__stars  { font-size: 1rem; }

  /* Schedule: título más pequeño */
  .schedule .section-title { font-size: clamp(1.75rem, 6vw, 2.6rem); }

  /* Pillar cards: padding más ajustado */
  .pillar { padding: 1.25rem 1rem; }
}


/* ================================================
   FOOTER — FINANCIACION PUBLICA (FEADER / LEADER)
   ================================================ */

/* La tira de logos institucionales es un requisito de la ayuda: tiene que
   verse y no se puede recolorear, invertir ni recortar. El JPG original trae
   fondo blanco y texto azul oscuro, asi que en vez de pelearse con el footer
   oscuro se le da un panel claro propio. */
.footer__funding {
  padding: 2.5rem 0 .5rem;
  border-top: 1px solid rgba(244,239,230,.07);
}

.footer__funding-panel {
  /* 880px: la leyenda "Fondo Europeo Agricola de Desarrollo rural..." va en
     cuerpo pequeno dentro del JPG y por debajo de este ancho deja de leerse. */
  max-width: 880px;
  margin: 0 auto;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border-radius: var(--radius-md);
  /* Sin sombra dura: el panel ya destaca sobre el fondo oscuro. */
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.footer__funding-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .footer__funding { padding: 2rem 0 .25rem; }
  .footer__funding-panel { padding: .9rem 1rem; }
}

@media (max-width: 480px) {
  .footer__funding-panel { padding: .75rem .8rem; }
}

/* ================================================
   TEAM — TARJETAS DE PERFIL EN TACTIL (TAP TO EXPAND)
   ================================================ */

/* El reveal de los perfiles se disena para hover: la foto se desvanece y el
   panel de texto ocupa el cuadrado. En tactil no hay hover — el navegador deja
   el :hover pegado tras el tap — y el panel aparece dentro de una tarjeta de
   160x160 con el nombre a 28px y una bio que necesita 666px de alto. Resultado:
   texto ilegible recortado.
   Aqui se anula el hover y se sustituye por un toggle explicito: al tocar, la
   tarjeta ocupa la fila entera y crece hasta lo que pida el texto; al volver a
   tocar, vuelve a su cuadrado. */
@media (hover: none) {

  /* 1. Neutralizar el hover heredado */
  .tprofile:hover .tprofile__photo { opacity: 1; transform: translate(-50%, -50%); }
  .tprofile:hover .tprofile__label { opacity: 1; }
  .tprofile:hover .tprofile__info  { opacity: 0; }
  .tprofile:hover { border-color: rgba(244,239,230,.06); box-shadow: none; }

  /* 2. La tarjeta es un control: hay que verlo */
  .tprofile {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tprofile::after {
    content: '';
    position: absolute;
    top: .7rem; right: .7rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    background:
      linear-gradient(var(--gold), var(--gold)) center / 9px 1.5px no-repeat,
      linear-gradient(var(--gold), var(--gold)) center / 1.5px 9px no-repeat,
      rgba(251,184,32,.12);
    opacity: .75;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
    z-index: 3;
    pointer-events: none;
  }
  /* La barra vertical desaparece bajo rotacion: de "+" a "x" girado */
  .tprofile.is-open::after { transform: rotate(135deg); opacity: 1; }

  /* 3. Estado abierto */
  .tprofile.is-open {
    grid-column: 1 / -1;
    aspect-ratio: auto;          /* el alto lo manda el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-color: rgba(251,184,32,.28);
    box-shadow: 0 12px 48px rgba(0,0,0,.35);
  }

  /* La foto deja de ser overlay y encabeza la ficha */
  .tprofile.is-open .tprofile__photo {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 104px;
    margin: 1.6rem 0 0;
    opacity: 1;
    flex: none;
  }
  .tprofile.is-open .tprofile__label { display: none; }

  /* El panel pasa a flujo normal: su alto define el de la tarjeta */
  .tprofile.is-open .tprofile__info {
    position: static;
    opacity: 1;
    background: none;
    padding: 1rem 1.35rem 1.7rem;
    gap: .45rem;
  }
  .tprofile.is-open .tprofile__name { font-size: 1.5rem; }
  .tprofile.is-open .tprofile__role { font-size: .66rem; }
  .tprofile.is-open .tprofile__bio  { font-size: .9rem; line-height: 1.6; max-width: 46ch; }
}

/* Sin animaciones: el toggle sigue funcionando, solo que sin transicion */
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .tprofile::after { transition: none; }
}

/* Tarjeta cerrada en movil: con 2 columnas la tarjeta baja a ~160px y la foto
   (54% del cuadrado) y el nombre (1.4rem, que ahi rompe en 2-3 lineas) se
   pisaban — el nombre caia literalmente encima de la cara. Se encoge la foto,
   se sube, y la etiqueta baja con tipografia proporcionada al cuadrado. */
@media (max-width: 640px) {
  .tprofile__photo { top: 34%; width: 44%; }

  .tprofile__label {
    bottom: .9rem;
    padding: 0 .4rem;
  }
  .tprofile__label-name { font-size: .95rem; line-height: 1.15; }
  .tprofile__label-role {
    font-size: .52rem;
    letter-spacing: .1em;
    line-height: 1.3;
    margin-top: .2rem;
  }
}

/* ================================================
   SCHEDULE — ATENCIÓN TELEFÓNICA
   ================================================ */

/* La clínica abre 8-21 en jornada continua, pero el teléfono solo se atiende
   en dos franjas. Se muestra aparte de las filas de apertura: mezclarlo daría
   a entender que la clínica cierra a mediodía, que no es el caso. */
.schedule__phone {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: .85rem;
  padding: .8rem 1.2rem;
  border: 1px dashed rgba(244,239,230,.12);
  border-radius: var(--radius);
}
.schedule__phone-label {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,239,230,.42);
}
.schedule__phone-slots {
  font-size: .72rem;
  letter-spacing: .05em;
  color: rgba(244,239,230,.72);
  white-space: nowrap;
}
.schedule__phone-sep {
  color: rgba(251,184,32,.5);
  margin: 0 .5rem;
}

@media (max-width: 420px) {
  .schedule__phone { flex-direction: column; align-items: flex-start; }
}

/* ================================================
   SERVICE CARDS — BADGE FUERA DEL FLUJO
   ================================================ */

/* El badge era un inline-block con margin-bottom, asi que empujaba icono,
   titulo y descripcion ~41px hacia abajo: las dos tarjetas destacadas
   ("Tecnología Avanzada" y "Lo que nos diferencia") quedaban con el texto
   desalineado respecto a las otras seis.
   Se saca del flujo y se ancla al borde superior izquierdo, dentro del
   padding de la tarjeta (2.5rem arriba), donde no pisa el icono ni el numero
   fantasma. El contenido de las 8 tarjetas arranca ahora a la misma altura. */
.scard__badge {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0;
  padding: .32rem .75rem;
  font-size: .56rem;
  letter-spacing: .13em;
  border-radius: 0 0 3px 0;
  z-index: 2;
}

/* Mientras la rejilla tiene mas de una columna, unos titulos rompen en dos
   lineas y otros no ("Ecografía" y "Rehabilitación" son los cortos), asi que
   la descripcion arrancaba 29px mas arriba en unas tarjetas que en otras.
   Se reserva el alto de dos lineas para que el cuerpo de texto empiece a la
   misma altura en las ocho.
   Se aplica a todo el rango multicolumna y no solo a los anchos donde hoy se
   parte el texto: los titulos los edita el cliente, y una banda de anchos
   afinada a mano se rompe en cuanto cambia una palabra.
   Por debajo de 600px hay una sola columna y no hay nada que alinear. */
@media (min-width: 601px) {
  .scard__title { min-height: 2.4em; }   /* 2 x line-height 1.2 */
}

/* Con 7 miembros la rejilla de 3 columnas deja la ultima tarjeta sola en su
   fila, pegada a la izquierda, como si faltara contenido. Se centra.
   El :not(.is-open) es necesario porque esta regla tiene mas especificidad
   que la de la tarjeta abierta en tactil, que necesita ocupar la fila entera.
   Por debajo de 960px la rejilla pasa a 2 columnas y la huerfana ya ocupa la
   mitad del ancho, ahi no desentona. */
@media (min-width: 961px) {
  .tprofile:last-child:nth-child(3n + 1):not(.is-open) { grid-column: 2; }
}

/* En el extremo estrecho de la rejilla de 3 columnas (961-1080px) la tarjeta
   baja a ~278px de lado y el panel de hover se sale: las bios mas largas
   (Adrián, Pelayo, Saúl) piden hasta 301px de alto. Se aprieta un paso mas
   sobre el ajuste que ya habia para 961-1200. */
@media (min-width: 961px) and (max-width: 1080px) {
  .tprofile__info { padding: .8rem 1rem; gap: .25rem; }
  .tprofile__name { font-size: 1.2rem; }
  .tprofile__role { font-size: .6rem; letter-spacing: .12em; }
  .tprofile__bio  { font-size: .76rem; line-height: 1.42; }
  .tprofile__tag  { font-size: .56rem; padding: .12rem .4rem; }
  .tprofile__link { font-size: .58rem; }
}

/* ================================================
   PARTNERS — VELOCIDAD Y BUCLE DE LA CINTA
   ================================================ */

/* .partners__logos es un contenedor flex de nivel bloque: su caja adoptaba el
   ancho del padre (el viewport) mientras los 4 sets, con flex-shrink:0, se
   desbordaban. El translateX(-50%) de la animacion es relativo a esa caja, no
   al contenido, asi que la cinta recorria medio viewport en 30s en vez de dos
   sets: 23,8 px/s en escritorio pero 6,9 px/s en un movil de 430px. De ahi que
   se arrastrara en el movil. Ademas el bucle no cuadraba con el contenido y
   daba un salto al reiniciar.
   Con width: max-content la caja mide lo que miden los 4 sets, -50% vuelve a
   ser exactamente 2 sets (juntura invisible) y la velocidad deja de depender
   del ancho de pantalla. */
.partners__logos {
  width: max-content;
}

/* 2 sets = 2448px. A 100s son ~24,5 px/s, la misma velocidad que tenia en
   escritorio hasta ahora — lo que cambia es que el movil ya va igual. */
.partners__logos {
  animation-duration: 100s;
}