:root {
  --morado: #714b67;
  --morado-oscuro: #5a3a52;
  --verde: #017e84;
  --texto: #1f2933;
  --texto-suave: #52606d;
  --fondo: #f7f7f9;
  --borde: #e4e7eb;
  --error: #b42318;
  --ok: #067647;
  --radio: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}

a { color: var(--morado); }
a:hover { color: var(--morado-oscuro); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.saltar { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--morado); color: #fff; padding: .75rem 1rem; }
.saltar:focus { left: 1rem; top: 1rem; color: #fff; }

.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--borde); }
.cabecera .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: .9rem; padding-bottom: .9rem; }
.marca { font-size: 1.4rem; font-weight: 800; color: var(--morado); text-decoration: none; }
.marca span { color: var(--verde); }
.menu { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-weight: 600; }
.menu a { color: var(--texto); text-decoration: none; }
.menu a:hover { color: var(--verde); }

/* Botones */
.boton { display: inline-block; background: var(--morado); color: #fff; border: 0; border-radius: 10px; padding: .85rem 1.6rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--morado-oscuro); color: #fff; }
.boton:disabled { opacity: .7; cursor: wait; }
.boton--secundario { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.boton--secundario:hover { background: var(--fondo); color: var(--texto); }
.boton--ancho { width: 100%; }

/* Secciones */
section { padding: 4.5rem 0; }
.fondo-blanco { background: #fff; }
.hero { padding: 5rem 0 4rem; text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1.25rem; }
.hero h1 span { color: var(--morado); }
.hero p { font-size: 1.2rem; color: var(--texto-suave); max-width: 40rem; margin: 0 auto 2rem; }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.titulo-seccion { text-align: center; margin-bottom: 3rem; }
.titulo-seccion h2 { font-size: 2rem; margin: 0 0 .5rem; }
.titulo-seccion p { color: var(--texto-suave); margin: 0 auto; max-width: 42rem; }

.rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 2rem; }
.fondo-blanco .tarjeta { background: var(--fondo); }
.tarjeta h3 { margin-top: 0; font-size: 1.25rem; }
.tarjeta p { color: var(--texto-suave); margin-bottom: 0; }

/* Módulos */
.modulos { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.modulo { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 2rem; }
.modulo--pro { border: 2px solid var(--morado); }
.etiqueta { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .7rem; border-radius: 999px; background: #e3f2f2; color: var(--verde); }
.modulo--pro .etiqueta { background: #f3edf2; color: var(--morado); }
.modulo h3 { font-size: 1.5rem; margin: .75rem 0 .25rem; }
.precio { font-size: 2rem; font-weight: 800; margin: .25rem 0 1rem; }
.precio small { font-size: 1rem; font-weight: 400; color: var(--texto-suave); }
.ventajas { padding-left: 1.2rem; margin: 0 0 1.75rem; }
.ventajas li { margin-bottom: .35rem; }

/* Formularios */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .35rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .75rem .9rem; border: 1px solid #9aa5b1; border-radius: 10px; font: inherit; color: var(--texto); background: #fff; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.casilla { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; font-size: .95rem; }
.casilla input { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .3rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; font-weight: 600; }
.aviso--error { background: #fef3f2; color: var(--error); border: 1px solid #fecdca; }
.aviso--ok { background: #ecfdf3; color: var(--ok); border: 1px solid #abefc6; }
.nota { font-size: .9rem; color: var(--texto-suave); }

/* Banda de especialidades */
.banda { background: linear-gradient(135deg, var(--morado) 0%, var(--verde) 100%); color: #fff; }
.banda .contenedor { max-width: 760px; }
.banda h2 { font-size: 2rem; margin-top: 0; }
.banda ul { padding-left: 1.2rem; }
.banda li { margin-bottom: .5rem; }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding: 2.5rem 0; font-size: .9rem; color: var(--texto-suave); text-align: center; }
.pie ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.pie p { margin: .35rem 0; }

/* Páginas sencillas (gracias, descarga) */
.pagina-simple { max-width: 640px; margin: 4rem auto; padding: 0 1.5rem; }
.pagina-simple .tarjeta { padding: 2.5rem; }
.pagina-simple h1 { margin-top: 0; font-size: 1.8rem; }
.pagina-simple p { color: var(--texto); }

/* Subtítulo y desplegable de las tarjetas */
.subtitulo { color: var(--texto-suave); margin: 0 0 .5rem; }
.kpis { margin: -.75rem 0 1.75rem; }
.kpis summary { cursor: pointer; font-weight: 600; color: var(--morado); }
.kpis ul { columns: 2; column-gap: 1.5rem; padding-left: 1.2rem; margin: .75rem 0 0; font-size: .95rem; }

/* Comparativa */
.tabla-scroll { overflow-x: auto; max-width: 780px; margin: 0 auto; }
.comparativa { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borde); }
.comparativa th, .comparativa td { padding: .7rem 1rem; border-bottom: 1px solid var(--borde); }
.comparativa thead th { background: var(--morado); color: #fff; text-align: center; }
.comparativa thead th:first-child { text-align: left; }
.comparativa tbody th { text-align: left; font-weight: 600; }
.comparativa td { text-align: center; }
.comparativa .si { color: var(--ok); font-weight: 700; }
.comparativa .no { color: var(--texto-suave); }

/* Generador: páginas de módulo y catálogo */
.hero--modulo { padding: 3.5rem 0 3rem; }
.migas { font-size: .9rem; color: var(--texto-suave); margin-bottom: 1rem; }
.modulos--uno { grid-template-columns: minmax(0, 560px); justify-content: center; }
.catalogo-categoria + .catalogo-categoria { margin-top: 3rem; }
.catalogo-categoria h3 { font-size: 1.4rem; margin: 0 0 1.25rem; color: var(--morado); }
.tarjeta-modulo h4 { font-size: 1.25rem; margin: 0 0 .5rem; }
.tarjeta-modulo h4 a { color: var(--texto); text-decoration: none; }
.tarjeta-modulo h4 a:hover { color: var(--morado); text-decoration: underline; }
.insignias { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.etiqueta--pro { background: #f3edf2; color: var(--morado); }
.video { max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden;
         background: var(--texto); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; text-align: center; }
.video .nota { color: #e4e7eb; }
.video iframe, .video video { width: 100%; height: 100%; border: 0; display: block; }
.video--archivo { display: block; padding: 0; }
.capturas { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.capturas figure { margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.capturas img { display: block; width: 100%; height: auto; }
.capturas figcaption { padding: .75rem 1rem; font-size: .9rem; color: var(--texto-suave); }

/* Tarjetas de la portada: tamaño fijo y con imagen */
.catalogo-categoria .rejilla { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tarjeta-modulo { overflow: hidden; }
.tarjeta-modulo__imagen { display: block; width: calc(100% + 4rem); max-width: none; margin: -2rem -2rem 1.25rem;
                          aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--borde); }

/* Varios vídeos en una página */
.videos { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.video-item h3 { font-size: 1.15rem; margin: 0 0 .75rem; }
.videos .video { max-width: none; }

/* Ninguna imagen ni vídeo más ancho que su caja */
img, video { max-width: 100%; height: auto; }
.tarjeta-modulo__imagen { max-width: none; }

/* Formulario único de compra cuando hay varias versiones de pago */
.compra { max-width: 640px; margin: 3rem auto 0; background: #fff; border: 2px solid var(--morado);
          border-radius: var(--radio); padding: 2rem; scroll-margin-top: 5rem; }
.compra h3 { margin-top: 0; font-size: 1.4rem; }
.opciones-version { border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1.2rem; margin: 0 0 1.25rem; }
.opciones-version legend { font-weight: 600; padding: 0 .4rem; }
.opcion { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; }
.opcion input { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .3rem; }

/* Icono del módulo en la cabecera de su página */
.icono-modulo { display: block; margin: 0 auto 1rem; border-radius: 16px; }

/* Versión que incluye la anterior: recuadro "Todo lo de ..." + "Y además:" */
.incluye { display: flex; gap: .7rem; align-items: flex-start; margin: 1.25rem 0 .5rem;
           padding: .9rem 1rem; background: #f7f1f5; border-left: 4px solid var(--morado);
           border-radius: 8px; }
.incluye p { margin: 0; }
.incluye-marca { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
                 background: var(--morado); color: #fff; font-weight: 700;
                 display: inline-flex; align-items: center; justify-content: center; }
.incluye-num { white-space: nowrap; }
.ademas { font-weight: 600; margin: 1rem 0 .25rem; }