/* Mi Mariscal — identidad comercial.
 *
 * 🔴 SIN FOTOGRAFÍAS, y no por falta de presupuesto. Una foto de banco o
 * generada de «brigadista latinoamericano en calle estrecha» la reconoce en dos
 * segundos el único comprador que importa —un jefe de campaña que ha pisado mil
 * barrios— y lo que entiende es «este software tampoco ha pisado la calle».
 * Justo lo contrario de lo que se vende aquí.
 *
 * Hay UN gráfico, y es SVG: el mapa del territorio de la portada. Dibuja lo que
 * hace el producto —manzanas trabajadas encendidas y la ruta del equipo— en
 * 9 KB, nítido en cualquier pantalla y sin parecerse a nada de un banco de
 * imágenes.
 *
 * El resto del impacto lo cargan la tipografía, el contraste y el ritmo de las
 * bandas: oscuro, claro, oscuro. La página entera pesa menos que una sola
 * fotografía y se abre completa desde un enlace de WhatsApp con datos móviles,
 * que es como llega la gente.
 *
 * Misma familia visual que el panel (papel, tinta, oro, serif en los titulares)
 * pero CSS propio: una landing que dependa del panel se rompe el día que el
 * panel cambie.
 */
:root {
  --papel: #f7f6f2;
  --papel-2: #fffdf9;
  --tinta: #16324f;
  --tinta-2: #0d1c2c;
  --noche: #0a141f;
  --texto: #182031;
  --suave: #5c6675;
  --oro: #b8860b;
  --oro-vivo: #e0ae3c;
  --oro-claro: #faf3e3;
  --borde: #e4e1da;
  --r: 14px;
  --serif: Georgia, "Times New Roman", ui-serif, serif;
  --sombra: 0 1px 2px rgba(24,32,49,.05), 0 10px 32px rgba(24,32,49,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--papel); color: var(--texto);
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--serif); line-height: 1.08; letter-spacing: -.02em; }
a { color: inherit; }
strong, b { font-weight: 700; }

.env { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 26px; }
.estrecho { max-width: 760px; }

/* Un solo recurso gráfico en toda la página: la línea de oro que abre cada
 * bloque. Repetida, hace de sistema; es lo que sustituye a las fotos. */
.ojo {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
  margin-bottom: 20px;
}
.ojo::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  background: var(--oro); vertical-align: .3em; margin-right: 12px;
}

/* ---------- barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,20,31,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.barra .env { display: flex; align-items: center; gap: 18px; height: 64px; }
.marca { font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
         text-decoration: none; color: #fff; letter-spacing: -.02em; }
.marca span { color: var(--oro-vivo); }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.barra nav a { text-decoration: none; color: #9fadbd; font-size: .93rem; }
.barra nav a:hover { color: #fff; }
.idiomas { display: flex; gap: 5px; }
.idiomas a {
  font-size: .74rem; letter-spacing: .08em; padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #9fadbd;
}
.idiomas a.on { background: var(--oro); color: #fff; border-color: var(--oro); }

.btn {
  display: inline-block; background: var(--oro); color: #fff;
  padding: 14px 26px; border-radius: 10px; text-decoration: none;
  font-weight: 700; border: none; cursor: pointer; font-size: 1rem;
  transition: background .15s ease, transform .15s ease; text-align: center;
}
.btn:hover { background: #96690a; transform: translateY(-1px); }
.btn.chico { padding: 9px 18px; font-size: .9rem; }
.btn.fantasma { background: transparent; color: #fff;
                border: 1px solid rgba(255,255,255,.35); font-weight: 600; }
.btn.fantasma:hover { background: rgba(255,255,255,.1); }
.btn.tinta { background: var(--tinta); }
.btn.tinta:hover { background: var(--tinta-2); }

/* ---------- portada ---------- */
.portada {
  background: var(--noche); color: #fff; position: relative; overflow: hidden;
  padding: 96px 0 84px;
}
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(184,134,11,.16), transparent 65%),
    radial-gradient(60% 55% at 92% 100%, rgba(22,50,79,.85), transparent 70%);
}
.portada .env { position: relative; }
.portada-caja {
  display: grid; gap: 52px; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
.portada .ojo { color: var(--oro-vivo); max-width: 44ch; line-height: 1.7; }
.portada .ojo::before { background: var(--oro-vivo); }
.claim {
  font-size: clamp(2.9rem, 8.5vw, 5.6rem); font-weight: 400;
  letter-spacing: -.035em; max-width: 13ch;
}
.claim em { font-style: normal; color: var(--oro-vivo); }
.bajada {
  font-size: clamp(1.08rem, 2.2vw, 1.32rem); color: #b9c6d5;
  max-width: 52ch; margin-top: 26px; line-height: 1.55;
}
.bajada b { color: #fff; font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px;
            align-items: center; }
.acciones .nota { font-size: .88rem; color: #8b9aab; }
/* ---------- el mapa de la portada ----------
 * 🔴 El ÚNICO gráfico de la página, y es SVG: 9 KB, se ve nítido en cualquier
 * pantalla y no es una foto de banco. Cuenta el producto entero —un equipo
 * recorriendo territorio y dejando registro— sin una sola palabra. */
.lienzo {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #12283d, #16324f 55%, #1d3f60);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 30px 70px rgba(0,0,0,.42);
}
.lienzo svg { display: block; width: 100%; height: auto; }
.lienzo .pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px;
  font-size: .76rem; color: #c2cfdd;
  background: linear-gradient(transparent, rgba(6,14,23,.9) 60%);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.lienzo .pie i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; }
.pastilla { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pastilla.oro { background: var(--oro-vivo); box-shadow: 0 0 0 3px rgba(224,174,60,.22); }
.pastilla.verde { background: #4c9a6a; box-shadow: 0 0 0 3px rgba(76,154,106,.22); }
.pastilla.gris { background: #6b7b8d; }

/* La ruta se dibuja sola una vez, al cargar, y las manzanas trabajadas laten.
 * Es todo el movimiento de la página. */
.ruta { stroke-dasharray: 1200; stroke-dashoffset: 1200;
        animation: trazar 5s ease-in-out .5s forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.latido { transform-origin: center; transform-box: fill-box;
          animation: latir 2.8s ease-in-out infinite; }
.latido:nth-of-type(2n) { animation-delay: .55s; }
.latido:nth-of-type(3n) { animation-delay: 1.2s; }
.latido:nth-of-type(5n) { animation-delay: 1.8s; }
@keyframes latir {
  0%, 100% { opacity: .4;  transform: scale(.9); }
  45%      { opacity: 1;   transform: scale(1.3); }
}
.brigada { animation: aparecer 1s ease-out 4.6s both; }
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.tiras {
  margin-top: 54px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr));
}
.portada-caja + .tiras, .tiras { grid-column: 1 / -1; }
.tiras div { font-size: .95rem; color: #93a2b3; }
.tiras b { display: block; font-family: var(--serif); font-size: 1.22rem;
           color: #fff; margin-bottom: 3px; letter-spacing: -.01em; }

/* ---------- bandas ---------- */
.banda { padding: 88px 0; }
.banda.oscura { background: var(--tinta); color: #dde5ee; }
.banda.oscura h2, .banda.oscura h3 { color: #fff; }
.banda.negra { background: var(--noche); color: #dde5ee; }
.banda.negra h2, .banda.negra h3 { color: #fff; }
.banda.crema { background: var(--papel-2); border-block: 1px solid var(--borde); }

h2.grande {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); max-width: 20ch; letter-spacing: -.03em;
}
.entradilla { font-size: 1.1rem; color: var(--suave); max-width: 58ch;
              margin-top: 20px; }
.banda.oscura .entradilla, .banda.negra .entradilla { color: #9fb0c2; }

/* ---------- el problema ---------- */
.dolores { display: grid; gap: 0; margin-top: 48px; }
.dolor {
  display: grid; gap: 22px; align-items: baseline; padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.13);
  grid-template-columns: 62px minmax(0, 1fr);
}
.dolor:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.dolor .num { font-family: var(--serif); font-size: 2.4rem; color: var(--oro-vivo);
              line-height: 1; opacity: .85; }
.dolor h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin-bottom: 8px; }
.dolor p { color: #9fb0c2; font-size: 1rem; max-width: 62ch; }

/* ---------- pilares ---------- */
.pilares { display: grid; gap: 22px; margin-top: 46px;
           grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.pilar { background: var(--papel-2); border: 1px solid var(--borde);
         border-radius: var(--r); padding: 30px 28px; box-shadow: var(--sombra); }
.pilar h3 { font-size: 1.28rem; margin-bottom: 10px; }
.pilar p { color: var(--suave); font-size: .99rem; }
.pilar .remate { display: block; margin-top: 16px; font-size: .88rem;
                 font-weight: 700; color: var(--oro); }

/* ---------- la cadena ---------- */
.pasos { display: grid; gap: 2px; margin-top: 46px;
         grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr));
         background: var(--borde); border: 1px solid var(--borde);
         border-radius: var(--r); overflow: hidden; }
.paso { background: var(--papel-2); padding: 28px 24px; }
.paso .n { font-family: var(--serif); font-size: .78rem; letter-spacing: .18em;
           text-transform: uppercase; color: var(--oro); display: block;
           margin-bottom: 12px; }
.paso h3 { font-size: 1.1rem; margin-bottom: 7px; }
.paso p { color: var(--suave); font-size: .93rem; }
.remate-cadena {
  margin-top: 30px; font-family: var(--serif); font-size: clamp(1.2rem,2.6vw,1.6rem);
  color: var(--tinta); max-width: 40ch;
}

/* ---------- objeciones ---------- */
.objeciones { display: grid; gap: 18px; margin-top: 44px;
              grid-template-columns: repeat(auto-fit, minmax(min(270px,100%), 1fr)); }
.objecion { border-left: 2px solid var(--oro); padding: 4px 0 4px 20px; }
.objecion b { display: block; font-family: var(--serif); font-size: 1.1rem;
              margin-bottom: 6px; }
.objecion span { color: var(--suave); font-size: .96rem; }
.banda.oscura .objecion span, .banda.negra .objecion span { color: #9fb0c2; }

/* ---------- autoridad ---------- */
.cita {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.32; color: #fff; letter-spacing: -.02em; max-width: 20ch;
}
.cita em { font-style: normal; color: var(--oro-vivo); }
.firma-cita { margin-top: 22px; color: #8b9aab; font-size: .95rem; }
.credenciales { display: grid; gap: 24px; }
.credenciales div b { display: block; font-family: var(--serif); color: #fff;
                      font-size: 1.08rem; margin-bottom: 4px; }
.credenciales div span { color: #9fb0c2; font-size: .96rem; }
.dos { display: grid; gap: 52px; align-items: start;
       grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); }

/* ---------- stack ----------
 * Las dos piezas con nombre —Cerebro y Mi Mariscal— van juntas y grandes: son
 * la cabeza y los pies, y contarlas como dos de cinco categorías sueltas
 * desperdicia el mejor argumento del stack. Las otras tres quedan debajo, más
 * pequeñas, como lo que son: áreas, no productos que se estén vendiendo hoy. */
.stack-cabecera {
  margin-top: 64px; padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.stack-cabecera .entradilla { max-width: 56ch; }
.sub-titulo { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.025em; }

.duo {
  display: grid; gap: 18px; margin-top: 36px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.duo .pieza { padding: 28px 26px; }
.duo .pieza b { font-size: 1.3rem; margin: 10px 0 8px; }
.duo .pieza span { font-size: .97rem; line-height: 1.55; }
.union { display: grid; place-items: center; }
.union span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--oro); color: #fff;
  font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  box-shadow: 0 0 0 6px rgba(224,174,60,.14);
}
.pieza.hermana { border-color: rgba(224,174,60,.55);
                 background: rgba(224,174,60,.07); }
.pieza.hermana b, .pieza.hermana span { color: #fff; }
.pieza.hermana span:not(.marca-esta) { color: #cbd6e2; }
.pieza.hermana .marca-esta { color: var(--oro-vivo); }
.union-frase {
  margin-top: 26px; font-family: var(--serif);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem); color: #fff; max-width: 44ch;
  line-height: 1.35;
}

.piezas { display: grid; gap: 14px; margin-top: 32px;
          grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); }
.pieza { border: 1px solid var(--borde); border-radius: var(--r);
         padding: 22px; background: var(--papel-2); }
.pieza.esta { border-color: var(--oro); background: var(--oro-claro); }
.pieza b { display: block; font-family: var(--serif); font-size: 1.06rem;
           margin-bottom: 5px; }
.pieza span { color: var(--suave); font-size: .92rem; }
.pieza .marca-esta {
  display: block; margin-bottom: 8px; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7a5a08; font-weight: 800;
}
/* En las tarjetas sin fondo dorado el marrón del sello no contrasta contra el
 * papel: pierde el nombre justo cuando el nombre es lo que se está enseñando. */
.pieza:not(.esta) .marca-esta { color: var(--oro); }

/* ---------- cierre y formulario ---------- */
.cierre { background: var(--noche); color: #fff; }
.cierre .dos { gap: 56px; }
.cierre h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); max-width: 16ch; }
.cierre .entradilla { color: #9fb0c2; }
.ventajas { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
.ventajas li { display: flex; gap: 12px; color: #b9c6d5; font-size: .98rem; }
.ventajas li::before { content: "✓"; color: var(--oro-vivo); font-weight: 700; }
.caja-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
             border-radius: 18px; padding: 30px 28px; }
form label { display: block; font-size: .84rem; color: #9fb0c2; margin: 14px 0 5px;
             font-weight: 600; }
form input, form select, form textarea {
  width: 100%; font: inherit; font-size: .97rem; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  background: rgba(255,255,255,.06); color: #fff;
}
form input::placeholder, form textarea::placeholder { color: #7b8b9d; }
form input:focus, form select:focus, form textarea:focus {
  outline: none; border-color: var(--oro-vivo);
  box-shadow: 0 0 0 3px rgba(224,174,60,.18);
}
.aviso { margin-top: 14px; padding: 13px 15px; border-radius: 10px;
         font-size: .93rem; display: none; }
.aviso.ok { display: block; background: rgba(76,154,106,.16); color: #a8e0bf;
            border: 1px solid rgba(76,154,106,.4); }
.aviso.mal { display: block; background: rgba(190,60,60,.16); color: #f2b5b5;
             border: 1px solid rgba(190,60,60,.42); }
.legal { font-size: .8rem; color: #7b8b9d; margin-top: 16px; }

/* ---------- pie ---------- */
footer { background: #060d15; color: #7f8c9c; padding: 48px 0 30px; font-size: .9rem; }
footer .env { display: grid; gap: 26px;
              grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); }
footer h4 { color: #fff; font-family: var(--serif); font-size: 1rem; margin-bottom: 9px; }
footer a { color: #7f8c9c; text-decoration: none; }
footer a:hover { color: #fff; }
.firma { border-top: 1px solid rgba(255,255,255,.08); margin-top: 30px;
         padding-top: 20px; text-align: center; color: #6d7a8a; font-size: .86rem; }
.firma b { color: var(--oro-vivo); font-weight: 600; }

/* ---------- aparecer al bajar ---------- */
.revela { opacity: 0; transform: translateY(16px);
          transition: opacity .55s ease, transform .55s ease; }
.revela.visible { opacity: 1; transform: none; }

@media (max-width: 940px) {
  .portada-caja { grid-template-columns: 1fr; gap: 40px; }
  .claim { max-width: none; }
  /* El «+» pasa a ser un separador horizontal entre las dos piezas. */
  .duo { grid-template-columns: 1fr; }
  .union { padding: 4px 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .barra nav a:not(.btn):not(.idiomas a) { display: none; }
  .barra .env { gap: 10px; }
  .banda { padding: 60px 0; }
  .portada { padding: 62px 0 56px; }
  .claim { max-width: none; }
  .dolor { grid-template-columns: 1fr; gap: 6px; }
  .dolor .num { font-size: 1.6rem; }
  .acciones .btn { width: 100%; }
}

/* Si el sistema pide menos movimiento, todo aparece ya colocado. Una animación
 * que no se puede ver no puede dejar media página invisible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .revela { opacity: 1; transform: none; }
  /* La ruta aparece ya dibujada: la página cuenta lo mismo, quieta. */
  .ruta { stroke-dashoffset: 0; }
  .brigada { opacity: 1; }
}