.icon .mi-icono {
    max-width: 100%;   /* nunca más ancho que su contenedor */
    height: auto;      /* mantiene proporción */
    vertical-align: middle;
  }
  
  /* opcional: si quieres que siempre mida parecido a los demás íconos */
  .icon {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* espacio entre imagen y texto */
    color: var(--blanco);
  }
  
  .icon .mi-icono {
    width: 8vw;   /* ancho relativo a la pantalla */
    max-width: 40px;  /* pero no más grande que 40px */
  }
  
/* Evitar centrado por herencia de .inner */
.contenedor {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center; /* centra horizontalmente todos los hijos */
    margin: 0;
    max-width: 100%;
}

  
  /* Imagen */
  .contenedor .imagen img {
    max-width: 400px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
  }
  
  /* Texto */
  .contenedor .texto {
    flex: 1;
    text-align: left;
    margin: 0;
    max-width: 100%;
  }
  
  /* 📱 Vista móvil */
  @media (max-width: 768px) {
    .contenedor {
      flex-direction: column;
        align-items: center;
    }
  
    .contenedor .imagen img {
      max-width: 100%;
    }
  
    .contenedor .texto {
      width: 100%;
    }
  }

  /* botones y cards */
  
  .card-header {
    background-color: var(--morado);
    border-radius: 0.35rem 0.35rem 0 0;
    font-weight: normal;
    padding: 0.5rem;
    width: 512px; 
    text-align: center; /* centra el contenido */
}
  
@media (max-width: 480px) {
  .card-header {
      padding: 0.8rem;          /* reduce padding para pantallas pequeñas */
      width: 95%;               /* casi todo el ancho de la pantalla */
      max-width: none;          /* elimina límite máximo en móviles */
      margin: 0 auto;           /* centra el bloque en la pantalla */
      display: flex;
      justify-content: center;  /* centra contenido horizontal */
      align-items: center;      /* centra contenido vertical */
      box-sizing: border-box;   /* incluye padding dentro del ancho */
  }
}

/* Aseguramos que el botón sea inline-block (opcional, ya lo es por defecto) */
.btn-primary {
    display: inline-block;
    background-color: var(--guinda);
    color: var(--blanco);
    border: none;
    border-radius: 5px;
    padding: 10px 25px;
    text-align: center;
}

/* Hover con resplandor */
.btn-primary:hover {
    background-color: var(--guinda);
    color: var(--rosa-claro);
    box-shadow: 0 0 8px var(--rosa-claro), 
                0 0 15px var(--rosa-fuerte);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-container {
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem; /* separación entre botones */
    margin: 0.75rem;
}

.responsive-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  height: auto;
}

/* margen en móvil */
@media (max-width: 991.98px) { /* Bootstrap 4 lg breakpoint */
  .responsive-img {
    margin-top: 1rem;   /* equivale a .mt-3 */
    margin-bottom: 1rem;/* equivale a .mb-3 */
  }
}

.margen-guinda {
  margin-top: 1rem;       /* margen arriba */
  margin-left: 1rem;      /* margen izquierda */
  margin-bottom: 1rem;    /* margen abajo */
  border-left: 4px solid var(--guinda);
  padding-left: 0.5rem;   /* separa el contenido de la línea */
}

.btn-circle {
  border-radius: 100% !important;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {
  height: 1.8rem;
  width: 1.8rem;
  font-size: 0.75rem;
}

.btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {
  height: 3.5rem;
  width: 3.5rem;
  font-size: 1.35rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.margen-header {
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1rem; /* tamaño base para móvil */
  width: 100%;       /* ancho completo en móviles */
  width: 200px
}

@media (max-width: 991.98px) { /* móviles y tablets */
  .margen-header {
    width: 100%;     /* ocupa todo el ancho disponible */
    max-width: 100%; /* sin límite */
  }
}


.text-center {
  text-align: center !important;
}

/* Forzar todas las clases de margen vertical my-* */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }


/* Contenedor de imagen para que el zoom no corte bordes */
/* Efecto zoom */
.zoom {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Mantiene la imagen completa */
  transition: transform 0.6s ease, filter 0.6s ease; /* transición suave */
  transform-origin: center center; /* zoom desde el centro */
}

/* Zoom al pasar el cursor */
.zoom:hover {
  transform: scale(1.2); /* aumenta tamaño */
  filter: brightness(1.1); /* opcional: ilumina ligeramente */
}

.justificado {
  text-align: justify;
  display: block;
}

/* 1. Botón guinda redondeado */
.btn-guinda {
  background-color: #6A0F49;   /* Guinda */
  color: #fff;                 /* Texto blanco */
  padding: 10px 20px;          /* Espaciado interno */
  border: none;                /* Sin borde */
  border-radius: 10px;         /* Esquinas redondeadas */
  font-size: 16px;             /* Tamaño de texto */
  font-weight: bold;
  cursor: pointer;             /* Manita al pasar */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-guinda:hover {
  background-color: var(--rosa-fuerte);   /* Guinda más clara en hover */
  transform: scale(1.05);      /* Efecto zoom suave */
}

/* 2. Input file moderno */
.input-file {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blanco);
  background-color: var(--rosa-claro);   /* Guinda */
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.input-file:hover {
  background-color: var(--rosa-fuerte);
  transform: scale(1.03);
}

/* Ocultar input real */
.input-file input[type="file"] {
  display: none;
}

.file-name {
  margin-left: 15px;
  font-size: 14px;
  color: #333;
  font-style: italic;
}

.mensaje-enviado {
  color: green;
  font-weight: gibsonsemibold;
  margin-top: 10px;
  display: block;
}