/* ═══════════════════════════════════════════════════════════════
   HERO DINÁMICO — Banner dual-modo premium
   Dr. Edward Sánchez ↔ Piel y Láser · Bucaramanga
   v5 — dark editorial luxury · curva metálica gruesa · badges
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --hdyn-bg:     #0d0d0d;
  --hdyn-text:   #f0eeec;
  --hdyn-muted:  rgba(240,238,236,0.46);
  --hdyn-gold:   #c9a86c;          /* champagne gold — Dr. mode */
  --hdyn-purple: #9b6fd4;          /* violet premium — PYL mode */
  --hdyn-nav:    100px;
  --hdyn-split:  46%;
}

/* ── Hero wrapper ───────────────────────────────────────────── */
.hero-dyn {
  display: flex;
  position: relative;
  height: calc(100vh - var(--hdyn-nav));
  min-height: 560px;
  overflow: hidden;
  background: var(--hdyn-bg);
}

/* ── Preload oculto ─────────────────────────────────────────── */
.hdyn-preload {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
  pointer-events: none;
}
.hdyn-preload img { width: 1px; height: 1px; }

/* ════════════════════════════════════════════════
   PANEL IZQUIERDO — Contenido dark + textura
   ════════════════════════════════════════════════ */
.hdyn-left {
  width: var(--hdyn-split);
  min-height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fondo oscuro con textura de profundidad */
  background:
    radial-gradient(ellipse 90% 60% at 15% 25%, rgba(30,30,30,0.92) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(18,18,18,0.75) 0%, transparent 55%),
    radial-gradient(ellipse 70% 30% at 50% 110%, rgba(22,22,22,0.6) 0%, transparent 50%),
    var(--hdyn-bg);
  z-index: 2;
  overflow: hidden;
}

/* Línea decorativa izquierda — tono gold sutil */
.hdyn-left-line {
  position: absolute;
  left: 40px;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201,168,108,0.10) 30%,
    rgba(201,168,108,0.18) 50%,
    rgba(201,168,108,0.10) 70%,
    transparent
  );
  pointer-events: none;
  animation: hdyn-line-breathe 7s ease-in-out infinite;
}

@keyframes hdyn-line-breathe {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.22; }
}

/* ── Orbs ambiental — fondo vivo en el panel izquierdo ──────
   Dos esferas de luz (gold + violeta) se mueven lentamente
   detrás del contenido. Solo transform = GPU, sin jank.
   ─────────────────────────────────────────────────────────── */
.hdyn-left::before,
.hdyn-left::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

/* Orb dorado — deriva desde esquina superior izquierda */
.hdyn-left::before {
  width: 480px; height: 480px;
  top: -80px;  left: -80px;
  background: radial-gradient(ellipse at center,
    rgba(201,168,108,0.14) 0%,
    rgba(201,168,108,0.04) 48%,
    transparent 70%
  );
  filter: blur(38px);
  animation: hdyn-orb-gold 22s ease-in-out infinite alternate;
}

/* Orb violeta — deriva desde esquina inferior derecha */
.hdyn-left::after {
  width: 420px; height: 420px;
  bottom: -70px; right: -70px;
  background: radial-gradient(ellipse at center,
    rgba(155,111,212,0.13) 0%,
    rgba(90,40,140,0.04)   48%,
    transparent 70%
  );
  filter: blur(44px);
  animation: hdyn-orb-purple 28s ease-in-out infinite alternate;
}

@keyframes hdyn-orb-gold {
  0%   { transform: translate(  0px,   0px) scale(1.00); }
  25%  { transform: translate( 80px, 100px) scale(1.16); }
  55%  { transform: translate(150px, 220px) scale(0.88); }
  80%  { transform: translate( 70px, 310px) scale(1.08); }
  100% { transform: translate(160px, 200px) scale(1.14); }
}

@keyframes hdyn-orb-purple {
  0%   { transform: translate(   0px,    0px) scale(1.00); }
  30%  { transform: translate( -70px,  -90px) scale(1.18); }
  58%  { transform: translate(-150px, -200px) scale(0.86); }
  82%  { transform: translate( -80px, -300px) scale(1.10); }
  100% { transform: translate(-150px, -170px) scale(1.16); }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .hdyn-left::before,
  .hdyn-left::after,
  .hdyn-left-line { animation: none; }
}

/* ─── Identidad combinada — siempre visible en el panel ──── */
.hdyn-combined-header {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  z-index: 5;
  pointer-events: none;
}
.hdyn-combined-name,
.hdyn-combined-brand {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,238,236,0.22);
}
.hdyn-combined-sep {
  font-size: 9px;
  color: var(--hdyn-gold);
  opacity: 0.50;
  line-height: 1;
}

/* ── Brand container ─────────────────────────────────────────── */
.hdyn-brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 52px 80px 52px;  /* simétrico — contenido centrado */
  gap: 16px;
  z-index: 2;   /* siempre sobre los orbs (z-index: 0) */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.70s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.70s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events: none;
}
.hdyn-brand.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 3;   /* sube sobre el brand inactivo durante transición */
}

/* ─── Entrada escalonada — solo transform (el padre controla opacity) ── */
/* La opacidad del padre maneja la visibilidad; los hijos agregan el deslizamiento. */
.hdyn-brand .hdyn-heading-wrap,
.hdyn-brand .hdyn-logo-wrap-pyl {
  transform: translateY(16px);
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hdyn-brand .hdyn-brand-sub {
  transform: translateY(12px);
  transition: transform 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hdyn-brand .hdyn-tagline {
  transform: translateY(10px);
  transition: transform 0.58s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hdyn-brand .hdyn-cta-group {
  transform: translateY(8px);
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hdyn-brand.active .hdyn-heading-wrap,
.hdyn-brand.active .hdyn-logo-wrap-pyl {
  transform: translateY(0); transition-delay: 0.08s;
}
.hdyn-brand.active .hdyn-brand-sub {
  transform: translateY(0); transition-delay: 0.18s;
}
.hdyn-brand.active .hdyn-tagline {
  transform: translateY(0); transition-delay: 0.28s;
}
.hdyn-brand.active .hdyn-cta-group {
  transform: translateY(0); transition-delay: 0.38s;
}

/* ── Heading: nombre display (DR - texto editorial) ──────────── */
.hdyn-heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hdyn-display-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  /* Gradient text — ivory a champagne gold */
  background: linear-gradient(138deg, #f5f3f1 15%, #c9a86c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hdyn-text); /* fallback */
}

.hdyn-display-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 1.0vw, 13px);
  font-weight: 400;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--hdyn-muted);
  margin: 0;
  display: flex;
  align-items: center;
  align-self: center;   /* centra bajo EDWARD SÁNCHEZ */
  gap: 12px;
}

.hdyn-title-dash {
  color: var(--hdyn-gold);
  opacity: 0.72;
  letter-spacing: 0;
}

/* ── Tipografía display — Piel Y Láser ───────────────────────── */
.hdyn-heading-wrap-pyl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hdyn-pyl-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5.0vw, 70px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  color: var(--hdyn-text);
}

/* La "Y" en plateado brillante */
.hdyn-pyl-y {
  color: #e8e8f0;
  text-shadow: 0 0 20px rgba(255,255,255,0.7), 0 0 40px rgba(200,200,220,0.5);
}

/* ── Fondo decorativo wave — solo PYL ─────────────────────────── */
.hdyn-brand-pyl {
  background:
    radial-gradient(ellipse 115% 70% at -10% 65%, rgba(180,180,190,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 108% 8%,  rgba(150,150,160,0.05) 0%, transparent 50%);
}

/* Regla PYL — shimmer plateado brillante */
.hdyn-brand-pyl .hdyn-brand-rule {
  background: linear-gradient(90deg,
    transparent 0%,
    #b0b0c0 25%,
    rgba(255,255,255,0.95) 50%,
    #b0b0c0 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  width: 68px;
}

/* CTA primario PYL — plateado brillante */
.hdyn-brand-pyl .hdyn-cta {
  background: linear-gradient(135deg, #d0d0e0 0%, #a8a8bc 40%, #787890 100%);
  border-color: rgba(220,220,235,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 22px rgba(150,150,180,0.40);
}
.hdyn-brand-pyl .hdyn-cta:hover {
  background: linear-gradient(135deg, #e8e8f5 0%, #c8c8dc 40%, #a0a0b8 100%);
  border-color: rgba(240,240,255,0.75);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 8px 30px rgba(150,150,180,0.55),
    0 0 20px rgba(200,200,230,0.25);
}

/* Badge icons PYL */
.hdyn-brand-pyl .hdyn-badge-item svg {
  color: rgba(200,200,220,0.80);
}

/* ── Subtítulo de marca ─────────────────────────────────────── */
.hdyn-brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hdyn-muted);
  margin: 0;
  line-height: 1;
}

/* ── Regla bajo subtítulo — gold animado ───────────────────── */
.hdyn-brand-rule {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--hdyn-gold) 30%,
    rgba(242,222,160,0.90) 55%,
    var(--hdyn-gold) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  flex-shrink: 0;
  margin: 0;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hdyn-brand.active .hdyn-brand-rule {
  transform: scaleX(1);
  transition-delay: 0.28s;
  animation: hdyn-shimmer-rule 4.5s 0.98s ease-in-out infinite;
}
@keyframes hdyn-shimmer-rule {
  0%   { background-position: -100% 0; }
  45%  { background-position: 120% 0; }
  100% { background-position: -100% 0; }
}

/* ── Tagline editorial ─────────────────────────────────────── */
.hdyn-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.7vw, 23px);
  font-weight: 300;
  font-style: normal;
  color: rgba(240,238,236,0.82);
  line-height: 1.55;
  margin: 0;
}
.hdyn-tagline strong {
  font-weight: 700;
  color: var(--hdyn-text);
}

/* ── Grupo CTAs ─────────────────────────────────────────────── */
.hdyn-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Botón primario — píldora metálica oscura */
.hdyn-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  background: linear-gradient(145deg, #1c1c1c 0%, #111 100%);
  color: var(--hdyn-text);
  border: 1px solid rgba(200,200,200,0.22);
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 18px rgba(0,0,0,0.55);
}
.hdyn-cta:hover {
  background: linear-gradient(145deg, #262626 0%, #181818 100%);
  border-color: rgba(201,168,108,0.42);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 8px 28px rgba(0,0,0,0.60),
    0 0 20px rgba(201,168,108,0.09);
}
.hdyn-cta svg { flex-shrink: 0; }

/* Botón ghost */
.hdyn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(200,198,196,0.58);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.22s;
  white-space: nowrap;
}
.hdyn-cta-ghost:hover { color: var(--hdyn-text); }

/* Herencia sin uso */
.hdyn-name    { display: none; }
.hdyn-sub-tag { display: none; }
.hdyn-logo-dr { display: none; }

/* ════════════════════════════════════════════════
   FEATURE BADGES — Iconos inferiores premium
   ════════════════════════════════════════════════ */
.hdyn-badges {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transition: opacity 0.70s 0.15s cubic-bezier(0.25,0.46,0.45,0.94);
}
.hdyn-brand.active .hdyn-badges { opacity: 1; }

.hdyn-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hdyn-badge-item svg {
  flex-shrink: 0;
  color: rgba(201,168,108,0.52);
}

.hdyn-badge-item span {
  font-family: 'Inter', sans-serif;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(200,198,196,0.54);
  line-height: 1.5;
  white-space: nowrap;
}

.hdyn-badge-sep {
  width: 1px;
  height: 26px;
  background: rgba(240,238,236,0.10);
  flex-shrink: 0;
  margin: 0 14px;
}

/* ════════════════════════════════════════════════
   SEPARADOR — Curva metálica gruesa premium
   ::before → extensión del fondo oscuro
   ::after  → franja metálica (CSS mask + gradient)
   ════════════════════════════════════════════════ */

/* 1. Fill oscuro — extiende el panel izquierdo */
.hdyn-right::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -3px;
  width: 115px;
  z-index: 12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 115 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 1000 L5 1000 C2 780 108 220 108 0 Z' fill='%230d0d0d'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 2. Franja metálica — gradiente clipeado a la curva */
.hdyn-right::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -3px;
  width: 152px;
  z-index: 13;
  pointer-events: none;
  /*
    Gradiente horizontal: oscuro (lado contenido) → plata → blanco (filo brillante) → plata → fades
    Simula metal pulido/satinado con luz viniendo desde arriba-derecha.
  */
  background: linear-gradient(
    to right,
    transparent          0%,
    rgba(10,10,10,0.98)  6%,
    rgba(50,50,50,0.90)  22%,
    rgba(130,130,130,0.88) 44%,
    rgba(205,205,205,0.94) 60%,
    rgba(242,242,242,0.98) 71%,
    rgba(205,205,205,0.90) 80%,
    rgba(110,110,110,0.40) 90%,
    transparent          97%
  );
  /* Máscara: recorta al área de la franja curva */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 152 1000' preserveAspectRatio='none'%3E%3Cpath d='M5 1000 C2 780 108 220 108 0 L142 0 C139 220 34 780 37 1000 Z' fill='white'/%3E%3C/svg%3E");
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 152 1000' preserveAspectRatio='none'%3E%3Cpath d='M5 1000 C2 780 108 220 108 0 L142 0 C139 220 34 780 37 1000 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size:         100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
}

.hdyn-divider { display: none; }

/* ════════════════════════════════════════════════
   PIVOT TOGGLE — glassmorphism oscuro
   ════════════════════════════════════════════════ */
.hdyn-pivot-wrap {
  position: absolute;
  left: calc(var(--hdyn-split) + 64px);  /* centro de la franja metálica a y=50% */
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: auto;
}

.hdyn-pivot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 88px;
  padding: 10px 0;
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50px;
  box-shadow:
    0 6px 32px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(0,0,0,0.35);
  gap: 0;
}

.hdyn-pivot-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 8px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.25s;
  border-radius: 50px;
}
.hdyn-pivot-opt:hover { background: rgba(255,255,255,0.06); }

.hdyn-pivot-opt::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.hdyn-pivot-opt:hover::before { opacity: 1; }

/* Indicador activo */
.hdyn-pivot-opt::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 2px;
  background: rgba(200,200,200,0.65);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.hdyn-pivot-opt.active::after { transform: translateX(-50%) scaleX(1); }

/* Imagen DR en pivot */
.hdyn-pivot-img--dr {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.35;
  transition: opacity 0.3s, transform 0.3s;
}
.hdyn-pivot-opt--dr.active .hdyn-pivot-img--dr,
.hdyn-pivot-opt--dr:hover  .hdyn-pivot-img--dr {
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(180,180,255,0.28));
}

/* Logo PYL en pivot */
.hdyn-pivot-img--pyl {
  width: 54px; height: auto;
  max-height: 28px;
  object-fit: contain;
  opacity: 0.26;
  transition: opacity 0.3s, transform 0.3s;
  filter: brightness(3);
}
.hdyn-pivot-opt--pyl.active .hdyn-pivot-img--pyl,
.hdyn-pivot-opt--pyl:hover  .hdyn-pivot-img--pyl {
  opacity: 0.88;
  transform: scale(1.05);
}

/* Labels pivot */
.hdyn-pivot-label {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-align: center;
  line-height: 1.4;
  transition: color 0.25s;
  pointer-events: none;
}
.hdyn-pivot-opt.active .hdyn-pivot-label,
.hdyn-pivot-opt:hover  .hdyn-pivot-label {
  color: rgba(255,255,255,0.80);
}

/* Línea separadora interna del pivot */
.hdyn-pivot-line {
  display: block;
  width: 32px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.14) 50%, transparent);
  margin: 2px 0;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   PANEL DERECHO — Galería
   ════════════════════════════════════════════════ */
.hdyn-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #1a1818;
  min-width: 0;
}

.hdyn-gallery {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.90s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.hdyn-gallery.active { opacity: 1; pointer-events: auto; }

.hdyn-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--hdyn-bg);
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}
.hdyn-img-active {
  opacity: 1;
  animation: hdyn-kb-a 22s ease-in-out infinite;
}

@keyframes hdyn-kb-a {
  0%   { transform: scale(1.08) translate(0%, 0%); }
  50%  { transform: scale(1.00) translate(-1%, 0.5%); }
  100% { transform: scale(1.08) translate(0%, 0%); }
}
@keyframes hdyn-kb-b {
  0%   { transform: scale(1.00) translate(0%, 0%); }
  50%  { transform: scale(1.08) translate(0.8%, -0.8%); }
  100% { transform: scale(1.00) translate(0%, 0%); }
}
.hdyn-gallery .hdyn-img:nth-child(even).hdyn-img-active {
  animation-name: hdyn-kb-b;
}

/* Overlays — gradiente oscuro en bordes */
.hdyn-overlay-left {
  position: absolute;
  inset: 0 auto 0 0;
  width: 16%;
  background: linear-gradient(to right, rgba(13,13,13,0.75), transparent);
  z-index: 4;
  pointer-events: none;
}
.hdyn-overlay-bottom {
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(to top, rgba(0,0,0,0.35), transparent);
  z-index: 4;
  pointer-events: none;
}

/* Badge de modo flotante */
.hdyn-badge-mode {
  position: absolute;
  top: 22px; right: 26px;
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
  z-index: 8;
  pointer-events: none;
}

/* Dots (ocultos, activados por pivot) */
.hdyn-dots {
  position: absolute;
  opacity: 0; pointer-events: none;
  visibility: hidden;
  inset: auto 0 0;
}
.hdyn-dot {
  width: 8px; height: 8px;
  border-radius: 50%; border: none;
  background: rgba(240,238,236,0.28);
  cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.hdyn-dot.active { background: #f0eeec; transform: scale(1.3); }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

/* ── Desktop grande: ajuste de espaciado ─────── */
@media (max-width: 1200px) {
  .hdyn-brand { padding: 50px 44px 72px 44px; }
  .hdyn-display-name { font-size: clamp(26px, 3.2vw, 46px); }
  .hdyn-pyl-name    { font-size: clamp(28px, 4.0vw, 56px); }
  .hdyn-badges { padding: 0 36px; }
}

/* ── Tablet + Móvil ≤ 1024px: layout APILADO + centrado ── */
@media (max-width: 1024px) {
  :root { --hdyn-split: 100%; }

  /* Stack vertical: texto arriba, foto abajo */
  .hero-dyn { flex-direction: column; height: auto; min-height: unset; }

  /* hdyn-left pasa a columna para que la brand ocupe el 100% del ancho */
  .hdyn-left {
    width: 100%;
    min-height: unset;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* Ocultar la marca INACTIVA para que no ocupe espacio en flujo normal */
  .hdyn-brand:not(.active) { display: none; }

  /* La marca activa: posición normal, ancho completo, texto centrado */
  .hdyn-brand {
    position: relative;
    inset: unset;
    width: 100%;
    padding: 52px 48px 56px;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  /* Texto centrado en cada hijo — ocupa todo el ancho del brand */
  .hdyn-display-name,
  .hdyn-pyl-name,
  .hdyn-tagline,
  .hdyn-brand-sub {
    text-align: center;
    width: 100%;
  }

  /* Heading wrap: centra su contenido interno */
  .hdyn-heading-wrap,
  .hdyn-heading-wrap-pyl { align-items: center; width: 100%; }

  /* Regla decorativa: estrecha y centrada */
  .hdyn-brand-rule { align-self: center; }

  /* CTAs centrados */
  .hdyn-cta-group {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Badges: posición static + centrados */
  .hdyn-badges {
    position: static;
    justify-content: center;
    padding: 0 0 4px;
  }

  /* Foto: altura proporcional con tope máximo en tablet */
  .hdyn-right { height: 46vw; min-height: 300px; max-height: 500px; }

  /* Fotos se recortan para cubrir el panel (sin barras negras) */
  .hdyn-img { object-fit: cover; object-position: center top; }

  /* Curva horizontal (divide panel texto / foto) */
  .hdyn-right::before {
    inset: -52px 0 auto 0;
    width: 100%; height: 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 56' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 5 C780 2 220 52 0 52 Z' fill='%230d0d0d'/%3E%3C/svg%3E");
  }

  /* Franja metálica horizontal */
  .hdyn-right::after {
    inset: -56px 0 auto 0;
    width: 100%; height: 62px;
    background: linear-gradient(
      to bottom,
      transparent            0%,
      rgba(10,10,10,0.98)    6%,
      rgba(130,130,130,0.88) 44%,
      rgba(242,242,242,0.98) 71%,
      rgba(110,110,110,0.40) 90%,
      transparent            97%
    );
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 62' preserveAspectRatio='none'%3E%3Cpath d='M1000 5 C780 2 220 52 0 52 L0 60 C220 60 780 10 1000 10 Z' fill='white'/%3E%3C/svg%3E");
    mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 62' preserveAspectRatio='none'%3E%3Cpath d='M1000 5 C780 2 220 52 0 52 L0 60 C220 60 780 10 1000 10 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Pivot horizontal entre los dos paneles */
  .hdyn-pivot-wrap {
    position: relative;
    left: unset; top: unset;
    transform: none;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background: var(--hdyn-bg);
  }
  .hdyn-pivot {
    flex-direction: row;
    width: auto;
    padding: 8px 14px;
    border-radius: 44px;
  }
  .hdyn-pivot-line {
    width: 1px; height: 34px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.14) 50%, transparent);
    margin: 0 4px;
  }
  .hdyn-pivot-label { display: none; }
  .hdyn-pivot-img--dr  { width: 38px; height: 38px; }
  .hdyn-pivot-img--pyl { width: 44px; max-height: 22px; }

  /* Badges y badge de modo */
  .hdyn-badges { padding: 0 28px; }
  .hdyn-badge-item span { font-size: 7px; }
  .hdyn-badge-mode { top: 12px; right: 14px; }
}

/* ── Fuentes intermedias 900px (ya dentro del stack) ── */
@media (max-width: 900px) {
  :root { --hdyn-nav: 92px; }
  .hdyn-display-name { font-size: clamp(24px, 5.5vw, 44px); }
  .hdyn-pyl-name    { font-size: clamp(24px, 6vw, 50px); }
  .hdyn-logo-pyl { width: clamp(180px, 40vw, 300px); max-height: 110px; }
  .hdyn-tagline { font-size: clamp(14px, 2.6vw, 20px); }
  .hdyn-cta { padding: 11px 24px; font-size: 10px; }
  .hdyn-cta-ghost { font-size: 10px; }
}

/* ── Móvil ≤ 768px ── */
@media (max-width: 768px) {
  :root { --hdyn-nav: 82px; }
  .hdyn-brand { padding: 40px 28px 52px; gap: 12px; }
  .hdyn-right { height: 60vw; min-height: 260px; max-height: 380px; }
  .hdyn-display-name { font-size: 28px; }
  .hdyn-pyl-name { font-size: 28px; }
  .hdyn-badges { padding: 0 16px; bottom: 20px; }
  .hdyn-badge-item span { display: none; }
  .hdyn-left-line { left: 16px; }
  .hdyn-badge-mode { display: none; }  /* ocultar en móvil — el nombre ya indica el modo */
  .hdyn-combined-header { top: 18px; gap: 6px; }
  .hdyn-combined-name, .hdyn-combined-brand { font-size: 7px; letter-spacing: 0.18em; }
}

/* ── Tiny mobile ≤ 420px ── */
@media (max-width: 420px) {
  .hdyn-brand { padding: 28px 20px 44px; gap: 10px; }
  .hdyn-display-name { font-size: 22px; }
  .hdyn-pyl-name { font-size: 22px; }
  .hdyn-tagline { font-size: 14px; }
  .hdyn-cta { padding: 11px 20px; font-size: 10px; }
  .hdyn-right { height: 72vw; min-height: 240px; }
}