@charset "UTF-8";

.contenedor {
    width: 100%;               /* Ancho relativo al contenedor padre */
    margin: 0 auto;            /* Centrar horizontalmente */
    padding: 10px;             /* Espacio interno entre el borde y la imagen */
    background-color: transparent; /* Color de fondo */
}

.imagen {
    width: 98%;               /* La imagen ocupa todo el ancho del contenedor */
    height: auto;              /* Mantiene la proporción */
    display: block;            /* Elimina espacio extra debajo de la imagen */
    border-radius: 8px;        /* Pequeño redondeo en la imagen */
    margin: 0 auto;            /* Centrar horizontalmente */
}

.nosotros {
	width: 90%;
	margin: auto;
	text-align: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	margin: 0.4rem auto;         /* Centrado y separación vertical */
	border-radius: 30px;
	padding: 1.5rem;
	border-color: transparent;
}

.nosotros-3-col {
	width: 100%;
	margin: auto;
	text-align: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	margin: 0.4rem auto;         /* Centrado y separación vertical */
	border-radius: 30px;
	padding: 1.5rem;
	border-color: transparent;
}

.h2-estilo {
    text-align: center;          /* Centra el texto */
    background-color: #0D6867;   /* Fondo verde (puedes cambiar el tono) */
    color: white;                /* Color del texto (opcional, para contraste) */
    padding: 15px 30px;          /* Espaciado interno para que el fondo se vea mejor */
    border-radius: 50px;         /* Bordes redondeados (ajusta el valor a tu gusto) */
    display: inline-block;       /* Ajusta el fondo al contenido y permite centrado con margen automático */
    margin: 20px auto;           /* Centra horizontalmente si es un bloque */
    width: fit-content;          /* Ajusta el ancho al contenido */

}

.p-estilo {
    text-align: justify !important;      /* Texto justificado */
    color: #000000 !important;           /* Color negro (también puedes usar 'black') */
    font-size: 1.2rem !important;        /* Tamaño de fuente ligeramente mayor para mejor lectura */
    line-height: 1.6 !important;         /* Espaciado entre líneas */
    margin-bottom: 1.2rem !important;    /* Margen inferior para separar los párrafos */
}

.p-estilo-2 {
    text-align: justify !important;      /* Texto justificado */
    color: #000000 !important;           /* Color negro (también puedes usar 'black') */
    font-size: 1rem !important;        /* Tamaño de fuente ligeramente mayor para mejor lectura */
    line-height: 1.4 !important;         /* Espaciado entre líneas */
    margin-bottom: 1.1rem !important;    /* Margen inferior para separar los párrafos */
}

    .mision-vision-grid {
        display: flex;
        gap: 2rem;                /* Espacio entre columnas */
        width: 90%;               /* Mismo ancho que .quienes-somos */
        margin: 2rem auto;         /* Centrado y separación vertical */
        flex-wrap: wrap;           /* En móviles se apilan */
    }

    .mision-vision-grid .nosotros-3-col {
        flex: 1 1 300px;
    }
    
    .mision-vision-grid .nosotros{
        flex: 1 1 300px;
    }


/* Animación de entrada para las secciones */
.nosotros, .nosotros-3-col, .contenedor {
  animation: fadeInUp 1s ease-out both;
}

.nosotros-3-col:nth-child(1) { animation-delay: 0.1s; }
.nosotros-3-col:nth-child(2) { animation-delay: 0.2s; }
.nosotros-3-col:nth-child(3) { animation-delay: 0.3s; }
.mision-vision-grid .nosotros:nth-child(1) { animation-delay: 0.4s; }
.mision-vision-grid .nosotros:nth-child(2) { animation-delay: 0.5s; }

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

/* Efecto hover para las tarjetas */
.nosotros, .nosotros-3-col {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: transparent; /* se mantiene transparente, pero puedes poner un color si quieres */
}

.nosotros:hover, .nosotros-3-col:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 30px rgba(13, 104, 103, 0.2);
  background-color: rgba(13, 104, 103, 0.02); /* tenue fondo verde */
  border-radius: 30px; /* mismo redondeo */
}

/* Los párrafos dentro de tarjetas hover se oscurecen un poco */
.nosotros:hover .p-estilo,
.nosotros-3-col:hover .p-estilo {
  color: #111 !important;
  transition: color 0.3s;
}

/* Efecto en los títulos */
.h2-estilo {
  transition: all 0.3s ease;
}

.h2-estilo:hover {
  transform: scale(1.05);
  background-color: #0f7a79 !important; /* un tono más claro */
  box-shadow: 0 4px 15px rgba(13, 104, 103, 0.4);
  cursor: default;
}

/* Imagen principal: zoom suave al pasar el mouse */
.imagen {
  transition: transform 0.4s ease, border-radius 0.4s ease;
}

.imagen:hover {
  transform: scale(1.02);
  border-radius: 20px; /* aumenta el redondeo */
}

/* Fondo semitransparente para todas las tarjetas */
.nosotros, .nosotros-3-col {
    background-color: rgba(255, 255, 255, 0.85) !important; /* Fondo blanco suave */
    backdrop-filter: blur(2px); /* Efecto vidrio (opcional, muy sutil) */
    border: 1px solid rgba(13, 104, 103, 0.2); /* Borde verde muy claro */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto hover en tarjetas */
.nosotros:hover, .nosotros-3-col:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #0D6867;
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(13, 104, 103, 0.4);
}

/* Estilo para la lista de valores */
.valores-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.valores-lista li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.valores-lista li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #0D6867;
    font-weight: bold;
    font-size: 1.3rem;
}

.valor-titulo {
    font-weight: 700;
    color: #0D6867;
}

/* Estilo para la lista de oficinas */
.oficina-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.oficina-lista li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #333;
}

.oficina-lista .icono {
    font-size: 1.5rem;
    min-width: 2rem;
    color: #0D6867;
}

.oficina-lista a {
    color: #0D6867;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s;
}

.oficina-lista a:hover {
    border-bottom-color: #0D6867;
}

/* Ajuste para los títulos dentro de las tarjetas (para que no hereden fondo no deseado) */
.nosotros .h2-estilo, .nosotros-3-col .h2-estilo {
    background-color: #0D6867 !important; /* Mantiene el verde original */
    margin-top: 0;
}

/* Mejora en la imagen principal (efecto zoom + overlay) */
.contenedor {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.imagen {
    transition: transform 0.5s ease, filter 0.5s ease;
}

.contenedor:hover .imagen {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.contenedor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(13,104,103,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    border-radius: 20px;
}

.contenedor:hover::after {
    opacity: 1;
}

/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    .nosotros, .nosotros-3-col {
        padding: 1rem;
    }
    
    .valores-lista li, .oficina-lista li {
        font-size: 1rem;
    }
}

#contenido-divs {
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 10px;
}

#contenido-divs .cosa {
	margin-bottom: 20px;
}

#contenido-divs::-webkit-scrollbar {
	width: 6px;
}

#contenido-divs::-webkit-scrollbar-track {
	background: transparent;
}

#contenido-divs::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 10px;
}

#contenido-divs::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}