/* BASE TYPOGRAPHY */
body {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-gutter: stable both-edges;
}

/* Anular el padding que Bootstrap añade al ocultar la scrollbar */
body.modal-open {
  padding-right: 0 !important;
}

body::-webkit-scrollbar {
  display: none;
}

h1, h2, h3, h4, h5 {
  font-family: 'Comfortaa', cursive;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 60px;
  font-weight: 300;
  letter-spacing: -1px;
  margin-bottom: 1.5rem;
  color: #2A4D6E;
}

h2 {
  font-size: 45px;
  font-weight: 300;
  color: #2A4D6E;
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

h3 {
  color: #2A4D6E;
  font-size: 33px;
  font-weight: 500;
}

p {
  color: #6f6f6f;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.text-primary {
  color: #2c707c !important;
}

.tagline {
  font-size: 23px;
  font-weight: 300;
  color: #000000;
  max-width: 800px;
  margin: 0 auto;
  font-style: normal;
}

/* Index main titles (personalizados) */
.index-main-title {
  font-family: 'Comfortaa', cursive;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}

.index-main-subtitle {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.3rem;
  color: #E0F2F1;
  margin-bottom: 2rem;
}

/* ===== RESPONSIVE TIPOGRAPHY ===== */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .tagline {
    font-size: 1.2rem;
    padding: 0 20px;
  }

  .index-main-title {
    font-size: 2rem;
  }

  .index-main-subtitle {
    font-size: 1.1rem;
  }
}


/* ÍCONOS DE THEMIFY */
@font-face {
  font-family: 'themify';
  src: url('../fonts/themify.eot');
  src: url('../fonts/themify.eot?#iefix') format('embedded-opentype'),
       url('../fonts/themify.woff') format('woff'),
       url('../fonts/themify.ttf') format('truetype'),
       url('../fonts/themify.svg#themify') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ti-"],
[class*=" ti-"] {
  font-family: 'themify' !important;
  font-style: normal !important;
  font-weight: normal !important;
  speak: none;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* BOTONES ESTANDARIZADOS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.65rem 1.8rem;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, #2A4D6E, #B5E3D8);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  gap: 0.5rem;
}

.btn:hover {
  background: linear-gradient(135deg, #B5E3D8, #2A4D6E);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.btn i, .btn svg {
  font-size: 16px;
  vertical-align: middle;
}

.btn-white {
  background: #ffffff;
  color: #2A4D6E;
  border: 2px solid #2A4D6E;
}

.btn-white:hover {
  background: #2A4D6E;
  color: #ffffff;
}

.btn-outline {
  background: transparent;
  color: #2A4D6E;
  border: 2px solid #2A4D6E;
}

.btn-outline:hover {
  background: #2A4D6E;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

  /* —— Botón flotante neumorphic con borde oscuro y pulso —— */
.btn-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  background: #E0F7F4 !important;              /* fondo claro, + !important */
  border: 2px solid #ffffff !important;        /* borde oscuro */
  border-radius: 50%;
  box-shadow:
    6px 6px 16px rgba(0,0,0,0.1),
   -6px -6px 16px rgba(255,255,255,0.7);
  color: #2A4D6E;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 1050;
  animation: pulse 2.5s infinite 1s;
}
.btn-floating:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: #1f3950;                       /* borde aún más oscuro al hover */
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.15),
   -4px -4px 12px rgba(255,255,255,0.8);
}
.btn-floating:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    inset 4px 4px 12px rgba(0,0,0,0.1),
    inset -4px -4px 12px rgba(255,255,255,0.6);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(37,211,102,0); }
}

/* —— Adaptación móvil —— */
@media (max-width: 576px) {
  .btn-floating {
    bottom: 16px;
    right: 16px;
    width: 60px;
    height: 60px;
    font-size: 26px;
  }
}

  /* —— Badge animado —— */
  .badge-custom {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background-color: #dc3545;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5) translate(4px, -4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .badge-custom.show {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }

  /* —— Ventana de chat —— */
  .chat-window {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 300px;
    max-height: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: sans-serif;
    z-index: 1060;
    animation: slide-up 0.3s ease-out forwards;
  }
  .chat-window.show {
    display: flex;
  }
  @keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);  opacity: 1; }
  }

  /* —— Header del chat —— */
/* —— Ajustes en la cabecera del chat —— */
.chat-header {
  background: linear-gradient(135deg,#B5E3D8,#2A4D6E);
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Contenedor usuario (avatar + nombre) */
.chat-user {
  display: flex;
  align-items: center;
}

/* Avatar de Sana */
.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

/* Nombre Sara */
.chat-username {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
}

/* Botón de cerrar */
.chat-header button {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}


  /* —— Cuerpo del chat —— */
  .chat-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f5f5f5;
  }
  .chat-body .message.bot {
    background: #e1ffe1;
    padding: 8px 12px;
    border-radius: 12px;
    float: left;
    max-width: 80%;
  }

  /* —— Pie del chat —— */
  .chat-input {
    padding: 8px;
    border-top: 1px solid #ddd;
  }

/* === CORRECCIÓN SCROLL HORIZONTAL EN MÓVILES === */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== VARIABLES DE MARCA ===== */
:root {
  --sana-blue: #2A4D6E;
  --sana-mint: #B5E3D8;
  --font-primary: 'Comfortaa', cursive;
  --font-secondary: 'Nunito Sans', sans-serif;
}

/* ===== NAVBAR GENERAL ===== */
.nav-menu {
  background-color: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 0.75rem 0;
  z-index: 1000;
}

/* ===== NAVBAR CON SCROLL ===== */
.nav-menu.is-scrolling {
  background: linear-gradient(
    135deg,
    rgba(42,77,110,0.95) 0%,
    rgba(181,227,216,0.95) 100%
  );
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  backdrop-filter: blur(4px);
}

/* ===== LOGO ===== */
.navbar-brand img {
  max-height: 50px;
  width: auto;
}

/* ===== ENLACES ===== */
.navbar-nav {
  display: flex !important;
  align-items: center;
  flex-direction: row;
  position: relative;
}

/* ===== SUBRAYADO ANIMADO ==== */
.navbar-nav .nav-link {
  position: relative;
  font-size: 14px;
  padding: 0.5rem 0.75rem;
  color: #fff !important;
  transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #2A4D6E 0%, #B5E3D8 100%);
  transition: left 0.3s ease, width 0.3s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  left: 0;
  width: 100%;
}

/* ===== BOTÓN DONAR ===== */
.btn-donar {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.55rem 1.5rem;
  border-radius: 30px;
  background-image: linear-gradient(135deg, #B5E3D8 0%, #2A4D6E 100%);
  color: #fff;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}
.btn-donar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background-image: linear-gradient(135deg, #2A4D6E 0%, #B5E3D8 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.btn-donar:hover::before {
  opacity: 1;
}
.btn-donar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* ===== BOTÓN HAMBURGUESA ===== */
.custom-toggler {
  border: none;
  background: transparent;
  padding: 0.25rem;
  width: 30px; height: 30px;
  position: relative;
  z-index: 1101;
}
.toggler-icon {
  display: block;
  position: absolute;
  width: 24px; height: 2px;
  background-color: #fff;
  left: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.toggler-icon:nth-child(1) { top: 6px; }
.toggler-icon:nth-child(2) { top: 13px; }
.toggler-icon:nth-child(3) { top: 20px; }

/* ===== ANIMACIÓN A X ===== */
.navbar-toggler.collapsed .toggler-icon:nth-child(1),
.navbar-toggler.collapsed .toggler-icon:nth-child(3) {
  transform: rotate(0) translateY(0);
}
.navbar-toggler.collapsed .toggler-icon:nth-child(2) {
  opacity: 1;
}
.navbar-toggler:not(.collapsed) .toggler-icon:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}
.navbar-toggler:not(.collapsed) .toggler-icon:nth-child(2) {
  opacity: 0;
}
.navbar-toggler:not(.collapsed) .toggler-icon:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* ===== MENÚ MÓVIL ===== */
@media (max-width: 991.98px) {
  .navbar-collapse.elegant-menu {
    background: linear-gradient(135deg, #2A4D6E 0%, #B5E3D8 100%);
    border-radius: 0 0 12px 12px;
    padding: 2rem 1rem;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    animation: fadeSlideDown 0.4s ease forwards;
  }
  .navbar-nav {
    flex-direction: column !important;
    text-align: left;
  }
  .navbar-nav .nav-item {
    margin: 0.75rem 0;
  }
  .navbar-nav .btn {
    width: 100%;
    margin-top: 1rem;
  }
}

/* ===== ANIMACIÓN MENÚ ENTRADA ===== */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== HEADER PRINCIPAL INDEX ===== */
:root {
  --sana-blue: #2A4D6E;        /* Deep Trust Blue */
  --sana-mint: #B5E3D8;        /* Soft Mint Green */
  --sana-font-primary: 'Comfortaa', cursive;
  --sana-font-secondary: 'Nunito Sans', sans-serif;
}

/* ===== HEADER PRINCIPAL INDEX ===== */
.index-main-header {
  position: relative;
  min-height: 100vh;
  /* Reemplazamos degradado por imagen */
  background-image: url('/images/atardecer.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
  margin: 0%;
}

/* Opcional: superposición suave para mejorar contraste */
.index-main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 77, 110, 0.4);
  z-index: 1;
}
.index-main-header .container {
  position: relative;
  z-index: 2;
}

/* Eliminamos la capa de gradiente original */
.index-overlay-gradient {
  display: none;
}


/* Onda inferior */
.index-wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
.index-wave-bottom svg {
  display: block;
  width: 100%;
  height: 120px;
}


/* Variables de marca (sin cambios) */
:root {
  --sana-blue: #2A4D6E;
  --sana-mint: #B5E3D8;
  --sana-font-primary: 'Comfortaa', cursive;
  --sana-font-secondary: 'Nunito Sans', sans-serif;
}

/* Contenedor del formulario — más compacto */
.minimal-form-sm {
  max-width: 320px;
  margin: 1rem auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 3px 10px rgba(42, 77, 110, 0.06);
  transition: box-shadow 0.3s ease;
}
.minimal-form-sm:hover {
  box-shadow: 0 4px 12px rgba(42, 77, 110, 0.08);
}

/* Solo para el modal de registro de Sana */
#sanaModal .modal-content.modal-content-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#sanaModal .modal-body {
  padding: 0 !important;
  background: transparent !important;
}

/* Si hubiera encabezado o pie, ocultarlos */
#sanaModal .modal-header,
#sanaModal .modal-footer {
  display: none !important;
}


/* CTA sutil encima */
.minimal-form-sm .form-cta {
  background: rgba(181, 227, 216, 0.15);
  color: var(--sana-blue);
  font-family: var(--sana-font-secondary);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.3rem 0.5rem;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Título */
.minimal-form-sm .form-title {
  font-family: var(--sana-font-primary);
  color: var(--sana-blue);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Nombre y Apellido */
.minimal-form-sm .name-container {
  display: flex;
  gap: 0.4rem;
}
.minimal-form-sm .name-container .minimal-input-sm {
  flex: 1;
}

/* Inputs y selects */
.minimal-input-sm {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-family: var(--sana-font-secondary);
  font-size: 0.9rem;
  color: var(--sana-blue);
  background: rgba(181, 227, 216, 0.15);
  border: none;
  border-radius: 0.75rem;
  transition: background 0.2s ease;
}
.minimal-input-sm::placeholder {
  color: #bbb;
}
.minimal-input-sm:focus {
  background: rgba(181, 227, 216, 0.25);
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(181, 227, 216, 0.5);
}

/* Email y selects específicos */
.minimal-form-sm .email-input,
.minimal-form-sm select.country-select,
.minimal-form-sm select.region-select,
.minimal-form-sm .age-select {
  margin-bottom: 0.4rem;
}

/* ——— Telefóno: prefijo + número como un solo campo ——— */
.input-group.minimal-input-sm {
  display: flex;
  align-items: center;
  background: rgba(181, 227, 216, 0.15);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: background 0.2s ease;
}

.input-group.minimal-input-sm .phone-prefix,
.input-group.minimal-input-sm .phone-input {
  padding: 0.4rem 0.6rem;
  font-family: var(--sana-font-secondary);
  font-size: 0.9rem;
  color: var(--sana-blue);
  background: transparent;  /* Hereda el fondo del contenedor */
  border: none;
  outline: none;
}

/* Mantener placeholder y focus del input */
.input-group.minimal-input-sm .phone-input::placeholder {
  color: rgba(170, 170, 170, 0.8);
}
.input-group.minimal-input-sm .phone-input:focus {
  box-shadow: inset 0 0 0 1.5px rgba(181, 227, 216, 0.5);
}

/* ——— ForWho: cuadros mejorados ——— */
.minimal-form-sm .forwho-container {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0;
}

.minimal-form-sm .forwho-option {
  flex: 1;
  position: relative;
  background: rgba(181, 227, 216, 0.15);
  border: 1px solid rgba(181, 227, 216, 0.5);
  border-radius: 0.75rem;
  padding: 0.5rem 0;
  text-align: center;
  cursor: pointer;
  transition: 
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

/* Oculta el input nativo */
.minimal-form-sm .forwho-option input {
  display: none;
}

/* Texto de la opción */
.minimal-form-sm .forwho-option span {
  display: inline-block;
  font-family: var(--sana-font-secondary);
  font-size: 0.9rem;
  color: var(--sana-blue);
  position: relative;
  transition: color 0.3s ease;
}

/* Hover suave */
.minimal-form-sm .forwho-option:hover {
  background: rgba(181, 227, 216, 0.25);
}

/* Estado seleccionado con CSS :has (Chrome ≥105, Safari ≥15.4, Firefox próximamente) */
.minimal-form-sm .forwho-option:has(input:checked) {
  background: var(--sana-mint);
  border-color: var(--sana-mint);
  box-shadow: 0 4px 12px rgba(42, 77, 110, 0.15);
  transform: translateY(-2px) scale(1.02);
}

/* Aparece el check al seleccionar */
.minimal-form-sm .forwho-option:has(input:checked) span::before {
  content: '✓';
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: bold;
}

/* Texto en blanco al estar seleccionado */
.minimal-form-sm .forwho-option:has(input:checked) span {
  color: #ffffff;
}


/* Términos y condiciones */
.terms-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.form-check-input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--sana-mint);
}
.form-check-label {
  font-family: var(--sana-font-secondary);
  font-size: 0.85rem;
  color: var(--sana-blue);
}

/* Botón CTA compacto */
.minimal-btn-sm {
  padding: 0.5rem 0;
  font-family: var(--sana-font-primary);
  font-size: 0.9rem;
  background: var(--sana-mint);
  color: var(--sana-blue);
  border: none;
  border-radius: 2rem;
  box-shadow: 0 2px 6px rgba(42, 77, 110, 0.06);
  transition: background 0.2s ease;
}
.minimal-btn-sm:hover {
  background: #a8dcd3;
}

/* Responsive */
@media (max-width: 991px) {
  .index-main-header .row {
    align-items: center;
    padding: 6rem 1rem;                               /* menos espacio vertical */
    gap: 1.2rem;
    min-height: auto;
  }
  #form {
    width: 100%;
    padding: 0 1rem;
  }
  .minimal-form-sm {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.8rem 1rem;
    gap: 0.5rem;
  }
}


/* TARJETAS MODERNAS */

/* FONDO SUAVE */
.features-soft {
  background-color: #F8F9FA;
}
.soft-card {
  background-color: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.9s ease forwards;
  opacity: 0;
}

.soft-card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 36px rgba(245, 158, 11, 0.25);
  background: linear-gradient(145deg, #FFF3E0, #FFE5D9);
}

/* Estilo al aparecer (usado por animación) */
.soft-card:nth-child(1) {
  animation-delay: 0.2s;
}
.soft-card:nth-child(2) {
  animation-delay: 0.4s;
}
.soft-card:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ÍCONOS CON ESTILO NATURAL */
.icon-box {
  background: linear-gradient(135deg, #FDE68A 0%, #FCA5A5 100%);
  color: #2A4D6E;
  font-size: 30px;
  padding: 20px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(252, 165, 165, 0.3); /* sombra más cálida */
  transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}

/* Hover elegante */
.soft-card:hover .icon-box {
  transform: scale(1.1);
  background: linear-gradient(135deg, #FECACA 0%, #FCD34D 100%);
  color: #2A4D6E;
}


.soft-card:hover .icon-box {
  transform: scale(1.1);
}

/* TEXTOS */
.card-title {
  font-family: 'Comfortaa', cursive;
  font-size: 20px;
  color: #2A4D6E;
  margin-bottom: 0.75rem;
}

.card-text {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  color: #6F6F6F;
}


/* UI STEPS LIST */
.ui-steps {
  padding-left: 0;
}


/* VIDEO WRAPPER - para móviles y desktop */
.video-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* VIDEO */
.sana-app-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
}

/* ALTURA COMPLETA SOLO EN DESKTOP */
@media (min-width: 992px) {
  .video-wrapper {
    height: 100%;
  }

  .sana-app-video {
    height: 100%;
    object-fit: cover;
  }
}

/* ESPACIADO GENERAL */
#sana-app h2 {
  font-size: 32px;
  font-family: 'Comfortaa', cursive;
  color: #2A4D6E;
}

#sana-app p {
  font-size: 16px;
  font-family: 'Nunito Sans', sans-serif;
  color: #6F6F6F;
}



.circle-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: linear-gradient(135deg, #2A4D6E, #B5E3D8);
  color: #FFF;
  font-family: 'Comfortaa', cursive;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.ui-steps .step-title {
  color: #2A4D6E;
  font-family: 'Comfortaa', cursive;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.ui-steps p {
  color: #6F6F6F;
  font-family: 'Nunito Sans', sans-serif;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* TESTIMONIOS */
.testimonials .client-img {
  width: 110px;
  margin: 30px auto;
  border-radius: 50%;
  box-shadow: 0px 9px 32px rgba(0, 0, 0, 0.07);
}

.testimonials-single {
  max-width: 80%;
  margin: 0 auto;
}

.blockquote {
  color: #7a767a;
  font-weight: 300;
  font-style: italic;
}

.owl-theme .owl-dots .owl-dot span {
  background: #e7d9eb;
  width: 35px;
  height: 8px;
  border-radius: 10px;
  transition: all 0.3s ease-in;
}

.owl-theme .owl-dots .owl-dot.active span {
  background: #ff487e;
  box-shadow: 0px 9px 32px rgba(0, 0, 0, 0.07);
}


/* ================= MODAL DONAR ================= */
.modal-donar-content {
  border-radius: 12px;
  padding: 1.5rem;
  background: #ffffff;
  box-shadow: 0px 12px 48px rgba(0, 0, 0, 0.2);
}

.modal-donar-content h5 {
  font-size: 1.6rem;
  color: #2A4D6E;
  font-family: 'Comfortaa', cursive;
}

.modal-donar-content .lead {
  color: #2A4D6E;
  font-size: 1.1rem;
  font-weight: 500;
}

.modal-donar-content p {
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
}

.modal-donar-content .modal-footer .btn {
  font-size: 14px;
  padding: 0.65rem 1.8rem;
  border-radius: 30px;
}

/* Asegurar que el backdrop cubra toda la pantalla */
.modal-backdrop.show {
  opacity: 0.5;
  background-color: #000;
}

/* PRELOADER SANA */
#sana-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2A4D6E 0%, #B5E3D8 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#sana-preloader.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#sana-lottie {
  width: 180px;
  height: 180px;
}

/* MODAL: POLÍTICA DE PRIVACIDAD */
#privacyModal .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  animation: fadeIn 0.3s ease-in-out;
}

#privacyModal .modal-header,
#privacyModal .modal-footer {
  background-color: #f5f9f8;
  border: none;
  padding: 1rem 1.5rem;
}

#privacyModal .modal-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#privacyModal .modal-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  justify-content: flex-end;
}

#privacyModal .modal-title {
  font-family: 'Comfortaa', cursive;
  font-size: 1.4rem;
  color: #2A4D6E;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#privacyModal .modal-title i {
  font-size: 1.4rem;
  color: #6F9DA5;
}

#privacyModal .modal-body {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1.5rem;
}

#privacyModal .modal-body h6 {
  font-size: 1.1rem;
  color: #2A4D6E;
  margin-top: 1.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#privacyModal .modal-body h6::before {
  content: "\e697";
  font-family: 'themify';
  font-size: 1rem;
  color: #6F9DA5;
}

#privacyModal .modal-body ul {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

#privacyModal .modal-body li {
  margin-bottom: 0.5rem;
}

#privacyModal .update-date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1rem;
}

#privacyModal .btn-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #6F6F6F;
  opacity: 1;
}

#privacyModal .btn-close:hover {
  color: #2A4D6E;
  opacity: 1;
}

#privacyModal .btn-outline-secondary {
  border: none;
  background: none;
  color: #6F6F6F;
  font-size: 0.95rem;
  padding: 0.3rem 0.6rem;
  transition: all 0.2s ease-in-out;
}

#privacyModal .btn-outline-secondary:hover {
  color: #2A4D6E;
  background-color: #f0f0f0;
}

/* BOTÓN CIERRE LIMPIO (X) */
#privacyModal .btn-close-custom {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #6F6F6F;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease;
}

#privacyModal .btn-close-custom:hover {
  color: #2A4D6E;
}


/* FOOTER COMBINADO */
.sana-footer-combined {
  background-color: #f1f4f3;
  /* Se elimina la línea de borde superior */
  border-top: none;
}

.sana-footer-combined p {
  color: #444;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.footer-link {
  color: #2A4D6E;
  font-size: 0.9rem;
  text-decoration: none;
  margin: 0 0.4rem;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #6F9DA5;
  text-decoration: underline;
}

.footer-social {
  color: #2A4D6E;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.footer-social:hover {
  color: #6F9DA5;
}

.footer-social svg path {
  transition: fill 0.3s ease;
}

.footer-social:hover svg path {
  fill: #6F9DA5;
}

.footer-logo{
  width: auto;           /* evita deformación */
  height: 44px;          /* ajusta el tamaño visible */
  object-fit: contain;   /* asegura encaje correcto si se aplica un contenedor */
  display: inline-block; /* alinea bien con el texto */
}


.sana-pro-section {
  background: linear-gradient(135deg, #B5E3D8, #ffffff);
  padding: 80px 20px;
}

/* Footer nav helpers */
.footer-nav .list-inline-item + .list-inline-item {
  margin-left: 0.4rem;
}
.footer-nav .footer-link {
  white-space: nowrap;
}


/* ===== WRAPPER GENERAL ===== */
.sana-pro-wrapper{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;  /* Centrado global */
  gap:2rem;
}

/* ===== DESKTOP (≥992 px): Img ← | Texto → ===== */
@media (min-width:992px){
  .sana-pro-wrapper{flex-direction:row-reverse;}
  .sana-pro-text{padding-left:2rem;text-align:left;}
  .sana-pro-image{padding-right:2rem;}
}

/* ===== CONTENIDO TEXTO ===== */
.sana-pro-text{
  flex:1 1 45%;
  color:#2A4D6E;
}
.sana-pro-text .btn{
  display:inline-block;
  padding:.9rem 2.2rem;
  border-radius:999rem;
  background:#2A4D6E;
  color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
  transition:transform .2s ease;
  margin-top:1rem;
}
.sana-pro-text .btn:hover{transform:translateY(-2px);}

/* ===== CONTENEDOR IMAGEN ===== */
.sana-pro-image{
  flex:1 1 45%;
  display:flex;
  justify-content:center;
}
.sana-pro-image img{
  width:100%;
  max-width:500px;            /* Limita en monitores grandes */
  max-height:480px;
  object-fit:cover;
  object-position:center;
  border-radius:20px;
  box-shadow:0 8px 30px rgba(0,0,0,.1);
}

/* ===== TABLET & MÓVIL (<992 px) ===== */
@media (max-width:991px){
  .sana-pro-wrapper{flex-direction:column;}
  .sana-pro-text,
  .sana-pro-image{flex:1 1 100%;}

  /* Imagen con altura proporcional y recorte centrado */
  .sana-pro-image img{
    max-width:100%;
    max-height:none;
    aspect-ratio:4/3;        /* Evita “imagen larguísima” */
  }
}


/* Animaciones */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

/* Responsivo */
@media (max-width: 768px) {
  .sana-pro-wrapper {
    flex-direction: column-reverse;
    text-align: center;
  }

  .sana-pro-text h2 {
    font-size: 2rem;
  }

  .sana-pro-text p {
    font-size: 1rem;
  }
}

/* FAQ Sección */
.sana-faq-section {
  background-color: #ffffff;
  padding: 60px 20px;
}

/* Acordeón FAQ */
.faq-accordion {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cada ítem FAQ */
.faq-item {
  background: transparent;
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.3s ease;
  overflow: hidden;
  padding: 0.5rem; /* NUEVO: separación arriba y abajo del bloque */
}

/* Pregunta */
.faq-question {
  all: unset;
  width: 100%;
  font-family: 'Comfortaa', cursive;
  font-size: 1.2rem;
  color: #2A4D6E;
  padding: 1rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  text-align: left;
}

/* Flecha */
.faq-question::after {
  content: '>';
  font-size: 1.2rem;
  color: #6F9DA5;
  margin-left: 10px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover sobre la pregunta */
.faq-question:hover {
  color: #3A664A;
}

.faq-question:hover::after {
  color: #3A664A;
}

/* Pregunta abierta */
.faq-item.open .faq-question::after {
  transform: rotate(90deg);
}

/* Respuesta */
.faq-answer {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  color: #6f6f6f;
  line-height: 1.7;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 0; /* ← inicia sin padding cuando está cerrado */
  transition: height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.faq-item.open .faq-answer {
  height: auto;
  padding: 0rem 0 1.2rem 0; /* NUEVO: más espacio arriba y abajo cuando abre */
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-question {
    font-size: 1.05rem;
    padding: 1rem 0;
  }
  .faq-answer {
    font-size: 0.95rem;
  }
}

/* CALL TO ACTION - APP DOWNLOAD (Sana Style Fondo Gris Claro) */

.store-badge {
  height: 60px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.bg-gradient {
  background: linear-gradient(135deg, #2A4D6E 0%, #B5E3D8 100%);
}

/* Comparación Sana vs terapia */

/* Estilo general */
.comparison-table {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff; /* corregido: fondo blanco total */
  font-family: 'Nunito Sans', sans-serif;
}

/* Fila */
.comparison-row {
  display: contents;
}

/* Celdas */
.cell {
  background-color: #ffffff;
  padding: 1rem;
  font-size: 0.95rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee; /* Separador visual */
}

/* Última fila: quitamos borde */
.comparison-row:last-child .cell {
  border-bottom: none;
}

/* Encabezado */
.header .feature-header {
  background-color: #ffffff;
}

.header .brand {
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
}

/* Logo de Sana */
.sana-logo {
  height: 24px;
  width: auto;
}

/* Columna Sana resaltada */
.header .brand.sana {
  background-color: #2A4D6E; /* Deep Trust Blue */
  color: #ffffff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Celdas de la columna Sana (excepto header) */
.cell:nth-child(2):not(.brand) {
  background-color: #fafcfc;
  font-weight: 600;
}

/* Última celda de Sana: borde redondo abajo */
.comparison-row:last-child .cell:nth-child(2) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Columna Tradicional */
.header .brand.traditional {
  background-color: #ffffff;
  color: #666666;
}

/* Íconos normales */
.cell img {
  width: 18px;
  height: 18px;
}

/* Íconos cancel pequeños */
.cancel-icon {
  width: 12px !important;
  height: 12px !important;
}


.cell:nth-child(2):not(.brand) img {
  filter: drop-shadow(0 0 1px #6F9DA5);
}

/* Responsive */
@media (max-width: 768px) {
  .comparison-table {
    grid-template-columns: 1fr 0.6fr 0.6fr;
  }

  .cell {
    font-size: 0.9rem;
    padding: 0.75rem;
  }

  .header .brand {
    font-size: 0.95rem;
  }

  .sana-logo {
    height: 20px;
  }
}

/* Estilos para sección de descarga Sana */
.sana-download-section {
  background-color: #F7F9FA; /* Fondo gris claro */
  padding: 60px 0;
}

.sana-download-section .container {
  color: #2A4D6E;
}

.sana-download-section .box-icon svg {
  width: 64px;
  height: 64px;
  stroke: #2A4D6E;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 20px;
}

.sana-download-section h2 {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.sana-download-section .tagline {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.1rem;
  color: #3A4E5A;
  margin-bottom: 2rem;
}

.sana-download-section .store-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap; /* No se apilan */
}

.sana-download-section .store-badge {
  height: 60px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sana-download-section .store-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(42, 77, 110, 0.2);
}

.sana-download-section p small {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.9rem;
  color: #6F9DA5;
}

/* Responsive: garantizar que sigan uno al lado del otro incluso en móviles */
@media (max-width: 600px) {
  .sana-download-section .store-badges {
    gap: 16px;
    flex-wrap: nowrap;
    flex-direction: row;
  }

  .sana-download-section .store-badge {
    height: 50px;
  }
}

/* — Contenedor del Swiper — */
.gallery-swiper {
  width: 100%;
  padding-bottom: 50px;
  position: relative;
}

/* — Ocultar flechas (no se usan) — */
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* — Tarjeta e imagen base — */
.gallery-slide {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* — Paginación elegante — */
.swiper-pagination {
  bottom: 10px !important;
}
.swiper-pagination-bullet {
  background-color: #B5E3D8;
  opacity: 0.5;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
  background-color: #2A4D6E;
  opacity: 1;
}

/* — Efectos en desktop (pantallas ≥768px) — */
@media (min-width: 768px) {
  /* atenuar laterales */
  .gallery-swiper .swiper-slide {
    opacity: 0.7;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  /* destacar centro y sus adyacentes */
  .gallery-swiper .swiper-slide-active,
  .gallery-swiper .swiper-slide-next,
  .gallery-swiper .swiper-slide-prev {
    opacity: 1;
  }
  /* escalar y sombrear sólo el activo */
  .gallery-swiper .swiper-slide-active .gallery-slide {
    transform: scale(1.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  }
}

/* — Móvil (pantallas <768px): todos brillantes — */
@media (max-width: 767.98px) {
  .gallery-swiper .swiper-slide {
    opacity: 1 !important;
    transform: none !important;
  }
  .gallery-slide {
    border-radius: 16px;
  }
}

/* — Móvil extra pequeño (pantallas <480px): radius reducido — */
@media (max-width: 479.98px) {
  .gallery-slide {
    border-radius: 14px;
  }
}


/* TESTIMONIOS*/


:root{
  --scroll-time: 20s;   /* velocidad */
  --logo-gap: 1.5rem;   /* separación homogénea */
}

.logo-slider{ background:#fff; padding-block:.5rem; }

/* Pista que se mueve */
.logo-track{
  display:flex;
  white-space:nowrap;
  width:max-content;
  animation:scroll var(--scroll-time) linear infinite;
  will-change:transform;
}

.logo-set{
  display:flex;
  align-items:center;          /* centra verticalmente los logos */
}

/* Logos */
.logo-set img{
  height:70px;                 /* MISMA ALTURA para todos */
  width:auto;                  /* ancho proporcional, sin deformar */
  flex:0 0 auto;
  margin-right:var(--logo-gap);
  filter:grayscale(100%);
  opacity:.7;
  transition:filter .3s, opacity .3s;
}
.logo-set img:hover{ filter:none; opacity:1; }

/* Animación (3 bloques) */
@keyframes scroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-33.333333%); }
}

/* Gradientes blancos laterales */
.fade-edge{
  position:absolute; top:0; bottom:0; width:4rem;
  pointer-events:none; z-index:2;
  background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%);
}
.fade-edge.right{ right:0; transform:scaleX(-1); }
.fade-edge.left { left:0; }

/* Responsive */
@media (max-width:576px){
  .logo-set img{ height:50px; margin-right:1rem; }
}


:root {
  --sana-blue: #2A4D6E;
  --sana-mint: #B5E3D8;
  --text-gray: #4B5563;
}

.sana-t-section {
  background: #fff;
  padding: 5rem 1rem;     /* aumentado padding general */
  font-family: 'Nunito Sans', sans-serif;
}

.sana-t-header {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto 3rem;    /* más espacio debajo del header */
}
.sana-t-header h2 {
  font-family: 'Comfortaa', cursive;
  font-size: 2.25rem;      /* ligero aumento */
  color: var(--sana-blue);
  margin-bottom: .75rem;
}
.sana-t-header .purpose-subtext {
  font-size: 1.25rem;
  color: var(--text-gray);
}

.sana-t-grid {
  display: grid;
  gap: 5rem;               /* gap mayor */
  padding: 2rem;           /* padding interno ampliado */
}
@media (min-width: 768px) {
  .sana-t-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* Imagen testimonial */
.sana-t-image-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  perspective: 1000px;
  position: relative;
  max-width: 80%;          /* reduce tamaño en desktop */
  margin: 0 auto;          /* centra el wrapper */
}
.sana-t-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.15);
  transition: transform .6s cubic-bezier(.23,1,.32,1), opacity .6s;
}

/* Contenido texto */
.sana-t-content {
  display: flex;
  flex-direction: column;
  padding: 0rem;           /* padding interno mayor */
}
.sana-t-text {
  max-width: 38rem;
  margin-bottom: 2.5rem;   /* más separación abajo */
}
.sana-t-name {
  font-family: 'Comfortaa', cursive;
  font-size: 2rem;         /* aumento */
  color: var(--sana-blue);
  margin: 0 0 .75rem;
}
.sana-t-role {
  font-size: 1.125rem;
  color: #6B7280;
  margin-bottom: 1.25rem;
}
.sana-t-quote {
  font-size: 1rem;
  color: var(--text-gray);
  line-height: 1.9;
}

/* Variables para tamaño y espacio */
:root {
  --arrow-size-desktop: 1.5rem;
  --arrow-size-mobile: 1.5rem;
  --arrow-padding: 0.75rem;
  --arrow-gap-desktop: 2rem;
  --arrow-gap-mobile: 1rem;
}

.sana-t-arrows {
  display: flex;
  justify-content: center;
  gap: var(--arrow-gap-desktop);
  margin-bottom: 2rem;
}

.sana-t-arrow {
  background: transparent;
  border: none;
  padding: var(--arrow-padding);
  color: var(--sana-blue);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  /* Aumenta el área de toque sin mostrar fondo */
}
.sana-t-arrow svg {
  width: var(--arrow-size-desktop);
  height: var(--arrow-size-desktop);
}
.sana-t-arrow:hover {
  color: var(--sana-mint);
  transform: translateX(-2px);
}
#sana-t-next:hover {
  transform: translateX(2px);
}
.sana-t-arrow:focus {
  outline: 2px dashed var(--sana-blue);
  outline-offset: 3px;
}

/* Ajustes responsive para móvil */
@media (max-width: 767px) {
  .sana-t-arrows {
    gap: var(--arrow-gap-mobile);
    margin-bottom: 1.5rem;
  }
  .sana-t-arrow {
    padding: calc(var(--arrow-padding) * 0.75);
  }
  .sana-t-arrow svg {
    width: var(--arrow-size-mobile);
    height: var(--arrow-size-mobile);
  }
}



/* Botón CTA centrado */
.sana-t-cta {
  background: var(--sana-blue);
  color: #fff;
  padding: 1rem 2rem;      /* botón más grande */
  border-radius: 2rem;
  font-weight: 600;
  display: block;
  width: max-content;
  margin: 0 auto 2.5rem;   /* centrado y más separación */
}

/* Mensaje de Lumi centrado */
.sana-t-lumi,
.sana-t-disclaimer {
  text-align: center;
  margin: .75rem 0 0;      /* un poco más de espacio arriba */
}

/* Ajustes mobile */
@media (max-width: 767px) {
  .sana-t-grid {
    grid-template-columns: 1fr;
    gap: 3rem;             /* gap medio en móvil */
    padding: 0;
  }
  .sana-t-content {
    align-items: center;
    padding: 1.5rem;
  }
  .sana-t-header h2 { font-size: 1.75rem; }
  .sana-t-image-wrapper {
    max-width: 100%;       /* full width en móvil */
  }
  .sana-t-name { font-size: 1.5rem; }
  .sana-t-quote { font-size: 1rem; }
}

/* ===== BLOG ===== */
.blog-article .article-content h2 { margin-top: 2rem; margin-bottom: .75rem; }
.blog-article .article-content h3 { margin-top: 1.5rem; margin-bottom: .5rem; }
.blog-article .article-content p  { margin-bottom: 1rem; }
.blog-article .article-content ul, 
.blog-article .article-content ol { margin-bottom: 1rem; padding-left: 1.25rem; }
.blog-article .article-hero img { border-radius: 16px; }

.cta-sana {
  background: #f7f9fa;
  border: 1px solid #e7eef0;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

#foro details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--sana-blue);
}

:root{
  --sana-blue:#2A4D6E;
  --sana-green:#0f6a54;
  --sana-mint:#B5E3D8;
  --font-primary:'Comfortaa',cursive;
  --font-secondary:'Nunito Sans',sans-serif;
}