:root {
    --color-fondo-footer: #f8b34c;
    --color-fondo-derechos: #D1C18F;
    --color-fondo-secciones: #f1caa9;
    --color-borde: #D1C18F;
    --color-fondo-tarjeta: #fff4e6;
    --color-texto: #5b4a42;
    --color-titulo: #4b3b30;
    --color-fondo-tarjeta: #fff4e6;
    --color-boton: #25D366; /* Verde de WhatsApp */
    --color-boton-hover: #1eb957;
}


body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    height: 80px;
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
}

nav {
    display: flex;
    justify-content: space-around; /* Centra los elementos */
    align-items: center;
    background-color: var(--color-fondo-secciones);
    padding: 20px; /* Incrementado */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 8vh;
    height: auto;
}

.menu, .menu.show {
    display: flex;
    gap: 30px; /* Incrementado */
    justify-content: center; /* Elementos centrados */
    transition: all 0.5s ease; /* Transición más larga */
}

.menu a, .menu.show a {
    color: #351e18;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.5s ease;
}

.menu a:hover, .menu.show a:hover {
    color: white; /* Cambia el color del texto a blanco */
    background-color: #351e18; /* Fondo de color #351e18 */
    border-radius: 10px; /* Borde redondeado de 10px */
    padding: 10px; /* Padding de 10px */
    transition: all 1s ease;
}


.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #000;
    transition: all 1s ease; /* Delay más alto */
}

#herox {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 65vh;
    color: rgb(255, 255, 255);
    width: 100%;
    position: relative;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}

.image {
    flex: 1 1 20%; /* Cada imagen ocupará 33% del ancho del contenedor, ajusta si es necesario */
    height: 100%;
    background-size: cover;
    background-position: center;
}

h1 {
    z-index: 10; /* Asegurarse de que el texto esté por encima de las imágenes */
    margin: auto;
}


#MacrameHome {
    padding-left: 5vh;  /* Padding en el lado izquierdo */
    padding-right: 5vh; /* Padding en el lado derecho */
    padding-top: 3vh;      /* Sin padding arriba */
    padding-bottom: 3vh;   /* Sin padding abajo */
    background-color: #ffffff;
    height: auto; /* Cambiado para que ajuste dinámicamente */
    text-align: center;
}


.Cecilia {
    display: flex;
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    padding: 20px;
    background-color: var(--color-fondo-tarjeta);;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 20px;
}

.photo {
    flex: 0 0 30%; /* Mantiene la foto en 30% del ancho */
    margin-right: 20px; /* Separación entre la imagen y el texto */
    box-sizing: border-box;
    text-align: center;
}

.photo img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.photo cite {
    font-size: 0.9em;
    color: #666;
    display: block;
    margin-top: 5px;
}

.biography {
    flex: 0 0 65%; /* Reduce el ancho del texto al 60% */
    max-width: 65%;
    box-sizing: border-box;
    text-align: left;
}

.biography h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: #2c3e50;
    margin: 1vh;
}

.biography p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
    margin: 5vh;
}

.biography ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 5vh;
}

.biography ul li {
    font-size: 1em;
    margin-bottom: 10px;
}

#MacrameHome .titles {
    width: 100%;
    margin-top: 10vh;
}

#MacrameHome h2{
    font-family: 'Raleway', sans-serif;
    font-size: 2.5em;
    color: var(--color-titulo-macrame);
    text-align: center;
    width: 100%; /* Asegurar que el título ocupe todo el ancho */
    margin-bottom: 20px;
}

#MacrameHome .content {
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* Asegura que los hijos ajusten su altura automáticamente */
    width: 100%;
    margin-top: 5vh;
    height: auto; /* Ajusta dinámicamente al contenido */
}


.carousel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evita que las tarjetas se salgan del contenedor */
    padding: 5vh 10px;
    width: 100%;
    position: relative;
    height: calc(auto);
}

.carousel-slide {
    position: absolute;
    top: calc(60% + (1200px - 100vw) / 20);
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px;
    background-color: var(--color-fondo-tarjeta);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    height: auto;
    opacity: 0;
    z-index: 0; /* Por defecto, atrás */
    visibility: hidden; /* Oculta las tarjetas inactivas */
    text-align: center;
}

.carousel-slide img {
    max-width: 50%;
    border-radius: 10px;
}

.carousel-slide h3 {
    margin-top: 0;
    color: var(--color-titulo);
}

.carousel-slide p {
    color: var(--color-texto);
    line-height: 1.5;
    text-align: center;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 10; /* La tarjeta activa al frente */
    transform: translate(-50%, -50%) scale(1);
    visibility: visible; /* Garantiza que la tarjeta activa sea visible */
}

.carousel-slide:not(.active) {
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 5; /* Ajusta la profundidad de las tarjetas no activas */
    opacity: 0; /* Oculta visualmente las tarjetas */
    visibility: hidden; /* Esconde completamente las tarjetas inactivas */
}

.timeline {
    flex: 1;
    width: 100%;
    margin-top: 0;
    height: auto;
}

.timeline ul {
    list-style-type: none;
    padding: 0;
}

.timeline ul li {
    background: var(--color-fondo-tarjeta);
    border-left: 2px solid var(--color-borde);
    padding: 15px 10px; /* Reduce el padding */
    margin-bottom: 10px;
    position: relative;
    color: var(--color-texto);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 60%; /* Reduce el ancho */
    margin: 10vh auto 0 auto;
    cursor: pointer;
    height: auto;
    font-size: 20px;
}

.timeline ul li.selected {
    border-left-color: #351e18;
}

.timeline ul li::before {
    content: '';
    background: var(--color-fondo-tarjeta);
    border: 2px solid var(--color-borde);
    border-radius: 50%;
    height: 10px;
    width: 10px;
    position: absolute;
    left: -6px;
    top: 10px;
}

.timeline ul li.selected::before {
    background: #351e18;
}

  
#Macrame {
    background-color: var(--color-fondo-seccion-macrame);
    padding-left: 5vh;  /* Padding en el lado izquierdo */
    padding-right: 5vh; /* Padding en el lado derecho */
    padding-top: 3vh;      /* Sin padding arriba */
    padding-bottom: 0;   /* Sin padding abajo */
    font-family: 'Raleway', sans-serif;
}

#Macrame .historia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

#Macrame .historia h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5em;
    color: var(--color-titulo-macrame);
    text-align: center;
    width: 100%; /* Asegurar que el título ocupe todo el ancho */
    margin-bottom: 20px;
}

#Macrame .historia .content-preview {
    font-size: 1.1em;
    color: var(--color-texto-macrame);
    line-height: 1.5;
    margin-bottom: 15px;
    flex: 1; /* Permitir que los párrafos se ajusten al espacio disponible */
    max-height: 300px; /* Limitar la altura del contenido visible */
    overflow: hidden; /* Ocultar el texto que exceda el límite de altura */
    position: relative;
}

#Macrame .historia .content-preview::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(transparent, white); /* Efecto degradado para indicar que hay más contenido */
}

#Macrame .historia .content {
    display: none; /* Ocultar el contenido por defecto */
    font-size: 1.1em;
    color: var(--color-texto-macrame);
    line-height: 1.5;
    margin-bottom: 15px;
    flex: 1; /* Permitir que los párrafos se ajusten al espacio disponible */
}

#Macrame .historia img {
    display: block;
    max-width: 40%; /* Ajustar el ancho de la imagen */
    height: auto;
    margin: 10px;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    flex: 0 0 40%; /* Fijar el ancho de la imagen y permitir que mantenga su posición */
}

#Macrame .historia .expand-btn {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
}

#Macrame .historia .expand-btn:hover {
    background-color: #351e18;
}


#Macrame .galeria {
    margin-top: 30px;
}

#Macrame .galeria h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    color: var(--color-titulo-macrame);
    text-align: center;
    margin-bottom: 20px;
}

#Macrame .galeria .imagenes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
}

#Macrame .galeria .imagenes .imagen {
    flex: 1 1 calc(30% - 15px);
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
}

#Macrame .galeria .imagenes .imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

#Macrame .galeria .imagenes .imagen p {
    font-size: 0.9em;
    color: var(--color-texto-macrame);
    margin-top: 10px;
}


/* Botones para cambiar la vista */
.view-switch {
    display: flex;
    justify-content: center; /* Centra los botones */
    gap: 10px; /* Espaciado entre botones */
    width: 100%; /* Ocupa todo el ancho del contenedor */
    margin-bottom: 5vh;
}

.view-switch button {
    padding: 10px 20px;
    background-color: var(--color-fondo-secciones);
    color: #000000;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.view-switch button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Manteniendo tus estilos originales */
/* Estilos principales de la sección Productos */
#Productos {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    padding-left: 5vh;
    padding-right: 5vh;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

#Productos a {
    text-decoration: none;
    color: #000;
}

#Productos a:hover {
    text-decoration: none;
    color: #ffff;
}

#Productos h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5em;
    color: var(--color-titulo-macrame);
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

/* Vistas compartidas: Cuadrícula y Carrusel */
.grid-view {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.carousel-view {
    display: flex;
    overflow-x: auto; /* Scroll horizontal para carrusel */
    gap: 20px; /* Espaciado entre elementos */
    padding-bottom: 15px;
    scroll-behavior: smooth; /* Scroll suave */
}

/* Estilo del scroll en carrusel */
.carousel-view::-webkit-scrollbar {
    height: 8px;
}

.carousel-view::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

.carousel-view::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* Tarjetas de productos */
.product-card {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto; /* Para mantener el tamaño fijo en el carrusel */
}

.product-card img {
    width: 100%;
    border-radius: 5px;
}

.product-card h3 {
    font-size: 1.5em;
    margin: 10px 0;
}

.product-card p {
    color: #555;
}

.product-card button {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: var(--color-fondo-secciones);
    color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.product-card button:hover {
    background-color: #444;
    color: #ffffff;
}

/* Tarjetas de videos (estilo similar a productos) */
.video-card {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px; /* Ajuste de ancho para videos */
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto; /* Para mantener el tamaño fijo en el carrusel */
}

.video-card video {
    width: 100%;
    border-radius: 5px;
}

.video-card h3 {
    font-size: 1.5em;
    margin: 10px 0;
}

.video-card p {
    color: #555;
}


/* Manteniendo tus estilos originales */
/* Estilos principales de la sección Técnicas */
#Tecnicas {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    padding-left: 5vh;
    padding-right: 5vh;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

#Tecnicas h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5em;
    color: var(--color-titulo-macrame);
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

/* Vistas compartidas: Cuadrícula y Carrusel */
.grid-view {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.carousel-view {
    display: flex;
    overflow-x: auto; /* Scroll horizontal para carrusel */
    gap: 20px; /* Espaciado entre elementos */
    padding-bottom: 15px;
    scroll-behavior: smooth; /* Scroll suave */
}

/* Estilo del scroll en carrusel */
.carousel-view::-webkit-scrollbar {
    height: 8px;
}

.carousel-view::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

.carousel-view::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* Tarjetas de técnicas */
.tecnicas-cards {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto; /* Para mantener el tamaño fijo en el carrusel */
}

.tecnicas-cards img {
    width: 100%;
    border-radius: 5px;
}

.tecnicas-cards h3 {
    font-size: 1.5em;
    margin: 10px 0;
}

.tecnicas-cards p {
    color: #555;
}

.tecnicas-cards button {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: var(--color-titulo-macrame);
    color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.tecnicas-cards button:hover {
    background-color: #444;
    color: #ffffff;
}

/* Tarjetas de tutoriales (estilo similar a técnicas) */
.tutoriales-cards {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px; /* Ajuste de ancho para videos */
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto; /* Para mantener el tamaño fijo en el carrusel */
}

.tutoriales-cards video {
    width: 100%;
    border-radius: 5px;
}

.tutoriales-cards h3 {
    font-size: 1.5em;
    margin: 10px 0;
}

.tutoriales-cards p {
    color: #555;
}



/* Estilo para la sección general (similar a Cecilia) */
#Contacto {
    display: flex;
    justify-content: space-between; /* Asegura que los elementos estén en lados opuestos */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    padding-left: 5vh;  /* Padding en el lado izquierdo */
    padding-right: 5vh; /* Padding en el lado derecho */
    padding-top: 3vh;      /* Sin padding arriba */
    padding-bottom: 0;   /* Sin padding abajo */
    margin-bottom: 20px;
    margin: 10vh auto;
    width: 80%;
}

/* Estilo para la sección contenido-chat */
.contenido-chat {
    display: flex;
    justify-content: space-between; /* Coloca los contenedores a los extremos */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    padding-left: 15vh;
    padding-right: 15vh;
    padding-top: 3vh;
    padding-bottom: 0;
    margin-bottom: 20px;
    background-color: var(--color-fondo-tarjeta); /* Fondo claro */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

/* Estilo para el contenedor de texto explicativo (izquierda) */
.chat {
    flex: 0 0 48%; /* Asegura que ocupa el 48% del ancho del contenedor */
    margin-right: 10px; /* Separación derecha */
    text-align: left;
    margin: auto;
}


/* Estilo para el contenedor tipo celular (derecha) */
.chat2 {
    flex: 0 0 40%; /* Asegura que ocupa el 48% del ancho del contenedor */
    display: flex;
    flex-direction: column; /* Coloca los elementos de su contenido verticalmente */
    align-items: center; /* Centra horizontalmente */
}

/* Contenedor de la estructura tipo celular */
.chat-container {
    height: 600px;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    font-family: Arial, sans-serif;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background-color: #f5f5f5; /* Fondo claro */
    margin: 5vh;
}

/* Encabezado del chat */
.chat-header {
    display: flex;
    align-items: center;
    background-color: #25D366;
    color: white;
    padding: 15px;
}

.chat-header .perfil-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

/* Estilo del título */
.chat-header h2 {
    font-size: 18px;
    margin: 0;
}

/* Cuerpo del chat con fondo */
.chat-body {
    padding: 15px;
    background-image: url('../recursos/img/fondoWhatsapp.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-grow: 1;
    height: 600px;
}

/* Ajuste del formulario dentro del contenedor */
#whatsappForm {
    margin-top: 80%; /* Ajustar posición para mayor visibilidad */
}

/* Campos de entrada */
.chat-body label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: white; /* Títulos en blanco */
}

.chat-body input, .chat-body textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    resize: none;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
}

/* Resaltar campos al enfocarlos */
.chat-body input:focus, .chat-body textarea:focus {
    border-color: #25D366;
    outline: none;
    box-shadow: 0 0 4px #25D366;
}

/* Botón estilo WhatsApp */
.chat-body button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #25D366;
    color: white;
    padding: 12px;
    width: 100%;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chat-body button:hover {
    background-color: #1da851;
}

/* Ajuste del botón para íconos */
.chat-body button::before {
    content: "📩";
    font-size: 18px;
}


/* ESTILOS BOTON SUBIR */


#topButton {
    display: none; 
    position: fixed; 
    bottom: 10vh; 
    right: 30px;
    z-index: 99; 
    font-size: 18px; 
    border: none; 
    outline: none; 
    background-color: #351e18; 
    color: #ffffff; 
    cursor: pointer; 
    padding: 1rem; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
    transition: background-color 0.3s; 
  }
  
  #topButton:hover {
    background-color: var(--color-fondo-footer); 
    color: var(--white-color);
  }
  
  
  
  
  /* FIN ESTILOS BOTON SUBIR */
  
footer {
    width: 100%;
    background-color: var(--color-fondo-footer);
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    color: #351e18;
    border-top: 2px solid var(--color-borde);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
    height: auto;
    bottom: 0;
    margin-top: 15vh;
}

#imagen_footer {
    width: 80%;
    height: auto; /* Mantener la proporción de la imagen */
    display: block; /* Hacer que el margen auto funcione */
    margin-left: auto;
    margin-right: auto;
}

footer a {
    text-decoration: none;
    color: #000;
}

.Footer_contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
    background-color: var(--color-fondo-secciones);
    height: auto;
    background-size: 10px 10px;
}

.Footer_informacion, .Footer_navegacion, .Footer_comunicacion {
    flex: 1 1 calc(25% - 20px);
    margin: 10px;
    padding: 10px;
    background-color: var(--color-fondo-secciones);
}

@media (max-width: 1200px) {
    .Footer_contenedor {
        flex-direction: column;
    }

    .Footer_informacion, .Footer_navegacion, .Footer_comunicacion {
        width: 100%;
        margin: 10px 0;
    }

    #imagen_footer {
        width: 80%;
        height: auto; /* Mantener la proporción de la imagen */
        display: block; /* Hacer que el margen auto funcione */
        margin-left: auto;
        margin-right: auto;
    }
}

.Footer_derechos {
    background-color: var(--color-fondo-derechos);
    padding: 10px 0px;
    text-align: center;
    color: #ffffff;
    width: 100%;
    border-top: 2px solid var(--color-borde);
}

  
  /* FIN ESTILOS FOOTER MINIMALISTA Y VINTAGE */
  
  @media (max-width: 1020px) {

        .menu {
            display: none;
            flex-direction: column;
            width: 100%;
            background-color: var(--color-fondo-secciones); /* Color de fondo del menú */
            position: absolute;
            top: 80px; /* Ajustado para la nueva altura de la barra */
            left: 0;
            transition: all 1s ease; /* Transición más larga */
        }

        .menu.show {
            display: flex;
        }

        .menu a {
            padding: 10px;
            margin: auto;
            text-align: center; /* Centrados en el menú de hamburguesa */
            color: #351e18; /* Color de las letras */
        }

        .hamburger {
            display: flex;
        }

        .hamburger.toggle span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        .hamburger.toggle span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.toggle span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }



    @keyframes imageFade {
        0%, 100% { opacity: 0; }
        17%, 83% { opacity: 1; }
    }

    .image {
        width: 100%;
        height: 100%;
        position: absolute; /* Mantener la posición de la imagen */
        opacity: 0;
        animation: imageFade 30s infinite; /* Activar animaciones solo en modo responsive */
    }

    .image:nth-child(1) { animation-delay: 0s; }
    .image:nth-child(2) { animation-delay: 5s; }
    .image:nth-child(3) { animation-delay: 10s; }
    .image:nth-child(4) { animation-delay: 15s; }
    .image:nth-child(5) { animation-delay: 20s; }
    .image:nth-child(6) { animation-delay: 25s; }

    #MacrameHome {
        padding: 20px;
        background-color: #ffffff;
        height: auto; /* Ajusta la altura a auto */
        text-align: center;
    }

    #MacrameHome .content {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 2vh; /* Reduce el margen superior */
        height: auto; /* Ajusta la altura a auto */
    }

    .Cecilia {
        flex-direction: column;
    }

    .photo, .biography {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0;
    }

    .photo {
    margin:auto; /* Centra horizontalmente */
    max-width: 100%; /* Ajusta el tamaño del contenedor al tamaño de la pantalla */
    text-align: center; /* Centra el contenido interno si aplica */
}

    .carousel {
        width: 100%;
        height: auto;
        margin-bottom: 2vh; /* Agrega margen inferior */
    }

    .carousel-slide {
        position: relative; /* Cambia la posición a relativa */
        top: 0; /* Ajusta la posición superior */
        left: 0; /* Ajusta la posición izquierda */
        transform: none; /* Elimina la transformación */
        width: 90%; /* Ajusta el ancho a 90% */
        margin: 2vh auto; /* Agrega margen vertical */
        opacity: 0;
        z-index: 1;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .carousel-slide.active {
        opacity: 1;
        z-index: 2;
        transform: none; /* Elimina la transformación */
    }

    .carousel-slide:not(.active) {
        display: none; /* Oculta las diapositivas no activas */
    }

    .timeline {
        width: 100%;
        margin-top: 2vh; /* Reduce el margen superior */
        height: auto; /* Ajusta la altura a auto */
    }

    .timeline ul li {
        width: 80%; /* Ajusta el ancho a 80% */
        margin: 1.5vh auto; /* Reduce el margen vertical */
        font-size: 16px;
        padding: 5px 10px; /* Ajusta el padding */
    }

    #Macrame {
      padding: 20px;
    }

    #Macrame .historia {
        flex-direction: column;
    }
    
    #Macrame .historia img {
        max-width: 100%; /* Hacer que la imagen ocupe todo el ancho en móviles */
        height: auto;
        margin: auto;
    }

    /* Ajuste para la sección general */
    #Contacto,
    .contenido-chat {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra horizontalmente */
        padding: 3vh; /* Espaciado menor en móviles */
        margin: 3vh auto; /* Margen superior e inferior reducido */
    }

    /* Ajuste del contenedor de texto explicativo (chat izquierdo) */
    .chat {
        flex: 0 0 auto; /* Ajusta automáticamente al contenido */
        width: 100%; /* Usa todo el ancho disponible */
        margin: 0 auto 15px auto; /* Centrado con margen inferior */
    }

    /* Ajuste del contenedor tipo celular (chat derecho) */
    .chat2 {
        flex: 0 0 auto; /* Ajusta automáticamente al contenido */
        display: flex;
        flex-direction: column; /* Acomoda elementos en columna */
        align-items: center;
        width: 100%; /* Usa todo el ancho disponible */
        margin: 0 auto;
    }

    /* Contenedor del chat (estructura celular) */
    .chat-container {
        height: auto; /* Permite que la altura se ajuste al contenido */
        margin: 3vh 0; /* Espaciado vertical reducido */
        width: 90%; /* Reduce el ancho para móviles */
    }

    /* Ajuste para el cuerpo del chat */
    .chat-body {
        height: auto; /* Altura ajustable según contenido */
        padding: 10px; /* Espaciado interno reducido */
    }

    /* Ajuste del formulario dentro del cuerpo del chat */
    #whatsappForm {
        margin-top: 5%; /* Ajusta el margen superior */
    }

    /* Ajuste para campos de entrada */
    .chat-body input,
    .chat-body textarea {
        width: 90%; /* Ancho completo para móviles */
        font-size: 16px; /* Texto más legible en pantallas pequeñas */
    }

    /* Botón adaptado para móviles */
    .chat-body button {
        font-size: 14px; /* Fuente ligeramente menor */
        padding: 10px; /* Espaciado ajustado */
    }


}