/* ============================================================
   KOYAMA — Estilos Páginas de Producto v2
   ============================================================ */

/* ── Secciones alternantes ── */
.prod-seccion { position:relative; overflow:hidden; padding:70px 0; }
.prod-seccion .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }
.prod-rojo { background:linear-gradient(135deg,#8B0000 0%,#C8191F 50%,#E31E24 100%); }
.prod-rojo::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(0,0,0,.12) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.prod-oscuro { background:var(--black); }
.prod-oscuro::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:22px 22px; }
.prod-claro { background:#f5f5f5; }
.prod-claro-blanco { background:var(--white); }
.prod-seccion.img-izq .prod-imagen { order:-1; }

/* ── Textos ── */
.prod-texto h2 { font-family:var(--font-title); font-style:italic; font-weight:900; font-size:clamp(28px,4vw,52px); text-transform:uppercase; line-height:1.05; margin-bottom:16px; }
.prod-rojo .prod-texto h2, .prod-oscuro .prod-texto h2 { color:var(--white); }
.prod-claro .prod-texto h2, .prod-claro-blanco .prod-texto h2 { color:var(--black); }
.prod-texto h2 em { font-style:italic; color:var(--red); display:block; }
.prod-rojo .prod-texto h2 em { color:rgba(255,255,255,.9); text-decoration:underline; text-underline-offset:4px; }
.prod-texto p { font-family:var(--font-body); font-size:15px; line-height:1.75; margin-bottom:14px; }
.prod-rojo .prod-texto p { color:rgba(255,255,255,.88); }
.prod-oscuro .prod-texto p { color:rgba(255,255,255,.75); }
.prod-claro .prod-texto p, .prod-claro-blanco .prod-texto p { color:#444; }

.prod-lista { list-style:none; padding:0; margin:16px 0 24px; }
.prod-lista li { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:14px; line-height:1.5; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.prod-claro .prod-lista li, .prod-claro-blanco .prod-lista li { color:#333; border-bottom-color:#eee; }
.prod-rojo .prod-lista li, .prod-oscuro .prod-lista li { color:rgba(255,255,255,.82); }
.prod-lista li:last-child { border-bottom:none; }
.prod-lista li i { color:var(--red); flex-shrink:0; margin-top:3px; font-size:12px; }
.prod-rojo .prod-lista li i { color:rgba(255,255,255,.7); }

.prod-destacado { background:transparent; border-left:4px solid var(--red); padding:16px 20px; margin:20px 0; }
.prod-claro .prod-destacado, .prod-claro-blanco .prod-destacado { background:#fff8f8; }
.prod-oscuro .prod-destacado, .prod-rojo .prod-destacado { border-color:rgba(255,255,255,.4); }
.prod-destacado p { font-family:var(--font-body); font-size:14px; line-height:1.6; font-style:italic; }
.prod-rojo .prod-destacado p, .prod-oscuro .prod-destacado p { color:rgba(255,255,255,.75); }
.prod-claro .prod-destacado p, .prod-claro-blanco .prod-destacado p { color:#555; }

/* ── Imagen de producto ── */
.prod-imagen { display:flex; justify-content:center; align-items:center; }
.prod-imagen img { max-width:100%; max-height:380px; object-fit:contain; filter:drop-shadow(0 16px 40px rgba(0,0,0,.35)); transition:transform .4s; }
.prod-imagen img:hover { transform:scale(1.04); }

/* ── Banner héroe de producto ── */
.producto-banner { background:var(--black); position:relative; overflow:hidden; padding:0; min-height:200px; display:flex; align-items:center; }
.producto-banner::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:22px 22px; z-index:0; }
.producto-banner .container { position:relative; z-index:2; padding-top:48px; padding-bottom:48px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.producto-banner h1 { font-family:var(--font-title); font-style:italic; font-weight:900; font-size:clamp(40px,7vw,90px); text-transform:uppercase; color:var(--white); line-height:.9; }
.producto-banner h1 span { color:var(--red); }
.producto-banner .banner-img { flex-shrink:0; max-width:38%; display:flex; justify-content:center; }
.producto-banner .banner-img img { max-height:180px; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.producto-banner .breadcrumb { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.35); margin-bottom:12px; letter-spacing:1px; }
.producto-banner .breadcrumb a { color:rgba(255,255,255,.35); text-decoration:none; transition:color .2s; }
.producto-banner .breadcrumb a:hover { color:var(--red); }
.producto-banner .breadcrumb span { color:rgba(255,255,255,.2); margin:0 6px; }

/* ── Sección diagrama/técnico ── */
.prod-diagrama { background:var(--black); padding:60px 0; position:relative; overflow:hidden; }
.prod-diagrama::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:22px 22px; }
.prod-diagrama .container { position:relative; z-index:2; }
.prod-diagrama h2 { font-family:var(--font-title); font-style:italic; font-weight:900; font-size:clamp(22px,3vw,38px); text-transform:uppercase; color:var(--white); margin-bottom:8px; }
.prod-diagrama h2 em { color:var(--red); font-style:italic; }
.prod-diagrama p { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.7); line-height:1.7; max-width:600px; margin-bottom:24px; }
.prod-diagrama .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.prod-diagrama img { max-width:100%; max-height:320px; object-fit:contain; }

/* ── Badges de marca ── */
.prod-badges { background:var(--black); padding:24px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.prod-badges .container { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.prod-badge { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.prod-badge img { height:48px; width:auto; object-fit:contain; }
.prod-badge span { font-family:var(--font-title); font-weight:700; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.45); max-width:90px; line-height:1.3; }

/* ── Mantenimiento Inteligente ── */
.seccion-mantenimiento { background:var(--black); padding:60px 0 70px; position:relative; overflow:hidden; }
.seccion-mantenimiento::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:22px 22px; }
.seccion-mantenimiento .container { position:relative; z-index:2; }
.mantenimiento-titulo { text-align:center; margin-bottom:40px; }
.mantenimiento-titulo h2 { font-family:var(--font-title); font-style:italic; font-weight:900; font-size:clamp(22px,4vw,44px); text-transform:uppercase; line-height:1.1; }
.mantenimiento-titulo h2 .rojo { color:var(--red); display:block; }
.mantenimiento-titulo h2 .blanco { color:var(--white); }
.mantenimiento-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.mant-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:20px 14px; text-align:center; transition:background .2s,border-color .2s; }
.mant-card:hover { background:rgba(227,30,36,.08); border-color:rgba(227,30,36,.3); }
.mant-card img { height:80px; width:auto; object-fit:contain; margin:0 auto 14px; display:block; }
.mant-card h4 { font-family:var(--font-title); font-weight:700; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
.mant-card p { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.5); line-height:1.5; }

/* ── Catálogo CTA en producto ── */
.seccion-catalogo-producto { background:var(--black); position:relative; overflow:hidden; padding:70px 0; }
.seccion-catalogo-producto::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:22px 22px; }
.seccion-catalogo-producto .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }
.sec-cat-texto h2 { font-family:var(--font-title); font-style:italic; font-weight:900; font-size:clamp(28px,4vw,52px); text-transform:uppercase; color:var(--white); line-height:1.05; margin-bottom:14px; }
.sec-cat-texto h2 .rojo { color:var(--red); display:block; }
.sec-cat-texto p { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.65); line-height:1.7; max-width:380px; margin-bottom:28px; }
.sec-cat-imagen { display:flex; justify-content:center; align-items:center; }
.sec-cat-imagen img { max-height:320px; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5)); }

/* ── Elige la calidad ── */
.seccion-calidad-producto { background:#f5f5f5; position:relative; overflow:hidden; padding:70px 0; }
.seccion-calidad-producto .container { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }
.cal-texto h2 { font-family:var(--font-title); font-weight:800; font-size:clamp(22px,3vw,40px); text-transform:uppercase; color:var(--black); line-height:1.1; margin-bottom:16px; }
.cal-texto h2 em { color:var(--red); font-style:normal; display:block; }
.cal-texto p { font-family:var(--font-body); font-size:14px; color:#555; line-height:1.75; max-width:460px; margin-bottom:24px; }
.cal-imagen { display:flex; justify-content:center; align-items:center; }
.cal-imagen img { max-height:300px; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(0,0,0,.12)); }

/* ── Página PRODUCTOS principal ── */
.productos-hero-principal { background:var(--black); position:relative; overflow:hidden; padding:60px 0; }
.productos-hero-principal::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:22px 22px; }
.productos-hero-principal .container { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; }
.productos-hero-principal h1 { font-family:var(--font-title); font-style:italic; font-weight:900; font-size:clamp(36px,6vw,80px); text-transform:uppercase; color:var(--white); line-height:.95; margin-bottom:16px; }
.productos-hero-principal h1 span { color:var(--red); }
.productos-hero-principal .hero-tagline { font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,.65); line-height:1.6; max-width:400px; }
.productos-hero-principal .hero-img { display:flex; justify-content:center; align-items:center; }
.productos-hero-principal .hero-img img { max-height:240px; object-fit:contain; filter:drop-shadow(0 16px 40px rgba(0,0,0,.5)); }

.productos-lista { background:var(--white); padding:70px 0; }
.productos-lista .container { display:grid; grid-template-columns:repeat(3,1fr); gap:50px 40px; }
.prod-card { text-align:center; }
.prod-card-img { height:180px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.prod-card-img img { max-height:100%; max-width:100%; object-fit:contain; transition:transform .3s; }
.prod-card:hover .prod-card-img img { transform:scale(1.06); }
.prod-card h3 { font-family:var(--font-title); font-weight:700; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; color:var(--black); margin-bottom:10px; }
.prod-card p { font-family:var(--font-body); font-size:13px; color:#666; line-height:1.5; margin-bottom:14px; }

/* ── Dropdown menú ── */
.nav-menu .has-dropdown { position:relative; }
.nav-menu .dropdown { position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(8px); background:var(--black); border-top:2px solid var(--red); min-width:220px; box-shadow:0 8px 30px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:2000; list-style:none; padding:6px 0; }
.nav-menu .dropdown::before { content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:12px; height:7px; background:var(--red); clip-path:polygon(50% 0%,0% 100%,100% 100%); }
.nav-menu .has-dropdown:hover .dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.nav-menu .dropdown li a { display:flex; align-items:center; gap:10px; padding:11px 20px; font-family:var(--font-title); font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.7); transition:color .15s,background .15s,padding-left .15s; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; }
.nav-menu .dropdown li:last-child a { border-bottom:none; }
.nav-menu .dropdown li a::after { display:none; }
.nav-menu .dropdown li a:hover { color:var(--white); background:rgba(227,30,36,.12); padding-left:26px; }
.nav-menu .dropdown li a .icon-prod { color:var(--red); font-size:11px; flex-shrink:0; }
.nav-menu .has-dropdown > a::before { content:''; display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; margin-left:5px; vertical-align:middle; opacity:.6; transition:transform .2s; }
.nav-menu .has-dropdown:hover > a::before { transform:rotate(180deg); opacity:1; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .prod-seccion .container, .seccion-catalogo-producto .container, .seccion-calidad-producto .container, .productos-hero-principal .container { grid-template-columns:1fr; gap:30px; text-align:center; }
  .prod-seccion.img-izq .prod-imagen { order:0; }
  .prod-texto p, .cal-texto p, .sec-cat-texto p { max-width:100%; }
  .prod-imagen img, .cal-imagen img { max-height:220px; }
  .mantenimiento-grid { grid-template-columns:repeat(2,1fr); }
  .mant-card:last-child { grid-column:1/-1; }
  .prod-badges .container { gap:20px; }
  .prod-badge img { height:40px; }
  .productos-lista .container { grid-template-columns:repeat(2,1fr); }
  .producto-banner .container { flex-direction:column; text-align:center; }
  .producto-banner .banner-img { max-width:70%; }
  .prod-diagrama .grid-2 { grid-template-columns:1fr; }
  .nav-menu .dropdown { position:static; transform:none; opacity:1; pointer-events:all; background:rgba(255,255,255,.04); border-top:none; border-left:2px solid var(--red); box-shadow:none; margin-left:16px; display:none; }
  .nav-menu .dropdown::before { display:none; }
  .nav-menu .has-dropdown.open .dropdown { display:block; }
  .nav-menu .has-dropdown > a::before { float:right; margin-top:6px; }
}
@media (max-width:600px) {
  .mantenimiento-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .mant-card:last-child { grid-column:auto; }
  .productos-lista .container { grid-template-columns:1fr; }
}