:root{
  --navy-deep:#0B1F46;
  --navy:#1B3661;
  --navy-soft:#284877;
  --green:#276742;
  --green-bright:#3C8F5C;
  --paper:#F6F7F9;
  --paper-2:#EEF1F4;
  --steel:#5B6472;
  --steel-light:#9AA3B0;
  --white:#FFFFFF;
  --amber:#D98F2B;
  --line:rgba(255,255,255,0.14);
  --line-dark:rgba(11,31,70,0.12);
  --radius:10px;
  --radius-sm:6px;
  --shadow-sm:0 1px 2px rgba(11,31,70,0.05), 0 1px 1px rgba(11,31,70,0.04);
  --shadow-md:0 10px 24px rgba(11,31,70,0.10), 0 2px 8px rgba(11,31,70,0.05);
  --shadow-lg:0 24px 48px rgba(11,31,70,0.18), 0 8px 20px rgba(11,31,70,0.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy-deep);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:0.01em;
  margin:0;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){ .wrap{padding:0 20px;} }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--white);
  color:var(--navy-deep);
  padding:12px 20px;
  z-index:200;
  border-radius:0 0 4px 0;
  font-weight:600;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;}

/* ---------- Header ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(11,31,70,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.brand-mark{height:34px;width:auto;}
.brand-text{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:0.04em;
  color:var(--white);
}
.brand-text .accent{color:var(--green-bright);}

nav[aria-label="Principal"]{display:flex;}
.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  color:var(--paper);
  text-decoration:none;
  font-size:14.5px;
  font-weight:500;
  opacity:0.85;
  transition:opacity 0.2s;
}
.nav-links a:hover, .nav-links a:focus-visible{opacity:1;}
.nav-cta{
  background:var(--green);
  color:var(--white) !important;
  padding:10px 20px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
  opacity:1 !important;
  border:1px solid var(--green-bright);
  box-shadow:0 2px 10px rgba(39,103,66,0.35);
  transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.nav-cta:hover{background:var(--green-bright);box-shadow:0 4px 16px rgba(60,143,92,0.4);transform:translateY(-1px);}
.nav-toggle{display:none;}
@media(max-width:860px){
  .nav-links{
    position:fixed;
    top:76px; left:0; right:0;
    background:var(--navy-deep);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 20px 20px;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;border-top:1px solid var(--line);}
  .nav-links a{display:block;padding:16px 0;}
  .nav-cta{display:inline-block;margin-top:8px;}
  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    background:none;border:none;cursor:pointer;padding:8px;
  }
  .nav-toggle span{width:22px;height:2px;background:var(--paper);display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,#0B1F46 0%,#122B54 55%,#16335F 100%);
  padding:150px 0 88px;
  overflow:hidden;
  color:var(--paper);
}
.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, black, transparent 85%);
  pointer-events:none;
}
.hero::before{
  content:"";
  position:absolute;
  top:-160px; right:-140px;
  width:560px;height:560px;
  background:radial-gradient(circle, rgba(60,143,92,0.20), transparent 68%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  bottom:-220px; left:-160px;
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(90,123,174,0.16), transparent 70%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr;} }

.eyebrow{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green-bright);
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(34px,5vw,58px);
  font-weight:700;
  line-height:1.05;
  color:var(--white);
}
.tagline-en{
  font-size:12.5px;
  letter-spacing:0.05em;
  color:var(--steel-light);
  margin:14px 0 0;
}
.hero p.lead{
  font-size:17px;
  line-height:1.6;
  color:#C7D0DE;
  max-width:500px;
  margin:22px 0 34px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  border:1px solid transparent;
  transition:transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--green);color:var(--white);border-color:var(--green-bright);box-shadow:0 4px 14px rgba(39,103,66,0.4);}
.btn-primary:hover{background:var(--green-bright);box-shadow:0 6px 20px rgba(60,143,92,0.45);transform:translateY(-1px);}
.btn-ghost{background:rgba(255,255,255,0.02);color:var(--paper);border-color:rgba(255,255,255,0.28);}
.btn-ghost:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.06);transform:translateY(-1px);}

.hero-visual{
  position:relative;
  z-index:2;
  background:rgba(255,255,255,0.045);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px);
}
.hero-illustration{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,0.25));}
.hero-visual-caption{
  margin-top:14px;
  font-size:11.5px;
  letter-spacing:0.05em;
  color:var(--steel-light);
  text-align:center;
}
.hero-visual--logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 40px;
  background:var(--white);
  border-color:rgba(255,255,255,0.85);
}
.hero-logo{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,0.3));
}

/* ---------- Section shell ---------- */
section{padding:100px 0;}
@media(max-width:640px){ section{padding:64px 0;} }
.section-head{max-width:660px;margin-bottom:48px;}
.section-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.section-eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--green);
  display:inline-block;
}
.section-head h2{
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  color:var(--navy-deep);
  line-height:1.08;
}

/* ---------- Icon badges ---------- */
.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg, rgba(39,103,66,0.10), rgba(11,31,70,0.06));
  border:1px solid var(--line-dark);
  margin-bottom:20px;
}
.icon-badge .icon{width:28px;height:28px;margin:0;}

/* ---------- Nosotros ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
@media(max-width:760px){ .about-grid{grid-template-columns:1fr;} }
.about-grid p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--steel);
  margin:0;
}

/* ---------- Pilares ---------- */
.pillars{background:var(--paper-2);}
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
@media(max-width:860px){ .pillars-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .pillars-grid{grid-template-columns:1fr;} }
.pillar{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:28px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.pillar h3{font-size:20px;font-weight:600;color:var(--navy-deep);margin-bottom:8px;}
.pillar p{font-size:14.5px;line-height:1.6;color:var(--steel);margin:0;}

/* ---------- Áreas de tecnología ---------- */
.areas-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
@media(max-width:700px){ .areas-grid{grid-template-columns:1fr;} }
.area-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:32px 30px;
  box-shadow:var(--shadow-sm);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.area-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.area-card h3{font-size:20px;font-weight:600;color:var(--navy-deep);margin-bottom:10px;line-height:1.2;}
.area-card p{font-size:14.5px;line-height:1.6;color:var(--steel);margin:0;}

/* ---------- Tecnologías que representamos ---------- */
.products{background:var(--paper-2);}
.product-block{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:52px;
  align-items:center;
  padding:52px 0;
  border-bottom:1px solid var(--line-dark);
}
.product-block:first-child{padding-top:0;}
.product-block:last-child{padding-bottom:0;border-bottom:none;}
.product-block.reverse{direction:rtl;}
.product-block.reverse > *{direction:ltr;}
@media(max-width:860px){
  .product-block{grid-template-columns:1fr; gap:26px; padding:40px 0;}
  .product-block.reverse{direction:ltr;}
}

.product-block.wide-media{
  grid-template-columns:1.3fr 0.7fr;
  align-items:start;
}
@media(max-width:860px){ .product-block.wide-media{grid-template-columns:1fr;} }

.product-media{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:1px solid var(--line-dark);
  background:var(--navy-deep);
}
.product-media video,
.product-media > img{
  width:100%;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
}
.product-media--full{
  background:var(--white);
}
.product-media--full > img{
  width:100%;
  height:auto;
  aspect-ratio:1400/933;
  object-fit:contain;
  display:block;
}
.product-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.product-gallery img{width:100%;height:130px;object-fit:cover;display:block;}

.product-origin{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--green);
  margin-bottom:12px;
  font-weight:600;
}
.product-copy h3{
  font-size:clamp(22px,3vw,28px);
  font-weight:700;
  color:var(--navy-deep);
  line-height:1.15;
  margin-bottom:14px;
}
.product-copy p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--steel);
  margin:0 0 20px;
}
.product-specs{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.product-specs li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:1.5;
  color:var(--navy-deep);
}
.product-specs li::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:8px;height:8px;
  border-radius:2px;
  background:var(--green);
}
.product-fit{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--steel);
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:7px 15px;
}

/* ---------- A quiénes ayudamos ---------- */
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:0; padding:0;
}
.tag-list li{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:10px 20px;
  font-size:14px;
  color:var(--navy-deep);
  font-weight:500;
  box-shadow:var(--shadow-sm);
  transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tag-list li:hover{
  border-color:var(--green-bright);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* ---------- Propuesta de valor ---------- */
.value-prop{
  position:relative;
  background:var(--navy-deep);
  color:var(--white);
  text-align:center;
  overflow:hidden;
}
.value-prop::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:640px;height:640px;
  background:radial-gradient(circle, rgba(60,143,92,0.16), transparent 68%);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.value-prop .wrap{position:relative;z-index:1;}
.value-statement{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,4vw,38px);
  font-weight:700;
  line-height:1.15;
  max-width:780px;
  margin:0 auto 18px;
  color:var(--white);
}
.value-support{
  font-size:16px;
  line-height:1.65;
  color:#C7D0DE;
  max-width:640px;
  margin:0 auto;
}

/* ---------- Presencia regional ---------- */
.region{position:relative;}
.region-track{
  position:absolute;
  left:32px; right:32px;
  top:calc(50% + 6px);
  height:1px;
  background-image:linear-gradient(90deg, var(--line-dark) 0 8px, transparent 8px 16px);
  background-size:16px 1px;
  display:none;
}
@media(min-width:701px){ .region-track{display:block;} }
.region-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  list-style:none;
  margin:0; padding:0;
}
@media(max-width:700px){ .region-grid{grid-template-columns:repeat(2,1fr);} }
.region-grid li{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:22px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:600;
  color:var(--navy-deep);
  box-shadow:var(--shadow-sm);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.region-grid li:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.region-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(39,103,66,0.10), rgba(11,31,70,0.06));
  flex-shrink:0;
}

/* ---------- Misión y visión ---------- */
.mv{background:var(--paper-2);}
.mv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media(max-width:700px){ .mv-grid{grid-template-columns:1fr;} }
.mv-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:36px 34px;
  box-shadow:var(--shadow-sm);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.mv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.mv-card p{
  font-size:16.5px;
  line-height:1.65;
  color:var(--steel);
  margin:0;
}

/* ---------- Contacto ---------- */
.contact{background:var(--paper);}
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }
.contact-info h2{
  font-size:clamp(26px,4vw,36px);
  font-weight:700;
  color:var(--navy-deep);
  line-height:1.1;
  margin:14px 0 12px;
}
.contact-info p{font-size:16px;line-height:1.6;color:var(--steel);margin-bottom:24px;}
.mailto-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--navy-deep);
  color:var(--white);
  text-decoration:none;
  padding:14px 22px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:15px;
  border:1px solid var(--navy-deep);
  box-shadow:var(--shadow-sm);
  transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.mailto-btn:hover{background:var(--navy);box-shadow:var(--shadow-md);transform:translateY(-1px);}

.contact-person{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:24px;
  padding:16px 20px;
  background:var(--white);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.2s, transform 0.15s;
}
.contact-person:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.contact-person-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(39,103,66,0.10), rgba(11,31,70,0.06));
  color:var(--green);
}
.contact-person-text{display:flex;flex-direction:column;gap:3px;}
.phone-btn{
  color:var(--navy-deep);
  text-decoration:none;
  font-weight:600;
  font-size:15.5px;
  transition:color 0.2s;
}
.phone-btn:hover{color:var(--green);}
.contact-person-name{
  font-size:13px;
  color:var(--steel-light);
}

form{
  background:var(--white);
  border:1px solid var(--line-dark);
  padding:36px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--navy-deep);
  margin-bottom:8px;
}
.field input, .field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #D7DCE3;
  border-radius:var(--radius-sm);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14.5px;
  color:var(--navy-deep);
  background:var(--paper);
  transition:border-color 0.15s;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--green);
  background:var(--white);
}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:12.5px;color:var(--steel-light);margin:14px 0 0;}
.btn-submit{
  width:100%;
  justify-content:center;
  background:var(--green);
  color:var(--white);
  border-color:var(--green);
  padding:15px 26px;
  box-shadow:0 4px 14px rgba(39,103,66,0.35);
}
.btn-submit:hover{background:var(--green-bright);border-color:var(--green-bright);box-shadow:0 6px 20px rgba(60,143,92,0.4);}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#8C97AA;padding:48px 0 30px;position:relative;}
footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--green), var(--green-bright), var(--navy-soft));
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  gap:20px;
}
.footer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.footer-brand img{height:26px;width:auto;}
.footer-brand .brand-text{font-size:16px;}
.footer-tag{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#7C8AA0;}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  padding:22px 0;
  font-size:14px;
}
.footer-links a{text-decoration:none;color:#B7C1D1;transition:color 0.2s;}
.footer-links a:hover{color:var(--white);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  flex-wrap:wrap;
  gap:10px;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
}