/* === HERO — THE WOW MOMENT === */
.hero_inicio {
    padding:20px 0 10px;
    position:relative;
}
.hero_inicio::before {
    content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
    width:80%; height:300px;
   
    pointer-events:none; z-index:0;
}
.hero_contenedor {
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center;
}
.hero_texto {
    background:#fff;
    border-radius:var(--radius-xl); padding:42px;
    box-shadow: var(--shadow-lg);
    position:relative; overflow:hidden;
    animation: slideUp .8s cubic-bezier(.22,.61,.36,1) both;
}
/* Paint stripe accent */
.hero_texto::before {
    content:''; position:absolute; top:0; left:0; width:6px; height:100%;
    background: var(--violet);
    border-radius:0 4px 4px 0;
}
.hero_texto::after {
    content:''; position:absolute; top:-50px; right:-50px;
    width:200px; height:200px;
   
    pointer-events:none;
}
.hero_texto .eyebrow { margin-bottom:14px; }
.hero_texto h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height:1.06; margin-bottom:16px;
    letter-spacing:-0.03em;
}
.hero_texto h1 span, .hero_texto h1 em {
    color: var(--violet);
    font-style:normal;
}
.hero_texto p { color:var(--text-secondary); font-size:1.05rem; max-width:50ch; line-height:1.7; }
.hero_acciones { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.btn_hero {
    padding:14px 28px; border-radius:999px;
    background: var(--coral);
    color:#182534; font-weight:700; font-size:.92rem;
    box-shadow: var(--shadow-color);
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
}
.btn_hero:hover { transform:translateY(-3px) scale(1.02); box-shadow: 0 14px 30px rgba(192, 137, 89,.24); }
.btn_hero.secundario {
    background:#fff; color:var(--text);
    border:1px solid var(--violet);
    box-shadow:none;
}
.btn_hero.secundario:hover { background:var(--violet); color:#fff; box-shadow:var(--shadow-violet); }

/* === GALLERY — Art-forward === */
.hero_galeria {
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
    animation: slideUp .9s cubic-bezier(.22,.61,.36,1) .15s both;
}
.hero_card {
    position:relative; min-height:200px;
    border-radius:var(--radius-lg); overflow:hidden;
    background:var(--surface);
    box-shadow:var(--shadow-float);
    cursor:pointer;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s ease;
}
.hero_card::after {
    content:''; position:absolute; inset:0;
    background: rgba(26, 39, 45,0.66);
    opacity:0; transition:opacity .5s;
}
.hero_card:hover { transform:scale(1.03) rotate(-0.5deg); box-shadow:var(--shadow-lg); }
.hero_card:hover::after { opacity:1; }
.hero_card_grande { grid-column:span 2; min-height:280px; }
.hero_card img {
    width:100%; height:100%; object-fit:contain; object-position:center; background:var(--surface); padding:10px; box-sizing:border-box;
    transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
}
.hero_card:hover img { transform:scale(1.03); }
.hero_overlay {
    position:absolute; inset:auto 0 0 0; padding:22px;
    color:#fff;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 39, 45,.82) 100%);
    z-index:2;
    transform:translateY(10px); opacity:0;
    transition: all .4s ease;
}
.hero_card:hover .hero_overlay { transform:translateY(0); opacity:1; }
.hero_overlay h3 { font-family:var(--font-display); font-size:1.15rem; margin-bottom:4px; }
.hero_overlay span { color:var(--amber-light); font-weight:700; font-size:1.1rem; }

/* === PRODUCTS GRID === */
.grid-productos {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
.card-producto {
    background:#fff;
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-float);
    transition: all .45s cubic-bezier(.25,.46,.45,.94);
    animation: slideUp .6s cubic-bezier(.22,.61,.36,1) both;
    position:relative;
}
.card-producto:nth-child(1) { animation-delay:.05s; }
.card-producto:nth-child(2) { animation-delay:.12s; }
.card-producto:nth-child(3) { animation-delay:.19s; }
.card-producto:nth-child(4) { animation-delay:.26s; }
.card-producto:nth-child(5) { animation-delay:.33s; }
.card-producto:nth-child(6) { animation-delay:.4s; }
.card-producto:hover {
    transform:translateY(-10px) scale(1.01);
    box-shadow: 0 20px 50px rgba(41, 61, 71,0.12), 0 8px 20px rgba(0,0,0,0.06);
}
.card-producto .img_producto {
    display:block; height:270px; overflow:hidden;
    position:relative;
    background:var(--surface);
}
.card-producto .img_producto::after {
    content:'VER OBRA'; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(26, 39, 45,0.66);
    color:#fff; font-family:var(--font-display); font-weight:700;
    font-size:1.1rem; letter-spacing:.15em;
    opacity:0; transition:opacity .4s ease;
}
.card-producto:hover .img_producto::after { opacity:1; }
.card-producto .img_producto img {
    width:100%; height:100%; object-fit:contain; object-position:center; background:var(--surface); padding:10px; box-sizing:border-box;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.card-producto:hover .img_producto img { transform:scale(1.02); }
.info_producto { padding:22px; }
.tag-categoria {
    display:inline-block; padding:5px 14px;
    border-radius:999px;
    font-size:.75rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    margin-bottom:12px;
}
/* Alternating category colors */
.card-producto:nth-child(3n+1) .tag-categoria { background:var(--coral-glow); color: var(--coral-text); }
.card-producto:nth-child(3n+2) .tag-categoria { background:var(--violet-glow); color:var(--violet); }
.card-producto:nth-child(3n+3) .tag-categoria { background:var(--teal-glow); color:var(--teal); }
.info_producto h3 { font-family:var(--font-display); font-size:1.1rem; margin-bottom:6px; }
.info_producto p { color:var(--text-muted); min-height:48px; font-size:.88rem; line-height:1.6; }
.precio-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.precio { font-size:1.35rem; font-weight:800; font-family:var(--font-display); color:var(--text); }
.btn-card {
    background: var(--violet);
    color:#fff; padding:10px 20px;
    border-radius:999px; font-weight:700; font-size:.84rem;
    box-shadow:var(--shadow-violet);
    transition:all .3s;
}
.btn-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(41, 61, 71,.3); }

/* === CATEGORIES === */
.categorias-home .info_categorias { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.categoria {
    position:relative; min-height:280px;
    border-radius:var(--radius-lg); overflow:hidden;
    background:var(--surface);
    box-shadow:var(--shadow-float);
    cursor:pointer;
    transition: all .5s cubic-bezier(.25,.46,.45,.94);
}
.categoria:hover { transform:translateY(-8px) scale(1.01); box-shadow:var(--shadow-lg); }
.categoria img {
    width:100%; height:100%; object-fit:contain; object-position:center; background:var(--surface); padding:10px; box-sizing:border-box;
    transition:transform .7s cubic-bezier(.25,.46,.45,.94), filter .4s;
    filter:brightness(0.95) saturate(1.1);
}
.categoria:hover img { transform:scale(1.03); filter:brightness(1) saturate(1.1); }
.overlay_categoria {
    position:absolute; inset:auto 0 0 0; padding:24px;
    background:linear-gradient(180deg, transparent, rgba(26,26,46,.85));
    color:#fff;
    transition:padding .3s;
}
.categoria:hover .overlay_categoria { padding-bottom:30px; }
.overlay_categoria span { font-family:var(--font-display); font-weight:800; font-size:1.2rem; }

@media(max-width:920px){
    .hero_contenedor,.grid-productos,.categorias-home .info_categorias { grid-template-columns:1fr 1fr; }
    .hero_contenedor { grid-template-columns:1fr; }
}
@media(max-width:640px){
    .hero_texto{ padding:28px; }
    .grid-productos,.categorias-home .info_categorias,.hero_galeria { grid-template-columns:1fr; }
    .hero_card_grande{ grid-column:span 1; }
}

/* =========================
   CTA HOME (INTEGRADO A TU DESIGN SYSTEM)
========================= */
.cta-home {
    background: linear-gradient(135deg, var(--violet), #1a272d);
    color: #fff;
    padding: 70px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin: 60px auto;
    position: relative;
    overflow: hidden;
}

/* efecto decorativo suave */
.cta-home::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--coral-glow), transparent 70%);
    top: -100px;
    right: -100px;
    z-index: 0;
}

.cta-home::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    bottom: -80px;
    left: -80px;
    z-index: 0;
}

/* contenido */
.cta-home div {
    max-width: 600px;
    position: relative;
    z-index: 1;
}

/* eyebrow */
.cta-home .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral-text);
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

/* título */
.cta-home h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-family: var(--font-display);
    margin-bottom: 10px;
}

/* texto */
.cta-home p {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
}

/* botón */
.cta-home .btn_hero {
    background: var(--coral);
    color: var(--violet);
    padding: 12px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    transition: 0.25s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(255, 197, 63, 0.25);
}

.cta-home .btn_hero:hover {
    transform: translateY(-3px);
    background: var(--coral-light);
    box-shadow: 0 15px 30px rgba(255, 197, 63, 0.35);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cta-home {
        flex-direction: column;
        text-align: center;
        padding: 50px 20px;
    }

    .cta-home .btn_hero {
        width: 100%;
    }
}