/* --- Base e impresión --- */
@page { size: A4 landscape; margin: 14mm; }
@media print {
  .social-floating, .site-hdr, .site-ftr { display:none !important; }
  body { background:white; }
}

/* Paleta */
:root{
  --ink:#0b1020; --muted:#6b7280; --paper:#fff;
  --brand:#1f4b7a; --brand2:#d61f26; --brand3:#0891b2;
  --ring: rgba(31,75,122,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100dvh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--ink); background:#0f172a;
}

/* Header + nav */
.site-hdr{
  position:sticky; top:0; z-index:90; backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.32) 60%, transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hdr-inner{
  max-width:1320px; margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand.with-logo{display:flex; gap:10px; align-items:center; text-decoration:none; color:#fff; font-weight:800; letter-spacing:.25px}
.brand img{height:28px; width:auto; display:block; border-radius:4px}

/* nav */
.mainnav{display:flex}
.nav-list{display:flex; gap:10px; margin:0; padding:0; list-style:none}
.nav-list > li > a, .dd-btn{
  color:#e5e7eb; text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:600;
  background:transparent; border:0; cursor:pointer;
}
.nav-list > li > a:hover, .dd-btn:hover{ background:rgba(255,255,255,.08) }

/* dropdown */
.has-dd{position:relative}
.dropdown{
  position:absolute; top:100%; left:0; min-width:320px; padding:10px;
  transform-origin: 10% 0; transform: translateY(6px) scale(.96);
  opacity:0; pointer-events:none;
  background:#0b1225; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow: 0 20px 40px rgba(0,0,0,.38);
  transition: opacity .18s ease, transform .18s ease;
}
.has-dd.open .dropdown{ opacity:1; transform: translateY(10px) scale(1); pointer-events:auto }
.dd-grid{display:grid; grid-template-columns:1fr; gap:6px}
.dd-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:#e5e7eb; text-decoration:none; background:transparent; border:1px solid transparent;
}
.dd-item:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1) }

/* toggle móvil */
.nav-toggle{display:none; background:transparent; border:0; position: relative; z-index: 95; padding:8px; border-radius:10px}
.nav-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.2s}

@media (max-width: 980px){
  .nav-toggle{display:block}
  .mainnav{
    position:fixed; inset:60px 12px auto 12px; right:12px; left:12px;
    background:#0b1225; border:1px solid rgba(255,255,255,.1); border-radius:14px;
    transform: translateY(-10px); opacity:0; pointer-events:none;
    transition: .18s ease; box-shadow:0 30px 60px rgba(0,0,0,.45);
  }
  .mainnav.open{transform:none; opacity:1; pointer-events:auto}
  .nav-list{flex-direction:column; gap:4px; padding:10px}
  .dropdown{position:static; transform:none; opacity:1; pointer-events:auto; background:transparent; border:0; box-shadow:none; padding:6px 0}
}

/* Vista principal (SPA) */
.view{max-width:1320px; margin:26px auto 60px; padding:0 18px}
.panel{
  position:relative; overflow:hidden; border-radius:18px; background:var(--paper);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  padding:28px 34px; margin-bottom:26px;
}
.panel::before{
  content:""; position:absolute; inset:-2px; z-index:0;
  background:
    repeating-linear-gradient(135deg, rgba(31,75,122,.06) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(45deg, rgba(214,31,38,.04) 0 2px, transparent 2px 28px);
}
.panel::after{
  content:""; position:absolute; right:-120px; top:-40px; width:520px; height:320px; z-index:0;
  background:linear-gradient(135deg, rgba(8,145,178,.18), rgba(31,75,122,.22));
  clip-path:polygon(12% 0%, 100% 0%, 100% 100%, 70% 100%); filter:blur(1px);
}
.panel > *{position:relative; z-index:1}

/* Tipografía y elementos compartidos */
h1{font-size:42px;line-height:1.05;margin:10px 0 8px}
h2{font-size:28px;margin:0 0 12px}
h3{font-size:18px;margin:8px 0;color:#111827}
p{margin:0 0 12px;font-size:15px;color:#1f2937}
.kicker{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:var(--brand3);font-weight:700}
.hero{display:grid;place-items:center;text-align:center;margin:8px 0 16px}
.hero img{height:140px;width:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}
.hero h1{margin-top:10px}
.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff}
.card .title{font-weight:700;margin-bottom:6px}
.pill{display:inline-flex;gap:8px;align-items:center;background:#f3f4f6;border:1px solid #e5e7eb;padding:10px 14px;border-radius:999px;font-size:13px}
.badge{display:inline-block;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(31,75,122,.12);color:#1f4b7a;border:1px solid rgba(31,75,122,.3)}
.muted{color:var(--muted)}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.ph{height:180px;border-radius:14px;border:1px dashed #cbd5e1;background:#f9fafb;display:grid;place-items:center;color:#64748b;font-size:13px;overflow:hidden}
.ph.small{height:150px}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.icon{width:1.15em;height:1.15em;vertical-align:-.18em;fill:currentColor}
.icon-lg{width:1.35em;height:1.35em;vertical-align:-.22em}
.with-icon{display:inline-flex;gap:8px;align-items:center}

/* Formulario */
.contact-form{margin-top:12px;display:grid;gap:12px}
.contact-form .row{display:grid;gap:6px}
.grid-2-min{grid-template-columns:1fr 1fr;gap:12px}
.contact-form label{font-size:13px;color:#374151}
.contact-form input,.contact-form textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid #e5e7eb; font-size:14px; color:#111827; background:#fff;
  outline: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: var(--brand3); box-shadow: 0 0 0 4px var(--ring);
}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-primary{
  background: linear-gradient(90deg,var(--brand),var(--brand3));
  color:white; border:0; padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow: 0 10px 20px rgba(17,24,39,.15);
}
.btn-secondary{
  background:#f3f4f6;color:#111827;border:1px solid #e5e7eb;
  padding:10px 14px;border-radius:12px;cursor:pointer;
}
#form-status{font-size:13px}

/* Redes flotantes */
.social-floating{position:auto; right:16px; top:16px; display:flex; flex-direction:column; gap:10px; z-index:70;}
.btn-social{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffffcc;border:1px solid #e5e7eb;backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(0,0,0,.12);text-decoration:none;color:#111827}
.btn-social:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.social-floating{ pointer-events: none; }
.social-floating .btn-social{ pointer-events: auto; }

/* Footer */
.site-ftr{color:#cbd5e1}
.ftr-inner{max-width:1320px;margin:0 auto 26px; padding:0 18px; display:flex; gap:16px; justify-content:space-between}

/* Transiciones de página */
.page-veil{
  position:fixed; inset:0; background:#0b1225; z-index:70; pointer-events:none;
  transform:scaleY(0); transform-origin:50% 0; opacity:.85;
  transition:transform .36s ease;
}
body.is-loading .page-veil{ transform:scaleY(1) }
body.leaving .page-veil{ transform:scaleY(1) }

/* Animación al insertar subpágina */
.panel{opacity:0; transform:translateY(18px) scale(.99); transition:opacity .5s ease, transform .5s ease}
.panel.in{opacity:1; transform:none}

/* Responsivo */
@media (max-width: 1020px){
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .hero img{height:120px}
}
@media (max-width: 760px){
  .grid-4{grid-template-columns:1fr}
  .view{padding:0 14px}
}


/* Ajustes menores */
/* Estilo común para dd-btn (sea <a> o <button>) */






/* ====== HERO: engranaje detrás del logo ====== */
.logo-wrap{
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}
.logo-img{
  height: 140px; width: auto; display:block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
  border-radius: 6px;
}

/* “Engranaje” con CSS (conic/radial gradients) detrás del logo */
.logo-wrap::before{
  content:"";
  position:absolute;
  z-index:-1;
  width: 180px; height: 180px; /* ajustá si tu logo cambia */
  border-radius:50%;
  /* dientes + aro */
  background:
    /* aro central */
    radial-gradient(closest-side, transparent calc(50% - 7px),
      rgba(8,145,178,.45) calc(50% - 7px),
      rgba(8,145,178,.45) calc(50% + 7px),
      transparent calc(50% + 7px)),

    /* dientes */
    repeating-conic-gradient(from 0deg,
      rgba(31,75,122,.28) 0 14deg, transparent 14deg 22deg);

  /* recorte del centro para simular engranaje hueco */
  -webkit-mask: radial-gradient(circle at center, transparent 44%, #000 45%);
          mask: radial-gradient(circle at center, transparent 44%, #000 45%);

  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
  transform-origin: 50% 50%;
  animation: gearTurn 18s linear infinite paused;
}
.logo-wrap:hover::before{ animation-duration: 6s; } /* acelera al hover */

/* ====== HERO: título con reveal metálico + arco de soldadura ====== */
.industrial-title{
  position: relative;
  margin: 10px 0 8px;
  line-height: 1.05;
  font-size: 42px;
  letter-spacing: .2px;
  /* look metálico */
  background-image:
    linear-gradient(180deg,#e5e7eb 0%, #cbd5e1 45%, #9ca3af 55%, #6b7280 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  animation: titlePowerOn .9s steps(20,end) .1s both, titleReveal .7s ease .85s both, shineSweep 2.6s ease .9s both;
}

/* arco de soldadura */
.industrial-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-12px;
  height:4px; width:24%;
  background: linear-gradient(90deg, transparent, var(--brand3), #22d3ee, var(--brand2), transparent);
  filter: drop-shadow(0 0 6px #22d3ee) drop-shadow(0 0 14px rgba(34,211,238,.6));
  transform: translateX(-18%);
  opacity:0;
  border-radius:999px;
}
.industrial-title.is-in::after{
  animation: weldArc 1.8s cubic-bezier(.25,.65,.35,1) .6s forwards;
}

/* ====== Animaciones ====== */
@keyframes gearTurn { to { transform: rotate(360deg);} }
@keyframes titlePowerOn { /* leve flicker eléctrico al encender */
  0%,6%,10% { opacity:.0 }
  8% { opacity:1 }
  14% { opacity:.2 }
  18% { opacity:1 }
  22% { opacity:.5 }
  28%,100% { opacity:1 }
}
@keyframes titleReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes shineSweep {
  from { background-position: -120% 0, 0 0; }
  to   { background-position: 220% 0, 0 0; }
}
@keyframes weldArc {
  0%   { opacity:0; transform: translateX(-18%) scaleX(.9); }
  10%  { opacity:1; }
  60%  { width: 78%; }
  100% { opacity:.0; transform: translateX(108%) scaleX(.98); width: 22%; }
}

/* Reposo inicial (se dispara con IntersectionObserver) */
.logo-wrap::before,
.industrial-title{ animation-play-state: paused; }
.logo-wrap.is-in::before,
.industrial-title.is-in{ animation-play-state: running; }

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .logo-wrap::before, .industrial-title, .industrial-title::after{
    animation: none !important;
  }
}

/* ===== Botón hamburguesa ===== */
.nav-toggle{
  display:none; background:transparent; border:0; padding:8px; border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.12); backdrop-filter:blur(6px);
}
.nav-toggle:focus{outline:2px solid var(--ring)}
.nav-toggle span{
  display:block; width:22px; height:2px; background:#111827; margin:5px 0; transition:.2s; border-radius:2px;
}
body:not(.nav-open) .nav-toggle{ background:#ffffffcc }        /* botón claro, como tu referencia */
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0 }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ===== Backdrop ===== */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.55);
  z-index:64; opacity:0; transition:opacity .2s ease;
}
body.nav-open .nav-backdrop{ opacity:1 }
body:not(.nav-open) .nav-backdrop{ pointer-events:none }

/* ===== Menú off-canvas ===== */
@media (max-width: 980px){
  .nav-toggle{display:block}

  .mainnav{
    position:fixed; top:0; right:0; height:100dvh;
    width:min(86vw, 420px);
    background:#0b1225; border-left:1px solid rgba(255,255,255,.08);
    box-shadow:-20px 0 60px rgba(0,0,0,.45);
    transform:translateX(100%); transition:transform .22s ease;
    z-index:65; padding:14px 12px;
    display:block; /* asegura bloque vertical */
  }
  body.nav-open .mainnav{ transform:none }

  .nav-list{
    display:flex; flex-direction:column; gap:6px; margin:10px 0 0; padding:0; list-style:none;
  }
  .nav-list > li > a, .dd-btn{
    display:block; width:100%; text-align:left;
    color:#e5e7eb; padding:12px 12px; border-radius:10px; text-decoration:none;
    border:1px solid transparent;
  }
  .nav-list > li > a:hover, .dd-btn:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1) }

  /* Dropdown dentro del panel: en columna, sin popover absoluto */
  .has-dd{ position:static }
  .dropdown{
    position:static; transform:none; opacity:1; pointer-events:auto;
    background:transparent; border:0; box-shadow:none; padding:6px 0; min-width:auto;
  }
  .dd-grid{ display:grid; grid-template-columns:1fr; gap:4px }
  .dd-item{ padding:10px 12px; border-radius:10px }
}

@media (max-width: 980px){
  .social-floating{ top: 72px; }       /* evita solaparse con el header fijo */
}

/* Social PNG sizing */
.hdr-social .btn-social img,
.bottom-social .btn-social img{
  width:22px; height:22px; display:block; object-fit:contain;
}