body {
            background-color: #E3DFDA; /* Gris claro */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
/* Estilos para h1 y h2 */
h1, h2,h3,h4,h5,h6 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 100;
    margin-top: 0.3rem;
    margin-bottom: 0px;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h2 a {
    font-family: 'Bebas Neue', sans-serif;
    color: #333;
    text-decoration: none; /* Opcional: Eliminar el subrayado */
}

h2 a:hover {
    color: #666; /* Opcional: Cambiar el color al pasar el mouse */
}
/* Estilos para el resto del contenido */
body, p, a, input, button {
    font-family: 'Raleway', serif; 
    font-weight: 400;
}
        /* 📌 DIVS de contenido */
        .contenido {
            display: none;
            position: absolute;
            width: 100vw;
            height: 100vh;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            /* color: white;¨*/
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
        }

        .contenedor {
            text-align: center;
        }

        .contenedor img {
            max-width: 100%;
            height: auto;
            width: 250px; /* Tamaño base, ajustable según necesidad */
        }
        @media (max-width: 480px) {
		  .contenedor img {
		    width: 220px; /* Ancho específico para dispositivos móviles */
		  }
		}
        
       /* Botones y pantalla principal */
        .icono img {
          filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.3));
          animation: respirar 4s infinite ease-in-out;
          margin-bottom: .8rem;
          transition: transform 0.3s, filter 0.3s, background-color 0.3s; /* Transiciones suaves */
          width: 220px;
        }

        @keyframes respirar {
          0%, 100% {
            transform: scale(1); /* Tamaño normal */
            opacity: 1; /* Opacidad completa */
          }
          50% {
            transform: scale(1.05); /* Aumenta ligeramente el tamaño */
            opacity: 0.9; /* Reduce ligeramente la opacidad */
          }
        }
        .icono img:active {
          transform: scale(1.1); /* Aumenta el tamaño al tocar */
          filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5)); /* Cambia la sombra */
          transform: translateX(-20px); /* Desplaza hacia la izquierda */
          margin-right: 4rem;
        }
        .icono img:focus {
          transform: scale(1.1); /* Aumenta el tamaño al tocar */
          filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5)); /* Cambia la sombra */
        }
        .img-boton-arriba {
          position: absolute; /* Posicionamiento absoluto */
          top: 0; /* Lo coloca en la parte superior */
          left: 0; /* Lo coloca en la esquina izquierda */
          width: 100%; /* Ocupa el ancho completo */
          background-color: #E3CECF; /* Color de fondo */
          display: flex; /* Para centrar la imagen */
          justify-content: start; /* Centra horizontalmente */
          align-items: center; /* Centra verticalmente */
        }

        .img-boton-arriba img {
          max-width: 100%; /* Asegura que la imagen no se desborde */
          max-height: 100%; /* Asegura que la imagen no se desborde */
        }
        .img-logo-arriba { */
          top: 0; /* Lo coloca en la parte superior */
          left: 0; /* Lo coloca en la esquina izquierda */
          width: 100%; /* Ocupa el ancho completo */
          background-color: #E3CECF; /* Color de fondo */
          display: flex; /* Para centrar la imagen */
          justify-content: start; /* Centra horizontalmente */
          align-items: center; /* Centra verticalmente */
        }

        .img-logo-arriba img {
          max-width: 100%; /* Asegura que la imagen no se desborde */
          max-height: 100%; /* Asegura que la imagen no se desborde */
        }
        /* tarjeta de presentación */
        .z-1 {
            z-index: 1;
        }
       .z-2 {
            z-index: 2;
        }
        .z-3 {
            z-index: 3;
        }
        .z-4 {
            z-index: 4;
        }
        .z-5 {
            z-index: 5;
        }
        .z-6 {
            z-index: 6;
        }
        .z-7 {
            z-index: 7;
        }
        .z-8 {
            z-index: 8;
        }
        .z-9 {
            z-index: 9;
        }
        .z-10 {
            z-index: 10;
        }
        .contenedor_tarjeta {
          position: relative; /* Contenedor relativo para posicionar los hijos de manera absoluta */
          width: 100%;
          height: 100vh; /* Ocupa toda la altura de la pantalla */
        }

        /* Estilos para div_tarjeta_img */
        #div_tarjeta_img {
          position: absolute;
          top: 0; /* Coloca el div en la parte superior */
          left: 50%; /* Centra horizontalmente */
          transform: translateX(-50%); /* Ajusta el centrado */
          width: 100%; /* Ocupa el ancho completo de la pantalla */
          text-align: center; /* Centra la imagen horizontalmente */
        }

        #div_tarjeta_img img {
          max-width: 100%; /* Asegura que la imagen no se desborde */
          max-height: 100%; /* Asegura que la imagen no se desborde */
        }

        /* Estilos para div_tarjeta_contacto-boton */
        #div_tarjeta_contacto-boton {
            position: absolute;
            top: 110px;
            left: 5px;
            width: 100%;
        }

        #div_tarjeta_contacto-boton img {
            max-width: 10rem;
            max-height: 100%;
            top: 20px;
            left: 20px;
            margin: 1rem;
        }

        /* Estilos para div_tarjeta_base */
        #div_tarjeta_base {
          position: absolute;
          width: 100%; /* Ocupa el ancho completo */
          text-align: center; /* Centra la imagen horizontalmente */
          top: 2rem;
        }

        #div_tarjeta_base img {
          max-width: 100%; /* Asegura que la imagen no se desborde */
          max-height: 100%; /* Asegura que la imagen no se desborde */
        }
        /* datos de contacto */
        /* Estilos para el contenedor principal */
        #div_tarjeta_datos {
          position: absolute;
          bottom: 20px;
          left: 0;
          right: 0;
          padding: 20px;
          padding-left: 80px;
          color: #FDEDF0;
      }

        /* Estilos para el título */
        #div_tarjeta_datos h2 {
          font-family: 'Roboto', sans-serif; /* Fuente Roboto */
          font-weight: 700; /* Bold */
          font-size: 17px; /* Tamaño del título */
          margin-bottom: 10px; /* Espaciado inferior */
        }

        /* Estilos para los datos */
        #div_tarjeta_datos div {
          font-family: 'Open Sans', sans-serif; /* Fuente Open Sans */
          font-weight: 400; /* Regular */
          font-size: 16px;
          margin-bottom: 8px;
        }

        /* Estilos específicos para cada tipo de dato */
        #div_tarjeta_datos .urgencias {

        }

        #div_tarjeta_datos .whatsapp {

        }

        #div_tarjeta_datos .telefono {

        }

        #div_tarjeta_datos .correo {

        }

        #div_tarjeta_datos .direccion {

        }
        /* icnos de acción para realizar */
        /* Estilos para el contenedor flexible */
        .icono_contacto {
          display: flex; /* Activa el flexbox */
          justify-content: space-between; /* Distribuye el espacio entre los iconos */
          align-items: center; /* Centra los iconos verticalmente */
          width: 100%; /* Ocupa el 100% del ancho */          
        }

        /* Estilos para los contenedores de los iconos */
        .icono_contacto div {
          flex: 1; /* Distribuye el espacio equitativamente */
          text-align: center; /* Centra los iconos horizontalmente */
        }
        .icono_atras {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 50px;
        }
        .icono_atras img {
          max-width: 50px;
          height: auto;
          box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.2);
          border-radius: 50%;
          transition: box-shadow 0.3s ease;
        }
        .icono_atras.agenda_atras {
            top: 60px;
        }
        .position img:active {
          box-shadow: -8px -3px 6px rgba(0, 0, 0, 0.3);
        }
        /* Estilos para las imágenes */
        .icono_contacto img {
          max-width: 50px;
          height: auto;
          box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.2);
          border-radius: 50%;
          transition: box-shadow 0.3s ease;
        }
        /* Estilos para los iconos */
        /* Efecto al pasar el mouse (hover) */
        .icono_contacto img:active {
          box-shadow: -8px -3px 6px rgba(0, 0, 0, 0.3);
        }
        .alto {
          height: 30px;
        }
        /* Fuentes */
        #div_tarjeta_datos a {
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
        }

        /* 🖱️ Efecto al pasar el mouse */
        #div_tarjeta_datos a:hover {
            color: #333; /* Para que sea visible sobre el fondo claro */
            transform: scale(1.05);
        }
        /* Descarga */
        /* Estilos para el contenedor del texto */
        #div_descargar_texto {
            text-align: center; /* Centra la imagen horizontalmente */
            width: 80%; /* Ancho del 80% */
            margin: 0 auto; /* Centra el div en la página */
        }

        .contenedor #div_descargar_texto img {
            max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
            height: auto; /* Mantiene la proporción de la imagen */
        }
        .contenedor #div_descargar_texto .img_texto {
          max-width: 300px;
        }
        /* Estilos para el contenedor de los íconos */
        #div_descargar_iconos {
            display: flex; /* Activa Flexbox */
            flex-direction: row; /* Coloca los elementos en fila */
            justify-content: center; /* Centra los íconos horizontalmente */
            gap: 20px; /* Espacio entre los íconos */
            margin-top: 20px; /* Espacio superior */
        }

        #div_descargar_iconos img {
            width: 120px; /* Ancho fijo de 200px para cada ícono */
            height: auto; /* Mantiene la proporción de las imágenes */
        }
        .icono_boton {
          filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.3));
          animation: respirar 4s infinite ease-in-out;
          margin-bottom: 2.5rem;
          transition: transform 0.3s, filter 0.3s, background-color 0.3s; /* Transiciones suaves */
        }




        /* 📌 Contenedor de tarjetas */
        .custom-card-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            padding: 20px;
            margin-top: 15rem;
        }

        /* 📌 Tarjeta */
        .custom-card {
            width: 100%;
            max-width: 20rem; /* Ajustable según el diseño */
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            background: #ffffff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        /* 🎨 Efecto hover */
        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        /* 📷 Contenedor de imagen al 100% */
        .custom-card-img-container {
            width: 100%;
            overflow: hidden;
        }
        .custom-card-img-container img {
          width: 100% !important;
        }
        /* 📷 Imagen adaptada al contenido */
        .custom-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Se adapta sin deformarse */
        }

        /* 📝 Contenido */
        .custom-card-body {
            padding: 5px 15px 25px 15px;
            text-align: center;
        }

        /* 🔤 Título */
        .custom-card-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 0;
        }

        /* 📜 Texto */
        .custom-card-text {
            font-size: 1rem;
            color: #444;
            margin-bottom: 20px;
        }

        /* 🔘 Botón */
        .custom-btn {
            display: block;
            padding: 12px 20px;
            background: #f6a9aa;
            color: #fff;
            text-decoration: none;
            font-size: .9rem;
            border-radius: 5px;
            transition: background 0.3s ease-in-out;
            border: none;
            font-weight: bold;
            width: 100%;
            max-width: 9rem;
        }

        /* 🖱️ Efecto hover en el botón */
        .custom-btn:hover {
            background: #eac5c6;
            color: #333;
        }