:root{
  --brand-600:#2f7a6e;     /* verde principal */
  --brand-700:#256d62;
  --brand-800:#1e5a51;
  --ring:#b9e0d8;          /* borde/acento suave */
}

html, body {
  height: 100%;
  background-color: #0b5f4a;
}

body {  
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;  
}

/* Header con gradiente y ligera blur */
.app-header {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  backdrop-filter: saturate(140%) blur(4px);
}

.logo-header{
  height: 28px;
  width: auto;
}

/* Contenedor de la sección principal */
.section-wrap{
  padding: clamp(16px, 2.5vw, 28px);
}

/* Tarjeta moderna */
.card-modern{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(16,24,40,.04),
    0 8px 24px rgba(16,24,40,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card-modern:hover{
  transform: translateY(-2px);
  box-shadow:
    0 2px 6px rgba(16,24,40,.06),
    0 14px 32px rgba(16,24,40,.10);
  border-color: var(--ring);
}

/* Contenido: texto arriba, imagen abajo */
.card-modern .card-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 14px;
  min-height: 280px;     /* asegura altura visual consistente */
}

.card-modern .card-title{
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  margin-bottom: 6px;
}

.card-modern .card-text{
  color: #334155;
  line-height: 1.45;
  font-size: .95rem;
}

/* Contenedor de imagen pegado al fondo */
.card-modern .media-bottom{
  margin-top: auto;      /* empuja hacia abajo */
  display: grid;
  place-items: center;
  padding-top: 6px;
}

/* Imagen responsiva sin deformar; controla altura máxima */
.img-paso{
  height: clamp(96px, 12vw, 140px);
  width: auto;
  object-fit: contain;
}

/* Píldora/badge opcional */
.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  font-size: .75rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--brand-800);
  border: 1px solid #d1fae5;
}

@media (min-width: 1200px){
  .card-modern .card-body{ min-height: 300px; }
}