/*Esta pagina web ha sido diseñada en mobile first y mediaqueris para que logre adaptarse a diferentes tamaños de dispositivos digitales.*/

    /*Contenedor principal*/
    main {
        display: flex;
        flex-direction: column;
    }

    /*Footer*/
    footer {
        background-color: #e5c4c3;
        color: rgb(22, 22, 22);
        padding: 1rem 0.5rem;
        font-family: "montserrat", sans-serif;
        font-size: 0.94rem;
        padding-left: 2rem;
        max-width: 1366px;
        margin: auto;
        border-radius: 1rem 1rem 0 0;
        margin-top: 1rem;
    }
    
    .main-footer {
        background-color: #e5c4c3;
        padding: 40px 20px;
        font-family: sans-serif;
        color: #333;
    }

    .footer-container {
        display: flex;
        max-width: 1000px;
        margin: 0 auto;
        justify-content: center;
    }

    .footer-column {
        padding: 0 60px;
    }

    /*Línea vertical y alineación de la primera columna*/
    .info-col {
        flex: 2;
        border-right: 2px solid #333; /* La línea vertical */
        text-align: left;
    }


    .logos-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px; 
    }

    /*Ajuste de imágenes*/
    .footer-logo { max-width: 150px; margin-bottom: 20px; }

    .thanks-msg {
        margin-top: 20px !important;
        font-size: 1.1rem;
    }

    .thanks-msg span {
        color: #d63031;
    }

    .footer-bottom {
        margin-top: 50px;
        font-size: 0.85rem;
        opacity: 0.8;
    }

    /*Contenedores*/
    .contenedor {
        background-color: rgb(244, 240, 231);
        margin: auto;
        max-width: 1366px;
        width: 95%;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
    }

    .quienesomos {
        background-color: #e5c4c3;
        margin: 1rem auto;
        border-radius: 0.75rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-align: center;
    }

    .paginamaestra {
        display: flex;
        flex-wrap: wrap;
        gap: 26px;
        padding: 20px;
        margin-top: 10px;
       }
    
       .tarjeta {
        width: calc(25% - 20px); /* 4 en ordenador */
        background-color: #e8caca;
        border-radius: 12px;
        padding-bottom: 12px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
    
       .tarjeta img {
        width: 100%;
        border-radius: 12px 12px 0 0;
        display: block;
      }

    .detalle-producto {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 20px;
        font-family: 'Montserrat', sans-serif;
    }

    .producto {
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .usuario {
        padding: 0.5rem;
    }

    .producto-imagen img {
        width: 300px;
        border-radius: 8px;
    }

    .producto-info {
        background-color: #e8caca;
        padding: 30px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex: 1;
    }

    /*Header*/
    header {
        background-color: #e5c4c3;
        color: brown;
        border-radius: 0.7rem;
        padding-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /*Tipografia general*/
    h1, h2, h3, h4, p {
        font-family: "montserrat", Helvetica, sans-serif;
    }

    h1 {
        color: rgb(255, 212, 219);
        margin: 2rem 0 2.2rem 0;
        padding-left: 2rem;
        font-size: 2.5rem;
        font-style: italic;
    }

    h3 {
        padding: 1rem;
        color: rgb(157, 19, 65);
    }

    h4 {
        padding: 0.3rem;
        color: #441514;
    }

    p {
        font-size: 1rem;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #logo {
        margin-left: 40px;
    }

    .nombreropa {
        font-family: montserrat, sans-serif;
        font-size: 1rem;
        font-weight: lighter;
        text-align: left;
        font-style: normal;
        color: black;
        padding-left: 12px;
    }

    .titulo-ropa {
        font-weight: bold;
    }

    .titulo-ropa2 {
        font-size: 26px;
        font-weight: 700; /* negrita */
        text-align: center;
        color: black;
        margin: 0;
    }

    .estado-ropa {
        font-size: 14px;
        font-weight: 400;
        color: black;
        text-align: center;
    }

    .descripcion-ropa {
        font-size: 15px;
        font-weight: 400; 
        line-height: 1.6;
        margin-top: 10px;
    }

    /*nav y links*/
    nav {
        display: flex;
        margin: 0.4rem;
        margin-left: auto;
        flex-direction: column;
        align-items: flex-end;
    }

    a {
        text-decoration: none;
        color: #441514;
        font-family: "montserrat", sans-serif;
        margin: 0.4rem 0.4rem;
    }

    a:link, a:visited {
        color: #4d2524;    
    }

    nav a:hover, a:active{
        color: white;
        background-color: #4d2524;
    }

    .a_nav {
        border: 1px solid black;
        padding: 0.3rem 0.5rem;
        margin: 0.5rem 0.5rem 0.5rem 0rem;
    }

    .tarjeta:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    }

    /*Iniciar sesion*/
    #signin {
        font-family: "Lora", 'Times New Roman', Times, serif;
        color: black;
    }

    /*Buscador*/
    #buscar {
        max-width: 700px;
        font-family: "montserrat", sans-serif;
        font-size: 0.8rem;
        padding: 0.3rem;
        border-radius: 0.7rem;
    }

    #buscar input {
        outline: none;
        font-family: "montserrat", sans-serif;
        font-size: 0.8rem;
        border-radius: 0.5rem;
    }

    #buscar input::placeholder {
        opacity: 1;
    }

    #preguntas {
        background-color: white;
        max-width: 80%;
        display: block;
        margin: 1rem auto 2rem auto;
        padding: 0.5rem 0.5rem 0.5rem 1rem;
        font-size: 1rem;
        border-radius: 1rem;
    }

    /*Frases que aparecen en la parte superior, debajo del head*/
    #slogan {
        font-family: "Lora", 'Times New Roman', Times, serif;
        font-style: italic;
        padding: 1rem;
        font-size: 1.4rem;
        max-width: 1366px;
        text-align: center;
    }

    #descripcion {
        text-align: center;
    }

    /*Contenedores blancos*/
    #foto, #info{  
        display: flex;
        flex-direction: column;  
        width: auto;
        background-color: white;
        padding: 1.3rem;
        margin: 0.8rem;
        border-radius: 1rem;
    }
        
    .bloque-info {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 1rem;
    }

    .info-caja {
        background-color: white;
        padding: 1.3rem;
        border-radius: 1rem;
        width: 100%;
        box-sizing: border-box;
    }
            
    .info-caja a {
        display: block; 
        overflow-wrap: break-word;
        word-break: break-all;
        font-size: 0.9rem;
    }
    
    /*Botones*/
    #unirse {
        font-size: 1.1rem;
        background-color: #e5c4c3;
        border-radius: 0.5rem;
        margin: 1rem;
        padding: 0rem 0.3rem;
        max-width: 70px;
    }

    .login {
        font-size: 0.8rem;
        font-family: "montserrat", Helvetica, sans-serif;
    }

    .btn-contactar {
        margin-top: 25px;
        padding: 12px 30px;
        background: linear-gradient(135deg, #c96b6b, #e3a0a0);
        color: white;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-weight: 600;
        align-self: center;
    }

    .btn-contactar:hover {
        opacity: 0.9;
    }

    /* Mobile Header Fix */
    @media (max-width: 767px) {
        header {
            flex-direction: column;
            align-items: center;
            padding: 1rem 0.5rem;
        }

        #logo {
            margin-left: 0;
            margin-bottom: 1rem;
        }

        header>div {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #buscar {
            width: 90%;
            max-width: 400px;
            margin: 0 auto 0.5rem auto;
        }

        #buscar input {
            width: 100%;
        }

        nav {
            margin: 0;
            align-items: center;
            text-align: center;
        }

        nav a {
            font-size: 0.85rem;
            margin: 0.3rem 0.2rem;
        }

        /*Mobile Content Overflow Fixes*/
        .contenedor {
            width: 100%;
            margin: 0;
            border-radius: 0;
            box-sizing: border-box;
        }

        #info, #foto {
            width: 100%;
            margin: 0.5rem 0;
            padding: 1rem;
            box-sizing: border-box;
        }

        /*Footer mobile*/
        footer {
            width: 100%;
            padding: 1rem 0.5rem;
            padding-left: 0.5rem;
        /*Override desktop padding-left */
            margin: 0;
            border-radius: 0;
            box-sizing: border-box;
            text-align: center;
        }

        /*Long URL breaking*/
        a {
            overflow-wrap: break-word;
        }

        /* Slogan text wrapping */
        #slogan {
            padding: 0.5rem;
            font-size: 1.2rem;
        }

        #descripcion {
            padding: 0 0.5rem;
        }

        img {
            max-width: 100%;
            height: auto;
        }
    }

    /*Version tablet*/
    @media screen and (min-width: 768px) {
        main {
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: stretch;
        }

        nav {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            gap: 0.5rem;
        }

        #foto, #info {
            width: 48%;
        }
    }

    /*Version escitorio*/
    @media screen and (min-width: 1024px) {
        #info {
            width: 450px;
        }

        #foto {
            max-width: 750px;
        }

        header {
            justify-content: space-between;
            align-items: flex-end;
        }

        #buscar {
            margin-left: 380px;
        }
    }

    @media screen and (min-width: 768px) {
        .info-caja {
            width: calc(50% - 1rem); 
        }
    }

    @media (max-width: 768px) {
        .tarjeta {
            width: calc(50% - 20px); /* 2 en móvil */
        }
    }

    @media (max-width: 700px) {
    .producto {
        flex-direction: column;
        align-items: center;
        }

    .producto-imagen img {
        width: 100%;
        max-width: 350px;
        }
    }

    /*Carrousel Index*/
    .carousel {
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        max-width: 750px;
        margin: 0.8rem auto;
        padding: 0 50px;
        box-sizing: border-box;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%;
    }

    .carousel-track img {
        width: 100%;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 1rem;
    }   

    /*Botones Navegación Index*/
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(157, 19, 65, 0.8);
        border: none;
        color: white;
        font-size: 2rem;
        padding: 0;
        cursor: pointer;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .carousel-btn.prev {
        left: 5px;
    }

    .carousel-btn.next {
        right: 5px;
    }

    /*Media Query Mobile Index*/
    @media (max-width: 767px) {
        .carousel {
            padding: 0 40px;
            max-width: 100%;
            margin: 10px;
        }

        .carousel-btn {
            width: 35px;
            height: 35px;
            font-size: 1.5rem;
        }
    }