/* metodo.css — página "Nuestro método" (/metodo/).
   Se apoya en landing.css (variables, .container, .section-heading, .button, .final-cta)
   y solo añade lo propio de esta página. Fondos alternos blanco/lila como en el index. */

/* ── Apertura ── */
.mt-hero {
  padding: calc(var(--nav-height) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 4.5rem);
  background: var(--cloud);
}

.mt-hero-inner { max-width: 52rem; margin-inline: auto; text-align: center; }

.mt-hero h1 {
  margin-top: .75rem;
  color: var(--ink-deep);
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.mt-hero h1 span {
  display: block;
  background: linear-gradient(105deg, var(--brand-violet) 5%, var(--brand-sky) 60%, var(--brand-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mt-lead {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Las dos mitades, anunciadas de entrada: sin esto el lector se encontraba luego un
   "Primera mitad" sin saber que había dos. */
.mt-halves {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin: 2.5rem auto 0;
  list-style: none;
  text-align: left;
}

.mt-halves li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.mt-half-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand-violet);
  color: var(--white);
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}

.mt-halves li:nth-child(2) .mt-half-num { background: var(--brand-sky); }
.mt-halves strong { display: block; color: var(--ink-deep); font-family: 'Baloo 2', 'Kumbh Sans', sans-serif; font-size: 1.15rem; font-weight: 800; }
.mt-halves p { margin-top: .25rem; color: var(--ink-muted); font-size: .93rem; line-height: 1.6; }

/* ── Los 3 pasos ── */
.mt-steps { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--white); }

.mt-step-list { display: grid; gap: 1.25rem; margin-top: 2.5rem; list-style: none; }

.mt-step {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cloud);
}

/* el visual de cada paso, pegado abajo: así los tres quedan a la misma altura */
.mt-step .mt-step-visual, .mt-step .mt-chain { margin-top: auto; padding-top: 1.5rem; }

.mt-step-num {
  color: var(--brand-sky);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mt-step h3 { margin-top: .5rem; font-size: 1.25rem; font-weight: 800; }
.mt-step > p:not(.mt-step-num, .mt-step-visual, .mt-chain) { margin-top: .7rem; color: var(--ink-muted); line-height: 1.7; }
.mt-step b { color: var(--ink-deep); font-weight: 700; }

/* car -> caracol */
.mt-step-visual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}

.mt-word-en, .mt-word-key {
  display: inline-flex;
  align-items: center;
  padding: .5rem .85rem;
  border-radius: .75rem;
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
}

.mt-word-en { background: var(--brand-violet); color: var(--white); }
.mt-word-key { background: var(--cloud-blue); color: var(--ink-deep); }
.mt-word-key b { color: var(--brand-sky); }
.mt-arrow { color: var(--ink-muted); font-size: .8rem; font-weight: 600; }


/* cadena car -> caracol -> coche */
.mt-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}

.mt-chain span { padding: .35rem .7rem; border-radius: .6rem; background: var(--cloud-blue); }
.mt-chain b { color: var(--brand-sky); }
.mt-chain i { color: var(--line-strong); font-style: normal; }
.mt-chain-end { background: var(--memory-gold-soft); color: var(--ink-deep); }

/* ── "El truco no se lee. Se vive." (sección propia) ── */
.mt-live-section { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--white); }

/* texto centrado y el personaje debajo, de remate */
.mt-live { text-align: center; }
.mt-live-copy { max-width: 46rem; margin-inline: auto; }

/* mismo tamaño que los demás titulares de sección (ver .section-heading h2 en landing.css) */
.mt-live-copy h2 {
  color: var(--ink-deep);
  font-size: clamp(2rem, 1.25rem + 3vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.mt-live-copy h2 span {
  background: linear-gradient(105deg, var(--brand-violet) 5%, var(--brand-sky) 65%, var(--brand-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mt-live-copy p { margin-top: 1.1rem; color: var(--ink-muted); font-size: 1.02rem; line-height: 1.8; }
.mt-live-copy b { color: var(--ink-deep); font-weight: 700; }

.mt-live-fig { position: relative; margin-top: 2rem; }

/* halo suave detrás del personaje, para que no quede flotando en el vacío */
.mt-live-fig::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(80%, 20rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 55, 232, .14), transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mt-live-fig img {
  position: relative;
  z-index: 1;
  width: min(100%, 14rem);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 1.25rem 2rem rgba(42, 31, 95, .22));
  animation: prepy-float 4.6s ease-in-out infinite;
}


/* Captura real del modo estudio. La captura ya es la tarjeta blanca recortada, así que
   no lleva borde propio: solo la sombra, para que parezca que flota sobre la página. */
.mt-shot { margin-top: 2.5rem; text-align: center; }

.mt-shot img {
  width: min(100%, 56rem);
  height: auto;
  margin-inline: auto;
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3.5rem rgba(42, 31, 95, .16);
}

.mt-shot figcaption {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--ink-muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* ── Las cartas mnemotécnicas (sección propia) ── */
.mt-cards { padding: clamp(3.25rem, 6vw, 5rem) 0; background: linear-gradient(160deg, #FFFFFF 0%, #EAF6FF 100%); }

.mt-cards-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.mt-cards-head h2 {
  color: var(--ink-deep);
  font-size: clamp(2rem, 1.25rem + 3vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.mt-cards-head h2 span {
  background: linear-gradient(105deg, var(--brand-violet) 10%, var(--brand-sky) 70%, var(--brand-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mt-cards-head p { margin-top: .75rem; color: var(--ink-muted); line-height: 1.7; }

/* Info de Car | las dos cartas pegadas | info de Happy */
.mt-cards-stage { display: grid; gap: 2rem; margin-top: 3rem; align-items: center; }

/* las cartas se solapan: la sombra de una cae sobre la otra, como en la mano */
.mt-cards-pair { display: flex; justify-content: center; align-items: center; }

.mt-cards-pair img {
  width: min(48%, 17rem);
  height: auto;
  border-radius: 1.1rem;
  filter: drop-shadow(0 1.5rem 2.5rem rgba(42, 31, 95, .35));
  transition: transform .35s ease;
}

.mt-card-a { position: relative; z-index: 2; transform: rotate(-5deg); }
.mt-card-b { position: relative; z-index: 1; margin-left: -2.5rem; transform: rotate(5deg); }

/* al pasar el ratón, la carta se adelanta y se endereza */
.mt-cards-pair img:hover { z-index: 3; transform: rotate(0) translateY(-.75rem) scale(1.06); }

.mt-cards-copy { max-width: 26rem; margin-inline: auto; text-align: center; }

.mt-cards-copy h3 {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 .5rem 1.5rem rgba(42, 31, 95, .1);
  font-size: 1.35rem;
  font-weight: 800;
}

.mt-cards-copy h3 small { color: var(--brand-sky); font-size: .9rem; font-weight: 700; }
.mt-cards-copy p { margin-top: .9rem; color: var(--ink-muted); line-height: 1.7; }
.mt-cards-copy p b { color: var(--ink-deep); font-weight: 700; }

.mt-cards-note {
  margin-top: 2.5rem;
  color: var(--ink-muted);
  font-size: .95rem;
  text-align: center;
}

.mt-cards-note b { color: var(--ink-deep); }

/* ── Segundo pilar: los minijuegos ── */
.mt-games { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--cloud); }
.mt-games-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }

.mt-game-card {
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.mt-game-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--cloud);
  color: var(--brand-violet);
}

.mt-game-ico svg { width: 1.4rem; height: 1.4rem; }
.mt-game-card h3 { margin-top: 1rem; font-size: 1.15rem; font-weight: 800; }
.mt-game-card p { margin-top: .6rem; color: var(--ink-muted); font-size: .93rem; line-height: 1.7; }
.mt-game-card p b { color: var(--ink-deep); font-weight: 700; }

/* Carrusel de minijuegos: se desplaza solo hacia la izquierda, en bucle infinito.
   La lista está duplicada en el HTML, así que al recorrer el 50% del track la
   posición coincide con el inicio y el salto no se ve. Va a sangre a propósito:
   las capturas entrando y saliendo por los lados dan sensación de que hay muchos más. */
.mt-reel {
  margin-top: 2.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mt-reel-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: mt-reel-scroll 60s linear infinite;
}

.mt-reel:hover .mt-reel-track { animation-play-state: paused; }

@keyframes mt-reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - .625rem)); }   /* mitad del track + medio hueco */
}

.mt-reel-item {
  flex: 0 0 auto;
  width: min(80vw, 26rem);
}

.mt-reel-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(202, 208, 235, .8);
  border-radius: 1.1rem;
  box-shadow: 0 1rem 2.5rem rgba(42, 31, 95, .14);
}

.mt-reel-item figcaption { margin-top: .8rem; padding-inline: .25rem; }
.mt-reel-item b { display: block; color: var(--ink-deep); font-family: 'Baloo 2', 'Kumbh Sans', sans-serif; font-size: 1rem; font-weight: 800; }
.mt-reel-item span { display: block; margin-top: .15rem; color: var(--ink-muted); font-size: .85rem; line-height: 1.5; }

/* quien haya pedido menos animación, no ve el carrusel moverse solo */
@media (prefers-reduced-motion: reduce) {
  .mt-reel { overflow-x: auto; }
  .mt-reel-track { animation: none; }
}

.mt-games-note {
  max-width: 44rem;
  margin: 2.25rem auto 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--cloud-blue);
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.7;
  text-align: center;
}

.mt-games-note b { color: var(--ink-deep); }

/* ── Más ejemplos ── */
.mt-examples { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--cloud); }
.mt-ex-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }

.mt-ex {
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: center;
}

.mt-ex-head { margin-bottom: 1.15rem; }
.mt-ex-head h3 { color: var(--ink-deep); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.mt-ex-pron { margin-top: .15rem; color: var(--ink-muted); font-size: .84rem; }
.mt-ex-pron b { color: var(--brand-sky); font-weight: 700; }
.mt-ex img { width: min(100%, 11rem); height: 10rem; margin-inline: auto; object-fit: contain; }

.mt-ex-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-top: 1.25rem;
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: .92rem;
  font-weight: 800;
}

.mt-ex-chain span { padding: .28rem .5rem; border-radius: .5rem; background: var(--cloud-blue); }
.mt-ex-chain b { color: var(--brand-sky); }
.mt-ex-chain i { color: var(--line-strong); font-style: normal; }

.mt-ex-story { margin-top: 1rem; color: var(--ink); font-size: .98rem; line-height: 1.6; }
.mt-ex-story b { color: var(--brand-sky); }
.mt-ex-story .mt-hl { color: var(--brand-violet); }

.mt-ex-note {
  max-width: 46rem;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--brand-sky);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--white);
  color: var(--ink-muted);
  font-size: .95rem;
  line-height: 1.7;
}

.mt-ex-note b { color: var(--ink-deep); }

/* ── El universo de personajes ── */
/* El color de cada ficha (--tipo) es el mismo código que usa la app por tipo de palabra:
   verde sustantivo, azul verbo, morado adjetivo... (TYPE_COLOR en catalogo.js) */
.mt-universe { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--white); }

.mt-uni-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  list-style: none;
}

.mt-uni-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem 1rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--tipo);
  border-radius: var(--radius-md);
  background: var(--cloud);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mt-uni-item:hover { transform: translateY(-.3rem); box-shadow: 0 1rem 2.5rem rgba(42, 31, 95, .1); }

/* Caja de alto fijo: cada personaje tiene una proporción distinta (el caracol es ancho,
   willing es alto). Con object-fit todos ocupan el mismo hueco y los textos se alinean.
   --esc afina el peso visual: una figura compacta (el caracol) "pesa" más que una
   figura alta y estrecha aunque midan lo mismo. */
.mt-uni-item img { width: 100%; height: 7rem; object-fit: contain; transform: scale(var(--esc, 1)); }

.mt-uni-word {
  margin-top: .85rem;
  color: var(--tipo);
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.mt-uni-mean { margin-bottom: .75rem; color: var(--ink-muted); font-size: .88rem; }

.mt-uni-tag {
  margin-top: auto;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tipo) 14%, transparent);
  color: var(--tipo);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mt-uni-note {
  max-width: 44rem;
  margin: 2rem auto 0;
  color: var(--ink-muted);
  font-size: .95rem;
  line-height: 1.7;
  text-align: center;
}

/* ── Los universos (dentro de la sección Universo) ──
   Cuatro mundos, uno por color. La ilustración es panorámica y con alfa: va sobre un
   lavado del color del tipo (color-mix) para que se lea como "mundo" y no como recorte
   pegado sobre blanco. Alto fijo + object-fit: contain → los cuatro miden igual aunque
   sus proporciones no tengan nada que ver (el bosque es cuadrado, los verbos, una tira). */
.mt-worlds { margin-top: clamp(3rem, 6vw, 4.5rem); }

.mt-worlds-title {
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.mt-worlds-title span { color: var(--brand-violet); }

.mt-worlds-lead {
  max-width: 46rem;
  margin: .9rem auto 0;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.75;
  text-align: center;
}

.mt-worlds-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
  list-style: none;
}

.mt-world {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: clip;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mt-world:hover { transform: translateY(-.35rem); box-shadow: 0 1.25rem 2.75rem rgba(42, 31, 95, .12); }

.mt-world-art {
  display: grid;
  place-items: center;
  padding: 1.5rem 1.25rem;
  background:
    radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--tipo) 26%, transparent) 0%, transparent 70%),
    color-mix(in srgb, var(--tipo) 8%, #FFFFFF);
}

.mt-world-art img { width: 100%; height: 9.5rem; object-fit: contain; }

.mt-world-copy { padding: 1.35rem 1.5rem 1.6rem; border-top: 3px solid var(--tipo); }

.mt-world-tag {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tipo) 14%, transparent);
  color: var(--tipo);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mt-world-copy h4 {
  margin-top: .7rem;
  font-family: 'Baloo 2', 'Kumbh Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.mt-world-copy p { margin-top: .4rem; color: var(--ink-muted); font-size: .93rem; line-height: 1.65; }

.mt-worlds-note {
  max-width: 46rem;
  margin: 2rem auto 0;
  color: var(--ink-muted);
  font-size: .95rem;
  line-height: 1.7;
  text-align: center;
}

.mt-worlds-note b { color: var(--ink-deep); font-weight: 800; }

/* ── Rigor ── */
.mt-rigor { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--cloud); }
.mt-rigor-list { display: grid; gap: 1rem; margin-top: 2.5rem; list-style: none; }

.mt-rigor-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.mt-rigor-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--cloud-blue);
  color: var(--brand-sky);
}

.mt-rigor-ico svg { width: 1.4rem; height: 1.4rem; }
.mt-rigor-list h3 { font-size: 1.1rem; font-weight: 800; }
.mt-rigor-list p { margin-top: .5rem; color: var(--ink-muted); font-size: .95rem; line-height: 1.7; }
.mt-rigor-list p b { color: var(--ink-deep); font-weight: 700; }


/* ── Por qué funciona ── */
.mt-why { padding: clamp(3.25rem, 6vw, 5rem) 0; background: var(--cloud); }
.mt-why-grid { display: grid; gap: 1px; margin-top: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: clip; background: var(--line); }
.mt-why-grid article { padding: 1.75rem; background: var(--white); }
.mt-why-grid h3 { font-size: 1.1rem; font-weight: 800; }
.mt-why-grid p { margin-top: .65rem; color: var(--ink-muted); font-size: .92rem; line-height: 1.7; }

/* ── Cierre ── */
/* padding-bottom para que el panel morado no quede pegado al footer */
.mt-cta { padding: clamp(2rem, 4vw, 3rem) 0; background: var(--cloud); }
.mt-cta .final-cta-inner { border-radius: var(--radius-lg); }

/* ── Responsive ── */
@media (min-width: 768px) {
  /* sin align-items: start — así las tres tarjetas miden lo mismo aunque sobre hueco */
  .mt-step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-card-reveal { grid-template-columns: 1.15fr .85fr; padding: 2.5rem 3rem; }
  .mt-uni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-worlds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-world-art img { height: 11rem; }
  .mt-rigor-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-rigor-list li { grid-template-columns: 1fr; }
  /* info Car | cartas | info Happy — el texto de cada una mira hacia su carta */
  .mt-cards-stage { grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 3vw, 3rem); }
  .mt-cards-copy-izq { text-align: right; margin-right: 0; }
  .mt-cards-copy-der { text-align: left; margin-left: 0; }
  .mt-cards-pair img { width: 15.5rem; }
}

@media (min-width: 1024px) {
  .mt-uni-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mt-ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}