/* ═══════════════════════════════════════════════
   Piel y Láser · Dr. Edward Sánchez
   styles.css — Estilos principales
   ═══════════════════════════════════════════════ */

@font-face { font-family:'BigShoulders'; src:url('../public/fonts/BigShoulders-Bold.ttf'); font-weight:900; font-display:swap; }
@font-face { font-family:'Jura';         src:url('../public/fonts/Jura-Medium.ttf');       font-weight:500; font-display:swap; }
@font-face { font-family:'GeistMono';    src:url('../public/fonts/GeistMono-Regular.ttf'); font-weight:400; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:        #ffffff;
  --dark:         #484849;
  --gray-d:       #3a3a3c;
  --gray-m:       #6c6c70;   /* era #9c9ca0 — mejorado a 5.1:1 contraste WCAG AA */
  --gray-l:       #c8c8cc;
  --gray-bg:      #f5f5f7;
  --gray-bg2:     #ebebed;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

html {
  scroll-behavior: smooth;
  /* Compensa la nav fija al navegar a anclas (#seccion) desde otra página.
     El valor coincide con la altura del nav en cada breakpoint.          */
  scroll-padding-top: 104px;
}
@media (max-width: 960px) { html { scroll-padding-top: 92px;  } }
@media (max-width: 768px) { html { scroll-padding-top: 82px;  } }
@media (max-width: 430px) { html { scroll-padding-top: 74px;  } }
@media (max-width: 390px) { html { scroll-padding-top: 60px;  } }
@media (max-width: 360px) { html { scroll-padding-top: 56px;  } }
body { font-family: var(--font); color: var(--dark); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }


/* ══════════════════════════════════════════════════════════
   NAV — sistema de diseño definitivo
   ══════════════════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 100px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  display: flex; align-items: center;
}
.nav-in {
  max-width: 1240px; margin: 0 auto; width: 100%;
  padding: 0 32px;
  display: flex; align-items: center; gap: 20px;
}

/* ── Bloque de marca — flip card ── */
.nav-brand {
  display: flex; align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Flip card desktop — sobreescribe brand.css si hace falta */
.brand-flipcard {
  width: 340px;
  height: 92px;
}

/* Ocultar separador viejo si quedara en algún template */
.nav-sep { display: none; }

/* ── BRAND COMBO — badge circular + wordmark visibles al mismo tiempo ── */
.brand-combo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-combo-badge {
  display: block;
  height: 82px;
  width: 82px;
  max-height: 82px;
  max-width: 82px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.18)) drop-shadow(0 0 1px rgba(0,0,0,.1));
  transition: filter .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}

.brand-combo:hover .brand-combo-badge {
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(74,126,255,.18));
  transform: scale(1.07) rotate(-2deg);
}

.brand-combo-wordmark {
  display: block;
  height: auto;
  max-height: 48px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}

.brand-combo:hover .brand-combo-wordmark {
  transform: translateX(3px);
  opacity: .85;
}

/* ── HERO BRAND MARK — logo metálico prominente encima del titular ── */
.hero-brand-mark {
  margin-bottom: 28px;
}

.hero-brand-img {
  display: block;
  max-height: 96px;
  width: auto;
  max-width: 420px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 28px rgba(74,126,255,.22)) drop-shadow(0 2px 12px rgba(255,255,255,.08));
  transition: filter .4s ease;
}

.hero-brand-img:hover {
  filter: drop-shadow(0 0 40px rgba(74,126,255,.35)) drop-shadow(0 2px 16px rgba(255,255,255,.12));
}

/* ── Links centrados con flex:1 ── */
.nav-links {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 2px; list-style: none;
}
.nav-links { gap: 6px; }

.nav-links a {
  background: #ffffff;
  color: #1a1a1a;
  font-size: 12.5px; font-weight: 500;
  padding: 7px 15px;
  border-radius: 980px;
  border: 1.5px solid #d0d0d0;
  display: block; white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease;
  will-change: transform;
}
/* Brillo que cruza al hacer hover */
.nav-links a::after {
  content: '';
  position: absolute;
  top: -10%; left: -80%;
  width: 55%; height: 120%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  transform: skewX(-15deg);
  transition: left .5s ease;
  pointer-events: none;
  z-index: 1;
}
.nav-links a:hover::after {
  left: 140%;
}
.nav-links a:hover,
.nav-links a.active {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
  transform: scale(1.09);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

.nav-right { display: flex; gap: 10px; align-items: center; }
.btn-ghost {
  font-size: 13px; font-weight: 500; color: var(--dark);
  border: 1.5px solid var(--gray-l); border-radius: 980px;
  padding: 6px 16px; transition: border-color .2s;
}
.btn-ghost:hover { border-color: var(--dark); }
.btn-wa {
  font-size: 13px; font-weight: 600; color: var(--white);
  background: #25D366; border-radius: 980px;
  padding: 7px 18px; display: flex; align-items: center; gap: 7px;
  transition: background .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(37,211,102,0.25);
}
.btn-wa:hover {
  background: #1fba59;
  box-shadow: 0 4px 20px rgba(37,211,102,0.38);
}
.btn-wa svg { width: 15px; height: 15px; fill: white; flex-shrink: 0; }


/* ── HERO ────────────────────── */
.hero {
  margin-top: 100px;
  background: #06070c;
  min-height: 74vh;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

/* ── Hero panel izquierdo: shapes geométricas + texto ── */
.hero-panel-left {
  flex: 0 0 55%;
  position: relative;
  background: #06070c;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 74vh;
  padding: 64px 52px;
}

/* ── Contenido: sobre las formas ── */
.hero-content-overlay {
  position: relative;
  z-index: 4;
  max-width: 480px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   HERO GEOMETRIC SHAPES
   Adaptado de shape-landing-hero.tsx (framer-motion → CSS puro)
   ══════════════════════════════════════════════════════ */

/* Contenedor absolute de todas las formas */
.hero-shapes-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Gradiente ambiental indigo/rose (original bg-gradient-to-br) */
.hero-shapes-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 15% 50%, rgba(99,102,241,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(244,63,94,0.06) 0%, transparent 60%);
}

/* Fade superior e inferior (como original from-[#030303] via-transparent to-[#030303]/80) */
.hero-shapes-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6,7,12,0.75) 0%,
    transparent 25%,
    transparent 70%,
    rgba(6,7,12,0.75) 100%
  );
}

/* ── Keyframe: entrada (opacity 0→1 + translateY -150→0 + rotate ajuste) ── */
@keyframes hs-entry {
  from {
    opacity: 0;
    transform: translateY(-150px) rotate(calc(var(--rot, 0deg) - 15deg));
  }
  to {
    opacity: 1;
    transform: translateY(0px) rotate(var(--rot, 0deg));
  }
}

/* ── Keyframe: flotación continua ── */
@keyframes hs-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(15px); }
}

/* ── Shape outer wrapper: maneja entrada + rotación final ── */
.hs {
  position: absolute;
  will-change: transform, opacity;
  animation: hs-entry 2.4s cubic-bezier(0.23, 0.86, 0.39, 0.96) both;
  animation-delay: var(--delay, 0s);
}

/* ── Shape inner: maneja el float infinito ── */
.hs-inner {
  position: relative;
  will-change: transform;
  animation: hs-float 12s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── Píldora visual: bordes, blur, sombra, radial overlay ── */
.hs-pill {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Overlay radial sobre cada píldora */
.hs-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 70%);
}

/* ── Hero panel derecho: Galería 3D infinita — fondo blanco ── */
.hero-panel-right {
  flex: 0 0 45%;
  position: relative;
  background: #f5f5f7;
  overflow: hidden;
  min-height: 74vh;
}
.hero-panel-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,7,12,0.14) 0%, transparent 16%);
  z-index: 2;
  pointer-events: none;
}
#hero-gallery-mount {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Banner full width */
.hero-banner-mode {
  display: block !important;
  height: auto !important;
  min-height: unset !important;
  background: #06070c;
  padding: 0;
}

.hero-banner-mode .hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

/* Overlay de texto sobre la galería */
.hero-gallery-overlay {
  position: absolute;
  bottom: 32px;
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.hero-gallery-label {
  font-family: 'GeistMono', monospace;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(60,60,70,0.50);
  margin-bottom: 5px;
}
.hero-gallery-hint {
  font-size: 11px;
  color: rgba(60,60,70,0.32);
  letter-spacing: 0.05em;
}

/* ── Mouse-tracking spotlight (sigue el cursor) ── */
.hero-mouse-spot {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.88) 0%,
    rgba(255,255,255,0.35) 28%,
    rgba(255,255,255,0.06) 58%,
    transparent 72%);
  filter: blur(32px);
  /* transform centrado se aplica desde JS vía translate() compuesto */
  left: 0; top: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;    /* transform es GPU-compositable; left/top forzaban layout */
}

/* ── Spotlight SVG sweep ── */
@keyframes animate-spotlight {
  0%   { opacity: 0; transform: translate(-72%, -62%) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%, -40%) scale(1); }
}
.hero-spotlight {
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  height: 169%; width: 138%;
  opacity: 0;
  animation: animate-spotlight 2.2s cubic-bezier(.22,.68,0,1) 0.4s forwards;
}
@media (min-width: 1024px) {
  .hero-spotlight { width: 84%; left: 55%; }
}

/* ── Animaciones de entrada del hero ── */
@keyframes hero-fade-down {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-anim-down {
  animation: hero-fade-down 0.8s cubic-bezier(.22,.68,0,1.2) both;
}
.hero-anim-up {
  animation: hero-fade-up 0.9s cubic-bezier(.22,.68,0,1.2) both;
  opacity: 0;
}
.hero-delay-1 { animation-delay: 0.15s; }
.hero-delay-2 { animation-delay: 0.32s; }
.hero-delay-3 { animation-delay: 0.50s; }
.hero-delay-4 { animation-delay: 0.70s; }
.hero-delay-5 { animation-delay: 0.90s; }

.hero-left { max-width: 560px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  padding: 5px 14px; border-radius: 980px;
  margin-bottom: 28px;
}
.hero-badge span { width: 6px; height: 6px; background: #25D366; border-radius: 50%; flex-shrink: 0; }
.hero h1 {
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 800; letter-spacing: -2px; line-height: 1.05;
  background: linear-gradient(to bottom, #fafafa 30%, #a3a3a3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(to bottom, #d4d4d4 20%, #737373 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 17px; color: rgba(255,255,255,0.75); line-height: 1.65;
  margin-bottom: 40px; max-width: 440px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  font-size: 15px; font-weight: 600; color: #ffffff;
  background: transparent;
  border: 2px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 980px;
  padding: 13px 26px; display: inline-flex; align-items: center; gap: 9px;
  transition: transform .15s;
}
.btn-primary:hover {
  transform: scale(1.02);
}
.btn-primary svg { width: 17px; fill: white; }
.btn-secondary {
  font-size: 15px; font-weight: 500; color: var(--dark);
  border: 1.5px solid var(--gray-l); border-radius: 980px;
  padding: 13px 26px; transition: border-color .2s;
}
.btn-secondary:hover { border-color: var(--dark); }

.hero-right {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 460px;
}
.hero-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px; padding: 24px 26px;
  transition: border-color .3s, background .3s;
}
.hero-card:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
}
.hero-card-tag { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.hero-card-title { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 6px; }
.hero-card-text { font-size: 15px; color: rgba(255,255,255,0.62); line-height: 1.55; }
.hero-card-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hpill { font-size: 12px; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.20); background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 980px; }


/* El footer nunca participa del scroll-3d */
footer { opacity: 1 !important; transform: none !important; }

/* ── STATS STRIP ─────────────── */
/* ── Scroll 3D Container Reveal (inspirado en ContainerScroll / framer-motion) ── */
.scroll-3d {
  transform-origin: center top;
  will-change: transform, opacity;
  transform: perspective(900px) rotateX(32deg) scale(0.88) translateY(70px);
  opacity: 0;
  transition: transform 0.05s linear, opacity 0.05s linear;
}
.scroll-3d.in-view {
  transform: perspective(900px) rotateX(0deg) scale(1) translateY(0px);
  opacity: 1;
  transition: transform 1s cubic-bezier(.22,.68,0,1.08), opacity 0.75s ease;
}

.stats { background: var(--gray-bg); border-top: 1px solid var(--gray-l); border-bottom: 1px solid var(--gray-l); }
.stats-in {
  max-width: 1120px; margin: 0 auto;
  padding: 40px 28px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; text-align: center;
}
.stat-n { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; color: var(--dark); line-height: 1; }
.stat-l { font-size: 13px; color: var(--gray-m); margin-top: 6px; }


/* ── SECTION UTIL ─────────────── */
.sec { padding: 96px 28px; }
.sec-in { max-width: 1120px; margin: 0 auto; }
.sec-gray { background: var(--gray-bg); }
.sec-dark { background: var(--dark); }
.sec-head { text-align: center; margin-bottom: 64px; }
.sec-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-m);
  margin-bottom: 12px;
}
.sec-eyebrow.light { color: #86868b; }
.sec-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; color: var(--dark);
}
.sec-title.light { color: var(--white); }
.sec-body {
  font-size: 17px; color: var(--gray-m); line-height: 1.6;
  max-width: 520px; margin: 14px auto 0;
}
.sec-body.light { color: #86868b; }
.divider { border: none; border-top: 1px solid var(--gray-l); max-width: 1120px; margin: 0 auto; }
.divider-dark { border-top-color: rgba(255,255,255,.08); }


/* ── FEATURE ALTERNATING ─────── */
.feat-block {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  padding: 72px 28px;
}
.feat-block.flip .feat-visual { order: -1; }
.feat-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-m); margin-bottom: 16px;
}
.feat-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700; letter-spacing: -0.3px; line-height: 1.15;
  color: var(--dark); margin-bottom: 16px;
}
.feat-title.light { color: var(--white); }
.feat-text { font-size: 16px; color: var(--gray-m); line-height: 1.7; margin-bottom: 28px; }
.feat-text.light { color: #86868b; }
.feat-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.feat-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--gray-d); }
.feat-item.light { color: #aeaeb2; }
.feat-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--dark); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0; margin-top: 1px;
}
.feat-check.light { background: rgba(255,255,255,.15); }
.feat-link {
  font-size: 14px; font-weight: 600; color: var(--dark);
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1.5px solid var(--dark); padding-bottom: 2px;
}
.feat-link.light { color: var(--white); border-color: var(--white); }

/* ══════════════════════════════════════════════════════════════
   DOCTOR 3D FEATURE CAROUSEL
   Adaptado de feature-carousel.tsx (React → CSS + JS puro)
   perspective + rotateY + scale + blur = efecto apilado 3D
   ══════════════════════════════════════════════════════════════ */
.doc-fc-wrap {
  position: relative;
  width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;        /* permite que las tarjetas adyacentes asomen */
}

.doc-fc-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;      /* crea el espacio 3D */
}

/* Cada tarjeta (foto del doctor) */
.doc-fc-item {
  position: absolute;
  width: 185px;
  height: 330px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
  /* Las transiciones animan todos los cambios de estado */
  transition: transform 0.5s ease,
              opacity   0.5s ease,
              filter    0.5s ease,
              box-shadow 0.5s ease;
  will-change: transform, opacity, filter;
}

.doc-fc-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Botones prev / next */
.doc-fc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  color: var(--dark);
}
.doc-fc-btn:hover {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transform: translateY(-50%) scale(1.08);
}
.doc-fc-prev { left: 6px; }
.doc-fc-next { right: 6px; }

.feat-visual {
  background: var(--gray-bg2);
  border-radius: 20px;
  aspect-ratio: 4/3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 32px;
  border: 1px solid var(--gray-l);
}
.feat-visual.dark-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.feat-visual-icon { width: 64px; height: 64px; opacity: .18; }
.feat-visual-icon svg { width: 64px; height: 64px; stroke: var(--dark); fill: none; stroke-width: 1.2; }
.feat-visual.dark-card .feat-visual-icon svg { stroke: var(--white); }
.feat-visual-label { font-size: 13px; color: var(--gray-m); text-align: center; line-height: 1.5; }
.feat-visual.dark-card .feat-visual-label { color: #555558; }
.feat-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.fpill { font-size: 12px; padding: 5px 13px; border-radius: 980px; border: 1px solid var(--gray-l); color: var(--gray-d); }
.fpill.dp { border-color: rgba(255,255,255,.15); color: var(--gray-l); }


/* ── TABS ─────────────────────── */
.tabs-wrap { max-width: 1120px; margin: 0 auto; }
.tab-nav {
  display: flex; border-bottom: 1px solid var(--gray-l);
  margin-bottom: 48px; gap: 0; width: 100%;
}
.tab-btn {
  flex: 1; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--gray-m);
  padding: 14px 28px; border: none; background: none;
  cursor: pointer; border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s, background .2s, transform .18s cubic-bezier(.34,1.56,.64,1);
  border-radius: 8px 8px 0 0;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn.active, .tab-btn:hover { color: var(--dark); }
.tab-btn:hover { background: var(--gray-bg); transform: scale(1.04); }
.tab-btn.active { border-bottom-color: var(--dark); background: none; transform: none; }
.tab-btn:active { transform: scale(0.97); background: var(--gray-bg2); }
.tab-panel { display: none; }
.tab-panel.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#tab2.active { grid-template-columns: repeat(4, 1fr); }
.tab-card {
  background: var(--gray-bg); border-radius: 16px; padding: 28px 26px;
  border: 1px solid transparent; transition: border-color .25s, transform .25s;
}
.tab-card:hover { border-color: var(--gray-l); transform: translateY(-2px); }
.tab-card-icon {
  width: 36px; height: 36px; background: var(--dark); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.tab-card-icon svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 1.8; }
.tab-card-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.tab-card-text { font-size: 13px; color: var(--gray-m); line-height: 1.6; }

/* Tab card con imagen arriba */
.tab-card-img { padding: 0; overflow: hidden; }
.tab-card-dark { border: 1.5px solid var(--dark); }
.tab-card-photo {
  width: 100%; aspect-ratio: 3/2;
  background: var(--gray-bg2); overflow: hidden;
}
.tab-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tab-card-img .tab-card-title,
.tab-card-img .tab-card-text { padding: 0 20px; }
.tab-card-img .tab-card-title { padding-top: 12px; font-size: 14px; }
.tab-card-img .tab-card-text  { padding-bottom: 14px; font-size: 12px; }

/* ── Image Gallery Accordion (image-gallery.tsx → vanilla CSS) ── */
.tab-panel.img-gal.active {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  height: 400px;
  grid-template-columns: unset;
}
.tab-panel.img-gal .tab-card-img {
  flex: 1 1 56px;
  min-width: 56px;
  border-radius: 14px;
  overflow: hidden;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  transform: none !important;
  border: none !important;
}
.tab-panel.img-gal .tab-card-img:hover {
  flex: 8 1 56px;
}
/* Photo fills full accordion height */
.tab-panel.img-gal .tab-card-photo {
  height: 100%;
  width: 100%;
  aspect-ratio: unset;
}
.tab-panel.img-gal .tab-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s ease;
}
.tab-panel.img-gal .tab-card-img:hover .tab-card-photo img {
  transform: scale(1.06);
}
/* Gradient overlay fades in on hover */
.tab-panel.img-gal .tab-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.tab-panel.img-gal .tab-card-img:hover::after { opacity: 1; }
/* Bloque de texto: título + descripción apilados desde el fondo */
/* Descripción — línea inferior */
.tab-panel.img-gal .tab-card-img .tab-card-text {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  color: rgba(255,255,255,0.82) !important;
  font-size: 11px !important;
  line-height: 1.55;
  padding: 0 !important;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.14s, transform 0.35s ease 0.14s;
  z-index: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tab-panel.img-gal .tab-card-img:hover .tab-card-text {
  opacity: 1;
  transform: translateY(0);
}
/* Título — encima de la descripción (14px + 2 líneas ×17px + 6px gap ≈ 54px) */
.tab-panel.img-gal .tab-card-img .tab-card-title {
  position: absolute;
  bottom: 54px; left: 14px; right: 14px;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.3;
  padding: 0 !important;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-panel.img-gal .tab-card-img:hover .tab-card-title {
  opacity: 1;
  transform: translateY(0);
}


/* ── Dynamic Frame Layout (DynamicFrameLayout → vanilla CSS/JS) ── */
.dfl-grid {
  display: grid;
  grid-template-rows: 4fr 4fr 4fr;
  grid-template-columns: 4fr 4fr 4fr;
  gap: 4px;
  height: 560px;
  border-radius: 16px;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease, grid-template-columns 0.4s ease;
}
.dfl-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,.04);
}
.dfl-cell img,
.dfl-cell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
  display: block;
}
.dfl-cell:hover img,
.dfl-cell:hover video  { transform: scale(1.07); }
/* Gradient overlay — fade in on hover */
.dfl-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none;
}
.dfl-cell:hover .dfl-overlay { opacity: 1; }
/* Label block — slides in on hover */
.dfl-label {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  z-index: 2;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s;
  pointer-events: none;
}
.dfl-cell:hover .dfl-label { opacity: 1; transform: translateY(0); }
.dfl-label-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dfl-label-sub {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Laser Photo Lightbox ─────── */
.laser-lb {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.laser-lb.open {
  opacity: 1; pointer-events: auto;
}
.laser-lb img {
  max-width: 88vw; max-height: 82vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 40px 90px rgba(0,0,0,0.65);
  transform: scale(0.82);
  transition: transform 0.38s cubic-bezier(0.34, 1.46, 0.64, 1);
  cursor: default;
  pointer-events: none;
}
.laser-lb.open img {
  transform: scale(1);
}
.laser-lb-close {
  position: absolute; top: 20px; right: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.12);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.laser-lb-close:hover { background: rgba(255,255,255,0.25); }

/* ── TESTIMONIALS ─────────────── */
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1120px; margin: 0 auto;
}
.testi-card {
  background: var(--white); border-radius: 16px; padding: 30px 28px;
  border: 1px solid var(--gray-l);
}
.testi-stars { color: var(--dark); font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }
.testi-text { font-size: 14px; color: var(--gray-d); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gray-bg2); display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--gray-m);
}
.testi-name { font-size: 14px; font-weight: 700; }
.testi-role { font-size: 12px; color: var(--gray-m); }


/* ══ STAGGER TESTIMONIALS ════════════════════════════════════════ */
.stagger-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 600px;
  margin: 0 auto;
}
.stagger-stage {
  position: relative;
  width: 100%; height: 100%;
}

/* ── individual card ── */
.stagger-card {
  position: absolute;
  left: 50%; top: 50%;
  cursor: pointer;
  padding: 32px;
  border: 2px solid #e5e5e5;
  background: #ffffff;
  color: #111111;
  transition: transform 0.5s ease-in-out,
              box-shadow 0.5s ease-in-out,
              background 0.3s ease,
              border-color 0.3s ease;
  clip-path: polygon(
    50px 0%, calc(100% - 50px) 0%, 100% 50px,
    100% 100%, calc(100% - 50px) 100%,
    50px 100%, 0 100%, 0 0
  );
  overflow: hidden;
}
.stagger-card:hover:not(.stagger-card-center) {
  border-color: #aaaaaa;
}
.stagger-card-center {
  background: #0a0a0f;
  color: #ffffff;
  border-color: #0a0a0f;
  cursor: default;
}

/* ── diagonal cut corner line ── */
.stagger-cut {
  position: absolute;
  display: block;
  height: 2px;
  background: #e5e5e5;
  transform-origin: top right;
  transform: rotate(45deg);
}
.stagger-card-center .stagger-cut {
  background: rgba(255,255,255,0.18);
}

/* ── photo ── */
.stagger-photo {
  display: block;
  width: 52px; height: 56px;
  object-fit: cover; object-position: top;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 #f5f5f5;
}
.stagger-card-center .stagger-photo {
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

/* ── stars ── */
.stagger-stars {
  font-size: 13px;
  letter-spacing: 2px;
  color: #f59e0b;
  margin-bottom: 10px;
}

/* ── quote ── */
.stagger-quote {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: inherit;
  margin: 0 0 48px;
}
.stagger-card-center .stagger-quote {
  color: #ffffff;
}

/* ── attribution ── */
.stagger-by {
  position: absolute;
  bottom: 28px; left: 32px; right: 32px;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  color: #888888;
}
.stagger-by strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #222222;
  margin-bottom: 1px;
}
.stagger-card-center .stagger-by { color: rgba(255,255,255,0.55); }
.stagger-card-center .stagger-by strong { color: #ffffff; }

/* ── loading state ── */
.stagger-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.stagger-spinner {
  width: 36px; height: 36px;
  border: 3px solid #e5e5e5;
  border-top-color: #111111;
  border-radius: 50%;
  animation: hero-spin 0.75s linear infinite;
}

/* ── nav buttons ── */
.stagger-nav {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 20;
}
.stagger-btn {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: #ffffff;
  border: 2px solid #e5e5e5;
  color: #111111;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  clip-path: polygon(
    14px 0%, calc(100% - 14px) 0%, 100% 14px,
    100% 100%, calc(100% - 14px) 100%,
    14px 100%, 0 100%, 0 0
  );
}
.stagger-btn:hover {
  background: #0a0a0f;
  color: #ffffff;
  border-color: #0a0a0f;
}

@media (max-width: 639px) {
  .stagger-wrap { height: 520px; }
  .stagger-quote { font-size: 13px; }
  .stagger-by { font-size: 11px; }
}

/* ── BENEFITS GRID ────────────── */
.benefits-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; max-width: 1120px; margin: 0 auto;
}
.benefit-card { text-align: center; padding: 32px 20px; }
.benefit-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--gray-bg2); display: flex;
  align-items: center; justify-content: center; margin: 0 auto 18px;
}
.benefit-icon svg { width: 26px; height: 26px; stroke: var(--dark); fill: none; stroke-width: 1.8; }
.benefit-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.benefit-text { font-size: 13px; color: var(--gray-m); line-height: 1.6; }


/* ── CTA FINAL ─────────────────── */
.cta-final {
  background: var(--dark); padding: 110px 28px; text-align: center;
}
.cta-final h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.5px; color: var(--white);
  margin-bottom: 14px; line-height: 1.1;
}
.cta-final p { font-size: 17px; color: #86868b; margin-bottom: 40px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* ── FOOTER ─────────────────────── */
footer { background: #000; border-top: none; padding: 60px 28px 36px; }
.footer-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 10px; color: #fff; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; }
.footer-col h5 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; color: #fff; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,.55); transition: color .2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { max-width: 1120px; margin: 40px auto 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: 12px; color: rgba(255,255,255,.4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }


/* ── HAMBURGER NAV ─────────────────── */
.nav-ham {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px; cursor: pointer;
  border: none; background: none;
  padding: 6px; border-radius: 8px;
  transition: background .2s;
}
.nav-ham:hover { background: var(--gray-bg); }
.nav-ham span {
  display: block; width: 22px; height: 2px;
  background: var(--dark); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-ham.open span:nth-child(2) { opacity: 0; }
.nav-ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.nav-mobile-menu {
  display: none;
  position: fixed; top: 84px; left: 0; right: 0; z-index: 299;
  /* top se sobreescribe en cada breakpoint de nav */
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gray-l);
  flex-direction: column;
  padding: 12px 0 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  padding: 13px 28px;
  font-size: 16px; font-weight: 500; color: var(--dark);
  border-bottom: 1px solid var(--gray-bg);
  transition: background .15s;
}
.nav-mobile-menu a:hover { background: var(--gray-bg); }


/* ── TABLET 769px – 1024px ─────────── */
@media(min-width:769px) and (max-width:1024px){
  /* NAV */
  .nav-links { display: none; }
  .nav-ham   { display: flex; }
  .nav-in    { padding: 0 20px; }

  /* HERO — tablet 769-1024px */
  .hero { min-height: 68vh; }
  .hero-panel-left  { flex: 0 0 55%; min-height: 68vh; padding: 32px 32px; }
  .hero-panel-right { flex: 0 0 45%; min-height: 68vh; }
  .hero h1   { font-size: clamp(20px,3.5vw,32px); letter-spacing:-1px; }
  .hero-sub  { font-size: 13px; }

  /* STATS */
  .stats-in { grid-template-columns: repeat(4,1fr); padding: 32px 24px; gap: 16px; }
  .stat-n   { font-size: 36px; }

  /* SECCIONES */
  .sec  { padding: 72px 24px; }
  .sec-head { margin-bottom: 48px; }

  /* FEAT ALTERNATING: mantener 2 cols en tablet */
  .feat-block, .feat-block.flip {
    grid-template-columns: 1fr 1fr;
    gap: 40px; padding: 56px 24px;
  }
  .feat-block.flip .feat-visual { order: -1; }

  /* TABS */
  .tab-panel.active { grid-template-columns: repeat(3,1fr); gap: 14px; }
  #tab2.active      { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .tab-btn          { font-size: 13px; padding: 12px 20px; }
  .tab-card-photo   { aspect-ratio: 3/2; }

  /* TESTIMONIALS */
  .testi-grid    { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* BENEFITS */
  .benefits-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* FLIP CARDS: tamaño intermedio en tablet */
  .flip-box { width: 120px; height: 120px; }

  /* FOOTER */
  .footer-in { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Overrides inline grids para tablet */
@media(min-width:769px) and (max-width:1024px){
  /* Nosotros: video + texto — 2 cols más ajustadas */
  #nosotros .sec-in > div[style*="grid"] {
    gap: 40px !important;
  }
  #nosotros div[style*="9/16"] { max-width: 280px !important; }

  /* Doctor: bio + foto — ajustar gap */
  #doctor .sec-in > div[style*="2fr 1fr"] {
    gap: 40px !important;
    max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  /* Doctor: membresías — 2 cols */
  #doctor .sec-in > div[style*="1fr 1fr"] {
    max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* Laser: 2 cols con gap reducido */
  #laser .sec-in > div[style*="grid"] { gap: 36px !important; }
  #laser div[style*="110px"] { width: 90px !important; height: 90px !important; min-width: 90px !important; }

  /* Servicios: 3 fotos en fila */
  #servicios .sec-in > div[style*="repeat(3"] { gap: 14px !important; }

  /* Tienda preview: 4 → 2 cols */
  #tienda .sec-in > div[style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Como llegar: 2 cols ajustadas */
  #como-llegar .sec-in > div[style*="grid"] { gap: 28px !important; }
  #como-llegar iframe { min-height: 360px !important; }
  #como-llegar div[style*="9/16"] { max-width: 260px !important; }
}

/* ── RESPONSIVE ≤960px (herencia) ─── */
@media(max-width:960px){
  .nav-links { display: none; }
  .nav-ham   { display: flex; }

  /* HERO — ≤960px: paneles lado a lado compactos */
  .hero { min-height: 62vh; }
  .hero-panel-left  { flex: 0 0 57%; min-height: 62vh; padding: 20px 28px; }
  .hero-panel-right { flex: 0 0 43%; min-height: 62vh; }
  .hero h1    { font-size: clamp(18px,3.2vw,30px); letter-spacing:-1px; }
  .hero-sub   { font-size: 13px; margin-bottom: 20px; }

  .stats-in { grid-template-columns: repeat(2,1fr); padding: 28px 20px; gap: 16px; }
  .stat-n   { font-size: 34px; }

  .sec  { padding: 64px 20px; }
  .sec-head { margin-bottom: 40px; }

  .feat-block, .feat-block.flip { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; }
  .feat-block.flip .feat-visual { order: 0; }

  .tab-panel.active { grid-template-columns: 1fr 1fr; }
  #tab2.active      { grid-template-columns: 1fr 1fr; }
  .tab-btn          { font-size: 13px; padding: 12px 16px; }

  .testi-grid    { grid-template-columns: 1fr 1fr; gap: 16px; }
  .benefits-grid { grid-template-columns: repeat(2,1fr); }

  .footer-in { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Nav tablet ≤960px */
  nav               { height: 88px; }
  .hero             { margin-top: 88px; }
  .brand-flipcard   { width: 280px !important; height: 78px !important; }
  .nav-logo-dr      { height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; }
  .nav-logo-pyl     { max-height: 70px !important; max-width: 260px !important; }
  .nav-in           { padding: 0 22px !important; gap: 16px !important; }
  .brand-combo      { gap: 10px; }
  .brand-combo-badge    { height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; }
  .brand-combo-wordmark { max-height: 40px !important; max-width: 175px !important; }

}

/* ── RESPONSIVE 768px (móvil) ─────── */
@media(max-width:768px){
  /* NAV */
  .btn-wa-txt { display: none; }
  .btn-wa     { padding: 8px 12px; border-radius: 50%; width: 38px; height: 38px; justify-content: center; }

  /* HERO — móvil ≤768px: panel izquierdo arriba (shapes + texto) + galería abajo */
  .hero { flex-direction: column; min-height: auto; }
  .hero-panel-left {
    flex: none;
    width: 100%;
    min-height: 55vw;
    display: flex;
    align-items: center;
    padding: 40px 24px;
  }
  /* Shapes: reducir tamaño en móvil */
  .hs-inner { transform: scale(0.6); transform-origin: top left; }
  .hero-content-overlay {
    position: relative; z-index: 4;
    max-width: 100%;
  }
  .hero-panel-right {
    flex: none;
    width: 100%;
    height: 55vw;
    min-height: 220px;
    max-height: 320px;
  }
  .hero-panel-right::before { display: none; }
  .hero h1    { font-size: clamp(26px,7.5vw,38px); letter-spacing:-1px; }
  .hero-sub   { font-size: 14px; margin-bottom: 22px; max-width: 90%; }
  .hero-badge { font-size: 10px; padding: 4px 12px; }
  .hero-actions    { gap: 10px; flex-wrap: wrap; }
  .btn-primary { font-size: 14px; padding: 11px 20px; }

  /* STATS */
  .stats-in { grid-template-columns: repeat(2,1fr); padding: 24px 16px; gap: 14px; }
  .stat-n   { font-size: 28px; }
  .stat-l   { font-size: 11px; }

  /* SECCIONES */
  .sec { padding: 48px 16px; }
  .sec-title  { font-size: clamp(20px,6vw,30px); letter-spacing: -0.5px; }
  .sec-body   { font-size: 14px; }
  .sec-head   { margin-bottom: 28px; }

  .feat-block, .feat-block.flip { padding: 36px 16px; gap: 24px; }
  .feat-title  { font-size: clamp(18px,5vw,26px); }
  .feat-text   { font-size: 14px; margin-bottom: 20px; }
  .feat-visual { aspect-ratio: 3/2; }

  /* FLIP CARDS membresías — sin corte */
  .flip-box   { width: 100px; height: 100px; perspective: 500px; }
  .flip-inner { border-radius: 12px; }
  .flip-front, .flip-back {
    border-radius: 12px;
    overflow: visible;        /* evita corte */
  }
  .flip-front img, .flip-back img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8px;
  }
  .flip-label { font-size: 10px; }

  /* TABS */
  .tab-nav  { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn  {
    font-size: 12px; padding: 11px 14px;
    letter-spacing: 0; white-space: nowrap;
    flex: none;
  }
  .tab-panel.active { grid-template-columns: 1fr 1fr; gap: 10px; }
  #tab2.active      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tab-card         { padding: 0; }
  .tab-card-photo   { aspect-ratio: 1/1; }   /* cuadrado en móvil */
  .tab-card-img .tab-card-title { font-size: 12px; padding: 8px 10px 2px; white-space: normal; }
  .tab-card-img .tab-card-text  { font-size: 10px; padding: 0 10px 10px; display: none; } /* oculta desc en móvil para ahorrar espacio */

  /* Accordion gallery → grid 2 cols en móvil */
  .tab-panel.img-gal.active {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    gap: 10px !important;
  }
  .tab-panel.img-gal .tab-card-img {
    flex: unset !important;
    min-width: unset !important;
    height: 160px !important;
  }
  .tab-panel.img-gal .tab-card-img::after { opacity: 0.6 !important; }
  /* En móvil no hay hover → mostrar solo título siempre visible */
  .tab-panel.img-gal .tab-card-img .tab-card-title {
    opacity: 1 !important; transform: none !important;
    font-size: 11px !important; bottom: 10px; left: 10px; right: 10px;
  }
  .tab-panel.img-gal .tab-card-img .tab-card-text { display: none !important; opacity: 0 !important; }

  /* Dynamic Frame Layout → grid compacto en móvil */
  .dfl-grid {
    height: 300px !important;
    gap: 3px !important;
    border-radius: 10px !important;
    /* En móvil no hay hover — mostrar siempre overlays */
  }
  .dfl-overlay { opacity: 0.55 !important; }
  .dfl-label   { opacity: 1 !important; transform: none !important; }
  .dfl-label-title { font-size: 10px !important; margin-bottom: 1px !important; }
  .dfl-label-sub   { display: none !important; }

  /* TESTIMONIALS */
  .testi-grid { grid-template-columns: 1fr; gap: 12px; }
  .testi-card { padding: 20px; }
  .testi-text { font-size: 13px; }

  /* BENEFITS */
  .benefits-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefit-card  { padding: 20px 12px; }
  .benefit-title { font-size: 14px; }
  .benefit-text  { font-size: 12px; line-height: 1.5; }

  /* FOOTER */
  .footer-in     { grid-template-columns: 1fr; gap: 28px; }
  .footer-desc   { font-size: 12px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  footer         { padding: 44px 20px 28px; }

  /* NAV móvil */
  nav               { height: 90px; }
  .nav-mobile-menu  { top: 90px; }
  .hero             { margin-top: 90px; }
  .brand-flipcard   { width: 220px !important; height: 78px !important; }
  .nav-logo-dr      { height: 76px !important; width: 76px !important; max-height: 76px !important; max-width: 76px !important; }
  .nav-logo-pyl     { max-height: 68px !important; max-width: 220px !important; }
  .nav-in           { padding: 0 18px !important; gap: 12px !important; }
  .brand-combo      { gap: 10px; }
  .brand-combo-badge    { height: 78px !important; width: 78px !important; max-height: 78px !important; max-width: 78px !important; }
  .brand-combo-wordmark { max-height: 48px !important; max-width: 185px !important; }
  .hero-brand-img   { max-height: 68px !important; max-width: 88vw !important; }
  /* RESEÑAS: reducir altura del stage en pantallas pequeñas */
  .stagger-wrap { height: 460px; }
}


/* ══════════════════════════════════════════════════════════════
   ORBITAL — Membresías & Certificaciones
   ══════════════════════════════════════════════════════════════ */
.orbital-wrap { text-align: center; }
.orbital-stage {
  position: relative; width: 660px; height: 660px;
  margin: 0 auto;
  border-radius: 28px;
  background: #08090f;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  cursor: default;
}
.orb-center {
  position: absolute; width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg,#4f46e5,#2563eb,#0891b2);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  /* Halo via pseudo-element (opacity-based = compositable, no repaint) */
}
/* Halo de pulso — reemplaza box-shadow animado con opacity+scale */
.orb-btn::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: rgba(79,70,229,.45);
  will-change: transform, opacity;
  animation: orb-glow 2.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes orb-glow {
  0%,100% { transform: scale(1);    opacity: .45; }
  50%     { transform: scale(1.28); opacity: 0;   }
}
.orb-ping {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  animation: orb-ping 1.6s ease-out infinite;
}
.orb-ping-1 { width: 96px;  height: 96px; }
.orb-ping-2 { width: 120px; height: 120px; animation-delay: .6s; border-color: rgba(255,255,255,.09); }
@keyframes orb-ping {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.orb-core { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.88); }
.orb-ring {
  position: absolute; width: 530px; height: 530px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.orb-node {
  position: absolute; cursor: pointer;
  margin-left: -32px; margin-top: -32px;
  transition: opacity .25s ease;
}
.orb-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255,255,255,.30);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.22,.68,0,1.3),
              border-color .3s, box-shadow .3s;
  overflow: hidden;
}
.orb-icon img { width: 44px; height: 44px; object-fit: contain; }
.orb-icon-active {
  border-color: #fff;
  box-shadow: 0 0 28px rgba(255,255,255,.45);
  transform: scale(1.35) !important;
}
.orb-icon-related {
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 0 10px rgba(255,255,255,.2);
  animation: orb-rel-pulse 1s ease-in-out infinite;
}
@keyframes orb-rel-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.orb-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);
  width: 100px; height: 100px; top: -18px; left: -18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.orb-glow-pulse {
  opacity: 1;
  animation: orb-glow-beat 1s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes orb-glow-beat {
  0%,100% { opacity: .9; transform: scale(1);    }
  50%     { opacity: .3; transform: scale(1.18); }
}
.orb-node-dim .orb-icon  { filter: brightness(.55) saturate(.3) grayscale(.6); transition: filter .4s ease; }
.orb-node-dim .orb-label { opacity: .55; transition: opacity .4s ease; }
.orb-label {
  position: absolute; top: 72px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.70); pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.orb-card {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  width: 210px;
  background: rgba(5,5,12,.93);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.65);
  z-index: 400;
  animation: orb-card-in .22s ease;
}
@keyframes orb-card-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px);  }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
.orb-card-line  { position: absolute; top: -14px; left: 50%; width: 1px; height: 14px; background: rgba(255,255,255,.35); }
.orb-card-cat   { font-size: 9px;  font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 5px; }
.orb-card-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 9px; }
.orb-card-desc  { font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.6; margin-bottom: 12px; }
.orb-card-bar-row { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.45); margin-bottom: 5px; }
.orb-card-bar   { width: 100%; height: 3px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.orb-card-fill  { height: 100%; background: linear-gradient(90deg,#4f46e5,#0891b2); border-radius: 99px; }
.orbital-hint   { font-size: 12px; color: var(--gray-m); margin-top: 18px; letter-spacing: .02em; }
@media(max-width:700px) {
  .orbital-stage { width: min(640px, 94vw) !important; height: min(640px, 94vw) !important; }
  .orb-label     { font-size: 9px !important; letter-spacing: .04em !important; }
}


/* ══════════════════════════════════════════════════════════════
   TABLET 769–1024px — Overrides para grids inline
   ══════════════════════════════════════════════════════════════ */
@media(min-width:769px) and (max-width:1024px) {
  #nosotros .sec-in > div[style*="grid"]       { gap: 40px !important; }
  #nosotros div[style*="9/16"]                 { max-width: 280px !important; }
  #doctor .sec-in > div[style*="2fr 1fr"]      { gap: 40px !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  #doctor .sec-in > div[style*="1fr 1fr"]      { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  #doctor div[style*="flex-wrap:wrap"],
  #doctor div[style*="flex-wrap: wrap"]        { flex-wrap: nowrap !important; gap: 16px !important; justify-content: center !important; }
  #laser .sec-in > div[style*="grid"]          { gap: 32px !important; }
  #laser div[style*="110px"]                   { width: 80px !important; height: 80px !important; min-width: 80px !important; }
  #tienda .sec-in > div[style*="repeat(4"]    { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  #como-llegar .sec-in > div[style*="grid"]   { gap: 28px !important; }
  #como-llegar iframe                          { min-height: 360px !important; }
  #como-llegar div[style*="9/16"]              { max-width: 240px !important; }
}


/* ══════════════════════════════════════════════════════════════
   MÓVIL ≤768px — Overrides para grids inline y textos
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px) {
  #nosotros .sec-in > div[style*="grid"]       { grid-template-columns: 1fr !important; gap: 28px !important; }
  #nosotros video                              { max-width: 100% !important; }
  #nosotros div[style*="9/16"]                 { max-width: 240px !important; margin: 0 auto !important; }

  #doctor .sec-in > div[style*="2fr 1fr"]      { grid-template-columns: 1fr !important; gap: 24px !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  #doctor .sec-in > div[style*="2fr 1fr"] > div:last-child { aspect-ratio: 4/3 !important; }
  #doctor .sec-in > div[style*="1fr 1fr"]      { grid-template-columns: 1fr !important; gap: 28px !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  #doctor div[style*="flex-wrap:nowrap"]       { flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; }

  #laser .sec-in > div[style*="grid"]          { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* En móvil ≤768px: ítems en columna, imagen centrada y más grande */
  #laser div[style*="align-items:center;gap:18px"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }
  #laser div[style*="110px"] {
    width: min(160px, 50vw) !important;
    height: min(160px, 50vw) !important;
    min-width: unset !important;
    flex-shrink: unset !important;
  }

  #servicios .sec-in > div[style*="repeat(3"] { grid-template-columns: 1fr !important; gap: 12px !important; }

  #tienda .sec-in > div[style*="repeat(4"]    { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  #como-llegar .sec-in > div[style*="grid"]   { grid-template-columns: 1fr !important; gap: 20px !important; }
  #como-llegar iframe                          { min-height: 280px !important; height: 280px !important; }
  /* Elimina el espacio muerto: el container del mapa tenía min-height:420px
     pero el iframe solo ocupa 280px en móvil → ~140px de vacío entre mapa y video */
  #como-llegar div[style*="min-height:420px"] { min-height: 0 !important; height: auto !important; }
  /* Video más grande: de 220px a casi todo el ancho disponible */
  #como-llegar div[style*="9/16"]              { max-width: min(320px, 88vw) !important; margin: 0 auto !important; max-height: none !important; }

  .flip-front, .flip-back                      { overflow: visible !important; }
  .flip-front img, .flip-back img              { padding: 6px !important; }
  .hero-card-pills                             { overflow: visible !important; flex-wrap: wrap !important; }
  .hpill                                       { white-space: nowrap !important; }
  .tab-card-img .tab-card-title                { overflow: visible !important; white-space: normal !important; }
}


/* ══════════════════════════════════════════════════════════════
   NAV — ACTIVE STATE (scroll spy)
   ══════════════════════════════════════════════════════════════ */
.nav-links a.active {
  color: var(--dark);
  /*
   * font-weight: 600 eliminado: cambiar font-weight en JS (scroll spy)
   * ensancha el texto y provoca micro-shifts en el layout del navbar.
   * El estado activo se comunica visualmente con: color oscuro + fondo
   * + punto indicador (::after), que es suficiente y sin reflow.
   */
  background: var(--gray-bg);
  position: relative;
  /* Comparte el mismo efecto lift del hover para coherencia visual */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--dark);
  border-radius: 50%;
}


/* ══════════════════════════════════════════════════════════════
   ACCESIBILIDAD — prefers-reduced-motion
   Usuarios que configuraron "reducir movimiento" en su SO
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Deshabilitar scroll-3d: mostrar secciones directamente */
  .scroll-3d {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto !important;
  }
  .scroll-3d.in-view {
    transform: none !important;
    transition: none !important;
  }

  /* Hero: sin animaciones de entrada */
  .hero-anim-down,
  .hero-anim-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero spotlight: visible sin animación */
  .hero-spotlight {
    animation: none !important;
    opacity: 0.6 !important;
  }

  /* Hero shapes: sin animación */
  .hs, .hs-inner { animation: none !important; opacity: 1 !important; }

  /* Orbital: sin pulso */
  .orb-center { animation: none !important; }
  .orb-ping   { animation: none !important; opacity: 0 !important; }

  /* Reducir todas las transiciones a mínimo */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   RAINBOW BORDER — todos los botones del sitio
   Adaptado de rainbow-borders-button.tsx (React → CSS puro)
   ══════════════════════════════════════════════════════════════ */

@keyframes rainbow-border {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* ══════════════════════════════════════════════════════════════
   Técnica: background-clip (padding-box / border-box)
   El borde muestra el gradiente; el fondo del botón queda sólido.
   No depende de z-index ni isolation — funciona siempre.
   ══════════════════════════════════════════════════════════════ */

/* Keyframe para el clip gradient (anima solo la capa border-box) */
@keyframes rainbow-clip {
  0%,100% { background-position: 0 0, 0 0; }
  50%     { background-position: 0 0, 400% 0; }
}

/* Keyframe del glow ::after (capa suelta) */
@keyframes rainbow-glow {
  0%,100% { background-position: 0 0; }
  50%     { background-position: 400% 0; }
}

/* ── Degradado arcoíris compartido (como variable local) ── */
/* Se referencia en cada regla de background */

/* ── Botones fondo negro (hero / secciones oscuras) ── */
.btn-primary {
  position: relative;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(45deg,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000) border-box;
  background-size: auto, 400%;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: rainbow-clip 20s linear infinite;
}

/* ── Botones fondo blanco (nav) ── */
.btn-ghost,
.btn-secondary {
  position: relative;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(45deg,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000) border-box;
  background-size: auto, 400%;
  color: var(--dark);
  animation: rainbow-clip 20s linear infinite;
  animation-delay: -8s;
}

/* ── Botón WhatsApp (fondo verde) ── */
.btn-wa {
  position: relative;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#25D366, #25D366) padding-box,
    linear-gradient(45deg,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000) border-box;
  background-size: auto, 400%;
  animation: rainbow-clip 20s linear infinite;
  animation-delay: -4s;
}

/* ── Hover: acelera la animación del borde ── */
.btn-primary:hover,
.btn-wa:hover,
.btn-ghost:hover {
  animation-duration: 4s;
}

/* ── Glow halo: ::after con blur difuso ── */
.btn-primary::after,
.btn-wa::after,
.btn-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(45deg,
    #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
    #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: -1;
  animation: rainbow-glow 20s linear infinite;
}

.btn-wa::after    { animation-delay: -4s; }
.btn-ghost::after { animation-delay: -8s; }

/* Hover: el glow también acelera */
.btn-primary:hover::after,
.btn-wa:hover::after,
.btn-ghost:hover::after {
  animation-duration: 4s;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER — Background Boxes (aceternity UI → vanilla)
   ══════════════════════════════════════════════════════════════ */

/* El footer necesita position:relative para los hijos absolutos */
footer {
  position: relative;
  overflow: hidden;
}

/* El contenido del footer queda por encima de las cajas */
.footer-in,
.footer-bottom {
  position: relative;
  z-index: 2;
}

/* ── Contenedor absoluto que ocupa todo el footer ── */
.footer-boxes-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.footer-boxes-bg .footer-boxes-grid {
  pointer-events: auto;   /* el grid sí recibe hover */
}

/* ── Grid: centrado en el footer para cobertura total ── */
.footer-boxes-grid {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) skewX(-48deg) skewY(14deg) scale(0.675) translateZ(0);
  display: flex;
  will-change: transform;
  backface-visibility: hidden;
}

/* ── Filas ── */
.fbox-row {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(148, 163, 184, 0.13);
}

/* ── Celdas individuales ── */
.fbox-cell {
  flex-shrink: 0;
  width: 64px;
  height: 32px;
  border-right: 1px solid rgba(148, 163, 184, 0.13);
  border-top:   1px solid rgba(148, 163, 184, 0.13);
  position: relative;
  /* Transición de entrada inmediata (se ve snappy), salida suave */
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  cursor: crosshair;
}

/* ── Símbolo "+" en intersecciones pares ── */
.fbox-plus {
  position: absolute;
  width: 40px;
  height: 24px;
  top: -14px;
  left: -22px;
  color: rgba(148, 163, 184, 0.22);
  pointer-events: none;
  overflow: visible;
}

/* ── Máscara radial: elipse muy amplia para que el grid sea visible
      en TODO el footer, incluidas las esquinas                        ── */
.footer-boxes-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 220% 200% at 50% 50%,
    transparent 28%,
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0.42) 70%,
    rgba(0, 0, 0, 0.62) 88%
  );
}


/* ── Botones inline (Conocer más + Ver reseñas) — background-clip ── */
.btn-more,
.btn-reviews {
  position: relative;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(45deg,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
      #fb0094, #0000ff, #00ff00, #ffff00, #ff0000) border-box;
  background-size: auto, 400%;
  animation: rainbow-clip 20s linear infinite;
}

.btn-more    { animation-delay: -14s; }
.btn-reviews { animation-delay: -3s; }

.btn-more:hover,
.btn-reviews:hover { animation-duration: 4s; }

/* Glow en los botones inline */
.btn-more::after,
.btn-reviews::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(45deg,
    #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
    #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
  filter: blur(50px);
  opacity: 0.4;
  z-index: -1;
  animation: rainbow-glow 20s linear infinite;
}

.btn-more::after    { animation-delay: -14s; }
.btn-reviews::after { animation-delay: -3s; }


/* ── .stagger-btn (flechas reseñas): clip-path impide pseudo-elementos,
      se anima el border-color directamente ── */
@keyframes rainbow-border-color {
  0%   { border-color: #fb0094; }
  16%  { border-color: #4400ff; }
  33%  { border-color: #00cc44; }
  50%  { border-color: #ffcc00; }
  66%  { border-color: #ff3300; }
  83%  { border-color: #cc00ff; }
  100% { border-color: #fb0094; }
}

.stagger-btn {
  animation: rainbow-border-color 5s linear infinite;
}
.stagger-btn:nth-child(2) {
  animation-delay: -2.5s;   /* botón derecho desfasado */
}
.stagger-btn:hover {
  animation-duration: 1s;   /* acelera en hover */
}


/* ── .feat-link (servicios.html / index.html): rainbow en el borde inferior ──
      El feat-link es un enlace de texto con border-bottom → animamos el color
      igual que .stagger-btn (clip-path incompatible con pseudo-elements)      */
@keyframes rainbow-link-color {
  0%   { border-color: #fb0094; color: #fb0094; }
  16%  { border-color: #4400ff; color: #4400ff; }
  33%  { border-color: #00cc44; color: #00cc44; }
  50%  { border-color: #ffcc00; color: #c49a00; }
  66%  { border-color: #ff3300; color: #ff3300; }
  83%  { border-color: #cc00ff; color: #cc00ff; }
  100% { border-color: #fb0094; color: #fb0094; }
}

.feat-link {
  animation: rainbow-link-color 6s linear infinite;
}
.feat-link:nth-of-type(2) { animation-delay: -2s; }
.feat-link:nth-of-type(3) { animation-delay: -4s; }
.feat-link:hover           { animation-duration: 1.5s; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDAD ADICIONAL — breakpoints completos
   Orden: 1200px → 1024px → 430px → 360px
   ══════════════════════════════════════════════════════════════ */

/* ── 1200px: laptop grande ──────────────────────────────────── */
@media (max-width: 1200px) {
  .sec-in      { padding-left: clamp(16px, 3vw, 28px); padding-right: clamp(16px, 3vw, 28px); }
  .feat-block  { padding: 64px clamp(16px, 3vw, 28px); gap: clamp(40px, 5vw, 80px); }
  .orbital-stage { width: min(620px, 90vw); height: min(620px, 90vw); }
  .orb-ring    { width: min(490px, 76vw); height: min(490px, 76vw); }
  .footer-in   { max-width: 100%; padding: 0 clamp(16px, 3vw, 28px); }
}

/* ── 1024px: laptop/tablet landscape ───────────────────────── */
@media (max-width: 1024px) {

  /* Nosotros: reducir gap del grid inline */
  #nosotros .sec-in > div[style*="grid"]   { gap: clamp(28px, 4vw, 48px) !important; }
  #nosotros div[style*="9/16"]             { max-width: 300px !important; }

  /* Doctor: grid principal */
  #doctor .sec-in > div[style*="1fr 1fr"] { gap: clamp(32px, 4vw, 64px) !important; }
  .doc-fc-wrap  { height: 380px; }
  .doc-fc-item  { width: 160px; height: 290px; }

  /* Orbital */
  .orbital-stage { width: min(580px, 92vw); height: min(580px, 92vw); }
  .orb-ring      { width: min(450px, 74vw); height: min(450px, 74vw); }

  /* Laser: grid inline */
  #laser .sec-in > div[style*="grid"]     { gap: clamp(24px, 3vw, 40px) !important; }

  /* Tienda preview: 4→2 cols */
  #tienda .sec-in > div[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  /* Como llegar */
  #como-llegar .sec-in > div[style*="grid"] { gap: 28px !important; }
  #como-llegar iframe                        { min-height: 360px !important; }

  /* Stagger */
  .stagger-wrap { height: 540px; }
}

/* ── 430px: móvil estándar ──────────────────────────────────── */
@media (max-width: 430px) {

  /* NAV mobile ≤430px */
  nav               { height: 70px; }
  .hero             { margin-top: 70px; }
  .nav-mobile-menu  { top: 70px; }
  .brand-flipcard   { width: 180px !important; height: 58px !important; }
  .nav-logo-dr      { height: 54px !important; width: 54px !important; max-height: 54px !important; max-width: 54px !important; }
  .nav-logo-pyl     { max-height: 50px !important; max-width: 168px !important; }
  .nav-in           { padding: 0 14px !important; gap: 10px !important; }
  .brand-combo      { gap: 7px; }
  .brand-combo-badge    { height: 72px !important; width: 72px !important; max-height: 72px !important; max-width: 72px !important; }
  .brand-combo-wordmark { max-height: 44px !important; max-width: 165px !important; }

  /* HERO */
  .hero-panel-left  { padding: 28px 16px; min-height: 50vw; }
  .hero h1          { font-size: clamp(22px, 8vw, 32px); letter-spacing: -0.5px; }
  .hero-sub         { font-size: 13px; line-height: 1.55; margin-bottom: 18px; max-width: 100%; }
  .hero-badge       { font-size: 9px; padding: 3px 10px; margin-bottom: 16px; }
  .btn-primary      { font-size: 13px; padding: 10px 16px; }
  .hero-panel-right { height: 48vw; min-height: 180px; max-height: 260px; }
  /* Shapes: escala menor en 430 */
  .hs-inner         { transform: scale(0.45); transform-origin: top left; }

  /* STATS */
  .stats-in { grid-template-columns: 1fr 1fr; padding: 20px 14px; gap: 12px; }
  .stat-n   { font-size: clamp(22px, 6vw, 28px); }
  .stat-l   { font-size: 10px; }

  /* SECCIONES */
  .sec       { padding: 40px 16px; }
  .sec-title { font-size: clamp(20px, 6.5vw, 28px); }
  .sec-body  { font-size: 13px; }
  .sec-head  { margin-bottom: 24px; }

  /* NOSOTROS: grid inline → 1 col */
  #nosotros .sec-in > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #nosotros div[style*="9/16"] { max-width: 220px !important; margin: 0 auto !important; }
  #nosotros div[style*="padding:48px"] { padding: 0 !important; }

  /* DOCTOR: grid inline → 1 col */
  #doctor .sec-in > div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .doc-fc-wrap  { height: 300px; }
  .doc-fc-item  { width: 130px; height: 240px; }

  /* ORBITAL */
  .orbital-stage { width: min(360px, 96vw) !important; height: min(360px, 96vw) !important; }
  .orb-ring      { width: min(290px, 78vw); height: min(290px, 78vw); }
  .orb-icon      { width: 48px; height: 48px; }
  .orb-icon img  { width: 32px; height: 32px; }
  .orb-label     { font-size: 8px !important; letter-spacing: .02em !important; top: 54px; }
  .orbital-hint  { font-size: 11px; }

  /* TABS: gallery → 1 col en 430 */
  .tab-panel.img-gal.active {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .tab-panel.img-gal .tab-card-img { height: 200px !important; }
  .tab-panel.active  { grid-template-columns: 1fr 1fr; gap: 8px; }
  #tab2.active       { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tab-btn           { font-size: 11px; padding: 10px 10px; }

  /* LASER: grid inline → 1 col */
  #laser .sec-in > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #laser div[style*="110px"] {
    width: clamp(120px, 50vw, 180px) !important;
    height: clamp(120px, 50vw, 180px) !important;
    min-width: unset !important;
  }
  #laser div[style*="font-size:16px"] { font-size: 14px !important; }
  #laser div[style*="font-size:18px"] { font-size: 16px !important; }

  /* SERVICIOS: grid inline → 1 col */
  #servicios .sec-in > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* TIENDA: grid inline → 1 col en 430 */
  #tienda .sec-in > div[style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* COMO LLEGAR: grid inline → 1 col */
  #como-llegar .sec-in > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #como-llegar iframe     { min-height: 240px !important; height: 240px !important; }
  #como-llegar div[style*="min-height:420px"] { min-height: 0 !important; height: auto !important; }
  #como-llegar div[style*="9/16"] { max-width: min(300px, 86vw) !important; margin: 0 auto !important; max-height: none !important; }

  /* BENEFITS */
  .benefits-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .benefit-card  { padding: 16px 10px; }
  .benefit-title { font-size: 13px; }
  .benefit-text  { font-size: 11px; }

  /* STAGGER */
  .stagger-wrap { height: 440px; }
  .stagger-card { padding: 22px; }
  .stagger-quote { font-size: 12px; }

  /* CTA FINAL */
  .cta-final     { padding: 72px 16px; }
  .cta-final p   { font-size: 14px; }

  /* FOOTER */
  footer         { padding: 36px 16px 24px; }
  .footer-in     { gap: 24px; }
  .footer-brand  { font-size: 14px; }
  .footer-desc   { font-size: 11px; }

  /* FEAT BLOCK */
  .feat-block, .feat-block.flip { padding: 28px 16px; gap: 20px; }
  .feat-title  { font-size: clamp(17px, 5vw, 24px); }
  .feat-text   { font-size: 13px; margin-bottom: 16px; }
  .feat-list   { gap: 8px; }
  .feat-item   { font-size: 13px; }

  /* TIENDA PAGE (tienda.html) */
  .tienda-hero        { padding: 88px 16px 48px; }
  .tienda-hero-title  { font-size: clamp(24px, 8vw, 36px); letter-spacing: -0.8px; }
  .beneficios-in {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 !important;
  }
  .beneficios-wrap    { padding: 48px 16px; }
  .catalogo-wrap      { padding: 48px 16px 64px; }
  .prod-card          { width: 160px; }
}

/* ── 390px: iPhone estándar ─────────────────────────────────── */
@media (max-width: 390px) {

  /* NAV */
  nav { height: 56px; }
  .hero            { margin-top: 56px; }
  .nav-mobile-menu { top: 56px; }
  .nav-logo-dr  { display: none !important; }
  .nav-sep      { display: none !important; }
  .nav-logo-pyl { max-height: 26px !important; width: auto !important; max-width: 160px !important; }
  nav .nav-in > div:first-child { gap: 6px !important; }
  .brand-combo-badge    { height: 64px !important; width: 64px !important; max-height: 64px !important; max-width: 64px !important; display: block !important; }
  .brand-combo-wordmark { max-height: 38px !important; max-width: 150px !important; }
  .nav-in          { padding: 0 12px !important; gap: 12px !important; }
}

/* ── 360px: móvil pequeño ───────────────────────────────────── */
@media (max-width: 360px) {

  /* NAV */
  nav { height: 52px; }
  .hero            { margin-top: 52px; }
  .nav-mobile-menu { top: 52px; }
  .nav-in          { padding: 0 10px !important; gap: 10px !important; }
  .nav-logo-dr  { display: none !important; }
  .nav-sep      { display: none !important; }
  .nav-logo-pyl { max-height: 24px !important; width: auto !important; max-width: 150px !important; }
  nav .nav-in > div:first-child { gap: 6px !important; }

  /* HERO */
  .hero-panel-left { padding: 22px 12px; }
  .hero h1         { font-size: clamp(20px, 8vw, 28px); }
  .hero-sub        { font-size: 12px; }

  /* STATS: 1 col en pantallas muy pequeñas */
  .stats-in { grid-template-columns: 1fr 1fr; padding: 16px 10px; gap: 10px; }
  .stat-n   { font-size: clamp(20px, 6vw, 24px); }

  /* SECCIONES */
  .sec   { padding: 32px 12px; }

  /* TABS */
  .tab-panel.active { grid-template-columns: 1fr; gap: 8px; }
  #tab2.active      { grid-template-columns: 1fr; gap: 8px; }
  .tab-btn          { font-size: 10px; padding: 9px 8px; }

  /* TIENDA: 1 col */
  #tienda .sec-in > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* BENEFITS: 1 col */
  .benefits-grid { grid-template-columns: 1fr; }

  /* ORBITAL */
  .orbital-stage { width: min(320px, 98vw) !important; height: min(320px, 98vw) !important; }

  /* TIENDA PAGE */
  .beneficios-in { grid-template-columns: 1fr !important; }
  .prod-card     { width: 140px; }
  .tienda-cta    { padding: 48px 12px; }
}

/* ── Correcciones globales de desbordamiento ── */
section, .sec, .hero, .stats, footer, nav {
  max-width: 100vw;
}

/* Asegurar que imágenes en secciones oscuras no desborden */
#laser img, #laser video {
  max-width: 100%;
}

/* Texto en sección laser no desborda en móvil */
@media (max-width: 768px) {
  /* Texto largo en Doctor no overflow */
  #doctor p[style*="font-size:14px"] {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  /* Nosotros: padding del bloque derecho en 1 col */
  #nosotros div[style*="padding:48px"] { padding: 16px 0 0 !important; }

  /* Cómo llegar: video centrado */
  #como-llegar div[style*="justify-content:center"] {
    justify-content: center !important;
  }
  /* Tienda preview: texto centrado */
  #tienda .sec-in > div[style*="text-align:right"] {
    text-align: center !important;
  }
}

/* ── Orbital responsive extendido ────────────── */
@media (max-width: 500px) {
  .orbital-stage { width: min(400px, 96vw) !important; height: min(400px, 96vw) !important; }
  .orb-ring      { width: min(320px, 80vw); height: min(320px, 80vw); }
  .orb-icon      { width: 52px; height: 52px; }
  .orb-icon img  { width: 36px; height: 36px; }
  .orb-label     { font-size: 9px !important; }
}

/* ── DFL grid en móvil ────────────────────────── */
@media (max-width: 430px) {
  .dfl-grid { height: 240px !important; }
}

/* ── Tienda: beneficios grid en tablet ────────── */
@media (max-width: 768px) {
  .beneficios-in {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 !important;
  }
  .beneficios-wrap { padding: 48px 16px; }
}

/* ── Tienda: hero en tablet ── */
@media (max-width: 768px) {
  .tienda-hero       { padding: 100px 20px 56px; }
  .tienda-hero-title { letter-spacing: -1px; }
  .catalogo-wrap     { padding: 56px 16px 72px; }
  .prod-card         { width: 170px; }
}

/* ── Corrección: .sec-in padding lateral en móvil ── */
@media (max-width: 430px) {
  .sec-in { padding-left: 0; padding-right: 0; }
  .sec    { padding-left: 16px; padding-right: 16px; }
}

/* ── Corrección overflow hero shapes en móvil ── */
@media (max-width: 768px) {
  .hero-shapes-bg { overflow: hidden; }
  .hs { overflow: hidden; }
}


/* ══════════════════════════════════════════════════════════════
   CLASES DE GRID RESPONSIVAS — reemplaza selectores de atributo
   Estas clases se añaden en el HTML y tienen breakpoints limpios
   ══════════════════════════════════════════════════════════════ */

/* ── grid-2col-nosotros (Quiénes Somos) ── */
@media (max-width: 960px) {
  .grid-2col-nosotros {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 36px) !important;
  }
  .grid-2col-nosotros > div[style*="padding:48px"] {
    padding: 0 !important;
  }
}
@media (max-width: 768px) {
  .grid-2col-nosotros {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ── grid-2col-doctor (El Doctor) ── */
@media (max-width: 960px) {
  .grid-2col-doctor {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 32px) !important;
  }
}
@media (max-width: 768px) {
  .grid-2col-doctor {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ── grid-2col-laser (Tecnología Láser) ── */
@media (max-width: 960px) {
  .grid-2col-laser {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 36px) !important;
  }
}
@media (max-width: 768px) {
  .grid-2col-laser {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ── grid-3col-servicios (Servicios fotos) ── */
@media (max-width: 960px) {
  .grid-3col-servicios {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 600px) {
  .grid-3col-servicios {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ── grid-4col-tienda (Tienda preview kits) ── */
@media (max-width: 1024px) {
  .grid-4col-tienda {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 360px) {
  .grid-4col-tienda {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── grid-2col-llegar (Cómo llegar) ── */
@media (max-width: 960px) {
  .grid-2col-llegar {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .grid-2col-llegar iframe {
    min-height: 300px !important;
    height: 300px !important;
  }
}
@media (max-width: 768px) {
  .grid-2col-llegar {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .grid-2col-llegar iframe {
    min-height: 260px !important;
    height: 260px !important;
  }
}
@media (max-width: 430px) {
  .grid-2col-llegar iframe {
    min-height: 220px !important;
    height: 220px !important;
  }
}

/* ── Botón de tienda: alineación centrada en móvil ── */
@media (max-width: 768px) {
  #tienda .sec-in > div[style*="text-align:right"],
  #tienda .sec-in > [style*="text-align:right"] {
    text-align: center !important;
  }
}

/* ── Nosotros: padding del bloque texto en móvil ── */
@media (max-width: 960px) {
  .grid-2col-nosotros > div > div[style*="padding:48px"],
  #nosotros div[style*="padding:48px 0"] {
    padding: 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   BLOQUE DE RENDIMIENTO MÓVIL
   Todas las optimizaciones de performance para ≤768px agrupadas aquí.
   Principio: mantener el estilo premium pero eliminar todo lo que
   genera reflow, repaint o consume GPU sin beneficio visual real.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. NAV: reducir backdrop-filter (blur costoso en GPU móvil) ── */
  nav {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  /* ── 2. HERO: desactivar animaciones de formas flotantes ── */
  /*
   * Las formas (.hs, .hs-inner) tienen dos animaciones en cadena:
   * hs-entry (entrada) + hs-float (flotación infinita).
   * hs-float es una animación continua que ejecuta un nuevo frame
   * cada ~16ms incluso cuando el usuario ya scrolleó lejos del hero.
   * En móvil la eliminamos — la entrada sigue visible, solo sin flotar.
   */
  .hs-inner { animation: none !important; }

  /* ── 3. HERO: ocultar spotlight SVG grande (feGaussianBlur σ=151) ── */
  /*
   * El SVG tiene un filtro Gaussian con stdDeviation=151 — extremadamente
   * costoso de calcular. En móvil es decorativo y no se nota su ausencia.
   */
  .hero-spotlight { display: none !important; }

  /* ── 4. HERO PANEL DERECHO: imagen de fondo cuando Three.js no carga ── */
  /*
   * En móvil no cargamos Three.js → mount div vacío.
   * Usamos portada.webp (236KB, ya optimizado) como fondo visual premium.
   * loading="lazy" implícito porque el navegador descarga cuando es visible.
   * object-fit:cover + gradient overlay mantienen la estética oscura del hero.
   */
  .hero-panel-right {
    background:
      linear-gradient(180deg, rgba(6,7,12,0.18) 0%, rgba(6,7,12,0.08) 100%),
      url('../public/images/portada.webp') center / cover no-repeat;
  }
  #hero-gallery-mount:empty { display: none; }

  /* ── 5. DOCTOR CAROUSEL: eliminar blur/filter en items ── */
  /*
   * El JS ya condiciona USE_BLUR; este bloque es defensa adicional para
   * cualquier filter inline que pueda quedar y para la transición CSS
   * que incluye 'filter 0.5s' en will-change.
   */
  .doc-fc-item {
    will-change: transform, opacity;  /* quita 'filter' del will-change */
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  /* ── 6. SECCIONES FUERA DE PANTALLA: content-visibility ── */
  /*
   * content-visibility:auto le dice al navegador que puede saltar el
   * render de secciones fuera del viewport. Ahorra hasta 40% de tiempo
   * de layout en páginas largas. contain-intrinsic-size evita el CLS.
   * NO se aplica a: hero (visible en carga), nav, footer.
   */
  #nosotros, #doctor, #consultorio, #laser,
  #servicios, #tienda, #como-llegar {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
  }

  /* ── 7. TESTIMONIOS: ocultar botones del carousel en touch ── */
  /*
   * En touch los botones prev/next del stagger carousel se usan poco
   * (los usuarios hacen swipe). Las cards animadas ya están simplificadas.
   */
  .stagger-btn {
    /* Desactivar el heavy rainbow-border animation en móvil */
    animation: none !important;
    border-color: var(--gray-l) !important;
    color: var(--gray-m) !important;
  }

  /* ── 8. RAINBOW LINKS: desactivar en móvil ── */
  .feat-link {
    animation: none !important;
    border-color: var(--dark);
    color: var(--dark);
  }

  /* ── 9. REDUCIR will-change en elementos que ya no animan ── */
  /*
   * will-change crea una nueva capa de compositing en GPU.
   * Tener demasiados elementos con will-change agota la VRAM del móvil.
   * Solo los elementos activamente animados deben tenerlo.
   */
  .hs   { will-change: auto; }
  .orb-center { will-change: auto; }
  .orb-btn::before { will-change: transform, opacity; } /* mantiene el glow */
}

/* ── Reducir stagger-card box-shadow en móvil (repaint costoso) ── */
@media (max-width: 768px) {
  .stagger-card-center {
    box-shadow: 0 4px 0 2px #e2e2e2 !important;
  }
  .stagger-card {
    box-shadow: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MEMBRESÍAS — Card Carousel Tarjetero
   ═══════════════════════════════════════════════════════════════ */

.memb-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ── Deck: contenedor de altura fija donde las tarjetas se apilan ── */
.memb-deck {
  position: relative;
  width: 380px;
  max-width: 100%;
  height: 380px;
}

/* ── Tarjeta base ── */
.memb-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 36px 28px;
  background: var(--white);
  border-radius: 24px;
  border: 1px solid var(--gray-l);
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.04),
    0 10px 36px -4px rgba(0,0,0,0.07);
  /* Estado "en espera": invisible y desplazada abajo */
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* Tarjeta activa — al frente, completamente visible */
.memb-card.mc-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.06),
    0 20px 48px -8px rgba(0,0,0,0.13);
}

/* Tarjeta saliente — se va hacia arriba */
.memb-card.mc-exit {
  opacity: 0;
  transform: translateY(-20px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Badge de categoría ── */
.memb-card-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  align-self: flex-start;
}
.memb-badge-memb {
  background: rgba(34, 197, 94, 0.10);
  color: #15803d;
}
.memb-badge-cert {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}

/* ── Área de logo ── */
.memb-card-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.memb-card-logo-img {
  max-width: 200px;
  max-height: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Texto ── */
.memb-card-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--dark);
  text-align: center;
}
.memb-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--gray-m);
  text-align: center;
  margin: 0;
}

/* ── Barra de progreso ── */
.memb-progress-wrap {
  width: 380px;
  max-width: 100%;
  height: 2px;
  background: var(--gray-l);
  border-radius: 99px;
  overflow: hidden;
}
.memb-progress-fill {
  height: 100%;
  background: var(--dark);
  border-radius: 99px;
  width: 0%;
}

/* ── Chips de navegación ── */
.memb-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 640px;
}
.memb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 9px;
  border-radius: 99px;
  border: 1.5px solid var(--gray-l);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-m);
  transition: border-color 0.22s, color 0.22s, background 0.22s, box-shadow 0.22s;
}
.memb-chip img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.memb-chip.mc-active {
  border-color: var(--dark);
  color: var(--dark);
  background: var(--gray-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.memb-chip:hover:not(.mc-active) {
  border-color: var(--gray-m);
  color: var(--dark);
}
.memb-chip:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .memb-deck  { height: 420px; }
  .memb-card  { padding: 24px 22px; gap: 14px; }
  .memb-chip span { display: none; }        /* solo logo en móvil */
  .memb-chip  { padding: 6px 8px; }
}


/* ═══════════════════════════════════════════════════════════════
   MEMBRESÍAS — tarjetero fila horizontal (5 tarjetas visibles)
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor general ── */
.membr-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Fila de 5 tarjetas ── */
.membr-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}

/* ── Tarjeta base ── */
.membr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 18px 22px;
  background: var(--white);
  border-radius: 20px;
  border: 1.5px solid var(--gray-l);
  min-height: 300px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* Tarjetas inactivas: atenuadas y ligeramente encogidas */
  opacity: 0.52;
  transform: perspective(700px) scale(0.975) translateY(0px);
  transition:
    opacity      0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform    0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s ease,
    box-shadow   0.45s ease;
  will-change: transform, opacity;
}

/* Línea de acento superior — invisible por defecto */
.membr-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dark) 0%, rgba(0,0,0,0.4) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 20px 20px 0 0;
}

/* ── Tarjeta ACTIVA — flip de entrada + movimiento giratorio continuo ── */
.membr-card.membr-active {
  opacity: 1;
  border-color: var(--dark);
  box-shadow:
    0 4px 6px -1px  rgba(0,0,0,0.07),
    0 20px 48px -8px rgba(0,0,0,0.16);
  /* transform: manejado completamente por las animaciones ↓ */
  animation:
    membr-flip-in  0.60s cubic-bezier(0.34, 1.25, 0.64, 1) both,
    membr-float    7s   ease-in-out 0.60s infinite;
  /* Sin transition de transform mientras la animación corre */
  transition:
    opacity      0.3s ease,
    border-color 0.45s ease,
    box-shadow   0.45s ease;
}
.membr-card.membr-active::before {
  transform: scaleX(1);
}

/* ── Keyframe 1: flip de entrada (Y) al activarse ── */
@keyframes membr-flip-in {
  0%   {
    transform: perspective(700px) rotateY(-110deg) scale(0.88) translateY(4px);
    opacity: 0.2;
  }
  55%  {
    transform: perspective(700px) rotateY(10deg)   scale(1.03) translateY(-9px);
    opacity: 1;
  }
  100% {
    transform: perspective(700px) rotateY(0deg)    scale(1)    translateY(-6px);
  }
}

/* ── Keyframe 2: movimiento flotante + giro 3D sutil (loop continuo) ── */
@keyframes membr-float {
  0%   { transform: perspective(700px) rotateY(0deg)    rotateX(0deg)    translateY(-6px) scale(1); }
  20%  { transform: perspective(700px) rotateY(4deg)    rotateX(2deg)    translateY(-10px) scale(1.01); }
  50%  { transform: perspective(700px) rotateY(-3deg)   rotateX(-1.5deg) translateY(-5px)  scale(1); }
  80%  { transform: perspective(700px) rotateY(3deg)    rotateX(1deg)    translateY(-9px)  scale(1.01); }
  100% { transform: perspective(700px) rotateY(0deg)    rotateX(0deg)    translateY(-6px)  scale(1); }
}

/* ── Respeta preferencia de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .membr-card.membr-active {
    animation: none;
    transform: perspective(700px) scale(1) translateY(-6px);
  }
}

/* ── Badge ── */
.membr-badge {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 99px;
}
.membr-badge-m {
  background: rgba(34, 197, 94, 0.10);
  color: #15803d;
}
.membr-badge-c {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}

/* ── Logo ── */
.membr-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.membr-logo-wrap img {
  max-width: 130px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Texto ── */
.membr-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--dark);
  text-align: center;
  line-height: 1.3;
}
.membr-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gray-m);
  text-align: center;
  margin: 0;
}

/* ── Fila de barras de progreso (una por tarjeta, alineadas al track) ── */
.membr-progress-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}
.membr-bar {
  height: 2px;
  background: var(--gray-l);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
/* Fill real (div hijo) — JS anima su width con style.transition + style.width */
.membr-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--dark);
  border-radius: 99px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MEMBRESÍAS
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (601px – 900px): membresías arriba + cert. centradas, efecto original ── */
@media (min-width: 601px) and (max-width: 900px) {
  .membr-progress-row { display: none; }

  .membr-track {
    /* flex con wrap: fila 1 = 3 membresías, fila 2 = 2 cert. centradas */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  /* Ancho exacto: (container − 2 gaps) / 3 columnas */
  .membr-card {
    flex: 0 0 calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
    min-height: 280px;
  }
}

/* ── Móvil (≤600px): carrusel horizontal giratorio + zoom al tap ── */
@media (max-width: 600px) {
  .membr-progress-row { display: none; }

  .membr-track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    /* Padding lateral = (viewport/2 − tarjeta/2) para centrar 1.ª y última */
    padding: 16px calc(50% - 37vw) 28px;
    scroll-padding: 0 calc(50% - 37vw);
  }
  .membr-track::-webkit-scrollbar { display: none; }

  /* Tarjeta: 74 vw de ancho, inclinada por defecto */
  .membr-card {
    flex: 0 0 74vw;
    width: 74vw;
    min-height: 270px;
    padding: 20px 18px 18px;
    scroll-snap-align: center;
    /* Rotación lateral → se endereza al activarse */
    transform: perspective(640px) rotateY(18deg) scale(0.90);
    opacity: 0.48;
    transition:
      transform  0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity    0.45s ease,
      box-shadow 0.45s ease;
    /* Resetear animación de desktop */
    animation: none;
  }

  /* Tarjeta activa: recta, prominente, flotante */
  .membr-card.membr-active {
    transform: perspective(640px) rotateY(0deg) scale(1) translateY(0);
    opacity: 1;
    border-color: var(--dark);
    box-shadow:
      0 4px 6px -1px  rgba(0,0,0,0.07),
      0 18px 44px -8px rgba(0,0,0,0.16);
    animation: membr-float-mob 5s ease-in-out 0.25s infinite;
  }

  /* Zoom al tap (clase añadida por JS cuando la tarjeta activa se toca) */
  .membr-card.membr-active.membr-zoomed {
    transform: perspective(640px) rotateY(0deg) scale(1.07) translateY(-7px);
    animation: none;
    box-shadow:
      0 0 0 2px var(--dark),
      0 16px 52px rgba(0,0,0,0.24);
    z-index: 20;
  }
}

/* Keyframe flotante para móvil (solo translación Y, sin rotación) */
@keyframes membr-float-mob {
  0%, 100% { transform: perspective(640px) rotateY(0deg) scale(1) translateY(0px); }
  50%      { transform: perspective(640px) rotateY(0deg) scale(1) translateY(-6px); }
}


/* ══════════════════════════════════════════════════════════════
   NAV — BRAND FLIP CARD + LAYOUT MÓVIL/TABLET
   ══════════════════════════════════════════════════════════════ */

/*
  En móvil/tablet el nav-links se oculta (display:none → pierde flex:1).
  Sin esa columna expansora, nav-brand y nav-right se quedan pegados a la
  izquierda. Forzar margin-left:auto en nav-right empuja los botones al
  extremo derecho independientemente del breakpoint.
*/
@media (max-width: 1024px) {
  .nav-right { margin-left: auto; }
}

/*
  Tamaños del flip card (brand-flipcard) según breakpoint.
  Se sobreescriben los valores previos para dar más protagonismo al logo
  en modo "tarjeta giratoria" — una sola cara a la vez → más grande.
*/

/* Tablet 769–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .brand-flipcard          { width: 260px !important; height: 82px !important; }
  .nav-logo-dr             { height: 76px !important; width: 76px !important;
                             max-height: 76px !important; max-width: 76px !important; }
  .nav-logo-pyl            { max-height: 62px !important; max-width: 230px !important; }
}

/* Móvil 431–768px */
@media (max-width: 768px) and (min-width: 431px) {
  .brand-flipcard          { width: 220px !important; height: 70px !important; }
  .nav-logo-dr             { height: 64px !important; width: 64px !important;
                             max-height: 64px !important; max-width: 64px !important; }
  .nav-logo-pyl            { max-height: 52px !important; max-width: 200px !important; }
}

/* Móvil ≤430px */
@media (max-width: 430px) {
  .brand-flipcard          { width: 160px !important; height: 58px !important; }
  .nav-logo-dr             { display: block !important;
                             height: 50px !important; width: 50px !important;
                             max-height: 50px !important; max-width: 50px !important; }
  .nav-logo-pyl            { display: block !important;
                             max-height: 38px !important; max-width: 148px !important; }
}

/* Móvil ≤390px */
@media (max-width: 390px) {
  .brand-flipcard          { width: 130px !important; height: 50px !important; }
  /* display:none heredado de reglas brand-combo antiguas → se restaura */
  .nav-logo-dr             { display: block !important;
                             height: 44px !important; width: 44px !important;
                             max-height: 44px !important; max-width: 44px !important; }
  .nav-logo-pyl            { display: block !important;
                             max-height: 32px !important; max-width: 120px !important; }
}

/* Móvil ≤360px */
@media (max-width: 360px) {
  .brand-flipcard          { width: 110px !important; height: 44px !important; }
  /* display:none heredado de reglas brand-combo antiguas → se restaura */
  .nav-logo-dr             { display: block !important;
                             height: 38px !important; width: 38px !important;
                             max-height: 38px !important; max-width: 38px !important; }
  .nav-logo-pyl            { display: block !important;
                             max-height: 28px !important; max-width: 100px !important; }
}