/* ========================================
   INDEX — estilos específicos homepage
   ======================================== */

body { cursor:auto; }

/* ── CURSOR ── */
.cursor {
  position:fixed; width:10px; height:10px; border-radius:50%;
  background:#1a1e2e; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s, height .25s, background .25s;
}
.cursor-ring {
  position:fixed; width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(26,30,46,0.5); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .3s, height .3s, border-color .3s, background .3s;
}
.cursor.big  { width:6px; height:6px; }
.cursor-ring.big { width:52px; height:52px; border-color:rgba(26,30,46,0.25); }

/* ── NAV HERO (transparente) ── */
nav.nav-hero {
  position:absolute; top:0; left:0; width:100%;
  z-index:100; padding:28px 40px 14px;
  background:transparent; text-align:center;
}
nav.nav-hero .nav-brand { color:#fff; }
nav.nav-hero .nav-links a {
  color:#fff; border-bottom-color:rgba(255,255,255,0.6);
}
nav.nav-hero .hamburger span { background:#fff; }

/* ── HERO ── */
.hero { position:relative; width:100%; height:120vh; overflow:hidden; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.05) 50%,rgba(0,0,0,0.4) 100%);
}
.hero-name {
  position:absolute; left:80px; top:50%; transform:translateY(-50%);
  font-family:'Gabarito', sans-serif; font-size:72px; font-weight:800;
  color:#fff; line-height:1.0; letter-spacing:-1px;
  text-shadow:0 1px 6px rgba(0,0,0,0.15); z-index:10;
}
.hero-name .line { display:block; overflow:hidden; }
.hero-name .line span { display:block; }

/* ── SOBRE MÍ ── */
.sobre { background:#1a1e2e; padding:80px; display:flex; align-items:center; justify-content:center; gap:70px; }
.sobre img { width:300px; height:420px; flex-shrink:0; object-fit:cover; border-radius:18px; }
.sobre-text { max-width:520px; }
.sobre-text h2 { font-family:'Rubik', sans-serif; font-size:20px; font-weight:500; color:#fff; line-height:1.4; margin-bottom:28px; }
.sobre-text h2 strong { font-weight:700; }
.sobre-text p { font-size:13px; font-weight:300; line-height:1.8; color:rgba(255,255,255,0.7); margin-bottom:12px; }

/* ── BANDA DE ESTILO ── */
.banda-wrap { background:#fff; padding:30px 16px; }
.banda {
  background:#e8e5dc; border-radius:18px;
  padding:60px 70px; display:flex; align-items:center; gap:60px;
  max-width:1100px; margin:0 auto;
}
.banda-text { flex:1; }
.banda-text h2 { font-family:'Gabarito', sans-serif; font-size:30px; font-weight:800; color:#1a1e2e; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; }
.banda-text p { font-size:13px; line-height:1.8; color:#3a3a3a; margin-bottom:20px; max-width:400px; }
.banda-list { list-style:none; margin-bottom:28px; }
.banda-list li { font-size:13px; color:#3a3a3a; padding:5px 0; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.banda-list li::before { content:"✓"; color:#3a3a3a; font-weight:600; flex-shrink:0; }
.banda-price { font-size:15px; font-weight:500; color:#1a1e2e; margin-top:6px; }
.banda img { width:320px; height:400px; object-fit:cover; border-radius:14px; flex-shrink:0; }

/* ── PRODUCTOS ── */
.productos { background:#1a1e2e; padding:70px 60px; text-align:center; }
.section-title { font-family:'Gabarito', sans-serif; font-size:38px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#fff; margin-bottom:50px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1080px; margin:0 auto; }
.item-card { text-decoration:none; display:block; transition:transform .3s ease; }
.item-card:hover { transform:translateY(-4px); }
.item-card-img {
  width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:#2a2e3e; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.2); font-size:10px; letter-spacing:2px; text-transform:uppercase;
}
.item-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.item-card:hover .item-card-img img { transform:scale(1.05); }
.item-card-name { font-size:12px; color:rgba(255,255,255,0.85); margin-bottom:4px; text-align:left; }
.item-card-price { font-size:13px; font-weight:500; color:rgba(255,255,255,0.9); text-align:left; }

/* ── COLORIMETRÍA ── */
.colorimetria-wrap { background:#fff; padding:30px 16px; }
.colorimetria {
  background:#e8e5dc; border-radius:18px;
  padding:60px 70px; display:flex; align-items:flex-start; gap:60px;
  max-width:1100px; margin:0 auto;
}
.colorimetria img { width:290px; height:460px; object-fit:cover; border-radius:14px; flex-shrink:0; }
.colorimetria-text { flex:1; padding-top:10px; }
.colorimetria-text h2 { font-family:'Gabarito', sans-serif; font-size:26px; font-weight:800; color:#1a1e2e; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; }
.colorimetria-text h3 { font-family:'Rubik', sans-serif; font-size:15px; font-weight:500; color:#1a1e2e; margin-bottom:10px; }
.colorimetria-text p { font-size:13px; line-height:1.8; color:#3a3a3a; margin-bottom:14px; }
.colorimetria-text .price { font-size:15px; font-weight:500; color:#1a1e2e; margin-top:16px; }

/* ── CURSOS ── */
.cursos { background:#1a1e2e; padding:70px 60px; text-align:center; }

/* ── INSTAGRAM ── */
.ig-section { background:#fff; padding:50px 60px; text-align:center; }
.ig-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; max-width:880px; margin:0 auto; }
.ig-item { aspect-ratio:1/1; overflow:hidden; background:#e8e5dc; cursor:none; }
.ig-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ig-item:hover img { transform:scale(1.05); }
.ig-link {
  display:inline-block; margin-top:24px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:#1a1e2e; text-decoration:none; border-bottom:1px solid #1a1e2e;
  padding-bottom:2px; transition:opacity .2s;
}
.ig-link:hover { opacity:.5; }

/* ── COMUNIDAD ── */
.comunidad-wrap { background:#fff; padding:30px 16px 60px; }
.comunidad {
  background:#1a1e2e; border-radius:18px;
  padding:70px 80px; display:flex; align-items:center; gap:80px;
  max-width:1100px; margin:0 auto;
}
.comunidad-text { flex:1; }
.comunidad-text h2 { font-family:'Gabarito', sans-serif; font-size:28px; font-weight:400; color:#c4a4a4; line-height:1.4; font-style:italic; }
.comunidad-form { flex:1; }
.form-label { display:block; font-size:11px; color:rgba(255,255,255,0.6); margin-bottom:4px; margin-top:16px; }
.form-input {
  width:100%; padding:10px 12px;
  background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.25);
  color:#fff; font-family:'Rubik', sans-serif; font-size:13px; outline:none;
  transition:border-color .2s; cursor:none;
}
.form-input:focus { border-bottom-color:rgba(255,255,255,0.7); }
.form-input::placeholder { color:rgba(255,255,255,0.25); font-size:12px; }
textarea.form-input { resize:none; height:70px; padding-top:8px; }
.form-input { cursor:text; }
.btn-submit {
  width:100%; margin-top:24px; padding:14px;
  background:#1a1e2e; color:#fff;
  border:1px solid rgba(255,255,255,0.4);
  font-family:'Rubik', sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:background .3s; border-radius:4px;
}
.btn-submit:hover { background:#fff; color:#1a1e2e; }

/* cursor normal en todos los interactivos */
a, button, .item-card, .ig-item, .hamburger, input, textarea, .btn-tienda, .wa-btn { cursor:pointer; }
.btn-tienda {
  display:inline-block; padding:13px 28px;
  background:#1a1e2e; color:#fff;
  font-family:'Rubik', sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; border-radius:4px; transition:background .25s, color .25s;
  margin-top:20px;
}
.btn-tienda:hover { background:#fff; color:#1a1e2e; outline:1px solid #1a1e2e; }
.btn-tienda.light {
  background:#fff; color:#1a1e2e;
}
.btn-tienda.light:hover { background:#1a1e2e; color:#fff; outline:none; }
.productos-cta { text-align:center; margin-top:36px; }
@media(max-width:900px) { .btn-tienda { cursor:auto; } }

/* ── BLOG PREVIEW (reemplaza Instagram) ── */
.blog-preview { background:#fff; padding:50px 60px; text-align:center; }
.blog-preview-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  max-width:1100px; margin:0 auto 24px;
}
.bp-card {
  text-decoration:none; display:block;
  border-radius:12px; overflow:hidden;
  transition:transform .3s;
  text-align:left;
}
.bp-card:hover { transform:translateY(-4px); }
.bp-img { height:220px; overflow:hidden; background:#e8e5dc; }
.bp-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.bp-card:hover .bp-img img { transform:scale(1.04); }
.bp-body { padding:14px 4px 0; }
.bp-tag {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:#c4a4a4; margin-bottom:6px; display:block;
}
.bp-title {
  font-family:'Gabarito', sans-serif; font-size:14px; font-weight:700;
  color:#1a1e2e; line-height:1.35;
}

@media(max-width:900px) {
  .blog-preview { padding:40px 24px; }
  .blog-preview-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px) {
  .cursor, .cursor-ring { display:none; }
  nav { padding:20px 24px 14px; text-align:left; }
  .nav-brand { font-size:14px; letter-spacing:2px; }
  .hero-name { font-size:44px; left:24px; }
  .sobre { flex-direction:column; padding:50px 24px; gap:30px; }
  .sobre img { width:100%; height:300px; border-radius:14px; }
  .banda { flex-direction:column; padding:40px 24px; gap:30px; }
  .banda img { width:100%; height:260px; }
  .colorimetria { flex-direction:column; padding:40px 24px; gap:30px; }
  .colorimetria img { width:100%; height:280px; }
  .grid4 { grid-template-columns:repeat(2,1fr); }
  .ig-grid { grid-template-columns:repeat(2,1fr); }
  .comunidad { flex-direction:column; padding:40px 24px; gap:30px; }
  .productos, .cursos { padding:50px 24px; }
  .ig-section { padding:40px 24px; }
  .form-input, .btn-submit, .wa-btn, .ig-item { cursor:pointer; }
}