/* =====================================================
HOME PAGE - ESTILOS DE INDEX
===================================================== */


/* =====================================================
HERO
===================================================== */

.hero {
    height: 85vh;
    min-height: 500px;
    
    /* -----------------------------------------------------
       EXPLICACIÓN DEL FONDO:
       Actualmente está configurado con color blanco y un overlay sutil.
       
       - Si quieres poner una imagen de fondo, reemplaza "background-color" 
         por tu ruta, por ejemplo:
         background-image: url('../images/Ilustraciones/fondo-vertical-amarillo-azul.webp');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
       
       - Si quieres un color sólido o degradado, puedes modificar el "background-color" 
         o la propiedad "background" directamente aquí.
    ----------------------------------------------------- */
    background-color: var(--blanco); 
    background-image: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    margin-top: 90px;
    padding: 0 20px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Esta capa evita que se vea plano añadiendo un contraste ligero y profundidad */
    background: linear-gradient(135deg, rgba(245, 223, 172, 0.08) 0%, rgba(255, 255, 255, 0.96) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    width: 100%;
    padding: 20px;
    animation: fadeInUp 1.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero-logo {
    /* Isotipo ligeramente más compacto */
    max-width: 280px;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    margin-bottom: 0;
}

.hero-subtitle {
    font-family: 'Armany', Georgia, serif;
    /* Subtítulo más grande y con más grosor (bold) */
    font-size: 36px;
    line-height: 1.3;
    color: var(--cafe-oscuro);
    max-width: 560px;
    margin: 0;
    font-weight: 600;
    text-shadow: 1px 2px 6px rgba(38, 18, 15, 0.15); /* Sutil sombra para dar volumen */
}

/* =====================================================
RESPONSIVE HERO
===================================================== */

@media (max-width: 768px) {
    .hero {
        height: 70vh;
        min-height: 420px;
        margin-top: 76px;
    }

    .hero-content {
        gap: 24px;
        padding: 20px 10px;
    }

    .hero-logo {
        max-width: 260px; /* Se ajusta proporcionalmente en pantallas pequeñas */
    }

    .hero-subtitle {
        font-size: 24px;
        line-height: 1.4;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 65vh;
    }
}



/* =====================================================
WELCOME (EDITORIAL)
===================================================== */

.welcome{
padding:70px 0;
background-color:var(--cafe-oscuro);
}

.welcome-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.welcome-text-block{

max-width:520px;

}

.welcome .section-title{

color:var(--dorado);

font-size:64px;

margin-bottom:30px;

}

.welcome-text{

font-size:20px;

line-height:1.8;

color:var(--blanco);

}

.welcome-image{

width:100%;

border-radius:24px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,0.25);

}

.welcome-image img{

width:100%;

height:auto;

object-fit:cover;

border-radius:24px;

}



/* =====================================================
PRODUCTOS
===================================================== */

.productos{
padding:70px 0;
background-color:var(--blanco);
}

.productos-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:70px;

margin-top:80px;

}

.producto-card{

text-align:center;

transition:all 0.35s ease;

padding:10px 10px 20px;

}

.producto-card:hover{

transform:translateY(-6px);

}

.producto-icon{

width:180px;

height:180px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

background:var(--verde-oliva);

border-radius:50%;

padding:30px;

transition:all 0.35s ease;

}
.producto-icon img{
filter: brightness(0) saturate(100%) invert(74%) sepia(26%) saturate(510%) hue-rotate(2deg) brightness(96%) contrast(90%);
transition:all 0.3s ease;
}
.producto-card:hover .producto-icon{
transform: scale(1.15);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.producto-icon img{

max-width:100%;

max-height:100%;

object-fit:contain;

}

.producto-card h3{

font-size:32px;

color:var(--verde-oliva);

margin-bottom:16px;

}

.producto-card p{

font-size:18px;

line-height:1.6;

color:var(--cafe-oscuro);

padding:0 10px;

}



/* =====================================================
PLACEHOLDER PARA IMÁGENES FUTURAS
===================================================== */

.producto-placeholder{

width:100%;

height:160px;

border-radius:18px;

margin-top:25px;

background:linear-gradient(
135deg,
var(--crema),
var(--dorado)
);

opacity:0.35;

}



/* =====================================================
VISÍTANOS
===================================================== */

.visit{
padding:70px 0;
background:linear-gradient(
135deg,
var(--azul-gris-claro),
var(--azul-gris-medio)
);

color:var(--blanco);

}

.visit-content{

text-align:center;

max-width:700px;

margin:0 auto;

}

.visit-content .section-title{

color:var(--blanco);

font-size:56px;

margin-bottom:40px;

}

.visit-address{

font-size:20px;

line-height:1.7;

margin-bottom:50px;

}

.address-icon{

font-size:30px;

display:block;

margin-bottom:15px;

}



/* =====================================================
ANIMACIONES
===================================================== */

@keyframes fadeInUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/* =====================================================
RESPONSIVE
===================================================== */


@media (max-width:968px){

.productos-grid{

grid-template-columns:repeat(2,1fr);

}

.welcome-grid{

gap:60px;

}

}



@media (max-width:768px){

.hero{

height:70vh;

}

.hero-logo{

height:150px;

}

.hero-subtitle{

font-size:20px;

}

.welcome-grid{

grid-template-columns:1fr;

gap:60px;

}

.welcome-text-block{

text-align:center;

margin:auto;

}

.productos-grid{

grid-template-columns:1fr;

gap:60px;

}

.producto-icon{

width:150px;

height:150px;

}

.producto-card h3{

font-size:28px;

}

.visit{

padding:80px 0;

}

}



@media (max-width:480px){

.hero{

height:65vh;

}

.hero-subtitle{

font-size:18px;

}

}
/* =====================================================
VISIT GRID
===================================================== */

.visit-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-top:40px;

}

.visit-map iframe{

width:100%;

height:260px;

border:none;

border-radius:18px;

}

.visit-info{

text-align:left;

}

.visit-address-link{

color:var(--blanco);

text-decoration:none;

font-size:20px;

line-height:1.7;

}

.visit-address-link:hover{

text-decoration:underline;

}

.address-icon{

display:block;

font-size:28px;

margin-bottom:10px;

}
@media (max-width:768px){

.visit-grid{

grid-template-columns:1fr;

gap:40px;

}

.visit-info{

text-align:center;

}

}

/* =====================================================
LINK TARJETAS PRODUCTOS
===================================================== */

.producto-card-link{

display:block;

text-decoration:none;

color:inherit;

cursor:pointer;

}


/* efecto hover más suave */

.producto-card-link:hover .producto-card{

transform:translateY(-6px);

}