/* ALAS Ingeniería — estilos del sitio */
:root{
  --azul:#0E2433; --azul-osc:#0B1E2B; --azul-card:#12303F; --azul-ph:#1A3647;
  --ocre:#D99A2B; --blanco:#fff;
  --txt-2:#C9D4DA; --txt-3:#DCE4E8; --txt-4:#E3E9EC; --txt-foot:#AFC0C9; --ph:#8FA3AF;
  --linea:rgba(255,255,255,.12); --linea-2:rgba(255,255,255,.18);
  --serif:'Newsreader',Georgia,serif; --sans:'Public Sans',system-ui,sans-serif;
  --pad-x:clamp(20px,4vw,40px); --max:1280px; --header-h:130px;

  /* Escala por alto de pantalla. Los tamaños de la Propuesta B se aprobaron en una ventana de 960 px de alto:
     "N px a 960 de alto" se escribe calc(var(--alto) * N / 960), con N como tope. En pantallas más bajas
     (notebooks, monitores con la escala de Windows al 125 o 150 %) todo se achica en proporción. */
  --alto:100svh;
  --hpad:clamp(8px,calc(var(--alto) * 14 / 960),14px);
  --sep-portada:clamp(20px,min(8vw,calc(var(--alto) * 111 / 960)),111px);
  --pie-portada:clamp(32px,min(8vw,calc(var(--alto) * 104 / 960)),104px);
  --servicios-y:clamp(24px,min(5vw,calc(var(--alto) * 64 / 960)),64px);
  --serv-y:clamp(20px,min(4vw,calc(var(--alto) * 56 / 960)),56px);
  --fila-serv:clamp(150px,calc(var(--alto) * 240 / 960),240px);
  --secnav-espacio:calc(clamp(8px,1.6vw,28px) + 62px);
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--azul);color:var(--blanco);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ocre)}
img{display:block;max-width:100%}
::selection{background:var(--ocre);color:var(--azul)}
input,textarea,button{font:inherit}
input::placeholder,textarea::placeholder{color:var(--ph)}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sec{border-top:1px solid var(--linea)}
.pantalla{min-height:calc(100svh - var(--header-h));display:flex;align-items:center}
.pantalla > .wrap{width:100%}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.eyebrow.sm{font-size:12px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,min(4.4vw,calc(var(--alto) * 58 / 960)),58px);line-height:1.05;letter-spacing:-.015em;margin:14px 0 0;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,min(3.8vw,calc(var(--alto) * 54 / 960)),54px);line-height:1.04;letter-spacing:-.01em;margin:12px 0 0;text-wrap:balance}
.foto{border-radius:20px;background:var(--azul-ph);overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.btn{display:inline-flex;align-items:center;padding:clamp(13px,calc(var(--alto) * 16 / 960),16px) clamp(20px,calc(var(--alto) * 26 / 960),26px);border-radius:999px;font-weight:700}
.btn-ocre{background:var(--ocre);color:var(--azul)}
.btn-ocre:hover{background:#fff;color:var(--azul)}
.btn-linea{border:1px solid rgba(255,255,255,.4);font-weight:600}
.btn-linea:hover{border-color:var(--ocre);color:var(--ocre)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(20px,3vw,56px);align-items:center}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:100;background:var(--azul);border-bottom:1px solid var(--ocre)}
.header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding-top:var(--hpad);padding-bottom:var(--hpad)}
.brand{position:relative;display:flex;align-items:center}
.brand img{height:clamp(44px,min(8vw,calc(var(--alto) * 100 / 960)),100px);width:auto;filter:brightness(0) invert(1)}
/* tramo ocre bajo el logo, colineal con el borde de 1px */
.brand::after{content:"";position:absolute;left:42.5%;width:32.5%;height:7px;bottom:calc(-1 * var(--hpad) - 4px);background:var(--ocre)}
.nav{display:flex;align-items:center;gap:6px clamp(18px,2.2vw,28px);font-size:15px;font-weight:600;overflow-x:auto;max-width:100%}
.nav a{white-space:nowrap;padding:8px 0}
.nav .nav-cta{background:var(--ocre);color:var(--azul);padding:12px 22px;border-radius:999px}
.nav .nav-cta:hover{background:#fff;color:var(--azul)}
@media (max-width:760px){.brand::after{display:none}}

/* Navegador lateral */
.secnav{position:fixed;right:clamp(8px,1.6vw,28px);top:55%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:10px}
.secnav button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(14,36,51,.85);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.secnav button:hover:not(:disabled){border-color:var(--ocre);color:var(--ocre)}
.secnav button:disabled{opacity:.3;cursor:default}
.secnav .cont{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;font-family:var(--serif);font-style:italic;line-height:1}
.secnav .cont .act{font-size:17px;color:var(--ocre)}
.secnav .cont .bar{width:1px;height:28px;background:rgba(217,154,43,.6)}
.secnav .cont .tot{font-size:14px;color:var(--ph)}

/* Portada */
.portada{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(28px,calc(var(--alto) * 48 / 960),48px) 64px;align-items:center;padding-top:calc(var(--header-h) + var(--sep-portada));padding-bottom:var(--pie-portada);container-type:inline-size}
.pill{display:inline-flex;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ocre);border:1px solid rgba(217,154,43,.5);padding:8px 14px;border-radius:999px}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,min(6.2vw,calc(var(--alto) * 84 / 960)),84px);line-height:1.02;letter-spacing:-.02em;margin:clamp(14px,calc(var(--alto) * 26 / 960),26px) 0 0;text-wrap:balance}
.h1 em{font-style:italic}
.h1-linea{height:1px;background:var(--ocre);margin-top:clamp(16px,calc(var(--alto) * 28 / 960),28px);max-width:560px}
.portada .bajada{margin:clamp(16px,calc(var(--alto) * 28 / 960),28px) 0 0;max-width:46ch;font-size:clamp(16px,min(1.6vw,calc(var(--alto) * 19 / 960)),19px);line-height:1.6;color:var(--txt-2);text-wrap:pretty}
.portada .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,calc(var(--alto) * 36 / 960),36px)}
/* El mosaico nunca es más alto que lo que queda de la primera pantalla. */
.mosaico{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:1/1;max-height:min(600px,calc(var(--alto) - var(--header-h) - var(--sep-portada) - var(--pie-portada)))}
.mosaico .foto:first-child{grid-row:span 2}
/* Con la portada en una sola columna (celular, tablet), el mosaico es apaisado y bajo. */
@container (width < 944px){.mosaico{aspect-ratio:16/10;max-height:min(520px,calc(var(--alto) * .8))}}

/* Empresa */
.empresa{padding-top:clamp(48px,min(10vw,calc(var(--alto) * 128 / 960)),128px);padding-bottom:clamp(48px,min(10vw,calc(var(--alto) * 128 / 960)),128px)}
.empresa-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 64px;align-items:center}
.empresa-destacado{font-family:var(--serif);font-weight:350;font-size:clamp(24px,min(3.2vw,calc(var(--alto) * 42 / 960)),42px);line-height:1.22;letter-spacing:-.01em;margin:22px 0 0;text-wrap:pretty}
.empresa-destacado strong{font-weight:500;color:var(--ocre)}
.empresa-cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:40px 56px;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14);font-size:17px;line-height:1.7;color:var(--txt-2);align-items:start}
.empresa-cuerpo p{margin:0;text-wrap:pretty}
.empresa-cuerpo strong{color:var(--ocre)}
.empresa-cuerpo .col{display:flex;flex-direction:column;gap:24px}
.ratio43{aspect-ratio:4/3}

/* Servicios — menú */
.servicios .wrap{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;padding-top:var(--servicios-y);padding-bottom:var(--servicios-y)}
.servicios .h2{margin-bottom:clamp(16px,calc(var(--alto) * 28 / 960),28px)}
.menu-serv{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-auto-rows:minmax(var(--fila-serv),1fr);gap:14px}
.card-serv{position:relative;display:flex;align-items:flex-end;min-height:var(--fila-serv);border-radius:18px;overflow:hidden;background:var(--azul-ph);color:#fff}
.card-serv > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-serv::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,36,51,0) 35%,rgba(14,36,51,.92) 100%)}
.card-serv .pie{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:clamp(14px,calc(var(--alto) * 22 / 960),22px) 24px}
.card-serv .num{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ocre);margin-right:12px}
.card-serv .nom{font-family:var(--serif);font-size:clamp(20px,min(2vw,calc(var(--alto) * 28 / 960)),28px);line-height:1.1}
.card-serv .fl{font-size:22px}
.card-serv:hover{color:var(--ocre)}
.card-serv.obras{outline:2px solid var(--ocre);outline-offset:-2px}

/* Servicios — detalle */
.serv .wrap{padding-top:var(--serv-y);padding-bottom:var(--serv-y)}
.items{margin-top:clamp(12px,min(2vw,calc(var(--alto) * 28 / 960)),28px);border-top:1px solid var(--linea-2)}
.item{padding:clamp(10px,min(1.6vw,calc(var(--alto) * 18 / 960)),18px) 0;border-bottom:1px solid var(--linea-2);display:flex;gap:14px;font-size:clamp(16px,min(1.35vw,calc(var(--alto) * 18 / 960)),18px);line-height:1.5;color:var(--txt-4);text-wrap:pretty}
.item.solo{border-top:1px solid var(--linea-2)}
.item::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ocre);margin-top:9px}
.volver{align-self:flex-start;margin-top:clamp(12px,min(2vw,calc(var(--alto) * 24 / 960)),24px);font-size:14px;font-weight:600;color:var(--ocre)}
.serv .txt{display:flex;flex-direction:column}
.serv .h3.mb{margin-bottom:clamp(12px,min(2vw,calc(var(--alto) * 28 / 960)),28px)}
.fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:min(calc(var(--alto) - var(--header-h) - 2 * var(--serv-y) - 8px),68vw,660px);min-height:200px}
.fotos.tres{grid-template-rows:3fr 2fr}
.fotos.tres .foto:first-child{grid-column:1/-1}
.fotos.una .foto{grid-column:1/-1}
.fotos .foto{border-radius:16px}
.filas{display:flex;flex-direction:column;gap:12px}
.foto-fila{height:min(calc((var(--alto) - var(--header-h) - 2 * var(--serv-y) - 12px) / 2),40vw,330px);min-height:150px;border-radius:16px}
.txt-der{order:2}
@media (max-width:860px){.txt-der{order:0}}

/* Clientes */
.clientes .wrap{padding-top:clamp(20px,min(3vw,calc(var(--alto) * 40 / 960)),40px);padding-bottom:clamp(20px,min(3vw,calc(var(--alto) * 40 / 960)),40px)}
.clientes .h2{margin-bottom:clamp(16px,min(2.5vw,calc(var(--alto) * 32 / 960)),32px)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.logo-card{width:calc((100% - 56px) / 5);aspect-ratio:16/10;background:#fff;border:2px solid transparent;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:16px 20px}
.logo-card:hover{border-color:var(--ocre)}
.logo-card img{width:100%;height:100%;max-height:96px;object-fit:contain}

/* Obras */
.obras .wrap{padding-top:clamp(48px,min(10vw,calc(var(--alto) * 120 / 960)),120px);padding-bottom:clamp(48px,min(10vw,calc(var(--alto) * 120 / 960)),120px)}
.lista-obras{margin-top:44px;border-top:1px solid var(--ocre)}
.lista-obras p{margin:0;padding:14px 0;border-bottom:1px solid var(--linea);font-size:16px;line-height:1.6;color:var(--txt-3);text-wrap:pretty}
.lista-obras .a{color:var(--ocre)}
.lista-obras .c{color:#fff}

/* Contacto */
/* El margen de Contacto pasa de 120 px (ventana de 960 de alto) a 28 px en pantallas bajas, para que el formulario entre en una pantalla. */
.contacto .wrap{padding-top:clamp(28px,min(10vw,calc((var(--alto) - 560px) * .3)),120px);padding-bottom:clamp(28px,min(10vw,calc((var(--alto) - 560px) * .3)),120px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px 64px}
.contacto .h2{font-size:clamp(30px,min(4.2vw,calc(var(--alto) * 56 / 960)),56px);margin:clamp(10px,calc(var(--alto) * 18 / 960),18px) 0 clamp(18px,calc(var(--alto) * 36 / 960),36px)}
.datos{display:flex;flex-direction:column;gap:clamp(12px,calc(var(--alto) * 22 / 960),22px);font-size:17px;line-height:1.5}
.datos div{display:flex;flex-direction:column;gap:4px}
.datos .lbl{font-size:13px;font-weight:700;color:var(--ocre)}
.form-card{background:var(--azul-card);border:1px solid var(--linea);border-radius:20px;padding:clamp(18px,min(3vw,calc(var(--alto) * 36 / 960)),36px)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(10px,calc(var(--alto) * 16 / 960),16px)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.form .full{grid-column:1/-1}
.form input,.form textarea{border:1px solid rgba(255,255,255,.25);border-radius:12px;background:var(--azul);color:#fff;padding:0 16px;font-size:16px;font-weight:400;outline:none}
.form input{height:clamp(40px,calc(var(--alto) * 50 / 960),50px)}
.form textarea{padding:14px 16px;resize:vertical;height:clamp(76px,calc(var(--alto) * 125 / 960),125px)}
.form input:focus,.form textarea:focus{border-color:var(--ocre)}
.form button{grid-column:1/-1;height:clamp(44px,calc(var(--alto) * 54 / 960),54px);background:var(--ocre);color:var(--azul);border:0;border-radius:999px;font-size:16px;font-weight:700;cursor:pointer}
.form button:hover{background:#fff}
.form button:disabled{opacity:.6;cursor:wait}
.form .hp{position:absolute;left:-9999px}
.form .error{grid-column:1/-1;color:#F2B8A0;font-size:14px;margin:0}
.gracias{min-height:340px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.gracias .ok{font-size:14px;font-weight:700;color:var(--ocre)}
.gracias p{margin:0;font-family:var(--serif);font-size:34px;line-height:1.1}
.gracias button{margin-top:10px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:999px;padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer}
[hidden]{display:none !important}

/* Footer */
.footer{background:var(--azul);border-top:1px solid rgba(217,154,43,.35);font-size:14px;color:var(--txt-foot)}
.footer .top{display:flex;flex-wrap:wrap;gap:28px 48px;justify-content:space-between;align-items:center;padding-top:40px;padding-bottom:40px}
.footer .top > img{height:56px;width:auto;filter:brightness(0) invert(1)}
.footer nav{display:flex;flex-wrap:wrap;gap:10px 26px;color:#fff;font-weight:500}
.footer .afip{display:block;background:#fff;padding:4px;border-radius:6px}
.footer .afip img{height:60px;width:auto}
.footer .legal{padding-bottom:32px}

/* ---------- Adaptación a todas las pantallas ---------- */

/* Flechas de navegación en celulares, tablets y ventanas angostas: más chicas, abajo a la derecha y sin contador,
   para saltar de sección en sección (por ejemplo, de Obras a Contacto sin recorrer toda la lista). */
@media (hover:none),(max-width:760px){
  .secnav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom, 0px));right:12px;transform:none;gap:8px}
  .secnav button{width:40px;height:40px}
  .secnav button svg{width:16px;height:16px}
  .secnav .cont{display:none}
}
/* En computadoras, si la ventana es más angosta que el contenido, se reserva lugar para que las flechas no tapen nada. */
@media (hover:hover) and (min-width:761px){
  .wrap{
    padding-left:max(var(--pad-x),calc(var(--secnav-espacio) - max(0px,(100vw - var(--max)) / 2)));
    padding-right:max(var(--pad-x),calc(var(--secnav-espacio) - max(0px,(100vw - var(--max)) / 2)));
  }
}

/* Menú plegable en celulares y tablets */
.menu-boton{display:none}
@media (max-width:900px){
  .header .wrap{flex-wrap:nowrap}
  .menu-boton{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--linea-2);border-radius:50%;background:transparent;color:#fff;cursor:pointer}
  .menu-boton:hover{border-color:var(--ocre);color:var(--ocre)}
  .menu-boton .rayas,.menu-boton .rayas::before,.menu-boton .rayas::after{display:block;width:18px;height:1.5px;background:currentColor;border-radius:1px;transition:transform .2s,background-color .2s}
  .menu-boton .rayas{position:relative}
  .menu-boton .rayas::before,.menu-boton .rayas::after{content:"";position:absolute;left:0}
  .menu-boton .rayas::before{transform:translateY(-6px)}
  .menu-boton .rayas::after{transform:translateY(6px)}
  .header.menu-abierto .menu-boton .rayas{background-color:transparent}
  .header.menu-abierto .menu-boton .rayas::before{transform:rotate(45deg)}
  .header.menu-abierto .menu-boton .rayas::after{transform:rotate(-45deg)}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px var(--pad-x) 22px;background:var(--azul);border-bottom:1px solid var(--ocre);font-size:17px;font-weight:500;max-height:calc(var(--alto) - var(--header-h));overflow:auto}
  .header.menu-abierto .nav{display:flex}
  .header.menu-abierto .brand::after{display:none}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linea)}
  .nav .nav-cta{align-self:flex-start;margin-top:18px;padding:12px 24px;border-bottom:0;font-weight:700}
}
/* Celular acostado: el menú se reparte en columnas para entrar en la pantalla. */
@media (max-width:900px) and (max-height:500px){
  .header.menu-abierto .nav{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;padding-bottom:14px}
  .nav a{padding:12px 0}
  .nav .nav-cta{justify-self:start;align-self:center;margin-top:6px;padding:10px 22px}
}