/* ============================================================
   index.css — Razonando QuímicaMente
   Estilos de la página principal (index.html).
   Unifica la base de secciones (hero, demo "Memorizar vs
   Razonar", ruta, método, testimonios) con los ajustes del
   hero (fondo, logo, panel verde). Depende de main.css.
   Nota: las clases conservan el prefijo .v2- por histórico.
   ============================================================ */

/* ============================================================
   index_v2.css — Razonando QuímicaMente
   Estilos EXCLUSIVOS de la propuesta index_v2.html.
   Depende de main.css (variables, nav, footer, botones,
   .sobre, .cta-final, .reveal). No pisa al index original.
   Prefijo .v2- para no chocar con clases existentes.
   ============================================================ */


/* ── HERO ─────────────────────────────────────────────── */
.v2-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  /* safe center: centra cuando el contenido entra en pantalla, pero si es
     más alto que el viewport lo ancla arriba (respeta el padding del menú)
     y crece hacia abajo, en vez de treparse y quedar tapado por el nav. */
  align-items: safe center;
  padding: 7.5rem 5% 4rem;
  background:
    radial-gradient(1100px 600px at 78% 18%, var(--verde-palido) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 90%, var(--naranja-palido) 0%, transparent 55%),
    var(--crema);
  overflow: hidden;
}

.v2-hero-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.75rem;
  align-items: center;
}

.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--gris-claro);
  color: var(--verde);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

.v2-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja);
  animation: v2pulse 2s ease-in-out infinite;
}

@keyframes v2pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.6);
    opacity: 0.55;
  }
}

.v2-hero-copy h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin-bottom: 1.4rem;
}

.hl-verde {
  color: var(--verde);
}

.hl-tachado {
  position: relative;
  color: var(--gris-medio);
  white-space: nowrap;
}

.hl-tachado::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 3px;
  background: var(--rojo);
  border-radius: 2px;
  transform: rotate(-3deg);
}

.v2-hero-desc {
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gris-medio);
  margin-bottom: 2rem;
}

.v2-hero-desc strong {
  color: var(--tinta);
}

.v2-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* franja de confianza */
.v2-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.v2-trust-item {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.v2-trust-item strong {
  font-family: 'Nunito', sans-serif;
  font-size: 1.6rem;
  color: var(--verde);
}

.v2-trust-item span {
  font-size: 0.76rem;
  color: var(--gris-medio);
}

.v2-trust-sep {
  width: 1px;
  height: 34px;
  background: var(--gris-claro);
}

/* tarjeta anticipo (peek) */
.v2-hero-visual {
  display: flex;
  justify-content: center;
}

.v2-peek {
  width: 100%;
  max-width: 400px;
  background: white;
  border: 1px solid var(--gris-claro);
  border-radius: 22px;
  padding: 1.6rem 1.6rem 1.3rem;
  box-shadow: 0 30px 70px rgba(78, 136, 128, 0.16);
  transform: rotate(1.4deg);
  transition: transform 0.3s;
}

.v2-peek:hover {
  transform: rotate(0deg) translateY(-4px);
}

.v2-peek-top {
  margin-bottom: 0.9rem;
}

.v2-peek-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
  background: var(--rojo-palido);
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
}

.v2-peek-q {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  color: var(--tinta);
  line-height: 1.35;
  margin-bottom: 1.1rem;
}

.v2-peek-steps {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}

.v2-peek-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--gris-medio);
  line-height: 1.45;
}

.v2-peek-step span {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--verde-palido);
  color: var(--verde);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-peek-step--hl {
  color: var(--tinta);
  font-weight: 600;
}

.v2-peek-step--hl span {
  background: var(--verde);
  color: white;
}

.v2-peek-foot {
  border-top: 1px dashed var(--gris-claro);
  padding-top: 0.85rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--verde);
}

/* indicador de scroll */
.v2-scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid white;
  border-radius: 14px;
  opacity: 0.6;
}

.v2-scroll-cue span {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  border-radius: 4px;
  background: white;
  animation: v2scroll 1.6s ease-in-out infinite;
}

@keyframes v2scroll {

  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }

  40% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }

  100% {
    opacity: 0;
  }
}


/* ── DEMO (corazón de la página) ──────────────────────── */
.v2-demo {
  padding: 5.5rem 5%;
  background: var(--verde-fondo);
}

/* Demo en 2 columnas: texto + tabs a la izquierda, panel interactivo a la derecha */
.v2-demo-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 3rem;
  align-items: start;
}

.v2-demo-head {
  margin: 0 0 2.5rem;
}

.v2-demo-head .section-label {
  display: block;
}

.v2-demo-sub {
  color: var(--gris-medio);
  line-height: 1.75;
  font-size: 1rem;
  margin-top: 0.4rem;
  max-width: 640px;
}

.v2-demo-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .v2-demo-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .v2-demo-tabs {
    justify-content: center;
  }
}

.v2-tab {
  font-family: 'Mulish', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gris-medio);
  background: white;
  border: 1px solid var(--gris-claro);
  border-radius: 100px;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
}

.v2-tab:hover {
  color: var(--verde);
  border-color: var(--verde-claro);
}

.v2-tab.is-active {
  background: var(--verde);
  border-color: var(--verde);
  color: white;
  box-shadow: 0 6px 18px rgba(78, 136, 128, 0.28);
}

.v2-demo-stage {
  width: 100%;
  margin: 0;
  background: white;
  border: 1px solid var(--gris-claro);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.v2-demo-question {
  text-align: center;
  padding: 0 1rem 1.5rem;
  border-bottom: 1px solid var(--gris-claro);
  margin-bottom: 1.6rem;
}

.v2-demo-qtag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--naranja);
}

.v2-demo-qtext {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--tinta);
  line-height: 1.3;
  margin-top: 0.5rem;
}

.v2-demo-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.v2-col {
  border-radius: 18px;
  padding: 1.3rem;
}

.v2-col--memo {
  background: var(--rojo-palido);
  border: 1px solid var(--rojo-claro);
}

.v2-col--razon {
  background: var(--verde-palido);
  border: 1px solid var(--verde-claro);
}

.v2-col-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.v2-col-icon {
  font-size: 1.6rem;
}

.v2-col-head h3 {
  font-size: 1.05rem;
  color: var(--tinta);
  line-height: 1.1;
}

.v2-col-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gris-medio);
}

.v2-col--memo .v2-col-tag {
  color: var(--rojo-oscuro);
}

.v2-col--razon .v2-col-tag {
  color: var(--verde);
}

/* lado memorizar: líneas de "ruido" */
.v2-memo-line {
  font-size: 0.9rem;
  color: #9a4a57;
  line-height: 1.5;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  margin-bottom: 0.55rem;
  border-left: 3px solid var(--rojo-claro);
}

.v2-memo-line:last-child {
  margin-bottom: 0;
}

/* lado razonar: pasos */
.v2-steps {
  min-height: 60px;
}

.v2-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: white;
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.6rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s, transform 0.35s;
}

.v2-step.in {
  opacity: 1;
  transform: translateY(0);
}

.v2-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--verde);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-step-concept {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--verde);
  background: var(--verde-palido);
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  margin-bottom: 0.35rem;
}

.v2-step-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gris-medio);
}

.v2-step-body strong {
  color: var(--tinta);
}

.v2-demo-controls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.v2-next {
  font-size: 0.86rem;
  padding: 0.65rem 1.3rem;
}

.v2-reset {
  background: none;
  border: none;
  color: var(--verde);
  font-family: 'Mulish', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.v2-demo-payoff {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px dashed var(--verde);
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--gris-medio);
  line-height: 1.55;
}

.v2-demo-payoff strong {
  color: var(--verde);
}


/* ── RUTA DE APRENDIZAJE ──────────────────────────────── */
.v2-ruta {
  padding: 5.5rem 5%;
  background: var(--crema);
}

.v2-ruta-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2.6rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.v2-ruta-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.v2-ruta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--gris-claro);
  border-radius: 20px;
  padding: 1.9rem 1.6rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.v2-ruta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.v2-ruta-card[data-accent="verde"]::before {
  background: var(--verde);
}

.v2-ruta-card[data-accent="naranja"]::before {
  background: var(--naranja);
}

.v2-ruta-card[data-accent="rojo"]::before {
  background: var(--rojo);
}

.v2-ruta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
}

.v2-ruta-card:hover::before {
  transform: scaleX(1);
}

.v2-ruta-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.v2-ruta-icon svg,
.v2-ruta-icon .mat-ico,
.v2-ruta-icon .ico {
  width: 26px;
  height: 26px;
}

.v2-ruta-card[data-accent="verde"] .v2-ruta-icon {
  background: var(--verde-palido);
  color: var(--verde);
}

.v2-ruta-card[data-accent="naranja"] .v2-ruta-icon {
  background: var(--naranja-palido);
  color: var(--naranja);
}

.v2-ruta-card[data-accent="rojo"] .v2-ruta-icon {
  background: var(--rojo-palido);
  color: var(--rojo);
}

.v2-ruta-card h3 {
  font-size: 1.15rem;
  color: var(--tinta);
  margin-bottom: 0.6rem;
}

.v2-ruta-card>p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--gris-medio);
  margin-bottom: 1.1rem;
}

.v2-ruta-pill {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 700;
  padding: 0.28rem 0.8rem;
  border-radius: 100px;
  margin-top: 1.2rem;
  border: 1px solid;
}

.v2-ruta-card[data-accent="verde"] .v2-ruta-pill {
  background: var(--verde-palido);
  color: var(--verde);
  border-color: var(--verde-claro);
}

.v2-ruta-card[data-accent="naranja"] .v2-ruta-pill {
  background: var(--naranja-palido);
  color: var(--naranja-oscuro);
  border-color: var(--naranja-claro);
}

.v2-ruta-card[data-accent="rojo"] .v2-ruta-pill {
  background: var(--rojo-palido);
  color: var(--rojo-oscuro);
  border-color: var(--rojo-claro);
}

.v2-ruta-go {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--verde);
  transition: gap 0.2s;
}

.v2-ruta-card:hover .v2-ruta-go {
  color: var(--verde);
}


/* ── MÉTODO ───────────────────────────────────────────── */
.v2-metodo {
  padding: 5.5rem 5%;
  background: var(--verde);
  color: white;
}

.v2-metodo .section-label {
  color: rgba(255, 255, 255, 0.72);
}

.v2-metodo .section-title {
  color: white;
  margin-bottom: 0.5rem;
}

.v2-metodo .divider {
  background: white;
}

.v2-metodo-head {
  margin: 0 0 2rem;
}

.v2-metodo-sub {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
}

/* Fila del método: párrafo a la izquierda, logo a la derecha, centrado
   verticalmente contra el párrafo (no contra el encabezado completo) */
.v2-metodo-top {
  margin: 0 0 3rem;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Logo limpio, sin tarjeta ni sombra: solo el isotipo centrado */
.v2-metodo-logo-bg {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-metodo-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 960px) {
  .v2-metodo-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.v2-metodo-grid {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Tarjetas del método: mismo estilo que .precio-paso (taller_sincronico) */
.v2-paso {
  background: #fff;
  border: 1px solid var(--gris-claro);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.v2-paso:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  border-color: var(--verde-claro);
}

.paso-num {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.85rem;
}

.v2-paso:nth-child(1) .paso-num,
.v2-paso:nth-child(4) .paso-num {
  color: var(--verde);
}

.v2-paso:nth-child(2) .paso-num,
.v2-paso:nth-child(5) .paso-num {
  color: var(--naranja);
}

.v2-paso:nth-child(3) .paso-num,
.v2-paso:nth-child(6) .paso-num {
  color: var(--rojo);
}

.v2-paso h3 {
  font-size: 0.97rem;
  color: var(--tinta);
  margin-bottom: 0.5rem;
}

.v2-paso p {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--gris-medio);
}


/* ── PILARES QUE ME DIFERENCIAN ───────────────────────── */
.v2-pilares {
  padding: 5.5rem 5%;
  background: var(--crema);
}


.v2-pilares-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.v2-pilar-card {
  background: #fff;
  border: 1px solid var(--gris-claro);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.v2-pilar-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  border-color: var(--verde-claro);
}

.v2-pilar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.v2-pilar-card:hover::before {
  transform: scaleX(1);
}

.v2-pilar-card h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.15rem;
  color: var(--tinta);
  margin-bottom: 0.85rem;
}

.v2-pilar-quote {
  background: var(--naranja-palido);
  border-left: 3px solid var(--naranja);
  border-radius: 0 10px 10px 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--tinta);
  font-style: italic;
}

.v2-pilar-exp {
  background: var(--naranja-palido);
  border-left: 3px solid var(--naranja);
  border-radius: 0 10px 10px 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--tinta);
}

.v2-pilar-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--gris-medio);
}

@media (max-width: 700px) {
  .v2-pilares-grid {
    grid-template-columns: 1fr;
  }
}


/* ── TESTIMONIOS ──────────────────────────────────────── */
.v2-testimonios {
  padding: 5.5rem 5%;
  background: var(--crema);
}

.v2-test-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.v2-test-card {
  background: white;
  border: 1px solid var(--gris-claro);
  border-radius: 20px;
  padding: 1.8rem;
  margin: 0;
  transition: transform 0.25s, box-shadow 0.25s;
}

.v2-test-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.07);
}

.v2-test-card blockquote {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--tinta);
  margin: 0 0 1.3rem;
  position: relative;
  padding-top: 1.6rem;
}

.v2-test-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem;
  left: -0.2rem;
  font-family: Georgia, serif;
  font-size: 3.2rem;
  color: var(--verde-claro);
  line-height: 1;
}

.v2-test-card blockquote em {
  color: var(--verde);
  font-style: italic;
}

.v2-test-card figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.v2-test-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--verde);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v2-test-card figcaption strong {
  display: block;
  font-size: 0.92rem;
  color: var(--tinta);
}

.v2-test-card figcaption small {
  font-size: 0.78rem;
  color: var(--gris-medio);
}


/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 960px) {
  .v2-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .v2-hero {
    padding-top: 6rem;
    min-height: auto;
  }

  .v2-hero-visual {
    order: 0;
    width: min(300px, 64%);
  }

  .v2-demo-cols {
    grid-template-columns: 1fr;
  }

  .v2-ruta-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-test-grid {
    grid-template-columns: 1fr;
  }

  .v2-metodo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-scroll-cue {
    display: none;
  }
}

@media (max-width: 560px) {
  .v2-demo-stage {
    padding: 1.2rem;
  }

  .v2-ruta-grid {
    grid-template-columns: 1fr;
  }

  .v2-metodo-grid {
    grid-template-columns: 1fr;
  }

  .v2-trust {
    gap: 1rem;
  }

  .v2-demo-controls {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ============================================================
   AJUSTES DEL HERO (fondo, logo en círculo, panel verde)
   ============================================================ */
/* Fondo del hero: imagen radial propia del v3 en vez de los
   degradados del v2. Ruta relativa desde css/ → ../img/background/...
   Se mantiene el encuadre cubriendo todo el hero. */
.v2-hero {
  background: url("../img/background/fondo-hero.webp") center / cover no-repeat;
}

/* Visual del hero: logo original centrado (reemplaza la tarjeta-peek).
   .v2-hero-visual ya centra con flex; acá sólo damos tamaño y un
   leve flotado con sombra suave. */
/* El círculo verde va en el CONTENEDOR (no en la imagen), así el
   border-radius recorta el fondo verde pero NUNCA el logo. */
.v2-hero-visual {
  width: min(330px, 74%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: var(--verde-fondo);
  border-radius: 50%;
  box-shadow: 0 18px 50px rgba(78, 136, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La imagen va sin border-radius → se ve completa, sin recortes.
   Ocupa ~64% del círculo, dejando un margen prolijo alrededor. */
.v2-hero-logo {
  width: 64%;
  height: auto;
  object-fit: contain;
  animation: v3-logo-float 7s ease-in-out infinite;
}

@keyframes v3-logo-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* ── Panel verde detrás del texto ──────────────────────────
   Da un fondo sólido a la columna de texto: la copy queda
   siempre legible y la marca no se pierde cuando la imagen de
   fondo se recorta en tablet/celular. El texto pasa a blanco. */
.v2-hero-copy {
  /* Verde sólido + sombra definida para que el panel se lea como tarjeta. */
  background: var(--verde);
  border-radius: 24px;
  padding: 2.6rem 2.25rem;
  box-shadow: 0 26px 60px rgba(40, 80, 72, 0.45);
}

.v2-hero-copy h1 {
  color: #fff;
}

/* "razonando" en naranja (el verde no contrastaría sobre verde) */
.v2-hero-copy .hl-verde {
  color: white;
}

/* "memorizando" tachado: texto claro, el tachado rojo se mantiene */
.v2-hero-copy .hl-tachado {
  color: rgba(255, 255, 255, 0.8);
}

.v2-hero-copy .v2-hero-desc {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* Título más pegado a la bajada (menos aire) */
.v2-hero-copy h1 {
  margin-bottom: 1rem;
}

/* Separador de bloque controlado (reemplaza a los <br><br>): menos aire
   entre párrafos para que el hero no quede estirado. */
.v2-hero-desc .hx-gap {
  display: block;
  height: 0.65rem;
}

/* strong en blanco pleno + más grueso (antes se perdía contra el texto) */
.v2-hero-copy .v2-hero-desc strong {
  color: #fff;
  font-weight: 800;
}

/* Frases clave (carreras) y remate final: tono durazno cálido para resaltar */
.v2-hero-copy .v2-hero-desc strong.hl-mark,
.v2-hero-copy .v2-hero-desc strong.hl-punch {
  color: var(--naranja-claro);
}

/* Franja de confianza sobre verde */
.v2-hero-copy .v2-trust-item strong {
  color: #fff;
}

.v2-hero-copy .v2-trust-item span {
  color: rgba(255, 255, 255, 0.72);
}

.v2-hero-copy .v2-trust-sep {
  background: rgba(255, 255, 255, 0.25);
}

/* btn-secondary "Ver cursos": ahora va sobre verde → vuelve al
   blanco (texto + borde claros), bien visible. */
.v2-hero-copy .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.v2-hero-copy .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

/* Juego de colores: el botón principal del hero en naranja (color de acción
   de la marca) sobre el panel verde. Los secundarios quedan en outline blanco. */
.v2-hero-copy .btn-hero {
  background: var(--naranja);
  color: #fff;
}

.v2-hero-copy .btn-hero:hover {
  background: var(--naranja-hover);
}


/* ============================================================
   AJUSTES DE REESTRUCTURACIÓN DEL INDEX
   ============================================================ */

/* Acciones en "Quién soy" (contacto + demo) */
.sobre-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Franja de confianza del hero con íconos (más vida) */
.v2-trust-item {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.v2-trust-item .ico {
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.v2-trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}


.btn-primary-demo {
  background: var(--verde);
  color: white;
  text-decoration: none;
  padding: 0.85rem 1.8rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: 'Mulish', Arial, sans-serif;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--gris-claro);
}

.btn-primary-demo:hover {
  background: var(--verde);
  transform: translateY(-2px);
}

/* ── Tabs de la demo con el color de cada materia (igual que el data-accent
   de la ruta #cursos): química/biología verde, bioquímica naranja, fisiología
   rojo. Inactiva → texto+ícono en su color; activa → pastilla rellena. ── */
.v2-tab[data-demo="quimica"],
.v2-tab[data-demo="biologia"] {
  color: var(--verde);
}

.v2-tab[data-demo="bioquimica"] {
  color: var(--naranja-oscuro);
}

.v2-tab[data-demo="fisiologia"] {
  color: var(--rojo-oscuro);
}

.v2-tab[data-demo="quimica"].is-active,
.v2-tab[data-demo="biologia"].is-active {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
  box-shadow: 0 6px 18px rgba(120, 176, 167, 0.32);
}

.v2-tab[data-demo="bioquimica"].is-active {
  background: var(--naranja);
  border-color: var(--naranja);
  color: #fff;
  box-shadow: 0 6px 18px rgba(250, 151, 85, 0.32);
}

.v2-tab[data-demo="fisiologia"].is-active {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
  box-shadow: 0 6px 18px rgba(236, 81, 107, 0.32);
}