/* ══════════════════════════════════════════════════════
   HERO — Énfasis de texto
══════════════════════════════════════════════════════ */
.highlight-text {
  color: var(--imbo-white);
  font-weight: 800;
  text-shadow: 0 0 0.75rem rgba(var(--imbo-orange-rgb), 0.6);
  border-bottom: 0.125rem solid var(--imbo-orange);
  padding-bottom: 0.125rem;
}

/* ══════════════════════════════════════════════════════
   BOTONES — BASE
══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3.125rem;           /* Estilo pill moderno */
  border: 0.125rem solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}

/* ── Primario: naranja IMBO ── */
/* color:var(--imbo-dark) (no blanco): bug real de contraste detectado
   con pa11y (WCAG2AA 1.4.3) — texto blanco sobre este naranja daba
   1.63:1, muy por debajo del mínimo 4.5:1. Mismo criterio que ya se
   usa en otros fondos naranja del sitio (ej. .tp-modal__bono-tag). */
.btn-primary {
  background: var(--imbo-orange);
  color: var(--imbo-dark);
  border-color: var(--imbo-orange);
  box-shadow: 0 0.25rem 0.875rem rgba(var(--imbo-orange-rgb), 0.35);
}

.btn-primary:hover {
  background: var(--imbo-orange-dark);
  border-color: var(--imbo-orange-dark);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(var(--imbo-orange-rgb), 0.5);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0.125rem 0.5rem rgba(var(--imbo-orange-rgb), 0.3);
}

/* ── Secundario: outline blanco ── */
.btn-secondary {
  background: transparent;
  color: var(--imbo-white);
  border-color: rgb(255 255 255 / 0.4);
}

.btn-secondary:hover {
  background: var(--imbo-white);
  color: var(--imbo-dark);
  border-color: var(--imbo-white);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-card);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* ── Variante grande ── */
.btn-lg {
  padding: 1rem 2.25rem;
  font-size: var(--fs-base);
}

/* ══════════════════════════════════════════════════════
   SECTION LABEL — Eyebrow reutilizable
══════════════════════════════════════════════════════ */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--imbo-orange);
}

/* ══════════════════════════════════════════════════════
   BROCHURE GLASS — Tarjeta Glassmorphism
══════════════════════════════════════════════════════ */
.brochure-glass {
  width: 100%;
  max-width: 26.25rem;
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  border: 0.0625rem solid rgb(255 255 255 / 0.12);
  box-shadow:
    var(--shadow-float),
    inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
  overflow: hidden;
}

/* Borde superior naranja sutil */
.brochure-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 0.125rem;
  background: linear-gradient(90deg, transparent, var(--imbo-orange), transparent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
}

.brochure-glass__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brochure-glass__pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  background: rgba(var(--imbo-orange-rgb), 0.12);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.25);
  color: var(--imbo-orange);
}

.brochure-glass__tag {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.06);
  border: 0.0625rem solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
}

.brochure-glass__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--imbo-white);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brochure-glass__desc {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: #94A3B8;
  max-width: none;
}

.brochure-glass__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.brochure-glass__actions .btn-primary {
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════
   BENTO CARDS
══════════════════════════════════════════════════════ */
.bento-card {
  position: relative;
  padding: 2rem;
  border-radius: 1.5rem;
  background: #0d4372;
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover premium: flota + borde naranja + sombra extendida */
.bento-card:hover {
  transform: translateY(-0.3125rem);
  border-color: rgba(var(--imbo-orange-rgb), 0.4);
  box-shadow:
    0 1.75rem 4.5rem -0.75rem rgba(0, 0, 0, 0.55),
    0 0 0 0.0625rem rgba(var(--imbo-orange-rgb), 0.12),
    0 0 2.5rem -0.5rem rgba(var(--imbo-orange-rgb), 0.18);
}

/* ── Card protagonista ── */
.bento-large {
  background: linear-gradient(150deg, #0d4372 0%, #0a3259 65%);
}

/* Línea naranja decorativa en el borde superior */
.bento-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 0.125rem;
  background: linear-gradient(90deg, transparent, var(--imbo-orange), transparent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  z-index: 1;
}

/* Gradiente vertical para anclar el texto al fondo */
.bento-large::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(13, 67, 114, 0.95) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.bento-large .bento-card__content {
  position: relative;
  z-index: 1;
}

/* ── Ícono decorativo de fondo ── */
.bento-card__bg-icon {
  position: absolute;
  top: -0.9375rem;
  right: -0.9375rem;
  color: white;
  opacity: 0.04;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.bento-large .bento-card__bg-icon {
  opacity: 0.05;
  top: 0.625rem;
  right: 0;
}

.bento-card:hover .bento-card__bg-icon {
  opacity: 0.08;
  transform: scale(1.06) rotate(4deg);
}

/* ── Numeración ── */
.bento-card__number {
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.18);
}

/* ── Contenido ── */
.bento-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── Ícono pequeño con caja naranja ── */
.bento-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: rgba(var(--imbo-orange-rgb), 0.1);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.2);
  color: var(--imbo-orange);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bento-card:hover .bento-card__icon-wrap {
  background: rgba(var(--imbo-orange-rgb), 0.2);
  border-color: rgba(var(--imbo-orange-rgb), 0.45);
}

/* ── Título de tarjeta ── */
.bento-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--imbo-white);
  line-height: 1.2;
}

.bento-large .bento-card__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

/* ── Descripción de tarjeta ── */
.bento-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: #94A3B8;
  max-width: 40ch;
}

.bento-large .bento-card__desc {
  font-size: var(--fs-base);
  max-width: 55ch;
  color: #CBD5E1;
}

/* ── CTA inline del bento ── */
.bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--imbo-orange);
  text-decoration: none;
  margin-top: var(--space-xs);
  transition: gap 0.2s ease, color 0.2s ease;
  width: fit-content;
}

.bento-cta:hover {
  color: var(--imbo-white);
  gap: 0.625rem;
}

/* ══════════════════════════════════════════════════════
   FORMULARIO DE CONTACTO
══════════════════════════════════════════════════════ */

/* Panel glassmorphism que envuelve el form */
.contact-form-wrap {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow:
    var(--shadow-float),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

/* Línea naranja superior */
.contact-form-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3rem;
  right: 3rem;
  height: 0.125rem;
  background: linear-gradient(90deg, transparent, var(--imbo-orange), transparent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Fila de dos columnas dentro del form */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Input / Select / Textarea base ── */
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--imbo-white);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.22);
}

/* Focus: glow naranja */
.form-control:focus {
  border-color: var(--imbo-orange);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 0.1875rem rgba(var(--imbo-orange-rgb), 0.18),
    0 0.0625rem 0.25rem rgba(0, 0, 0, 0.3);
}

/* Select: elimina flecha nativa, añade flecha SVG */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}

select.form-control option {
  background: #0d4372;
  color: var(--imbo-white);
}

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 6.875rem;
}

/* ── Estado inválido ── */
.form-control.is-invalid {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
}

.form-control.is-invalid:focus {
  border-color: #EF4444;
  box-shadow: 0 0 0 0.1875rem rgba(239, 68, 68, 0.18);
}

.field-error {
  display: block;
  font-size: var(--fs-xs);
  color: #F87171;
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* Fila de dos columnas → una en móvil */
@media (max-width: 37.5rem) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Botón full-width para submit */
.w-full {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

/* Aviso de privacidad discreto bajo el botón de envío */
.form-privacy-note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  line-height: 1.5;
}

.form-privacy-note a {
  color: var(--imbo-orange);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* ── Grupo de radios (Producto/Servicio, Reclamo/Queja) ── */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: var(--fs-sm);
}

.radio-option:hover {
  border-color: rgba(var(--imbo-orange-rgb), 0.4);
}

.radio-option input[type="radio"] {
  accent-color: var(--imbo-orange);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.radio-option:has(input:checked) {
  border-color: var(--imbo-orange);
  background: rgba(var(--imbo-orange-rgb), 0.08);
}

/* Estado inválido del grupo completo (ningún radio marcado) — mismo
   color que .form-control.is-invalid, aplicado a cada opción ya que
   el borde vive en .radio-option, no en el contenedor .radio-group. */
.radio-group.is-invalid .radio-option {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
}

.form-hint {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}

/* ── Línea de checkbox (aceptación de política) ── */
.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.checkbox-line input[type="checkbox"] {
  accent-color: var(--imbo-orange);
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  cursor: pointer;
}

.checkbox-line a {
  color: var(--imbo-orange);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* Checkbox propio del modal (no toca .checkbox-line en general, que
   también usa el Libro de Reclamaciones): caja redondeada, más
   grande, con relleno y tilde propios en vez del checkbox nativo del
   navegador. */
.tp-modal .checkbox-line input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.03rem;
  height: 1.03rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.4);
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  transition: var(--transition-fast);
}

.tp-modal .checkbox-line input[type="checkbox"]:hover {
  border-color: var(--imbo-orange);
}

.tp-modal .checkbox-line input[type="checkbox"]:checked {
  background: var(--imbo-orange);
  border-color: var(--imbo-orange);
}

.tp-modal .checkbox-line input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.1125rem;
  width: 0.225rem;
  height: 0.45rem;
  border: solid var(--imbo-dark);
  border-width: 0 0.1125rem 0.1125rem 0;
  transform: rotate(45deg);
}

.tp-modal .checkbox-line input[type="checkbox"]:focus-visible {
  outline: 0.125rem solid var(--imbo-orange);
  outline-offset: 0.125rem;
}

/* ══════════════════════════════════════════════════════
   PÁGINAS LEGALES — Política de Privacidad / Libro de Reclamaciones
══════════════════════════════════════════════════════ */

/* Encabezado corto de página (reemplaza el hero grande en páginas internas) */
.legal-hero {
  padding: 9.5rem 0 3rem;
  background: var(--imbo-dark);
  position: relative;
  overflow: hidden;
}

.legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 0.0625rem, transparent 0.0625rem);
  background-size: 1.75rem 1.75rem;
  pointer-events: none;
}

.legal-hero__content {
  position: relative;
  z-index: 1;
  max-width: 70ch;
}

.legal-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--imbo-orange);
  margin-bottom: var(--space-sm);
}

.legal-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-md);
}

.legal-hero p {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-lg);
  max-width: 60ch;
}

/* Panel claro para texto legal largo — misma técnica que .iso-banner/.features-section */
.legal-content {
  background: var(--imbo-light);
  border-radius: 3rem;
  margin-block: 2rem;
  padding: var(--space-3xl) 0;
  position: relative;
}

.legal-content h2,
.legal-content h3 {
  color: var(--imbo-dark);
}

.legal-content p,
.legal-content li {
  color: #475569;
}

.legal-content .container {
  max-width: 53.75rem;
}

.legal-section {
  margin-bottom: var(--space-2xl);
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Navy en vez del dorado de marca: dorado sobre --imbo-light da 1.56:1,
   muy por debajo del mínimo WCAG AA (4.5:1); navy da 9.73:1. */
.legal-section h2 .legal-section__num {
  color: var(--imbo-dark-2);
}

.legal-section p + p,
.legal-section ul {
  margin-top: 0.75rem;
}

.legal-section ul {
  padding-left: 1.25rem;
}

.legal-section ul li {
  list-style: disc;
  margin-bottom: 0.4rem;
}

.legal-section strong {
  color: var(--imbo-dark);
}

/* Ficha de datos de la empresa (RUC, razón social, domicilio) */
.legal-datasheet {
  background: rgba(255, 255, 255, 0.7);
  border: 0.0625rem solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.legal-datasheet dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
}

.legal-datasheet dt {
  font-weight: 700;
  color: var(--imbo-dark);
  white-space: nowrap;
}

.legal-datasheet dd {
  color: #475569;
}

/* Aviso legal destacado (INDECOPI / plazo de respuesta) */
.legal-notice {
  background: rgba(var(--imbo-orange-rgb), 0.1);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--imbo-dark);
  line-height: 1.6;
}

.legal-notice strong {
  color: var(--imbo-dark);
}

/* Centra el formulario dentro de su sección (un solo bloque, no un grid
   de 2 columnas como .contact-grid) */
.reclamo-section__inner {
  max-width: 40rem;
  margin-inline: auto;
}

.reclamo-section__title {
  font-size: var(--fs-2xl);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Formulario del Libro de Reclamaciones sobre fondo oscuro */
.reclamo-form-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: var(--shadow-float), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
}

.reclamo-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.reclamo-form fieldset {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.reclamo-form legend {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--imbo-white);
  margin-bottom: 0.5rem;
  padding: 0;
}

.reclamo-form__divider {
  height: 0.0625rem;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  margin: 0;
}

@media (max-width: 40rem) {
  .legal-datasheet dl {
    grid-template-columns: 1fr;
  }
  .legal-content {
    border-radius: 1.5rem;
  }
}

/* ══════════════════════════════════════════════════════
   SOCIAL HUB — Botón flotante con redes sociales
══════════════════════════════════════════════════════ */
.social-hub {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

/* ── Sub-botones industriales — tuercas hexagonales, siempre visibles ──
   Bug real: el fondo (--imbo-dark-2) es EL MISMO navy que domina el
   resto del sitio (navbar, secciones, menú móvil abierto) — contra
   ese fondo el hexágono se camuflaba por completo y solo se veía el
   ícono blanco flotando, sin botón debajo. El borde claro + sombra le
   dan un borde perceptible sin importar el color de lo que haya
   detrás (navy incluido). */
.social-hub__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  /* Forma hexagonal — evoca tuercas y maquinaria pesada */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--imbo-dark-2);
  border: 0.09375rem solid rgba(255, 255, 255, 0.3);
  /* filter (no box-shadow): clip-path recorta el box-shadow junto con
     el elemento, así que una sombra normal quedaría invisible — el
     filtro se aplica DESPUÉS del recorte y sí dibuja alrededor de la
     forma hexagonal real. */
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.4));
  color: #fff;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.28s ease, filter 0.25s ease;
}

/* Hover por red — se ilumina con el color oficial */
.social-hub__sub--tiktok:hover {
  background: #FF0050;
  transform: scale(1.15);
  filter: drop-shadow(0 0 0.625rem rgba(255, 0, 80, 0.65));
}

.social-hub__sub--instagram:hover {
  background: #E1306C;
  transform: scale(1.15);
  filter: drop-shadow(0 0 0.625rem rgba(225, 48, 108, 0.65));
}

.social-hub__sub--facebook:hover {
  background: #1877F2;
  transform: scale(1.15);
  filter: drop-shadow(0 0 0.625rem rgba(24, 119, 242, 0.65));
}

/* ── Botón principal WhatsApp ── */
.social-hub__main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow:
    0 0.375rem 1.5rem rgba(37, 211, 102, 0.45),
    0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pulse-wa 2.4s ease-in-out infinite;
}

.social-hub__main svg {
  display: block;
  flex-shrink: 0;
}

.social-hub__main:hover {
  transform: scale(1.1);
  box-shadow:
    0 0.625rem 2rem rgba(37, 211, 102, 0.6),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  animation: none;
}


@keyframes pulse-wa {
  0%, 100% {
    box-shadow:
      0 0.375rem 1.5rem rgba(37, 211, 102, 0.45),
      0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  55% {
    box-shadow:
      0 0.375rem 1.5rem rgba(37, 211, 102, 0.45),
      0 0 0 0.875rem rgba(37, 211, 102, 0);
  }
}

/* ══════════════════════════════════════════════════════
   TOAST — Notificación de estado del formulario
══════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 6.25rem;
  right: 1.5rem;
  z-index: 9998;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  max-width: 21.25rem;
  pointer-events: none;
  animation: toast-slide-in 0.3s ease forwards;
}

.toast--success {
  background: #10B981;
  color: #fff;
  box-shadow: 0 0.25rem 1.25rem rgba(16, 185, 129, 0.4);
}

.toast--error {
  background: #EF4444;
  color: #fff;
  box-shadow: 0 0.25rem 1.25rem rgba(239, 68, 68, 0.4);
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════
   TOOLTIP DEL MAPA INTERACTIVO
══════════════════════════════════════════════════════ */
.map-tooltip {
  position: fixed;
  z-index: 9999;
  padding: 0.45rem 0.9rem;
  background: rgb(13 67 114 / 0.95);
  border: 0.0625rem solid rgba(var(--imbo-orange-rgb), 0.4);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--imbo-white);
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 0.4), inset 0 0.0625rem 0 rgb(255 255 255 / 0.06);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

.map-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   Enlace cruzado "Techo Propio" en el navbar del IMBO principal — pill
   verde para que se distinga a simple vista de los demás links de texto. */
.navbar__links a.navbar__tp-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  background: var(--imbo-dark-2);
  color: var(--imbo-white);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  transition: var(--transition-fast);
}

.navbar__links a.navbar__tp-link::after {
  content: none;
}

.navbar__links a.navbar__tp-link:hover {
  background: #0a3259;
  color: var(--imbo-white);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1.125rem rgba(13, 67, 114, 0.4);
}

/* Enlace "IMBO Techo Propio" en el footer, a juego con el pill del navbar */
.footer-col a.footer-tp-link {
  color: var(--tp-green);
  font-weight: 700;
}

.footer-col a.footer-tp-link:hover {
  color: var(--tp-green-light);
}

/* Logo + etiqueta de sub-marca como un solo bloque dentro del navbar */
.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ══════════════════════════════════════════════════════
   TECHO PROPIO — clon del diseño de campaña (landig page.pdf)
   Estética "publicidad": burbujas, cintas diagonales, sombras duras.
   Deliberadamente distinta del resto del sitio — es el mismo lenguaje
   visual de los anuncios pagados de IMBO, por pedido explícito.
══════════════════════════════════════════════════════ */

/* ── Hero — simplificado a pedido explícito: solo el banner (imagen),
   sin elementos de HTML/CSS armados encima. El <h1 class="sr-only">
   con el encabezado real vive en el HTML (el texto del banner queda
   "pintado" dentro de la imagen, invisible para buscadores/lectores
   de pantalla). ── */
.tp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #0a3259 0%, #0d4372 55%, #0a3259 100%);
  height: 100vh;
  height: 100svh;   /* alto de viewport "estable" — no salta con la barra del navegador móvil */
  min-height: 38.75rem; /* piso de seguridad: evita que todo se aplaste en pantallas muy bajitas */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* display:contents en el <picture> que envuelve al banner: sin esto,
   el <picture> (no el <img>) sería el hijo directo real del flex de
   .tp-hero, y como <picture> no tiene tamaño propio (es un wrapper
   inline por defecto), .tp-hero__banner perdía el width/height:100%
   que necesita para llenar la sección. display:contents lo saca del
   árbol de layout, dejando que .tp-hero__banner se comporte exacto
   igual que si fuera hijo directo de .tp-hero. */
.tp-hero > picture {
  display: contents;
}

.tp-hero__banner {
  display: block;
  width: 100%;
  height: 100%;
  /* contain (no cover): el fondo de la imagen ya es del mismo navy
     que .tp-hero, así que cualquier franja libre que deje al no
     coincidir el aspect-ratio exacto se mezcla sola con el fondo, sin
     recortar texto ni la familia (que sí pasaría con cover si la
     pantalla es más ancha/alta que la proporción del banner). */
  object-fit: contain;
}

/* Versión mobile: oculta en desktop por defecto — la muestra el
   media query de abajo. Estructura propia, no una copia achicada de
   la de escritorio (foto de fondo arriba + tarjeta de contenido real
   debajo, en vez de un banner ancho). */
.tp-hero__m {
  display: none;
}

@media (max-width: 63.9375em) {
  /* .tp-hero__banner en este ancho carga hero-familia.webp (ver el
     <source> del <picture> en el HTML, filtrado por este mismo
     breakpoint) — es la foto de fondo de arriba, ya no el banner. */
  .tp-hero {
    height: auto;
    min-height: max(35rem, 100svh);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;
    /* Espacio real contra el navbar fijo (4.5rem de alto) + un poco
       más de aire, para que la foto no arranque pegada/tapada por el
       header. */
    padding-top: calc(4.5rem + 1.5rem);
  }

  .tp-hero__banner {
    height: 44vh;
    min-height: 15rem;
    max-height: 26rem;
    object-fit: cover;
    object-position: center 25%;
  }

  /* Degradado hacia el navy en la base de la foto, para que la
     tarjeta de texto que se monta encima (ver margin-top negativo en
     .tp-hero__m) siempre tenga buen contraste sin importar qué colores
     caigan justo detrás. top: mismo valor que el padding-top de
     .tp-hero de arriba, para que el degradado siga alineado con la
     foto (que ahora arranca más abajo) y no con el hueco vacío. */
  .tp-hero::after {
    content: '';
    position: absolute;
    top: calc(4.5rem + 1.5rem);
    left: 0;
    right: 0;
    height: 44vh;
    min-height: 15rem;
    max-height: 26rem;
    background: linear-gradient(to bottom, rgba(10, 32, 60, 0) 55%, #0d4372 100%);
    pointer-events: none;
    z-index: 1;
  }

  .tp-hero__m {
    display: block;
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
  }

  .tp-hero__m-content {
    padding: 0 var(--container-pad) 2rem;
  }

  .tp-hero__m-kicker {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--imbo-orange);
    margin-bottom: 0.5rem;
  }

  .tp-hero__m-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 7vw, 2rem);
    line-height: 1.15;
    color: var(--imbo-white);
    margin: 0 0 1.25rem;
  }

  .tp-hero__m-heading em {
    font-style: italic;
    font-weight: 900;
    color: var(--imbo-orange);
  }

  .tp-hero__m-bono {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
  }

  .tp-hero__m-bono-amount {
    font-family: var(--font-heading);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    color: var(--imbo-orange);
    line-height: 1;
  }

  .tp-hero__m-bono-tag {
    display: inline-flex;
    align-items: center;
    background: var(--imbo-white);
    color: var(--imbo-dark-2);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.3;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
  }

  .tp-hero__m-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.25rem;
  }

  .tp-hero__m-disclaimer-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--imbo-white);
    color: var(--imbo-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.7rem;
    margin-top: 0.1rem;
  }

  .tp-hero__m-ribbon {
    display: inline-flex;
    align-items: center;
    background: var(--imbo-orange);
    color: var(--imbo-dark-2);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
  }
}

/* ── Requisitos — clon casi literal de la referencia del cliente:
   título centrado con línea dorada, tarjetas grises con ícono navy
   ilustrado y check en círculo blanco/dorado que sobresale del borde
   inferior de la tarjeta. Cabe en una sola pantalla (min-height:100svh
   + centrado vertical), igual que el hero. */
.tp-requisitos {
  background: var(--imbo-white);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 6vh, var(--space-3xl));
}

.tp-requisitos .section-header {
  margin-bottom: clamp(1.5rem, 3vh, var(--space-2xl));
}

.tp-requisitos .section-header::after {
  content: '';
  width: 4.5rem;
  height: 0.25rem;
  background: var(--imbo-orange);
  border-radius: var(--radius-full);
}

.tp-requisitos .section-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 800;
}

.tp-requisitos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  width: 100%;
}

.tp-requisito-card {
  position: relative;
  background: #E9EBEC;
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg) calc(var(--space-lg) + 1.75rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  transition: var(--transition-smooth);
}

.tp-requisito-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow-card);
}

.tp-requisito-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--tp-blue);
}

.tp-requisito-card p {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: var(--tp-blue);
  font-size: var(--fs-base);
  max-width: none;
}

.tp-requisito-card__check {
  position: absolute;
  bottom: -1.625rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--imbo-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-blue);
  box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.2);
}

@media (max-width: 63.9375em) {
  /* Con 4 tarjetas apiladas el contenido ya supera el alto de una
     pantalla — el min-height:100svh de escritorio se suelta acá para
     que la sección fluya con su alto natural en vez de forzar un
     recorte o dejar huecos. */
  .tp-requisitos {
    min-height: auto;
  }

  .tp-requisitos__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem; /* espacio extra para que el check que sobresale
      del borde inferior no choque con la tarjeta de la fila de abajo */
  }
}

@media (max-width: 35rem) {
  .tp-requisitos__grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
}

/* ── ¿Qué recibirás? — clon casi literal de la referencia del cliente:
   título grande en dorado + subtítulo, tarjetas doradas escalonadas en
   altura (la del medio más abajo, la derecha más alta) en vez de la
   grilla pareja de antes. */
.tp-recibiras {
  background: linear-gradient(155deg, #0a3259 0%, #0d4372 55%, #0a3259 100%);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4xl);
}

.tp-recibiras::before,
.tp-recibiras::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--imbo-orange);
  opacity: 0.12;
}

.tp-recibiras::before {
  width: 21.25rem;
  height: 21.25rem;
  left: -8.75rem;
  bottom: -8.75rem;
}

.tp-recibiras::after {
  width: 13.75rem;
  height: 13.75rem;
  right: -6.25rem;
  top: -5rem;
}

.tp-recibiras__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
}

.tp-recibiras__intro {
  flex: 0 0 clamp(15rem, 26vw, 21.25rem);
}

.tp-recibiras__intro h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.15;
  color: var(--imbo-orange);
  margin: 0 0 1.25rem;
}

.tp-recibiras__intro p {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1vw + 0.9rem, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: none;
}

.tp-recibiras__intro p strong {
  font-style: normal;
  font-weight: 700;
  color: var(--imbo-white);
}

.tp-recibiras__cards {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.tp-recibiras-card {
  flex: 1;
  background: var(--imbo-orange);
  border-radius: var(--radius-lg);
  padding: 1.875rem; /* var(--space-lg) +25% */
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
}

.tp-recibiras-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow-float);
}

/* La tarjeta del medio baja y la de la derecha se estira un poco más
   alta — el escalonado en zigzag que muestra la referencia, en vez de
   la fila pareja anterior. */
.tp-recibiras-card--offset {
  margin-top: clamp(2rem, 6vw, 4.5rem);
}

.tp-recibiras-card--tall {
  padding-block: 3.125rem; /* (var(--space-lg) + 1rem) +25% */
}

.tp-recibiras-card__icon-wrap {
  width: 6.5625rem; /* +25% */
  height: 6.5625rem;
  border-radius: 50%;
  background: var(--imbo-white);
  margin: 0 auto 1.25rem; /* var(--space-md) +25% */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-recibiras-card__icon-wrap svg {
  width: 3.125rem; /* +25% */
  height: 3.125rem;
  color: var(--imbo-dark-2);
}

.tp-recibiras-card p {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--imbo-dark);
  font-size: 1.09rem; /* var(--fs-sm) +25% */
  line-height: 1.4;
  max-width: none;
  display: flex;
  align-items: flex-start; /* antes "center" — con texto de 2 líneas
    (ej. "Estructura preparada...") el check quedaba flotando a la
    altura de la segunda línea en vez de alinear con la primera */
  justify-content: center;
  gap: 0.4rem;
}

.tp-recibiras-card p svg {
  width: 1.25rem; /* +25% */
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--imbo-dark-2);
  margin-top: 0.2rem; /* centra el ícono contra la altura de la primera línea */
}

@media (max-width: 63.9375em) {
  /* El layout escalonado depende del ancho horizontal; apilado,
     el intro pasa arriba y las tarjetas se acomodan en 2 columnas
     parejas (el margin-top del escalonado se resetea). */
  .tp-recibiras__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xl);
  }

  .tp-recibiras__intro {
    flex: 1 1 auto;
    text-align: center;
  }

  .tp-recibiras__cards {
    flex-wrap: wrap;
  }

  .tp-recibiras-card {
    flex: 1 1 calc(50% - var(--space-lg) / 2);
  }

  .tp-recibiras-card--offset {
    margin-top: 0;
  }

  .tp-recibiras-card--tall {
    padding-block: var(--space-lg);
  }
}

@media (max-width: 35rem) {
  .tp-recibiras-card {
    flex: 1 1 100%;
  }
}

/* ── Entidad técnica + copia literal — clon casi literal de la
   referencia del cliente: manchas doradas decorativas, panel sutil
   detrás de la foto, mano+llave pegada al borde real de la pantalla
   (fuera de .container, igual técnica que .tp-hero__watermark), y
   flecha curva señalando del QR al enlace. Ocupa una sola pantalla,
   mismo criterio que el hero. */
.tp-entidad {
  background: var(--imbo-dark-2);
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 38.75rem;
  display: flex;
  align-items: center;
}

.tp-entidad::before {
  content: '';
  position: absolute;
  top: -8.125rem;
  left: -8.125rem;
  width: 16.25rem;
  height: 16.25rem;
  border-radius: 50%;
  background: var(--imbo-orange);
  opacity: 0.9;
}

.tp-entidad::after {
  content: '';
  position: absolute;
  bottom: -10.625rem;
  right: -6.875rem;
  width: 22.5rem;
  height: 22.5rem;
  border-radius: 50%;
  background: var(--imbo-orange);
  opacity: 0.9;
}

.tp-entidad__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 88.5%; /* 118% - 25% */
  width: auto;
  max-width: none;
  z-index: 2;
  filter: drop-shadow(-1.5rem 1.25rem 2.125rem rgba(0, 0, 0, 0.45));
}

.tp-entidad__text {
  position: relative;
  z-index: 1;
  max-width: 40vw; /* ocupa hasta justo antes de donde empieza la mano */
}

.tp-entidad__text h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.6rem, 2.3vw + 1.15rem, 2.07rem);
  line-height: 1.4;
  color: var(--imbo-white);
  margin: 0;
}

.tp-entidad__code {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.87rem, 5.75vw, 4.14rem);
  color: var(--imbo-orange);
  margin: 0.75rem 0 0;
}

.tp-entidad__qr-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.tp-entidad__qr {
  width: 10.625rem;
  height: 10.625rem;
  border-radius: var(--radius-md);
  background: var(--imbo-white);
  padding: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 0.625rem 1.5rem -0.375rem rgba(0, 0, 0, 0.35);
}

.tp-entidad__arrow {
  width: 7.75rem;
  height: auto;
  flex-shrink: 0;
}

.tp-entidad__qr-row a {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.61rem;
  color: var(--imbo-white);
  line-height: 1.3;
}

.tp-entidad__qr-row a em {
  font-style: italic;
  color: var(--imbo-orange);
}

@media (max-width: 63.9375em) {
  /* flex-direction:column (bug real): .tp-entidad es flex (fila) en
     la regla base. En desktop no importaba porque la foto es
     position:absolute (sale del flujo flex) — pero acá abajo pasa a
     position:relative (ver .tp-entidad__photo), así que sin esto
     competiría por espacio en la MISMA fila que .container en vez de
     apilarse debajo, y sus cálculos de %/margin:auto salían mal
     (medido con Playwright: la foto se salía 112px de una pantalla
     de 375px de ancho). */
  .tp-entidad {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding-block: var(--space-3xl);
  }

  /* Bug real: el blob amarillo (22.5rem) se queda con su tamaño de
     escritorio aunque la sección se achique en mobile, y con el texto
     ahora centrado (ver .tp-entidad__qr-row más abajo) termina justo
     detrás de "tu copia literal, AQUÍ" — que también es naranja/
     amarillo, amarillo sobre amarillo, ilegible. Se achica y se
     empuja más hacia la esquina para que quede de acento, no debajo
     del texto. */
  .tp-entidad::after {
    width: 14rem;
    height: 14rem;
    bottom: -7rem;
    right: -5rem;
  }

  .tp-entidad__photo {
    position: relative;
    right: auto;
    bottom: auto;
    height: auto;
    /* +25% a pedido explícito (55% -> 68.75%, 13.75rem -> 17.19rem) */
    width: 68.75%;
    max-width: 17.19rem;
    display: block;
    /* margin-left:auto (no auto en ambos lados): pegada al borde
       derecho real de la pantalla en vez de centrada — pedido
       explícito, ya que .tp-entidad__photo es hijo directo de
       .tp-entidad (fuera de .container), así que su borde derecho
       sí es el borde real del viewport, no el del contenedor. */
    margin: var(--space-xl) 0 0 auto;
    filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.4));
  }

  .tp-entidad__text {
    max-width: none;
    text-align: center;
  }

  /* Bug real: en escritorio la flecha apunta DE COSTADO, del QR hacia
     el texto, porque van en fila horizontal. Con flex-wrap:wrap en
     un viewport angosto los 3 elementos (QR 10.625rem + flecha
     7.75rem + texto) no entran en una fila y cada uno caía en su
     propia línea — la flecha quedaba flotando sola, señalando hacia
     la nada, sin relación visual con el QR ni el texto de abajo.
     Estructura de mobile aparte: columna centrada (QR arriba, texto
     abajo, orden de lectura normal) y la flecha se oculta porque su
     único sentido era señalar en horizontal. */
  .tp-entidad__qr-row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    text-align: center;
    gap: 1.25rem;
  }

  .tp-entidad__arrow {
    display: none;
  }
}

/* ── Testimonios — cabe en una sola pantalla, mismo criterio que el
   hero/Requisitos (height:100svh + overflow:hidden). El grid ocupa
   el alto restante bajo el título (flex:1 + grid-template-rows:1fr,
   mismo fix que .tp-hero__grid) y las tarjetas se estiran a esa
   altura en vez de usar un aspect-ratio fijo, que se podía pasar de
   una pantalla en laptops de poca altura. */
.tp-testimonios {
  background: var(--imbo-white);
  height: 100vh;
  height: 100svh;
  min-height: 35rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tp-testimonios .container {
  height: 100%;
  max-height: 100%;
  padding-block: clamp(1.5rem, 5vh, var(--space-2xl));
  display: flex;
  flex-direction: column;
}

.tp-testimonios .section-header {
  margin-bottom: clamp(1.25rem, 3vh, var(--space-2xl));
}

.tp-testimonios .section-header::after {
  content: '';
  width: 4.5rem;
  height: 0.25rem;
  background: var(--imbo-orange);
  border-radius: var(--radius-full);
}

.tp-testimonios .section-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 800;
}

.tp-testimonios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: var(--space-lg);
  flex: 1;
  min-height: 0;
}

.tp-testimonio-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
}

.tp-testimonio-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow-float);
}

.tp-testimonio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tp-testimonio-card:hover img {
  transform: scale(1.05);
}

.tp-testimonio-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-2xl) var(--space-lg) var(--space-md);
  background: linear-gradient(to top, rgba(13, 67, 114, 0.92) 0%, transparent 100%);
  color: var(--imbo-white);
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.tp-testimonio-card__check {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--imbo-orange);
  color: var(--imbo-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 63.9375em) {
  /* Apiladas o en 2 columnas, las fotos ya no caben en una sola
     pantalla sin recortarse mal — se libera el alto fijo. */
  .tp-testimonios {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding-block: var(--space-3xl);
  }

  .tp-testimonios .container {
    height: auto;
    max-height: none;
  }

  .tp-testimonios__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .tp-testimonio-card {
    height: auto;
    aspect-ratio: 5 / 6;
  }
}

@media (max-width: 35rem) {
  .tp-testimonios__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mapa de cobertura ── */
.tp-mapa {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 30rem;
}

.tp-mapa__map {
  width: 100%;
  height: 100%;
  background: var(--imbo-dark-2); /* se ve mientras cargan los tiles */
}

/* Fix oficial de Leaflet: el reset global de base.css (img{max-width:100%})
   comprime los tiles del mapa, cada uno de 256px fijos — el !important
   es el que recomienda la propia documentación de Leaflet para este
   conflicto exacto, scopeado solo a .leaflet-container para no tocar
   ninguna otra imagen del sitio. */
.leaflet-container img {
  max-width: none !important;
}

/* Velo suave abajo para que el botón flotante se lea bien sobre el
   mapa, sin importar qué colores caigan justo detrás */
.tp-mapa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(10, 20, 30, 0.55) 0%, transparent 100%);
  pointer-events: none;
}

.tp-mapa__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3rem);
  transform: translateX(-50%);
  z-index: 1;
}

.tp-mapa__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-full);
  background: var(--imbo-orange);
  color: var(--imbo-dark);
  font-weight: 800;
  font-size: var(--fs-base);
  box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.35);
  transition: var(--transition-smooth);
}

.tp-mapa__btn:hover {
  background: var(--imbo-orange-dark);
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.875rem 2.125rem rgba(0, 0, 0, 0.45);
}

.tp-mapa__btn svg {
  flex-shrink: 0;
}

/* ── Modal de contacto (popup, <dialog> nativo) — dos columnas para
   ocupar la mayor parte de la pantalla sin tocar los bordes y sin
   scroll: foto+título a la izquierda, formulario a la derecha. El
   alto se limita a la ventana real (100svh) y los espacios/tamaños
   del formulario usan clamp() con vh para achicarse en pantallas
   bajas en vez de desbordar. ── */
/* ══════════════════════════════════════════════════════
   MODAL — reconstruido desde 0 (pedido explícito del cliente) para
   calzar con la referencia real en PDF: ya no son 2 columnas de alto
   completo (foto | formulario) — ahora es una fila arriba (foto +
   burbuja blanca) y el formulario completo, de ancho completo, abajo.
══════════════════════════════════════════════════════ */
.tp-modal {
  /* El reset global "* { margin: 0; }" de base.css anula el
     margin:auto con el que el navegador centra un <dialog> nativo
     por defecto — por eso quedaba pegado arriba a la izquierda.
     Se fuerza position:fixed + inset:0 + margin:auto explícito acá
     para no depender de que el user-agent stylesheet lo centre. */
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 1.75rem;
  padding: 0;
  /* Ancho amplio con 2rem de separación real del borde de pantalla:
     el max-width es el techo para monitores enormes, calc(100%-4rem)
     es lo que realmente manda hasta llegar ahí. */
  max-width: 80rem;
  width: calc(100% - 4rem);
  /* Antes max-height + overflow-y:auto: apenas el contenido se pasaba
     por unos pocos px del límite, aparecía una barra de scroll lateral
     permanente (fea incluso cuando casi no hacía falta scrollear).
     Pedido explícito del cliente: mejor que el modal crezca lo que
     necesite a que exista esa barra — sin tope de alto, sin scroll.
     margin:auto (arriba) lo sigue centrando mientras entre; si el
     contenido llega a superar el alto de la pantalla, como mucho
     queda pegado arriba en vez de perfectamente centrado. */
  background: var(--imbo-dark-2);
  box-shadow: var(--shadow-float);
}

.tp-modal[open] {
  display: block;
}

.tp-modal::backdrop {
  background: rgba(10, 20, 30, 0.75);
  backdrop-filter: blur(0.1875rem);
}

/* Aro dorado (no un círculo translúcido plano) — igual que la
   referencia del PDF. */
.tp-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.125rem solid var(--imbo-orange);
  background: var(--imbo-dark-2);
  color: var(--imbo-white);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-fast);
}

.tp-modal__close:hover {
  background: var(--imbo-dark);
}

/* Fila superior: foto (izq) + burbuja blanca (der) */
.tp-modal__top {
  position: relative; /* ancla para centrar .tp-modal__bono en toda la fila */
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem) 0;
}

/* Banner único (imagen) a pedido explícito: en pantallas grandes
   reemplaza por completo a .tp-modal__top (foto+bono+burbuja
   armados con HTML/CSS); en mobile se sigue usando la versión
   construida con elementos reales, porque el texto de una sola
   imagen tan ancha quedaría ilegible/recortado en pantallas chicas. */
.tp-modal__banner {
  display: none;
}

@media (min-width: 64em) {
  .tp-modal__banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.75rem 1.75rem 0 0;
  }

  .tp-modal__top {
    display: none;
  }
}

.tp-modal__photo {
  position: relative;
  flex: 1 1 45%;
  min-width: 0;
  /* Alto fijo (según viewport), no aspect-ratio: con aspect-ratio,
     al ensanchar el modal la foto también se agrandaba en alto y
     el modal dejaba de caber en una sola pantalla — bug real.
     Recortado de nuevo (venía de un pedido de agrandar el título y el
     bono, que hizo que el modal completo pasara del alto de pantalla
     y volviera a aparecer la barra de scroll de la página). El
     título/bono se achican un poco a la par (ver esas reglas) para
     que sigan sin pisarse con menos alto disponible.
     Agrandado varias veces (13.5rem -> 20.25rem -> 26.5rem) para que
     la casa/familia se vean más grandes de forma real: como ambas
     imágenes llenan el 100%/92% del recorte (.tp-modal__photo-clip),
     agrandar este contenedor las agranda a ellas en la misma
     proporción SIN necesidad de transform:scale (que las recortaba,
     ver el comentario en .tp-modal__photo-clip).
     Reducido un 15% (26.5rem -> 22.53rem) a pedido explícito. */
  height: clamp(15.73rem, 41.65vh, 22.53rem);
}

/* La foto (casa + familia) se recorta acá adentro; el bono y las
   casitas 3D quedan FUERA de este recorte (hijos directos de
   .tp-modal__photo) para poder sobresalir del borde de la imagen,
   igual que en el PDF (el "S/33,000" se sale del marco). */
/* Antes background blanco (var(--imbo-light)): con object-fit:cover
   nunca se veía (la foto llenaba toda la caja), pero al pasar a
   contain (ver abajo) sí queda espacio libre alrededor — que se
   mezcle con el navy del modal en vez de mostrar un fondo claro. */
/* top:0 (antes 25%): ese inset dejaba un hueco navy vacío arriba de
   la casa/familia — al crecer .tp-modal__photo (ver su alto arriba)
   ese 25% se volvió un espacio enorme entre el borde superior del
   modal y la imagen. Quitado para que la imagen arranque pegada
   arriba del recorte (el espacio que queda hasta el borde del modal
   es solo el padding normal de .tp-modal__top). */
.tp-modal__photo-clip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
}

/* La familia (más angosta, aspect 1.42) llena toda la altura de la
   caja con width:100%+contain — pero la casa (más ancha, aspect 1.9)
   con ese mismo criterio quedaba limitada por el ANCHO en vez del
   alto, y renderizaba más baja que la familia (por eso el hueco de
   navy arriba del techo, y la casa "empezaba" más abajo que la
   familia). Se cambia a height:100%+width:auto (sin forzar 100% de
   ancho) para que la casa SIEMPRE llene el alto completo igual que
   la familia — incluso si eso significa que se recorta un poco de
   ancho a los costados (se pierde algo de pared, nunca la familia). */
.tp-modal__house-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 0;
  width: auto;
  /* 92% (no 100%): la casa queda un poco más baja que la familia,
     pedido explícito de bajarla un poco más sin tocar a la familia. */
  height: 92%;
  max-width: none;
}

.tp-modal__family {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Casitas decorativas, flotando a los costados de la foto — +50%
   más sobre el tamaño anterior (6.75rem -> 10.125rem), luego +25%
   más (10.125rem -> 12.66rem). */
.tp-modal__deco {
  position: absolute;
  width: 12.66rem;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 0.375rem 0.625rem rgba(0, 0, 0, 0.35));
}

/* Posición nueva: más hacia afuera (cerca del borde de la foto) y un
   poco más abajo que antes, en vez de pegadas al techo — icono-casa-1
   ya "mira" naturalmente hacia la derecha, va sin espejo. */
.tp-modal__deco--left {
  top: 8%;
  left: 2%;
}

/* icono-casa-2.webp ya es el espejo natural de icono-casa-1 (mira
   hacia la izquierda) — sin scaleX(-1) extra, para no volver a
   espejarla y que ambas terminen mirando al mismo lado. */
.tp-modal__deco--right {
  top: 8%;
  right: 2%;
}

/* Se sale un poco del borde inferior de la foto a propósito —
   igual que en el PDF, donde el "S/33,000" no queda contenido
   dentro del marco de la imagen. */
/* Centrado en toda la fila superior (foto + burbuja juntas), no solo
   dentro de la foto — por eso se ancla a .tp-modal__top (su padre
   real ahora) y no a .tp-modal__photo. */
.tp-modal__bono {
  position: absolute;
  left: 50%;
  bottom: -0.85rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

/* -25% sobre el tamaño anterior (que a su vez era +100% del original) */
/* +50% a pedido explícito (0.9rem -> 1.35rem, padding igual). */
.tp-modal__bono-tag {
  background: var(--imbo-orange);
  color: var(--imbo-dark-2);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0.5625rem 1.2375rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

/* -25% de tamaño y contorno más grueso (0.15rem -> 0.22rem):
   relleno azul con contorno blanco. */
/* +50% a pedido explícito (2.05-2.95rem -> 3.075-4.425rem, borde
   proporcional 0.22rem -> 0.33rem). */
.tp-modal__bono strong {
  font-family: var(--font-heading);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(3.075rem, 7.5vw + 1.95vh, 4.425rem);
  line-height: 1;
  color: var(--imbo-dark-2);
  -webkit-text-stroke: 0.33rem var(--imbo-white);
  paint-order: stroke fill;
}

/* Burbuja blanca — mismo lenguaje visual que la del hero (radios
   desiguales, esquina inferior izquierda más cerrada) */
/* Columna derecha completa: ocupa el mismo lugar en la fila que antes
   ocupaba la burbuja (mismo ancho, mismo alto — comparte alto con la
   foto por el mismo motivo explicado abajo), pero la burbuja blanca
   en sí queda más angosta y centrada adentro (ver .tp-modal__bubble),
   dejando espacio a los costados en vez de pegarse al monto. */
.tp-modal__bubble-col {
  flex: 1 1 55%;
  min-width: 0;
  height: clamp(15.73rem, 41.65vh, 22.53rem);
  display: flex;
  align-items: center;
  /* flex-end: el contenedor blanco vuelve a quedar pegado a la
     derecha de su columna (se probó centrarlo, pero a pedido
     explícito se revierte — lo que se centra es el CONTENIDO de
     adentro, ver .tp-modal__bubble). */
  justify-content: flex-end;
}

/* Bug real corregido antes: la burbuja no tenía alto propio y
   dependía de align-items:stretch para igualar el de la foto — pero
   stretch NO aplica sobre un hermano con alto explícito (.tp-modal__photo
   ya tiene su clamp fijo), así que en pantallas anchas y bajitas
   (padding/tipografía de la burbuja escalan por vw, la foto por vh —
   ahí se desincronizan) el contenido de la burbuja pedía más alto del
   que la foto tenía, la fila crecía para acomodarla, y .tp-modal__bono
   (anclado al fondo de TODA la fila) terminaba flotando a mitad de la
   burbuja, tapando el titular. Ahora ese alto lo fija .tp-modal__bubble-col
   (arriba), y la burbuja simplemente llena su columna al 100% de alto,
   pero solo 78% de ancho — más angosta, separada del monto. */
.tp-modal__bubble {
  /* Más angosta que antes (78% -> 62%): con 78% el borde izquierdo
     seguía llegando hasta donde el bono/monto (centrado en TODA la
     fila) queda flotando, y se tocaban. */
  width: 62%;
  height: 100%;
  overflow: hidden;
  background: var(--imbo-white);
  border-radius: 1.5rem 1.5rem 1.5rem 0.5rem;
  padding: clamp(1rem, 2.5vw + 1vh, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* center: el contenido (logos + título) queda centrado adentro del
     contenedor blanco, en vez de pegado a su borde izquierdo. */
  align-items: center;
  text-align: center;
}

.tp-modal__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

/* Íconos +50% sobre su tamaño anterior a pedido explícito
   (1.5625rem -> 2.34rem / 2rem -> 3rem). */
.tp-modal__logo-imbo {
  height: 2.34rem;
  width: auto;
}

.tp-modal__logo-tp {
  height: 3rem;
  width: auto;
}

/* Mucho más grande que antes (íconos del logo sin cambios, solo el
   título) — pide más alto en la fila, ver .tp-modal__photo/__bubble.
   +15% de nuevo a pedido explícito. */
/* text-transform:uppercase (a pedido, referencia del banner adjunto):
   el texto real sigue siendo "¡Haz realidad tu casa propia!" en el
   HTML (nada cambia para lectores de pantalla ni buscadores), solo
   se muestra en mayúsculas. */
.tp-modal__bubble h2 {
  font-size: clamp(2.0844rem, 5.4625vw + 1.4375vh, 3.3781rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--imbo-dark);
  text-transform: uppercase;
  margin: 0;
}

.tp-modal__bubble h2 em {
  font-style: italic;
  font-weight: 900;
  color: var(--imbo-dark-2);
}

/* Rayita amarilla debajo del titular — acento del banner de
   referencia (ahí subraya "CASA"), acá va debajo de todo el bloque
   para no depender de recortar una palabra suelta con markup nuevo. */
.tp-modal__bubble h2::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 0.28rem;
  background: var(--imbo-orange);
  border-radius: var(--radius-full);
  margin-top: 0.6rem;
}

/* El botón "Enviar" del PDF es blanco con texto azul oscuro (no
   naranja/blanco como el resto de los .btn del sitio), y va al lado
   de "Más información" en vez de ocupar el ancho completo debajo. */
.tp-modal__submit {
  flex-shrink: 0;
  background: var(--imbo-white);
  color: var(--imbo-dark);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.75rem;
  padding: 0.6375rem 1.6875rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.tp-modal__submit:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-card);
}

.tp-modal__submit:active {
  transform: translateY(0);
}

/* Todo el formulario, -25% sobre el tamaño anterior (pedido explícito
   del cliente) — padding, gap, campos, textarea, etiquetas, checkbox,
   teléfono y botón Enviar, todos escalados a 0.75x. */
.tp-modal__form {
  padding: clamp(0.75rem, 1.9vw, 1.125rem) clamp(0.9rem, 2.25vw, 1.5rem) clamp(0.9rem, 2.25vw, 1.3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.1vh, 0.65rem);
}

.tp-modal__form .form-label {
  font-size: 0.5625rem;
}

.tp-modal__form .checkbox-line {
  gap: 0.5rem;
  font-size: 0.656rem;
}

.tp-modal__form .form-control {
  padding: clamp(0.45rem, 1.2vh, 0.65rem) 0.825rem;
  font-size: 0.75rem;
}

.tp-modal__form textarea.form-control {
  min-height: unset;
  height: clamp(2.4rem, 6vh, 3.4rem);
}

.tp-modal__counter {
  font-size: 0.5625rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: -0.4rem;
}

/* Teléfono (izquierda) + botón Enviar (derecha) en la misma fila —
   antes había además "Más información" y los íconos de redes, se
   quitaron a pedido del cliente para simplificar y ganar alto. */
.tp-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.tp-modal__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--imbo-orange);
}

/* ── Vida y movimiento del formulario emergente ── */

/* El modal entra con un pop suave en vez de aparecer seco de golpe;
   se dispara solo cada vez que showModal() agrega el atributo [open]. */
.tp-modal[open] {
  animation: tp-modal-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tp-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(1.125rem); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.tp-modal::backdrop {
  animation: tp-backdrop-in 0.45s ease;
}

@keyframes tp-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Etiquetas: un poco más de contraste que el gris apagado por
   defecto, y se iluminan en dorado mientras su campo está enfocado */
.tp-modal__form .form-label {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.1em;
  transition: color 0.2s ease;
}

.tp-modal__form .form-group:focus-within .form-label {
  color: var(--imbo-orange);
}

/* Campos: además del glow que ya tenían, un leve "levantamiento" */
.tp-modal__form .form-control {
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tp-modal__form .form-control:focus {
  transform: translateY(-0.125rem);
}

/* Mensajes de error: entran con un pequeño deslizamiento, no de golpe */
.tp-modal__form .field-error,
.tp-modal .field-error--consent {
  animation: tp-error-in 0.25s ease;
}

@keyframes tp-error-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* El campo tiembla brevemente cuando falla la validación (clase que
   agrega/quita el JS en showError) */
.tp-shake {
  animation: tp-shake 0.35s ease;
}

@keyframes tp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-0.375rem); }
  40%      { transform: translateX(0.375rem); }
  60%      { transform: translateX(-0.25rem); }
  80%      { transform: translateX(0.25rem); }
}

/* Checkbox: pequeño "pop" al marcarlo */
.checkbox-line input[type="checkbox"] {
  transition: transform 0.15s ease;
}

.checkbox-line input[type="checkbox"]:checked {
  animation: tp-checkbox-pop 0.3s ease;
}

@keyframes tp-checkbox-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Botón que abre el modal, reusa .btn pero fuerza cursor+type button */
button.btn {
  font-family: var(--font-body);
}

@media (max-width: 63.9375em) {
  /* Mobile: la fila foto+burbuja se apila (una arriba de la otra) en
     vez de ir lado a lado — a ese ancho, lado a lado dejaba muy poco
     espacio para el texto de la burbuja. */
  .tp-modal {
    width: 100%;
    height: 100svh;
    max-width: 100%;
    max-height: 100svh;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
  }

  .tp-modal__close {
    top: 0.75rem;
    right: 0.75rem;
    background: var(--imbo-dark-2);
  }

  .tp-modal__top {
    flex-direction: column;
    padding: 1rem 1rem 0;
    gap: 0.75rem;
  }

  .tp-modal__photo {
    aspect-ratio: 16 / 9;
  }

  /* En mobile .tp-modal__top se apila (foto arriba, burbuja abajo),
     así que "centrado en bottom de toda la fila" ya no aplica — se
     reubica pegado al borde inferior de la foto nomás (1rem de
     padding-top del contenedor + el alto real de la foto, calculado
     de su aspect-ratio 16:9 sobre el ancho disponible). */
  .tp-modal__bono {
    top: calc(1rem + (100vw - 2rem) * 9 / 16 - 0.6rem);
    bottom: auto;
  }

  .tp-modal__deco {
    display: none; /* prioridad al bono/monto en el poco alto disponible */
  }

  /* Overrides propios de mobile: los aumentos de +50% pensados para
     pantalla grande (ver reglas base más arriba) no tenían tope acá,
     así que la pastilla se partía en 3 líneas y el borde blanco del
     monto quedaba demasiado grueso, tapando "tu casa propia!". */
  .tp-modal__bono-tag {
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
  }

  .tp-modal__bono strong {
    font-size: 1.7rem;
    -webkit-text-stroke: 0.16rem var(--imbo-white);
  }

  /* En mobile foto y burbuja se apilan (no van lado a lado), así que
     ya no necesita compartir alto con la foto — se resetea todo a su
     tamaño natural de contenido, y la burbuja vuelve a ocupar el
     ancho completo de su columna (en vez de 78%, angosto solo tiene
     sentido al lado de la foto). */
  .tp-modal__bubble-col {
    height: auto;
  }

  /* Bug real: .tp-modal__bono es position:absolute anclado a la
     costura foto/burbuja (ver su "top" arriba), y su contenido (tag +
     monto apilados) mide ~3.67rem de alto — bastante más que el hueco
     de 0.75rem (gap) + 1rem (padding-top viejo) que había antes de la
     burbuja, así que el monto terminaba superpuesto sobre los logos.
     padding-top ampliado a 2.75rem para dejarle lugar real al bono
     flotante antes de que arranque el contenido de la burbuja. */
  .tp-modal__bubble {
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 2.75rem 1.25rem 1rem;
  }

  .tp-modal__bubble h2 {
    font-size: 1.05rem;
  }

  /* Los +25%/+50% de los logos (ver reglas base) tampoco tenían tope
     en mobile — acá vuelven a un tamaño acorde a la burbuja angosta. */
  .tp-modal__logo-imbo {
    height: 1.3rem;
  }

  .tp-modal__logo-tp {
    height: 1.7rem;
  }

  .tp-modal__form {
    padding: 1rem 1.15rem 1.25rem;
    gap: 0.5rem;
  }

  /* .form-row (global) ya es 2 columnas por defecto y solo apila a 1
     a los 600px — acá se mantiene explícitamente en 2 aunque el modal
     ya esté en el layout de pantalla completa, para no duplicar el
     alto de los 4 campos cortos (Nombre/Celular/Ciudad/Email). */
  .tp-modal .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .tp-modal__form .form-control {
    padding: 0.5rem 0.75rem;
  }

  .tp-modal__form textarea.form-control {
    height: 2.75rem;
  }

  .tp-modal__counter {
    display: none; /* detalle secundario, no aporta en tan poco alto */
  }

  .tp-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .tp-modal__submit {
    width: 100%;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA/SALIDA AL HACER SCROLL
   El JS alterna .is-visible según el elemento entra o sale del
   viewport (no es de una sola vez) — por eso las transiciones van
   en ambos sentidos, "entradas y salidas". Cada bloque usa una
   dirección distinta según su posición real en el layout (lo que
   está a la izquierda entra desde la izquierda, etc.), no todo el
   mismo "fade hacia arriba".
══════════════════════════════════════════════════════ */
.tp-reveal {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

.tp-reveal--up    { transform: translateY(2.75rem); }
.tp-reveal--left  { transform: translateX(-4rem); }
.tp-reveal--right { transform: translateX(4rem); }
.tp-reveal--scale { transform: scale(0.86); }

.tp-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Pequeño escalonado dentro de una misma fila de tarjetas */
.tp-reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.tp-reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.tp-reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }

/* ══════════════════════════════════════════════════════
   PANTALLAS GRANDES (≥1024px): red de seguridad anti-recorte
   Estas 3 secciones usan height:100svh + overflow:hidden fijo (patrón
   "una pantalla por sección"). Medido con Playwright (numérico, sin
   capturas): en el rango 1024-1280px de la estructura vieja el
   contenido real (la mano, el QR, las fotos de testimonios) se
   recortaba, no solo se veía apretado. Con el font-size fluido de
   base.css el contenido ahora también crece al agrandar la pantalla
   — el mismo riesgo de recorte puede repetirse en cualquier ancho
   grande, no solo en ese tramo viejo, así que el overflow visible
   queda permanente de 1024px hacia arriba (antes topaba en 1280px).
   El height se mantiene igual (no se toca, para no romper los hijos
   con alto en % que dependen de un alto definido —.tp-entidad__photo
   usa height:88.5% de .tp-entidad, por ejemplo), así que si el
   contenido no entra se desborda visible hacia abajo en vez de
   perderse en silencio.
   Este bloque va al final del archivo a propósito: con la misma
   especificidad que las reglas base de .tp-hero/.tp-entidad/
   .tp-testimonios, el orden de aparición decide — puesto antes de
   esas reglas, quedaba pisado por ellas. ══════════════════════════ */
@media (min-width: 64em) {
  .tp-hero,
  .tp-entidad,
  .tp-testimonios {
    overflow: visible;
  }
}