/* ==========================================================================
   Método H.K. — capa de mejora visual (diseño + animación)
   Se carga sobre el export de Claude Design sin tocar su CSS ni sus textos.
   Todo se activa solo si el JS arranca (html.hkx), para que nada quede
   invisible si el script falla o el navegador lo bloquea.
   ========================================================================== */

/* ── Fondos astrales ─────────────────────────────────────────────────────── */
.hkx-astral {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.hkx-astral > i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,218,166,0.9), rgba(200,166,106,0));
  opacity: 0;
  animation: hkxDrift var(--dur, 26s) var(--del, 0s) ease-in-out infinite;
}
.hkx-astral > svg {
  position: absolute; display: block; opacity: 0;
  animation: hkxTwinkle var(--dur, 9s) var(--del, 0s) ease-in-out infinite;
}
.hkx-astral[data-tone="light"] > i,
.hkx-astral[data-tone="light"] > svg { filter: saturate(1.15); }

@keyframes hkxTwinkle {
  0%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(0.7) rotate(0deg); }
  22%      { opacity: var(--max, 0.5); }
  50%      { opacity: calc(var(--max, 0.5) * 0.35); transform: translate3d(6px,-16px,0) scale(1) rotate(28deg); }
  78%      { opacity: var(--max, 0.5); }
}
@keyframes hkxDrift {
  0%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(0.85); }
  30%      { opacity: var(--max, 0.35); }
  50%      { transform: translate3d(-14px,-26px,0) scale(1.1); }
  70%      { opacity: calc(var(--max, 0.35) * 0.6); }
}

/* Las secciones necesitan contexto de apilado para alojar la capa astral */
.hkx-host { position: relative; }
.hkx-host > *:not(.hkx-astral) { position: relative; z-index: 1; }

/* ── Revelado al hacer scroll ────────────────────────────────────────────── */
html.hkx [data-hkx-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms cubic-bezier(.16,.84,.44,1), transform 760ms cubic-bezier(.16,.84,.44,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.hkx [data-hkx-rv="left"]  { transform: translateX(-28px); }
html.hkx [data-hkx-rv="right"] { transform: translateX(28px); }
html.hkx [data-hkx-rv="zoom"]  { transform: scale(0.955); }
html.hkx [data-hkx-rv].hkx-in  { opacity: 1; transform: none; }

/* ── Tarjetas: elevación + glow dorado ───────────────────────────────────── */
.hkx-lift {
  transition: transform 420ms cubic-bezier(.16,.84,.44,1), box-shadow 420ms ease, border-color 420ms ease;
}
.hkx-lift:hover {
  transform: translateY(-7px);
  border-color: rgba(200,166,106,0.85) !important;
  box-shadow: 0 22px 48px rgba(23,20,18,0.16), 0 0 46px rgba(200,166,106,0.30) !important;
}
@media (hover: none) { .hkx-lift:hover { transform: none; } }

/* ── Línea conectora que se dibuja ───────────────────────────────────────── */
.hkx-thread { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.hkx-thread path {
  fill: none; stroke: #C8A66A; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset 140ms linear;
  opacity: 0.75;
}
.hkx-node.hkx-lit { animation: hkxPulseNode 2.6s ease-in-out infinite; }
@keyframes hkxPulseNode {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(200,166,106,0)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 10px rgba(200,166,106,0.75)); transform: scale(1.07); }
}

/* ── Contador ────────────────────────────────────────────────────────────── */
.hkx-count { font-variant-numeric: tabular-nums; }

/* ── Carrusel de testimonios ─────────────────────────────────────────────── */
.hkx-carousel { position: relative; }
.hkx-track {
  display: flex; gap: clamp(18px, 2vw, 26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
  padding-bottom: 4px;
}
.hkx-track::-webkit-scrollbar { display: none; height: 0; width: 0; }
.hkx-track > * { scroll-snap-align: center; flex: 0 0 auto; }
.hkx-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(200,166,106,0.55);
  background-image: linear-gradient(165deg, rgba(23,20,18,0.72) 0%, rgba(23,20,18,0.5) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(23,20,18,0.3);
  transition: transform 320ms cubic-bezier(.16,.84,.44,1), border-color 320ms ease, opacity 320ms ease;
}
.hkx-arrow:hover { border-color: #E6C98D; transform: translateY(-50%) scale(1.09); }
.hkx-arrow[data-dir="prev"] { left: 0; }
.hkx-arrow[data-dir="next"] { right: 0; }
.hkx-dots { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.hkx-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background-image: linear-gradient(145deg, #F0DAA6 0%, #C8A66A 52%, #9C7F4D 100%);
  opacity: 0.3; transition: opacity 380ms ease, transform 380ms ease;
}
.hkx-dot.hkx-on { opacity: 1; transform: scale(1.25); box-shadow: 0 0 10px rgba(200,166,106,0.65); }
@media (max-width: 860px) {
  .hkx-arrow { width: 42px; height: 42px; }
}

/* ── Botón de WhatsApp del header ────────────────────────────────────────── */
.hkx-wa {
  font-family: Inter, sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #FFFFFF; white-space: nowrap;
  background-image: linear-gradient(180deg, #25D366 0%, #12A150 100%);
  border-radius: 999px; padding: 13px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 8px 22px rgba(18,140,126,0.32);
  transition: transform 300ms cubic-bezier(.16,.84,.44,1), box-shadow 300ms ease, filter 300ms ease;
}
.hkx-wa:hover {
  color: #FFFFFF; transform: translateY(-3px); filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 32px rgba(18,140,126,0.46);
}
.hkx-wa:active { transform: translateY(-1px) scale(0.985); }
.hkx-wa svg { flex: 0 0 auto; display: block; }
.hkx-wa-txt { display: inline; }
@media (max-width: 1180px) and (min-width: 881px) {
  .hkx-wa-txt { display: none; }
  .hkx-wa { padding: 13px 15px; }
}
@media (max-width: 880px) {
  .hkx-wa { width: 100%; padding: 15px 18px; }
}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.hkx-field-err {
  border-color: #C0553D !important;
  box-shadow: 0 0 0 4px rgba(192,85,61,0.14) !important;
}
.hkx-err-msg {
  display: block; margin: 9px 2px 0;
  font-family: Inter, sans-serif; font-size: 12.5px;
  color: #B24A32; opacity: 0; transform: translateY(-5px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.hkx-err-msg.hkx-on { opacity: 1; transform: none; }
.hkx-field-ok {
  border-color: rgba(200,166,106,0.9) !important;
  box-shadow: 0 0 0 3px rgba(200,166,106,0.12) !important;
}
.hkx-sending { opacity: 0.55; pointer-events: none; }

/* Confirmación con check animado */
.hkx-success {
  display: grid; justify-items: center; text-align: center;
  gap: 20px; padding: clamp(38px, 6vw, 68px) clamp(20px, 4vw, 44px);
  animation: hkxFadeIn 640ms cubic-bezier(.16,.84,.44,1) both;
}
.hkx-success svg { display: block; }
.hkx-success .hkx-circle {
  fill: none; stroke: #C8A66A; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 176; stroke-dashoffset: 176;
  animation: hkxDraw 760ms 120ms cubic-bezier(.16,.84,.44,1) forwards;
}
.hkx-success .hkx-check {
  fill: none; stroke: #C8A66A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  animation: hkxDraw 460ms 720ms cubic-bezier(.16,.84,.44,1) forwards;
}
.hkx-success .hkx-halo {
  fill: rgba(200,166,106,0.12);
  transform-origin: center; transform: scale(0);
  animation: hkxPop 620ms 640ms cubic-bezier(.16,.84,.44,1) forwards;
}
.hkx-success-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.24; margin: 0;
  animation: hkxUp 620ms 860ms cubic-bezier(.16,.84,.44,1) both;
}
.hkx-success-text {
  font-size: 16px; line-height: 1.8; margin: 0; max-width: 30em; opacity: 0.85;
  animation: hkxUp 620ms 1000ms cubic-bezier(.16,.84,.44,1) both;
}
@keyframes hkxDraw   { to { stroke-dashoffset: 0; } }
@keyframes hkxPop    { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes hkxUp     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hkxFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Desplegables custom: entrada suave ──────────────────────────────────── */
.hkx-pop {
  animation: hkxPopIn 260ms cubic-bezier(.16,.84,.44,1) both;
  transform-origin: top center;
}
@keyframes hkxPopIn { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ── Indicador de scroll del hero: rebote continuo ───────────────────────── */
.hkx-bounce { animation: hkxBounce 2.4s ease-in-out infinite; }
@keyframes hkxBounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(9px); opacity: 1; }
}

/* ── Accesibilidad: sin movimiento ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.hkx [data-hkx-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hkx-astral { display: none !important; }
  .hkx-thread path { stroke-dashoffset: 0 !important; transition: none !important; }
  .hkx-track { scroll-behavior: auto; }
  .hkx-success .hkx-circle, .hkx-success .hkx-check { stroke-dashoffset: 0 !important; }
  .hkx-success .hkx-halo { transform: scale(1) !important; }
}


/* ==========================================================================
   CORRECCIONES DE CAJA
   La plantilla usa box-sizing: content-box, asi que "width: 100%" mas el
   padding se sale del contenedor. Forzamos border-box en lo que anadimos.
   ========================================================================== */
.hkx-wa, .hkx-arrow, .hkx-dot, .hkx-success { box-sizing: border-box; }

/* Tarjetas del carrusel: que quepan de una en una en movil */
.hkx-track > figure { box-sizing: border-box; }
@media (max-width: 860px) {
  .hkx-track > figure { width: min(315px, 84vw) !important; flex: 0 0 auto !important; }
}

/* ── MENU MOVIL: DOS BOTONES ──────────────────────────────────────────────
   El contenedor del CTA se diseño para UN solo boton (justify-content:
   flex-end y el hijo a width:100%). Al anadir el de WhatsApp, los dos juntos
   superan el ancho y el sobrante se sale por la izquierda. En el menu
   desplegado los apilamos, que ademas se toca mejor.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  [data-hk-header][data-open] [data-hk-bar] > div:last-of-type {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  [data-hk-header][data-open] [data-hk-bar] > div:last-of-type > a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   PLACEHOLDER CON ETIQUETA FLOTANTE
   Los campos de estos formularios usan label flotante y ninguno lleva
   placeholder: si se muestra con el campo vacio, se solapa con la etiqueta.
   Se revela solo al enfocar, que es cuando la etiqueta ya ha subido.
   ========================================================================== */
[data-float] input::placeholder,
[data-float] textarea::placeholder { color: transparent; transition: color 200ms ease; }
[data-float] input:focus::placeholder,
[data-float] textarea:focus::placeholder { color: rgba(121,107,91,0.55); }


/* ==========================================================================
   REPRODUCTOR DE YOUTUBE (fachada ligera)
   Se muestra la portada de marca con el boton de play de YouTube. El iframe
   solo se inserta al pulsar: la pagina no carga los ~1.5 MB de scripts de
   YouTube ni sus cookies hasta que alguien decide ver el video.
   ========================================================================== */
.hkx-yt {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; cursor: pointer;
  background: linear-gradient(165deg, #241F1B 0%, #14110F 100%);
}
.hkx-yt picture, .hkx-yt .hkx-yt-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
}
.hkx-yt .hkx-yt-thumb {
  transition: transform 900ms cubic-bezier(.16,.84,.44,1), filter 600ms ease;
}
.hkx-yt:hover .hkx-yt-thumb { transform: scale(1.035); filter: brightness(1.06); }

/* Velo: mantiene legible el boton sobre cualquier zona de la foto */
.hkx-yt-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Suave: la miniatura del canal ya es oscura y tiene su propia
     composicion; solo se refuerza la base para que el chip de duracion
     se lea siempre. */
  background-image:
    radial-gradient(46% 42% at 50% 50%, rgba(18,15,13,0.18) 0%, rgba(18,15,13,0) 76%),
    linear-gradient(180deg, rgba(18,15,13,0) 55%, rgba(18,15,13,0.42) 100%);
  transition: opacity 600ms ease;
}
.hkx-yt:hover .hkx-yt-scrim { opacity: 0.82; }

/* Boton de play con la forma oficial de YouTube */
.hkx-yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; border: 0; padding: 0; background: none; cursor: pointer;
  line-height: 0; -webkit-tap-highlight-color: transparent;
  transition: transform 380ms cubic-bezier(.16,.84,.44,1), filter 380ms ease;
}
.hkx-yt-play svg { width: clamp(68px, 7vw, 86px); height: auto; display: block; overflow: visible; }
.hkx-yt-play .hkx-yt-shape {
  fill: #1F1B18; fill-opacity: 0.86;
  transition: fill 320ms ease, fill-opacity 320ms ease;
}
/* Aro dorado tenue: ata el boton a la identidad sin romper el logo */
.hkx-yt-play::after {
  content: ''; position: absolute; inset: -26%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(200,166,106,0.34), rgba(200,166,106,0));
  opacity: 0; transition: opacity 420ms ease;
}
.hkx-yt:hover .hkx-yt-play { transform: translate(-50%, -50%) scale(1.08); }
.hkx-yt:hover .hkx-yt-play .hkx-yt-shape { fill: #FF0000; fill-opacity: 1; }
.hkx-yt:hover .hkx-yt-play::after { opacity: 1; }
.hkx-yt-play:focus-visible { outline: 2px solid #E6C98D; outline-offset: 10px; border-radius: 14px; }
.hkx-yt-play:active { transform: translate(-50%, -50%) scale(0.97); }

/* Chip de duracion, abajo a la derecha (como en YouTube) */
.hkx-yt-dur {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  font-family: Inter, sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #F3EADA;
  background: rgba(18,15,13,0.72); border: 1px solid rgba(200,166,106,0.4);
  border-radius: 999px; padding: 6px 13px; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Estado "cargando" entre el clic y el iframe */
.hkx-yt[data-cargando] .hkx-yt-play { opacity: 0.35; }
.hkx-yt iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; z-index: 4;
  animation: hkxFadeIn 420ms ease both;
}

@media (hover: none) {
  .hkx-yt:hover .hkx-yt-thumb { transform: none; }
  .hkx-yt-play .hkx-yt-shape { fill: #FF0000; fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hkx-yt .hkx-yt-thumb, .hkx-yt-play { transition: none !important; }
  .hkx-yt iframe { animation: none !important; }
}


/* ==========================================================================
   AJUSTES MOVIL DEL REPRODUCTOR
   ========================================================================== */
@media (max-width: 600px) {
  /* El chip ocupaba mas de la mitad del ancho del video: se compacta. */
  .hkx-yt-dur {
    right: 10px; bottom: 10px;
    font-size: 10px; letter-spacing: 0.1em; padding: 5px 10px;
  }
}
/* Objetivo tactil garantizado, aunque el SVG se quede corto */
.hkx-yt-play { min-width: 48px; min-height: 48px; display: grid; place-items: center; }