/* ==========================================================================
   1. VARIABLES DE DISEÑO (PALETA CORPORATIVA ZEN)
   ========================================================================== */
:root {
    --bg-cream: #E8C8D8;
    --sakura-pink: #D0A8C0;
    --cherry-deep: #A85068;
    --plum: #904860;
    --wine: #781820;
    --ebony: #2A040A;
    --white-pure: #ffffff;
    --radius: 6px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. CONFIGURACIÓN BASE Y FONDO TRADICIONAL (RAMA SAKURA REAL)
   ========================================================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: #FAF6F0; 
    
    /* Patrón Seigaiha de fondo sutil */
    background-image: radial-gradient(rgba(120, 24, 32, 0.02) 1px, transparent 0);
    background-size: 24px 24px;
    
    color: var(--ebony);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* RAMA DE CEREZO REAL EN EL LATERAL DERECHO SUPERIOR */
body::before {
    content: '';
    position: fixed;
    top: 10%;
    right: 0;
    width: 450px; 
    height: 600px;
    background-image: url('./fondo1.jpeg'); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    opacity: 0.25; 
    pointer-events: none; 
    z-index: -1; 
}

/* RAMA ESPEJADA EN EL LATERAL IZQUIERDO INFERIOR */
body::after {
    content: '';
    position: fixed;
    bottom: -5%;
    left: -100px;
    width: 400px;
    height: 500px;
    background-image: url('./fondo1.jpeg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    transform: scaleX(-1); 
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
}

h1, h2, h3, h4 {
    font-family: 'Noto Serif JP', serif;
    color: var(--ebony);
}

p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ebony);
    opacity: 0.9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 4%;
}

.section-header {
    margin-bottom: 40px;
    text-align: center;
}

.subtitle {
    color: var(--wine);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
}

.title {
    font-size: 2.5rem;
    line-height: 1.2;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}




.title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--wine);
}

/* ==========================================================================
   3. HEADER & NAVEGACIÓN
   ========================================================================== */
header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--sakura-pink);
    box-shadow: 0 4px 20px rgba(120, 24, 32, 0.04);
    height: 85px;
}



.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
}

.logo-container {
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--wine);
    position: relative;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-text {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ebony);
    letter-spacing: 1px;
}

nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

nav a {
    text-decoration: none;
    color: var(--ebony);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
}

nav a:hover { color: var(--wine); }
.nav-btn { background-color: var(--sakura-pink); color: var(--white-pure) !important; padding: 8px 10px; border-radius: var(--radius); }
.nav-btn:hover { background-color: var(--plum); }

/* ==========================================================================
   4. HERO SECCIÓN
   ========================================================================== */
.hero {
    position: relative;
    height: 55vh;
    display: flex;
    align-items: center;
    padding: 0 8%;
    color: var(--white-pure);
    border-bottom: 4px solid var(--wine);
    overflow: hidden;

    background: linear-gradient(
        rgba(42, 4, 10, 0.80),
        rgba(42, 4, 10, 0.75)
    );
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background-image: url("WhatsApp\ Image\ 2026-06-07\ at\ 21.45.12-fotor-20260608145644.png");
    background-repeat:no-repeat;
    background-position:center;
    opacity:0.10;
    z-index:0;
}

.hero-content{
    position:relative;
    z-index:2;
}

.hero-content { max-width: 750px; }
.hero h1 { color: var(--white-pure); font-size: 2.8rem; margin-bottom: 15px; }
.hero p { color: var(--bg-cream); font-size: 1.1rem; margin-bottom: 30px; }

.btn-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--wine);
    color: var(--white-pure);
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    border-radius: var(--radius);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(120, 24, 32, 0.3);
}
.btn-main:hover { background-color: var(--plum); transform: translateY(-2px); }

/* ==========================================================================
   5. ARQUITECTURA DE GRILLES Y PRODUCTOS (RESPONSIVE)
   ========================================================================== */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
    margin: 0 auto;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
}

.card-item {
    background: var(--white-pure);
    border: 1px solid var(--sakura-pink);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.card-item:hover {
    border-color: var(--wine);
    box-shadow: 0 10px 25px rgba(144, 72, 96, 0.08);
}

/* Caja contenedora del carrusel en cada tarjeta */
.card-carousel {
    position: relative;
    width: 100%;
    height: 380px;
    background-color: #fffbf7;
    overflow: hidden;
}

.carousel-slider {
    display: flex;
    width: 100%;
    height: 380px;
    transition: transform 0.4s ease-in-out;
}

/* CORRECCIÓN INTEGRAL DE IMÁGENES: Enteras, sin zoom y estilizadas */
.carousel-slider img {
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: #fffbf7;
    padding: 0;
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--ebony);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.slide-arrow:hover { background-color: var(--wine); color: white; }
.arrow-left { left: 12px; }
.arrow-right { right: 12px; }

.card-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-body h3 { font-size: 1.35rem; color: var(--wine); margin-bottom: 10px; }
.card-body p { font-size: 0.95rem; opacity: 0.85; }

/* SECCIÓN INTERMEDIA SUAVE COHESIVA */
.bg-soft { 
    background-color: #F7EFE5; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' opacity='0.03'%3E%3Cpath d='M15 0 C23 0 30 7 30 15 C30 23 23 30 15 30 C7 30 0 23 0 15 C0 7 7 0 15 0 Z' fill='%23781820'/%3E%3C/svg%3E");
    border-top: 1px solid var(--sakura-pink); 
    border-bottom: 1px solid var(--sakura-pink); 
}


/* ==========================================================================
   6. DETALLE DE FABRICACIÓN
   ========================================================================== */
.grid-fabricacion {
    display: grid;
    /* Bajamos el mínimo a 200px para que entren cómodos los 4 en la misma línea */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 25px;
    width: 100%;
}

.fab-box {
    padding: 25px 20px;
    background: var(--white-pure);
    border-left: 4px solid var(--wine);
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fab-box:hover { 
    background-color: #fdf2f6; 
    transform: translateY(-3px); /* Cambiado a leve subida para acompañar la línea */
}

.fab-icon {
    font-size: 1.5rem;
    color: var(--wine);
    margin-bottom: 15px;
    background: var(--bg-cream);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.fab-box h3 { font-size: 1.2rem; margin-bottom: 8px; }
.fab-box p { font-size: 0.9rem; opacity: 0.8; }

/* ==========================================================================
   7. SECCIÓN LOGÍSTICA DE ENVÍOS
   ========================================================================== */
.envios-banner {
    background-color: var(--ebony);
    color: var(--white-pure);
    padding: 60px 4%;
    border-radius: var(--radius);
}

.envios-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
    margin-top: 35px;
}

.envios-main h3 { color: var(--white-pure); font-size: 1.6rem; margin-bottom: 12px; }
.envios-main p { color: var(--bg-cream); }

.envios-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(208, 168, 192, 0.2);
    padding: 25px;
    border-radius: var(--radius);
}
.envios-card h4 { color: var(--sakura-pink); font-size: 1.15rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.envios-card p { color: #e2e8f0; font-size: 0.9rem; }



/* ==========================================================================
   9. TESTIMONIALES Y CONTACTO
   ========================================================================== */
/* ==========================================================================
   9. TESTIMONIALES Y CONTACTO (CORREGIDO EN SERIO)
   ========================================================================== */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 270px));
    gap: 25px;
    justify-content: center;
}

.video-card {
    background: white;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--sakura-pink);
    box-shadow: 0 4px 15px rgba(42, 4, 10, 0.04);
    box-sizing: border-box;
}

.video-card video,
.miniatura {
    width: 250px;
    height: 250px;
    object-fit: cover; /* llena el cuadrado */
    border-radius: calc(var(--radius) - 4px);
    display: block;
    margin: 0 auto;
}

.contacto-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
.canales-card { background: var(--white-pure); border: 1px solid var(--sakura-pink); padding: 40px; border-radius: var(--radius); }
.canales-card h3 { color: var(--wine); font-size: 1.4rem; margin-bottom: 15px; }
.canales-list { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; }

.canal-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border: 1px solid var(--cherry-deep);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ebony);
    font-weight: 700;
    transition: var(--transition);
}
.canal-item i { font-size: 1.4rem; margin-right: 15px; color: var(--wine); }
.canal-item:hover { background-color: var(--wine); color: white; border-color: var(--wine); }
.canal-item:hover i { color: white; }

.mapa-wrap { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sakura-pink); min-height: 350px; }
.mapa-wrap iframe { width: 100%; height: 100%; border: 0; flex-grow: 1; }

footer {
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 35px 4%;
    text-align: center;
}

footer p {
    color: #666;
    font-size: 0.9rem;
    margin: 5px 0;
}

footer .footer-logo {
    width: 70px;
    margin-bottom: 15px;
    opacity: 0.85;
}

footer .msf {
    color: var(--wine);
    font-weight: 700;
}

/* ==========================================================================
   10. MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */
@media (max-width: 992px) {
    .envios-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 850px) {
    .contacto-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    html { scroll-padding-top: 145px; } 
    header { flex-direction: column; height: auto; padding: 15px 4%; gap: 12px; }
    nav { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .hero h1 { font-size: 2rem; }
    .title { font-size: 2rem; }
    .main-track { height: 280px; }
}

@media (max-width: 550px) {
    .grid-2 { grid-template-columns: 1fr; }
}
/* ==========================================================================
   11. SECCIÓN DE IMÁGENES DE REDIRECCIÓN (CATEGORÍAS DE PRODUCTOS)
   ========================================================================== */
.grid-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
    width: 100%;
}

.categoria-card {
    position: relative;
    height: 380px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--sakura-pink);
    box-shadow: 0 6px 20px rgba(42, 4, 10, 0.05);
    transition: var(--transition);
}

/* Enlace contenedor que cubre toda la tarjeta */
.categoria-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

/* Imagen de fondo de la categoría */
.categoria-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

/* Capa oscura sutil encima de la foto para que se lea el texto */
.categoria-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(42, 4, 10, 0.85) 10%, rgba(42, 4, 10, 0.2) 20%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    box-sizing: border-box;
    z-index: 2;
}

/* Títulos de las categorías */
.categoria-overlay h3 {
    color: var(--white-pure);
    font-family: 'Noto Serif JP', serif;
    font-size: 1.6rem;
    margin-bottom: 8px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

/* Botón o indicador "Ver catálogo" */
.categoria-btn {
    color: var(--bg-cream);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.categoria-btn i {
    transition: transform 0.3s ease;
}

/* ESTRUCTURA EFECTO HOVER (Animación visual elegante al pasar el mouse) */
.categoria-card:hover {
    transform: translateY(-5px);
    border-color: var(--wine);
    box-shadow: 0 12px 28px rgba(120, 24, 32, 0.15);
}

.categoria-card:hover .categoria-img {
    transform: scale(1.06); /* Zoom suave a la foto */
}

.categoria-card:hover .categoria-btn i {
    transform: translateX(5px); /* Desplaza la flechita */
}

.embalaje-card{
    position:relative;
}

.embalaje-slider{
    position:relative;
    height:220px;
    overflow:hidden;
    border-radius:var(--radius);
    margin-bottom:20px;
}

.embalaje-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;
    transition:.5s;
}

.embalaje-slide.active{
    opacity:1;
}

.emb-prev,
.emb-next{
    position:absolute;
    top:110px;
    transform:translateY(-50%);

    width:40px;
    height:40px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    background:white;
}

.emb-prev{
    left:15px;
}

.emb-next{
    right:15px;
}
.slider-card{
    position: relative;
}

.slider-envios{
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.envio-slide{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;
    transition: opacity .5s ease;
}

.envio-slide.active{
    opacity: 1;
}

.slider-card .prev,
.slider-card .next{
    position: absolute;
    top: 110px;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    background: rgba(255,255,255,.9);

    z-index: 5;
}

.slider-card .prev{
    left: 15px;
}

.slider-card .next{
    right: 15px;
}

.slider-card .prev:hover,
.slider-card .next:hover{
    background: white;
}

.fabricacion-destacada {
    margin: 35px 0 25px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

.fabricacion-destacada img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

.fabricacion-texto {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 40px;
    color: #666;
    line-height: 1.7;
    font-size: 1.05rem;
}
/* Agregá esto al final de la sección 9 en tu styles.css */
.canal-item .fa-whatsapp {
    color: var(--wine); /* El color verde oficial de WhatsApp */
}

/* Cuando pasan el mouse por encima, el ícono se vuelve blanco junto con el texto */
.canal-item:hover .fa-whatsapp {
    color: white;
}