@charset "utf-8";
/* CSS Document */
/* Variables de color (ajusta estos colores a tu gusto) */
:root {
    --color-fondo-pagina: #E3E3E3; /* Gris claro de fondo de página */
    --color-fondo-blanco: #FFFFFF; /* Blanco para secciones internas */
    --color-gris-claro: #F7F7F7; /* Gris muy claro para fondo de tarjetas */
    --color-texto-oscuro: #171717; /* Negro/Gris oscuro para títulos */
    --color-texto-gris: #595959; /* Gris medio para subtítulos/biografía */
    --color-icono-fondo: #EBEBEB; /* Fondo de iconos de redes sociales */
    --espacio-padding: 20px;
}

/* ----------------------------------
 * ESTILOS GENERALES
 * ---------------------------------- */
body {
    background-color: var(--color-fondo-pagina);
    font-family: 'Instrument Sans', sans-serif;
    display: flex;
    justify-content: center; 
    margin: 0;
    min-height: 100vh;
}

.link-bio {
    width: 100%;
    max-width: 900px; 
    background-color: var(--color-fondo-blanco);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* ----------------------------------
 * CABECERA Y PERFIL SUPERPUESTO
 * ---------------------------------- */
.profile-header {
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-color: var(--color-fondo-blanco);
    padding-bottom: 20px; 
}

/* Estilo para la imagen de portada */
.profile-header::before {
    content: '';
    display: block;
    height: 200px; 
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-image: url('images/back02.jpg'); 
    background-size: cover;
    background-position: 49% 21.6%; 
}

/* Botones flotantes (Contacto/QR) */
.floating-buttons {
    position: absolute;
    top: 10px; 
    right: 10px; 
    display: flex;
    gap: 8px;
    z-index: 10;
}

.float-btn {
    background-color: var(--color-texto-oscuro);
    color: var(--color-fondo-blanco);
    border: none;
    border-radius: 12px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor de la imagen de perfil para la superposición */
.profile-image-wrapper {
position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 0 6px #ff9f28;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ----------------------------------
 * SECCIÓN DE CONTACTO / LLAMADA A LA ACCIÓN
 * ---------------------------------- */

.contact-section {
    padding: var(--espacio-padding);
    padding-top: 20px;
}

.contact-section h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texto-oscuro);
    margin-bottom: 15px;
    margin-top: 0;
}

.contact-card {
    display: block;
    padding: 10px;
    background-color: var(--color-texto-oscuro); /* Color de fondo oscuro */
    color: var(--color-fondo-blanco);
    border-radius: 12px;
    text-decoration: none;
    transition: opacity 0.2s;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.contact-card:hover {
    opacity: 0.9;
}

.card-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar el contenido horizontalmente */
    gap: 15px;
}

.card-icon-lg {
    font-size: 24px;
    /* Usamos un color que contraste bien, aunque el icono de WA ya es blanco */
    color: var(--color-fondo-blanco); 
}

.card-action-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-fondo-blanco);
    margin: 0;
}

/* ----------------------------------
 * INFORMACIÓN DE TEXTO
 * ---------------------------------- */
.main-info {
    padding: var(--espacio-padding);
    padding-top: 80px; 
    text-align: center;
}

.name-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

h1 {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-texto-oscuro);
    margin: 0;
}

.verified-icon {
    color: var(--color-texto-oscuro);
    font-size: 14px;
    margin-left: 5px;
}

.subtitle {
    font-size: 14px;
    color: var(--color-texto-gris);
    line-height: 150%;
    margin: 0 0 15px 0;
}

.bio-text {
    font-size: 12px;
    color: var(--color-texto-gris);
    line-height: 150%;
    text-align: center;
    padding: 0 10px;
    margin-top: 15px;
}

/* ----------------------------------
 * SECCIÓN DE MAPA DE UBICACIÓN
 * ---------------------------------- */

.map-section {
    padding: var(--espacio-padding);
    padding-top: 20px;
    padding-bottom: 40px; 
}

.map-section h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texto-oscuro);
    margin-bottom: 15px;
    margin-top: 0;
}

.map-container {
    width: 100%;
    /* Altura fija para el mapa */
    height: 300px; 
    border-radius: 12px;
    overflow: hidden; /* Recorta el iframe para que la esquina sea redonda */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none; /* Asegura que no haya un borde feo alrededor del iframe */
}


/* ----------------------------------
 * BOTONES DE REDES SOCIALES
 * ---------------------------------- */
.social-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; 
    margin: 20px 0;
}

.social-icon-btn {
    background-color: var(--color-icono-fondo);
    color: var(--color-texto-oscuro);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.2s;
}

.social-icon-btn:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

/* ----------------------------------
 * SECCIÓN DE ENLACES (TARJETAS)
 * ---------------------------------- */
.links-section {
    background-color: var(--color-fondo-blanco);
    padding: var(--espacio-padding);
}

.links-section h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texto-oscuro);
    margin-bottom: 15px;
    margin-top: 0;
}

.link-card {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #ff8200;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.05); 
    transition: background-color 0.2s;
}

.link-card:hover {
    background-color: #E07200;
}

.card-icon-container {
    width: 40px;
    height: 40px;
    min-width: 40px; 
    margin-right: 15px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-icono-fondo); 
}

.card-icon-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-icon-container .fa-regular {
    font-size: 20px;
    color: var(--color-texto-oscuro);
}

.card-text {
    text-align: left;
}

.card-title {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 13px;
    color: #fff;
    line-height: 1.4;
}

/* ----------------------------------
 * GALERÍA DE FOTOS (USANDO SWIPER.JS)
 * ---------------------------------- */

.gallery-section {
    padding: var(--espacio-padding);
    padding-top: 0; 
}

.gallery-section h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texto-oscuro);
    margin-bottom: 15px;
    margin-top: 20px; 
}

/* El contenedor principal de Swiper */
.mySwiper {
    width: 100%;
    padding-bottom: 40px; 
}

/* El item individual */
.gallery-item {
    width: 100%; 
    height: 250px; 
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Estilos de las flechas (flechas de navegación de Swiper) */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-fondo-blanco) !important;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    transition: background-color 0.2s;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px !important;
}

/* Estilos de la paginación (puntos de Swiper) */
.swiper-pagination-bullet-active {
    background: var(--color-texto-oscuro) !important;
}



/* ----------------------------------
 * GALERÍA DE FOTOS (USANDO SWIPER.JS) - ACTUALIZADA CON TEXTO
 * ---------------------------------- */

.tienda-section {
    padding: var(--espacio-padding);
    padding-top: 0; 
}

.tienda-section h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texto-oscuro);
    margin-bottom: 15px;
    margin-top: 20px; 
}

/* Contenedor completo de la diapositiva */
.tienda-item {
    width: 100%; 
    background-color: var(--color-gris-claro);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Ya no definimos la altura aquí, sino en la imagen y el caption */
    overflow: hidden; 
}

/* Contenedor de la Imagen */
.tienda-image-wrapper {
    height: 250px; /* Altura fija para la imagen */
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

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

/* Sección de Títulos y Subtítulos */
.tienda-caption {
    padding: 15px;
    text-align: left;
    background-color: var(--color-fondo-blanco);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.tienda-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-texto-oscuro);
    margin: 0 0 5px 0;
}

.tienda-subtitle {
    font-size: 12px;
    color: var(--color-texto-gris);
    margin: 0;
}


/* Pie de página */
footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--color-texto-gris);
}


/* ----------------------------------
 * SECCIÓN DE PREGUNTAS FRECUENTES (FAQ)
 * ---------------------------------- */
.faq-section {
    padding-top: 20px;
    padding-bottom: 40px; 
}

.faq-item {
    background-color: var(--color-gris-claro);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden; /* Importante para la animación de colapso */
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-texto-oscuro);
    outline: none;
}

.question-text {
    flex-grow: 1;
    margin-right: 15px;
}

.faq-icon {
    font-size: 14px;
    color: var(--color-texto-gris);
    transition: transform 0.3s ease;
}

/* Estado Activo: Gira el ícono + a X */
.faq-item.active .faq-icon {
    transform: rotate(45deg); 
}
.faq-item.active .faq-icon:before {
    content: "\f068"; /* Cambia el icono a 'minus' (símbolo -) si quieres un look más limpio, o déjalo en + (plus) para el look original girado. */
    content: "\f067"; /* Símbolo '+' */
}

/* Contenido de la Respuesta */
.faq-answer {
    max-height: 0;
    padding: 0 15px;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    font-size: 14px;
    color: var(--color-texto-gris);
    line-height: 1.5;
    margin-top: 0;
    padding-bottom: 15px;
}

/* Estado Activo: Muestra la respuesta */
.faq-item.active .faq-answer {
    /* Establece un valor lo suficientemente grande para contener el texto sin límite */
    max-height: 500px; 
    padding-bottom: 0; 
    padding-top: 5px;
}
.faq-item.active .faq-answer p {
    padding-bottom: 15px; /* Restaura el padding final del párrafo */
}