/* Lion Industries — variante corporativa clara
   Paleta de marca: blanco (fondo base), negro (texto/estructura), dorado (acento, del logo).
   Estructura semantica, clases y contenido textual del index.html no cambian salvo el
   carrusel del hero y las imagenes del logo, pedidos explicitamente. */

:root{
  --bg:#FFFFFF;--bg2:#F7F5EF;--surface:#FFFFFF;--surface2:#FAF8F3;--line:#D9D2BE;
  --text:#131210;--muted:#5B584E;--muted2:#726F60;
  --gold-dark:#8A5A19;--gold:#B9852A;--gold-light:#EFC65B;
  --gold2:var(--gold-dark);--gold3:var(--gold-light);--gold-grad:linear-gradient(90deg,var(--gold-dark),var(--gold) 55%,var(--gold-light));
  --shadow:0 10px 28px rgba(19,18,16,.07);--radius:8px;--max:1200px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  --display:var(--serif);
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;font-weight:400}
a{color:inherit}
::selection{background:var(--gold-light);color:#171208}
:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px}
.hero :focus-visible{outline-color:var(--gold-light)}
.container{max-width:var(--max)}
.section{padding:112px 0}
.section.compact{padding:76px 0}

/* Eyebrow: barra dorada en degrade, como la del isotipo */
.eyebrow{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.14em}
.eyebrow:before{width:38px;height:2px;background:var(--gold-grad)}

/* Titulares: serif corporativo, sin cursivas ni mayusculas condensadas */
.section-title{font-family:var(--serif);text-transform:none;letter-spacing:-.01em;font-weight:400;font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.14;color:var(--text)}
.section-title .gold,.gold{color:var(--gold-dark);font-style:normal;font-weight:600}
.section-intro{color:var(--muted);font-size:1.02rem;max-width:640px}
.small{color:var(--muted)}

/* Header: blanco, sombra sutil solo al hacer scroll (mas corporativo que blur pesado) */
.header{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);box-shadow:none;transition:box-shadow .25s ease}
.header.is-scrolled{box-shadow:0 4px 18px rgba(19,18,16,.06)}
.header-inner{height:84px}
.logo img{height:70px}
@media(max-width:700px){.logo img{height:54px}}
.nav a{color:var(--text);font-weight:500;font-size:.85rem;letter-spacing:.01em;padding:31px 0}
.nav a:after{background:var(--gold);height:2px}
.nav a[aria-current="page"]{color:var(--gold-dark)}
.menu-btn{background:var(--surface);border-color:var(--line);color:var(--text)}
.mobile-nav{background:var(--bg);border-color:var(--line)}
.mobile-nav a{color:var(--text);border-color:var(--line)}

/* Botones: el dorado de marca es el color de accion; negro para estructura */
.btn{border-radius:5px;font-weight:700;letter-spacing:0;transition:background .18s,border-color .18s,box-shadow .18s,transform .16s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gold);color:#171208;box-shadow:none;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn-outline{border-color:var(--line);background:transparent;color:var(--text)}
.btn-outline:hover{border-color:var(--text);background:var(--surface2)}
.btn-dark{background:var(--text);border-color:var(--text);color:#fff}
.cta-band .btn-outline{border-color:rgba(255,255,255,.35);color:#fff}
.cta-band .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ===== Hero + carrusel (4s): banner completo, sin margenes ni espacios laterales =====
   La imagen ocupa TODO el ancho de la seccion (edge-to-edge); el texto se superpone
   con un scrim negro (uno de los 3 colores de marca) para legibilidad. */
.hero{position:relative;min-height:640px;padding:0;border-bottom:1px solid var(--line);overflow:hidden;background:var(--text)}
.hero-media{position:absolute;inset:0;min-height:0;background:var(--text)}
.hero-media:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,9,7,.92) 0%,rgba(10,9,7,.72) 30%,rgba(10,9,7,.28) 58%,rgba(10,9,7,.06) 82%),
  linear-gradient(0deg,rgba(10,9,7,.55) 0%,transparent 24%)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s cubic-bezier(.23,1,.32,1);z-index:0}
.hero-slide.is-active{opacity:1;z-index:1}
.hero-slide picture,.hero-slide img{display:block;width:100%;height:100%}
.hero-slide img{object-fit:cover;filter:saturate(.94) contrast(1.03);transform:scale(1.045);transition:transform 6.5s linear}
.hero-slide.is-active img{transform:scale(1.12)}
.hero-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.hero-dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.3);cursor:pointer;transition:background .2s,border-color .2s,transform .12s ease-out}
.hero-dot.is-active{width:22px;border-radius:5px;background:var(--gold);border-color:var(--gold)}
.hero-dot:active{transform:scale(.85)}
.hero-grid{display:none}
.hero .container{position:relative;z-index:3;max-width:var(--max);margin-inline:auto;padding:196px 22px 120px}
.hero-copy{max-width:600px;padding:0}
.hero .eyebrow{color:rgba(255,255,255,.78)}
.hero .eyebrow:before{background:var(--gold-light)}
.hero h1{font-family:var(--serif);text-transform:none;font-weight:400;font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.01em;color:#fff}
.hero h1 .gold{font-style:normal;color:var(--gold-light)}
.hero p{color:rgba(255,255,255,.86);font-size:1.05rem;max-width:520px}
.hero .btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.hero-badges{border-top:1px solid rgba(255,255,255,.22);margin-top:48px}
.hero-badge{border-right:1px solid rgba(255,255,255,.22);padding:18px 24px 4px 0}
.hero-badge strong{color:#fff;text-transform:none;font-weight:600;font-size:.85rem}
.hero-badge span{color:rgba(255,255,255,.62)}
@media(prefers-reduced-motion:reduce){.hero-slide img{transition:none;transform:none}.hero-slide.is-active img{transform:none}}
@media(max-width:860px){.hero{min-height:560px}.hero .container{padding:150px 22px 72px}}
@media(max-width:700px){.hero{min-height:460px}.hero .container{padding:120px 18px 56px}.hero-dots{bottom:14px}}

/* Trust strip: insignias circulares doradas, look de certificacion corporativa */
.trust-strip{background:var(--surface2);border-color:var(--line)}
.trust-icon{width:44px;height:44px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-dark);background:var(--surface)}
.trust-item strong{text-transform:none;font-weight:600}

/* Areas: tarjeta plana con borde y elevacion sutil al pasar el mouse */
.area-card{border-color:var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:none;min-height:auto;display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease}
.area-card img{position:relative;height:260px;filter:saturate(.94) contrast(1.02);transition:transform .5s ease}
@media(hover:hover) and (pointer:fine){
  .area-card:hover{box-shadow:var(--shadow);border-color:#D8D2C0}
  .area-card:hover img{transform:scale(1.035)}
}
.area-card:after{display:none}
.area-card .content{position:relative;left:0;right:0;bottom:0;padding:28px 30px 32px}
.area-card h3{font-family:var(--serif);font-weight:400;text-transform:none;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.15;color:var(--text)}
.area-card p{color:var(--muted)}
.tag{border-color:var(--gold);background:var(--surface2);color:var(--gold-dark);font-weight:700}

/* Cards: numeral reemplazado por insignia circular dorada (menos "revista", mas producto/servicio) */
.card{background:var(--surface);border-color:var(--line);border-radius:var(--radius);transition:border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);border-color:#D8D2C0;box-shadow:var(--shadow)}}
.card-no{font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--gold-dark);width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center}
.card h3{font-weight:700;font-size:1.02rem;color:var(--text)}
.card p{color:var(--muted)}
.card a.inline{color:var(--gold-dark);font-weight:700}

/* Split / visual */
.visual{border-color:var(--line);border-radius:var(--radius);background:var(--surface2)}
.visual img{filter:saturate(.94) contrast(1.02)}
.visual:after{display:none}
.visual-label{background:var(--surface);border-color:var(--line);color:var(--text);text-transform:none;letter-spacing:0}
.bullet-list li{color:var(--text)}
.bullet-list li:before{color:var(--gold-dark)}
.note{border-color:var(--gold);background:var(--surface2);color:var(--muted)}

/* Product grid: la imagen base venia position:absolute detras del texto (pensada para un
   overlay oscuro que quitamos), dejando titulos ilegibles sobre zonas claras de la foto.
   Se pasa a flujo normal: imagen arriba con su propio alto, texto debajo, siempre legible. */
.product{border-color:var(--line);border-radius:var(--radius);background:var(--surface);transition:box-shadow .2s ease,border-color .2s ease;min-height:auto;display:flex;flex-direction:column}
.product img{position:relative;inset:auto;height:172px;width:100%;object-fit:cover;filter:saturate(.94) contrast(1.02);transition:transform .5s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
  .product:hover{box-shadow:var(--shadow);border-color:#D8D2C0}
  .product:hover img{transform:scale(1.06)}
}
.product .pcontent{position:relative;left:auto;right:auto;bottom:auto;padding:14px 16px 18px}
.product span{display:block;color:var(--gold-dark);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.product h3{color:var(--text);font-weight:600;font-size:.96rem;margin:0}

/* photo-card (catalogo): misma animacion de hover que el resto de tarjetas con imagen */
.photo-card img{transition:transform .5s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
  .photo-card:hover{box-shadow:var(--shadow);border-color:#D8D2C0}
  .photo-card:hover img{transform:scale(1.05)}
}

/* Imágenes de catálogo y familias: un marco consistente deja que la fotografía
   técnica sea el foco, sin que los títulos pierdan su propia superficie de lectura. */
.product-grid{gap:16px}
.product{overflow:hidden;border-color:#D8D2BE;background:var(--surface);box-shadow:0 1px 0 rgba(19,18,16,.03)}
.product img{height:196px;object-position:center;filter:saturate(.96) contrast(1.04)}
.product .pcontent{min-height:100px;display:flex;flex-direction:column;justify-content:center;padding:17px 17px 20px;border-top:1px solid rgba(19,18,16,.08)}
.product h3{font-size:1rem;line-height:1.25}
.photo-card{min-height:0;background:var(--surface);box-shadow:0 1px 0 rgba(19,18,16,.03)}
.photo-card img{height:236px;object-position:center;filter:saturate(.96) contrast(1.04)}
.photo-card .body{padding:23px 24px 25px}
.photo-card .body h3{font-size:1.15rem;line-height:1.25;margin:0 0 9px}
.photo-card .body p{min-height:3.2em;line-height:1.55}
@media(hover:hover) and (pointer:fine){
  .product:hover,.photo-card:hover{border-color:#B9852A;box-shadow:0 14px 34px rgba(19,18,16,.10)}
}
@media(max-width:1080px) and (min-width:701px){.product img{height:220px}}
@media(max-width:700px){.product img{height:226px}.photo-card img{height:224px}.photo-card .body p{min-height:0}}

/* Process: insignia circular dorada en vez de numeral editorial, animada al pasar el mouse */
.process{border-color:var(--line);border-radius:var(--radius)}
.process-step{background:var(--surface);border-color:var(--line);transition:background .25s ease}
.process-step b{font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--gold-dark);width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px;transition:transform .3s cubic-bezier(.23,1,.32,1),background .3s ease,color .3s ease,border-color .3s ease}
@media(hover:hover) and (pointer:fine){
  .process-step:hover{background:var(--surface2)}
  .process-step:hover b{transform:scale(1.15) rotate(-8deg);background:var(--gold);border-color:var(--gold);color:#171208}
}
.process-step:active b{transform:scale(.95)}
.process-step h3{text-transform:none;font-weight:600}
.process-step p{color:var(--muted)}

/* FAQ */
.faq details{border-color:var(--line);background:var(--surface);border-radius:var(--radius)}
.faq summary{font-weight:600;color:var(--text)}
.faq details p{color:var(--muted)}

/* CTA band: negro solido (marca), texto blanco, boton dorado */
.cta-band{background:var(--text);border-block:none}
.cta-band:before{display:none}
.cta-inner{flex-wrap:wrap;align-items:center;row-gap:22px}
.cta-inner>div:first-child{min-width:0;flex:1 1 420px}
.cta-inner h2{font-family:var(--serif);font-weight:400;text-transform:none;color:#fff;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.05;max-width:620px;margin:0}
.cta-inner p{color:#C9C6BA;max-width:560px;margin:10px 0 0;line-height:1.5}
.cta-actions{flex:0 1 auto;min-width:0}

/* Footer */
.footer{background:var(--surface2);border-color:var(--line)}
.footer h4{color:var(--text);text-transform:none;font-weight:700;letter-spacing:0}
.footer li,.footer p,.footer a{color:var(--muted)}
.footer a:hover{color:var(--gold-dark)}
.footer-bottom{border-color:var(--line);color:var(--muted2)}

.wa-float{box-shadow:0 8px 22px rgba(19,18,16,.18);border:2px solid rgba(255,255,255,.25)}

/* Reveal: entrada sutil y mas rapida, coherente con un sitio corporativo (no editorial) */
.reveal{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);transform:translateY(12px)}

/* El breakpoint base del sitio (1080px) es demasiado temprano para el split de dos
   columnas: en anchos de laptop comunes (900-1080px) se veia desbalanceado apilado.
   Se mantiene el layout de dos columnas hasta 860px, y solo ahi se apila a una columna. */
@media(max-width:1080px) and (min-width:861px){
  .split,.split.reverse{grid-template-columns:1.05fr .95fr}
  .split.reverse .visual{order:2}
}

/* ===== Consistencia en subpaginas: subhero, formulario, tablas de especificaciones ===== */
.subhero{background:var(--bg2);border-color:var(--line)}
.subhero:before{opacity:.35}
.subhero h1{font-family:var(--serif);text-transform:none;font-weight:400;letter-spacing:-.01em;color:var(--text)}
.subhero p{color:var(--muted)}
.breadcrumbs{color:var(--muted2)}
.breadcrumbs a:hover{color:var(--gold-dark)}

/* Banner de contacto: una entrada más editorial, con imagen industrial y lectura protegida. */
.contact-hero{background:linear-gradient(90deg,rgba(19,18,16,.94) 0%,rgba(19,18,16,.78) 48%,rgba(19,18,16,.36) 100%),url('../images/hero-conveyor-mineria-chile-4k.jpg') center/cover;border-bottom-color:#5d4a1e}
.contact-hero:before{opacity:.16;background-image:linear-gradient(rgba(239,198,91,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(239,198,91,.16) 1px,transparent 1px)}
.contact-hero .container{position:relative;z-index:1}
.contact-hero .breadcrumbs,.contact-hero .eyebrow{color:rgba(255,255,255,.74)}
.contact-hero h1{color:#fff;max-width:720px}
.contact-hero h1 .gold{color:var(--gold-light)}
.contact-hero p{color:rgba(255,255,255,.84);max-width:660px}

/* Suministros: jerarquía de decisión y tarjetas con presencia de catálogo técnico. */
.supply-section{background:linear-gradient(180deg,#fff 0%,#fbfaf6 100%)}
.supply-section .section-title{max-width:720px}
.supply-section .section-intro{max-width:720px;margin-bottom:42px}
.supply-section .product-grid{position:relative}
.supply-section .product{box-shadow:0 10px 24px rgba(19,18,16,.06)}
.supply-section .product .pcontent{min-height:112px}
.supply-section .product span{letter-spacing:.14em}
.supply-section .product h3{font-size:1.04rem}
.product:after{display:none}
.product .pcontent{background:var(--surface);min-height:132px;align-items:flex-start;justify-content:flex-start;gap:6px;padding:18px 18px 20px}
.product .pcontent span{font-size:.68rem;line-height:1;color:var(--gold-dark);letter-spacing:.14em}
.product .pcontent h3{font-size:1rem;line-height:1.2;margin:0;color:var(--text)}
.product .pcontent p{margin:0;color:var(--muted2);font-size:.79rem;line-height:1.35}
.product:hover .pcontent{background:#fffdf8}
.supply-cta{position:relative;isolation:isolate;background:linear-gradient(90deg,rgba(19,18,16,.97),rgba(19,18,16,.76)),url('../images/hero-conveyor-mineria-chile-4k.jpg') center 58%/cover;border-block:1px solid #745c20}
.supply-cta:before{display:block;z-index:-1;background:linear-gradient(90deg,rgba(239,198,91,.18),transparent 64%);pointer-events:none}
.supply-cta .cta-inner{padding:54px 0}
.supply-cta .cta-inner h2{max-width:620px;font-size:clamp(2rem,3.4vw,3.3rem)}
.supply-cta .cta-inner p{max-width:540px;color:rgba(255,255,255,.72)}
@media(max-width:700px){.contact-hero{background-position:68% center}.supply-cta .cta-inner{padding:42px 0}}
@media(max-width:900px) and (min-width:701px){.cta-inner{align-items:flex-start;flex-direction:column}.cta-actions{justify-content:flex-start}}
/* En columna (<=900px, ya sea por esta regla o por la de site.css a <=700px) el eje
   principal del flex pasa a ser vertical: un flex-basis en px pensado para el ANCHO
   en fila se convierte en ALTO y deja un hueco enorme. Se resetea a auto en ese rango. */
@media(max-width:900px){.cta-inner>div:first-child{flex:1 1 auto}}

/* Familia adicional: química industrial presentada como una solución, no como otra
   tarjeta repetida. La imagen aporta contexto y la lista ordena la conversación comercial. */
.chemical-section{background:var(--bg2);padding-top:92px}
.chemical-panel{display:grid;grid-template-columns:1.08fr .92fr;min-height:500px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 14px 36px rgba(19,18,16,.08)}
.chemical-media{min-height:500px;overflow:hidden;background:#e7e4dc}
.chemical-media img{width:100%;height:100%;min-height:500px;object-fit:cover;object-position:center}
.chemical-copy{display:flex;flex-direction:column;justify-content:center;padding:48px 52px}
.chemical-copy .section-title{font-size:clamp(2rem,3.2vw,3.2rem);margin:.7rem 0 1rem}
.chemical-copy .section-intro{font-size:1rem;margin-bottom:22px}
.chemical-list{display:grid;gap:0;margin:0 0 28px;border-top:1px solid var(--line)}
.chemical-list div{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid var(--line)}
.chemical-list strong{font-size:.94rem;color:var(--text)}
.chemical-list span{font-size:.82rem;color:var(--muted)}
@media(max-width:860px){.chemical-panel{grid-template-columns:1fr}.chemical-media{min-height:300px}.chemical-media img{min-height:300px}.chemical-copy{padding:34px 28px}}
@media(max-width:700px){.chemical-section{padding-top:72px}.chemical-media{min-height:240px}.chemical-media img{min-height:240px}.chemical-copy{padding:30px 22px}}

.contact-card{background:var(--surface);border-color:var(--line)}
.contact-lines a,.contact-lines span{color:var(--text)}
.contact-lines small{color:var(--muted2)}

.field label{color:var(--text)}
.field input,.field select,.field textarea{background:var(--surface);color:var(--text);border-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,133,42,.14)}
.form-status{color:var(--muted)}
.consent{color:var(--muted)}
.consent a{color:var(--gold-dark)}

.spec-table{background:var(--surface);border-color:var(--line)}
.spec-table th,.spec-table td{border-color:var(--line)}
.spec-table th{color:var(--gold-dark)}
.spec-table td{color:var(--muted)}
.seo-note{color:var(--muted2)}

/* ===== Insignias "Nuevo" (rojo, excepcion deliberada a la paleta de 3 colores
   solo para estas dos etiquetas promocionales, a pedido explicito). ===== */

/* Pastilla pequena junto a "Catalogo" en el menu (desktop + mobile), sin tocar
   ningun HTML: se engancha por el href, asi aparece en las 15 paginas a la vez. */
.nav a[href*="catalogo"],.mobile-nav a[href*="catalogo"]{position:relative}
.nav a[href*="catalogo"]::before{content:"Nuevo";position:absolute;top:14px;right:-32px;background:#D62828;color:#fff;font-family:var(--sans);font-size:.5rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:999px;line-height:1.5;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.mobile-nav a[href*="catalogo"]::before{content:"Nuevo";position:static;display:inline-block;margin-left:8px;background:#D62828;color:#fff;font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:middle;transform:translateY(-1px)}
/* Parpadeo sutil para llamar la atencion; se desactiva si el usuario prefiere menos movimiento */
@keyframes badge-blink{0%,55%,100%{opacity:1}75%{opacity:.3}}
@media(prefers-reduced-motion:no-preference){
  .nav a[href*="catalogo"]::before,.mobile-nav a[href*="catalogo"]::before{animation:badge-blink 1.8s ease-in-out infinite}
}

/* Cinta diagonal en la esquina superior izquierda de la imagen de la familia
   de insumos quimicos (seccion "Nueva familia de suministro" en Catalogo).
   El texto va perfectamente centrado en el largo de la cinta. */
.chemical-media{position:relative}
.chemical-media::before{content:"¡Nuevo!";position:absolute;top:26px;left:-48px;width:190px;padding:6px 0;background:#D62828;color:#fff;font-family:var(--sans);font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center;transform:rotate(-45deg);transform-origin:center;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.22)}