/* Estilos propios que completan styles-DS0LMFEp.css (el CSS de Tailwind ya compilado
   que trajimos del scrape). Aquí solo va lo que no existía: samurái/sombra del hero,
   badges de color de los pergaminos, el slider de pergaminos y el carrusel de testimonios. */

/* ---------- Loader ---------- */
#dojo-loader { transition: opacity .5s ease; }
#dojo-loader.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Hero: samurái / sombra (bloques "Qué es El Dojo") ---------- */
.guide-figure {
  position: relative;
  pointer-events: none;
}
.guide-figure img { display: block; width: 100%; height: auto; }

/* El orden en el HTML es siempre imagen -> texto (lo necesita el float de
   móvil). En desktop es flex: fila normal para la sombra (imagen queda a la
   izquierda) y fila invertida para el samurái (imagen queda a la derecha). */
.guide-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .guide-row { flex-direction: row; gap: 3rem; align-items: center; }
  .guide-row--reverse { flex-direction: row-reverse; }
  .guide-text { flex: 1.3; }
  .guide-figure { flex: 1; }
  .guide-figure--right,
  .guide-figure--left { width: min(28vw, 400px); }
}

/* Móvil: fila flex con la imagen a un lado y el texto CENTRADO verticalmente
   a su altura (antes flotaba y el texto quedaba pegado arriba). La imagen
   sobresale un poco de la pantalla con fade sutil en ese borde. */
@media (max-width: 767px) {
  .guide-row {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
  }
  .guide-row--reverse { flex-direction: row-reverse; }
  .guide-row:not(.guide-row--reverse) { flex-direction: row; }
  .guide-text { flex: 1 1 auto; min-width: 0; }

  .guide-figure--right,
  .guide-figure--left { flex: 0 0 auto; width: 50vw; }
  .guide-figure--right {
    margin-right: -7vw;
    mask-image: linear-gradient(to right, black 60%, transparent 97%);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 97%);
  }
  .guide-figure--left {
    margin-left: -7vw;
    mask-image: linear-gradient(to left, black 60%, transparent 97%);
    -webkit-mask-image: linear-gradient(to left, black 60%, transparent 97%);
  }
}

/* ---------- Pergamino cerrado centrado + flotando (ya no sale de pantalla) ---------- */
.pergamino-float-center {
  display: flex;
  justify-content: center;
  margin: 0 auto 2.5rem;
  width: min(46vw, 260px);
  animation: dojo-float 5s ease-in-out infinite;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,0.65));
}
.pergamino-float-center img { width: 100%; display: block; }

/* ---------- Slider de pergaminos ---------- */
.pergamino-slider { position: relative; }
.pergamino-track {
  display: flex;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.pergamino-slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}
.pergamino-card {
  position: relative;
  width: min(88vw, 500px);
  /* container query: los textos de dentro se escalan con el ancho real
     de la tarjeta (cqw), así caben igual en desktop que en móvil */
  container-type: inline-size;
}
.pergamino-card img.pergamino-bg { display: block; width: 100%; }
.pergamino-card-content {
  /* Insets medidos sobre pergamino-v3.png (648x760 recortado a la caja
     visible): el papel útil empieza bajo el rollo/cuerda superior y termina
     antes del rollo inferior. */
  position: absolute;
  inset: 19% 12% 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  text-align: center;
  overflow: hidden;
}
.pergamino-badge {
  display: inline-block;
  padding: .35em .9em;
  border-radius: 999px;
  background: rgba(13,11,11,0.88);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: clamp(7px, 2.2cqw, 11px);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.pergamino-card-content h3 {
  line-height: 1.15;
  flex-shrink: 0;
  font-size: clamp(12px, 4.6cqw, 24px);
}
.pergamino-copy {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  overflow-y: auto;
  min-height: 0;
}
.pergamino-copy p {
  color: #3d332c;
  font-size: clamp(8px, 2.9cqw, 14px);
  line-height: 1.5;
}

.pergamino-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.pergamino-dots { display: flex; gap: .4rem; }
.pergamino-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #2a221f;
  transition: background .25s, width .25s;
}
.pergamino-dot.is-active { background: #ec3325; width: 20px; border-radius: 4px; }

/* ---------- Testimonios: carrusel arrastrable, sin recortar capturas ---------- */
.testi-shell {
  position:relative;
  margin-top:3rem;
  overflow:hidden;
}
.testi-carousel {
  --testi-card-width:clamp(220px,82vw,300px);
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-block:1.35rem;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  cursor:grab;
  user-select:none;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.testi-carousel::-webkit-scrollbar { display:none; }
.testi-carousel:focus-visible {
  outline:1px solid rgba(236,51,37,.55);
  outline-offset:-2px;
}
.testi-carousel.is-dragging {
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.testi-track {
  display:flex;
  width:max-content;
  gap:clamp(.85rem,3vw,1.5rem);
  padding-inline:max(1rem,calc((100vw - var(--testi-card-width)) / 2));
}
.testi-card {
  width:var(--testi-card-width);
  aspect-ratio:9 / 16;
  flex:none;
  overflow:hidden;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  border:1px solid rgba(231,220,193,.13);
  border-radius:1rem;
  background:#19191e;
  opacity:.58;
  transform:scale(.94);
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  cursor:zoom-in;
}
.testi-card.is-active {
  opacity:1;
  transform:scale(1);
  border-color:rgba(236,51,37,.42);
  box-shadow:0 24px 64px rgba(0,0,0,.62),0 0 34px rgba(236,51,37,.1);
}
.testi-card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:auto;
  -webkit-user-drag:none;
}
.testi-carousel.is-dragging .testi-card img { pointer-events:none; }
.testi-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:.65rem;
}
.testi-nav button {
  flex:none;
  transition:opacity .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.testi-nav button:not(:disabled):active { transform:scale(.94); }
.testi-nav button:disabled { opacity:.25; cursor:not-allowed; }
.testi-status {
  width:9rem;
  text-align:center;
}
.testi-hint {
  margin:0;
  color:#6f6760;
  font-size:7px;
  line-height:1.4;
  letter-spacing:.11em;
  white-space:nowrap;
}
.testi-counter {
  margin:.32rem 0 0;
  color:#e7dcc1;
  font-size:1.05rem;
  line-height:1;
  letter-spacing:.08em;
}
.testi-counter [data-testi-current] { color:#ec3325; }

@media (min-width: 48rem) {
  .testi-carousel { --testi-card-width:clamp(280px,24vw,340px); }
  .testi-track { gap:1.75rem; }
}

@media (max-width: 340px) {
  .testi-carousel { --testi-card-width:min(82vw,230px); }
  .testi-nav { gap:.65rem; }
  .testi-status { width:7.75rem; }
  .testi-hint { font-size:6px; }
}

@media (prefers-reduced-motion:reduce) {
  .testi-carousel { scroll-behavior:auto; }
  .testi-card { transition:none; }
}

/* ---------- Utilidades que el HTML nuevo necesita y el CSS scrapeado no traía
   (Tailwind solo compila las clases que detecta en el build original; estas son
   combinaciones nuevas que no existían en esa página) ---------- */
.bg-\[\#2a221f\] { background-color: #2a221f; }
.h-11 { height: 2.75rem; }
.h-20 { height: 5rem; }
.w-11 { width: 2.75rem; }
.items-baseline { align-items: baseline; }
.underline-offset-2 { text-underline-offset: 2px; }
.hover\:text-\[\#8a8178\]:hover { color: #8a8178; }
.pb-16 { padding-bottom: 4rem; }
.pb-0 { padding-bottom: 0; }
@media (min-width: 40rem) {
  .sm\:pt-6 { padding-top: 1.5rem; }
  .sm\:pb-24 { padding-bottom: 6rem; }
}
.mt-16 { margin-top: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-10 { padding-top: 2.5rem; }

@media (min-width: 40rem) {
  .sm\:h-24 { height: 6rem; }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:pt-16 { padding-top: 4rem; }
}
@media (min-width: 48rem) {
  .md\:grid-cols-\[1\.3fr_1fr\] { grid-template-columns: 1.3fr 1fr; }
  .md\:grid-cols-\[1fr_1\.3fr\] { grid-template-columns: 1fr 1.3fr; }
  .md\:ml-auto { margin-left: auto; }
  .md\:mx-0 { margin-left: 0; margin-right: 0; }
  .md\:text-left { text-align: left; }
  .md\:mt-8 { margin-top: 2rem; }
  .md\:mt-10 { margin-top: 2.5rem; }
}

/* ---------- Planes: botón menos redondeado + features ---------- */
.dojo-btn { border-radius: .5rem !important; }
.plan-card { min-height:34rem; border:1px solid #2a221f; background:#161211; box-shadow:0 20px 60px rgba(0,0,0,.45); transition:transform 150ms ease,filter 150ms ease; }
.plan-card:hover { transform:translateY(-4px); }
.plan-card-samurai { border-color:rgba(255,255,255,.72); background:linear-gradient(160deg,#1e1210 0%,#161211 55%); box-shadow:0 20px 70px rgba(236,51,37,.16),0 20px 60px rgba(0,0,0,.5); }
.plan-card-ronin { border-color:rgba(255,255,255,.78); background:#7a1c14; box-shadow:0 20px 70px rgba(122,28,20,.38),0 20px 60px rgba(0,0,0,.5); }
.plan-features { margin-top:1.1rem; display:flex; flex-direction:column; gap:.5rem; font-size:13px; line-height:1.4; }
.plan-features li { display:flex; gap:.5rem; }
.plan-price { display:inline-block; color:transparent; background-size:220% 100%; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.plan-price-raso { background-image:linear-gradient(105deg,#fffaf0 0%,#e7dcc1 52%,#fff 100%); }
.plan-price-samurai { background-image:linear-gradient(105deg,#ff8f7e 0%,#ec3325 45%,#b81910 72%,#ff7768 100%); animation:planPriceShimmer 4.8s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(236,51,37,.2)); }
.plan-price-ronin { background-image:linear-gradient(105deg,#fff 0%,#f4dfd5 38%,#fff8e8 68%,#fff 100%); animation:planPriceShimmer 5.4s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(255,255,255,.12)); }
@keyframes planPriceShimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@media (prefers-reduced-motion:reduce) { .plan-card{transition:none} .plan-price-samurai,.plan-price-ronin{animation:none} }

/* ---------- Footer ---------- */
footer img { margin-bottom: 1.25rem; }

/* ---------- Hero: scroll sellado hasta darle al play ---------- */
body.dojo-scroll-locked { overflow: hidden; height: 100vh; }

/* ---------- Lightbox de testimonios ---------- */
.testi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  background: rgba(13, 11, 11, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.testi-lightbox.hidden { display: none; }
.testi-lightbox img {
  max-width: min(92vw, 560px);
  max-height: 86vh;
  border-radius: 14px;
  border: 1px solid #2a221f;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
}

/* Los templos ahora se mueven en continuo con el scroll: sin transition de
   transform (la posición la pinta cada frame el JS), solo filtro/opacidad */
[data-temple-img] {
  transition: filter .4s, opacity .4s;
}

/* ---------- Samurái/sombra: fade-in al entrar + parallax sutil ---------- */
.guide-reveal {
  opacity: 0;
  transition: opacity .9s ease;
}
.guide-reveal.is-visible { opacity: 1; }
.guide-reveal img {
  will-change: transform;
  transition: transform .15s linear;
}

/* ---------- Tipografía del copy: SOLO móvil ----------
   Copy normal 12px, frases destacadas 15px por debajo de 40rem (móvil).
   En desktop (>=40rem) mandan las clases Tailwind normales (16/18/20/24). */
@media (max-width: 39.99rem) {
  .dojo-root .text-base { font-size: 12px; line-height: 1.7; }
  .dojo-root p.text-xl { font-size: 15px; }
}

/* ---------- Espaciado entre secciones: más apretado ----------
   Reducimos el padding vertical de todas las secciones (las clases Tailwind
   py-* que separan bloques) para que no haya tanto hueco muerto. */
.dojo-root .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.dojo-root .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
.dojo-root .py-24 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.dojo-root .pb-16 { padding-bottom: 2.5rem; }
.dojo-root .pt-24 { padding-top: 3.25rem; }
@media (min-width: 40rem) {
  .dojo-root .sm\:py-24 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .dojo-root .sm\:py-28 { padding-top: 4.25rem; padding-bottom: 4.25rem; }
  .dojo-root .sm\:py-32 { padding-top: 4.75rem; padding-bottom: 4.75rem; }
  .dojo-root .sm\:pb-24 { padding-bottom: 3.75rem; }
  .dojo-root .sm\:pt-32 { padding-top: 4rem; }
}

/* ---------- Títulos tokyo fluidos: nunca se salen de pantalla ----------
   clamp() en vez de tamaños fijos: escalan con el viewport. El verbo del
   templo (REPROGRAMAR, CONSOLIDAR...) es lo más ancho de la web en esa
   fuente, por eso tiene su propio tope. */
.dojo-root section h2.font-tokyo {
  font-size: clamp(22px, 5.5vw, 48px);
  overflow-wrap: break-word;
}
#templos [data-temple-title] {
  font-size: clamp(18px, 4.2vw, 44px);
  overflow-wrap: break-word;
}

/* ---------- Móvil: sección de templos compacta ---------- */
@media (max-width: 767px) {
  #templos [data-temple-label] { font-size: 10px; }
  #templos [data-temple-desc] { font-size: 12px; line-height: 1.5; }
  #templos [data-temple-img] img { width: clamp(90px, 18vh, 170px) !important; }
  #templos .absolute.right-0 { max-width: 58%; padding-right: 1rem; }
}


/* ---------- Preacceso: cuenta atrás fija + precios promocionales ---------- */
@keyframes preaccessGradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.preaccess-countdown {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: .65rem .75rem 0;
}
.preaccess-countdown__panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 1.5rem);
  padding: .55rem .9rem;
  overflow: hidden;
  border: 1px solid rgba(236,51,37,.52);
  border-radius: .65rem;
  color: #e7dcc1;
  background: linear-gradient(115deg,rgba(13,11,11,.97) 0%,rgba(64,11,33,.97) 30%,rgba(139,8,4,.94) 52%,rgba(34,9,16,.97) 74%,rgba(13,11,11,.97) 100%);
  background-size: 260% 260%;
  animation: preaccessGradientFlow 8s ease-in-out infinite;
  box-shadow: 0 12px 36px rgba(0,0,0,.58),0 0 28px rgba(236,51,37,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events:auto;
  cursor:pointer;
  color:inherit;
  text-decoration:none;
  transition:filter .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.preaccess-countdown__panel:hover {
  filter:brightness(1.08);
  border-color:rgba(255,106,91,.78);
  box-shadow:0 14px 42px rgba(0,0,0,.62),0 0 34px rgba(236,51,37,.24);
}
.preaccess-countdown__panel:focus-visible {
  outline:2px solid #fff8ed;
  outline-offset:3px;
}
#planes { scroll-margin-top:6rem; }
.preaccess-countdown__copy { min-width:0; }
.preaccess-countdown__eyebrow {
  display: grid;
  gap: .18rem;
  margin: 0;
  color: #ff5144;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: .1em;
}
.preaccess-countdown__eyebrow span { display:block; white-space:nowrap; }
.preaccess-countdown__eyebrow span:first-child { color:#fff8ed; }
.preaccess-countdown__date {
  display: block;
  margin-top: .28rem;
  color: #a89d92;
  font-size: 10px;
  white-space: nowrap;
}
.preaccess-countdown__units { display:flex; align-items:center; gap:.35rem; }
.preaccess-countdown__unit { min-width:2.25rem; text-align:center; }
.preaccess-countdown__value { display:block; font-size:1.05rem; line-height:1; color:#fff8ed; }
.preaccess-countdown__label { display:block; margin-top:.16rem; color:#a89d92; font-size:7px; letter-spacing:.08em; }
.preaccess-countdown__separator { color:#ff5144; font-size:.8rem; transform:translateY(-.25rem); }
.preaccess-plan-meta { margin-top:1.25rem; display:flex; align-items:center; gap:.5rem; }
.preaccess-plan-meta.hidden { display:none; }
.preaccess-plan-badge {
  border-radius:.25rem;
  padding:.25rem .5rem;
  color:#fff;
  background:#ec3325;
  font-family:'Pixelify Sans',monospace;
  font-size:7px;
  letter-spacing:.08em;
}
.preaccess-original-price { color:#5b544c; font-size:.875rem; text-decoration:line-through; }
.plan-card-ronin .preaccess-plan-badge { color:#7a1c14; background:#e7dcc1; }
.plan-card-ronin .preaccess-original-price { color:#f0c9c2; }

@media (max-width: 560px) {
  .preaccess-countdown { padding:.4rem .45rem 0; }
  .preaccess-countdown__panel {
    box-sizing:border-box;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    justify-content:stretch;
    gap:.45rem;
    padding:.52rem .6rem;
  }
  .preaccess-countdown__eyebrow {
    font-size:clamp(6px,1.9vw,7px);
    line-height:1.3;
    letter-spacing:.07em;
  }
  .preaccess-countdown__date { display:none; }
  .preaccess-countdown__units { justify-content:flex-end; gap:clamp(.08rem,1vw,.2rem); }
  .preaccess-countdown__unit { min-width:clamp(1.35rem,7vw,1.75rem); }
  .preaccess-countdown__value { font-size:clamp(.76rem,3.8vw,.92rem); }
  .preaccess-countdown__label { font-size:6px; letter-spacing:.04em; }
  .preaccess-countdown__separator { font-size:.62rem; }
}

@media (max-width: 380px) {
  .preaccess-countdown__panel {
    grid-template-columns:1fr;
    gap:.48rem;
    padding:.55rem .65rem;
  }
  .preaccess-countdown__copy { text-align:center; }
  .preaccess-countdown__eyebrow { font-size:6.5px; letter-spacing:.08em; }
  .preaccess-countdown__units { width:100%; justify-content:center; }
  .preaccess-countdown__unit { min-width:1.65rem; }
  .preaccess-countdown__value { font-size:.9rem; }
}

/* Las tarjetas conservan su jerarquía y acabado; solo ceden dimensiones en
   viewports estrechos para no forzar 34rem de alto ni desbordar el precio. */
@media (max-width: 420px) {
  #planes { padding-left:clamp(.7rem,4vw,1.25rem); padding-right:clamp(.7rem,4vw,1.25rem); }
  #planes > .mt-14 { margin-top:2.5rem; gap:1.25rem; }
  #planes .plan-card {
    min-width:0;
    min-height:0 !important;
    padding:clamp(1rem,5.5vw,1.5rem) !important;
    border-radius:.9rem;
  }
  #planes .plan-card h3 { font-size:clamp(1.25rem,7vw,1.5rem); }
  #planes [data-plan-price-row] { flex-wrap:wrap; row-gap:.25rem; }
  #planes .plan-price { font-size:clamp(2.4rem,14vw,3rem); }
  #planes [data-cycle-suffix] { font-size:clamp(.68rem,3.4vw,.8rem); }
  #planes [data-plan-detail] { overflow-wrap:anywhere; font-size:10px; line-height:1.45; }
  #planes .preaccess-plan-meta { margin-top:.9rem; flex-wrap:wrap; row-gap:.35rem; }
  #planes .preaccess-plan-badge { max-width:100%; padding:.22rem .42rem; line-height:1.35; text-align:center; }
  #planes .preaccess-original-price { font-size:.8rem; }
  #planes .plan-features { margin-top:.9rem; gap:.42rem; font-size:12px; line-height:1.45; }
  #planes .plan-features li { min-width:0; }
  #planes .plan-card > p { overflow-wrap:anywhere; }
  #planes .plan-card .dojo-btn { padding:.7rem .75rem !important; }
  #planes .plan-card .dojo-btn .font-pixel-sm { font-size:clamp(8px,2.8vw,10px); }
}

@media (max-width: 340px) {
  #planes .plan-card { padding:.9rem !important; }
  #planes .plan-price { font-size:2.25rem; }
  #planes .preaccess-plan-badge { font-size:6.5px; letter-spacing:.05em; }
}

@media (prefers-reduced-motion:reduce) {
  .preaccess-countdown__panel { animation:none; background-position:50% 50%; }
}