/* ==========================================================================
   Encabezado dividido (texto + foto)
   ========================================================================== */

.split-header {
  display: flex;
  flex-wrap: wrap;
  min-height: 50vh;
  border-bottom: 1px solid var(--color-border);
}

.split-header__text {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: 56px var(--container-padding-tablet);
}

.split-header__text p {
  color: var(--color-text-secondary);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  max-width: 480px;
}

.split-header__photo {
  flex: 1 1 480px;
  min-height: 260px;
}

.split-header__photo .ph {
  border-radius: 0;
}

/* ==========================================================================
   Tabla de precios
   ========================================================================== */

.pricing-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.pricing-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  text-align: left;
  padding: 14px 24px;
  vertical-align: top;
}

.pricing-table th:nth-child(1),
.pricing-table td:nth-child(1) {
  width: 30%;
}

.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2) {
  width: 42%;
}

.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3) {
  width: 28%;
}

.pricing-table thead th {
  background: var(--color-border);
  color: var(--color-900);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 600;
}

.pricing-table tbody td {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  color: var(--color-text-secondary);
}

.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-table td.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-price-size);
  color: var(--color-olivo);
}

@media (max-width: 640px) {
  .pricing-table-wrap {
    overflow-x: visible;
    background: transparent;
    border-radius: 0;
  }

  .pricing-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .pricing-table thead {
    display: none;
  }

  .pricing-table tbody {
    display: block;
  }

  .pricing-table tr {
    display: block;
    background: var(--color-white);
    padding: 4px 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
    border-radius: 0;
  }

  /* Primera fila de un grupo (o fila suelta): esquinas superiores redondeadas */
  .pricing-table tr:not(:has(> td:first-child:empty)) {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }

  /* Última fila de un grupo (o fila suelta): esquinas inferiores redondeadas + separación con la siguiente */
  .pricing-table tr:not(:has(+ tr > td:first-child:empty)) {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    margin-bottom: 12px;
  }

  /* Fila de continuación: se fusiona visualmente con la fila anterior, sin sombra ni espacio propios */
  .pricing-table tr:has(> td:first-child:empty) {
    box-shadow: none;
    border-top: 1px solid var(--color-border);
  }

  .pricing-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .pricing-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    width: auto;
    padding: 10px 0;
    text-align: right;
    border-bottom: 1px solid var(--color-border);
  }

  .pricing-table td:empty {
    display: none;
  }

  .pricing-table tr > td:last-child {
    border-bottom: none;
  }

  .pricing-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--text-sm-size);
    color: var(--color-900);
    text-align: left;
  }

  .pricing-table td.price {
    font-size: var(--text-lg-size);
  }
  .pricing-table th:nth-child(1),
  .pricing-table td:nth-child(1) {
    width: 100%;
  }

  .pricing-table th:nth-child(2),
  .pricing-table td:nth-child(2) {
    width: 100%;
  }

  .pricing-table th:nth-child(3),
  .pricing-table td:nth-child(3) {
    width: 100%;
  }
}

/* ==========================================================================
   Nota destacada
   ========================================================================== */

.note-banner {
  background: var(--color-border);
  color: var(--color-text);
  text-align: center;
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  padding-inline: var(--container-padding);
}

@media (max-width: 1024px) {
  .note-banner {
    padding-inline: var(--container-padding-tablet);
  }
}

@media (max-width: 480px) {
  .note-banner {
    padding-inline: var(--container-padding-mobile);
  }
}

.note-banner p {
  max-width: 900px;
  margin-inline: auto;
}

/* ==========================================================================
   Variante café oscuro del CTA oscuro
   ========================================================================== */

.dark-cta--cafe .dark-cta__bg::after {
  background: var(--color-cafe-oscuro);
}

/* ==========================================================================
   Respuesta pendiente de validar (FAQ)
   ========================================================================== */

.accordion__panel--pending p {
  color: #b21a1a;
}

@media (max-width: 768px) {
  .split-header__photo {
    min-height: 220px;
  }
}

@media (max-width: 480px) {
  .split-header__text {
    padding: 40px var(--container-padding-mobile);
  }
}