/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
✅ PROYECTO SBELTUS - STYLES.CSS AJUSTADO Y DEPURADO
📅 VERSIÓN: 2025-11-01
----------------------------------------------------------
- Basado en la versión estable móvil 31-10-2025
- Look SBELTUS intacto
- Header azul, hero visible y menú funcional
- Botones ES/EN alineados en horizontal
- Imágenes de Resultados reducidas y centradas
- Estructura lista para respaldo seguro
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */


/* 💚 BASE GENERAL 💚 */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #f9fdfb;
  color: #333;
  line-height: 1.6;
  font-weight: 500;
}


/* 💚 HEADER Y NAVEGACIÓN 💚 */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #2b6777;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.3em 2em !important;
  z-index: 1000;
}

.logo img {
  max-height: 80px;
  width: auto;
}

/* Frase naranja del header */
.tagline p {
  font-size: 1.5rem !important;
  font-weight: 600;
  color: #ff7043;
  font-style: italic;
  margin: 0;
  text-align: center;
}


/* 💚 BOTONES DE IDIOMA (ES / EN) 💚 */
.lang-switch {
  font-size: 0.9rem;
  color: white;
}
.lang-switch button {
  background: #ff7a33;
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.lang-switch button:hover { background: #ff8f55; }


/* 💚 MENÚ DE NAVEGACIÓN 💚 */
.nav {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  padding: 10px 20px;
  border-radius: 8px;
}
.nav a {
  color: #2E7D32 !important;
  text-decoration: none;
  font-weight: 500;
}
.nav a:hover { color: #256428; }


/* 💚 SECCIÓN HERO (INICIO) 💚 */
.hero {
  background: linear-gradient(to right, #f7f7f7, #ffffff);
  text-align: center;
  padding: 180px 20px 80px !important;
}
.hero-content {
  max-width: 800px;
  margin: 0 auto;
}
.hero-content h1 {
  color: #2E7D32;
  font-size: 2.2rem;
  margin-bottom: 20px;
  line-height: 1.2;
}
.hero-subtext {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
  margin-top: 12px;
  max-width: 800px;
  margin: 0 auto;
  font-style: italic;
}


/* 💚 LOGOS DEL HERO 💚 */
.hero-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}
.icono-arbol { font-size: 2.6rem !important; color: #4CAF50; margin-top: 10px !important; }
.hero-logos img.logo-centro {
  max-height: 160px !important;
  margin-top: 15px !important;
  opacity: 0;
  animation: fadeInUp 1.2s ease-out forwards;
  animation-delay: 0.3s;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   🌱 BLOQUE CSS: UNIFICAR TAMAÑO DE PLANTITAS EN TODAS LAS SECCIONES
   📅 Fecha: 2025-11-06
   ----------------------------------------------------------
   Propósito:
   - Igualar el tamaño del emoji 🌱 en todos los títulos <h2>.
   - Mantener el tamaño reducido en los subtítulos <h3> de Resultados.
========================================================== */

section h2::before {
  content: "🌱";
  font-size: 1.8rem;  /* tamaño uniforme en todas las secciones */
  color: #2E7D32;
  margin-right: 6px;
  vertical-align: middle;
}

/* subtítulos (h3) conservan tamaño menor */
.results-section h3::before {
  content: "🌱";
  font-size: 1rem;
  color: #2E7D32;
  margin-right: 5px;
  vertical-align: middle;
}

/* 💚 SECCIÓN ACERCA DE MÍ 💚 */
.about-section {
  padding: 20px;
  background-color: #f9f9f9;
}
.about-section h2 {
  color: #2E7D32;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
}
.about-section p {
  color: #333;
  line-height: 1.7;
  font-style: italic;
}
.about-image img {
  max-width: 200px;
  border-radius: 8px;
  display: block;
  margin: 20px auto;
}
---------------------------------------------------
/* Contenedor simple para Acerca de mí – 2025-11-29 */
.about-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* Opcional: imagen centrada y texto debajo en todas las pantallas */
.about-image {
  text-align: center;
  margin-bottom: 20px;
}
------------------------------------------------------------------
------------------------------------------------------------------

/* 💚 SECCIÓN RESULTADOS 💚 */
.results-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 20px;
}
.results-section h2 {
  color: #2E7D32;
  display: flex;
  align-items: center;
  gap: 8px;
}

.results-section p {
  text-align: justify;
  color: #555;
  margin-bottom: 1em;
  font-style: italic;
}

/* ✅ Control total de imágenes (grasa corporal, gráfico Excel, caricatura) */
.results-section img {
  display: block !important;
  margin: 40px auto !important;
  max-width: 600px !important;
  width: 90% !important;
  height: auto !important;
  border-radius: 10px;
  object-fit: contain !important;
}


/* 💚 SECCIONES RECURSOS / PLANES / CONTACTO 💚 */
section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 20px;
  line-height: 1.8;
  font-size: 1.1rem;
  color: #444;
  background-color: #ffffff;
  font-style: italic;
}
section h2 {
  color: #2e8b57;
  font-weight: 600;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

/* 💚 PLANES (PLAN SBELTUS) 💚 */
.pricing {
  background-color: #ffffff;
  text-align: center;
}
/* 🔧 Ajuste del padding del Plan Integral – 2025-11-19 */
.pricing .plan-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
 padding: 0px 14px 14px 14px;
  display: inline-block;
  text-align: left;
}

.plan-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2E7D32;
  margin-top: 15px;
  text-align: center;
}

/* =========================================================
   Ajuste: Reducción de tamaño del texto de tarifas
   Finalidad: Compactar el bloque del plan en móvil y evitar
              que el botón "Iniciar ahora" se vaya hacia abajo.
   Fecha: 2025-12-02
   ========================================================= */

.plan-price {
  font-size: 14px !important;
  line-height: 1.1 !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

.plan-btn {
  background-color: #2E7D32;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: block;
  margin: 20px auto 0 auto;
}

.plan-btn:hover {
  background-color: #256428;
}

/* Ajuste adicional para subir el botón Iniciar ahora — 2025-12-02 */
.pricing .plan-card {
  padding-bottom: 6px !important;
}

.plan-btn {
  margin-top: 10px !important;
}


/* 💚 CONTACTO 💚 */
.contact {
  background-color: #f9f9f9;
  text-align: center;
}
.contact form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}
.contact input,
.contact textarea {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-style: italic;
/* 💚 AJUSTES DE UNIFICACIÓN TIPOGRÁFICA 💚 */
font-family: 'Poppins', sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
color: #333 !important;
letter-spacing: 0.02em !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;

}
.contact button {
  background-color: #2E7D32;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.contact button:hover { background-color: #256428; }


/* 💚 RESPONSIVE MÓVIL 💚 */
@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 2rem;
    color: white;


    cursor: pointer;
  }

  header .nav {
    display: none;
    flex-direction: column;
    background-color: #ffffff;
    position: absolute;
    top: 75px;
    right: 20px;
    width: auto;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    z-index: 1000;
  }

  .nav.active { display: flex !important; }

  /* ✅ Ajuste del hero y botones de idioma en móvil */
  #hero { margin-top: 140px !important; }
  .lang-switch {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .lang-switch button::before { content: none !important; }

  /* ✅ Imágenes en Resultados para móvil */
  .results-section img {
    max-width: 95% !important;
    margin: 30px auto !important;
  }
}
/* 💚 BLOQUE CSS CORRECTIVO URGENTE – ESPACIADO BAJO HEADER
   📅 2025-11-01
   Propósito:
   ✔️ Reajusta la separación entre el header y la primera imagen o texto.
   ✔️ Evita que el contenido quede oculto o comprimido bajo la barra azul.
------------------------------------------------------------ */

#about {
  margin-top: 160px !important; /* aumenta separación superior */
  padding-top: 40px !important;
}

#hero {
  padding-top: 200px !important; /* compensa altura del header */
}

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS FINAL – CONTROL TOTAL IMÁGENES DE GRASA Y GRÁFICO
📅 2025-11-01
Propósito:
✔️ Ignora los estilos inline (max-width:100%) del HTML.
✔️ Limita el tamaño de las imágenes grandes a 600 px máx.
✔️ Centra y mantiene proporciones naturales.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

figure img,
.results-section img,
#results img {
  all: revert !important;       /* revierte estilos inline */
  display: block !important;
  margin: 40px auto !important;
  max-width: 600px !important;  /* tamaño máximo controlado */
  width: 90% !important;
  height: auto !important;
  border-radius: 10px;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  figure img,
  .results-section img,
  #results img {
    max-width: 95% !important;
  }
}

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS CORRECTIVO – ESPACIADO Y MENÚ HAMBURGUESA
📅 2025-11-01
Propósito:
✔️ Corrige la separación bajo el header (evita que tape o quede muy pegado).
✔️ Oculta el menú hamburguesa en vista de escritorio.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

/* ✅ Ajuste de espaciado bajo el header */
#about,
#hero {
  margin-top: 120px !important;
  padding-top: 60px !important;
}

/* ✅ Ocultar menú hamburguesa en escritorio */
@media (min-width: 821px) {
  .menu-toggle {
    display: none !important;
  }
}

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS DE NIVELACIÓN GENERAL DE SECCIONES
📅 2025-11-01
Propósito:
✔️ Corrige el desplazamiento de todas las secciones bajo el header fijo.
✔️ Mantiene el espaciado correcto (como Contacto).
✔️ Evita que el header azul tape títulos o contenido superior.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

#hero,
#about,
#results,
#resources,
#pricing {
  margin-top: 120px !important;
  padding-top: 80px !important;
  scroll-margin-top: 150px !important; /* asegura visibilidad al navegar */
}

/* Contacto se mantiene sin cambios */

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS DE IGUALACIÓN DE NIVEL VISUAL ENTRE SECCIONES
📅 2025-11-01
Propósito:
✔️ Alinea “Acerca de mí”, “Resultados”, “Recursos” y “Planes”
   al mismo nivel vertical que “Contacto”.
✔️ Mantiene espacio uniforme bajo el header azul.
✔️ Evita desajustes en móvil y escritorio.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

#about,
#results,
#resources,
#pricing {
  margin-top: 140px !important;     /* iguala distancia visual con Contacto */
  padding-top: 90px !important;     /* mantiene respiración interna */
  scroll-margin-top: 170px !important;
}

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS – NIVELACIÓN FINAL AJUSTE FINO
📅 2025-11-01
Propósito:
✔️ Elevar mínimamente las secciones intermedias
   (“Acerca de mí”, “Resultados”, “Recursos”, “Planes”)
   para que queden perfectamente alineadas con “Contacto”.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

#about,
#results,
#resources,
#pricing {
  margin-top: 60px !important;     /* sube 10px más */
  padding-top: 55px !important;    /* ajusta suavemente el espacio interior */
 }

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS ESPECÍFICO – AJUSTE DE ESPACIO EN HERO (MÓVIL VERTICAL)
📅 2025-11-01
Propósito:
✔️ Aumenta la separación entre el header azul y la frase
   “Transforma tu vida después de los 50” solo en vista móvil.
✔️ Mejora equilibrio visual en orientación vertical.
✔️ Sin cambios en escritorio.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

@media (max-width: 768px) {
  #hero {
    padding-top: 220px !important; /* antes 180px → +40px de aire */
    scroll-margin-top: 200px !important; /* asegura visibilidad completa */
  }
}

/* 💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚
BLOQUE CSS MÓVIL UNIFICADO – AJUSTE FINAL RESPONSIVE
📅 2025-11-01
Propósito:
✔️ Centraliza todos los ajustes móviles previos.
✔️ Evita solapamientos con el header azul.
✔️ Equilibra espaciado del hero y secciones.
✔️ No afecta vista de escritorio.
💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚💚 */

@media (max-width: 768px) {
  /* 🔹 HERO: frase y logo perfectamente visibles */
  #hero {
    padding-top: 150px !important;   /* punto de equilibrio visual */
    }

  /* 🔹 Secciones principales: mantienen separación uniforme */
  #about,
  #results,
  #resources,
  #pricing {
    margin-top: 150px !important;
    padding-top: 70px !important;
    scroll-margin-top: 150px !important;
  }
 
  /* 🔹 Sección Contacto: ajuste final para mostrar el footer */
  #contact {
    margin-top: 185px !important;   /* antes 200px → sube 15px */
    padding-top: 70px !important;   /* equilibrio interior */
    scroll-margin-top: 160px !important;
  }


  /* 🔹 Botones de idioma en una sola línea centrada */
  .lang-switch {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .lang-switch button::before { content: none !important; }

  /* 🔹 Imágenes de Resultados: centradas y proporcionadas */
  .results-section img,
  figure img {
    display: block !important;
    margin: 30px auto !important;
    max-width: 95% !important;
    height: auto !important;
    border-radius: 8px;
  }

  /* 🔹 Menú hamburguesa visible solo en móvil */
  .menu-toggle {
    display: block !important;
  }
  /* 🔹 Footer (solo móvil): corrección total de visibilidad del texto */
  footer.footer {
    display: block !important;
    height: auto !important;           /* elimina cualquier límite de altura */
    min-height: 180px !important;      /* asegura espacio mínimo suficiente */
    padding-top: 10px !important;
    padding-bottom: 130px !important;
    line-height: 1.6 !important;
    overflow: visible !important;      /* garantiza que no se corte nada */
  }
}

/* ==========================================================
   💚 FOOTER SBELTUS – VERSIÓN LIMPIA Y FUNCIONAL
   📅 Fecha: 2025-11-03
   ----------------------------------------------------------
   Propósito:
   - Mostrar correctamente las dos filas del footer
     en escritorio y móvil.
   - Elimina duplicaciones y conflictos previos.
========================================================== */

footer.footer {
  background-color: #2b6777;
  color: #ffffff;
  text-align: center;
  padding: 25px 10px 60px 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow: visible;
}

footer.footer p {
  margin: 0 0 8px 0;
  font-weight: 500;
}

/* Segunda fila (enlaces legales) */
footer.footer .legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  margin-top: 6px;
}

footer.footer .legal-links a {
  color: #e7f0f0;
  text-decoration: none;
}

footer.footer .legal-links a:hover {
  text-decoration: underline;
}

/* Versión móvil */
@media (max-width: 820px) {
  footer.footer {
    padding-bottom: 80px !important;
    min-height: 140px !important;
  }
  footer.footer .legal-links {
    flex-direction: row;
  }
}
/* ==========================================================
   💚 BLOQUE CSS: Ajuste de espacio bajo la sección Contacto
   📅 Fecha: 2025-11-03
   ----------------------------------------------------------
   Propósito:
   - Reducir el espacio blanco entre “Contacto” y el footer.
   - Elevar el footer para que ambas líneas sean visibles.
========================================================== */

#contact {
  margin-bottom: 0 !important;
  padding-bottom: 20px !important;
}

@media (max-width: 820px) {
  #contact {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
}
/* ==========================================================
   🌱 BLOQUE CSS: PLANTITA PEQUEÑA EN SUBTÍTULOS DE RESULTADOS
   📅 Fecha: 2025-11-06
   ----------------------------------------------------------
   Propósito:
   - Mostrar automáticamente una plantita 🌱 antes de cada subtítulo <h3>
     dentro de la sección “Resultados”.
   - Mantener coherencia visual con los títulos principales (<h2>),
     pero en tamaño menor.
   - No interfiere con traducción ni con otros estilos del sitio.
========================================================== */

.results-section h3::before {
  content: "🌱";
  font-size: 1rem;
  color: #2E7D32;           /* tono verde SBELTUS */
  margin-right: 5px;
  vertical-align: middle;
}
/* 🌿 BLOQUE CSS – Estilo para lista de recursos (2025-11-10)
   Propósito:
   - Incorporar puntos de enlace futuros para links externos
     (ej. YouTube, artículos, blogs o documentos).
   - Mostrar los enlaces de Recursos en lista limpia y legible.
   - Mantener buena separación y clicabilidad en móvil y escritorio.
*/

.resources-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.resources-list li {
  margin: 8px 0;
}

.resources-list a {
  color: #2E7D32;
  text-decoration: none;
  font-weight: 500;
}

.resources-list a:hover {
  text-decoration: underline;
}

/* Versión responsive: mantiene buena legibilidad en móvil */
@media (max-width: 768px) {
  .resources-list a {
    display: block;
    font-size: 1.05rem;
    padding: 4px;
  }
}
/* 🌿 BLOQUE CSS: Estabilización del título en Planes – 2025-11-11 */
.pricing-header {
  position: relative;
  z-index: 2;
}

/* 💚 BLOQUE CSS – Limpieza de puntos en lista de características del plan */
.plan-features {
    list-style: none !important;
    padding-left: 0 !important;
}

/* ============================================================
   SBELTUS – Ajuste definitivo del Plan Integral
   Elimina COMPLETAMENTE el espacio superior dentro del plan-card
   pegando el título <h3> al borde superior del recuadro. 2025-11-20
   ============================================================ */

.pricing .plan-card h3 {
  margin-top: 0 !important;   /* ← pega el título al borde superior */
  margin-bottom: 6px;         /* mantiene solo un aire mínimo hacia abajo */
}


/* ============================================
   BLOQUE COMPLETO: Teléfono + WhatsApp centrados
   Versión final – Fernando / 2025-11-22
   ============================================ */

.contact-phone-container {
    display: flex;               /* Mantiene teléfono + WhatsApp en una sola línea */
    justify-content: center;     /* CENTRA el contenido horizontalmente */
    align-items: center;         /* Alineación vertical perfecta */
    gap: 10px;                   /* Espacio entre texto e icono */
    margin: 20px auto 0 auto;    /* Separación natural respecto al formulario */
}

.contact-phone-container p {
    margin: 0;                    /* Evita saltos o desplazamientos */
}

.contact-phone-container img {
    width: 40px;                  /* Tamaño claro y uniforme del icono */
    vertical-align: middle;       /* Alineación exacta con el texto */
}

/* ============================================================
   Hojas laterales alrededor de la foto fernando – Acerca de mí
   Fecha: 2025-11-29
   Nota: este bloque controla solo las hojitas laterales 🌿
   ============================================================ */

.about-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                  /* distancia entre hoja y foto */
}

.about-fila img.foto-centro {
  max-width: 200px;
  border-radius: 8px;
}

.about-fila .hoja {
  font-size: 32px;            /* tamaño del emoji 🌿 */
  line-height: 1;
}

/* ======================================================
   ⚙️  AJUSTE FOTO FERNANDO – ESCRITORIO – 2025-11-29
   ====================================================== */
@media (min-width: 1024px) {
  .about-fila img.foto-centro {
    max-width: 150px !important;
  }
}
/*---------------------------------------------------*/

/* ======================================================
   📱 ACERCA DE MÍ – Ajuste del orden y distancia (MÓVIL)
   ====================================================== */
@media (max-width: 820px) {

  /* Orden: título y texto arriba, foto más cerca */
  .about-wrapper {
    display: flex;
    flex-direction: column;
  }

  .about-texto {
    order: 1;
    margin-bottom: 10px; /* Antes era mayor */
  }

  .about-fila {
    order: 2;
    margin-top: 10px; /* Foto más cerca del texto */
  }

  /* Foto más chica en móvil (ajustable) */
  .about-fila img.foto-centro {
    max-width: 140px !important;
  }

  /* Centrado general */
  .about-fila, 
  .about-texto {
    text-align: center;
  }
}
/*------------------------------------------------------------*/

/* Restaurar tamaño de tarifas en escritorio — 2025-12-03 */
@media (min-width: 768px) {
  .plan-price {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}
/*-------------------------------------------------*/
/* --- Ajuste definitivo de ancla para la sección #results en móviles ---
Evita que el título "Resultados" quede oculto bajo el menú fijo al navegar
desde el menú móvil. Crea un espacio invisible equivalente a la altura del menú.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #results::before {
    content: "";
    display: block;
    height: 95px;       /* Ajustar según la altura real del menú móvil */
    margin-top: -95px;  /* Debe coincidir con el valor anterior */
    visibility: hidden;
  }
}
/*----------------------------------------------------------------------*/
/* Reordenar SOLO en escritorio la sección Acerca de mí */
@media (min-width: 821px) {
  .about-wrapper {
    display: flex;
    flex-direction: column;
  }

  .about-texto {
    order: 1;   /* Texto arriba */
  }

  .about-fila {
    order: 2;   /* Imagen abajo */
    margin-top: 20px;
  }
}
/*-----------------------------------------------------------------------------*/

/* 
  Ajuste para centrar el texto del botón "Iniciar ahora"
  y eliminar el subrayado al convertirlo en un enlace <a>.
*/
.plan-btn {
  text-align: center;
  text-decoration: none; /* elimina el subrayado en enlaces */
  display: inline-block; /* asegura que el contenido se centre correctamente */
}
/*-------------------------------------------------------------------------------*/
/* Centrar exclusivamente el botón dentro del plan-card */
.plan-card .plan-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
  text-decoration: none; /* opcional: elimina subrayado */
}
/*---------------------------------------------------------------------*/