/* ================================================================
   MiObraSocial — Hero Section
   Archivo: hero.css
   ================================================================ */


/* ----------------------------------------------------------------
   Variables de marca — modificar aquí para ajustar colores
   ---------------------------------------------------------------- */
:root {
  --mos-coral:         #ff5c5c;
  --mos-coral-dark:    #ff3c3c;
  --mos-gray-light:    #F2F0EF;
  --mos-coral-border:  #E8CCBF;
  --mos-gray-banner:   #EDEDED;
  --mos-gray-text:     #595959;
  --mos-body-text:     #666666;
  --mos-title-text:    #1a1a1a;
}


/* ----------------------------------------------------------------
   Wrapper principal
   ---------------------------------------------------------------- */
.mos-hero {
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.mos-hero *,
.mos-hero *::before,
.mos-hero *::after {
  box-sizing: border-box;
}


/* ----------------------------------------------------------------
   Layout interno: 2 columnas en desktop
   ---------------------------------------------------------------- */
.mos-hero__inner {
  display: grid;
  grid-template-columns: 57% 43%;
  width: 100%;
}


/* ================================================================
   COLUMNA IZQUIERDA
   ================================================================ */
.mos-hero__left {
  padding: 10px 32px 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}


/* --- Eyebrow --- */
.mos-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px!important;
  font-weight: 600;
  color: var(--mos-coral-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.45;
  margin: 0;
}

.mos-eyebrow::before {
  content: '';
  display: block;
  width: 5px;
  min-width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mos-coral);
  margin-top: 5px;
}


/* --- Título --- */
.mos-title {
  /*font-size: clamp(24px, 3vw, 42px); Reemplazado con Gem*/
  font-size: clamp(32px, 1.25rem + 2vw, 42px);
  font-weight: 500;
  line-height: 1.22;
  color: var(--mos-title-text);
  margin: 0;
}

.mos-title__accent {
  color: var(--mos-coral);
}


/* --- Subtítulo --- */
.mos-subtitle {
  font-size: 20px!important;
  color: var(--mos-body-text);
  line-height: 1.7;
  margin: 0;
}


/* --- Botón CTA --- */
.mos-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mos-coral);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  padding: 14px 26px;
  font-size: 20px;
  font-weight: 600;
  width: fit-content;
  transition: background 0.18s ease;
  border: none;
  cursor: pointer;
  animation: mos-ping 2s ease-out infinite;
}

.mos-cta:hover,
.mos-cta:focus,
.mos-cta:visited {
  background: var(--mos-coral-dark);
  color: #ffffff;
}

/* Al hacer hover: pausa la animación para no distraer al hacer clic */
.mos-cta:hover,
.mos-cta:focus {
  animation-play-state: paused;
}

.mos-cta__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Animación: pulso suave de 8px en todas las direcciones por igual */
@keyframes mos-ping {
  0%   { box-shadow: 0 0 0 0px rgba(255, 92, 92, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(255, 92, 92, 0); }
}

/* Respeta la preferencia del sistema "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  .mos-cta {
    animation: none;
  }
}


/* --- Badges --- */
.mos-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mos-badges__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mos-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--mos-body-text);
  white-space: nowrap;
}

.mos-badge__icon {
  width: 13px;
  height: 13px;
  color: var(--mos-coral);
  flex-shrink: 0;
}


/* ================================================================
   COLUMNA DERECHA
   ================================================================ */
.mos-hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px 28px 32px;
}


/* --- Contenedor de planes --- */
.mos-plans {
  background: var(--mos-gray-light);
  border-radius: 16px;
  padding: 20px 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mos-plans__title {
  font-size: 14px!important;
  font-weight: 600;
  color: var(--mos-coral-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 2px;
  padding: 10px 0;
}


/* --- Cards de plan --- */
.mos-plan {
  display: block;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid var(--mos-coral-border);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.mos-plan:hover,
.mos-plan:focus {
  border-color: var(--mos-coral);
  text-decoration: none;
}

.mos-plan--featured {
  border: 2px solid var(--mos-coral);
}

.mos-plan--featured:hover,
.mos-plan--featured:focus {
  border-color: var(--mos-coral-dark);
}

.mos-plan__banner {
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  background: var(--mos-gray-banner);
  color: var(--mos-gray-text);
  line-height: 1.4;
}

.mos-plan--featured .mos-plan__banner {
  background: var(--mos-coral);
  color: #ffffff;
}

.mos-plan__body {
  padding: 18px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo: proporción 4:1 (igual que tus archivos 200x50) */
.mos-plan__logo {
  width: 100px;
  height: 25px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

.mos-plan__name {
  flex: 1;
  font-size: 16px;
  color: var(--mos-coral);
  font-weight: 600;
  line-height: 1.4;
}

.mos-plan__arrow {
  width: 15px;
  height: 15px;
  color: var(--mos-coral);
  flex-shrink: 0;
}


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

  /* Una sola columna */
  .mos-hero__inner {
    grid-template-columns: 1fr;
  }

  .mos-hero__left {
    padding: 10px 20px 32px 20px;
    gap: 16px;
    align-items: center; /* Centra el flujo vertical en móvil */
  }

  .mos-eyebrow {
    justify-content: center; /* Centra el eyebrow de manera uniforme */
  }

  .mos-title {
    text-align: center;
  }

  .mos-subtitle {
    max-width: 100%;
    font-size: 18px;
    text-align: center;
  }

  /* CTA a ancho completo en mobile */
  .mos-cta {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 14px 20px;
  }

  .mos-badges {
    width: 100%;
    align-items: center; /* Centra la estructura de las insignias */
  }

  /* Fila 2 de badges: se apila verticalmente en mobile */
  .mos-badges__row--stack-mobile {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .mos-hero__right {
    padding: 5px 20px 36px 20px;
  }

  /* Logos levemente más chicos en mobile */
  .mos-plan__logo {
    width: 64px;
    height: 16px;
  }

  .mos-plan__name {
    font-size: 14px;
  }
}