/* seguridad.css — Layout de seguridad */

.security-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f4f8ff, #f9fcff);
}

/* Sub-clases de info-container para seguridad */
.security-text,
.security-info { /* estilo base heredado de info-container en main.css */ }

.security-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto 64px;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .security-row { grid-template-columns: 1fr 1fr; }
}

.top-row    { margin-bottom: 80px; }
.bottom-row { margin-bottom: 0; }

/* Centrar mockup */
.security-phone {
  display: flex;
  justify-content: center;
}

/* Imagen estática */
.security-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.security-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .security-section { padding: 40px 0; }
  .security-row  { gap: 24px; margin-bottom: 40px; }
  .top-row { margin-bottom: 60px; }
}