/* Landing A: clase gratuita de Data Analytics con Python (#984).
   Los colores y las tipografias son los mismos tokens del design system del
   campus (campus/src/assets/design-tokens.css), copiados aca porque la landing
   es un archivo estatico que no pasa por el build de Vite. Si cambian alla,
   hay que cambiarlos aca. */

:root {
  --page: #0d1538;
  --surface-card: #14233b;
  --surface-panel: rgba(9, 17, 32, 0.75);
  --surface-deep: #0a1229;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0d1538;

  --border-panel: rgba(71, 85, 105, 0.3);

  --violet: #8e2de2;
  --violet-deep: #6b1c86;
  --gold: #f0bd48;
  --gold-hover: #d9a932;
  --gold-bg: rgba(240, 189, 72, 0.12);
  --green: #00b44b;

  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --ancho: 1120px;
  --barra-alto: 44px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Para que las anclas no queden tapadas por la barra fija de arriba. */
  scroll-padding-top: calc(var(--barra-alto) + 16px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

a {
  color: inherit;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.seccion {
  padding: 72px 0;
}

.seccion--apretada {
  padding: 56px 0;
}

.titulo-seccion {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
}

/* ---------- A1: barra superior fija ---------- */

.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  min-height: var(--barra-alto);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--page);
  border-bottom: 1px solid var(--border-panel);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.punto {
  color: var(--gold);
  margin-right: 8px;
}

/* ---------- A2: hero ---------- */

.hero {
  padding-top: calc(var(--barra-alto) + 64px);
  padding-bottom: 72px;
  background-image: linear-gradient(135deg, var(--page) 0%, var(--page) 45%, var(--violet-deep) 100%);
}

.hero__grilla {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}

.hero__pildora {
  display: inline-block;
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  margin-bottom: 20px;
}

.hero__bajada {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--text-secondary);
  margin: 0 0 32px;
}

.datos {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
}

.datos li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-secondary);
}

.datos svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--gold);
}

.prueba-social {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 16px;
}

/* ---------- Visual del hero: una notebook de Python ----------
   Es CSS, no una imagen: no hay ningun asset que mantener ni que pese, y se
   ve nitido en cualquier pantalla. */

/* Se distingue de las tarjetas por ser mas oscura, no por estar inclinada:
   con el mismo color y torcida parecia una tarjeta mal puesta. El fondo es el
   tono profundo del design system, el mismo que usan los campos, y la barra
   de titulo queda mas clara que el cuerpo, como en un editor de verdad. */
.notebook {
  background: var(--surface-deep);
  border: 1px solid var(--border-panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(3, 7, 20, 0.6);
}

.notebook__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-panel);
}

.notebook__punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border-panel);
}

.notebook__punto:first-child { background: #ff5f57; }
.notebook__punto:nth-child(2) { background: #febc2e; }
.notebook__punto:nth-child(3) { background: #28c840; }

.notebook__nombre {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.notebook__codigo {
  margin: 0;
  padding: 20px 18px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  white-space: pre;
  overflow-x: auto;
}

.cod-kw { color: #c792ea; }
.cod-fn { color: #82aaff; }
.cod-str { color: #c3e88d; }
.cod-com { color: var(--text-muted); font-style: italic; }

.notebook__salida {
  border-top: 1px solid var(--border-panel);
  background: rgba(20, 35, 59, 0.35);
  padding: 18px;
}

.notebook__etiqueta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.grafico {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 92px;
}

.grafico__barra {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background-image: linear-gradient(180deg, var(--violet), var(--violet-deep));
  animation: crecer 1s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.grafico__barra--alta {
  background-image: linear-gradient(180deg, var(--gold), var(--gold-hover));
}

@keyframes crecer {
  from { height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grafico__barra { animation: none; }
}

/* ---------- Botones ---------- */

.boton {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--gold), var(--gold-hover));
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  padding: 16px 32px;
  border: 0;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(240, 189, 72, 0.28);
  transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.boton:hover {
  filter: saturate(1.08);
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(240, 189, 72, 0.42);
}

.boton:active {
  transform: translateY(0);
}

.boton--ancho {
  width: 100%;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .boton { transition: none; }
  .boton:hover { transform: none; }
}


/* ---------- La notebook dentro de "Que vas a ver" ---------- */

.demo {
  max-width: 620px;
  margin: 36px auto 0;
}

.demo__pie {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}


/* ---------- A3: el espejo ---------- */

.espejo {
  background-image: linear-gradient(180deg, rgba(17, 30, 53, 0.96), rgba(15, 26, 46, 0.98));
  border: 1px solid var(--border-panel);
  border-radius: 20px;
  padding: 40px;
}

.lista-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  color: var(--text-secondary);
}

.lista-check svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--violet);
}

.espejo__cierre {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-panel);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

/* ---------- A4: que vas a ver ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.tarjeta {
  background: var(--surface-card);
  border: 1px solid var(--border-panel);
  border-radius: 18px;
  padding: 28px 24px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.tarjeta:hover {
  border-color: var(--violet);
  transform: translateY(-3px);
}

.tarjeta__numero {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.tarjeta p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ---------- A5: sobre Mariana ---------- */

.sobre {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: center;
  background-image: linear-gradient(135deg, rgba(32, 19, 67, 0.96), rgba(18, 24, 43, 0.98));
  border: 1px solid var(--border-panel);
  border-radius: 24px;
  padding: 44px;
}

/* La foto se apoya directamente sobre el degradado de la tarjeta, sin marco.
   El recorte no viaja en la imagen sino en una mascara aparte: la foto es un
   JPEG comun y la silueta es un PNG chiquito. Un PNG con transparencia pesaba
   272 KB; asi pesan 53 KB entre los dos.
   Si un navegador viejo no soportara las mascaras, se ve el JPEG con su fondo,
   que es el mismo violeta del principio del degradado. */
.sobre__foto {
  width: 100%;
  height: auto;
  display: block;

  -webkit-mask-image: url('images/mariana-mask.png');
          mask-image: url('images/mariana-mask.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.sobre h2 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  margin-bottom: 18px;
}

.sobre p {
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.sobre p:last-child {
  margin-bottom: 0;
}

.sobre__credenciales {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.credencial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-bg);
  border: 1px solid rgba(240, 189, 72, 0.35);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- A6: testimonios en carrusel ---------- */

.carrusel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 20px;
  padding-bottom: 6px;
  /* La barra se oculta porque la navegacion son los puntos y las flechas. */
  scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.testimonio {
  flex: 0 0 100%;
  /* En pantallas anchas se achica para que asome la siguiente (ver abajo). */
  scroll-snap-align: center;
  background-image: linear-gradient(180deg, rgba(17, 30, 53, 0.96), rgba(15, 26, 46, 0.98));
  border: 1px solid var(--border-panel);
  border-radius: 20px;
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}

.testimonio__comilla {
  width: 34px;
  height: 34px;
  color: var(--violet);
  opacity: 0.85;
}

.testimonio__texto {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--text-primary);
  line-height: 1.55;
}

.testimonio__pie {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.testimonio__iniciales {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  background-image: linear-gradient(135deg, var(--violet-deep), var(--violet));
}

.testimonio__nombre {
  font-weight: 600;
  font-size: 15px;
}

.testimonio__curso {
  font-size: 13px;
  color: var(--text-muted);
}

@media (min-width: 900px) {
  .carrusel {
    max-width: 860px;
  }

  /* Deja ver el borde de la tarjeta siguiente: sin esa pista, mucha gente no
     se entera de que hay mas testimonios y nunca toca las flechas. */
  .carrusel__pista {
    padding-right: 84px;
  }

  .testimonio {
    flex: 0 0 calc(100% - 84px);
  }
}

.carrusel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

.carrusel__flecha {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-panel);
  background: var(--surface-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.carrusel__flecha:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.carrusel__flecha svg {
  width: 18px;
  height: 18px;
}

.carrusel__puntos {
  display: flex;
  gap: 9px;
}

.carrusel__punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-panel);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.carrusel__punto[aria-selected='true'] {
  width: 26px;
  border-radius: 999px;
  background: var(--gold);
}

/* ---------- A7: formulario ---------- */

.formulario-bloque {
  background-image: linear-gradient(135deg, var(--page) 0%, var(--violet-deep) 100%);
  border: 2px dashed var(--gold);
  border-radius: 22px;
  padding: 48px 40px;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.formulario-bloque h2 {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  margin-bottom: 8px;
}

.form-micro {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0 0 28px;
}

.campo {
  text-align: left;
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.campo input,
.campo select {
  width: 100%;
  background: var(--surface-panel);
  border: 1px solid var(--border-panel);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
}

.campo input:focus,
.campo select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.campo select option {
  background: var(--page);
  color: var(--text-primary);
}

.aviso {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.form-exito {
  background: var(--surface-card);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 28px 24px;
}

.form-exito h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.form-exito p {
  color: var(--text-secondary);
  margin: 0 0 20px;
}

[hidden] {
  display: none !important;
}

/* ---------- A8: CTA final ---------- */

.cta-final {
  text-align: center;
}

.cta-final p {
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 55ch;
  margin: 0 auto 28px;
}

/* ---------- A9: footer ---------- */

.pie {
  border-top: 1px solid var(--border-panel);
  padding: 48px 0 56px;
  background: var(--surface-panel);
  text-align: center;
}

.pie__logo {
  width: 150px;
  margin: 0 auto 28px;
}

.pie__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  justify-content: center;
}

.contacto-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--border-panel);
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 15px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.contacto-link:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.contacto-link svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.pie__legal {
  margin: 30px auto 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ---------- Mobile ---------- */

@media (max-width: 960px) {
  .hero__grilla {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .notebook {
    transform: none;
    max-width: 520px;
  }
}

@media (max-width: 860px) {
  .sobre {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
    text-align: center;
  }

  .sobre__foto {
    max-width: 250px;
    margin: 0 auto;
  }

  .sobre__credenciales {
    justify-content: center;
  }

  .espejo,
  .formulario-bloque {
    padding: 28px 22px;
  }

  .testimonio {
    padding: 28px 24px;
  }

  .seccion {
    padding: 56px 0;
  }

  .barra {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* ---------- Volver arriba ---------- */

.subir {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-panel);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(5, 10, 25, 0.5);

  /* Arranca fuera de vista. No se usa el atributo hidden porque cortaria la
     transicion, y pointer-events evita que se pueda tocar sin verse. */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s ease, color 0.15s ease;
}

.subir.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.subir:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.subir svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .subir { transition: opacity 0.2s ease; transform: none; }
  .subir.visible { transform: none; }
}

@media (max-width: 860px) {
  .subir {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ==============================================================
   Landing B: venta
   ============================================================== */

/* ---------- B1: barra con dos estados ---------- */

.barra__early strong {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
  color: var(--gold);
}

/* ---------- Hero a una sola columna ----------
   Lo usan las dos landings cuando no hay nada para poner al costado: en la de
   captacion el formulario vive mas abajo y el encabezado termina en un boton,
   y en la de venta el video puede no estar grabado todavia. Una columna vacia
   al lado apretaria el texto sin motivo. */

.hero__grilla--simple,
.hero__grilla--venta {
  grid-template-columns: 1fr;
  max-width: 900px;
}

.hero__grilla--con-video {
  grid-template-columns: 1.05fr 0.95fr;
  max-width: var(--ancho);
}

.video__marco {
  position: relative;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-panel);
  box-shadow: 0 24px 56px rgba(3, 7, 20, 0.6);
}

.video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- B3: no es para vos, y derivacion al Pack ---------- */

.no-es {
  max-width: 760px;
  margin: 22px auto 0;
  border: 1px solid var(--border-panel);
  border-radius: 14px;
  background: var(--surface-panel);
}

.no-es summary {
  cursor: pointer;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--text-secondary);
}

.no-es ul {
  margin: 0;
  padding: 0 20px 18px 40px;
  color: var(--text-secondary);
  font-size: 15px;
}

.derivacion {
  margin: 32px auto 0;
  max-width: 760px;
  text-align: center;
  background: var(--gold-bg);
  border: 1px solid rgba(240, 189, 72, 0.4);
  border-radius: 18px;
  padding: 28px 26px;
}

.derivacion p {
  margin: 0 0 20px;
  color: var(--text-primary);
}

.boton--secundario {
  background-image: none;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: none;
  font-size: 15px;
  padding: 12px 24px;
}

.boton--secundario:hover {
  background: var(--gold-bg);
  box-shadow: none;
}

/* ---------- B5: comparativa ---------- */

.comparativa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  align-items: start;
}

.compara {
  background: var(--surface-card);
  border: 1px solid var(--border-panel);
  border-radius: 18px;
  padding: 26px 24px;
}

.compara--destacada {
  background-image: linear-gradient(160deg, rgba(32, 19, 67, 0.96), rgba(18, 24, 43, 0.98));
  border-color: var(--gold);
}

.compara__titulo {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.compara--destacada .compara__titulo {
  color: var(--gold);
}

.compara__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}

.compara__lista li {
  padding-left: 18px;
  position: relative;
}

.compara__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-panel);
}

.compara--destacada .compara__lista li::before {
  background: var(--gold);
}

.tarjeta__titulo {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

/* ---------- B7 y B12: acordeones ---------- */

.acordeones {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.acordeon {
  background: var(--surface-card);
  border: 1px solid var(--border-panel);
  border-radius: 14px;
  overflow: hidden;
}

.acordeon summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.acordeon summary::-webkit-details-marker {
  display: none;
}

.acordeon__etiqueta {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.acordeon__titulo {
  flex: 1;
  font-weight: 600;
  font-size: 16px;
}

.acordeon__flecha {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.acordeon[open] .acordeon__flecha {
  transform: rotate(180deg);
}

.acordeon__cuerpo {
  margin: 0;
  padding: 0 22px 20px 22px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

ul.acordeon__cuerpo {
  list-style: none;
  display: grid;
  gap: 10px;
}

ul.acordeon__cuerpo li strong {
  color: var(--text-primary);
}

.acordeon__cuerpo p {
  margin: 0;
}

/* ---------- B10: selector de pais ---------- */

.selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 32px;
}

.selector__copy {
  color: var(--text-secondary);
  font-size: 15px;
}

.selector__botones {
  display: flex;
  border: 1px solid var(--border-panel);
  border-radius: 999px;
  padding: 4px;
  background: var(--surface-panel);
}

.selector__opcion {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.selector__opcion[aria-pressed="true"] {
  background: var(--gold);
  color: var(--text-inverse);
}

/* ---------- B11: tarjetas de precio ---------- */

/* De a dos, como pide el documento: En vivo y Offline arriba, los Packs
   abajo. Con auto-fit entraban tres por fila y el ultimo Pack quedaba solo. */
.precios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .precios {
    grid-template-columns: 1fr;
  }
}

.precio {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-panel);
  border-radius: 20px;
  padding: 30px 24px 26px;
}

.precio--recomendada {
  background-image: linear-gradient(160deg, rgba(32, 19, 67, 0.96), rgba(18, 24, 43, 0.98));
  border-color: var(--gold);
}

.precio__cinta {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--gold);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
}

.precio__nombre {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}

.precio__tachado {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
}

.precio__monto {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.precio__ahorro {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}

.precio__cuotas {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.precio__incluye {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: var(--text-secondary);
}

.precio__incluye li {
  padding-left: 18px;
  position: relative;
}

.precio__incluye li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.precio .boton {
  margin-top: auto;
  font-size: 15px;
  padding: 14px 20px;
}

.medios,
.microcopy {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin: 24px auto 0;
  max-width: 62ch;
}

.microcopy {
  color: var(--text-muted);
  margin-top: 10px;
}

/* ---------- Boton fijo en el celular ---------- */

.fijo-mobile {
  display: none;
}

@media (max-width: 860px) {
  .fijo-mobile {
    position: fixed;
    left: 16px;
    right: 76px;
    bottom: 16px;
    z-index: 55;
    display: block;
    text-align: center;
    background-image: linear-gradient(135deg, var(--gold), var(--gold-hover));
    color: var(--text-inverse);
    font-weight: 700;
    font-size: 16px;
    padding: 15px 18px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(240, 189, 72, 0.32);
  }

  /* El pie necesita aire extra para que el boton fijo no lo tape. */
  .pie {
    padding-bottom: 96px;
  }
}

/* ---------- Casilla de consentimiento ---------- */

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  margin: 4px 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  cursor: pointer;
}

.consentimiento input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.consentimiento input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}