/* ==========================================================================
   Lynch — Estilos por sección
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   El elemento memorable de la página: la representación del entregable
   mensual (la prenómina). No se usa fotografía de stock.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.25rem) clamp(3rem, 2rem + 4vw, 5rem);
  /* Color plano, no degradado: el degradado anterior se desvanecía a blanco
     antes de acabar el hero y el tinte no llegaba a leerse. Y sin borde
     inferior: el corte de color ya es el límite, la línea sobra. */
  background: var(--pp-bg-hero);
  overflow: hidden;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  gap: var(--pp-7);
  align-items: center;
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }
}

.hero__kicker {
  display: inline-block;
  font-size: var(--pp-fs-xs);
  font-weight: 620;
  color: var(--pp-accent-ink);
  background: var(--pp-accent-soft);
  border-radius: var(--pp-r-sm);
  padding: 0.3rem 0.6rem;
  margin-bottom: var(--pp-4);
}

.hero h1 {
  margin-bottom: var(--pp-4);
}

/* En la v1 este H2 estaba a tamaño de titular y competía con el H1, además
   de repetir "en Perú" dos líneas seguidas. Se conserva el texto (protege la
   consulta "servicio de payroll en Perú") pero baja a tamaño de texto: el
   párrafo en serif queda como única voz de entrada del hero. */
.hero__sub {
  font-size: var(--pp-fs-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--pp-muted);
  margin-bottom: var(--pp-4);
  max-width: 46ch;
}

.hero .lead {
  margin-bottom: var(--pp-6);
}

/* Tres elementos en una columna estrecha: en fila se repartían 2+1 y
   parecía un accidente de maquetación. Apilados, la pauta es deliberada. */
.hero__note {
  margin-top: var(--pp-5);
  padding-top: var(--pp-4);
  border-top: 1px solid var(--pp-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
}

.hero__note span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__note span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pp-accent);
  flex: none;
}

/* --- Panel de proceso mensual ------------------------------------------- */
/* Sobre el tinte azul del hero la tarjeta blanca ya destaca por contraste,
   así que la sombra puede ser más discreta que sobre blanco. */
.runcard {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-shadow-panel);
  overflow: hidden;
}

.runcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-3);
  padding: 0.85rem 1.1rem;
  background: var(--pp-ink);
  color: #cfe0e6;
  font-size: var(--pp-fs-xs);
}

.runcard__top strong {
  color: var(--pp-white);
  font-weight: 620;
  letter-spacing: -0.01em;
}

.runcard__state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-weight: 600;
  color: #b8e6cf;
}

.runcard__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fc08a;
}

.runcard__rows {
  padding: 0.35rem 1.1rem;
}

.runrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-4);
  padding: 0.66rem 0;
  border-bottom: 1px solid var(--pp-line);
  font-size: var(--pp-fs-sm);
}

.runrow:last-child {
  border-bottom: 0;
}

.runrow__label {
  color: var(--pp-muted);
}

.runrow__val {
  font-weight: 620;
  color: var(--pp-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.runrow--total {
  border-top: 2px solid var(--pp-ink);
  border-bottom: 0;
  margin-top: 0.15rem;
  padding-top: 0.8rem;
}

.runrow--total .runrow__label {
  color: var(--pp-ink);
  font-weight: 600;
}

.runrow--total .runrow__val {
  font-size: var(--pp-fs-lg);
}

.runcard__foot {
  border-top: 1px solid var(--pp-line);
  background: #f7fafb;
  padding: 0.9rem 1.1rem;
  display: grid;
  gap: 0.5rem;
}

.runstep {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--pp-fs-xs);
  color: #2c4048;
}

.runstep__tick {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pp-ok-soft);
  border: 1px solid #9dcfb9;
  position: relative;
}

.runstep__tick::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 3.5px;
  border-left: 1.6px solid var(--pp-ok);
  border-bottom: 1.6px solid var(--pp-ok);
  transform: rotate(-45deg);
}

.runstep--pending .runstep__tick {
  background: var(--pp-white);
  border-color: var(--pp-line-strong);
}

.runstep--pending .runstep__tick::after {
  display: none;
}

.runstep--pending {
  color: var(--pp-muted);
}

.runcard__caption {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  color: var(--pp-muted);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   2. Banda de confianza
   -------------------------------------------------------------------------- */
.trust {
  border-bottom: 1px solid var(--pp-line);
  background: var(--pp-white);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--pp-6);
}

@media (min-width: 860px) {
  .trust__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trust__item {
  padding: var(--pp-3) var(--pp-4);
  border-left: 1px solid var(--pp-line);
}

.trust__item:first-child {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 859px) {
  .trust__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .trust__item:nth-child(n + 3) {
    margin-top: var(--pp-4);
    padding-top: var(--pp-4);
    border-top: 1px solid var(--pp-line);
  }
}

.trust__num {
  font-family: var(--pp-font-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.35rem);
  font-weight: 600;
  color: var(--pp-ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.3rem;
}

.trust__label {
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
  line-height: 1.45;
  display: block;
  max-width: 27ch;
}

/* --------------------------------------------------------------------------
   3. Clientes
   -------------------------------------------------------------------------- */
.clients__head {
  display: grid;
  gap: var(--pp-3);
  margin-bottom: var(--pp-6);
}

@media (min-width: 900px) {
  .clients__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--pp-7);
  }
}

.clients__head h2 {
  font-size: var(--pp-fs-xl);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--pp-line);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-md);
  overflow: hidden;
}

@media (min-width: 620px) {
  .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.logo-cell {
  background: var(--pp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  min-height: 92px;
}

/* Los archivos ya vienen normalizados en gris y con el mismo peso óptico,
   así que aquí no se aplica grayscale(): sólo se modula la presencia. */
.logo-cell img {
  width: 100%;
  max-width: 132px;
  height: 38px;
  object-fit: contain;
  opacity: 0.78;
  transition: opacity var(--pp-dur) var(--pp-ease);
}

.logo-cell:hover img {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Qué es el outsourcing
   -------------------------------------------------------------------------- */
.explain {
  display: grid;
  gap: var(--pp-7);
}

@media (min-width: 940px) {
  .explain {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.explain__aside {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  padding: var(--pp-5);
}

.explain__aside h3 {
  font-size: var(--pp-fs-md);
  margin-bottom: var(--pp-4);
}

.deflist {
  display: grid;
  gap: var(--pp-4);
  margin: 0;
}

.deflist > div {
  padding-left: var(--pp-4);
  border-left: 2px solid var(--pp-brand-soft);
}

.deflist dt {
  font-weight: 640;
  font-size: var(--pp-fs-sm);
  color: var(--pp-ink);
  margin-bottom: 0.15rem;
}

.deflist dd {
  margin: 0;
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   6. Servicios en pestañas
   -------------------------------------------------------------------------- */
.svc {
  display: grid;
  gap: var(--pp-5);
}

@media (min-width: 900px) {
  .svc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pp-6);
  }
}

.svc__item h3 {
  font-size: var(--pp-fs-md);
  margin-bottom: var(--pp-2);
  padding-bottom: var(--pp-2);
  border-bottom: 1px solid var(--pp-line);
}

.svc__item p {
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
  margin: 0;
}

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--pp-3);
}

.tag {
  font-size: 0.75rem;
  font-weight: 560;
  color: #2c4048;
  background: var(--pp-bg-alt);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-sm);
  padding: 0.2rem 0.45rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   7. Cómo funciona — secuencia real, por eso lleva numeración
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
}

@media (min-width: 780px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

@media (min-width: 1080px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--pp-5);
  }
}

.step {
  counter-increment: step;
  position: relative;
  padding: var(--pp-5) 0 var(--pp-5) 3.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(var(--pp-5) + 0.05rem);
  font-family: var(--pp-font-serif);
  font-size: var(--pp-fs-md);
  font-weight: 600;
  color: var(--pp-accent);
  letter-spacing: 0.01em;
}

.step h3 {
  font-size: var(--pp-fs-md);
  margin-bottom: 0.35rem;
}

.step p {
  font-size: var(--pp-fs-sm);
  color: #a9c1ca;
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Comparación interna vs outsourcing
   -------------------------------------------------------------------------- */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  background: var(--pp-white);
}

.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--pp-fs-sm);
}

.cmp caption {
  text-align: left;
  padding: var(--pp-4) var(--pp-5) 0;
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
  caption-side: bottom;
  padding-bottom: var(--pp-4);
  line-height: 1.5;
}

.cmp th,
.cmp td {
  text-align: left;
  padding: 0.95rem var(--pp-5);
  border-bottom: 1px solid var(--pp-line);
  vertical-align: top;
}

.cmp thead th {
  font-size: var(--pp-fs-xs);
  font-weight: 660;
  color: var(--pp-ink);
  background: var(--pp-bg-alt);
  border-bottom: 1px solid var(--pp-line-strong);
  white-space: nowrap;
}

.cmp tbody th {
  font-weight: 600;
  color: var(--pp-ink);
  width: 26%;
}

.cmp td {
  color: var(--pp-muted);
}

.cmp .col-out {
  background: #f6fafb;
  color: #2c4048;
  border-left: 1px solid var(--pp-line);
  border-right: 1px solid var(--pp-line);
}

.cmp thead .col-out {
  background: var(--pp-brand-soft);
  border-top: 2px solid var(--pp-brand);
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Precios y modelo de cotización
   Tres componentes: tarifa de inicio, propuesta base y crecimiento
   progresivo. No hay tarjetas de plan: el modelo comercial no es un
   catálogo de planes, y presentarlo como tal sería engañoso.
   -------------------------------------------------------------------------- */

/* Subtítulo del encabezado de sección: complementa al H2 sin competir con él */
.sec-head__sub {
  font-family: var(--pp-font-serif);
  font-size: var(--pp-fs-lg);
  line-height: 1.45;
  color: var(--pp-muted);
  margin: var(--pp-3) 0 0;
  max-width: 34ch;
}

/* --- Componente 1: tarifa de inicio ------------------------------------
   Es la única cifra cerrada de la página, así que es lo único que lleva
   fondo oscuro dentro de la sección. */
.price-start {
  background: var(--pp-ink);
  color: #cfe0e6;
  border-radius: var(--pp-r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: var(--pp-5);
}

.price-start__label {
  font-size: var(--pp-fs-xs);
  font-weight: 660;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9a447;
  margin-bottom: var(--pp-3);
}

.price-start__amount {
  font-family: var(--pp-font-serif);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--pp-white);
  margin-bottom: var(--pp-3);
  max-width: none;
}

.price-start__amount strong {
  font-weight: 600;
}

.price-start__lead {
  font-size: var(--pp-fs-lg);
  line-height: 1.5;
  color: #e2ecf0;
  margin-bottom: var(--pp-3);
  max-width: 44ch;
}

.price-start__fine {
  font-size: var(--pp-fs-sm);
  line-height: 1.6;
  color: #9fb8c2;
  margin: 0;
  max-width: 52ch;
}

/* --- Componentes 2 y 3 -------------------------------------------------- */
.price-grid {
  display: grid;
  gap: var(--pp-5);
  /* Cada bloque ocupa lo que necesita. Igualar alturas dejaba un hueco
     vacío de doscientos píxeles en el bloque más corto. */
  align-items: start;
}

@media (min-width: 900px) {
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pp-6);
  }
}

.price-block {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-lg);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--pp-4);
}

.price-block h3 {
  font-size: var(--pp-fs-lg);
}

.price-block > p {
  font-size: var(--pp-fs-sm);
  line-height: 1.65;
  color: var(--pp-muted);
  margin: 0;
}

.price-block__fine {
  font-size: var(--pp-fs-xs);
  line-height: 1.6;
  color: var(--pp-muted);
  margin: auto 0 0;
  padding-top: var(--pp-3);
  border-top: 1px solid var(--pp-line);
}

/* --- Bloque desplegable ------------------------------------------------
   <details> nativo: el contenido está en el HTML desde la primera carga y
   es accesible por teclado sin JavaScript. */
.disclose {
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}

.disclose > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-4);
  padding: 0.85rem 0;
  font-size: var(--pp-fs-sm);
  font-weight: 620;
  color: var(--pp-ink);
  cursor: pointer;
  list-style: none;
}

.disclose > summary::-webkit-details-marker {
  display: none;
}

.disclose > summary:hover {
  color: var(--pp-brand);
}

.disclose > summary:focus-visible {
  box-shadow: var(--pp-focus);
  border-radius: var(--pp-r-sm);
}

.disclose__icon {
  flex: none;
  width: 16px;
  height: 16px;
  position: relative;
}

.disclose__icon::before,
.disclose__icon::after {
  content: "";
  position: absolute;
  background: var(--pp-brand);
  border-radius: 1px;
}

.disclose__icon::before {
  left: 1px;
  top: 7px;
  width: 14px;
  height: 2px;
}

.disclose__icon::after {
  left: 7px;
  top: 1px;
  width: 2px;
  height: 14px;
  transition: transform var(--pp-dur) var(--pp-ease);
}

.disclose[open] .disclose__icon::after {
  transform: scaleY(0);
}

.disclose__body {
  padding-bottom: var(--pp-4);
}

.checks--tight li {
  font-size: var(--pp-fs-xs);
  margin-bottom: 0.45rem;
}

/* --- Tramos de crecimiento --------------------------------------------- */
.tiers {
  display: grid;
  gap: 1px;
  background: var(--pp-line);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-md);
  overflow: hidden;
}

.tier {
  background: var(--pp-bg-alt);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.15rem var(--pp-4);
  padding: 0.85rem var(--pp-4);
}

.tier__range {
  font-size: var(--pp-fs-sm);
  font-weight: 560;
  color: var(--pp-ink);
}

.tier__price {
  font-family: var(--pp-font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--pp-ink);
  letter-spacing: -0.01em;
  grid-row: span 2;
  align-self: center;
}

.tier__unit {
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
}

/* --- Aclaración destacada ---------------------------------------------
   El malentendido más caro de este modelo es creer que los tramos se
   aplican a toda la planilla. La aclaración va marcada, no en letra
   pequeña. -------------------------------------------------------------- */
.price-callout {
  font-size: var(--pp-fs-sm);
  line-height: 1.6;
  color: var(--pp-accent-ink);
  background: var(--pp-accent-soft);
  border-left: 3px solid var(--pp-accent);
  border-radius: 0 var(--pp-r-md) var(--pp-r-md) 0;
  padding: var(--pp-4);
  margin: auto 0 0;
}

.price-cta {
  margin-top: var(--pp-6);
  padding-top: var(--pp-5);
  border-top: 1px solid var(--pp-line);
  display: grid;
  gap: var(--pp-4);
  justify-items: start;
}

.price-cta .fine {
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   Nota al pie de la comparativa
   -------------------------------------------------------------------------- */
.cmp-note {
  margin-top: var(--pp-5);
  font-size: var(--pp-fs-sm);
  line-height: 1.65;
  color: var(--pp-muted);
  max-width: 74ch;
}

/* --------------------------------------------------------------------------
   Banda tipográfica
   Único descanso visual de la página, en lugar de la fotografía que se
   decidió no incluir. El tamaño arranca en 1.5rem, no en tamaño de titular,
   para no ocupar media pantalla en móvil.
   -------------------------------------------------------------------------- */
.quote-band {
  background: var(--pp-bg-warm);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.quote-band__inner {
  max-width: 64ch;
  border-left: 3px solid var(--pp-accent);
  padding-left: clamp(1.05rem, 3vw, 2.25rem);
}

.quote-band__line {
  font-family: var(--pp-font-serif);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.4rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--pp-ink);
  margin-bottom: var(--pp-4);
  max-width: none;
}

.quote-band__note {
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Beneficios
   Versión compacta: cuatro resultados para el cliente. La comparativa
   argumenta la decisión (interna frente a outsourcing); esta sección
   describe lo que la empresa obtiene. No deben decir lo mismo.
   -------------------------------------------------------------------------- */
.benefit {
  padding-top: var(--pp-4);
  border-top: 2px solid var(--pp-ink);
}

.benefit h3 {
  font-size: var(--pp-fs-md);
  margin-bottom: 0.35rem;
}

.benefit p {
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Formulario de cotización
   -------------------------------------------------------------------------- */
.quote {
  display: grid;
  gap: var(--pp-7);
}

@media (min-width: 980px) {
  .quote {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

.quote__aside .lead {
  color: var(--pp-text);
}

.quote__list {
  margin-top: var(--pp-6);
  display: grid;
  gap: var(--pp-4);
}

.quote__list li {
  padding-left: var(--pp-5);
  position: relative;
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
  line-height: 1.55;
}

.quote__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1.5px;
  background: var(--pp-accent);
}

.quote__list strong {
  color: var(--pp-ink);
  display: block;
  font-weight: 620;
}

.quote__contact {
  margin-top: var(--pp-6);
  padding-top: var(--pp-5);
  border-top: 1px solid #c9dcea;
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.quote__contact a {
  color: var(--pp-brand-strong);
  font-weight: 620;
}

/* Tarjeta del formulario. Sobre el fondo de pantallas tiene que ganar sin
   discusión: blanco opaco, nunca translúcido, con más relleno del que tenía
   sobre el fondo navy y una sombra amplia y suave que la separe del fondo. */
.form-panel {
  position: relative;
  z-index: 1;
  background: var(--pp-white);
  border-radius: 14px;
  padding: clamp(1.6rem, 1.1rem + 2.2vw, 2.85rem);
  box-shadow: 0 1px 2px rgba(11, 43, 56, 0.05),
    0 4px 12px rgba(11, 43, 56, 0.06),
    0 32px 64px -28px rgba(11, 43, 56, 0.28);
}

.form-grid {
  display: grid;
  gap: var(--pp-4);
}

@media (min-width: 620px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-grid .span-2 {
    grid-column: 1 / -1;
  }
}

.form-panel__foot {
  margin-top: var(--pp-5);
  display: grid;
  gap: var(--pp-4);
}


/* --------------------------------------------------------------------------
   Fondos de interfaz: hero y sección de contacto
   --------------------------------------------------------------------------
   Las dos secciones usan el MISMO recurso, con una sola base de reglas: dos
   capturas de una interfaz ilustrativa de gestión de planillas, inclinadas
   con perspectiva, recortadas por los bordes de su sección y bajo un velo
   del color de fondo que las desvanece.

   La interfaz es ILUSTRATIVA y sus datos son ficticios y genéricos
   («Trabajador 01», importes sin cifra). No representa un software de Lynch:
   la empresa presta un servicio, no vende una aplicación.

   Desvanecido, no desenfocado: el desenfoque intenso convierte las tablas en
   manchas y se pierde justo lo que se quiere insinuar. El contraste lo bajan
   la opacidad y el velo de color; el desenfoque es de 1 px, solo para
   quitarle filo al texto pequeño.
   -------------------------------------------------------------------------- */
.ui-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ui-bg__screen {
  position: absolute;
  display: block;
  background: url("../img/contacto-fondo.svg") top left / 100% auto no-repeat;
  border-radius: 16px;
  opacity: 0.85;
  filter: blur(1px);
  box-shadow: 0 40px 90px -50px rgba(11, 43, 56, 0.5);
  aspect-ratio: 1400 / 900;
}

/* La perspectiva va en el propio transform, no en el contenedor: es más
   compatible y no depende de que el padre cree el contexto 3D. */
.ui-bg__screen--b {
  opacity: 0.62;
}

/* Velo: es lo que baja el contraste. Por encima de las pantallas y por
   debajo del contenido. Más denso en la columna del texto. */
.ui-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --- Hero -------------------------------------------------------------
   Las pantallas entran por la esquina superior derecha, por detrás de la
   tarjeta del entregable, y se cortan. El titular queda a la izquierda,
   sobre fondo casi limpio. -------------------------------------------- */
.ui-bg--hero .ui-bg__screen--a {
  top: -32%;
  right: -16%;
  width: 78%;
  transform: perspective(1700px) rotateX(44deg) rotateZ(-26deg);
}

.ui-bg--hero .ui-bg__screen--b {
  bottom: -40%;
  left: 22%;
  width: 60%;
  transform: perspective(1700px) rotateX(50deg) rotateZ(-26deg);
}

/* El hero va más tenue que la sección de contacto: ahí el fondo es el motivo
   visual de la sección, aquí solo tiene que insinuarse detrás del titular. */
.ui-bg--hero .ui-bg__screen {
  opacity: 0.5;
}

.ui-bg--hero .ui-bg__screen--b {
  opacity: 0.34;
}

.ui-bg--hero::after {
  background: linear-gradient(
    100deg,
    rgba(219, 238, 255, 0.96) 0%,
    rgba(219, 238, 255, 0.9) 30%,
    rgba(219, 238, 255, 0.72) 58%,
    rgba(219, 238, 255, 0.82) 100%
  );
}

/* --- Sección de contacto ---------------------------------------------- */
.section--sky {
  position: relative;
  background: var(--pp-bg-sky);
  overflow: hidden;
  isolation: isolate;
}

.section--sky > .wrap {
  position: relative;
  z-index: 1;
}

.ui-bg--quote .ui-bg__screen--a {
  top: -30%;
  left: 4%;
  width: 82%;
  transform: perspective(1700px) rotateX(44deg) rotateZ(-26deg);
}

.ui-bg--quote .ui-bg__screen--b {
  bottom: -30%;
  right: -22%;
  width: 74%;
  transform: perspective(1700px) rotateX(50deg) rotateZ(-26deg);
}

.ui-bg--quote::after {
  background: linear-gradient(
    100deg,
    rgba(232, 242, 251, 0.86) 0%,
    rgba(232, 242, 251, 0.72) 26%,
    rgba(232, 242, 251, 0.5) 54%,
    rgba(232, 242, 251, 0.66) 100%
  );
}

/* En móvil las dos secciones pasan a una columna y las pantallas quedarían
   justo detrás del texto: se retiran. Queda el color plano, que ya es el
   fondo. También evita el coste de cuatro transformaciones 3D en pantallas
   pequeñas. */
@media (max-width: 979px) {
  .ui-bg {
    display: none;
  }
}

@media print {
  .ui-bg {
    display: none;
  }
}


/* ==========================================================================
   AÑADIDO v5
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloque de texto con fotografía
   Rompe la sucesión de título + párrafo + cuadrícula. En móvil la fotografía
   va primero y el texto debajo.
   -------------------------------------------------------------------------- */
.photo-split {
  display: grid;
  gap: var(--pp-6);
  align-items: center;
}

@media (min-width: 940px) {
  .photo-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .photo-split--flip > .photo {
    order: 2;
  }
}

.photo {
  margin: 0;
}

.photo__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--pp-r-lg);
  overflow: hidden;
  background: var(--pp-bg-warm);
}

.photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Espacio reservado: identificado como tal, con la descripción de la toma
   que debe ocupar el hueco. No es una fotografía y no debe publicarse. */
.photo__frame--pending {
  border: 1px dashed var(--pp-line-strong);
  display: grid;
  align-content: center;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  text-align: left;
}

.photo__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-accent-ink);
}

.photo__brief {
  font-family: var(--pp-font-serif);
  font-size: var(--pp-fs-md);
  line-height: 1.5;
  color: var(--pp-ink);
}

.photo__specs {
  font-size: var(--pp-fs-xs);
  color: var(--pp-muted);
  line-height: 1.6;
}

.photo figcaption {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--pp-muted);
}

/* --------------------------------------------------------------------------
   Catálogo de servicios frente a la tarifa mínima
   -------------------------------------------------------------------------- */
.scope-note {
  border-left: 3px solid var(--pp-accent);
  padding: 0.15rem 0 0.15rem var(--pp-4);
  margin-top: var(--pp-6);
  font-size: var(--pp-fs-sm);
  line-height: 1.6;
  color: var(--pp-text);
  max-width: 68ch;
}

.scope-note strong {
  color: var(--pp-ink);
}

/* Aclaración de moneda e IGV: acompaña a todo importe publicado. */
.price-tax {
  margin-top: var(--pp-5);
  padding-top: var(--pp-4);
  border-top: 1px solid var(--pp-line);
  font-size: var(--pp-fs-sm);
  line-height: 1.6;
  color: var(--pp-text);
  max-width: 72ch;
}

/* Las tres definiciones en fila cuando hay ancho: debajo del bloque con
   fotografía, a modo de cierre de la sección, no como columna lateral. */
.deflist--row {
  gap: var(--pp-5);
}

@media (min-width: 760px) {
  .deflist--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Clientes: el rubro debajo del logotipo
   El reconocimiento de estas empresas es sectorial, no general: un líder en
   distribución de harinas no le dice nada a alguien del sector de
   fertilizantes. El rubro convierte un nombre desconocido en una prueba
   legible para cualquier visitante.
   -------------------------------------------------------------------------- */
.logo-cell {
  flex-direction: column;
  gap: 0.6rem;
}

.logo-cell__sector {
  font-size: 0.6875rem;
  line-height: 1.35;
  text-align: center;
  color: var(--pp-muted);
  letter-spacing: 0.01em;
}

/* Marcador mientras no hay dato confirmado. */
.logo-cell__sector[data-pendiente] {
  color: var(--pp-accent-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Franja de clientes
   Va entre la banda tipográfica y las tarifas, y las tres son claras. Sin
   marca alguna se leerían como una sola sección larga. En lugar de un color
   más (la banda tipográfica ya usa el neutro cálido) se la trata como lo que
   es: una franja de refuerzo, más baja que una sección y acotada por dos
   líneas finas. Es el mismo recurso de la banda de indicadores.
   -------------------------------------------------------------------------- */
.section--strip {
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
}