/* ═══════════════════════════════════════════════════════════════════════════
   capacitacion.css — la zona de videos para vendedores

   Página aparte de la tienda y con su propio estilo, a propósito: esto no es
   una vidriera, es material de trabajo. Se mira desde el mostrador y desde el
   teléfono, muchas veces con una mano ocupada.

   Una sola columna en cualquier pantalla. Los videos apaisados puestos en dos
   columnas quedan chicos justo donde importa — se está mirando cómo se aplica
   una crema, no un catálogo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cap-fondo:  #f7f4f1;
  --cap-papel:  #ffffff;
  --cap-tinta:  #2f2723;
  --cap-suave:  #6b5f57;
  --cap-tenue:  #a2968c;
  --cap-linea:  #e6ded7;
  --cap-verde:  #7fc4b4;
  --cap-verde-hondo: #3f8b7c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cap-fondo);
  color: var(--cap-tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cap-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px;
  background: var(--cap-papel);
  border-bottom: 1px solid var(--cap-linea);
  position: sticky; top: 0; z-index: 5;
}
/* Era una flecha de texto y dos palabras grises: se perdia contra la cabecera
   blanca y no parecia algo en lo que se pudiera tocar. Ahora es una pastilla
   con la flecha en su propio circulo verde. Sigue siendo discreta —no compite
   con el titulo de la pagina— pero se ve. */
.cap-volver {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--cap-verde-hondo); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 7px 16px 7px 7px;   /* menos a la izquierda: ahi va el circulo */
  border: 1px solid var(--cap-linea); border-radius: 999px;
  background: var(--cap-papel);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.cap-volver-flecha {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: #e7f4f1; color: var(--cap-verde-hondo);
  transition: background .2s, transform .25s cubic-bezier(.22,.61,.36,1);
}
.cap-volver-flecha svg { width: 15px; height: 15px; }
.cap-volver:hover {
  border-color: #b9dcd4; background: #f4fbf9;
  box-shadow: 0 4px 14px -6px rgba(63,139,124,.45);
}
/* La flecha retrocede sola: dice "esto te lleva para atras". */
.cap-volver:hover .cap-volver-flecha { background: #cfeae3; transform: translateX(-3px); }
.cap-volver:active { transform: translateY(1px); }
.cap-volver:focus-visible { outline: 2px solid var(--cap-verde-hondo); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cap-volver, .cap-volver-flecha { transition: none; }
  .cap-volver:hover .cap-volver-flecha { transform: none; }
  .cap-volver:active { transform: none; }
}

/* En pantalla angosta se queda solo con el circulo: las tres palabras le
   comian el lugar a la marca. */
@media (max-width: 430px) {
  .cap-volver { padding: 5px; gap: 0; }
  .cap-volver > span:last-child { display: none; }
}
.cap-marca {
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cap-tenue);
}

.cap-hoja { max-width: 780px; margin: 0 auto; padding: 26px 18px 70px; }

/* ── Los carteles (sin sesión, pedir, en revisión) ────────────────────── */
.cap-centro {
  max-width: 460px; margin: 8vh auto; text-align: center;
  background: var(--cap-papel);
  border: 1px solid var(--cap-linea); border-radius: 16px;
  padding: 32px 26px;
}
.cap-centro h1 { font-size: 24px; margin: 0 0 10px; letter-spacing: -.015em; }
.cap-centro p { margin: 0 0 14px; color: var(--cap-suave); }
.cap-flojo { color: var(--cap-tenue); }

.cap-marca-estado {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.cap-marca-estado--espera { background: #fdf3e0; color: #96662a; }

.cap-campo { display: block; text-align: left; margin: 18px 0 16px; }
.cap-campo > span {
  display: block; margin-bottom: 6px;
  font-size: 13px; color: var(--cap-suave);
}
.cap-campo em { color: var(--cap-tenue); font-style: normal; }
.cap-campo input,
.cap-campo textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--cap-linea); border-radius: 10px;
  background: var(--cap-fondo); font: inherit; font-size: 15px;
  color: var(--cap-tinta); resize: vertical;
}
.cap-campo input:focus,
.cap-campo textarea:focus {
  outline: none; background: var(--cap-papel);
  border-color: var(--cap-verde); box-shadow: 0 0 0 3px rgba(127,196,180,.22);
}

.cap-btn {
  display: inline-block; border: 0; cursor: pointer;
  padding: 12px 24px; border-radius: 999px;
  background: var(--cap-verde); color: #14322c;
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background .18s, transform .18s;
}
.cap-btn:hover { background: #6fb8a7; }
.cap-btn:active { transform: translateY(1px); }
.cap-btn:disabled { opacity: .55; cursor: default; }
.cap-btn--suave {
  background: transparent; color: var(--cap-verde-hondo);
  border: 1px solid var(--cap-linea);
}
.cap-btn--suave:hover { background: var(--cap-fondo); }

.cap-error {
  margin-top: 12px; font-size: 14px; color: #b3453c;
}

/* ── Adentro: la lista ────────────────────────────────────────────────── */
.cap-titulo { margin-bottom: 24px; }
.cap-titulo h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.02em; }
.cap-titulo p { margin: 0; color: var(--cap-suave); }

.cap-lista { display: flex; flex-direction: column; gap: 26px; }

.cap-card {
  background: var(--cap-papel);
  border: 1px solid var(--cap-linea); border-radius: 16px;
  overflow: hidden;
}

/* El marco reserva el lugar del video ANTES de que cargue. Sin esto la página
   pega un salto cuando aparece cada uno y se pierde dónde se estaba leyendo. */
.cap-marco {
  aspect-ratio: 16 / 9;
  background: #211c19;
  display: flex; align-items: center; justify-content: center;
}
.cap-video { width: 100%; height: 100%; display: block; object-fit: contain; }

.cap-enlace {
  display: inline-flex; align-items: center; gap: 10px;
  color: #f4efe9; text-decoration: none; font-weight: 600;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .18s;
}
.cap-enlace:hover { background: rgba(255,255,255,.1); }
.cap-play { font-size: 13px; }

.cap-texto { padding: 16px 18px 20px; }
.cap-texto h2 { font-size: 18px; margin: 0 0 6px; letter-spacing: -.01em; }
.cap-desc { margin: 0; color: var(--cap-suave); font-size: 15px; white-space: pre-line; }

/* ── Teléfono ─────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .cap-hoja { padding: 18px 12px 56px; }
  .cap-centro { margin: 5vh auto; padding: 26px 18px; border-radius: 14px; }
  .cap-centro h1 { font-size: 21px; }
  .cap-titulo h1 { font-size: 23px; }
  .cap-lista { gap: 18px; }
  /* Al ancho completo: el borde redondeado a los costados desperdicia lo poco
     que hay, y el video es lo que se vino a ver. */
  .cap-card { border-radius: 12px; }
  .cap-btn { width: 100%; padding: 14px 20px; }
  .cap-texto { padding: 14px 14px 17px; }
  .cap-texto h2 { font-size: 17px; }
}

/* Quien pidió menos movimiento no quiere que un botón se hunda al tocarlo. */
@media (prefers-reduced-motion: reduce) {
  .cap-btn, .cap-enlace { transition: none; }
  .cap-btn:active { transform: none; }
}

/* ═══ "Sumate a vender" (/revender) ══════════════════════════════════════════
   Comparte hoja con la capacitación a propósito: son la misma familia — la
   invitación y lo que se abre cuando te aprueban. Dos hojas casi iguales se
   desincronizan al primer cambio de color.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El <select> no estaba contemplado: la regla de arriba cubre input y textarea,
   y sin esto los tres desplegables salían con el estilo de fábrica del
   navegador, distinto en cada uno y desalineado con los otros dos campos. */
.cap-campo select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--cap-linea); border-radius: 10px;
  background: var(--cap-fondo); font: inherit; font-size: 15px;
  color: var(--cap-tinta);
}
.cap-campo select:focus {
  outline: none; background: var(--cap-papel);
  border-color: var(--cap-verde); box-shadow: 0 0 0 3px rgba(127,196,180,.22);
}

.rv-intro { text-align: center; }
.rv-antetitulo {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cap-verde);
}
.rv-intro h1 { font-size: 30px; margin: 0 0 12px; letter-spacing: -.02em; }
.rv-bajada { margin: 0 0 26px; color: var(--cap-suave); line-height: 1.6; }

/* Lo que se lleva quien entra. Tres y no ocho: una lista larga se saltea. */
.rv-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.rv-puntos li {
  background: var(--cap-papel); border: 1px solid var(--cap-linea);
  border-radius: 12px; padding: 14px 16px;
}
.rv-puntos b { display: block; font-size: 15px; margin-bottom: 3px; }
.rv-puntos span { font-size: 13.5px; color: var(--cap-suave); line-height: 1.55; }

#rvFormulario { max-width: 620px; margin: 0 auto; }
#rvFormulario h2 { font-size: 20px; margin: 0 0 4px; }
.rv-nota { margin: 0 0 6px; font-size: 13px; }
/* Dos columnas en pantalla ancha, una en el teléfono. Cinco campos apilados en
   un monitor dejan el formulario más largo que la pantalla sin necesidad. */
.rv-campos { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.rv-campos .cap-campo:first-child { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .rv-campos { grid-template-columns: 1fr; }
  .rv-intro h1 { font-size: 25px; }
}

.cap-centro h2 { font-size: 22px; margin: 0 0 10px; letter-spacing: -.015em; }

/* ═══ BIBLIOTECA ═════════════════════════════════════════════════════════════
   La capacitacion dejo de ser una lista de videos detras de una puerta. Ahora
   hay una parte abierta y otra del equipo, y las dos se ven en la misma pagina.
   ═══════════════════════════════════════════════════════════════════════════ */
.cap-intro { text-align: center; }
.cap-intro h1 { font-size: 30px; margin: 0 0 10px; letter-spacing: -.02em; }

/* Las pastillas del cartel: dicen cuánto material hay y de qué tipo. El cartel
   ocupa media pantalla y con dos líneas se veía vacío, sobre todo en una
   categoría recién creada. */
.cap-datos {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px;
}
.cap-dato {
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .68); border: 1px solid rgba(31, 111, 109, .16);
  color: var(--cap-verde-hondo); font-size: 12.5px; font-weight: 600;
}
@media (max-width: 560px) { .cap-dato { font-size: 12px; padding: 4px 11px; } }

/* ⚠ `hidden` NO alcanza por sí solo: `.cap-volver` declara su propio display
   (inline-flex) y gana por especificidad sobre el `[hidden]{display:none}` que
   trae el navegador. Sin esta línea, el botón "Capacitación" se veía también en
   el índice, que es justo donde no tiene sentido. Es la misma trampa que
   styles.css ya resuelve con un `[hidden]{display:none!important}` global. */
.cap-volver[hidden] { display: none; }

/* El segundo botón de volver (a la tienda) se vuelve secundario cuando hay uno
   más importante al lado: adentro de una clase, volver al listado es lo que se
   quiere nueve de cada diez veces. */
.cap-volver--secundario { opacity: .72; }
.cap-volver--secundario:hover { opacity: 1; }
@media (max-width: 560px) {
  .cap-volver--secundario > span:last-child { display: none; }
}
.cap-bajada { margin: 0; color: var(--cap-suave); line-height: 1.6; }

/* El cartel de estado. Fondo tenue y no un borde de color: es informacion,
   no una alarma. */
.cap-aviso {
  max-width: 640px; margin: 0 auto 34px; padding: 20px 22px;
  background: var(--cap-papel); border: 1px solid var(--cap-linea);
  border-radius: 14px; text-align: center;
}
.cap-aviso p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--cap-suave); }
.cap-aviso b { color: var(--cap-tinta); }
.cap-aviso .cap-marca-estado { margin-bottom: 12px; }

.cap-grupo { max-width: 760px; margin: 0 auto 38px; }
.cap-grupo h2 { font-size: 19px; margin: 0 0 4px; }
.cap-grupo-resumen { margin: 0 0 16px; font-size: 13.5px; color: var(--cap-tenue); }

/* Una fila por material, dentro de un bloque. No una tarjeta suelta por pieza:
   diez tarjetas flotando con su borde y su margen se leen como una pila de
   cosas sin relacion — es lo mismo que ya habia pasado en el panel. */
.cap-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--cap-linea);
}
.cap-item:first-of-type { border-top: 0; }
.cap-item--marcado { background: #fdfaf3; border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.cap-item-icono { flex-shrink: 0; width: 34px; height: 34px; color: var(--cap-verde); }
.cap-item-icono svg { width: 100%; height: 100%; }
.cap-item-cuerpo { flex: 1; min-width: 0; }
.cap-item-cuerpo h3 { font-size: 15.5px; margin: 0 0 3px; }
.cap-item-cuerpo p { margin: 0; font-size: 13.5px; color: var(--cap-suave); line-height: 1.55; }
.cap-item-meta { margin-top: 5px !important; font-size: 12px !important; color: var(--cap-tenue) !important; }
.cap-item-accion { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cap-solo-equipo {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cap-tenue);
}

/* Lo que se abre: la nota escrita o el reproductor. */
.cap-item-abierto { margin-top: 12px; }
.cap-item-abierto p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--cap-tinta); }
.cap-item-abierto video { width: 100%; max-height: 460px; border-radius: 10px; background: #000; display: block; }

@media (max-width: 560px) {
  .cap-item { flex-wrap: wrap; }
  .cap-item-accion { width: 100%; align-items: flex-start; flex-direction: row-reverse;
    justify-content: flex-end; gap: 10px; margin-top: 4px; }
  .cap-intro h1 { font-size: 25px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRESENCIA DE PAGINA  (02/09/2026)

   Las cuatro paginas que usan esta hoja —capacitacion, puntos de venta, equipo
   y "sumate a vender"— se veian vacias al lado de la portada: una barra blanca
   fina y texto centrado sobre un fondo plano. Parecian pantallas de sistema, no
   parte de la tienda.

   Lo que faltaba no era MAS cosas, era PESO VISUAL arriba. Cada una arranca
   ahora con una franja propia: un degradado suave con la hoja de la marca de
   fondo, que es lo mismo que hace la portada con su foto. Cuesta cero: no hay
   ni una imagen nueva.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La cabecera deja de ser una linea blanca y toma el color de la marca. */
.cap-cab {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f7 100%);
  border-bottom: 1px solid rgba(127,196,180,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.cap-marca { color: var(--cap-verde-hondo); font-weight: 600; }

/* ── La franja de encabezado ──────────────────────────────────────────────
   ⚠ NO es una tarjeta. Al principio lo era —caja blanca con borde y esquinas
   redondas— y el resultado fue que la pagina se veia como DOS ISLAS flotando
   sobre el fondo, con un hueco entre medio.

   Ahora es una banda: va pegada a la cabecera, de lado a lado, sin borde ni
   esquinas. Eso la ancla arriba en vez de dejarla suspendida, y lo que viene
   despues se apoya sobre ella en lugar de flotar aparte.

   Los margenes negativos son para que se salga del ancho del `main` y llegue al
   borde de la pantalla; el padding de adentro le devuelve el aire al texto. */
.cap-intro, .pv-intro, .eqp-intro, .rv-intro {
  position: relative;
  margin: -26px -18px 30px;         /* anula el padding del <main> */
  padding: 52px 26px 46px;
  overflow: hidden;
  background:
    radial-gradient(72% 130% at 84% 6%, rgba(90,171,153,.44) 0%, rgba(90,171,153,0) 64%),
    radial-gradient(60% 120% at 6% 98%, rgba(90,171,153,.28) 0%, rgba(90,171,153,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f1efe9 100%);
  border-bottom: 1px solid rgba(63,139,124,.34);
}
.cap-intro::after, .pv-intro::after, .eqp-intro::after, .rv-intro::after {
  content: '';
  position: absolute; right: -54px; top: 50%;
  width: 260px; height: 260px; transform: translateY(-50%);
  opacity: .17; pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f8b7c' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13V6a1 1 0 0 1 1-1h1a7 7 0 0 1 7 7 7 7 0 0 1 7-7h1a1 1 0 0 1 1 1v1a7 7 0 0 1-7 7h-2Z'/%3E%3C/svg%3E");
}
/* El texto por encima de la textura, y centrado en el ancho de lectura.

   ⚠ El centrado va por FLEX y no por `margin-inline: auto`. Cada pagina tiene
   su propia hoja (equipo.css, puntos.css) que le pone margen a su titulo
   —`.eqp-intro h1 { margin: 0 0 12px }`—, y esa regla es mas especifica: le
   borraba los margenes automaticos y el titulo se iba contra el borde
   izquierdo de una banda de 1500 px. Con `align-items: center` el centrado no
   depende del margen, asi que ninguna hoja de pagina lo puede romper sin
   querer. */
.cap-intro, .pv-intro, .eqp-intro, .rv-intro {
  display: flex; flex-direction: column; align-items: center;
}
.cap-intro > *, .pv-intro > *, .eqp-intro > *, .rv-intro > * {
  position: relative; z-index: 1; max-width: 620px; width: 100%;
}

/* ── Los estados vacios ───────────────────────────────────────────────────
   Antes eran una frase suelta en el medio de la nada, y una frase sola en una
   pagina en blanco se lee como que algo fallo. Ahora es una caja con marco:
   se lee como una respuesta, no como un error. */
.cap-centro, .pv-centro, .eqp-centro {
  background: var(--cap-papel);
  border: 1px dashed var(--cap-linea);
  border-radius: 18px;
  padding: 46px 26px;
  margin: 0 auto 26px;
  max-width: 560px;
}

/* ⚠ Ya NO llevan margen negativo. La banda esta FUERA de <main>, asi que
   ocupa el ancho entero sola. El margen negativo era un parche de cuando
   estaba adentro: solo alcanzaba a tapar el padding de la hoja, y en un
   monitor la banda quedaba flotando con el fondo asomando a los costados. */
.cap-intro, .pv-intro, .eqp-intro, .rv-intro { margin: 0 0 34px; }

@media (max-width: 620px) {
  .cap-intro, .pv-intro, .eqp-intro, .rv-intro { margin: 0 0 24px; }
  .cap-intro, .pv-intro, .eqp-intro, .rv-intro { padding: 34px 20px 32px; }
  /* La hoja se va: a este ancho queda debajo del texto y lo ensucia. */
  .cap-intro::after, .pv-intro::after, .eqp-intro::after, .rv-intro::after { display: none; }
}

/* ═══ APROVECHAR EL ANCHO ════════════════════════════════════════════════════
   La hoja topeaba en 780 px, que era el ancho de cuando la pagina era tres
   carteles centrados. Con la biblioteca cargada, en un monitor quedaban dos
   tercios de pantalla vacios a los costados. */
@media (min-width: 900px) {
  .cap-hoja { max-width: 1000px; }
  /* Dos materiales por fila: la lista de una sola columna dejaba media pantalla
     en blanco y obligaba a bajar el doble. */
  .cap-grupo { max-width: none; }
  .cap-grupo .cap-item { padding: 18px 0; }
  .cap-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
  .cap-grupo h2, .cap-grupo-resumen { grid-column: 1 / -1; }
  /* El primero de CADA columna no lleva la linea de arriba. */
  .cap-grupo .cap-item:nth-of-type(-n+2) { border-top: 0; }

  /* Los tres motivos, EN FILA. Apilados en una columna de lectura dejaban la
     banda medio vacia a los costados y obligaban a bajar tres veces para leer
     tres frases. En fila la banda se llena sola y se leen de un vistazo.
     Va con `.rv-intro >` a proposito: pisa el ancho de lectura que la banda
     le pone a todos sus hijos, sin depender del orden del archivo. */
  .rv-intro > .rv-puntos { max-width: 940px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rv-puntos li { padding: 18px 20px; }
}

/* ═══ FONDO CON PROFUNDIDAD  (02/09/2026) ════════════════════════════════════
   El fondo era un beige plano y todo lo demas eran tarjetas blancas encima:
   por eso se veia "volado". Sin nada detras, cada caja parece recortada y
   pegada, no apoyada.

   Se le ponen tres cosas, todas hechas con CSS —ni una imagen, ni un pedido
   mas al servidor—:
     1. Dos manchas de color muy suaves, FIJAS al visor, que dan un degradado
        que no se mueve al bajar. Es lo que hace que el fondo se lea como un
        espacio y no como un papel.
     2. Un punteado apenas visible, del tamano de una uña. No se ve; se siente.
        Es lo que le saca la sensacion de vacio a las zonas sin contenido.
     3. Una hoja enorme abajo a la derecha, casi transparente, para que el pie
        de la pagina no termine en la nada.
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--cap-fondo);
  background-image:
    /* el punteado */
    radial-gradient(rgba(63,139,124,.055) 1px, transparent 1px),
    /* las dos manchas */
    radial-gradient(46% 38% at 82% 4%,  rgba(127,196,180,.20) 0%, rgba(127,196,180,0) 70%),
    radial-gradient(52% 44% at 6% 46%,  rgba(127,196,180,.13) 0%, rgba(127,196,180,0) 72%),
    radial-gradient(40% 34% at 92% 88%, rgba(196,171,143,.16) 0%, rgba(196,171,143,0) 70%);
  background-size: 22px 22px, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-attachment: scroll, fixed, fixed, fixed;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  min-height: 100vh;
}

/* La hoja del fondo. En un pseudo-elemento del <body> y no en el background
   para poder recortarla contra el borde sin repetirla. */
body::before {
  content: '';
  position: fixed; right: -90px; bottom: -110px;
  width: 460px; height: 460px; z-index: 0; pointer-events: none;
  opacity: .055;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f8b7c' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13V6a1 1 0 0 1 1-1h1a7 7 0 0 1 7 7 7 7 0 0 1 7-7h1a1 1 0 0 1 1 1v1a7 7 0 0 1-7 7h-2Z'/%3E%3C/svg%3E");
}
/* Todo el contenido por encima del fondo. */
.cap-cab, main { position: relative; z-index: 1; }

/* ═══ QUE LA PAGINA NO TERMINE EN EL AIRE ══════════════════════════════════

   Estas paginas tienen poco contenido a proposito —el equipo es una persona,
   la solicitud es una tarjeta— y sin nada que las cierre abajo quedaban con
   media pantalla vacia y la sensacion de que faltaba algo o de que no habia
   terminado de cargar.

   Dos cosas lo arreglan: la columna que empuja el pie hasta abajo, y un pie
   que da por terminada la pagina y ofrece a donde ir. Ese pie ademas suma los
   enlaces internos que a estas paginas les faltaban.
   ═════════════════════════════════════════════════════════════════════════ */
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.cap-intro, .pv-intro, .eqp-intro, .rv-intro { flex: none; }

.cap-pie {
  position: relative; z-index: 1; flex: none;
  margin-top: 56px; padding: 34px 22px 30px;
  border-top: 1px solid var(--cap-linea);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 100%);
}
.cap-pie-in {
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
}
.cap-pie-marca {
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cap-verde);
}
.cap-pie-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.cap-pie-links a {
  color: var(--cap-suave); text-decoration: none; font-size: 13.5px;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.cap-pie-links a:hover { color: var(--cap-tinta); border-bottom-color: var(--cap-linea); }
.cap-pie-nota {
  max-width: 1000px; margin: 14px auto 0;
  font-size: 12px; color: var(--cap-tenue);
}
@media (max-width: 620px) {
  .cap-pie { margin-top: 40px; padding: 26px 16px 24px; }
  .cap-pie-links { margin-left: 0; }
}

/* Las tarjetas dejan de estar "recortadas": una sombra apenas perceptible las
   apoya sobre el fondo en vez de pegarlas. */
.pv-punto, .eqp-persona, .cap-aviso, .pv-sumate, .resena-form {
  box-shadow: 0 1px 2px rgba(47,39,35,.03), 0 8px 24px rgba(47,39,35,.045);
}

@media (max-width: 620px) {
  body::before { width: 300px; height: 300px; right: -70px; bottom: -80px; }
}


/* ===========================================================================
   LAS TRES PANTALLAS

   La capacitacion dejo de ser una pagina con todo adentro. Ahora son tres
   niveles con direccion propia -- categorias, material de una categoria, y la
   clase sola -- y cada uno pide una forma distinta:

     el indice   respira, son pocas tarjetas grandes y elegis
     la lista    es un listado, se recorre rapido
     la clase    es para LEER: columna angosta, tipografia grande, nada al lado

   Antes todo usaba el mismo molde apretado, y por eso una nota larga se veia
   igual de incomoda que un titulo suelto.
   =========================================================================== */

/* -- Por donde ando --------------------------------------------------------
   Tres niveles sin migas es facil perderse: entrando por el enlace de una clase
   que te paso alguien, no hay forma de saber que hay mas. */
.cap-migas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 7px; margin: 0 0 16px; font-size: 13px; color: var(--cap-suave);
}
.cap-migas a { color: var(--cap-suave); text-decoration: none; }
.cap-migas a:hover { color: var(--cap-verde-hondo); text-decoration: underline; }
.cap-miga-sep { color: var(--cap-linea); }

/* -- PANTALLA 1 . las categorias -------------------------------------------
   Pocas y grandes. Es una eleccion, no un listado: conviene que cada una tenga
   peso y diga que hay adentro antes de entrar. */
.cap-cats { display: grid; gap: 16px; }

.cap-cat {
  position: relative; display: block;
  padding: 24px 26px 22px; border-radius: 16px;
  background: var(--cap-papel); border: 1px solid var(--cap-linea);
  color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(47, 39, 35, .04), 0 8px 22px -14px rgba(47, 39, 35, .18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* Entran escalonadas. El --n lo pone el JS con el numero de tarjeta. */
  animation: cap-sube .5s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--n, 0) * 70ms);
}
.cap-cat:hover {
  transform: translateY(-3px);
  border-color: #cfe6e0;
  box-shadow: 0 2px 4px rgba(47, 39, 35, .05), 0 18px 34px -18px rgba(47, 39, 35, .28);
}
.cap-cat:hover .cap-cat-flecha { transform: translateX(4px); color: var(--cap-verde-hondo); }

.cap-cat-iconos { display: flex; gap: 8px; margin-bottom: 14px; }
.cap-cat-icono {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: #eef7f5; color: var(--cap-verde-hondo);
}
.cap-cat-icono svg { width: 19px; height: 19px; }

.cap-cat h2 { font-size: 20px; margin: 0 0 6px; letter-spacing: -.01em; }
.cap-cat-resumen { margin: 0 0 12px; font-size: 14px; color: var(--cap-suave); line-height: 1.6; }
.cap-cat-cuenta { margin: 0; font-size: 12.5px; color: var(--cap-tenue); }
.cap-cat .cap-solo-equipo { position: absolute; top: 22px; right: 26px; }
.cap-cat-flecha {
  position: absolute; right: 24px; bottom: 20px;
  font-size: 18px; color: var(--cap-tenue);
  transition: transform .2s ease, color .2s ease;
}

/* -- PANTALLA 2 . el material de una categoria -----------------------------
   Una fila por pieza. No una tarjeta suelta por cada una: diez tarjetas
   flotando con su borde y su margen se leen como una pila de cosas sin
   relacion. La fila entera es el enlace -- un boton "abrir" a la derecha
   obligaria a apuntar, y en el telefono eso se paga caro. */
.cap-lista {
  background: var(--cap-papel); border: 1px solid var(--cap-linea);
  border-radius: 16px; padding: 4px 22px;
  box-shadow: 0 1px 2px rgba(47, 39, 35, .04), 0 8px 22px -14px rgba(47, 39, 35, .16);
}
.cap-lista .cap-item {
  color: inherit; text-decoration: none;
  margin: 0 -14px; padding: 18px 14px; border-radius: 11px;
  border-top: 1px solid var(--cap-linea);
  transition: background .18s ease;
  animation: cap-sube .45s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--n, 0) * 45ms);
}
.cap-lista .cap-item:first-child { border-top: 0; }
.cap-lista .cap-item:hover { background: #f6faf9; }
.cap-lista .cap-item:hover .cap-cat-flecha { transform: translateX(4px); color: var(--cap-verde-hondo); }
.cap-lista .cap-item-accion { align-items: center; flex-direction: row; gap: 10px; }
.cap-lista .cap-cat-flecha { position: static; font-size: 17px; }

/* -- PANTALLA 3 . la clase -------------------------------------------------
   Esta es la que motivo todo el cambio. Una nota de dos mil palabras adentro de
   un acordeon no se puede leer; sola, con la columna angosta y el cuerpo mas
   grande, si. */
.cap-clase {
  background: var(--cap-papel); border: 1px solid var(--cap-linea);
  border-radius: 16px; padding: 30px 32px 26px;
  box-shadow: 0 1px 2px rgba(47, 39, 35, .04), 0 10px 28px -16px rgba(47, 39, 35, .2);
  animation: cap-sube .45s cubic-bezier(.2, .7, .3, 1) backwards;
}
.cap-clase-meta {
  margin: 0 0 22px; padding-bottom: 16px;
  border-bottom: 1px solid var(--cap-linea);
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cap-tenue);
}

/* El texto. 17px y interlineado holgado: es para leer un rato, no para
   escanear. La medida se corta en 62 caracteres porque una linea mas larga
   cansa y se pierde el renglon al volver. */
.cap-lectura { max-width: 62ch; }
.cap-lectura p {
  margin: 0 0 1.15em; font-size: 17px; line-height: 1.78; color: var(--cap-tinta);
}
.cap-lectura p:last-child { margin-bottom: 0; }
/* La primera linea entra mas grande: marca donde empieza la lectura. */
.cap-lectura p:first-child { font-size: 18.5px; color: #4a3f38; }

/* Video, imagen y PDF. */
.cap-medio { margin: 0; }
.cap-medio video {
  width: 100%; max-height: 70vh; border-radius: 12px; background: #000; display: block;
}
.cap-medio--imagen img {
  width: 100%; height: auto; border-radius: 12px; display: block;
  background: var(--cap-fondo);
}
.cap-medio--imagen .cap-btn, .cap-medio--pdf .cap-btn { margin-top: 14px; }
.cap-medio--pdf object {
  /* Alto fijo: un PDF adentro de la pagina no puede crecer solo, y sin alto el
     recuadro colapsa a cero y parece que no cargo. */
  width: 100%; height: 78vh; min-height: 420px;
  border: 1px solid var(--cap-linea); border-radius: 12px; display: block;
}
.cap-medio--pdf object p { padding: 24px; margin: 0; color: var(--cap-suave); }
.cap-medio--afuera {
  padding: 26px; border-radius: 12px; text-align: center;
  background: var(--cap-fondo); border: 1px dashed var(--cap-linea);
}
.cap-medio--afuera p { margin: 0 0 14px; color: var(--cap-suave); font-size: 14px; }

.cap-clase-producto {
  margin-top: 26px; padding: 18px 20px; border-radius: 12px;
  background: #f2f8f7; border: 1px solid #dcece8;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.cap-clase-producto p { margin: 0; font-size: 14px; color: var(--cap-suave); }
.cap-clase-pie {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cap-linea);
}

@keyframes cap-sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* -- Pantalla chica -------------------------------------------------------- */
@media (max-width: 640px) {
  .cap-cat { padding: 20px 18px 34px; }
  .cap-cat .cap-solo-equipo { top: 18px; right: 18px; }
  .cap-cat-flecha { right: 18px; bottom: 14px; }
  .cap-lista { padding: 4px 14px; }
  .cap-clase { padding: 22px 18px 20px; border-radius: 14px; }
  .cap-lectura p { font-size: 16.5px; }
  .cap-lectura p:first-child { font-size: 17.5px; }
  .cap-medio--pdf object { height: 62vh; min-height: 340px; }
}

/* -- Pantalla grande ------------------------------------------------------
   Las categorias van de a dos y el listado se abre en dos columnas: en un
   monitor, una sola columna de tarjetas deja media pantalla vacia. La clase
   NO se abre en dos columnas -- partir un texto en dos obliga a subir y bajar
   para seguir leyendo. */
@media (min-width: 900px) {
  .cap-cats { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cap-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 6px 26px; }
  .cap-lista .cap-item:nth-child(-n+2) { border-top: 0; }
  .cap-clase { padding: 40px 46px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-cat, .cap-lista .cap-item, .cap-clase { animation: none; }
  .cap-cat:hover { transform: none; }
  .cap-cat-flecha { transition: none; }
}


/* -- La tarjeta de un documento -------------------------------------------
   El visor del navegador no se puede maquillar: barra negra, miniaturas y
   botones de imprimir. Metido de una en una pagina beige se ve como un parche,
   y en el telefono muchos navegadores ni lo muestran. Asi que la portada es
   esta tarjeta, que siempre se ve bien, y el visor sale solo si se pide. */
.cap-doc {
  display: flex; align-items: center; gap: 26px;
  padding: 26px; border-radius: 14px;
  background: linear-gradient(135deg, #f4faf8 0%, #eef6f3 100%);
  border: 1px solid #dcece8;
}
/* Una hoja dibujada con CSS. No es el PDF de verdad —renderizarlo pediria una
   libreria entera— pero dice "esto es un documento" de un vistazo. */
.cap-doc-hoja {
  position: relative; flex-shrink: 0;
  width: 116px; height: 150px; padding: 30px 14px 0;
  background: #fff; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(47,39,35,.06), 0 14px 26px -14px rgba(47,39,35,.35);
  overflow: hidden;
}
/* La esquina doblada. */
.cap-doc-hoja::after {
  content: ''; position: absolute; top: 0; right: 0;
  border-width: 0 22px 22px 0; border-style: solid;
  border-color: #e4efec #f4faf8;
}
.cap-doc-tipo {
  position: absolute; top: 11px; left: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: #c0563f;
}
.cap-doc-renglon {
  display: block; height: 4px; margin-bottom: 7px; border-radius: 2px;
  background: #e8e3dd;
}
.cap-doc-renglon--titulo { height: 7px; width: 70%; background: #cfe2dc; margin-bottom: 12px; }
.cap-doc-renglon--corto { width: 55%; }

.cap-doc-datos { min-width: 0; }
.cap-doc-datos h2 { font-size: 18px; margin: 0 0 5px; }
.cap-doc-datos p { margin: 0 0 16px; font-size: 13.5px; color: var(--cap-tenue); }
.cap-doc-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
  .cap-doc { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
  .cap-doc-acciones .cap-btn { width: auto; }
}