:root {
  --blue: #064f5f;
  --blue-dark: #062f38;
  --teal: #1aa6a6;
  --teal-soft: #dff5f2;
  --graphite: #263235;
  --steel: #6b7f86;
  --mist: #f4f8f8;
  --paper: #fbfdfd;
  --line: #d9e5e5;
  --white: #fff;
  --shadow: 0 18px 40px rgba(18,47,53,.11);
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; color: var(--graphite); background: var(--white); font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: var(--blue); text-underline-offset: .22em; }
a:hover { color: var(--teal); }
img { max-width: 100%; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(217,229,229,.9); backdrop-filter: blur(14px); }
.navbar { padding: .72rem 0; }
.navbar-toggler { border: 1px solid var(--line); border-radius: 8px; }
.navbar-toggler:focus, .btn:focus, input:focus, textarea:focus { box-shadow: 0 0 0 .18rem rgba(26,166,166,.25); outline: 0; }

.brand-mark { display: inline-flex; align-items: center; color: var(--graphite); text-decoration: none; }
.brand-logo { display: block; width: clamp(160px, 16vw, 214px); height: auto; aspect-ratio: 549 / 129; object-fit: contain; image-rendering: auto; }
.footer-logo { background: rgba(255,255,255,.96); border-radius: 8px; padding: .28rem .45rem; }
.nav-link { color: var(--graphite); font-size: .94rem; font-weight: 650; padding: .7rem .58rem; }
.nav-link:hover { color: var(--blue); }
.nav-clientes { margin-left: .4rem; }
.btn { border-radius: 8px; font-weight: 750; min-height: 44px; padding: .65rem 1rem; }
.btn-clientes, .btn-primary-cer { color: #fff; background: var(--blue); border: 1px solid var(--blue); }
.btn-clientes:hover, .btn-primary-cer:hover { color: #fff; background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-outline-cer { color: #fff; border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.08); }
.btn-outline-cer:hover { color: var(--blue-dark); background: #fff; }
.btn-outline-dark-cer { color: var(--blue); border: 1px solid var(--line); background: #fff; }
.btn-outline-dark-cer:hover { color: #fff; background: var(--blue); border-color: var(--blue); }

.hero-section { position: relative; min-height: 720px; display: grid; align-items: center; overflow: hidden; color: #fff; }
.hero-media, .hero-overlay { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transform: scale(1.02); }
.hero-overlay { background: linear-gradient(90deg,rgba(4,32,39,.96) 0%,rgba(6,68,78,.78) 48%,rgba(4,32,39,.32) 100%), linear-gradient(0deg,rgba(4,32,39,.45),rgba(4,32,39,.08)); }
.hero-content { position: relative; z-index: 1; padding: 7rem 0 6rem; }
.eyebrow, .section-kicker { margin: 0 0 .85rem; color: var(--teal); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero-content h1 { max-width: 820px; margin: 0; font-size: clamp(2.45rem,5.25vw,4.15rem); line-height: 1.04; overflow-wrap: break-word; }
.hero-lead { max-width: 720px; margin: 1.45rem 0 0; color: rgba(255,255,255,.9); font-size: 1.23rem; }
.hero-actions, .form-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-proof, .gmp-tags, .about-points { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.45rem; }
.hero-proof span, .gmp-tags span { display: inline-flex; align-items: center; min-height: 38px; padding: .5rem .85rem; border-radius: 8px; font-weight: 750; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.about-points span, .sector-list span { min-height: 36px; padding: .45rem .72rem; border-radius: 8px; color: var(--blue-dark); background: var(--teal-soft); border: 1px solid rgba(26,166,166,.22); font-weight: 800; }

.section-block, .gmp-section, .about-section, .clients-section, .contact-section, .client-placeholder, .client-portal-section { padding: 6rem 0; }
.section-intro, .process-section, .clients-section, .client-placeholder, .client-portal-section { background: var(--mist); }
.intro-grid, .siemens-grid, .gmp-grid, .about-grid, .contact-grid, .client-grid, .client-portal-grid, .footer-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.76fr); gap: 3.4rem; align-items: center; }
.contact-grid > *, .client-portal-grid > * { min-width: 0; }
.intro-grid h2, .section-heading h2, .gmp-grid h2, .about-grid h2, .contact-grid h2, .client-grid h1, .client-portal-grid h1 { margin: 0; color: var(--blue-dark); font-size: clamp(2rem,4vw,3.15rem); line-height: 1.08; }
.intro-grid p, .section-heading p, .gmp-grid p, .about-grid p, .contact-grid p, .client-grid p, .client-portal-grid p, .history-panel p { color: #4b5c61; font-size: 1.05rem; }
.intro-grid h2 + p, .section-heading h2 + p, .gmp-grid h2 + p, .about-grid h2 + p, .contact-grid h2 + p { margin-top: 1.05rem; }
.section-heading { max-width: 850px; margin-bottom: 3rem; }

.siemens-strip { padding: 1.35rem 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.siemens-grid { grid-template-columns: minmax(180px,240px) minmax(0,1fr); gap: 1.4rem; }
.siemens-grid img { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; object-fit: cover; object-position: center; border: 1px solid var(--line); background: var(--mist); }
.siemens-grid span { color: var(--blue-dark); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.siemens-grid p { margin: 0; color: #4b5c61; overflow-wrap: anywhere; }

.services-grid, .cases-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.15rem; }
.service-card, .case-card, .contact-form, .client-status, .history-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.service-card { min-height: 238px; padding: 1.35rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.service-card-photo img, .technical-placeholder { display: block; width: 100%; height: 190px; margin: 0 0 1.1rem; object-fit: contain; object-position: center; background: linear-gradient(135deg,#f8fbfb 0%,#e5f2f1 100%); }
.service-card-photo img { padding: .35rem; }
.technical-placeholder { position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(6,79,95,.12); }
.technical-placeholder::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,79,95,.08) 1px,transparent 1px), linear-gradient(0deg,rgba(6,79,95,.08) 1px,transparent 1px), radial-gradient(circle at 72% 45%,rgba(26,166,166,.2),transparent 28%); background-size: 28px 28px,28px 28px,100% 100%; }
.technical-placeholder::after { content: ""; position: absolute; width: 44%; aspect-ratio: 1; border: 2px solid rgba(6,79,95,.32); border-radius: 50%; box-shadow: 0 0 0 18px rgba(26,166,166,.08), inset 0 0 0 14px rgba(255,255,255,.5); }
.technical-placeholder span { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 8px; color: #fff; background: var(--blue); font-weight: 900; letter-spacing: .08em; box-shadow: 0 14px 28px rgba(6,47,56,.18); }
.service-card-featured { border-color: rgba(26,166,166,.5); background: linear-gradient(180deg,#fff 0%,#eefafa 100%); }
.service-card-accent { grid-column: span 3; min-height: 190px; color: #fff; background: linear-gradient(135deg,var(--blue-dark),#0d6771); border-color: transparent; }
.service-card-wide { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1fr); gap: 1.4rem; align-items: center; }
.service-card-wide img, .service-card-wide .technical-placeholder { width: 100%; height: 220px; margin: 0; border-radius: 8px; }
.service-card-accent .technical-placeholder { background: linear-gradient(135deg,rgba(255,255,255,.95),rgba(223,245,242,.9)); border: 1px solid rgba(255,255,255,.3); }
.service-card h3, .case-card h3, .work-steps h3, .history-panel h3 { margin: .75rem 0 .55rem; color: inherit; font-size: 1.23rem; }
.service-card p, .case-card p, .work-steps p { margin: 0; color: #596b70; }
.service-card-accent p { color: rgba(255,255,255,.84); }
.card-index { color: var(--teal); font-size: .82rem; font-weight: 850; }

.gmp-section { color: #fff; background: linear-gradient(135deg,rgba(6,79,95,.96),rgba(38,50,53,.95)), linear-gradient(90deg,rgba(26,166,166,.18),transparent); }
.gmp-section .section-kicker, .gmp-section h2, .gmp-section p, .contact-section h2, .contact-section .section-kicker { color: #fff; }
.gmp-section p, .contact-section p { color: rgba(255,255,255,.84); }
.gmp-photo, .about-photo { position: relative; margin: 0; min-height: 420px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); background: var(--blue-dark); }
.gmp-photo img, .about-photo img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center; display: block; }
.about-photo-people { background: linear-gradient(135deg,#f6fbfb,#dbe9e8); }
.about-photo-people img { padding: 1rem; object-fit: contain; }
.gmp-photo figcaption, .about-photo figcaption { position: absolute; left: 1.25rem; bottom: 1.25rem; padding: 1rem; border-radius: 8px; background: rgba(255,255,255,.94); color: var(--blue-dark); }
.gmp-photo strong, .gmp-photo small, .about-photo span, .about-photo small { display: block; }
.about-photo span { font-size: 4rem; font-weight: 900; line-height: 1; }

.case-card { overflow: hidden; }
.case-card h3, .case-card p, .case-card a { margin-left: 1.2rem; margin-right: 1.2rem; }
.case-card h3 { margin-top: 1rem; }
.case-card p { min-height: 100px; }
.case-card a { display: inline-flex; margin-top: 1.1rem; margin-bottom: 1.25rem; font-weight: 800; color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .22em; }
.case-media { display: block; width: 100%; height: 190px; object-fit: contain; object-position: center; padding: .35rem; background: linear-gradient(135deg,#f8fbfb 0%,#e5f2f1 100%); }
.case-media-people { object-position: center top; }

.work-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .8rem; padding: 0; margin: 0; list-style: none; }
.work-steps li { min-height: 260px; padding: 1.15rem; border-left: 4px solid var(--teal); background: #fff; border-radius: 8px; box-shadow: 0 8px 26px rgba(21,51,57,.08); }
.work-steps span { color: var(--teal); font-weight: 900; }

.about-section { background: linear-gradient(180deg,#fff 0%,#f7fbfb 100%); }
.history-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.78fr); gap: 1rem; margin-top: 2rem; }
.history-panel { padding: 1.45rem; }
.history-panel h3 { color: var(--blue-dark); font-size: 1.45rem; }
.sector-list { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }

.client-name-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.client-name-grid span { display: grid; align-items: center; min-height: 72px; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-dark); background: #fff; font-weight: 850; box-shadow: 0 8px 26px rgba(21,51,57,.06); }

.contact-section { background: var(--blue-dark); color: #fff; }
.contact-methods { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.5rem; }
.contact-methods span { width: fit-content; }
.contact-details { margin-top: 1.9rem; width: min(100%, 520px); padding: 1.1rem 1.2rem; border-radius: 8px; color: var(--blue-dark); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.64); }
.contact-details dl { display: grid; gap: .75rem; margin: 0; }
.contact-details div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: .9rem; align-items: start; }
.contact-details dt { color: var(--blue); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.contact-details dd { margin: 0; color: var(--blue-dark); font-size: 1.04rem; font-weight: 800; line-height: 1.35; }
.contact-details dd span { color: #30464b; font-size: .96rem; font-weight: 650; }
.contact-details a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.contact-details a:hover { color: var(--blue); text-decoration: underline; }
.contact-map { margin-top: 1.25rem; width: min(100%, 520px); overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.contact-map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border: 0; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; padding: 1.45rem; }
.contact-form label { display: grid; gap: .4rem; color: var(--blue-dark); font-weight: 800; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; color: var(--graphite); background: var(--paper); }
.full-field, .form-actions, .form-note, .form-alert, .robot-check, .captcha-field { grid-column: 1/-1; }
.form-note { margin: 0; color: #66777b; font-size: .92rem; }
.form-alert { margin: 0; padding: .85rem .95rem; border-radius: 8px; font-weight: 800; }
.form-alert-success { color: #0d4e39; background: #dff7ed; border: 1px solid #a9e5ca; }
.form-alert-error { color: #fff; background: #8f1d1d; border: 1px solid #5d1111; }
.captcha-field { display: grid; padding: .15rem 0 0; }
.robot-check { display: flex !important; grid-template-columns: none !important; align-items: center; gap: .65rem !important; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--mist); }
.robot-check input { width: 18px; height: 18px; flex: 0 0 auto; padding: 0; }

.client-placeholder { min-height: 70vh; display: grid; align-items: center; }
.client-status { display: grid; align-content: center; min-height: 380px; padding: 2rem; color: #fff; background: linear-gradient(135deg,rgba(6,79,95,.93),rgba(26,166,166,.78)), repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 2px,transparent 2px 22px); border-radius: 8px; }
.client-status span { color: #d9f3f0; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.client-status strong { margin: .6rem 0; font-size: 2rem; line-height: 1.1; }

.client-portal-section { min-height: 78vh; display: grid; align-items: center; }
.client-portal-copy { max-width: 660px; }
.client-assurances { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.client-assurances span { min-height: 38px; padding: .5rem .78rem; border-radius: 8px; color: var(--blue-dark); background: var(--teal-soft); border: 1px solid rgba(26,166,166,.22); font-weight: 800; overflow-wrap: anywhere; }
.client-login-panel { width: 100%; min-width: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.client-login-header { display: grid; gap: .25rem; margin-bottom: 1.2rem; padding: 1rem; border-radius: 8px; color: #fff; background: linear-gradient(135deg,var(--blue-dark),#0d6771); }
.client-login-header span { color: #d9f3f0; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.client-login-header strong { font-size: 1.35rem; }
.client-login-header small { color: rgba(255,255,255,.82); }
.client-login-form, .client-reset-form { display: grid; gap: 1rem; }
.client-login-form label, .client-reset-form label { display: grid; gap: .4rem; color: var(--blue-dark); font-weight: 850; }
.client-login-form input, .client-reset-form input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; color: var(--graphite); background: var(--paper); }
.client-link-button { width: fit-content; padding: 0; border: 0; color: var(--blue); background: transparent; font-weight: 850; text-decoration: underline; text-underline-offset: .22em; }
.client-link-button:hover { color: var(--teal); }
.client-message { margin: 0; padding: .85rem; border-radius: 8px; font-weight: 750; }
.client-message-error { color: #7a1d1d; background: #fff2f2; border: 1px solid #f1c7c7; }
.client-message-info { color: var(--blue-dark); background: var(--teal-soft); border: 1px solid rgba(26,166,166,.28); }

.site-footer { color: rgba(255,255,255,.76); background: #111b1e; }
.footer-grid { grid-template-columns: 1.4fr .8fr .8fr; padding-top: 3rem; padding-bottom: 2.4rem; }
.footer-brand, .footer-brand:hover, .site-footer a { color: #fff; }
.site-footer h2 { margin: 0 0 .7rem; color: #fff; font-size: 1rem; }
.site-footer p { margin: .8rem 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom .container-xl { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; font-size: .9rem; }

@media (max-width:1199px) {
  .work-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width:991px) {
  .nav-clientes { margin: .5rem 0 0; }
  .btn-clientes { width: 100%; }
  .hero-section { min-height: 660px; }
  .intro-grid, .siemens-grid, .gmp-grid, .about-grid, .contact-grid, .client-grid, .client-portal-grid, .footer-grid, .history-grid { grid-template-columns: 1fr; }
  .siemens-grid img { width: min(100%, 320px); }
  .siemens-grid p { max-width: min(100%, 356px); }
  .services-grid, .cases-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-name-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-card-accent { grid-column: span 2; }
  .service-card-wide { grid-template-columns: 1fr; }
}

@media (max-width:767px) {
  html { scroll-padding-top: 76px; }
  .navbar { padding: .7rem 0; }
  .brand-logo { width: 146px; }
  .hero-section { min-height: 620px; }
  .hero-media img { object-position: 62% center; }
  .hero-content { padding: 4.5rem 1rem; }
  .hero-content h1 { max-width: 18ch; font-size: 2.12rem; line-height: 1.1; }
  .hero-lead { max-width: 356px; font-size: 1.05rem; overflow-wrap: anywhere; }
  .section-kicker { max-width: 356px; letter-spacing: .08em; overflow-wrap: anywhere; }
  .intro-grid h2, .section-heading h2, .gmp-grid h2, .about-grid h2, .contact-grid h2, .client-grid h1, .client-portal-grid h1 { max-width: 356px; overflow-wrap: anywhere; }
  .intro-grid > p, .section-heading p, .gmp-grid p, .about-grid p, .contact-grid p, .history-panel p, .client-portal-grid p { max-width: 356px; overflow-wrap: anywhere; }
  .section-block, .gmp-section, .about-section, .clients-section, .contact-section, .client-placeholder, .client-portal-section { padding: 4rem 0; }
  .services-grid, .cases-grid, .client-name-grid, .work-steps, .contact-form { grid-template-columns: minmax(0,1fr); }
  .services-grid, .cases-grid { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
  .service-card-accent { grid-column: auto; }
  .service-card, .case-card { width: 100%; max-width: 320px; min-width: 0; justify-self: center; }
  .service-card h3, .service-card p, .case-card h3, .case-card p { max-width: 100%; }
  .service-card-photo img, .technical-placeholder { width: 100%; margin-right: 0; margin-left: 0; }
  .service-card p, .case-card p { overflow-wrap: anywhere; }
  .work-steps li, .service-card { min-height: auto; }
  .case-card p { min-height: auto; }
  .gmp-photo, .about-photo, .client-status { min-height: 300px; }
  .footer-bottom .container-xl { flex-direction: column; }
  .contact-details div { grid-template-columns: 1fr; gap: .2rem; }
  .client-assurances { display: grid; grid-template-columns: minmax(0,1fr); }
  .client-assurances span { width: 100%; max-width: 100%; }
  .client-login-panel { max-width: 100%; padding: 1.25rem; }
}

@media (max-width:420px) {
  .hero-content h1 { font-size: 1.92rem; }
  .hero-actions, .form-actions { flex-direction: column; }
  .hero-actions .btn, .form-actions .btn { width: 100%; }
}