/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
  /* Compensa la altura del navbar fijo al hacer scroll por anclas */
  scroll-padding-top: 90px;
}

body {
  font-family: var(--body-family);
  background: #ffffff;
}

/* ─── Logo links — el <a> que envuelve el logo no debe
   romper el layout flex del contenedor padre ─────────────── */
.nav-inner > a,
.mobile-header > a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ─── Hero Wrapper ───────────────────────────────────────── */
/* 8px padding en top y lados, 0 abajo → borde blanco visible */
.hero-wrapper {
  padding: 8px 8px 0 8px;
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100vh - 8px);
  padding-bottom: 60px;
  background: url('../assets/hero-fondo.webp') center / cover no-repeat;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Overlay verde */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 90, 23, 0.9);
}

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

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  padding: 10px 24px;
  display: flex;
  justify-content: center;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(0, 21, 2, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 37px 18px 18px 37px;
  padding: 0 10px 0 0;
  width: 772px;
  overflow: hidden;
  box-shadow:
    0px 1px 3px rgba(166, 166, 166, 0.05),
    0px 5px 5px rgba(166, 166, 166, 0.04),
    0px 11px 6px rgba(166, 166, 166, 0.03),
    0px 19px 8px rgba(166, 166, 166, 0.01),
    0px 29px 8px rgba(166, 166, 166, 0);
}

.nav-logo {
  width: 62px;
  height: 62px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.nav-links a {
  color: var(--fondo);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.btn-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--amber);
  border-radius: 8px;
  padding: 6px 6px 6px 28px;
  color: var(--texto-negro);
  font-family: var(--body-family);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0px 1px 1px rgba(158, 158, 158, 0.05),
    0px 3px 3px rgba(158, 158, 158, 0.04),
    0px 6px 3px rgba(158, 158, 158, 0.03),
    0px 10px 3px rgba(158, 158, 158, 0.01);
}

.btn-cta img {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}


/* ─── Hero Content ───────────────────────────────────────── */
.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  text-align: center;
  max-width: 1400px;
  width: 100%;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-content h1 {
  font-family: var(--h1-family);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  color: var(--fondo);
  line-height: 1.05;
  max-width: 1328px;
}

.highlight {
  color: var(--amber);
}

.hero-content p {
  font-size: var(--big-size);
  font-weight: var(--p-weight-medium);
  color: var(--fondo);
  line-height: 1.4;
  max-width: 812px;
}

/* ─── Conoce más button ──────────────────────────────────── */
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fondo);
  border-radius: 10px;
  padding: 6px;
  width: 230px;
  height: 51px;
  color: var(--texto-negro);
  font-family: var(--body-family);
  font-size: 18px;
  font-weight: 700;
  transition: filter 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0px 1px 1px rgba(0, 0, 0, 0.1),
    0px 3px 2px rgba(0, 0, 0, 0.09),
    0px 6px 2px rgba(0, 0, 0, 0.05),
    0px 11px 2px rgba(0, 0, 0, 0.01),
    0px 17px 3px rgba(0, 0, 0, 0);
}

.btn-secondary span {
  flex: 1;
  text-align: center;
}

.btn-secondary img {
  width: 39px;
  height: 39px;
  border-radius: 4px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   SERVICIOS
═══════════════════════════════════════════════════════════ */

.servicios {
  background: var(--fondo);
  border-radius: 65px 65px 0 0;
  padding: 70px 160px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: -60px;
  box-shadow:
    0px -10px 11px rgba(0, 0, 0, 0.05),
    0px -41px 21px rgba(0, 0, 0, 0.04),
    0px -92px 28px rgba(0, 0, 0, 0.03),
    0px -163px 33px rgba(0, 0, 0, 0.01),
    0px -255px 36px rgba(0, 0, 0, 0);
}

/* ─── Intro ──────────────────────────────────────────────── */
.servicios-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 864px;
}

.servicios-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.etiqueta {
  color: var(--mini-titulo);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.servicios-titulo h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: var(--texto-negro);
  text-align: center;
  line-height: 1.05;
}

.servicios-descripcion {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  text-align: center;
  line-height: 1.65;
}

/* ─── Cards grid ─────────────────────────────────────────── */
.servicios-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.cards-fila {
  display: flex;
  gap: 32px;
  width: 100%;
}

.card {
  flex: 1;
  position: relative;
  background-color: var(--titulos);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  padding: 30px 35px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-shadow:
    0px 1px 4px rgba(0, 0, 0, 0.2),
    0px 5px 7px rgba(0, 0, 0, 0.17),
    0px 12px 9px rgba(0, 0, 0, 0.1),
    0px 18px 11px rgba(0, 0, 0, 0.03);
}

/* Overlay oscuro sobre la imagen de fondo */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 21, 2, 0.85);
  z-index: 0;
}

.card h3,
.card .card-body {
  position: relative;
  z-index: 1;
}

.card h3 {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fondo);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-body p {
  font-size: 16px;
  font-weight: 500;
  color: var(--fondo);
  line-height: 1.55;
}

.card-body ul {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-body li {
  font-size: 16px;
  font-weight: 400;
  color: var(--fondo);
  line-height: 24px;
}

/* ─── Servicios adicionales ──────────────────────────────── */
/* align-self:stretch anula el centrado del flex padre,
   los márgenes negativos extienden hasta 8px del borde de página */
.servicios-extra {
  background: var(--verde);
  border-radius: 16px;
  padding: 40px 152px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
  margin-left: -152px;
  margin-right: -152px;
  box-shadow:
    0px 2px 2px rgba(0, 0, 0, 0.1),
    0px 7px 4px rgba(0, 0, 0, 0.09),
    0px 16px 5px rgba(0, 0, 0, 0.05),
    0px 28px 6px rgba(0, 0, 0, 0.01),
    0px 44px 6px rgba(0, 0, 0, 0);
}

.extra-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--fondo);
}

.extra-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.extra-fila {
  display: flex;
  gap: 20px;
}

.extra-item {
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0 14px 16px;
  border-radius: 4px;
}

.extra-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.extra-nombre {
  font-size: 16px;
  font-weight: 700;
  color: var(--fondo);
  line-height: 1.3;
}

.extra-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--fondo);
  line-height: 20px;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   NUESTROS PLANES
═══════════════════════════════════════════════════════════ */

.planes {
  background: var(--fondo);
  padding: 70px 160px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.planes-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.planes-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.planes-intro-wrap h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: var(--texto-negro);
  text-align: center;
}

.br-desktop {
  display: block;
}

.form-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.form-mensaje {
  font-family: var(--body-family);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 480px;
  line-height: 1.4;
}

.form-mensaje--success { color: #2ecc71; }
.form-mensaje--error   { color: #ff6b6b; }

@media (max-width: 1024px) {
  .br-desktop { display: none; }
}

.planes-descripcion {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  text-align: center;
}

.planes-grid {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.plan-card {
  flex: 1;
  background: #c3e2c7;
  border-radius: 12px;
  padding: 30px 0 15px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  box-shadow:
    -1px 1px 2px rgba(0, 0, 0, 0.05),
    -3px 3px 5px rgba(0, 0, 0, 0.04),
    -7px 7px 6px rgba(0, 0, 0, 0.03),
    -13px 13px 7px rgba(0, 0, 0, 0.01),
    -20px 20px 8px rgba(0, 0, 0, 0);
}

.plan-card-top {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-nombre-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.plan-nombre {
  font-family: 'Lora', serif;
  font-size: 28.43px;
  font-weight: 700;
  color: var(--texto-negro);
  line-height: 1.1;
}

.plan-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  line-height: 24px;
}

.plan-tags {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}


.plan-tag {
  background: var(--fondo);
  border-radius: 4px;
  padding: 4px 12px;
  font-family: var(--body-family);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--verde);
  box-shadow:
    -1px 1px 3px rgba(0, 0, 0, 0.05),
    -4px 3px 5px rgba(0, 0, 0, 0.04),
    -9px 6px 7px rgba(0, 0, 0, 0.03),
    -16px 11px 8px rgba(0, 0, 0, 0.01),
    -25px 18px 8px rgba(0, 0, 0, 0);
}

.plan-badge {
  background: var(--amber);
  border-radius: 4px;
  padding: 4px 12px;
  font-family: var(--body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-negro);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    -1px 1px 3px rgba(0, 0, 0, 0.05),
    -4px 3px 5px rgba(0, 0, 0, 0.04),
    -9px 6px 7px rgba(0, 0, 0, 0.03),
    -16px 11px 8px rgba(0, 0, 0, 0.01),
    -25px 18px 8px rgba(0, 0, 0, 0);
}

.plan-ver {
  border-top: 1px solid var(--fondo);
  border-bottom: 1px solid var(--fondo);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  font-family: var(--body-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--texto-negro);
  cursor: pointer;
  user-select: none;
}

.plan-ver-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.plan-ver-toggle svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.plan-card--open .plan-ver-toggle svg {
  transform: rotate(180deg);
}

.plan-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-card--open .plan-items {
  max-height: 600px;
  margin-top: 16px;
}

.plan-incluye-label {
  display: none;
}

.plan-items-subtitle {
  font-family: var(--body-family);
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  margin-bottom: 4px;
}

.plan-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}

.plan-item svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.plan-item span {
  font-family: var(--body-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--texto-negro);
  line-height: 24px;
}

.plan-accion {
  padding: 0 14px;
}

.btn-plan {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--verde);
  border-radius: 8px 16px 16px 8px;
  padding: 8px 8px 8px 16px;
  width: 100%;
  font-family: var(--body-family);
  font-size: var(--big-size);
  font-weight: 700;
  color: var(--fondo);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0px 1px 1px rgba(0, 0, 0, 0.10),
    0px 3px 3px rgba(0, 0, 0, 0.09),
    0px 6px 4px rgba(0, 0, 0, 0.05),
    0px 11px 4px rgba(0, 0, 0, 0.01),
    0px 17px 5px rgba(0, 0, 0, 0);
}

.btn-plan--amber {
  background: var(--amber);
  color: var(--texto-negro);
}

/* ═══════════════════════════════════════════════════════════
   ¿POR QUÉ ALPLAME?
═══════════════════════════════════════════════════════════ */

.porque {
  background: var(--fondo);
  padding: 70px 160px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* ─── Columna izquierda ──────────────────────────────────── */
.porque-contenido {
  display: flex;
  flex-direction: column;
  gap: 38px;
  flex: 1;
}

.porque-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.porque-intro .etiqueta {
  text-align: left;
}

.porque-intro h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  line-height: 1.05;
  color: var(--texto-negro);
}

.porque-subtitulo {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  line-height: 1.5;
  margin-top: 12px;
}

/* ─── Items ──────────────────────────────────────────────── */
.porque-items {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 680px;
}

.porque-item {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
}

.porque-item img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.item-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-negro);
  margin-bottom: 6px;
}

.item-desc {
  font-size: 16px;
  font-weight: 400;
  color: var(--texto-negro);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   CÓMO TRABAJAMOS — PASOS
═══════════════════════════════════════════════════════════ */

.pasos-wrapper {
  background: var(--fondo);
  padding: 0 8px 70px;
}

.pasos {
  position: relative;
  background: url('../assets/pasos-fondo.webp') center / cover no-repeat;
  border-radius: 16px;
  padding: 50px 152px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
  box-shadow:
    0px 2px 2px rgba(0, 0, 0, 0.1),
    0px 7px 4px rgba(0, 0, 0, 0.09),
    0px 16px 5px rgba(0, 0, 0, 0.05),
    0px 28px 6px rgba(0, 0, 0, 0.01),
    0px 44px 6px rgba(0, 0, 0, 0);
}

/* Overlay verde sobre la imagen */
.pasos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 90, 23, 0.95);
}

.pasos > * {
  position: relative;
  z-index: 1;
}

/* ─── Intro ──────────────────────────────────────────────── */
.pasos-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pasos-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.etiqueta-amber {
  color: var(--amber);
  font-size: 14px;
  font-weight: 700;
}

.pasos-titulo h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: var(--fondo);
  line-height: 1.05;
}

.pasos-subtitulo {
  font-size: 16px;
  font-weight: 500;
  color: var(--fondo);
  line-height: 1.55;
}

/* ─── Grid de pasos ──────────────────────────────────────── */
.pasos-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--fondo);
  border-radius: 8px;
  padding: 0 18px;
  height: 190px;
}

.paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px;
  overflow: hidden;
}

.paso-numero {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: rgba(248, 248, 248, 0.3);
  line-height: 0.75;
}

.paso-contenido {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paso-contenido h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fondo);
}

.paso-contenido p {
  font-size: 16px;
  font-weight: 400;
  color: var(--fondo);
  line-height: 24px;
}

/* Separadores verticales entre pasos */
.paso-sep {
  width: 1px;
  height: 100%;
  background: var(--fondo);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   NUESTRA HISTORIA
═══════════════════════════════════════════════════════════ */

.historia {
  background: var(--fondo);
  padding: 70px 160px;
  display: grid;
  grid-template-columns: 683px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "foto titulo"
    "foto contenido";
  column-gap: 40px;
  row-gap: 16px;
  align-items: start;
}

/* ─── Foto izquierda ─────────────────────────────────────── */
.historia-foto-wrap {
  grid-area: foto;
  width: 683px;
  height: 601px;
  position: relative;
}

.historia-foto {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  background-color: var(--principal-600);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.historia-stats {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  background: rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.stat-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-numero {
  font-family: 'Lora', serif;
  font-size: var(--h3-size);
  font-weight: 700;
  color: var(--fondo);
  line-height: 1;
}

.stat-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--fondo);
  text-align: center;
}

.stat-badges {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.badge {
  background: var(--fondo);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-negro);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.1), 0px 3px 3px rgba(0,0,0,0.09);
}

/* ─── Contenido derecha ──────────────────────────────────── */
.historia-contenido {
  grid-area: contenido;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.historia-titulo {
  grid-area: titulo;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.historia-titulo .etiqueta {
  text-align: left;
}

.historia-titulo h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: var(--texto-negro);
  line-height: 1.05;
}

.historia-parrafos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.historia-parrafos p {
  font-size: 16px;
  font-weight: 400;
  color: var(--texto-negro);
  line-height: 1.7;
}

/* ─── Card fundadora ─────────────────────────────────────── */
.historia-fundadora {
  background: #e0e9e2;
  border-radius: 16px;
  padding: 22px 28px 22px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow:
    0px 1px 3px rgba(0,0,0,0.1),
    0px 5px 5px rgba(0,0,0,0.09),
    0px 12px 7px rgba(0,0,0,0.05);
}

.fundadora-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fundadora-nombre-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fundadora-nombre {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-negro);
}

.fundadora-rol {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 20px;
}

.fundadora-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  line-height: 24px;
}

/* ─── Botón Contáctanos ──────────────────────────────────── */
.btn-contacto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--verde);
  border-radius: 8px 16px 16px 8px;
  padding: 8px 8px 8px 16px;
  width: 233px;
  color: var(--fondo);
  font-size: 18px;
  font-weight: 700;
  transition: filter 0.2s, transform 0.2s ease;
  box-shadow:
    0px 1px 1px rgba(0,0,0,0.1),
    0px 3px 3px rgba(0,0,0,0.09),
    0px 6px 4px rgba(0,0,0,0.05);
}

.btn-contacto img {
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   TRANSPARENCIA TOTAL
═══════════════════════════════════════════════════════════ */

.transparencia {
  background: var(--fondo);
  padding: 70px 160px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* ─── Intro ──────────────────────────────────────────────── */
.transparencia-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.transparencia-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.transparencia-titulo h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: var(--texto-negro);
  line-height: 1.05;
  text-align: center;
}

.transparencia-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  line-height: 1.6;
  text-align: center;
}

/* ─── Cards ──────────────────────────────────────────────── */
.transparencia-cards {
  display: flex;
  flex-direction: row;
  gap: 32px;
  max-width: 1326px;
  width: 100%;
}

.t-card {
  flex: 1;
  position: relative;
  background-color: var(--titulos);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  padding: 44px 22px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.05),
    0px 4px 4px rgba(0, 0, 0, 0.04),
    0px 9px 5px rgba(0, 0, 0, 0.03);
}

.t-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 21, 2, 0.85);
}

.t-card > * {
  position: relative;
  z-index: 1;
}

.t-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.t-card-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.t-card-texto h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fondo);
}

.t-card-texto p {
  font-size: 16px;
  font-weight: 400;
  color: var(--fondo);
  line-height: 24px;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIOS
═══════════════════════════════════════════════════════════ */

.testimonios {
  background: var(--fondo);
  padding: 70px 160px;
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: center;
}

.testimonios-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.testimonios-intro h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-size);
  font-weight: 700;
  color: var(--texto-negro);
  line-height: 1.05;
}

.testimonios-desc {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  line-height: 1.4;
  margin-top: 12px;
}

/* ─── Slider ─────────────────────────────────────────────── */
.testimonios-viewport {
  width: 100%;
  overflow: hidden;
}

.testimonios-track {
  display: flex;
  gap: 32px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.testimonio-card {
  flex: 0 0 calc((100% - 64px) / 3);
  background: #e0e9e2;
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.05),
    0px 4px 4px rgba(0, 0, 0, 0.04),
    0px 9px 5px rgba(0, 0, 0, 0.03);
}

.estrellas {
  color: var(--amber);
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1;
}

.testimonio-cita {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-negro);
  line-height: 24px;
  flex: 1;
}

.testimonio-autor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.autor-nombre {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto-negro);
}

.autor-cargo {
  font-size: 14px;
  font-weight: 400;
  color: var(--texto-negro);
  line-height: 20px;
}

/* ─── Flechas de navegación ──────────────────────────────── */
.testimonios-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.btn-nav {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.15s;
}


.btn-nav:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.btn-nav img {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.08));
}

/* ─── Contáctanos ────────────────────────────────────────── */
.contactanos {
  position: relative;
  background: #00400e;
  border-radius: 65px 65px 0 0;
  padding: 70px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* imagen al 10% de opacidad sobre el fondo verde sólido */
.contactanos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/contactanos.webp') center / cover no-repeat;
  opacity: 0.10;
  border-radius: inherit;
}

.contactanos-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: 100%;
}

.contactanos-titulo {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.01);
  border-radius: 8px;
  padding: 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 960px;
  width: 100%;
}

.contactanos-titulo-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  align-self: stretch;
}

.contactanos-titulo h2 {
  color: var(--fondo);
  font-family: var(--h1-family);
  font-size: var(--h2-size);
  font-weight: 700;
  line-height: 1.05;
}

.contactanos-subtitulo {
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  margin-top: 12px;
}

.contactanos-accion {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
}

.contactanos-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  gap: 16px 15px;
}

.form-input-wrap {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 14px;
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  transition: box-shadow 0.2s ease;
  box-shadow:
    -3px 1px 8px 0px rgba(0, 0, 0, 0.1),
    -14px 6px 15px 0px rgba(0, 0, 0, 0.09),
    -31px 13px 20px 0px rgba(0, 0, 0, 0.05),
    -56px 22px 24px 0px rgba(0, 0, 0, 0.01),
    -87px 35px 26px 0px rgba(0, 0, 0, 0);
}

.form-input-wrap img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.form-input-wrap:focus-within {
  box-shadow:
    -3px 1px 8px 0px rgba(0, 0, 0, 0.1),
    -14px 6px 15px 0px rgba(0, 0, 0, 0.09),
    -31px 13px 20px 0px rgba(0, 0, 0, 0.05),
    -56px 22px 24px 0px rgba(0, 0, 0, 0.01),
    -87px 35px 26px 0px rgba(0, 0, 0, 0),
    inset 0 0 0 2px var(--amber);
}

.form-input-wrap input {
  border: none;
  outline: none;
  font-family: var(--body-family);
  font-size: var(--p-size);
  font-weight: var(--p-weight-medium);
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  background: transparent;
}

.email-input {
  background: #ffffff;
  border-radius: 8px;
  padding: 14px 14px;
  width: 335px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  box-shadow:
    -3px 1px 8px 0px rgba(0, 0, 0, 0.1),
    -14px 6px 15px 0px rgba(0, 0, 0, 0.09),
    -31px 13px 20px 0px rgba(0, 0, 0, 0.05),
    -56px 22px 24px 0px rgba(0, 0, 0, 0.01),
    -87px 35px 26px 0px rgba(0, 0, 0, 0);
}

.email-input:focus-within {
  box-shadow:
    -3px 1px 8px 0px rgba(0, 0, 0, 0.1),
    -14px 6px 15px 0px rgba(0, 0, 0, 0.09),
    -31px 13px 20px 0px rgba(0, 0, 0, 0.05),
    -56px 22px 24px 0px rgba(0, 0, 0, 0.01),
    -87px 35px 26px 0px rgba(0, 0, 0, 0),
    inset 0 0 0 2px var(--amber);
}

.email-input input {
  border: none;
  outline: none;
  font-family: var(--body-family);
  font-size: var(--p-size);
  font-weight: var(--p-weight-medium);
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  background: transparent;
}

.btn-consulta {
  background: var(--verde);
  border: none;
  border-radius: 8px 16px 16px 8px;
  padding: 10px 8px 10px 16px;
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: var(--big-size);
  font-weight: var(--p-weight-bold);
  transition: filter 0.2s, transform 0.2s ease;
  box-shadow:
    1px 1px 1px 0px rgba(0, 0, 0, 0.05),
    3px 3px 2px 0px rgba(0, 0, 0, 0.04),
    7px 6px 4px 0px rgba(0, 0, 0, 0.03),
    13px 10px 4px 0px rgba(0, 0, 0, 0.01),
    20px 16px 4px 0px rgba(0, 0, 0, 0);
}

.btn-consulta img {
  width: 32px;
  height: 32px;
}

.contactanos-info {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.info-top-row {
  display: contents;
}

.info-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  transition: transform 0.2s ease;
  text-decoration: none;
}

.info-item img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.info-item span {
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  background: #002405;
  padding: 20px 160px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.footer-marca {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.footer-logo {
  width: 68px;
  height: 71px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-nombre {
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.footer-tagline {
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: 12.8px;
  font-weight: 400;
  line-height: 1.3;
}

.footer-copy {
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: 12.8px;
  font-weight: 400;
  text-align: center;
  flex: 1;
}

.footer-credit {
  color: var(--fondo);
  font-family: var(--body-family);
  font-size: 12.8px;
  font-weight: 400;
  text-align: right;
  flex: 1;
  text-decoration: none;
}

/* Mobile-only elements — hidden on desktop */
.mobile-header  { display: none; }
.mobile-overlay { display: none; }
.mobile-drawer  { display: none; }

/* ─── Badge derecha ──────────────────────────────────────── */
.porque-badge {
  width: 507px;
  height: 530px;
  object-fit: cover;
  flex-shrink: 0;
  filter:
    drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.15))
    drop-shadow(7px 8px 11px rgba(0, 0, 0, 0.13))
    drop-shadow(17px 19px 15px rgba(0, 0, 0, 0.08))
    drop-shadow(29px 33px 18px rgba(0, 0, 0, 0.02))
    drop-shadow(46px 52px 19px rgba(0, 0, 0, 0));
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — > 1920px  (2K, 4K y superiores)
   Escala proporcional con vw. Fórmula: valor_px / 1920 × 100.
   Caps al doble del valor base (≈ valor a 3840px / 4K).
═══════════════════════════════════════════════════════════ */
@media (min-width: 1921px) {

  /* ── Tipografía proporcional ──────────────────────────── */
  :root {
    --h1-size: clamp(89.76px, 4.675vw, 180px);
    --h2-size: clamp(67.34px, 3.507vw, 135px);
    --h3-size: clamp(50.52px, 2.631vw, 101px);
  }

  /* ── Navbar ───────────────────────────────────────────── */
  .nav-inner {
    width: clamp(772px, 40.2vw, 1100px);
  }

  /* ── Hero content max-widths ──────────────────────────── */
  .hero-content {
    max-width: clamp(1400px, 72.9vw, 1920px);
  }

  .hero-content h1 {
    max-width: clamp(1328px, 69.2vw, 1800px);
  }

  .hero-content p {
    max-width: clamp(812px, 42.3vw, 1400px);
  }

  /* ── Padding horizontal de secciones (160px → 8.333vw) ── */
  .servicios,
  .porque,
  .historia,
  .transparencia,
  .testimonios,
  .planes {
    padding-left:  clamp(160px, 8.333vw, 320px);
    padding-right: clamp(160px, 8.333vw, 320px);
  }

  /* Pasos: 152px → 7.917vw */
  .pasos {
    padding-left:  clamp(152px, 7.917vw, 304px);
    padding-right: clamp(152px, 7.917vw, 304px);
  }

  /*
   * Servicios-extra: sus márgenes negativos siguen al padding
   * del contenedor → −(8.333vw − 8px hero-wrapper)
   */
  .servicios-extra {
    margin-left:  calc(-8.333vw + 8px);
    margin-right: calc(-8.333vw + 8px);
    padding-left:  calc(8.333vw - 8px);
    padding-right: calc(8.333vw - 8px);
  }

  /* ── Historia: columna foto proporcional ──────────────── */
  .historia {
    grid-template-columns: clamp(683px, 35.57vw, 1366px) 1fr;
  }

  .historia-foto-wrap {
    width:  clamp(683px, 35.57vw, 1366px);
    height: clamp(601px, 31.30vw, 1202px);
  }

  /* ── Transparencia cards max-width ────────────────────── */
  .transparencia-cards {
    max-width: clamp(1326px, 69.06vw, 2652px);
  }

  /* ── Contactanos ──────────────────────────────────────── */
  .contactanos-titulo {
    max-width: clamp(960px, 50vw, 1600px);
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer {
    padding-left:  clamp(160px, 8.333vw, 320px);
    padding-right: clamp(160px, 8.333vw, 320px);
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Fluid  1441px – 1919px
   Interpola tipografía y padding entre los dos breakpoints
   extremos para evitar el salto brusco al cruzar 1440px.

   Fórmulas (interpolación lineal):
     h1: 61.04px → 89.76px  →  5.983vw − 25.12px
     h2: 48.83px → 67.34px  →  3.856vw − 6.70px
     h3: 39.06px → 50.52px  →  2.388vw + 4.67px
     px-sección: 64px → 160px  →  20vw − 224px
═══════════════════════════════════════════════════════════ */
@media (min-width: 1441px) and (max-width: 1919px) {

  /* ── Tipografía fluida ────────────────────────────────── */
  :root {
    --h1-size: clamp(61.04px, calc(5.983vw - 25.12px), 89.76px);
    --h2-size: clamp(48.83px, calc(3.856vw - 6.70px),  67.34px);
    --h3-size: clamp(39.06px, calc(2.388vw + 4.67px),  50.52px);
  }

  /* ── Padding horizontal de secciones (64px → 160px) ──── */
  .servicios,
  .porque,
  .historia,
  .transparencia,
  .testimonios {
    padding-left:  clamp(64px, calc(20vw - 224px), 160px);
    padding-right: clamp(64px, calc(20vw - 224px), 160px);
  }

  /* Pasos: 60px → 152px */
  .pasos {
    padding-left:  clamp(60px, calc(19.17vw - 216px), 152px);
    padding-right: clamp(60px, calc(19.17vw - 216px), 152px);
  }

  /*
   * Servicios-extra: sus márgenes negativos deben seguir al
   * padding de servicios para mantener 8px desde el borde.
   * extra-margin = -(servicios-px − 8px hero-wrapper)
   *              = −(20vw − 224 − 8) = −20vw + 232px
   */
  .servicios-extra {
    margin-left:  clamp(-152px, calc(-20vw + 232px), -56px);
    margin-right: clamp(-152px, calc(-20vw + 232px), -56px);
    padding-left:  clamp(56px, calc(20vw - 232px), 152px);
    padding-right: clamp(56px, calc(20vw - 232px), 152px);
  }

  /* ── Nav-inner ancho fluido (704px → 772px) ───────────── */
  .nav-inner {
    width: clamp(704px, calc(14.17vw + 500px), 772px);
  }

  /* ── Footer (64px → 160px) ───────────────────────────── */
  .footer {
    padding-left:  clamp(64px, calc(20vw - 224px), 160px);
    padding-right: clamp(64px, calc(20vw - 224px), 160px);
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 1440px
═══════════════════════════════════════════════════════════ */
@media (max-width: 1440px) {

  /* ── Tipografía ───────────────────────────────────────── */
  :root {
    --h1-size: 61.04px;
    --h2-size: 48.83px;
  }

  /* ── Wrapper / Hero ───────────────────────────────────── */
  .hero-wrapper {
    padding: 4px 4px 0 4px;
  }

  .hero {
    min-height: calc(100vh - 4px);
  }

  /* ── Navbar ───────────────────────────────────────────── */
  .nav-inner {
    width: 704px;
  }

  .nav-logo {
    width: 57px;
    height: 57px;
  }

  /* ── Hero content ─────────────────────────────────────── */
  .hero-content {
    max-width: 988px;
  }

  .hero-content p {
    font-size: var(--p-size);
    max-width: 534px;
  }

  .btn-secondary {
    width: 192px;
    height: 46px;
  }

  .btn-secondary img {
    width: 38px;
    height: 38px;
  }

  /* ── Servicios ────────────────────────────────────────── */
  .servicios {
    padding: 60px 64px 0;
    gap: 35px;
  }

  .servicios-intro {
    gap: 12px;
  }

  .card {
    height: auto;
    min-height: 310px;
  }

  /* margin = sección-padding − wrapper-padding = 64 − 4 = 60 */
  .servicios-extra {
    margin-left: -60px;
    margin-right: -60px;
    padding: 40px 60px;
  }

  /* ── ¿Por qué ALPLAME? ────────────────────────────────── */
  .porque {
    padding: 60px 64px;
  }

  .porque-badge {
    width: 416px;
    height: 435px;
  }

  /* ── Cómo trabajamos ──────────────────────────────────── */
  .pasos-wrapper {
    padding: 0 4px 70px;
  }

  .pasos {
    padding: 40px 60px;
  }

  /* ── Nuestra Historia ─────────────────────────────────── */
  .historia {
    padding: 60px 64px;
    grid-template-columns: 641px 1fr;
  }

  .historia-foto-wrap {
    width: 641px;
    height: 564px;
  }

  /* ── Transparencia ────────────────────────────────────── */
  .transparencia {
    padding: 60px 64px;
  }

  .t-card img {
    width: 53px;
    height: 53px;
  }

  /* ── Testimonios ──────────────────────────────────────── */
  .testimonios {
    padding: 60px 64px;
  }

  /* ── Contáctanos ──────────────────────────────────────── */
  .contactanos {
    padding: 70px 64px;
  }

  .contactanos-subtitulo {
    font-size: var(--p-size);
  }

  .btn-consulta {
    font-size: var(--p-size);
  }

  .form-input-wrap {
    padding: 13px 14px;
  }

  .email-input {
    width: 304px;
  }

  /* ── Nuestra Historia — card fundadora ───────────────── */
  .historia-fundadora {
    padding: 22px 28px;
  }

  .btn-contacto {
    width: 197px;
  }

  /* ── Contáctanos — título ─────────────────────────────── */
  /* El h2 de contactanos mantiene el tamaño 1920px (no reduce) */
  .contactanos-titulo h2 {
    font-size: 67.34px;
  }

  /* ── Planes ───────────────────────────────────────────── */
  .planes {
    padding: 60px 64px;
  }

  .plan-nombre {
    font-size: 25px;
  }

  .plan-ver {
    padding: 12px 14px;
  }

  .plan-item {
    padding: 3px 0;
  }

  .plan-card:not(.plan-card--infiniti) .plan-tags {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
  }

  /* ── Footer ───────────────────────────────────────────── */

  .footer {
    padding: 40px 64px;
  }

  .footer-logo {
    width: 42px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Planes  1271px – 1680px
   Las 4 tarjetas permanecen en fila. Las etiquetas de todas
   las cards pasan a 2 filas al mismo tiempo (sincronizadas
   con Plan Infiniti, que tiene las etiquetas más largas)
   para que todas las cards mantengan el mismo alto.
═══════════════════════════════════════════════════════════ */
@media (min-width: 1271px) and (max-width: 1680px) {

  .plan-tags {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Planes  1271px – 1326px
   En este rango Plan Infiniti tiene que hacer wrap en el
   nombre porque choca con el badge. Se fuerza min-height
   equivalente a 2 líneas en todos los nombres para que
   todas las cards mantengan el mismo alto.
═══════════════════════════════════════════════════════════ */
@media (min-width: 1271px) and (max-width: 1326px) {

  .plan-nombre {
    min-height: 2.2em;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Planes  1025px – 1270px
   2 × 2 con cards de ancho fijo (391px) centradas.
   El bloque tablet (768-1024px) maneja su propio rango.
═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1270px) {

  .planes-grid {
    display: grid;
    grid-template-columns: repeat(2, 491px);
    justify-content: center;
    gap: 8px;
    align-items: start;
  }

  .plan-card {
    flex: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Intermedio  1025px – 1343px
   Corrige las tarjetas de servicio que recortan texto y los
   números de pasos que desbordan el recuadro a estos anchos.
═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1343px) {

  /* ── Cards de servicios: grid 2 columnas ─────────────── */
  .servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cards-fila {
    display: contents;
  }

  .card {
    height: auto;
    min-height: 240px;
  }

  /* ── Pasos: altura automática para que los números no
     desborden el borde del recuadro ─────────────────────── */
  .pasos-grid {
    height: auto;
    min-height: 190px;
    align-items: flex-start;
    padding: 20px 18px;
  }

  .paso {
    overflow: visible;
    padding: 16px 18px;
  }

  .paso-sep {
    width: 1px;
    height: auto;
    align-self: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet  768px – 1024px
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ── Escala tipográfica ───────────────────────────────── */
  :root {
    --h1-size: 48.83px;
    --h2-size: 39.06px;
    --h3-size: 31.25px;
  }

  /* ── Hero wrapper ─────────────────────────────────────── */
  .hero-wrapper {
    padding: 8px 8px 0;
  }

  /* ── Navbar ───────────────────────────────────────────── */
  .navbar {
    padding: 10px 16px;
  }

  .nav-inner {
    width: 100%;
    max-width: 720px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-links a {
    font-size: 14px;
  }

  .btn-cta {
    font-size: 14px;
    padding: 6px 6px 6px 16px;
  }

  /* ── Hero content ─────────────────────────────────────── */
  .hero {
    min-height: 560px;
  }

  .hero-content {
    padding: 100px 32px 80px;
    align-items: center;
    text-align: center;
  }

  .hero-content h1 {
    text-align: center;
  }

  .hero-content p {
    text-align: center;
  }

  /* ── Servicios ────────────────────────────────────────── */
  .servicios {
    padding: 60px 32px;
    border-radius: 40px 40px 0 0;
    gap: 40px;
  }

  .servicios-intro {
    max-width: 100%;
    gap: 16px;
    align-items: center;
  }

  .servicios-titulo {
    align-items: center;
    gap: 4px;
  }

  .servicios-titulo h2 {
    text-align: center;
  }

  .servicios-titulo .etiqueta {
    text-align: center;
  }

  .servicios-descripcion {
    font-weight: 400;
    text-align: center;
  }

  /* Cards: grid 2 columnas */
  .servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cards-fila {
    display: contents;
  }

  .card {
    height: auto;
    min-height: 220px;
  }

  .card-body p {
    font-weight: 400;
  }

  /* ── Servicios adicionales ────────────────────────────── */
  .extra-titulo {
    text-align: center;
  }

  .extra-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .extra-nombre {
    text-align: center;
  }

  .extra-desc {
    text-align: center;
  }

  /* ── Planes: 2 columnas ───────────────────────────────── */
  .planes {
    padding: 60px 32px;
  }

  .planes-intro {
    align-items: center;
  }

  .planes-intro-wrap {
    align-items: center;
  }

  .planes-intro-wrap .etiqueta {
    text-align: center;
  }

  .planes-intro-wrap h2 {
    text-align: center;
  }

  .planes-descripcion {
    text-align: center;
  }

  .planes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: start;
  }

  .plan-card {
    flex: none;
  }

  .plan-card:not(.plan-card--infiniti) .plan-tags {
    display: flex;
    flex-wrap: wrap;
  }

  .plan-nombre {
    font-size: 22px;
  }

  /* ── ¿Por qué ALPLAME? ────────────────────────────────── */
  .porque {
    padding: 60px 32px;
    flex-direction: column;
    align-items: center;
  }

  .porque-badge {
    display: none;
  }

  .porque-contenido {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  .porque-intro {
    align-items: center;
    gap: 16px;
  }

  .porque-intro .etiqueta {
    text-align: center;
  }

  .porque-intro h2 {
    text-align: center;
  }

  .porque-subtitulo {
    font-weight: 400;
    text-align: center;
  }

  .porque-items {
    align-items: center;
  }

  .porque-item {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .porque-item > div {
    align-items: center;
  }

  .item-titulo {
    text-align: center;
  }

  .item-desc {
    text-align: center;
  }

  /* ── Nuestra Historia ─────────────────────────────────── */
  .historia {
    padding: 60px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .historia-titulo {
    order: 1;
    align-items: center;
    gap: 4px;
    width: 100%;
  }

  .historia-titulo .etiqueta {
    text-align: center;
  }

  .historia-titulo h2 {
    text-align: center;
  }

  .historia-foto-wrap {
    order: 2;
    width: 100%;
    height: 380px;
  }

  .historia-contenido {
    order: 3;
    width: 100%;
    align-items: center;
  }

  .historia-parrafos p {
    text-align: center;
  }

  .historia-fundadora {
    padding: 20px 24px;
    align-items: center;
    width: 100%;
  }

  .fundadora-info {
    align-items: center;
    width: 100%;
  }

  .fundadora-nombre-wrap {
    align-items: center;
  }

  .fundadora-nombre {
    text-align: center;
  }

  .fundadora-rol {
    text-align: center;
  }

  .fundadora-desc {
    text-align: center;
  }

  .btn-contacto {
    align-self: center;
  }

  /* ── Cómo trabajamos ──────────────────────────────────── */
  .pasos-wrapper {
    padding: 0 8px 40px;
  }

  .pasos {
    padding: 40px 32px;
  }

  .pasos-intro {
    align-items: center;
    gap: 16px;
  }

  .pasos-titulo {
    align-items: center;
    gap: 4px;
  }

  .pasos-titulo .etiqueta-amber {
    text-align: center;
  }

  .pasos-titulo h2 {
    text-align: center;
  }

  .pasos-subtitulo {
    font-weight: 400;
    text-align: center;
  }

  /* Pasos: horizontal → vertical */
  .pasos-grid {
    flex-direction: column;
    height: auto;
    border: none;
    padding: 0;
    gap: 0;
    align-items: stretch;
  }

  .paso-sep {
    width: 100%;
    height: 1px;
  }

  .paso {
    padding: 20px 0;
    overflow: visible;
    align-items: center;
  }

  .paso-contenido {
    align-items: center;
  }

  .paso-contenido h3 {
    text-align: center;
  }

  .paso-contenido p {
    text-align: center;
  }

  /* ── Transparencia ────────────────────────────────────── */
  .transparencia {
    padding: 60px 32px;
  }

  .transparencia-titulo {
    align-items: center;
    gap: 4px;
  }

  .transparencia-titulo .etiqueta {
    text-align: center;
  }

  .transparencia-titulo h2 {
    text-align: center;
  }

  .transparencia-desc {
    font-weight: 400;
    text-align: center;
  }

  /* Cards: 2 por fila */
  .transparencia-cards {
    flex-wrap: wrap;
    gap: 20px;
  }

  .t-card {
    flex: 0 0 calc(50% - 10px);
  }

  /* ── Testimonios ──────────────────────────────────────── */
  .testimonios {
    padding: 60px 32px;
  }

  .testimonios-intro {
    align-items: center;
    gap: 12px;
  }

  .testimonios-intro .etiqueta {
    text-align: center;
  }

  .testimonios-intro h2 {
    text-align: center;
  }

  .testimonios-desc {
    font-weight: 400;
    text-align: center;
  }

  .testimonios-track {
    gap: 20px;
  }

  .testimonio-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  /* ── Contáctanos ──────────────────────────────────────── */
  .contactanos {
    padding: 60px 32px;
    border-radius: 40px 40px 0 0;
    flex-direction: column;
    align-items: center;
  }

  .contactanos-titulo {
    align-items: center;
    width: 100%;
  }

  .contactanos-titulo h2 {
    font-size: 39.06px;
    text-align: center;
  }

  .contactanos-subtitulo {
    font-weight: 400;
    text-align: center;
  }

  .contactanos-accion {
    flex-direction: column;
    gap: 28px;
    width: 100%;
    align-items: center;
  }

  .contactanos-form {
    gap: 16px;
  }

  .email-input {
    width: 100%;
    max-width: 400px;
  }

  .contactanos-info {
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: center;
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer {
    padding: 24px 32px;
  }

  .footer-logo {
    width: 40px;
    height: 42px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 375px Mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Hero wrapper / hero ──────────────────────────────── */
  .hero-wrapper {
    padding: 0;
  }

  .hero {
    border-radius: 0;
    min-height: 749px;
    padding-bottom: 0;
  }

  /* ── Desktop navbar — oculto ──────────────────────────── */
  .navbar {
    display: none;
  }

  /* ── Mobile header ────────────────────────────────────── */
  .mobile-header {
    display: flex;
    position: absolute;
    top: 10px;
    left: 16px;
    right: 16px;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
  }

  .mobile-logo {
    /* Escala fluida: ~40px (≤296px) → 50.65px (375px) → 70px (≥519px) */
    width: clamp(40px, 13.5vw, 70px);
    height: auto;
    object-fit: contain;
    /* drop-shadow sigue la silueta del PNG transparente, sin caja blanca */
    filter:
      drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.30))
      drop-shadow(5px 8px 14px rgba(0, 0, 0, 0.18));
  }

  .hamburger-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* SVG del hamburger escala con el viewport igual que el logo */
  .hamburger-btn svg {
    display: block;
    width: clamp(20px, 6.93vw, 36px);
    height: clamp(14px, 4.80vw, 25px);
  }

  /* ── Hero content ─────────────────────────────────────── */
  .hero-content {
    padding: 80px 16px 60px;
    max-width: 100%;
    gap: 32px;
  }

  .hero-content h1 {
    font-size: 47.78px;
    max-width: 342px;
    line-height: 1.05;
  }

  .hero-content p {
    font-size: 16px;
    line-height: 24px;
    max-width: 344px;
  }

  /* ── Conoce más button ────────────────────────────────── */
  .btn-secondary {
    width: auto;
    height: auto;
    padding: 8px 17px;
    gap: 14px;
    border-radius: 6px;
    font-size: 16px;
    justify-content: flex-start;
  }

  .btn-secondary span {
    flex: none;
    white-space: nowrap;
  }

  .btn-secondary img {
    width: 31px;
    height: 31px;
    border-radius: 4px;
  }

  /* ── Overlay ──────────────────────────────────────────── */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
  }

  .mobile-overlay.open {
    display: block;
  }

  /* ── Drawer ───────────────────────────────────────────── */
  .mobile-drawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: #001502;
    z-index: 201;
    flex-direction: column;
    padding: 20px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .mobile-drawer.open {
    transform: translateX(0);
  }

  .drawer-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
  }

  .drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  .drawer-link {
    color: var(--fondo);
    font-family: var(--body-family);
    font-size: 18px;
    font-weight: 500;
  }

  .drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--amber);
    border-radius: 8px;
    padding: 12px 20px;
    color: var(--texto-negro);
    font-family: var(--body-family);
    font-size: 16px;
    font-weight: 700;
    margin-top: 8px;
  }

  /* ══════════════════════════════════════════════════════
     SERVICIOS
  ══════════════════════════════════════════════════════ */

  /* ── Sección wrapper ──────────────────────────────────── */
  .servicios {
    border-radius: 0;
    padding: 40px 0 0;
    margin-top: 0;
    gap: 35px;
  }

  /* ── Intro ────────────────────────────────────────────── */
  .servicios-intro {
    max-width: calc(100% - 32px);
    gap: 16px;
    padding: 0;
  }

  .servicios-titulo {
    align-items: center;
    gap: 4px;
  }

  .servicios-titulo h2 {
    font-size: 39.81px;
    line-height: 1.1;
    text-align: center;
  }

  .servicios-titulo .etiqueta {
    text-align: center;
  }

  .etiqueta {
    font-size: 12.8px;
  }

  .servicios-descripcion {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
  }

  /* ── Cards grid ───────────────────────────────────────── */
  .servicios-grid {
    gap: 8px;
    width: 100%;
  }

  .cards-fila {
    flex-direction: column;
    gap: 8px;
  }

  .card {
    border-radius: 0;
    height: auto;
    padding: 30px 16px;
    align-items: center;
    gap: 18px;
    box-shadow: none;
  }

  .card::before {
    background: rgba(0, 21, 2, 0.87);
  }

  .card h3 {
    text-align: center;
  }

  .card-body {
    align-items: center;
    gap: 14px;
  }

  .card-body p {
    font-weight: 400;
    text-align: center;
  }

  .card-body ul {
    list-style: none;
    padding-left: 0;
  }

  .card-body li {
    text-align: center;
  }

  /* ── Servicios adicionales ────────────────────────────── */
  .servicios-extra {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 40px 16px;
    box-shadow: none;
  }

  .extra-titulo {
    text-align: center;
  }

  .extra-grid {
    gap: 20px;
  }

  .extra-fila {
    flex-wrap: wrap;
    gap: 20px;
  }

  .extra-item {
    flex: 0 0 calc(50% - 10px);
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    text-align: center;
  }

  .extra-item img {
    flex-shrink: 0;
  }

  .extra-nombre {
    text-align: center;
  }

  .extra-desc {
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════
     PLANES (mobile: siempre abiertos, sin acordeón)
  ══════════════════════════════════════════════════════ */

  .planes {
    padding: 40px 16px;
    gap: 24px;
  }

  .planes-intro-wrap h2 {
    font-size: 39.81px;
    text-align: center;
    line-height: 1.1;
  }

  .planes-intro .etiqueta {
    font-size: 12.8px;
  }

  .planes-descripcion {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  .planes-grid {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .planes-grid .plan-card {
    width: 575px;
    max-width: 100%;
  }

  /* El toggle "Ver qué incluye" desaparece en mobile */
  .plan-ver-toggle {
    display: none;
  }

  /* Items siempre visibles */
  .plan-items {
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }

  /* Etiqueta "Incluye:" visible solo en mobile */
  .plan-incluye-label {
    display: block;
    font-family: var(--body-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--texto-negro);
    margin-bottom: 8px;
  }

  /* plan-ver no es interactivo en mobile */
  .plan-ver {
    cursor: default;
    pointer-events: none;
  }

  /* Resetear el grid de tags del breakpoint 1440px */
  .plan-card:not(.plan-card--infiniti) .plan-tags {
    display: flex;
  }

  /* ══════════════════════════════════════════════════════
     ¿POR QUÉ ALPLAME?
  ══════════════════════════════════════════════════════ */

  .porque {
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    gap: 38px;
  }

  /* Ocultar badge en mobile */
  .porque-badge {
    display: none;
  }

  .porque-contenido {
    gap: 38px;
    align-items: center;
    width: 100%;
  }

  .porque-intro {
    align-items: center;
    gap: 16px;
  }

  .porque-intro .etiqueta {
    text-align: center;
    font-size: 12.8px;
  }

  .porque-intro h2 {
    font-size: 39.81px;
    text-align: center;
    line-height: 1.1;
  }

  .porque-subtitulo {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-top: 0;
  }

  .porque-items {
    gap: 32px;
    align-items: center;
    max-width: 100%;
  }

  .porque-item {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .porque-item img {
    width: 48px;
    height: 48px;
  }

  .porque-item > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }

  .item-titulo {
    font-size: 18px;
    text-align: center;
    margin-bottom: 0;
  }

  .item-desc {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════
     CÓMO TRABAJAMOS — PASOS
  ══════════════════════════════════════════════════════ */

  .pasos-wrapper {
    padding: 0 0 40px;
  }

  .pasos {
    border-radius: 16px;
    padding: 40px 16px;
    gap: 32px;
  }

  /* ── Intro ────────────────────────────────────────────── */
  .pasos-intro {
    align-items: center;
    gap: 16px;
  }

  .pasos-titulo {
    gap: 4px;
    align-items: center;
  }

  .etiqueta-amber {
    font-size: 12.8px;
    text-align: center;
  }

  .pasos-titulo h2 {
    font-size: 39.81px;
    text-align: center;
    line-height: 1.1;
  }

  .pasos-subtitulo {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
  }

  /* ── Grid de pasos: horizontal → vertical ─────────────── */
  .pasos-grid {
    flex-direction: column;
    height: auto;
    padding: 0;
    gap: 0;
    align-items: stretch;
  }

  /* Separadores: de verticales a horizontales */
  .paso-sep {
    width: 100%;
    height: 1px;
  }

  /* Cada paso centrado */
  .paso {
    padding: 16px;
    align-items: center;
    overflow: visible;
  }

  .paso-numero {
    font-size: 39.81px;
    line-height: 1;
    height: 34px;
    overflow: hidden;
  }

  .paso-contenido {
    align-items: center;
  }

  .paso-contenido h3 {
    text-align: center;
  }

  .paso-contenido p {
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════
     NUESTRA HISTORIA
  ══════════════════════════════════════════════════════ */

  .historia {
    display: flex;
    flex-direction: column;
    padding: 40px 16px;
    gap: 16px;
  }

  /* Orden: título → foto → contenido */
  .historia-titulo {
    order: 1;
    gap: 4px;
    align-items: center;
  }

  .historia-titulo .etiqueta {
    text-align: center;
    font-size: 14px;
  }

  .historia-titulo h2 {
    font-size: 39.81px;
    text-align: center;
    line-height: 1.1;
  }

  .historia-foto-wrap {
    order: 2;
    width: 100%;
    max-width: 343px;
    height: auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: static;
  }

  .historia-foto {
    width: 100%;
    height: 295px;
    border-radius: 22px;
    background-color: transparent;
  }

  .historia-stats {
    position: static;
    gap: 32px;
    border-radius: 8px;
    padding: 20px 18px;
  }

  .stat-numero {
    font-size: 33.18px;
    color: var(--texto-negro);
  }

  .stat-label {
    color: var(--texto-negro);
  }

  .stat-badges {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .badge {
    background: var(--principal-600);
    color: var(--fondo);
    padding: 5px 16px;
    font-size: 12.8px;
    font-weight: 500;
  }

  .historia-contenido {
    order: 3;
    gap: 32px;
    width: 100%;
  }

  .historia-parrafos {
    gap: 16px;
  }

  .historia-parrafos p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: left;
  }

  .historia-fundadora {
    padding: 22px 28px 22px 40px;
    border-radius: 16px;
    gap: 22px;
  }

  .fundadora-nombre {
    text-align: center;
  }

  .fundadora-rol {
    text-align: center;
  }

  .fundadora-desc {
    text-align: center;
  }

  .btn-contacto {
    font-size: 16px;
    width: auto;
    align-self: center;
    justify-content: flex-start;
    padding: 8px 8px 8px 16px;
    gap: 14px;
  }

  .btn-contacto img {
    width: 32px;
    height: 32px;
  }

  /* ══════════════════════════════════════════════════════
     TRANSPARENCIA TOTAL
  ══════════════════════════════════════════════════════ */

  .transparencia {
    padding: 40px 16px;
    gap: 32px;
  }

  .transparencia-intro {
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }

  .transparencia-titulo {
    gap: 4px;
    align-items: center;
  }

  .transparencia-titulo .etiqueta {
    text-align: center;
    font-size: 12.8px;
  }

  .transparencia-titulo h2 {
    font-size: 39.81px;
    text-align: center;
    line-height: 1.1;
    white-space: normal;
    align-self: stretch;
  }

  .transparencia-desc {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
  }

  /* ── Cards: horizontal → vertical ────────────────────── */
  .transparencia-cards {
    flex-direction: column;
    gap: 32px;
    max-width: 100%;
  }

  .t-card {
    padding: 44px 22px;
    border-radius: 16px;
    gap: 28px;
  }

  .t-card img {
    width: auto;
    height: 42px;
  }

  /* ══════════════════════════════════════════════════════
     TESTIMONIOS
  ══════════════════════════════════════════════════════ */

  .testimonios {
    padding: 40px 16px;
    gap: 38px;
  }

  .testimonios-intro {
    align-items: center;
    gap: 12px;
  }

  .testimonios-intro .etiqueta {
    text-align: center;
  }

  .testimonios-intro h2 {
    font-size: 39.81px;
    line-height: 1.1;
    text-align: center;
  }

  .testimonios-desc {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
  }

  /* Una sola card visible a la vez */
  .testimonio-card {
    flex: 0 0 100%;
    padding: 22px 24px;
    gap: 22px;
    align-items: center;
  }

  .estrellas {
    font-size: 22px;
    letter-spacing: 4px;
  }

  .testimonio-cita {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
  }

  .testimonio-autor {
    align-items: center;
    gap: 8px;
  }

  .autor-nombre {
    font-size: 16px;
    text-align: center;
  }

  .autor-cargo {
    text-align: center;
  }

  .testimonios-nav {
    gap: 32px;
  }

  /* ══════════════════════════════════════════════════════
     CONTÁCTANOS
  ══════════════════════════════════════════════════════ */

  .contactanos {
    border-radius: 22px 22px 0 0;
    padding: 40px 0;
  }

  .contactanos-titulo {
    padding: 18px 16px;
    gap: 16px;
    max-width: 100%;
  }

  .contactanos-titulo h2 {
    font-size: 39.81px;
    line-height: 1.1;
  }

  .contactanos-subtitulo {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .contactanos-accion {
    gap: 0;
    width: 100%;
  }

  .form-grupo {
    align-self: stretch;
  }

  .contactanos-form {
    gap: 16px;
    align-self: stretch;
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .form-input-wrap {
    width: 100%;
    padding: 12px 0 12px 14px;
  }

  .form-input-wrap input {
    font-size: 14px;
    line-height: 20px;
  }

  .email-input {
    width: 100%;
    padding: 12px 0 12px 14px;
  }

  .email-input input {
    font-size: 14px;
    line-height: 20px;
  }

  .btn-consulta {
    font-size: 16px;
  }

  .contactanos-info {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 18px;
    padding: 0 16px;
    align-items: center;
    width: 100%;
  }

  .info-top-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    align-self: stretch;
  }

  .info-item {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .info-item--location {
    align-self: stretch;
    justify-content: center;
  }

  .info-item span {
    font-size: 12.8px;
    font-weight: 700;
    white-space: normal;
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════
     FOOTER
  ══════════════════════════════════════════════════════ */

  .footer {
    padding: 40px 16px;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .footer-marca {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: none;
  }

  .footer-logo {
    width: 76px;
    height: 80px;
  }

  .footer-nombre {
    text-align: center;
  }

  .footer-tagline {
    text-align: center;
  }

  .footer-copy {
    text-align: center;
    flex: none;
  }

  .footer-credit {
    text-align: center;
    flex: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Medium Mobile  480px – 767px
   Overrides the base mobile block for larger phones / small
   landscape devices (e.g. 602px viewport width).
═══════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {

  /* ── Hero ─────────────────────────────────────────────── */
  .hero-content {
    padding: 90px 28px 60px;
  }

  .hero-content h1 {
    max-width: calc(100% - 32px);
  }

  .hero-content p {
    max-width: calc(100% - 32px);
  }

  /* ── Servicios ────────────────────────────────────────── */
  .servicios {
    padding: 48px 24px 0;
    border-radius: 30px 30px 0 0;
    gap: 32px;
  }

  .servicios-intro {
    width: 100%;
    max-width: none;
  }

  /* 2 columnas de cards */
  .servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
  }

  .cards-fila {
    display: contents;
  }

  .card {
    min-height: 200px;
    border-radius: 10px;
  }

  /* Extra: con radio y padding proporcional */
  .servicios-extra {
    border-radius: 12px;
    padding: 32px 20px;
  }

  /* ── Por qué ALPLAME ──────────────────────────────────── */
  .porque {
    padding: 48px 24px;
  }

  /* ── Nuestra Historia ─────────────────────────────────── */
  .historia {
    padding: 48px 24px;
  }

  .historia-foto-wrap {
    max-width: 100%;
  }

  .historia-foto {
    height: 280px;
  }

  /* ── Cómo trabajamos ──────────────────────────────────── */
  .pasos {
    padding: 40px 24px;
  }

  /* ── Transparencia ────────────────────────────────────── */
  .transparencia {
    padding: 48px 24px;
  }

  /* 2 columnas de t-cards */
  .transparencia-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .t-card {
    flex: 0 0 calc(50% - 8px);
    padding: 32px 16px;
  }

  /* ── Testimonios ──────────────────────────────────────── */
  .testimonios {
    padding: 48px 24px;
  }

  .testimonio-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  /* ── Contáctanos ──────────────────────────────────────── */
  .contactanos {
    padding: 40px 0;
  }

  .email-input {
    width: 100%;
    max-width: none;
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer {
    padding: 24px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Historia centrada  520px – 767px
   Aplica centrado a Nuestra Historia solo en mobile ancho;
   no afecta teléfonos pequeños (≤519px).
═══════════════════════════════════════════════════════════ */
@media (min-width: 520px) and (max-width: 767px) {

  .historia-titulo {
    width: 100%;
  }

  .historia-titulo .etiqueta {
    width: 100%;
  }

  .historia-titulo h2 {
    width: 100%;
  }

  .historia-foto-wrap {
    width: 75%;
    max-width: 320px;
  }

  .historia-foto {
    height: 260px;
  }

  .historia-contenido {
    align-items: center;
    gap: 24px;
  }

  .historia-parrafos p {
    text-align: center;
  }

  .historia-fundadora {
    padding: 18px 20px;
    border-radius: 16px;
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 400px;
  }

  .fundadora-info {
    align-items: center;
    width: 100%;
  }

  .fundadora-nombre-wrap {
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — ≤320px  (relojes, pantallas muy pequeñas)
═══════════════════════════════════════════════════════════ */
@media (max-width: 320px) {

  /* ── Escala tipográfica ───────────────────────────────── */
  :root {
    --h1-size: 36px;
    --h2-size: 28px;
    --h3-size: 22px;
  }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero {
    min-height: 600px;
    padding: 80px 12px 40px;
  }

  /* ── Secciones — padding horizontal reducido ──────────── */
  .servicios,
  .porque,
  .historia,
  .pasos,
  .transparencia,
  .testimonios {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ── Servicios Extra ──────────────────────────────────── */
  .servicios-extra {
    margin-left: -12px;
    margin-right: -12px;
    padding: 32px 12px;
  }

  /* ── Contáctanos — email input full width ─────────────── */
  .email-input {
    width: calc(100% - 24px);
    max-width: none;
  }

  /* ── Footer ───────────────────────────────────────────── */
  .footer {
    padding: 24px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP
═══════════════════════════════════════════════════════════ */

@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.55); opacity: 0;   }
  100% { transform: scale(1.55); opacity: 0;   }
}

.whatsapp-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0px 4px 8px rgba(0, 0, 0, 0.18),
    0px 8px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* Anillo de pulso */
.whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
  animation: wa-pulse 2.2s ease-out infinite;
}

/* ── Back to Top (mobile only) ──────────────────────────── */
@media (max-width: 767px) {
  .back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 104px;
    right: 32px;
    width: 48px;
    height: 48px;
    background: #006E1E;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  }

  .back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .back-to-top {
    display: none;
  }
}

/* ── Accessibility utilities ─────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  background: #005a17;
  color: #f8f8f8;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Focus-visible: teclado visible, sin afectar clicks */
:focus-visible {
  outline: 3px solid #006E1E;
  outline-offset: 3px;
  border-radius: 3px;
}


/* ─── Entrance animations ───────────────────────────────── */
.anim {
  opacity: 0;
  will-change: opacity, transform;
}

.anim--up      { transform: translateY(24px); }
.anim--up-sm   { transform: translateY(20px); }
.anim--scale   { transform: scale(0.97);      }
.anim--spin-in { transform: rotate(-18deg) scale(0.9); }

.anim--title { transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.anim--text  { transition: opacity 0.5s ease-out;                          }
.anim--card  { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.anim--img   { transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.anim--stat  { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.anim--cta   { transition: opacity 0.4s ease-out, transform 0.4s ease-out; }

.anim.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  .anim--up      { transform: translateY(12px); }
  .anim--up-sm   { transform: translateY(10px); }
  .anim--scale   { transform: scale(0.985);     }
  .anim--spin-in { transform: rotate(-12deg) scale(0.94); }
}

/* ─── Hero entrance — keyframe, corre en cada carga de página ─ */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-text h1 {
  animation: hero-fade-up 0.6s ease-out both;
}

.hero-text > p {
  animation: hero-fade-up 0.5s ease-out 0.15s both;
}

/* ─── Prefers-reduced-motion — desactiva animaciones y transiciones ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  .anim {
    opacity:   1    !important;
    transform: none !important;
  }
}

/* ─── Hovers — todo desktop ──────────────────────────────── */
@media (min-width: 1025px) {
  .nav-logo:hover {
    transform: rotate(-6deg) scale(1.08);
    filter: brightness(1.1);
  }

  .nav-links a:hover::after {
    width: 100%;
  }

  .btn-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
      0px 4px 12px rgba(254, 167, 0, 0.3),
      0px 8px 24px rgba(254, 167, 0, 0.15);
  }

  .btn-secondary:hover {
    transform: translateY(-6px);
    box-shadow:
      0px 2px 2px rgba(0, 0, 0, 0.09),
      0px 6px 5px  rgba(0, 0, 0, 0.07),
      0px 14px 10px rgba(0, 0, 0, 0.05),
      0px 24px 18px rgba(0, 0, 0, 0.03),
      0px 36px 28px rgba(0, 0, 0, 0.02);
  }

  .btn-contacto:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }

  .btn-consulta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }

  .btn-plan:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow:
      0px 4px 12px rgba(0, 90, 23, 0.25),
      0px 8px 24px rgba(0, 90, 23, 0.12);
  }

  .btn-plan--amber:hover {
    box-shadow:
      0px 4px 12px rgba(254, 167, 0, 0.3),
      0px 8px 24px rgba(254, 167, 0, 0.15);
  }

  .btn-nav:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }

  .whatsapp-btn:hover {
    transform: scale(1.08);
    box-shadow:
      0px 6px 12px rgba(0, 0, 0, 0.22),
      0px 12px 28px rgba(0, 0, 0, 0.14);
  }

  .info-item:hover {
    transform: translateY(-3px);
  }
}