/* =============================================
   MINI CAJAS Y ESTUCHES — styles.css
   ============================================= */

   :root {
    --celeste: #6CACE4;
}

/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BASE */

body {
    font-family: 'Inter', sans-serif;
    color: #222;
    background-color: #ffffff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: var(--celeste);
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.6;
}

/* HEADER */

header {
    border-bottom: 1px solid #eeeeee;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(1400px, 92%);
    margin: 0 auto;
    padding: 28px 0;
}

.logo img {
    width: 260px;
    max-height: 64px;
}

.logo p {
    margin-top: 18px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #555;
    max-width: 540px;
}

.header-links {
    display: flex;
    gap: 24px;
}

.header-links a {
    font-size: 0.95rem;
    font-weight: 400;
}

/* MAIN */

main {
    width: min(1280px, 90%);
    margin: 0 auto;
    padding: 24px 0 72px;
}

/* HERO */

.hero {
    max-width: 1100px;
    margin: 0 auto 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.1;
    max-width: 9ch;
    margin-bottom: 24px;
}

.hero h1 span {
    display: block;
    white-space: nowrap;
}

.hero-texto {
    max-width: 520px;
    padding-top: 48px;
}

.hero p {
    font-size: 1.2rem;
    color: #555;
    max-width: 38ch;
}

.hero-imagen img {
    width: 100%;
}

.hero-img-mobile {
    display: none;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

.boton {
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--celeste);
}

/* DIFERENCIALES */

.diferenciales {
    max-width: 1100px;
    margin: 0 auto 48px;
}

.diferenciales h2 {
    max-width: 680px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 56px;
}

.diferencial h3 a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.diferencial h3 a:hover {
    opacity: 0.6;
}

.diferenciales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    align-items: start;
}

.diferencial {
    border-top: 1px solid #dddddd;
    padding-top: 24px;
}

.diferencial h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.diferencial p {
    color: #555;
}

.diferencial-botones {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.diferencial-botones a {
    font-size: 0.95rem;
    border: 1px solid #d8e8f8;
    padding: 8px 16px;
    border-radius: 999px;
}





/* CANALES */

.canales {
    max-width: 1100px;
    margin: 0 auto 96px;
}

.canales h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.canales-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.canal {
    border-top: 1px solid #dddddd;
    padding-top: 24px;
}

.canal h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.canal p {
    color: #555;
    margin-bottom: 24px;
}

.boton-whatsapp,
.boton-ml {
    display: inline-block;
}

/* LÍNEAS */

.lineas {
    max-width: 1100px;
    margin: 0 auto 16px;
    padding-top: 36px;
    border-top: 1px solid #eeeeee;
}

.lineas h2 {
    font-size: 2rem;
    margin-bottom: 30px;
}

.lineas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    align-items: start;
}

.linea {
    padding: 16px 0;
    border-top: 1px solid #eeeeee;
}

.linea h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.linea > img {
    width: 100%;
    max-width: 880px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 24px;
}

.linea-descripcion {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #444;
    max-width: 760px;
}

.descripcion-mobile {
    display: none;
}

.descripcion-desktop {
    display: block;
}

.linea-destacada {
    max-width: 900px;
    margin: 0 auto;
}

.linea-galeria-destacada {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.galeria-principal {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.galeria-variantes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.galeria-variantes img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* FOOTER */

footer {
    border-top: 1px solid #eeeeee;
    margin-top: 24px;
    padding: 40px 0 48px;
    /*outline: 1px solid red;*/
}

.footer-contenido {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.footer-contenido p {
    margin-bottom: 10px;
}

.footer-marca {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.footer-texto {
    color: #666;
    line-height: 1.8;
    margin-bottom: 24px;
}

.footer-links {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 28px;
}

.footer-links a {
    font-weight: 500;
}





/* HERO INTERMEDIO: 910px a 701px */

@media (max-width: 910px) and (min-width: 701px) {

    .hero {
        grid-template-columns: 1.15fr 1fr;
        gap: 36px;
        max-width: 860px;
    }

    .hero h1 {
        font-size: clamp(2.4rem, 5vw, 3rem);
        line-height: 1.1;
        max-width: 100%;
    }

    .hero p {
        font-size: clamp(1rem, 2vw, 1.1rem);
        max-width: 34ch;
    }

    .hero-imagen {
        width: 100%;
        max-width: 360px;
        justify-self: center;
    }

    .hero-buttons {
        justify-content: space-between;
        gap: 0;
    }
}

/* HERO MOBILE: 700px hacia abajo */

@media (max-width: 700px) {

    .hero {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%;
        max-width: none;
        margin-bottom: 56px;
    }

    .hero-texto {
        width: 100%;
        max-width: none;
        padding-top:0;
    }

    .hero h1 {
        font-size: clamp(2.3rem, 6vw, 2.8rem);
        font-weight: 600;
        line-height: 1.1;
        max-width: 100%;
    }

    .hero p {
        font-size: clamp(1rem, 2.2vw, 1.1rem);
        max-width: none;
    }

    .hero-imagen {
        width: min(78%, 360px);
        margin: 0 auto;
    }

    .hero-img-desktop {
        display: none;
    }

    .hero-img-mobile {
        display: block;
        width: 100%;
    }

    .hero-buttons {
        display: none;
    }
}

/* PRUEBA SVG */


/*
.svg-test {
    padding: 4rem;
}

.svg-test table {
    border-collapse: collapse;
}

.svg-test td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    font-size: 0.95rem;
}

.interior-icon {
    width: 48px;
    height: auto;
    display: block;
    opacity: 0.75;
}
*/

/* MOBILE GENERAL: hasta 600px */

@media (max-width: 600px) {

    .descripcion-mobile {
        display: block;
    }

    .descripcion-desktop {
        display: none;
    }

    .header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 0 32px;
    }
    
    .header-links {
        width: 100%;
        justify-content: center;
        gap: 24px;
        font-weight: 400;
    }
    
    .logo img {
        width: 260px;
    }

    main {
        width: min(100% - 32px,420px);
        padding: 44px 0 24px;
    }

    .diferenciales h2{
        font-size: 1.7rem;
        line-height: 1.15;
    }

    

    .diferenciales-grid {
        grid-template-columns: 1fr;
      }
    
      .diferencial-botones {
        flex-wrap: wrap;
      }
    
      .diferenciales h2 {
        max-width: none;
    }


    .canales-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lineas-grid {
        grid-template-columns: 1fr;
    }

    .linea {
        padding: 24px 0;
    }

    .linea > img,
    .galeria-principal,
    .galeria-variantes img {
        aspect-ratio: auto;
    }

    .galeria-variantes {
        grid-template-columns: 1fr;
    }

    footer {
        padding: 40px 0 48px;
    }
}