/* ==========================================================================
   PideFácil — Producto (Figma: Principal 1 IA / Producto, node 176:160)
   Solo las secciones propias de Producto. Requiere base.css cargado antes.
   ========================================================================== */

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

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

.hero {
  /* Con el collage de fotos el alto lo pone la columna derecha; mismos
     colchones que Sobre nosotros en vez de los 238/179 del corte de Figma. */
  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%);
}

/* ======================================================================== */
/* 02 · Los problemas que resuelve pidefacil                                */
/* ======================================================================== */

.problemas { padding-block: clamp(3.5rem, 11.2vw, 159px) clamp(3rem, 15.4vw, 219px); }

.problemas .container {
  display: grid;
  grid-template-columns: minmax(0, 518fr) minmax(0, 844fr);
  align-items: start;
  gap: clamp(2rem, 4.1vw, 58px);
}

.problemas h2 {
  margin-top: 0.1em;
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.problemas .h-lead { margin-top: clamp(0.75rem, 1.4vw, 20px); }

.problema-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.problema {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: start;
  gap: 30px;
  padding: 26px 28px;
  border: 1px solid var(--h-hairline);
  border-radius: 26px;
  background: var(--h-paper);
  box-shadow: var(--h-card-shadow);
}

.problema-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #3b4e23;
}

/* Cada glifo conserva su tamaño del diseño dentro del círculo de 70px. */
.problema-icon img { width: 38px; height: 38px; }
.problema-icon.is-ventas img { width: 44px; height: 44px; }
.problema-icon.is-cobros img { width: 50px; height: 50px; }

.problema h3 {
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.05rem, 1.69vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

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

/* ======================================================================== */
/* 03 · La respuesta de Pidefacil                                           */
/* ======================================================================== */

.respuesta {
  padding-block: clamp(3rem, 6.13vw, 87px) clamp(3rem, 7.6vw, 108px);
  background: var(--h-band);
  text-align: center;
}

.respuesta h2 {
  margin-top: 0.1em;
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.respuesta > .container > .h-lead {
  max-width: 844px;
  margin: clamp(1rem, 1.6vw, 23px) auto 0;
}

/* Selector de agente ------------------------------------------------------ */

.tabs {
  display: inline-flex;
  gap: 0;
  margin-top: clamp(1rem, 1.7vw, 24px);
  padding: 8px;
  border: 1px solid var(--h-hairline);
  border-radius: 44px;
  background: var(--h-paper);
  box-shadow: 0 5px 24.3px rgba(215, 215, 215, 0.25);
}

.tab {
  min-width: clamp(120px, 16.2vw, 230px);
  padding: 12px 20px;
  border: 0;
  border-radius: 24.5px;
  background: transparent;
  font-family: var(--h-body);
  font-weight: 300;
  font-size: var(--fs-md);
  color: var(--h-ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tab span { margin-right: 0.9em; }

.tab:hover { background: rgba(173, 194, 123, 0.28); }
.tab.is-active { background: #adc27b; }

/* Panel del agente -------------------------------------------------------- */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 556fr) minmax(0, 747fr);
  align-items: center;
  gap: clamp(1.5rem, 2vw, 28px);
  margin-top: clamp(1.5rem, 4.2vw, 59px);
  padding: clamp(2.5rem, 4.8vw, 68px) clamp(2rem, 5.6vw, 80px);
  border: 1px solid var(--h-hairline);
  border-radius: clamp(28px, 4.6vw, 65px);
  background: var(--h-paper);
  box-shadow: var(--h-card-shadow);
  text-align: left;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.panel[hidden] { display: none; }

.panel.is-leaving { opacity: 0; }

.panel.is-entering { opacity: 0; transform: translateY(8px); }

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

.panel h3 {
  margin-top: 6px;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: var(--fs-h4);
  line-height: 1.208;
  letter-spacing: -0.01em;
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.panel .h-lead { margin-top: clamp(1rem, 1.6vw, 22px); }

.panel-list {
  margin-top: clamp(1rem, 1.6vw, 22px);
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--h-ink-muted);
}

.panel-list li {
  display: flex;
  gap: 0.6em;
  line-height: 1.75;
}

.panel-list li::before {
  content: '+';
  flex: 0 0 auto;
}

/* El enlace a la ficha del agente vive ahora dentro de su propio panel: antes
   estaba en el trío de tarjetas del final de la página, que se ha quitado. */
.panel-copy .h-btn { margin-top: clamp(1.5rem, 2.4vw, 34px); }

/* La línea de «Más de 50 ERP integrados» cuelga del titular de la sección. */
.erps-head .h-lead { margin-top: clamp(0.75rem, 1.2vw, 17px); }

.panel-media img {
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 2.4vw, 34px);
}

/* ======================================================================== */
/* 04 · Integraciones                                                       */
/* ======================================================================== */

/* El componente (cabecera, máscara, marquee y tarjetas) vive en base.css. */
/* Sin banda: la sección de los tres agentes ya va sobre --h-band y, pegadas,
   las dos se leían como un único bloque. Aquí manda el degradado del body. */
.erps {
  padding-block: clamp(3rem, 9.86vw, 140px) clamp(3rem, 11.13vw, 158px);
}

.erps-mask { margin-top: clamp(2rem, 4.8vw, 68px); }

/* ======================================================================== */
/* 05 · Planes                                                              */
/* ======================================================================== */

/* La banda que antes llevaba Integraciones baja aquí, para que las secciones
   claras y las de banda se vayan turnando. */
.planes {
  padding-block: clamp(2.5rem, 4.58vw, 65px) clamp(2.5rem, 3.6vw, 51px);
  background: var(--h-cream);
}

.planes .container {
  display: grid;
  grid-template-columns: minmax(0, 736fr) minmax(0, 679fr);
  align-items: center;
  gap: clamp(1.5rem, 1.8vw, 26px);
}

.planes h2 {
  margin-top: 0.1em;
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.planes .h-lead { margin-top: clamp(1rem, 1.5vw, 21px); }
.planes .h-btn { margin-top: clamp(1.5rem, 2.3vw, 33px); }

/* ======================================================================== */
/* 06 · FAQs (misma retícula que la Home, sobre el claro del body)          */
/* ======================================================================== */

/* Sin banda propia: así las secciones se turnan (banda, claro, crema, claro)
   y ningún par pegado se confunde. Crema y banda se diferencian en 2 puntos
   de RGB, de modo que pegadas se leen como una sola. */
.faqs {
  padding-block: clamp(3.5rem, 13.4vw, 190px) clamp(3.5rem, 12.5vw, 178px);
}

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

@media (max-width: 900px) {
  .problemas .container,
  .panel,
  .planes .container {
    grid-template-columns: minmax(0, 1fr);
  }

  .planes-media { order: 1; }

  .erps-head { flex-direction: column; }

  /* Los tres botones se reparten el ancho sin scroll lateral: encogen a
     partes iguales y, más abajo, pierden cuerpo para caber en un teléfono. */
  .tabs { width: 100%; overflow: visible; }
  .tab { min-width: 0; flex: 1 1 0; padding-inline: 8px; }
}

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

  .tabs { padding: 6px; }

  .tab {
    padding: 10px 4px;
    font-size: 0.875rem;
  }

  .tab span { margin-right: 0.45em; }

  .panel { padding: 1.75rem 1.25rem; }
}