:root{
  --primary: #0B5FFF;
  --accent: #16A34A;
  --dark: #111827;
  --muted: #6B7280;
  --light: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--dark); background: var(--light); }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 92%); margin: 0 auto; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

header.site-header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e7eb;
  padding-top: env(safe-area-inset-top);
}
.navbar { display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: .85rem 0; }
.logo-left { display:flex; align-items:center; gap:.6rem; font-weight: 800; letter-spacing:.3px; }
.logo-left .dot { width:10px; height:10px; border-radius:50%; background:var(--primary); display:inline-block;}

.nav-right { display:flex; align-items:center; gap:.8rem; }
.menu-toggle { display:none; appearance:none; border:1px solid #e5e7eb; background:white; border-radius:.75rem; padding:.55rem .8rem; font-size:1rem; }
.navlinks { display:flex; gap:.6rem; flex-wrap: wrap; }
.navlinks a { padding:.7rem 1rem; border-radius:999px; color: var(--dark); }
.navlinks a.active, .navlinks a:hover { background: var(--dark); color: white; }
.cta { background: var(--primary); color: white; padding:.65rem 1rem; border-radius:.75rem; font-weight:600; }
.cta.alt { background: var(--accent); }
.brand-logo-right { height: 28px; width:auto; display:block; }

/* Mobile nav */
@media (max-width: 720px) {
  .menu-toggle { display:inline-flex; align-items:center; gap:.5rem; }
  .navlinks { display:none; }
  .navlinks[data-open="true"] {
    display:flex; flex-direction:column;
    position: fixed; inset: 0; padding: 88px 24px 24px;
    background: rgba(255,255,255,.98); backdrop-filter: blur(8px);
    overflow:auto; z-index: 80;
  }
  html.nav-open, body.nav-open { height: 100%; overflow: hidden; }
}

.hero {
  position: relative; isolation: isolate;
  min-height: 62vh; display:grid; place-items:center; text-align:center;
  color: white; margin-bottom: 2.2rem;
}
.hero .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.hero .title { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 900; line-height:1.05; }
.hero .subtitle { font-size: clamp(1rem, 2.4vw, 1.2rem); opacity:.95; margin-top:.6rem; }
.hero .actions { margin-top: 1rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

.section { padding: 2.2rem 0; }
.section h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin:0 0 1rem 0; }
.cards { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.card { grid-column: span 12; background:white; border:1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; }
.card h3 { margin-top:0; }
.card img { width:100%; height:auto; border-radius:.6rem; border:1px solid #e5e7eb; margin-bottom:.6rem; }
@media (min-width: 640px) { .card.span-6 { grid-column: span 6; } }
@media (min-width: 1024px) { .card.span-4 { grid-column: span 4; } }

/* Forms */
form { display:block; }
.form-grid { display:grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:.35rem; }
label { font-weight: 600; }
input, select, textarea { padding:.7rem .9rem; border:1px solid #e5e7eb; border-radius:.6rem; font-size:1rem; min-height:44px; }
textarea { min-height: 120px; resize: vertical; }
.honeypot { display:none !important; }
.help { color: var(--muted); font-size: .9rem; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding:.6rem .5rem; border-bottom:1px solid #e5e7eb; text-align:left; }
.table th { background: #f3f4f6; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table-scroll .table { min-width: 560px; }

.faq-list { counter-reset: item; list-style: none; padding-left: 0; }
.faq-list li { counter-increment: item; margin: 0 0 1rem 0; background: white; border:1px solid #e5e7eb; border-radius:.8rem; padding: .9rem; }
.faq-list li::before { content: counter(item) "."; font-weight: 800; color: var(--primary); margin-right:.5rem; }
.faq-list small { color: var(--muted); display:block; margin-bottom:.2rem; }
.faq-list b { display:block; margin-bottom:.2rem; }

footer.site-footer {
  background: #0b0f17; color: #e5e7eb; padding: 2.2rem 0; margin-top: 2rem;
}
.footer-grid { display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr); }
.footer-col { grid-column: span 12; }
@media (min-width: 720px) { .footer-col.span-4 { grid-column: span 4; } }
.footer-col h4 { margin-top:0; color: white; }
.badges { display:flex; gap:.6rem; flex-wrap:wrap; }
.badge { background: #fff; border:1px solid #e5e7eb; border-radius: 999px; padding:.35rem .6rem; font-size:.9rem; }

.fab-whatsapp {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: white; display:grid; place-items:center;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  font-weight: 800; font-size: 20px;
}
.fab-whatsapp:hover { filter: brightness(.95); }
.btn { display:inline-block; padding:.6rem 1rem; border-radius:.8rem; border:1px solid transparent; min-height:44px; }
.btn.dark { background: var(--dark); color: white; }
.btn.light { background: white; color: var(--dark); border-color:#e5e7eb; }
.btn.primary { background: var(--primary); color: white; }
.btn.accent { background: var(--accent); color: white; }
.btn.outline { background: transparent; color: white; border-color: rgba(255,255,255,.6); }

/* CTA WhatsApp en Contacto */
.wa-btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #16a34a;background:#22c55e;color:#fff}
.contact-cta{margin:10px 0 18px}

/* Sub-tabs for ATS */
.tabs{padding:30px 16px;max-width:1100px;margin:0 auto}
.tab-controls{display:flex;gap:8px;flex-wrap:wrap}
.tab-btn{padding:8px 12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:10px;cursor:pointer}
.tab-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.tab-panel{display:none;margin-top:16px}
.tab-panel.active{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

.brand-logo-left {
  display: block;
  height: 52px; /* ajusta el tamaño aquí */
  width: auto;
}

/* Global background image (change 'site-bg.jpg' to your file) */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url('image/site-bg.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:.12; /* ajusta la intensidad del fondo */
  pointer-events:none;
  z-index:-1;
}

@media (max-width: 720px) {
  .navlinks[data-open="true"] {
    display:flex; flex-direction:column;
    position: fixed; inset: 0;
    padding: calc(72px + env(safe-area-inset-top)) 24px 24px;
    background: rgba(255,255,255,.98); backdrop-filter: blur(8px);
    overflow:auto; z-index: 999;
  }
}
/* ===== Mismo tamaño SIN recorte (ATS) ===== */
.tab-panel .card { text-align: center; }

.tab-panel .card img{
  /* caja uniforme */
  max-height: 300px;          /* AJUSTA: 260–360px */
  width: auto;                 /* mantiene proporción original */
  height: auto;
  object-fit: contain;         /* NO recorta */
  display: block;
  margin: 0 auto .6rem;
  background: #f6f8fb;         /* “tapete” si sobra espacio */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;                /* pequeño margen interno opcional */
}

/* Proyectos Especiales un poco más grandes */
.cards .card img{
  max-height: 360px;           /* AJUSTA si lo quieres más alto */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto .6rem;
  background: #f6f8fb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
}