/* ============================================================
   GECOB INTERNATIONAL PANAMÁ, S.A. — Sistema visual v2
   Editorial · fotografía a sangre · aire · tipografía amplia.
   Azul #00134F + blanco, grises cálidos de soporte.
   Referencias: Ferrovial, Turner, Acciona (infraestructura seria).
   ============================================================ */

:root{
  --azul:#00134F;
  --azul-80:#0a2470;
  --azul-90:#071a5c;
  --azul-hover:#001a6b;
  --blanco:#FFFFFF;

  /* grises ligeramente cálidos para dar amabilidad */
  --gris-50:#F6F6F4;
  --gris-100:#ECEDE9;
  --gris-200:#D9DBD4;
  --gris-400:#A7ABA2;
  --gris-500:#71756D;
  --gris-700:#3C4048;
  --gris-800:#2A2E36;

  --texto:#1B2029;
  --texto-2:#5E636C;

  --maxw:1240px;
  --radio:6px;
  --radio-img:12px;

  --e1:8px; --e2:16px; --e3:24px; --e4:36px; --e5:56px; --e6:80px; --e7:120px;

  --font: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;padding-top:84px;font-family:var(--font);font-size:18px;line-height:1.65;
  color:var(--texto);background:var(--blanco);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--azul);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}

h1,h2,h3,h4{font-weight:500;color:var(--texto);line-height:1.12;margin:0 0 .4em;letter-spacing:-.015em;}
h1{font-size:clamp(38px,6vw,68px);font-weight:400;}
h2{font-size:clamp(28px,4vw,42px);font-weight:400;}
h3{font-size:21px;font-weight:500;letter-spacing:-.01em;}
p{margin:0 0 1em;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--e4);}
.section{padding:var(--e7) 0;}
.section--tight{padding:var(--e6) 0;}
.section--gris{background:var(--gris-50);}
.section--azul{background:var(--azul);color:#c7d0e6;}
.section--azul h1,.section--azul h2,.section--azul h3{color:#fff;}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-500);margin:0 0 var(--e2);font-weight:500;}
.section--azul .eyebrow{color:#8ea2d4;}
.lead{font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--texto-2);max-width:60ch;font-weight:400;}
.section--azul .lead{color:#c7d0e6;}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;line-height:1;
  padding:16px 26px;border-radius:var(--radio);cursor:pointer;border:1px solid transparent;
  transition:background .18s,border-color .18s,color .18s,transform .18s;text-decoration:none;}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn svg{width:16px;height:16px;}
.btn--primary{background:var(--azul);color:#fff;}
.btn--primary:hover{background:var(--azul-hover);color:#fff;}
.btn--ghost{background:transparent;color:var(--azul);border-color:var(--gris-200);}
.btn--ghost:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.section--azul .btn--ghost{color:#fff;border-color:#4d5f96;}
.section--azul .btn--ghost:hover{background:#fff;color:var(--azul);border-color:#fff;}
.btn--white{background:#fff;color:var(--azul);}
.btn--white:hover{background:var(--gris-50);color:var(--azul);}
.link-more{font-weight:500;display:inline-flex;align-items:center;gap:8px;}

:focus-visible{outline:2px solid var(--azul);outline-offset:3px;}
.section--azul :focus-visible{outline-color:#fff;}

/* ---------- Header ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--gris-100);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:84px;}
.nav__logo img{height:40px;width:auto;}
.nav__links{display:flex;gap:var(--e4);align-items:center;list-style:none;margin:0;padding:0;}
.nav__links a{color:var(--texto);font-size:15px;font-weight:500;position:relative;padding:6px 0;}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--azul);text-decoration:none;}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--azul);}
.nav__cta{margin-left:var(--e2);}
.nav__links a.btn--primary,.nav__links a.btn--primary:hover{color:#fff;text-decoration:none;}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--azul);}
.nav__toggle svg{width:28px;height:28px;}
@media(max-width:900px){
  body{padding-top:72px;}
  .nav__toggle{display:block;}
  .nav__inner{height:72px;}
  .nav__links{position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;align-items:stretch;
    border-bottom:1px solid var(--gris-100);max-height:0;overflow:hidden;transition:max-height .28s ease;}
  .nav__links.open{max-height:480px;}
  .nav__links li{border-top:1px solid var(--gris-100);}
  .nav__links a{display:block;padding:17px var(--e4);}
  .nav__links a[aria-current="page"]::after{display:none;}
  .nav__cta{margin:16px var(--e4);}
}

/* ---------- Hero (foto a sangre + velo azul) ---------- */
.hero{position:relative;background:var(--azul);color:#fff;overflow:hidden;isolation:isolate;}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,15,64,.94) 0%,rgba(0,17,72,.82) 44%,rgba(0,17,72,.42) 100%);}
.hero__overlay::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 90% at 82% 12%,#000 25%,transparent 72%);mask-image:radial-gradient(120% 90% at 82% 12%,#000 25%,transparent 72%);}
.hero__inner{position:relative;z-index:2;min-height:min(86vh,780px);display:flex;flex-direction:column;justify-content:center;padding-top:var(--e7);padding-bottom:var(--e7);}
.hero h1{color:#fff;max-width:17ch;margin-bottom:.35em;text-shadow:0 1px 30px rgba(0,10,40,.35);}
.hero p{color:#dbe2f2;font-size:clamp(18px,2.2vw,23px);max-width:52ch;line-height:1.5;}
.hero__actions{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e4);}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.65);}
.hero .btn--ghost:hover{background:#fff;color:var(--azul);border-color:#fff;}

/* ---------- Banda de foto a sangre ---------- */
.band{position:relative;height:clamp(320px,52vh,560px);overflow:hidden;background:var(--gris-100);}
.band img{width:100%;height:100%;object-fit:cover;}
.band .ph{width:100%;height:100%;}
.band__cap{position:absolute;left:0;bottom:0;padding:var(--e4);color:#fff;
  background:linear-gradient(0deg,#00000099,transparent);width:100%;font-size:15px;letter-spacing:.02em;}

/* ---------- Barra de logos ---------- */
.logos__title{text-align:center;color:var(--gris-700);font-size:clamp(15px,1.7vw,18px);letter-spacing:.04em;margin:0 0 var(--e4);font-weight:500;}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee__track{display:flex;gap:var(--e7);width:max-content;align-items:center;animation:scroll 46s linear infinite;}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused;}
.marquee__item{height:84px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.marquee__item img{max-height:84px;max-width:220px;width:auto;object-fit:contain;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;justify-content:center;gap:var(--e5);}}

/* ---------- Contadores (cifras amplias, sin cajas) ---------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);}
.counter{text-align:left;padding-left:var(--e3);border-left:1px solid #23388011;}
.section--azul .counter{border-left:1px solid #3a4f8f;}
.counter__num{font-size:clamp(40px,5.5vw,60px);font-weight:400;color:var(--azul);line-height:1;letter-spacing:-.02em;}
.section--azul .counter__num{color:#fff;}
.counter__label{font-size:15px;color:var(--texto-2);margin-top:12px;max-width:16ch;}
.section--azul .counter__label{color:#aeb9d4;}
@media(max-width:720px){.counters{grid-template-columns:repeat(2,1fr);gap:var(--e4) var(--e3);}}

/* ---------- Sectores (lista editorial) ---------- */
.sectores{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;}
.sectores li{display:flex;align-items:center;gap:26px;font-size:clamp(20px,2.5vw,28px);font-weight:400;color:var(--texto);letter-spacing:-.01em;}
.sectores li:not(:last-child)::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gris-200);}
@media(max-width:720px){.sectores{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;}}

/* ---------- Capacidades (editorial, no cajas) ---------- */
.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--e6);}
.caps li{padding:22px 0;border-bottom:1px solid var(--gris-100);font-size:19px;color:var(--texto);display:flex;gap:16px;align-items:baseline;}
.caps li::before{content:"";width:8px;height:8px;background:var(--azul);border-radius:50%;flex:0 0 auto;transform:translateY(-2px);}
@media(max-width:720px){.caps{grid-template-columns:1fr;}}


/* ---------- Misión / Visión ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);}
@media(max-width:760px){.mv{grid-template-columns:1fr;gap:var(--e3);}}

/* ---------- Capacidades con imagen ---------- */
.caps-block{display:grid;grid-template-columns:0.92fr 1.08fr;gap:var(--e6);align-items:center;}
.caps-media{border-radius:var(--radio-img);overflow:hidden;aspect-ratio:4/3;background:var(--gris-100);position:relative;}
.caps-media img{width:100%;height:100%;object-fit:cover;}
.caps-text .caps{margin-top:var(--e2);}
@media(max-width:820px){.caps-block{grid-template-columns:1fr;gap:var(--e4);}.caps-media{aspect-ratio:16/10;}}

/* ---------- COMPA ---------- */
.compa{display:grid;grid-template-columns:340px 1fr;gap:var(--e6);align-items:center;}
.compa__figure{display:flex;justify-content:center;}
.compa__figure img{max-height:420px;width:auto;filter:drop-shadow(0 18px 30px rgba(0,8,35,.35));}
.compa__list{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.compa__list li{display:grid;grid-template-columns:60px 1fr;gap:22px;align-items:start;padding:18px 0;border-bottom:1px solid #ffffff1f;}
.compa__list li:last-child{border-bottom:0;}


@media(max-width:820px){.compa{grid-template-columns:1fr;gap:var(--e4);}.compa__figure{max-width:300px;}}

.compa__ini{font-size:46px;font-weight:400;line-height:.9;color:#8ea8e6;letter-spacing:.02em;}
.compa__txt b{display:block;color:#fff;font-weight:500;font-size:20px;margin-bottom:5px;letter-spacing:-.01em;}
.compa__txt p{margin:0;color:#c7d0e6;font-size:16px;line-height:1.55;}

/* ---------- Proyectos: tiles image-led (Turner) ---------- */
.proj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);}
@media(max-width:900px){.proj-tiles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.proj-tiles{grid-template-columns:1fr;}}
.tile{position:relative;border-radius:var(--radio-img);overflow:hidden;aspect-ratio:4/5;display:block;background:var(--gris-100);}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.tile:hover img{transform:scale(1.05);}
.tile .ph{position:absolute;inset:0;}
.tile__scrim{position:absolute;inset:0;background:linear-gradient(0deg,#001040ee 4%,#00104066 34%,transparent 62%);}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:var(--e3);color:#fff;}
.tile__tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b9c6ea;margin-bottom:6px;}
.tile__name{font-size:19px;font-weight:500;line-height:1.25;margin:0 0 4px;color:#fff;}
.tile__meta{font-size:14px;color:#cdd6ec;margin:0;}

/* ---------- Proyectos: filas editoriales alternadas (Acciona) ---------- */
.proj-rows{display:flex;flex-direction:column;gap:var(--e5);}
.prow{display:grid;grid-template-columns:0.82fr 1.18fr;gap:var(--e5);align-items:center;}
.prow:nth-child(even){grid-template-columns:1.18fr 0.82fr;}
.prow:nth-child(even) .prow__media-wrap{order:2;}
.prow__media{border-radius:var(--radio-img);overflow:hidden;aspect-ratio:16/11;max-height:280px;background:var(--gris-100);position:relative;}
.prow__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.prow__media:hover img{transform:scale(1.04);}
.prow__thumbs{display:flex;gap:10px;margin-top:10px;}
.prow__thumbs .t{flex:1;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--gris-100);position:relative;}
.prow__thumbs img{width:100%;height:100%;object-fit:cover;}
.prow__tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-500);margin-bottom:12px;display:inline-flex;align-items:center;gap:8px;}
.prow__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--azul);}
.prow.eje .prow__tag::before{background:#c79a12;}
.prow__name{font-size:clamp(23px,2.6vw,30px);font-weight:400;letter-spacing:-.015em;margin:0 0 .3em;}
.prow__meta{font-size:15px;color:var(--gris-500);margin:0 0 14px;}
.prow__desc{font-size:18px;color:var(--texto-2);margin:0;line-height:1.55;}
.prow--text{grid-template-columns:1fr;max-width:760px;}
.prow--text .prow__name{font-size:clamp(22px,2.4vw,28px);}
@media(max-width:820px){
  .prow,.prow:nth-child(even){grid-template-columns:1fr;gap:var(--e3);}
  .prow:nth-child(even) .prow__media{order:0;}
}

/* Otros proyectos */
.proj-list{margin-top:var(--e7);border-top:1px solid var(--gris-100);padding-top:var(--e5);}
.proj-list ul{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e6);}
.proj-list li{padding:16px 0;border-bottom:1px solid var(--gris-100);font-size:17px;}
.proj-list li span{color:var(--gris-500);font-size:15px;}
@media(max-width:720px){.proj-list ul{grid-template-columns:1fr;}}

/* Placeholder */
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,var(--gris-50),var(--gris-50) 14px,var(--gris-100) 14px,var(--gris-100) 28px);
  color:var(--gris-500);font-size:12px;letter-spacing:.03em;padding:10px;}
.ph--logo{min-width:150px;height:60px;background:var(--gris-50);border:1px dashed var(--gris-200);border-radius:var(--radio);color:var(--gris-500);}
.hero .ph,.section--azul .ph,.tile .ph{background:#0a1f5e;color:#7d8cb8;}

/* ---------- Formulario ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--e6);align-items:start;}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);}
.form .full{grid-column:1 / -1;}
.field label{display:block;font-size:13px;color:var(--texto-2);margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--texto);
  padding:13px 14px;border:1px solid var(--gris-200);border-radius:var(--radio);background:#fff;}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,19,79,.12);}
.form__note{font-size:14px;color:var(--texto-2);}
.form__ok{display:none;background:var(--gris-50);border-left:3px solid var(--azul);padding:15px 17px;margin-top:var(--e2);grid-column:1 / -1;}
.contact-card{background:var(--azul);color:#c7d0e6;border-radius:var(--radio-img);padding:var(--e4);}
.contact-card dl{margin:0;display:grid;gap:var(--e3);}
.contact-card dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8ea2d4;margin-bottom:4px;}
.contact-card dd{margin:0;color:#fff;font-size:16px;}
.contact-card a{color:#fff;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:var(--e4);}.form{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.form{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
.footer{background:var(--azul);color:#aeb9d4;padding:var(--e6) 0 var(--e4);}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:var(--e5);}
.footer img{height:44px;margin-bottom:var(--e3);}
.footer p{color:#aeb9d4;max-width:40ch;}
.footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 var(--e3);}
.footer a{color:#c7d0e6;}
.footer a:hover{color:#fff;}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:16px;}
.footer__bottom{border-top:1px solid #22367e;margin-top:var(--e5);padding-top:var(--e3);font-size:13px;color:#8291bb;display:flex;justify-content:space-between;gap:var(--e2);flex-wrap:wrap;}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr;gap:var(--e4);}}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

section[id]{scroll-margin-top:90px;}
.page-head{padding:var(--e7) 0 var(--e5);}
.page-head h1{margin-bottom:.25em;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}