/* 1. Cargar Inter (fuente recomendada por legibilidad) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');

/* 2. Variables globales: paleta Ayogis + escala tipográfica */
:root {
  /* Colores */
  --color-principal:   #4a4a49;
  --color-secundario:  #f9f9f9;
  --color-acento:      #306b89;
  --color-texto:       #252525;
  --color-bg:          #f1f1f1;
  --radius-lg:         20px;
  --radius-btn:        18px;

  /* Tipografía */
  --line-height:       1.6;
  --fs--1: clamp(0.75rem, 1.0vw, 0.875rem);
  --fs-0:  clamp(1rem,    1.5vw, 1rem);
  --fs-1:  clamp(1.25rem, 1.8vw, 1.25rem);
  --fs-2:  clamp(1.5rem,  2.2vw, 1.5rem);
  --fs-3:  clamp(2rem,    3vw,   2rem);
  --fs-4:  clamp(2.5rem,  4vw,   2.5rem);
  --fs-5:  clamp(3rem,    5vw,   3rem);
  --fs-6:  clamp(3.5rem,  6vw,   3.5rem);
}

.modal-demo {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    padding: 20px; /* Añade padding para móviles */
  }

  .modal-demo-content {
    background: white; padding: 2rem; border-radius: 12px;
    width: 90%; max-width: 400px; position: relative;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    text-align: center;
    max-height: 90vh; /* Limita la altura máxima */
    overflow-y: auto; /* Permite scroll vertical */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
  }
.modal-demo-content h2 {
  font-size: 2.4rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

  .modal-demo-content input {
    width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc;
  }

  .modal-demo-content button {
    margin-top: 1rem;
    background: #306b89; color: white; padding: 16px 20px;
    border: none; border-radius: 8px; cursor: pointer; font-weight: bold;
    width: 100%;
  }

  .modal-close {
    position: absolute; top: 10px; right: 15px; font-size: 24px;
    cursor: pointer; color: #666; z-index: 10;
  }

/* ========== FORMULARIO MULTI-STEP ========== */

/* Indicador de progreso */
.progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding-top: 0.5rem;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 0.75rem;
  color: #999;
  font-weight: 500;
  transition: color 0.3s ease;
}

.progress-step.active .step-number {
  background: linear-gradient(135deg, #306b89, #4a8ba8);
  color: white;
  box-shadow: 0 2px 8px rgba(48, 107, 137, 0.3);
}

.progress-step.active .step-label {
  color: #306b89;
}

.progress-step.completed .step-number {
  background: #4caf50;
  color: white;
}

.progress-step.completed .step-number::after {
  content: "✓";
}

.progress-line {
  width: 80px;
  height: 2px;
  background: #e0e0e0;
  margin: 0 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.progress-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #306b89, #4a8ba8);
  transition: width 0.5s ease;
}

/* Cuando paso 1 está completado, la línea se llena */
body:has(.progress-step[data-step="1"].completed) .progress-line::after {
  width: 100%;
}

/* Pasos del formulario */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeInStep 0.4s ease;
}

.form-step.going-back {
  animation: fadeInStepBack 0.4s ease;
}

@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInStepBack {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Botones del formulario */
.btn-next,
.btn-submit,
.btn-back {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.btn-next {
  width: 100%;
  background: linear-gradient(135deg, #306b89, #4a8ba8);
  color: white;
  box-shadow: 0 2px 8px rgba(48, 107, 137, 0.2);
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(48, 107, 137, 0.3);
}

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

.btn-back {
  background: #f5f5f5;
  color: #666;
  min-width: 100px;
  padding: 12px 16px;
}

.btn-back:hover {
  background: #e8e8e8;
}

.btn-submit {
  background: linear-gradient(135deg, #306b89, #4a8ba8);
  color: white;
  box-shadow: 0 2px 8px rgba(48, 107, 137, 0.2);
  flex: 1;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(48, 107, 137, 0.3);
}

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

/* Ajuste de altura del modal para multi-step */
.modal-demo-content {
  min-height: auto;
}

.form-step h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--color-principal);
}

.form-step p {
  margin-bottom: 1.5rem;
  color: #666;
  font-size: 0.95rem;
}

/* Estilos responsivos para el modal en móviles */
@media (max-width: 768px) {
  .modal-demo {
    padding: 10px;
    align-items: center;
    justify-content: center;
  }
  
  .modal-demo-content {
    width: 95%;
    max-width: 100%;
    padding: 1.5rem 1.2rem;
    max-height: none; /* Sin límite de altura - ya no hay scroll */
    margin-top: 0;
  }
  
  .form-step h2 {
    font-size: 1.5rem;
    margin-top: 0.5rem;
  }
  
  .form-step p {
    font-size: 0.875rem;
  }
  
  .modal-demo-content input,
  .modal-demo-content textarea {
    font-size: 16px; /* Evita zoom en iOS */
  }

  .progress-indicator {
    margin-bottom: 1.5rem;
  }

  .step-number {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .step-label {
    font-size: 0.7rem;
  }

  .progress-line {
    width: 60px;
    margin: 0 0.5rem;
    margin-bottom: 1.3rem;
  }
}

@media (max-width: 576px) {
  .modal-demo-content {
    padding: 1.2rem 1rem;
  }
  
  .form-step h2 {
    font-size: 1.35rem;
  }

  .step-label {
    display: none; /* Oculta labels en móviles muy pequeños */
  }

  .progress-line {
    width: 50px;
    margin-bottom: 0;
  }
}

/* 3. Estilos tipográficos globales */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-0);
  line-height: var(--line-height);
  color: var(--color-texto);
  background: var(--color-bg);
}
body {
  min-height: 100vh;
}

a {
  color: var(--color-acento);
  text-decoration: none;
  font-weight: 500;
  line-height: normal;
  align-items: center; 
}
a:hover {
  text-decoration: none;
}

/* Encabezados */
h1 { font-size: var(--fs-6); font-weight: 200; margin-bottom: 0.5em; color: var(--color-principal); }
h2 { font-size: var(--fs-5); font-weight: 300; }
h3 { font-size: var(--fs-4); font-weight: 300; margin: 1em 0 0.5em; }
h4 { font-size: var(--fs-3); font-weight: 500; margin: 1em 0 0.5em; }
h5 { font-size: var(--fs-2); font-weight: 600; margin: 1em 0 0.5em; }
h6 { font-size: var(--fs-1); font-weight: 700; margin: 1em 0 0.5em; }

/* Texto corriente */
p  { font-size: var(--fs-0); font-weight: 100; margin: 0 0 1em; }
small { font-size: var(--fs--1); font-weight: 100; }



/* NAVBAR FLOTANTE */
.navbar {
  background: rgb(255, 255, 255);
  backdrop-filter: blur(6px);
  /* border: 1px solid #ddd; */
  border-radius: 50px;
  padding: 1em 2em ;
  margin: 1em auto;
  max-width: 1200px;
  /* width: 70%; */
  position: fixed;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: visible !important;
  display: flex;
  align-items: center;
}
.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: nowrap;
}

.navbar-links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.navbar-logo {
  max-height: 22px;
  
}
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  justify-content: center;
  white-space: nowrap;
}
.navbar-menu li { list-style: none; }
.navbar-menu li a {
  color: var(--color-texto);
  font-weight: 200;
  font-size: 1em;
  padding: 0.5em 1em;
   display: flex;  /* o flex */
  align-items: center;   /* <—— centra el texto dentro del propio enlace */
  height: 100%; 
}
.navbar-menu li a:hover {
  color: var(--color-acento);     /* o el color que prefieras al pasar el ratón */
  transition: color 0.2s ease;
}

.anchor-target {
  position: relative;
  top: -120px;
  display: block;
  height: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  .anchor-target {
    top: -90px;
  }
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1em;
  text-decoration: none;
}
.demo-btn,
.navbar-actions .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 0.9em;
  height: 36px;
  font-size: 0.85em;
  line-height: 1;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  margin-left: 0.5rem;
  background-color: white;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  text-decoration: none;
  min-width: 140px;
  transition: background 0.2s, color 0.2s;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 0.9em;
  height: 36px;
  font-size: 0.85em;
  line-height: 1;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  margin: 0;
  background-color: white;
  text-decoration: none;
}
.demo-btn {
  background:#306b89;
  color: var(--color-bg);
  border: 1px solid var(--color-acento);
  transition: background 0.2s, color 0.2s;
  min-width: 140px;
}
.demo-btn:hover {
  background: var(--color-bg);
  color: var(--color-acento);
  text-decoration: none;
}
.navbar-actions .cta {
  background: var(--color-acento);
  color: var(--color-bg);
  min-width: 140px;
  text-decoration: none;
}


/* 5. HERO */
.hero {
  position: relative;
  background: url('Header_img.jpg') center/cover no-repeat fixed;
  padding: 20em 0em 0em;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
}
.hero-text { position: relative; z-index: 1; }
.hero h1 {
  font-size: var(--fs-4);
  font-weight: 200;
  margin: 0em 0 0;
  color: var(--color-principal);
}
.hero p {
  font-size: var(--fs-1);
  font-weight: 300;
  margin: 0.5em 0;
  color: var(--color-texto);
}
.hero-text p strong {
  display: block;
  font-size: var(--fs-3);
  font-weight: 700;
  margin: 0.8em 0;
  color: var(--color-principal);
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2.2em;
  font-size: var(--fs-1);
  border-radius: 50px;
  background: rgb(123, 123, 123);
  color: var(--color-bg);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 1em;
  margin-bottom: 6em;
}
header.hero .hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.demo-buttons {
  display: flex;
  align-items: center;
  gap: 1em;
 
}

/* Realza el texto del hero con un “glow” blanco */
.hero-text h1,
.hero-text p,
.hero-text strong{
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.874),   /* halo suave */
    0 0 10px rgba(255,255,255,.6); /* extensión */
}

.hero-text h1{
  background:rgba(255,255,255,.8);
  padding:.1em .4em;
  border-radius:8px;
  display:inline-block;
}

/* CARD LIGERO PARA OFERTA */
.oferta-card {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
  background: transparent;
}

.oferta-card__inner {
  /* background: var(--color-secundario); */
  border-radius: var(--radius-lg);
  /* box-shadow: 0 4px 16px rgba(0,0,0,0.05); */
  max-width: 700px;
  width: 100%;
  padding: 2rem;
  text-align: center;
}

/* Cabecera más compacta */
.oferta-card__header h4 {
  font-size: var(--fs-2);
  font-weight: 500;
  margin-bottom: 0.25em;
  color: var(--color-principal);
}
.oferta-card__header small {
  display: block;
  font-size: var(--fs--1);
  font-weight: 300;
  color: var(--color-texto);
  margin-top: 0.2em;
}
.oferta-card__header p {
  margin: 1em 0;
  font-size: var(--fs-0);
  font-weight: 400;
}

/* Lista inline y ajustada */
.oferta-card__lista {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.oferta-card__lista li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--fs-0);
  color: var(--color-principal);
}
.oferta-card__lista li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-acento);
}

/* Botón acorde al estilo global */
.oferta-card__cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 2rem;
  font-size: var(--fs-0);
  font-weight: 600;
  background: var(--color-acento);
  color: var(--color-bg);
  border-radius: var(--radius-btn);
  transition: transform 0.2s, box-shadow 0.2s;
}
.oferta-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* —— OFERTA + MOCKUP UNIDAS —— */
.oferta-mockup{
  background: var(--color-bg);
  padding: 3rem 1rem;
}

/* contenedor interno centrado y en fila */
.oferta-mockup__container{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;        /* se apila en móvil */
}

/* tarjeta superpuesta y glass */
.oferta-card__inner{
  position: relative;
  top: -24px; left: 9%;
  z-index: 2;
  max-width: 340px;
  /* background: rgba(255, 255, 255, 0); */
  backdrop-filter: blur(12px);
  /* box-shadow: 0 8px 28px rgba(0,0,0,.08); */
}

/* mockup con sombra y zoom 1.04 (parallax JS añadirá translateY) */
.oferta-mockup-img{
  flex: 1 1 500px;
  text-align: center;
}
.oferta-mockup-img img{
  max-width: 80%;
  height: auto;
  border-radius: var(--radius-lg);
  /* filter: drop-shadow(0 8px 20px rgba(0,0,0,.15)); */
  transform: scale(1.04);
  transition: transform .3s ease;
}

.oferta-mockup-actions{
  display: flex;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 768px){
  .oferta-mockup__container{
    flex-direction: column;
    text-align: center;
  }
  .oferta-card__inner{ top:0; left:0; }
  .oferta-mockup-img img{ width: 80%; }
}


/* ——— SLIDER BENEFICIOS ——— */
/* ——— SLIDER / MARQUEE BENEFICIOS ——— */
.beneficios-slider {
  overflow: hidden;            /* Ventana que oculta el desbordamiento */
  padding: 2rem 1rem;
  background: var(--color-secundario);
}

.beneficios-track {
  display: flex;
  gap: 1.5rem;                 /* Mismo gap que lee el script */
  width: max-content;          /* Necesario para medir scrollWidth */
}

/* Cuando JS añade .marquee, activa la animación */
.beneficios-track.marquee {
  animation: scroll-marquee var(--marquee-duration) linear infinite;
}

/* Keyframes usan las variables que pone JS */
@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--scroll-end)); }
}

/* Estilo de cada card */
.beneficio-card {
  flex: 0 0 360px;             /* Ancho fijo: actualízalo si cambias la card */
  /* background: #fff; */
  border-radius: var(--radius-lg);
  padding: 0 1.5rem 0;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.06); */
  transition: transform 0.2s, box-shadow 0.2s;
}
.beneficio-card:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 8px 24px rgba(0,0,0,0.1); */
}
.beneficio-card h3 {
  font-size: var(--fs-2);
  margin-bottom: 0.5em;
  color: var(--color-principal);
}
.beneficio-card p {
  font-size: var(--fs-0);
  color: var(--color-texto);
}

/* Opcional: pausa animación en móvil si quieres */
@media (max-width: 600px) {
  .beneficios-track.marquee { animation-play-state: paused; }
}

.beneficio-card h3 {
  margin-top: 0;              /* asegura que no haya espacio excesivo */
}
/* Fila horizontal icono + título */
.beneficio-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;          /* espacio entre icono y texto */
  margin-bottom: 0.5rem; /* separación del párrafo */
}

.beneficio-card-header h3 {
  margin: 0;             /* quita márgenes extra */
  font-size: var(--fs-2);
  color: var(--color-principal);
}

.beneficio-icon {
  width: 32px;
  height: 32px;
  stroke: var(--color-principal);
  flex-shrink: 0;
}


/* 7. MOCKUPS + FUNCIONALIDADES */
.features-mockup {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 4em calc((100vw - 1200px) / 1.4);
  background: #b9b9b9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2em;
}
.features-list {
  flex: 1 1 200px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2em;
}
.features-list h2 {
  font-size: var(--fs-1);
  font-weight: 400;
  color: var(--color-secundario);
  margin-bottom: 1em;
}
.features-list ul {
  list-style: none;
  padding: 0;
}
.features-list ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.8em;
  font-size: var(--fs-0);
  color: var(--color-secundario);
}
.features-list ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--color-acento);
}
.mockup {
  flex: 1 1 300px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.mockup img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.download-btn {
  margin-top: 1em;
  padding: 0.9em 1.7em;
  font-size: var(--fs-0);
  background: var(--color-secundario);
  color: var(--color-principal);
  border-radius: 30px;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
}
.download-btn:hover {
  background: var(--color-acento);
  transform: translateY(-2px);
}

/* 8. SECCIÓN DESTACADO */
.highlight {
  background: var(--color-secundario);
  text-align: center;
  padding: 1em 2em;
  padding-bottom: 2em;
}
.highlight ul {
  list-style: none;
  padding: 0;
}
.highlight li {
  font-size: var(--fs-0);
  margin-bottom: 0.0em;
}
.highlight li::before {
  content: "✔ ";
  color: var(--color-acento);
}

/* 9. HERO DEMO */
.hero-demo {
  width: 100%;
  padding: 2rem 1rem;
}

.hero-demo__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;  /* imagen arriba, botones abajo */
  align-items: center;
  text-align: center;
}

.hero-demo__container img {
  width: 50%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

.hero-demo__actions {
  display: flex;            /* fila de botones */
  gap: 1rem;                /* espacio entre ellos */
  margin-top: 1.5rem;       /* separación sobre la imagen */
  justify-content: center;  /* centra la fila */
}

.hero-demo__actions .btn {
  padding: .75rem 1.5rem;
  border-radius: var(--radius-btn);
  font-size: var(--fs-0);
  text-align: center;
  text-decoration: none;
}

.hero-demo__actions .btn-primary {
  background: var(--color-principal);
  color: #fff;
}

.hero-demo__actions .btn-secondary {
  background: var(--color-acento);
  color: #fff;
}
.hero-btn{
  margin-bottom: 10rem;
}

/* 10. CONTACTO */
.contacto {
  text-align: center;
  padding: 3em 2em;
  background: #f4f4f4;
}
.contacto h2 {
  font-size: var(--fs-2);
}
.contacto p {
  font-size: var(--fs-0);
}
.WhatsApp-btn {
  background-color: #306b89;
  color: white;
  border-radius: 30px;
  border: none;
  padding: 1em 2em;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* sombra base */
}

.WhatsApp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* sombra más amplia y suave */
}

/* En la sección de contacto, que el botón sea bloque y añada espacio abajo */
#contacto .WhatsApp-btn {
  display: inline-block;   /* para que respete margin-bottom */
  margin-bottom: 1rem;   /* ajusta este valor al espacio que necesites */
}

/* 11. FOOTER */
footer {
  text-align: center;
  padding-top: 1.5em;
  font-size: var(--fs--1);
 
  margin-bottom: 2rem;
}

/* Igualar ancho y centrar botones */
.hero-demo__actions {
  display: flex;
  justify-content: center;  /* centra los botones */
  gap: 1.5rem;              /* separación entre ellos */
}

.hero-demo__actions .btn {
  flex: 0 0 220px;          /* ancho fijo para ambos */
  display: inline-flex;     
  align-items: center;      /* centra texto vertical */
  justify-content: center;  /* centra texto horizontal */
  padding: 0.75rem 0;        /* solo padding vertical */
}

/* —— BLOQUES DE LA LANDING —— */
.landing-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* gap: 2rem; */
  /* padding: 0rem 1rem; */
  background: rgba(255, 255, 255, 0);
  max-width: 900px;
  margin: 0rem auto 0rem; /* incluye el espacio top que querías */
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.0);
  min-height: 500px; 
}

.landing-block__image,
.landing-block__content {
  /* mantén el flex-basis que ya tenías */
  flex: 1 1 400px;

  /* aquí el “margen interior” igual a los 1rem que usas en el container */
  padding-left: 0rem;
  padding-right: 0rem;
}


/* Imagen */
.landing-block__image img {
  max-width: 100%;
  height: auto;
  min-height: 400;
  border-radius: var(--radius-lg);
  display: block;
  margin: 0 auto;
}

/* TEXTO */
.landing-block__content h2 {
  font-size: var(--fs-3);
  font-weight: 400;
  margin-bottom: 1rem;
   padding-left: 6rem;
  color: var(--color-principal);
}
.landing-block__content ul {
  list-style: none;
  padding-left: 6rem;
  margin: 0;
}
.landing-block__content ul li {
  position: relative;
  padding-left: 2.4em;
  margin-bottom: 0.8em;
  font-size: var(--fs-0);
}
.landing-block__content ul li::before {
  content: "✔";
  position: absolute;
  left: 1rem;
  top: 0.1em;
  color: var(--color-acento);
}
/* 1. Cards con ancho uniforme y centrado */
.beneficios-track .beneficio-card {
  flex: 0 0 360px;            /* un ancho fijo para todas */
  display: flex;
  flex-direction: column;
  align-items: start;        /* centra icono + título + párrafo */
  text-align: justify;         /* centra el texto de varias líneas */
}

/* 2. Header: icono + título siempre al centro */
.beneficio-card-header {
  display: flex;
  align-items: start;
  justify-content: center;    /* centra icono y texto horizontalmente */
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* 3. Icono con tamaño fijo */
.beneficio-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

/* 4. Párrafo con máximo ancho dentro de la card */
.beneficio-card p {
  max-width: 80%;             /* evita que algunas desborden */
}


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

  /* NAVBAR: menú en columna */
  .navbar{              /* ya tiene position:fixed */
  position:fixed;
  /* … */
}
  .navbar-container {
    flex-direction: row;
   align-items:center;
  }
  .navbar-actions {
    width: 100%;
    justify-content: center;
  }
.navbar-logo{
  flex-shrink:0;
  margin-top: 0.8rem;
}
.navbar-toggle{
 margin-top: 0.8rem;
}
  /* botón hamburguesa pegado a la derecha */
  .navbar-toggle{
    display:block;               /* ya lo tenías en el MQ */
   
  }
.navbar-menu,
  .navbar-actions {
    /* ancho completo menos el padding lateral del navbar */
   
    /* transición suave */
    transition: all .65s ease;
  }

  .navbar-menu li {
  margin: 0.5rem 0;
  text-align: center;
  font-size: x-large;
}
.navbar-menu li a {
  padding: 0.5rem 1rem;
  display: block;
}

.navbar.show-menu .navbar-menu,
.navbar.show-menu .navbar-actions {
  display: flex;
}

.navbar-toggle .hamburger,
.navbar-toggle .hamburger::before,
.navbar-toggle .hamburger::after {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--color-texto);
  border-radius: 3px;
  position: relative;
}
.navbar-toggle .hamburger::before,
.navbar-toggle .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}
.navbar-toggle .hamburger::before { top: -8px; }
.navbar-toggle .hamburger::after  { top: 8px; }



  /* HERO DEMO: imagen y botones a ancho completo */
  .hero-demo__container {
    flex-direction: column;
    text-align: center;
  }
  .hero-demo__container img {
    width: 80%;
    margin-bottom: 1rem;
  }
  .hero-demo__actions {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
.hero-btn{
  margin-bottom: 1.5rem;
}
  /* GRID BENEFICIOS: una columna */
  .grid {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
  }

  /* BLOQUES de la landing: apilan imagen y texto */
  .landing-block {
    flex-direction: column;
    padding: 2rem 1rem;
    gap: 1.5rem;
  }
  .landing-block__image,
  .landing-block__content {
    flex: 1 1 100%;
    padding: 0 1rem;
    text-align: center;
  }
  .landing-block__content h2 {
    margin-bottom: 0.75rem;
  }
  .landing-block__content ul li {
    margin-bottom: 0.6em;
  }

  /* CONTACTO y FOOTER: ancho completo */
  .contacto, footer {
    padding: 2rem 1rem;
  }
}
a.btn,
a.btn:hover,
a.demo-btn,
a.demo-btn:hover {
  text-decoration: none !important;
}


/* Botón hamburguesa: oculto en desktop, visible en móvil */
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 1rem;
}
.navbar-toggle .hamburger,
.navbar-toggle .hamburger::before,
.navbar-toggle .hamburger::after {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--color-texto);
  border-radius: 3px;
  position: relative;
}
.navbar-toggle .hamburger::before,
.navbar-toggle .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}
.navbar-toggle .hamburger::before { top: -8px; }
.navbar-toggle .hamburger::after  { top:  8px; }

/* Media query para mostrar botón y esconder menú */
@media (max-width: 768px) {
  .navbar-toggle {
    display: block;
  }
  .navbar-menu,
  .navbar-actions {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    min-width: 0;
    max-width: none;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    padding: 1.2em 0 1em 0;
    text-align: center;
    z-index: 9999;
  }
  .navbar-menu li {
    width: 100%;
    margin: 0.5em 0;
  }
 .navbar-menu li a {
    width: 100%;
    font-size: 1.08em;
  }
  .navbar-actions a {
    display: block;
    margin: 0.6em auto;
    width: 100%;
    max-width: 260px;
  }
  .navbar.show-menu .navbar-menu,
  .navbar.show-menu .navbar-actions {
    display: flex;
  }
  
}

/* ─────────  Ajustes Tablet   (max-width: 992 px) ───────── */
@media (max-width: 992px){

  /* sección OFERTA + MOCKUP */
  .oferta-mockup{padding:4rem 1rem 2rem;}
  .oferta-mockup__container{gap:2rem;}
  .oferta-card__inner{
    max-width:480px;          /* más aire pero sin desbordar */
    margin-inline:auto;
  }
  .oferta-mockup-img img{max-width:420px;}

  /* slider beneficios – relleno lateral uniforme */
  .beneficios-slider{padding:3rem 1rem;}
}

/* ─────────  Ajustes Móvil   (max-width: 768 px) ───────── */
@media (max-width: 768px){

  /* NAVBAR  ─ barra completa, sin “picos” de padding */
  /* .navbar{width:calc(100% - 2rem);padding:.8rem 1.4rem;} */

  /* HERO  ─ menos altura inicial y texto centrado */
 .hero{
    /* Gradiente muy sutil en vez de la foto */
    background: linear-gradient(
                 135deg,
                 var(--color-secundario) 0%,
                 #f0f0f0 60%,
                 var(--color-bg) 100%
               ) !important;

    /* menos alto: 22 vh arriba, 10 vh abajo (ajusta a gusto) */
    padding: 18vh 1rem 0vh;
  }

  /* 2 ▸ apagamos la capa traslúcida que ya no hace falta */
  .hero::before{ display:none; }

  /* 3 ▸ texto algo más pequeño y centrado */
  .hero-text h1{
    font-size: var(--fs-4);        /* ya lo tienes, sólo lo recuerdo */
    background: transparent;       /* sin la cajita blanca si prefieres */
    text-shadow: none;             /* opcional: limpia el glow */
  }
  .hero-text p{
    font-size: var(--fs-0);
    text-shadow:none;
  }

  /* 4 ▸ botón principal con aire alrededor */
  header.hero .cta{
    margin-top: 2rem;              /* antes 3 rem — queda más compacto */
  }
}
.cta{
   background:#306b8900;
  color: var(--color-acento);
  border: 2px solid var(--color-acento);
  transition: background 0.2s, color 0.2s;
  min-width: 140px;
  padding: 6px 20px 6px 20px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
}
.cta:hover {
  background: var(--color-bg);
  color: var(--color-acento);
}
  /* OFERTA  ─ tarjeta y lista alineadas al centro */
  .oferta-card__inner{padding:2.2rem 1.4rem;text-align:center;}
  .oferta-card__lista{align-items:flex-start;gap:1rem;}
  .oferta-card__lista li{font-size:var(--fs-0);padding-left:2rem;}

  /* botones dentro de OFERTA */
  .oferta-card__cta{width:100%;max-width:280px;}

  /* MOCKUP  ─ imagen ocupa 85 % y centrada */
  .oferta-mockup-img img{width:85%;max-width:480px;}

  /* BENEFICIOS  ─ cards un poco más estrechas y scroll táctil */
  .beneficio-card{flex:0 0 280px;padding:0 .8rem 1rem;}
  .beneficios-slider{padding:2.5rem 0 3rem;}

  /* BLOQUES “landing-block”  */
  .landing-block{padding:1rem 0;gap:1.5rem;}
  .landing-block__content,
  .landing-block__image{
    padding:0 1rem;
   max-width: 600px;}
  .landing-block__content h2,
  .landing-block__content ul{padding-left:0;}
  .landing-block__content ul li{padding-left:2rem;}

/* ─────────  Ajustes Micro-móvil (max-width: 576 px) ───────── */
@media (max-width: 576px){

  /* texto general más pequeño para evitar cortes */
  html{font-size:calc(var(--fs-0) * .92);}
  
  /* HERO buttons “Ver demo” */
  .cta-primary{width:100%;max-width:320px;}

  /* BENEFICIOS – pausa marquee y agrupa cards */
  .beneficios-track.marquee{animation-play-state:paused;}
  .beneficio-card{flex:0 0 240px;}

  /* FOOTER padding */
  footer{padding:1.5rem .5rem;}
}

/* ─────────  Reduce motion global ───────── */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important;transition: none !important;}
}

/* ——— INVERSIÓN DEL ORDEN SOLO PARA LOS BLOQUES .low-occupancy EN MÓVIL ——— */

@media (max-width:768px){
  /* CTA del hero */
  header.hero .cta{
    margin-bottom:1.6rem;   /* antes ~6 em → mucho más compacto */
  }

  /* los .low-occupancy ya están en column (heredan de .landing-block) */
  
  /* 1️⃣  primero la imagen … */
  .landing-block.low-occupancy .landing-block__image  { order:-1; }   /* aparece arriba */

  /* 2️⃣  … luego el contenido */
  .landing-block.low-occupancy .landing-block__content{ order: 0; }    /* queda debajo */


/* –––– Móvil: compacta la oferta y oculta los teléfonos –––– */


  /* quita espacio extra del bloque */
  .oferta-mockup{padding: 2rem 0 1.5rem;}
  
/* 1 ▸ invierte el orden: imagen arriba, tarjeta abajo */
  .oferta-mockup__container{
    flex-direction: column-reverse;   /* antes: column */
    gap: 0rem;                        /* un poco de aire entre ambos */
  }

  /* 2 ▸ opcional: quita el desplazamiento “top” de la tarjeta */
  .oferta-card__inner{
    top: 0; left: 0;
    margin-inline: auto;
  }




  /* 1 ▸ reduce el padding externo del bloque completo */
  .oferta-mockup{
    padding: 0rem 0 !important;      /* antes 3 rem (o 2 rem) */
  }

  /* 2 ▸ minimiza la separación interna entre tarjeta e imagen */
  /* ============================
   BLOQUE OFERTA + MOCKUP · móvil
   ============================ */
@media (max-width: 768px){

  /* 1 · Invierte el orden */
  .oferta-mockup__container{
    flex-direction: column-reverse;   /* img primero, tarjeta después   */
    justify-content: flex-start;      /* anula el antiguo space-between */
    gap: .75rem;                      /* aire discreto entre ambos      */
  }

  /* 2 · Recorta márgenes / padding que daban salto */
  .oferta-mockup{               /* el contenedor exterior */
    padding: 0rem 0;         /* antes 3 rem            */
  }


.oferta-mockup-img,
.oferta-card__inner{
  flex: 0 0 auto;      /* borra el 1 1 500px heredado */
}
}


/* ≈ debajo de tu media-query de móvil (≤ 768 px) */
/* ———————————————————————————————————————————
   Ajustes ESPECÍFICOS para móvil  (≤ 768 px)
   ——————————————————————————————————————————— */
@media (max-width: 768px){

  /* 1 ▸ Tarjeta OFERTA: ancho completo y padding más compacto */
  .oferta-card__inner{
    max-width: 100%;
    margin-inline: auto;
    padding: 2rem 1.5rem;
  }

  /* 2 ▸ Slider BENEFICIOS — versión “drag” */
  /* ---------- Slider BENEFICIOS (móvil) ---------- */
  .beneficios-slider{
    overflow-x: auto;          /* ← aquí el cambio */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* inercia iOS */
    background: transparent;
    padding: 2rem 0;
    position: relative;
  }

  .beneficios-track{
    display: flex;
    gap: 1rem;
    padding: 0 1rem;
    width: max-content;        /* sigue siendo ancho real */
    scroll-snap-type: x mandatory;
    /* anula animación */
    animation: none !important;
  }
.beneficios-slider::before,
  .beneficios-slider::after{
    display:none;
  }

  /* Carta individual */
  .beneficio-card{
    flex: 0 0 60%;          /* ~60 % del viewport */
    max-width: 260px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    transition: box-shadow .2s;
  }
  .beneficio-card:not(:last-child){ margin-right: .8rem; } /* deja ver la siguiente */
  .beneficio-card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }

  /* 3 ▸ Fades que insinúan que hay más contenido a los lados */
  .beneficios-slider::before,
  .beneficios-slider::after{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 1.5rem;
    pointer-events: none;
  }
  .beneficios-slider::before{
    left: 0;
    background: linear-gradient(to right, var(--color-bg), transparent);
  }
  .beneficios-slider::after{
    right: 0;
    background: linear-gradient(to left, var(--color-bg), transparent);
  }
}



  .navbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1rem;
  padding-bottom: 2rem;     /* Añadido para evitar solapamientos */
  height: auto;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  margin: 1em auto;
  max-width: 1200px;
  position: fixed;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: visible !important;
  
}

/* 2. El contenedor principal organiza los elementos */
.navbar-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

/* 3. Logo y toggle siempre en la primera fila */
.navbar-logo,
.navbar-toggle {
  order: 1;
  display: inline-flex;
  align-items: center;
}
.navbar-toggle {
  margin-left: auto; /* Empuja el toggle al borde derecho */
}

/* 4. Menú y acciones ocultos por defecto en móvil */
.navbar-menu,
.navbar-actions {
  order: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 1rem;      /* Asegura separación debajo de la fila inicial */
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(0,0,0,0.00);
}

/* 5. Mostrar menús al hacer toggle */
.navbar.show-menu .navbar-menu,
.navbar.show-menu .navbar-actions {
  display: flex;
}
.navbar-links{
  display: table-row-group;
  width: 100%;
}
/* 6. Items del menú a ancho completo */
.navbar-menu li,
.navbar-actions a {
  width: 100%;
  margin: 0.5rem 0;
  text-align: center;
  font-size: x-large;
}
.navbar-menu li a,
.navbar-actions a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: x-large;
}
.navbar-links .navbar-menu li:first-child {
    padding-top: 1rem;  /* ajusta este valor al que necesites */
  }
navbar-links .navbar-menu li:last-child {
    padding-top: 2.5rem;  /* ajusta este valor al que necesites */
  }  
 .demo-btn{
  width: 80%;
  height: 50px;
  border-radius: 30px;
  font-size: large;
  text-decoration: none;
 } 

/* 7. Animación de la hamburguesa → X */
.navbar-toggle .hamburger,
.navbar-toggle .hamburger::before,
.navbar-toggle .hamburger::after {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar.show-menu .hamburger {
  transform: rotate(45deg);
}
.navbar.show-menu .hamburger::before {
  transform: rotate(90deg);
  top: 0;
}
.navbar.show-menu .hamburger::after {
  opacity: 0;
}
.cta{
  width: 80%;
  padding: 12px;
  
}
.navbar-menu{
  padding-block-end: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.navbar-actions{
  background-color: #306b8900;

}
}

@media (min-width: 769px) and (max-width: 992px) {
  .oferta-mockup__container {
    flex-direction: column;
    text-align: center;
  }
  /* cualquier otro ajuste de tablet… */
}

/* Ajustes específicos para pantallas “intermedias” (tablet grande) */
@media (min-width: 820px) and (max-width: 992px) {
  .navbar {
    padding: 0.8rem 1rem;      /* quita algo de padding lateral */
  }
  .navbar-container {
    gap: 0.5rem;               /* reduce el espacio entre items */
  }
  .navbar-menu {
    gap: 0.5rem;
  }
  .demo-btn, .navbar-actions .cta {
    min-width: 120px;
    text-decoration: none;          /* botones algo más estrechos */
  }
  .landing-block__content{
   max-width: 380px;
  }
  .landing-block__image{
   max-width: 400px;
  }
  .landing-block {
  width: 100%;
  max-width: 100%;
}

 .oferta-mockup__container {
    display: flex;
    flex-direction: row;      /* Asegura fila */
    justify-content: center; 
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;        /* 👈 evita que se caigan */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .oferta-card__inner {
    max-width: 420px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .oferta-mockup-img {
    max-width: 500px;
    flex: 0 0 auto;
  }
}

/* Ajustes finos para Surface Pro (912×1368) */
@media (min-width: 912px) and (max-width: 1368px) {
  .navbar {
    max-width: calc(100% - 4rem); /* que use casi todo el ancho */
  }
  .navbar-container {
    justify-content: space-around; /* distribuye más equitativo */
  }
}