/*
Theme Name: Multiplásticos Jaramillo
Theme URI: https://multiplasticos.com.co
Author: Multiplásticos Jaramillo S.A.S
Description: Tema corporativo para Multiplásticos Jaramillo S.A.S
Version: 1.0
*/

/* ─── RESET & VARIABLES ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green:#5ab531; --green-dark:#3d8020; --green-light:#7dd44a;
  --black:#0d0d0d; --dark:#1a1a1a; --dark2:#222222;
  --white:#ffffff; --gray:#888; --light-gray:#f4f4f2; --text:#444;
  --heading:'Barlow Condensed',sans-serif; --body:'Barlow',sans-serif;
}
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--white); color: var(--black); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* PRELOADER */
#preloader { position:fixed; inset:0; z-index:9999; background:var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .7s ease,visibility .7s ease; }
#preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.pre-logo { width:100px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.93)} }
.pre-bar { width:160px; height:2px; background:var(--dark2); position:relative; overflow:hidden; border-radius:2px; }
.pre-bar::after { content:''; position:absolute; left:-50%; top:0; width:50%; height:100%; background:var(--green); animation:loading 1.2s ease-in-out infinite; }
@keyframes loading { 0%{left:-50%} 100%{left:110%} }

/* HEADER */
#header { position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:18px 56px; transition:background .4s,padding .4s,box-shadow .4s; }
#header.scrolled { background:var(--black); padding:10px 56px; box-shadow:0 2px 30px rgba(0,0,0,.5); }
.header-logo { height:52px; width:auto; filter:drop-shadow(0 0 8px rgba(90,181,49,.2)); }
.header-logo img { height:100%; width:auto; object-fit:contain; }
nav.main-nav { display:flex; align-items:center; gap:36px; }
nav.main-nav a { font-family:var(--heading); font-size:14px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.85); transition:color .3s; position:relative; }
nav.main-nav a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--green); transition:width .3s; }
nav.main-nav a:hover { color:var(--green); }
nav.main-nav a:hover::after { width:100%; }
.header-social { display:flex; gap:12px; }
.header-social a { width:30px; height:30px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all .3s; }
.header-social a:hover { border-color:var(--green); background:var(--green); }
.header-social svg { width:13px; height:13px; fill:white; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:26px; height:2px; background:white; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:0; top:70px; z-index:400; background:var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; transform:translateX(100%); transition:transform .4s ease; }
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a { font-family:var(--heading); font-size:28px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:white; transition:color .3s; }
.mobile-menu a:hover { color:var(--green); }

/* HERO */
.hero { position:relative; height:100vh; min-height:580px; overflow:hidden; background:var(--black); }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; display:flex; align-items:center; }
.slide.active { opacity:1; }
.slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.07); transition:transform 7s ease; filter:brightness(.45); }
.slide.active .slide-bg { transform:scale(1); }
.slide-1 .slide-bg { background-image:url('imgs/image-1.jpg'); }
.slide-2 .slide-bg { background-image:url('imgs/image-2.jpeg'); }
.slide-3 .slide-bg { background-image:url('imgs/image-3.jpeg'); }
.green-bar-left { position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--green); z-index:3; }
.slide-content { position:relative; z-index:2; padding:0 80px; opacity:0; transform:translateY(40px); transition:opacity .9s .5s ease,transform .9s .5s ease; max-width:820px; }
.slide.active .slide-content { opacity:1; transform:translateY(0); }
.slide-tag { display:inline-block; font-family:var(--heading); font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--green); background:rgba(90,181,49,.12); border:1px solid rgba(90,181,49,.4); padding:5px 16px; margin-bottom:22px; border-radius:2px; }
.slide-title { font-family:var(--heading); font-size:clamp(52px,7.5vw,96px); font-weight:800; line-height:.95; text-transform:uppercase; color:var(--white); margin-bottom:24px; letter-spacing:-1px; }
.slide-title em { color:var(--green); font-style:normal; }
.slide-desc { font-size:16px; font-weight:300; color:rgba(255,255,255,.72); line-height:1.8; max-width:500px; margin-bottom:40px; }
.btn-green { display:inline-block; font-family:var(--heading); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--black); background:var(--green); padding:15px 40px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%); transition:background .3s,transform .2s; }
.btn-green:hover { background:var(--green-light); transform:translateY(-2px); }
.btn-outline-green { display:inline-block; font-family:var(--heading); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green); border:2px solid var(--green); padding:13px 38px; transition:all .3s; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%); }
.btn-outline-green:hover { background:var(--green); color:var(--black); }
.slider-nav { position:absolute; bottom:40px; left:80px; display:flex; gap:8px; z-index:10; }
.slider-dot { width:32px; height:3px; background:rgba(255,255,255,.25); cursor:pointer; transition:all .3s; border-radius:2px; }
.slider-dot.active { background:var(--green); width:56px; }
.slider-arrows { position:absolute; bottom:30px; right:60px; display:flex; gap:4px; z-index:10; }
.s-arrow { width:48px; height:48px; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.s-arrow:hover { background:var(--green); border-color:var(--green); }
.s-arrow svg { width:18px; height:18px; stroke:white; fill:none; stroke-width:1.8; }
.scroll-hint { position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:10; opacity:.6; }
.scroll-hint span { font-family:var(--heading); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:white; }
.scroll-line { width:1px; height:40px; background:white; animation:scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown { 0%{height:0;opacity:1} 100%{height:40px;opacity:0} }

/* SECTIONS */
section { padding:100px 56px; }
.container { max-width:1280px; margin:0 auto; }
.section-label { font-family:var(--heading); font-size:12px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--green); margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.section-label::before { content:''; display:block; width:32px; height:2px; background:var(--green); }
.section-title { font-family:var(--heading); font-size:clamp(36px,4.5vw,58px); font-weight:800; text-transform:uppercase; line-height:1; letter-spacing:-1px; margin-bottom:28px; }
.section-title .accent { color:var(--green); }

/* ABOUT */
.about-section { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-img-wrap { position:relative; height:520px; }
.about-img-main { position:absolute; right:0; top:0; width:82%; height:88%; object-fit:cover; filter:grayscale(15%); }
.about-img-accent { position:absolute; left:0; bottom:0; width:48%; height:50%; object-fit:cover; border:6px solid var(--white); box-shadow:0 20px 48px rgba(0,0,0,.15); }
.about-green-block { position:absolute; right:0; bottom:-18px; width:40%; height:6px; background:var(--green); }
.about-text p { font-size:16px; color:var(--text); line-height:1.9; margin-bottom:20px; }
.about-badges { display:flex; gap:20px; margin-top:36px; flex-wrap:wrap; }
.badge { display:flex; align-items:center; gap:12px; background:var(--light-gray); padding:14px 20px; border-radius:4px; border-left:3px solid var(--green); }
.badge-icon { font-size:24px; }
.badge-text { font-family:var(--heading); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }

/* MVV */
.mvv-section { background:var(--black); padding:0; }
.mvv-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.mvv-card { padding:80px 52px; position:relative; overflow:hidden; border-right:1px solid rgba(255,255,255,.07); }
.mvv-card:last-child { border-right:none; }
.mvv-card::before { content:''; position:absolute; inset:0; background:var(--green); transform:scaleY(0); transform-origin:bottom; transition:transform .5s ease; z-index:0; }
.mvv-card:hover::before { transform:scaleY(1); }
.mvv-card > * { position:relative; z-index:1; }
.mvv-number { font-family:var(--heading); font-size:72px; font-weight:800; color:rgba(255,255,255,.05); position:absolute; top:20px; right:30px; z-index:0; line-height:1; }
.mvv-icon-wrap { width:72px; height:72px; border:2px solid var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:28px; transition:border-color .3s; }
.mvv-card:hover .mvv-icon-wrap { border-color:var(--black); }
.mvv-icon-wrap svg { width:32px; height:32px; fill:var(--green); transition:fill .3s; }
.mvv-card:hover .mvv-icon-wrap svg { fill:var(--black); }
.mvv-label { font-family:var(--heading); font-size:28px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--white); margin-bottom:18px; transition:color .3s; }
.mvv-card:hover .mvv-label { color:var(--black); }
.mvv-text { font-size:15px; color:rgba(255,255,255,.65); line-height:1.8; transition:color .3s; }
.mvv-card:hover .mvv-text { color:rgba(0,0,0,.8); }
.valores-list { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.valores-list li { display:flex; align-items:flex-start; gap:10px; font-size:15px; color:rgba(255,255,255,.65); transition:color .3s; }
.mvv-card:hover .valores-list li { color:rgba(0,0,0,.8); }
.valores-list li::before { content:''; display:inline-block; width:8px; height:8px; min-width:8px; border:2px solid var(--green); border-radius:50%; margin-top:6px; transition:border-color .3s; }
.mvv-card:hover .valores-list li::before { border-color:var(--black); }

/* PRODUCTOS */
.productos-section { background:var(--light-gray); }
.productos-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:20px; flex-wrap:wrap; }
.productos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.producto-card { position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--dark2); cursor:pointer; }
.producto-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease,filter .6s ease; filter:brightness(.7); }
.producto-card:hover img { transform:scale(1.08); filter:brightness(.4); }
.producto-info { position:absolute; bottom:0; left:0; right:0; padding:28px 28px 20px; background:linear-gradient(transparent,rgba(0,0,0,.85)); transform:translateY(0); transition:transform .4s; }
.producto-card:hover .producto-info { transform:translateY(-8px); }
.producto-cat { font-family:var(--heading); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.producto-name { font-family:var(--heading); font-size:20px; font-weight:700; text-transform:uppercase; color:var(--white); letter-spacing:1px; }
.producto-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); opacity:0; transition:all .4s .1s; }
.producto-card:hover .producto-btn { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* DIFERENTE */
.diferente-section { background:var(--white); }
.diferente-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.diferente-img { position:relative; }
.diferente-img img { width:100%; height:420px; object-fit:cover; }
.diferente-img-tag { position:absolute; bottom:-20px; right:-20px; background:var(--green); padding:20px 28px; font-family:var(--heading); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--black); box-shadow:0 12px 32px rgba(90,181,49,.35); }
.diferente-points { display:flex; flex-direction:column; gap:28px; margin-top:32px; }
.d-point { display:flex; gap:20px; align-items:flex-start; opacity:0; transform:translateX(-20px); transition:opacity .6s ease,transform .6s ease; }
.d-point.visible { opacity:1; transform:translateX(0); }
.d-point-num { font-family:var(--heading); font-size:40px; font-weight:800; color:rgba(90,181,49,.2); line-height:1; min-width:48px; }
.d-point-title { font-family:var(--heading); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.d-point-text { font-size:14px; color:var(--text); line-height:1.7; }

/* STATS */
.stats-strip { background:var(--green); padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:52px 32px; text-align:center; border-right:1px solid rgba(0,0,0,.12); position:relative; overflow:hidden; }
.stat-item::before { content:''; position:absolute; inset:0; background:var(--black); transform:scaleY(0); transform-origin:bottom; transition:transform .4s ease; z-index:0; }
.stat-item:hover::before { transform:scaleY(1); }
.stat-item > * { position:relative; z-index:1; }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--heading); font-size:56px; font-weight:800; color:var(--black); line-height:1; margin-bottom:8px; transition:color .4s; }
.stat-item:hover .stat-num { color:var(--green); }
.stat-label { font-family:var(--heading); font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(0,0,0,.6); transition:color .4s; }
.stat-item:hover .stat-label { color:rgba(255,255,255,.6); }

/* TESTIMONIOS */
.testimonials-section { background:var(--dark); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:64px; }
.t-card { background:var(--dark2); padding:44px 36px; border-top:3px solid transparent; transition:border-color .4s,transform .4s; }
.t-card:hover { border-color:var(--green); transform:translateY(-6px); }
.t-quote { font-family:var(--heading); font-size:64px; line-height:1; color:var(--green); margin-bottom:8px; }
.t-text { font-size:15px; color:rgba(255,255,255,.65); line-height:1.8; font-style:italic; margin-bottom:32px; }
.t-author { display:flex; align-items:center; gap:14px; }
.t-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--green); }
.t-name { font-family:var(--heading); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--white); margin-bottom:3px; }
.t-role { font-size:12px; color:var(--gray); letter-spacing:1px; }

/* CONTACTO */
.contacto-section { background:var(--black); }
.contacto-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; }
.contacto-info p { font-size:16px; color:rgba(255,255,255,.6); line-height:1.9; margin-bottom:36px; }
.contacto-items { display:flex; flex-direction:column; gap:24px; }
.c-item { display:flex; gap:16px; align-items:flex-start; }
.c-icon { width:44px; height:44px; min-width:44px; border:1px solid rgba(90,181,49,.4); display:flex; align-items:center; justify-content:center; }
.c-icon svg { width:18px; height:18px; stroke:var(--green); fill:none; stroke-width:1.8; }
.c-label { font-family:var(--heading); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green); margin-bottom:4px; }
.c-value { font-size:14px; color:rgba(255,255,255,.7); line-height:1.6; }
.form-group { margin-bottom:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group input,.form-group textarea,.form-row input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:16px 20px; color:white; font-family:var(--body); font-size:14px; outline:none; transition:border-color .3s; resize:none; }
.form-group input:focus,.form-group textarea:focus,.form-row input:focus { border-color:var(--green); }
.form-group textarea { height:130px; }
.form-group input::placeholder,.form-group textarea::placeholder,.form-row input::placeholder { color:rgba(255,255,255,.3); }
.redes-strip { margin-top:48px; }
.redes-label { font-family:var(--heading); font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:16px; }
.redes-icons { display:flex; gap:12px; }
.red-icon { width:40px; height:40px; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.red-icon:hover { background:var(--green); border-color:var(--green); }
.red-icon svg { width:16px; height:16px; fill:rgba(255,255,255,.6); transition:fill .3s; }
.red-icon:hover svg { fill:var(--black); }

/* FOOTER */
footer { background:#080808; padding:72px 56px 32px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:56px; }
.footer-brand img { height:56px; width:auto; margin-bottom:20px; }
.footer-brand p { font-size:14px; color:rgba(255,255,255,.4); line-height:1.9; max-width:340px; }
.footer-col-title { font-family:var(--heading); font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--green); margin-bottom:24px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-links a { font-size:14px; color:rgba(255,255,255,.45); transition:color .3s; display:flex; gap:8px; align-items:center; }
.footer-links a::before { content:'›'; color:var(--green); }
.footer-links a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:13px; color:rgba(255,255,255,.25); letter-spacing:1px; }
.footer-slogan { font-family:var(--heading); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--green); }

/* CTA */
.cta-section { background:var(--green); padding:80px 56px; position:relative; overflow:hidden; }
.cta-section::before { content:'MJ'; position:absolute; right:-40px; top:-40px; font-family:var(--heading); font-size:280px; font-weight:800; color:rgba(0,0,0,.07); line-height:1; pointer-events:none; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; z-index:1; }
.cta-text .section-title { color:var(--black); margin-bottom:8px; }
.cta-text p { font-size:16px; color:rgba(0,0,0,.6); }
.btn-black { display:inline-block; font-family:var(--heading); font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--white); background:var(--black); padding:16px 44px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%); transition:background .3s,transform .2s; white-space:nowrap; }
.btn-black:hover { background:var(--dark2); transform:translateY(-2px); }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-32px); transition:opacity .75s ease,transform .75s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(32px); transition:opacity .75s ease,transform .75s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.delay-1 { transition-delay:.12s !important; }
.delay-2 { transition-delay:.24s !important; }
.delay-3 { transition-delay:.36s !important; }
.delay-4 { transition-delay:.48s !important; }

/* RESPONSIVE */
@media (max-width:1100px) {
  section { padding:80px 36px; }
  #header { padding:16px 36px; }
  #header.scrolled { padding:10px 36px; }
  .productos-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  nav.main-nav { display:none; }
  .header-social { display:none; }
  .hamburger { display:flex; }
  .slide-content { padding:0 40px; }
  .slide-title { font-size:clamp(40px,9vw,64px); }
  .about-grid,.diferente-grid,.contacto-grid { grid-template-columns:1fr; }
  .about-img-wrap { height:320px; margin-bottom:32px; }
  .diferente-img { margin-bottom:48px; }
  .mvv-grid { grid-template-columns:1fr; }
  .mvv-card { border-right:none; border-bottom:1px solid rgba(255,255,255,.07); }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .stat-item { border-bottom:1px solid rgba(0,0,0,.1); }
  .testimonials-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media (max-width:560px) {
  section { padding:64px 20px; }
  #header { padding:14px 20px; }
  #header.scrolled { padding:10px 20px; }
  footer { padding:56px 20px 28px; }
  .cta-section { padding:64px 20px; }
  .productos-grid { grid-template-columns:1fr; }
  .slider-nav { left:40px; }
  .slider-arrows { right:20px; }
  .slide-content { padding:0 24px; }
  .stats-strip { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}

/* ─── OCULTAR ELEMENTOS INYECTADOS POR WORDPRESS ─────────────────── */
.site-title,
.site-description,
.wp-site-blocks,
#wp-toolbar ~ .site-header,
body > .site-header,
.site-branding,
.site-header {
  display: none !important;
}