:root{
  --navy:#061826;
  --navy-2:#0a2740;
  --blue:#0a4c9e;
  --blue-600:#0f5fbd;
  --blue-100:#e8f0fa;
  --steel:#8a97a3;
  --paper:#ffffff;
  --paper-2:#f4f6f8;
  --ink:#12212e;
  --ink-2:#4b5a67;
  --gold:#c8a45c;
  --gold-hover:#b8934c;
  --line:#dfe4e9;

  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Satoshi','Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

  --text-hero:clamp(2.5rem,6.2vw,5.1rem);
  --text-2xl:clamp(1.9rem,3.5vw,3rem);
  --text-xl:clamp(1.3rem,2vw,1.7rem);
  --text-lg:1.125rem;
  --text-base:1rem;
  --text-sm:.9rem;
  --text-xs:.78rem;

  --wrap:1180px;
  --pad:clamp(3.5rem,6.5vw,6rem);
  --r:6px;

  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:80px;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-left:var(--sal);
  padding-right:var(--sar);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  transition:color .2s ease,border-color .2s ease;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.005em;
  margin:0;
}

p{margin:0 0 1rem}

.wrap{
  width:min(100% - 2.5rem,var(--wrap));
  margin-inline:auto;
}

/* Enlace de accesibilidad para saltar al contenido */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  background:#fff;
  color:var(--navy);
  font-weight:700;
  padding:.8rem 1.4rem;
  border-radius:var(--r);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,24,38,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding-top:var(--sat);
}
.nav__inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  height:72px;
}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:#fff;
  flex:0 0 auto;
}
.brand__mark{
  width:36px;
  height:36px;
  color:#fff;
  flex-shrink:0;
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1;
  font-family:var(--font-display);
}
.brand__text strong{
  font-size:1.3rem;
  letter-spacing:.11em;
  font-weight:700;
}
.brand__text em{
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.34em;
  color:#9dc2ea;
  margin-top:2px;
}

.nav__links{
  display:flex;
  gap:1.7rem;
  margin-left:auto;
  font-size:var(--text-sm);
  font-weight:500;
}
.nav__links a{
  color:#d8e4ef;
  text-decoration:none;
  padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.nav__links a:hover,
.nav__links a.active{
  color:#fff;
  border-color:var(--gold);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--blue-600);
  color:#fff;
  text-decoration:none;
  font-family:var(--font-display);
  font-size:1.02rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
  padding:.85rem 1.7rem;
  min-height:46px;
  border:1px solid var(--blue-600);
  border-radius:var(--r);
  transition:all .2s ease;
  cursor:pointer;
  touch-action:manipulation;
}
.btn:hover{
  background:#0b4f9f;
  border-color:#0b4f9f;
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
}
.btn--sm{
  padding:.55rem 1.15rem;
  font-size:.9rem;
  min-height:38px;
  flex:0 0 auto;
}
.btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.6);
  color:#fff;
}
.btn--ghost:hover{
  background:rgba(255,255,255,.14);
  border-color:#fff;
}
.btn--gold{
  background:var(--gold);
  border-color:var(--gold);
  color:#1a1407;
  font-weight:700;
}
.btn--gold:hover{
  background:var(--gold-hover);
  border-color:var(--gold-hover);
  color:#000;
}

/* Botón hamburguesa accesible con animación a cruz 'X' */
.burger{
  display:none;
  background:transparent;
  border:0;
  padding:0;
  width:44px;
  height:44px;
  position:relative;
  cursor:pointer;
  touch-action:manipulation;
  border-radius:4px;
  z-index:60;
}
.burger:focus-visible{
  outline:2px solid var(--gold);
}
.burger__bar{
  position:absolute;
  left:10px;
  right:10px;
  height:2.5px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease,top .25s ease,opacity .25s ease;
}
.burger__bar:first-child{top:16px}
.burger__bar:last-child{top:25px}

.burger[aria-expanded="true"] .burger__bar:first-child{
  top:21px;
  transform:rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bar:last-child{
  top:21px;
  transform:rotate(-45deg);
}

/* Telón / backdrop de menú móvil */
.drawer-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(3,14,24,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:40;
}
.drawer-backdrop.open{
  display:block;
}

/* Drawer móvil */
.drawer{
  display:none;
  flex-direction:column;
  background:var(--navy-2);
  padding:1rem 1.4rem calc(1.5rem + var(--sab));
  border-bottom:1px solid rgba(255,255,255,.12);
  max-height:calc(100vh - 72px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.drawer.open{
  display:flex;
  animation:drawerIn .25s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes drawerIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
.drawer a{
  color:#dce7f2;
  text-decoration:none;
  padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.02rem;
  display:flex;
  align-items:center;
  min-height:44px;
}
.drawer a:hover{
  color:#fff;
}
.drawer .drawer__cta{
  margin-top:.8rem;
  background:var(--gold);
  color:#1a1407;
  font-weight:700;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  justify-content:center;
  border-radius:var(--r);
  border:0;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:min(90vh,800px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(4,18,32,.95) 0%,rgba(5,26,46,.85) 45%,rgba(6,40,74,.46) 100%);
  z-index:1;
}
.hero__inner{
  position:relative;
  z-index:2;
  padding:clamp(5rem,11vw,8rem) 0 clamp(3.5rem,6vw,5.5rem);
  max-width:920px;
}
.hero__title{
  font-size:var(--text-hero);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.004em;
  margin-bottom:1.4rem;
}
.hero__title span{
  color:#8fb9e6;
  font-weight:500;
}
.hero__lede{
  color:#cfdcea;
  max-width:58ch;
  font-size:var(--text-lg);
  line-height:1.65;
  margin-bottom:2.2rem;
}
.hero__cta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:var(--text-xs);
  color:var(--blue);
  margin:0 0 .75rem;
  font-weight:600;
}
.eyebrow--light{
  color:var(--gold);
}

/* ---------- STATS ---------- */
.stats{
  background:var(--navy-2);
  color:#fff;
  padding:2.4rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.stats__grid div{
  border-left:3px solid var(--gold);
  padding-left:1.1rem;
}
.stats__grid b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem,3.2vw,2.7rem);
  line-height:1;
  font-weight:700;
}
.stats__grid span{
  font-size:var(--text-xs);
  color:#a9bccd;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-top:.35rem;
  display:block;
}

/* ---------- SECTIONS ---------- */
.section{padding:var(--pad) 0}
.section--alt{background:var(--paper-2)}
.section--dark{background:var(--navy);color:#dbe5ee}
.section--blue{
  background:linear-gradient(135deg,var(--blue) 0%,#0a3568 100%);
  color:#e3edf8;
}
.h2{
  font-size:var(--text-2xl);
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.h2--light{color:#fff}
.lede{
  max-width:62ch;
  color:var(--ink-2);
  margin-bottom:2.4rem;
  font-size:1.05rem;
}
.section--dark .lede{color:#a9bccd}

/* cards sistemas */
.cards2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:2.2rem;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.card--sys{border-top:4px solid var(--blue)}
.tag{
  display:inline-block;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  letter-spacing:.2em;
  background:var(--blue-100);
  color:var(--blue);
  padding:.3rem .7rem;
  border-radius:3px;
  margin-bottom:.9rem;
  font-weight:700;
}
.card h3{
  font-size:var(--text-xl);
  text-transform:uppercase;
  margin-bottom:.65rem;
}
.card p{
  color:var(--ink-2);
  font-size:var(--text-sm);
  line-height:1.55;
}
.ticks{
  list-style:none;
  padding:0;
  margin:1.2rem 0 0;
  font-size:var(--text-sm);
}
.ticks li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:.55rem;
  color:var(--ink-2);
}
.ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border-right:2.2px solid var(--gold);
  border-bottom:2.2px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);
}
.ticks--2{
  columns:2;
  column-gap:2.2rem;
  margin-top:1.4rem;
}

/* aplicaciones */
.apps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
.app{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.app:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.07);
}
.app img{
  aspect-ratio:16/10;
  object-fit:cover;
  width:100%;
}
.app--wide{grid-column:span 2}
.app--wide img{aspect-ratio:16/7}
.app__body{
  padding:1.5rem 1.6rem 1.75rem;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.app h3{
  font-size:var(--text-xl);
  text-transform:uppercase;
  margin-bottom:.45rem;
}
.app p{
  color:var(--ink-2);
  font-size:var(--text-sm);
  margin:0;
  line-height:1.55;
}
.app--text{
  background:var(--navy-2);
  color:#cfdcea;
  justify-content:center;
}
.app--text h3{color:#fff}
.app--text p{color:#a9bccd}
.app--text .mt{margin-top:1.4rem}

/* equipamiento */
.equip{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.equip__img{
  margin-top:1.8rem;
  border-radius:var(--r);
  aspect-ratio:4/3;
  object-fit:cover;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.equip__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.equip__list li{
  padding:1.4rem 0;
  border-bottom:1px solid var(--line);
}
.equip__list h3{
  font-size:var(--text-lg);
  font-family:var(--font-body);
  font-weight:700;
  text-transform:none;
  margin-bottom:.35rem;
}
.equip__list p{
  color:var(--ink-2);
  font-size:var(--text-sm);
  margin:0;
  line-height:1.55;
}

/* TABLA COMPARATIVA */
.table{
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  overflow:hidden;
  font-size:var(--text-sm);
  margin-top:1.5rem;
}
.row{
  display:grid;
  grid-template-columns:1fr 1.35fr 1.35fr;
  gap:1rem;
  padding:1rem 1.35rem;
  border-bottom:1px solid rgba(255,255,255,.09);
  align-items:center;
}
.row:last-child{border-bottom:0}
.row--head{
  background:rgba(255,255,255,.07);
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:var(--text-xs);
  color:#fff;
  font-weight:700;
}
.row__criterion{
  color:#fff;
  font-weight:600;
}
.row__natare{
  color:#bcd8f5;
}
.row__concrete{
  color:#94a6b8;
}
.note{
  margin-top:1.3rem;
  font-size:var(--text-xs);
  color:#8fa0b0;
  max-width:80ch;
  line-height:1.6;
}

/* nosotros */
.about{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about__img img{
  border-radius:var(--r);
  aspect-ratio:3/4;
  object-fit:cover;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.about__text p{
  color:var(--ink-2);
  line-height:1.65;
}
.about__text em{
  font-style:italic;
  color:var(--ink);
}

/* contacto */
.contact{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.contact__text p{
  color:#c3d6ec;
  max-width:46ch;
  line-height:1.65;
}
.contact__data{
  margin:2rem 0 0;
  display:grid;
  gap:1rem;
}
.contact__data div{
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:.8rem;
}
.contact__data dt{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:var(--text-xs);
  color:var(--gold);
}
.contact__data dd{
  margin:.2rem 0 0;
  font-size:var(--text-lg);
}
.contact__data a{
  text-decoration:none;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.contact__data a:hover{border-color:var(--gold)}

.form{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);
  padding:2rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.15rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.field--full{grid-column:1/-1}

/* Honeypot invisible para prevención de spam */
.field-hp{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}

.form label{
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#bdd3ea;
  font-family:var(--font-display);
  font-weight:600;
}
.req{
  color:var(--gold);
  margin-left:2px;
}
.form input,.form select,.form textarea{
  font-family:var(--font-body);
  font-size:1rem; /* 16px para evitar auto-zoom en iOS Safari */
  color:#fff;
  background:rgba(4,20,38,.55);
  border:1px solid rgba(255,255,255,.24);
  border-radius:4px;
  padding:.75rem .85rem;
  width:100%;
  min-height:46px;
  transition:border-color .2s ease,outline .2s ease;
}
.form select{
  cursor:pointer;
  appearance:auto;
}
.form select option{
  background:#0a2740;
  color:#fff;
}
.form textarea{
  resize:vertical;
  min-height:110px;
  font-size:1rem;
}
.form input::placeholder,.form textarea::placeholder{
  color:rgba(255,255,255,.45);
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  border-color:transparent;
}
.form .btn{
  grid-column:1/-1;
  justify-self:start;
}
.form__hint{
  grid-column:1/-1;
  font-size:var(--text-xs);
  color:#a9c3dd;
  margin:0;
  line-height:1.5;
}

/* footer */
.foot{
  background:var(--navy);
  color:#8fa0b0;
  padding:2.6rem 0 calc(2.6rem + var(--sab));
  border-top:1px solid rgba(255,255,255,.08);
}
.foot__inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:space-between;
}
.brand--foot{color:#fff}
.foot__legal{
  font-size:var(--text-xs);
  margin:0;
  max-width:55ch;
  line-height:1.6;
}
.foot__mail{
  font-size:var(--text-sm);
  color:#bcd8f5;
  text-decoration:none;
  border-bottom:1px solid rgba(188,216,245,.4);
  padding-bottom:1px;
}
.foot__mail:hover{
  color:#fff;
  border-color:#fff;
}

/* reveal animations */
.reveal{
  opacity:0;
  transform:translateY(20px);
}
.reveal.in{
  opacity:1;
  transform:none;
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1);
}

/* ---------- RESPONSIVIDAD ---------- */

/* Pantallas medianas / Laptops */
@media (max-width:1024px){
  .apps{grid-template-columns:1fr 1fr}
  .app--wide{grid-column:span 2}
  .equip,.about,.contact{grid-template-columns:1fr;gap:2.5rem}
  .about__img img{aspect-ratio:16/9}
  .stats__grid{grid-template-columns:1fr 1fr;gap:1.4rem}
}

/* Tablets y pantallas intermedias */
@media (max-width:820px){
  .nav__links{display:none}
  .nav__inner .btn--sm{display:none}
  .burger{display:block;margin-left:auto}
  .cards2{grid-template-columns:1fr}

  /* Rediseño responsivo de la tabla comparativa en móvil: Formato tarjeta */
  .table{
    border:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    gap:.9rem;
  }
  .row--head{display:none}
  .row{
    display:flex;
    flex-direction:column;
    gap:.45rem;
    padding:1.25rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r);
    align-items:flex-start;
  }
  .row__criterion{
    font-family:var(--font-display);
    font-size:1.15rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding-bottom:.4rem;
    margin-bottom:.2rem;
    width:100%;
  }
  .row__natare{
    color:#d8ecff;
    font-size:.95rem;
    line-height:1.45;
  }
  .row__natare::before{
    content:"Acero Natare: ";
    font-weight:700;
    color:#70b5f5;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    display:inline-block;
    margin-right:.3rem;
  }
  .row__concrete{
    color:#93a4b5;
    font-size:.92rem;
    line-height:1.45;
  }
  .row__concrete::before{
    content:"Concreto: ";
    font-weight:600;
    color:#b0bec5;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    display:inline-block;
    margin-right:.3rem;
  }
}

/* Móviles estándar (≤640px) */
@media (max-width:640px){
  :root{
    --pad:3.2rem;
  }
  .wrap{
    width:min(100% - 2rem,var(--wrap));
  }
  .apps{grid-template-columns:1fr}
  .app--wide{grid-column:span 1}
  .app--wide img{aspect-ratio:16/10}
  .form{
    grid-template-columns:1fr;
    padding:1.4rem;
  }
  .form .btn{
    width:100%;
  }
  .ticks--2{columns:1}
  .hero{
    min-height:auto;
  }
  .foot__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:1.2rem;
  }
}

/* Móviles pequeños (≤480px) */
@media (max-width:480px){
  .hero__title{
    font-size:clamp(2.1rem,9vw,2.8rem);
  }
  .hero__cta{
    flex-direction:column;
    width:100%;
  }
  .hero__cta .btn{
    width:100%;
  }
  .stats__grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .stats__grid div{
    padding-left:.9rem;
  }
}

/* Accesibilidad: Reducción de movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Impresión optimizada */
@media print{
  body{
    background:#fff !important;
    color:#000 !important;
  }
  .nav,.hero__bg,.hero__veil,.burger,.drawer,.drawer-backdrop,.skip,#contacto .form{
    display:none !important;
  }
  .section,.hero{
    padding:1.5rem 0 !important;
    background:none !important;
    color:#000 !important;
    min-height:auto !important;
  }
  .hero__title, .h2, .card h3, .app h3{
    color:#000 !important;
  }
  .hero__title span, .hero__lede, .lede, .card p, .app p{
    color:#333 !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
  .table{
    border:1px solid #ccc !important;
  }
  .row{
    border-bottom:1px solid #eee !important;
  }
  .row span{
    color:#000 !important;
  }
}