/* ── Metalúrgica Eloy Benítez · estilos ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;color:var(--ink);font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.narrow{max-width:640px}
.muted{color:var(--ink-2)}
.center{text-align:center}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;
  padding:.8rem 1.4rem;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-wa{background:#25d366;color:#08331b}
.btn-wa:hover{background:#1fc45c;color:#08331b}
.btn-accent{background:var(--accent);color:#3a2c05;box-shadow:0 6px 18px rgba(244,180,41,.32)}
.btn-accent:hover{background:var(--accent-600);color:#2f2404;box-shadow:0 10px 26px rgba(244,180,41,.45)}
.btn-ghost{background:transparent;border-color:currentColor;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* Header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:70px}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{color:var(--ink);font-weight:600}
.nav a:hover{color:var(--brand-700);text-decoration:none}
.nav a[aria-current=page]{color:var(--brand-700);position:relative}
.nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--accent);border-radius:3px}
.nav-cta{color:#3a2c05!important}
.burger{display:none}
.navtoggle{display:none}

/* Hero */
.hero{position:relative;background:var(--steel-900);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-bg) center/cover no-repeat;opacity:.28}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,22,28,.92) 0%,rgba(15,22,28,.55) 60%,rgba(15,22,28,.3) 100%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;
  padding:clamp(3rem,7vw,5.5rem) 0}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:700;color:var(--accent);margin:0 0 .8rem}
.hero-title{font-size:var(--h1);color:#fff;margin:0 0 .5rem}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.35rem);color:#d8e2e6;max-width:38ch;margin:0 0 1.8rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-media{position:relative;display:flex;justify-content:center}
.hero-media img{width:100%;max-width:560px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}
/* Banner sin imagen: una sola columna con el texto centrado */
.hero-inner--solo{grid-template-columns:1fr;text-align:center}
.hero-inner--solo .hero-sub{margin-left:auto;margin-right:auto}
.hero-inner--solo .hero-cta{justify-content:center}

/* Stats */
.stats{background:var(--brand);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.stat{padding:1.8rem 1rem;border-left:1px solid rgba(255,255,255,.18)}
.stat:first-child{border-left:0}
.stat-n{display:block;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em}
.stat-l{display:block;font-size:.95rem;color:#e6f5f3}

/* Secciones */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-title{font-size:var(--h2)}
.section-title.center{text-align:center;margin-bottom:2.2rem}

/* Cards valores */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;
  box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;
  background:var(--brand-050);color:var(--brand-700);margin-bottom:1rem}
.card-title{font-size:var(--h3);margin:0 0 .4rem}
.card-desc{color:var(--ink-2);margin:0}

/* Band */
.band{background:var(--steel-800);color:#fff;padding:clamp(2.2rem,4vw,3rem) 0}
.band .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.band-text{font-size:clamp(1.2rem,2.3vw,1.7rem);font-weight:700;margin:0;max-width:60ch;line-height:1.3}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.feature{text-align:left}
.feature-img{border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;box-shadow:var(--shadow);aspect-ratio:3/2;background:var(--bg-soft)}
.feature-img img{width:100%;height:100%;object-fit:cover}
.feature-title{font-size:1.2rem;margin:0 0 .3rem}
.feature-desc{color:var(--ink-2);margin:0}

/* CTA final */
.cta-final{background:linear-gradient(120deg,var(--brand-700),var(--brand));color:#fff;padding:clamp(2.5rem,5vw,4rem) 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-title{color:#fff;font-size:var(--h2);margin:0 0 .3rem}
.cta-sub{color:#e6f5f3;margin:0}
.cta-btns{display:flex;gap:.8rem;flex-wrap:wrap}

/* Footer */
.site-foot{background:var(--steel-900);color:#c7d2d7}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:2rem;padding:clamp(2.5rem,5vw,3.5rem) 0}
.site-foot h3{color:#fff;font-size:1.05rem;margin:0 0 .8rem}
.site-foot p{margin:0 0 .5rem;font-size:.95rem}
.site-foot a{color:#c7d2d7}
.site-foot a:hover{color:#fff}
.foot-brand img{margin-bottom:1rem;opacity:.95}
.foot-bar{border-top:1px solid rgba(255,255,255,.1)}
.foot-bar .container{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.1rem;padding-bottom:1.1rem;font-size:.85rem;color:#8ea0a7}
.foot-bar a{color:var(--brand);font-weight:600}

/* WhatsApp flotante */
.wa-float{position:fixed;left:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .15s ease}
.wa-float:hover{transform:scale(1.06)}

/* Auth / alerts */
.auth-section{background:var(--bg-soft)}
.auth-form{display:grid;gap:1rem;max-width:360px;margin-top:1.4rem}
.auth-form label{display:grid;gap:.35rem;font-weight:600}
.auth-form input{padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:1rem}
.alert{padding:.7rem 1rem;border-radius:var(--radius-sm);margin:1rem 0}
.alert-err{background:#fdeaea;color:var(--err);border:1px solid #f3caca}
.alert-ok{background:#eafaf0;color:var(--ok);border:1px solid #c7ecd4}

/* Toggle de contraseña (ojito) */
.pass-wrap{position:relative;display:block}
.pass-wrap input{width:100%;padding-right:2.7rem}
.pass-toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:none;border:0;
  padding:.35rem;cursor:pointer;color:var(--ink-2);display:flex;align-items:center;border-radius:6px}
.pass-toggle:hover{color:var(--brand-700)}
.pass-toggle:focus-visible{box-shadow:var(--ring)}
.auth-actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.btn-ghost-dark{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost-dark:hover{background:var(--bg-soft);color:var(--ink)}
.ab-link{color:#b9c9d0;font-weight:600}
.ab-link:hover{color:#fff}

/* ── Modo admin / edición inline ── */
/* --admin-bar-h lo setea inline-edit.js con la altura real de la barra (que puede cambiar si el texto
   se parte en pantallas chicas). Así el header sticky se pega JUSTO debajo de la barra de admin. */
.is-admin{padding-top:var(--admin-bar-h,44px)}
body.is-admin .site-head{top:var(--admin-bar-h,44px)}
#admin-bar{position:fixed;top:0;left:0;right:0;z-index:100;background:#182229;color:#fff;
  display:flex;align-items:center;gap:.8rem;padding:.5rem 1rem;font-size:.9rem;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.ab-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(244,180,41,.25)}
.ab-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
#ab-save{background:var(--accent);color:#3a2c05;border:0;border-radius:999px;padding:.4rem 1rem;font-weight:700;cursor:pointer}
#ab-save:disabled{opacity:.5;cursor:default}
.ab-exit{color:#c7d2d7;font-weight:600}
#ab-status{color:#9fe6c2;font-size:.85rem}
[contenteditable="true"]{outline:2px dashed rgba(26,158,148,.5);outline-offset:3px;border-radius:4px;cursor:text;transition:outline-color .15s}
[contenteditable="true"]:hover,[contenteditable="true"]:focus{outline-color:var(--brand);background:rgba(26,158,148,.06)}
.editable-img{cursor:pointer;outline:2px dashed rgba(26,158,148,.5);outline-offset:3px}
.editable-img:hover{outline-color:var(--brand)}
.edit-link-wrap{display:inline-flex;align-items:center;gap:.3rem}
.link-edit{background:#fff;color:#182229;border:1px solid var(--brand);border-radius:6px;padding:.1rem .4rem;font-size:.9rem;cursor:pointer;line-height:1.25}
.link-edit:hover{background:var(--brand);color:#fff}
.bg-edit{position:absolute;top:14px;right:14px;z-index:20;background:#fff;color:#182229;border:1px solid var(--brand);
  border-radius:999px;padding:.4rem .9rem;font-weight:700;font-size:.85rem;cursor:pointer}
.bg-edit:hover{background:var(--brand);color:#fff}
/* Badge flotante con el tamaño recomendado (solo modo edición) */
#ab-imghint{position:fixed;z-index:200;background:#182229;color:#fff;border:1px solid var(--brand);
  border-radius:9px;padding:.3rem .6rem;font-size:.8rem;font-weight:600;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap}
#ab-imghint[hidden]{display:none}
/* Botón para quitar/mostrar la imagen del banner (solo modo edición) */
.hero-media-toggle{position:absolute;top:10px;right:10px;z-index:21;background:#fff;color:#182229;
  border:1px solid var(--brand);border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.8rem;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hero-media-toggle:hover{background:var(--brand);color:#fff}
.hero-media-toggle:disabled{opacity:.6;cursor:default}
/* Estado "imagen oculta" en admin: se esconde la imagen y el botón queda en flujo para restaurarla */
.hero-media.is-hidden{flex-direction:column;align-items:center;gap:.6rem}
.hero-media.is-hidden img{display:none}
.hero-media.is-hidden .hero-media-toggle{position:static}
/* Botón genérico quitar/mostrar imagen (tarjetas, fotos) — solo modo edición */
.img-remove-btn{position:absolute;top:10px;right:10px;z-index:21;background:#fff;color:#182229;
  border:1px solid var(--brand);border-radius:999px;padding:.3rem .7rem;font-weight:700;font-size:.78rem;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.img-remove-btn:hover{background:var(--brand);color:#fff}
.img-remove-btn:disabled{opacity:.6;cursor:default}
.feature-img,.prod-card-img,.split-media{position:relative}
/* Imagen oculta en admin: se esconde y queda solo el botón para restaurarla/agregarla */
.feature-img.is-hidden,.prod-card-img.is-hidden{aspect-ratio:auto;background:none;
  box-shadow:none;min-height:0;display:flex;justify-content:center;padding:.4rem 0;margin-bottom:.6rem}
.split-media.is-hidden{display:flex;justify-content:center}
.feature-img.is-hidden img,.prod-card-img.is-hidden img,.split-media.is-hidden img{display:none}
.feature-img.is-hidden .img-remove-btn,.prod-card-img.is-hidden .img-remove-btn,
.split-media.is-hidden .img-remove-btn{position:static}
/* Nosotros: al quitar la foto, la fila pasa a una sola columna (texto a lo ancho) */
.split--solo{grid-template-columns:1fr}

/* ── Responsive ── */
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-media{order:-1}
  .hero-media img{max-width:300px}
  .cards-3,.features{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:1.6rem}
  .cta-inner{flex-direction:column;text-align:center}
  /* Nav móvil */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer}
  .burger span{display:block;height:3px;width:24px;background:var(--ink);border-radius:3px;transition:.2s}
  .nav{position:fixed;inset:70px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-120%);transition:transform .25s ease;z-index:40}
  .navtoggle:checked ~ .nav{transform:translateY(0)}
  .nav a{padding:.9rem clamp(1rem,4vw,2rem)}
  .nav a[aria-current=page]::after{display:none}
  .nav-cta{margin:.6rem clamp(1rem,4vw,2rem);text-align:center;justify-content:center}
}
@media (max-width:560px){
  .stats-grid{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .stat:first-child{border-top:0}
  .band .container{flex-direction:column;align-items:flex-start}
}

/* ── Páginas internas ── */
.page-hero{position:relative;overflow:hidden;background:var(--steel-900);color:#fff;padding:clamp(2.4rem,5vw,3.6rem) 0}
/* Banner opcional detrás del título (ej: Contacto): la imagen va sobre el fondo oscuro para que el texto se lea */
.page-hero.has-banner::before{content:"";position:absolute;inset:0;background:var(--hero-bg) center/cover no-repeat;opacity:.35}
.page-hero>.container{position:relative;z-index:1}
.page-hero:not(.has-banner) .bg-edit{display:none}
.banner-toggle{position:absolute;top:12px;left:12px;z-index:22;background:#fff;color:#182229;
  border:1px solid var(--brand);border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.8rem;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.banner-toggle:hover{background:var(--brand);color:#fff}
.banner-toggle:disabled{opacity:.6;cursor:default}
.page-hero h1{color:#fff;font-size:var(--h1);margin:0}
.page-hero-sub{color:#c7d2d7;max-width:62ch;margin:.6rem 0 0;font-size:1.1rem}
.section-soft{background:var(--bg-soft)}

/* Productos */
.prod-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:2rem;align-items:start}
.prod-media{display:grid;gap:1rem}
.prod-media img{width:100%;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.spec-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.spec{display:flex;align-items:flex-start;gap:.9rem;padding:.7rem .9rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.code{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:.25rem .5rem;
  background:var(--brand-050);color:var(--brand-700);font-weight:800;border-radius:8px;font-size:.9rem}
.spec-desc{color:var(--ink);padding-top:.15rem}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.prod-card-img{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.prod-card-img img{width:100%;height:100%;object-fit:cover}
.prod-card .code{margin:1rem 1rem 0;align-self:flex-start}
.prod-card-desc{padding:.5rem 1rem 1.2rem;margin:.5rem 0 0;color:var(--ink-2)}

/* Nosotros */
.lead-highlight{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;line-height:1.3;color:var(--brand-700);
  border-left:5px solid var(--accent);padding-left:1.2rem;max-width:72ch;margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center;margin-bottom:2.5rem}
.split:last-child{margin-bottom:0}
.split-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.split-title{font-size:var(--h3)}
.split-reverse .split-media{order:2}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;margin-bottom:1.4rem;box-shadow:var(--shadow)}
.loc-card h2{font-size:1.2rem;margin:0 0 .5rem}
.loc-card p{margin:0 0 .5rem;color:var(--ink-2)}
.map{margin-top:.8rem;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:220px;border:0}
.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);position:sticky;top:90px}
.contact-form-wrap h2{font-size:1.3rem;margin:0 0 1rem}
.contact-form{display:grid;gap:.9rem}
.contact-form label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.contact-form input,.contact-form textarea{padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:1rem;width:100%}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--brand)}
.contact-form button{justify-self:start;margin-top:.4rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:860px){
  .prod-layout,.split,.contact-grid{grid-template-columns:1fr}
  .split-reverse .split-media{order:0}
  .contact-form-wrap{position:static}
}