/* ==========================================================================
   PideFácil — Programa Partner
   Página para integradores y distribuidores de ERP y equipos de IT de
   distribuidoras: el partner presenta al cliente y PideFácil vende, implanta
   y da soporte. Secciones: hero, cómo funciona (camino de tres pasos, el
   mismo de Integraciones), qué gana cada parte (dos tarjetas, solo títulos),
   partners activos (logos), FAQs y formulario.
   Requiere base.css y contacto.css cargados antes: de contacto.css toma la
   tarjeta del formulario, los campos y los estados; de base.css, las
   tarjetas de logo de ERP (.erp-logo) y las FAQs.
   ========================================================================== */

body { background: var(--h-paper); }

/* ======================================================================== */
/* 01 · Hero                                                                */
/* ======================================================================== */

.hero {
  padding-block: clamp(120px, 15.5vw, 220px) clamp(70px, 10.5vw, 150px);
  background-image:
    radial-gradient(1694px 1072px at 78% 34%, rgba(223, 255, 122, 0.32) 0%, rgba(223, 255, 122, 0) 24%),
    radial-gradient(1932px 1222px at 88% 78%, rgba(152, 176, 106, 0.36) 0%, rgba(152, 176, 106, 0) 28%),
    linear-gradient(147.69deg, #2c3d18 0%, #4a5f2c 48%, #223111 100%);
}

.hero h1 { text-transform: uppercase; }

.hero-sub { margin-top: clamp(1rem, 1.7vw, 24px); }

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: clamp(1.5rem, 2.6vw, 37px);
}

/* Botón secundario sobre fondo oscuro: contorno claro, sin relleno. */
.p-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-family: var(--h-ui);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.p-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Las dos fotos del hero son horizontales; la pequeña se recorta por la
   izquierda, donde está la gente. */
.hero-foto.is-b img { object-position: left center; }

/* Titulares de las secciones claras. */
.como h2,
.ganamos h2,
.activos h2 {
  margin-top: 0.1em;
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.como .h-lead,
.ganamos .h-lead,
.activos .h-lead { margin-top: clamp(1rem, 1.6vw, 23px); }

/* ======================================================================== */
/* 02 · Cómo funciona — camino de tres pasos, una línea por paso            */
/* Copia del .camino de Integraciones (integraciones.css); solo cambia el   */
/* fondo de los puntos, que aquí es papel y no banda.                       */
/* ======================================================================== */

.como {
  /* La cabecera fija tapa el principio de la sección al llegar por ancla. */
  scroll-margin-top: 90px;
  padding-block: clamp(4rem, 10.5vw, 150px) clamp(4rem, 11vw, 156px);
  text-align: center;
}

.camino {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(2.5rem, 6vw, 85px) 0 0;
  padding: 0;
  list-style: none;
}

.camino-paso { position: relative; padding: 0 clamp(0.75rem, 1.7vw, 24px); }

/* La línea continua que une los puntos, de centro a centro de columna. */
.camino-paso::before {
  content: '';
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  border-top: 2px solid rgba(59, 78, 35, 0.3);
}

.camino-paso:first-child::before { display: none; }

.camino-punto {
  position: relative;
  /* Por encima de las líneas: la de cada paso nace en el centro del paso
     anterior y, al pintarse después en el DOM, se veía dentro de su punto. */
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  border: 2px solid #3b4e23;
  border-radius: 50%;
  background: var(--h-paper);
}

.camino-paso.is-final .camino-punto {
  border-color: #3b4e23;
  background: var(--h-accent);
}

.camino-paso h3 {
  margin-top: clamp(1rem, 1.8vw, 26px);
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.15rem, 1.97vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.camino-paso p {
  max-width: 300px;
  margin: 8px auto 0;
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--h-ink-muted);
  text-shadow: 0.331px 0 0 #2c3d18;
}

/* ======================================================================== */
/* 03 · Ganamos los dos — qué gana cada parte                               */
/* ======================================================================== */

.ganamos {
  padding-block: clamp(4rem, 10.5vw, 150px);
  background: var(--h-band);
}

/* Tres columnas: la del titular, más ancha y a la izquierda, y las dos
   tarjetas. Las tres son hijas directas del container para que el reveal de
   main.js las escalone. */
.ganamos-grid {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 420fr) minmax(0, 420fr);
  /* Las tarjetas se estiran a la misma altura; el titular, que es más
     bajo, se centra respecto a ellas. */
  align-items: stretch;
  gap: 20px clamp(1.25rem, 2.8vw, 40px);
}

.ganamos-copy {
  align-self: center;
  padding-right: clamp(0px, 2vw, 28px);
}

.gana-col {
  padding: clamp(1.75rem, 2.8vw, 40px) clamp(1.5rem, 2.4vw, 34px);
  border: 1px solid var(--h-hairline);
  border-radius: 26px;
  background: var(--h-paper);
  box-shadow: var(--h-card-shadow);
}

/* La columna de PideFácil va en oscuro, como el plan base de Planes. */
.gana-col.is-pf {
  border-color: rgba(152, 176, 106, 0.5);
  background-image:
    radial-gradient(700px 420px at 85% 12%, rgba(223, 255, 122, 0.18) 0%, rgba(223, 255, 122, 0) 55%),
    linear-gradient(139.6deg, #2c3d18 0%, #4a5f2c 48%, #223111 100%);
  box-shadow: 0 24px 60px rgba(44, 61, 24, 0.28);
}

/* El título de la tarjeta, grande y con la barra verde de las cifras de
   Nosotros debajo, para que se distinga de la lista a primera vista. */
.gana-col h3 {
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.gana-col h3::after {
  content: '';
  display: block;
  width: 34px;
  height: 4px;
  margin: 14px 0 0;
  border-radius: 999px;
  background: var(--h-accent);
}

.gana-col.is-pf h3 { color: #fff; }

.gana-col ul {
  margin: clamp(1.25rem, 2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

/* Solo el título de cada punto, sin desarrollo, como lista con la viñeta
   verde de las listas de Planes. */
.gana-col li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--h-ink-muted);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.gana-col li + li { margin-top: 12px; }

.gana-col li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-accent);
}

.gana-col.is-pf li { color: var(--h-footer-ink); text-shadow: none; }

/* ======================================================================== */
/* 04 · Partners activos — logos de ERP                                     */
/* ======================================================================== */

.activos {
  padding-block: clamp(4rem, 10.5vw, 150px) clamp(4rem, 11vw, 156px);
  text-align: center;
}

/* Misma rejilla que la de compatibilidad en Integraciones; la tarjeta de
   cada logo (.erp-logo) vive en base.css. */
.activos-logos { margin-top: clamp(2rem, 4.9vw, 70px); }

.activos-lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

/* Doce logos, seis por fila: dos filas justas en escritorio. En rejilla la
   tarjeta se adapta a su columna en vez de medir los 190px fijos de base.css. */
.activos .erp-logo {
  width: auto;
  height: auto;
  aspect-ratio: 190 / 108;
}

/* La tercera fila, plegable con transición. Con JavaScript arranca plegada
   (partners.js pone .is-plegada); la altura la anima el propio script
   midiendo el contenido, como las FAQ, y al terminar de abrir suelta el
   recorte para que la sombra de las tarjetas no quede cortada. El fundido
   va en la rejilla interior y no en este bloque porque el reveal de
   base.css fuerza la opacidad de los hijos directos del container. */
.activos-extra {
  margin-top: 20px;
  transition: max-height 0.45s ease, margin-top 0.45s ease, visibility 0s;
}

.activos-extra .activos-lista {
  transition: opacity 0.35s ease 0.1s, transform 0.45s ease;
}

.activos-extra.is-plegada {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.45s ease, margin-top 0.45s ease, visibility 0s 0.45s;
}

.activos-extra.is-plegada .activos-lista {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.45s ease;
}

.activos-extra.is-animando { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .activos-extra,
  .activos-extra .activos-lista { transition: none; }
}

/* El botón «Ver más ERP», como texto subrayado en un verde más claro que
   la tinta. Sin JavaScript queda oculto (el atributo hidden no puede con
   un display propio, de ahí la regla aparte). */
.activos-mas {
  display: inline-block;
  margin-top: clamp(1.5rem, 2.6vw, 37px);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--h-ui);
  font-weight: 600;
  font-size: 1rem;
  color: #5f7a35;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.activos-mas[hidden] { display: none; }

.activos-mas:hover { color: var(--h-ink); }

/* ======================================================================== */
/* 05 · FAQs                                                                */
/* ======================================================================== */

.faqs {
  padding-block: clamp(4rem, 10.5vw, 150px);
  background: var(--h-band);
}

/* ======================================================================== */
/* 06 · Alta — formulario sobre banda oscura                                */
/* ======================================================================== */

.alta {
  /* La cabecera fija tapa el principio de la sección al llegar por ancla. */
  scroll-margin-top: 90px;
  padding-block: clamp(4rem, 10.5vw, 150px);
  background-color: #2c3d18;
  background-image:
    radial-gradient(1694px 1072px at 78% 34%, rgba(223, 255, 122, 0.32) 0%, rgba(223, 255, 122, 0) 24%),
    radial-gradient(1932px 1222px at 88% 78%, rgba(152, 176, 106, 0.36) 0%, rgba(152, 176, 106, 0) 28%),
    linear-gradient(147.69deg, #2c3d18 0%, #4a5f2c 48%, #223111 100%);
}

.alta-grid {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 600fr);
  align-items: center;
  gap: clamp(2rem, 5.6vw, 80px);
}

.alta h2 {
  margin-top: 0.1em;
  font-size: var(--fs-h2);
  color: #fff;
}

.alta .h-lead {
  margin-top: clamp(1rem, 1.7vw, 24px);
  color: rgba(255, 255, 255, 0.85);
}

/* Los datos de contacto directo, como en Contacto pero con el icono fuera
   del enlace. */
.alta-datos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.2vw, 17px);
  margin-top: clamp(1.75rem, 2.8vw, 40px);
}

.alta-datos li {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 300;
}

.alta-datos a:hover { text-decoration: underline; text-underline-offset: 4px; }

.form-field input::placeholder { color: rgba(44, 61, 24, 0.45); }

/* ======================================================================== */
/* Responsive                                                               */
/* ======================================================================== */

@media (max-width: 1080px) {
  /* El titular pasa arriba, a todo lo ancho, y las tarjetas debajo en par. */
  .ganamos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ganamos-copy { grid-column: 1 / -1; max-width: 760px; padding-right: 0; }
}

@media (max-width: 900px) {
  /* Bajo el texto centrado del hero y del bloque de contacto, los botones y
     los datos de contacto van centrados también. */
  .hero-acciones { justify-content: center; }
  .alta-datos { align-items: center; }

  .alta-grid { grid-template-columns: minmax(0, 1fr); }

  .activos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .activos-extra { margin-top: 14px; }

  /* El camino se pone en vertical: la línea baja por la izquierda. */
  .como { text-align: left; }

  .camino {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, 6vw, 44px);
  }

  .camino-paso { padding: 0 0 0 38px; }

  .camino-punto { position: absolute; top: 2px; left: 0; margin: 0; }

  .camino-paso::before {
    top: 20px;
    bottom: calc(-1 * clamp(2rem, 6vw, 44px));
    left: 8px;
    width: 0;
    border-top: 0;
    border-left: 2px solid rgba(59, 78, 35, 0.3);
  }

  .camino-paso:first-child::before { display: block; }
  .camino-paso:last-child::before { display: none; }

  .camino-paso h3 { margin-top: 0; }
  .camino-paso p { max-width: none; margin-inline: 0; }
}

@media (max-width: 620px) {
  .ganamos-grid { grid-template-columns: minmax(0, 1fr); }

  .activos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .alta-datos li { font-size: 1rem; }
}