/* ==========================================================================
   365 HSE COMPANY

   VOZ DE MARCA (tres palabras, objeto fisico): firme, medido, sin adorno.
     El objeto de referencia es una CHAPA DE DATOS estampada y atornillada a
     una maquina. De ahi salen las tres decisiones que sostienen la pagina:
     esquinas rectas, tipografia sin gracia, un solo color de accion.

   TIPOGRAFIA: Switzer (Fontshare), una sola familia.
     La jerarquia se construye con peso (400 a 800) y escala (razon 1.3),
     no con una segunda fuente. Numeros en cifra tabular.

   COLOR: monocromo hueso comprometido, un solo acento.
     El hueso cubre el 100% de la superficie. El naranja no decora: aparece
     unicamente donde hay una accion, un dato de contacto o el orden de una
     secuencia. Los grises estan tintados 0.01 de croma hacia el naranja
     para que la escala completa pertenezca a la misma familia.
     El naranja se oscurecio respecto de la version en negro: sobre fondo
     claro, el #E85D12 original quedaba en 2.9:1 y no pasaba AA.

   FORMA: radio 0 en TODO. Botones, campos, celdas, fotos.
     Un unico sistema, sin excepciones, para que lea como chapa y no como app.

   TEMA: claro fijo. Ninguna seccion invierte. El cliente pidio bajar del
     negro. Las fotografias (naves en penumbra) van con velo hueso en vez
     de velo negro: la foto queda como fondo tenue y el texto es el que
     manda. Los velos se calcularon para que el texto pase AA sobre la
     zona MAS OSCURA de cada foto, que es el peor caso con texto negro.
   ========================================================================== */

:root{
  /* superficies: hueso calido, nunca #FFF puro */
  --ink:      #F4F2EE;
  --ink-2:    #EAE7E1;
  --ink-3:    #FFFFFF;   /* la superficie mas elevada: campo con foco, opciones */

  /* El fondo tambien en RGB suelto. Los velos sobre fotografia lo consumen
     con rgba(var(--ink-rgb),a): asi el velo sigue al tema y no queda un
     negro pegado a mano cuando la paleta cambia. */
  --ink-rgb:  244,242,238;

  /* lineas: sobre claro hace falta un poco mas de alfa que sobre negro
     para que la regla se lea igual de firme */
  --line:     rgba(23,21,15,.16);
  --line-2:   rgba(23,21,15,.085);

  /* texto */
  --bone:     #17150F;   /* 16.3:1 sobre --ink */
  --bone-2:   #55504A;   /* 7.1:1  sobre --ink */
  --bone-3:   #6A635B;   /* 5.3:1  sobre --ink, 4.9:1 sobre --ink-2. El gris apagado tambien pasa AA */

  /* acento unico */
  --hi:       #B84206;   /* relleno. --ink encima = 4.9:1 */
  --hi-text:  #9A3403;   /* acento en texto sobre hueso = 6.5:1 */
  --hi-dim:   rgba(184,66,6,.10);

  /* escala tipografica, razon ~1.3 */
  --t-xs:     12.5px;
  --t-sm:     14.5px;
  --t-base:   clamp(15.5px, .35vw + 14.6px, 17.5px);
  --t-lg:     clamp(18px, .6vw + 16px, 22px);
  --t-xl:     clamp(24px, 1.4vw + 19px, 33px);
  --t-2xl:    clamp(31px, 2.6vw + 22px, 46px);
  --t-3xl:    clamp(38px, 4.6vw + 17px, 71px);

  /* ritmo */
  --gutter:   clamp(20px, 4.6vw + 4px, 68px);
  --maxw:     1320px;
  --sect:     clamp(78px, 8.4vw, 148px);

  /* motion: ease-out exponencial, sin rebote */
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-2:   cubic-bezier(.22,1,.36,1);
  --dur:      .34s;

  /* capas semanticas, sin valores arbitrarios */
  --z-base:   1;
  --z-float:  40;
  --z-nav:    50;
  --z-menu:   45;
  --z-grain:  60;
}

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

html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Switzer','Switzer Fallback',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:var(--t-base);
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grano fijo: rompe la planitud del vector puro. Fijo y sin eventos para
   que no repinte en cada scroll. */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block;}
a{color:inherit;}

::selection{background:var(--hi);color:var(--ink);}

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

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--hi);color:var(--ink);padding:13px 20px;font-weight:600;text-decoration:none;
}
.skip:focus{left:12px;top:12px;}

/* ---- Tipografia --------------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.03;text-wrap:balance;}
h1{font-size:var(--t-3xl);}
h2{font-size:var(--t-2xl);}
h3{font-size:var(--t-lg);letter-spacing:-.02em;line-height:1.18;font-weight:700;}
p{margin:0;text-wrap:pretty;}

.lede{color:var(--bone-2);font-size:var(--t-lg);max-width:56ch;line-height:1.52;font-weight:400;}
.body-dim{color:var(--bone-2);max-width:66ch;}

/* Etiqueta chica en versalitas. Se usa SOLO en la barra de datos del hero,
   en la ficha de contacto y en los rotulos de formulario. Nunca como
   sombrerito arriba de cada titulo de seccion. */
.tag{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bone-3);
}

/* ---- Botones. Radio 0, igual que todo lo demas -------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1;letter-spacing:-.005em;
  padding:17px 28px;border:1px solid transparent;border-radius:0;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .18s var(--ease-2);
}
.btn-primary{background:var(--hi);color:var(--ink);}
.btn-primary:hover{background:#8F2E02;}
.btn-ghost{border-color:var(--line);color:var(--bone);}
.btn-ghost:hover{border-color:var(--bone);background:rgba(23,21,15,.05);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

/* Flecha del CTA: se desplaza en hover. Da respuesta fisica al puntero. */
.btn .arw{transition:transform var(--dur) var(--ease);}
.btn:hover .arw{transform:translateX(4px);}

/* ---- Nav ---------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav[data-solid="true"]{
  background:rgba(var(--ink-rgb),.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line-2);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;}
.brand img{width:36px;height:36px;object-fit:contain;background:#FFF;padding:2px;}
.brand b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.025em;line-height:1.15;}
.brand span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--bone-3);}

.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;}
/* :not(.btn) es necesario, no cosmetico: sin eso esta regla le gana en
   especificidad al color del boton y el CTA del menu movil queda con texto
   claro sobre naranja (3:1, no pasa AA). */
.nav-links a:not(.btn){
  text-decoration:none;font-size:var(--t-sm);font-weight:500;color:var(--bone-2);
  transition:color var(--dur) var(--ease);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current]{color:var(--bone);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav .btn{padding:13px 22px;}

.burger{
  display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;
}
.burger i{display:block;width:17px;height:1.5px;background:var(--bone);position:relative;transition:background .18s;}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--bone);
  transition:transform var(--dur) var(--ease);
}
.burger i::before{top:-5.5px;} .burger i::after{top:5.5px;}
.nav[data-open="true"] .burger i{background:transparent;}
.nav[data-open="true"] .burger i::before{transform:translateY(5.5px) rotate(45deg);}
.nav[data-open="true"] .burger i::after{transform:translateY(-5.5px) rotate(-45deg);}

@media (max-width:1000px){
  .burger{display:flex;}
  .nav-right .btn{display:none;}
  .nav[data-open="true"]{background:var(--ink);border-bottom-color:var(--line-2);}
  .nav-links{
    position:fixed;left:0;right:0;top:72px;z-index:var(--z-menu);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--line);
    padding:4px var(--gutter) 26px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  }
  .nav[data-open="true"] .nav-links{opacity:1;visibility:visible;transform:none;}
  .nav-links li{border-bottom:1px solid var(--line-2);}
  .nav-links li:last-child{border-bottom:0;}
  .nav-links a:not(.btn){display:block;padding:17px 0;font-size:19px;font-weight:600;color:var(--bone);}
  .nav-links .m-cta{margin-top:18px;}
  .nav-links .m-cta .btn{width:100%;}
}
@media (min-width:1001px){ .nav-links .m-cta{display:none;} }

/* ---- Revelado -----------------------------------------------------------
   El estado oculto lo pone JS, no el CSS. Sin JS, con la pestana en segundo
   plano o en un rastreador, la pagina se sirve visible. La animacion mejora
   un default que ya se ve; no lo condiciona. */
[data-r]{opacity:0;}
[data-r="rise"]   {transform:translateY(20px);}
[data-r="zoom"] > *{transform:scale(1.05);}
[data-r].on{opacity:1;transform:none;transition:opacity .78s var(--ease) var(--d,0ms),transform .78s var(--ease) var(--d,0ms);}
[data-r="zoom"].on > *{transform:none;transition:transform 1.5s var(--ease-2);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  [data-r]{opacity:1!important;transform:none!important;}
}

/* ==========================================================================
   HERO. Foto a sangre completa, el texto se apoya abajo a la izquierda.
   La fotografia es el diseno: nave metalurgica en penumbra, con la unica
   luz calida de la soldadura. El naranja de la marca ya esta en la imagen.
   ========================================================================== */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
/* Doble velo, ahora en hueso: uno vertical para que el titular negro tenga
   cama, otro lateral mas suave. El stop de arriba (.80) no es estetico: los
   links del nav son --bone-2 y sin ese piso caen a 2.7:1 sobre la parte
   oscura de la foto mientras la barra todavia es transparente. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(var(--ink-rgb),.84) 32%, rgba(var(--ink-rgb),.58) 66%, rgba(var(--ink-rgb),.80) 100%),
    linear-gradient(to right, rgba(var(--ink-rgb),.45) 0%, rgba(var(--ink-rgb),.06) 62%);
}
.hero-inner{padding-top:132px;padding-bottom:clamp(30px,4vw,52px);}
.hero h1{max-width:22ch;}
.hero .lede{margin-top:clamp(20px,2vw,28px);max-width:52ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.2vw,40px);}

/* Barra de datos al pie del hero. Reemplaza al bloque de metricas grandes:
   son hechos de operacion, no cifras de marketing. */
.facts{border-top:1px solid var(--line-2);}
.facts ul{
  display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  font-size:var(--t-sm);color:var(--bone-2);
}
.facts li{padding:18px 30px 18px 0;margin-right:30px;border-right:1px solid var(--line-2);}
.facts li:last-child{border-right:0;margin-right:0;padding-right:0;}
.facts b{color:var(--bone);font-weight:600;}
@media (max-width:720px){
  .facts li{padding:13px 0;margin-right:0;border-right:0;width:100%;border-bottom:1px solid var(--line-2);}
  .facts li:last-child{border-bottom:0;}
}

/* ---- Cabeceras de seccion ----------------------------------------------
   Sin sombrerito en versalitas. El titulo se presenta solo, con una regla
   fina arriba que marca donde arranca la seccion. */
.section{padding-block:var(--sect);}
.s-head{border-top:1px solid var(--line);padding-top:26px;margin-bottom:clamp(40px,4.6vw,68px);}
.s-head h2{max-width:19ch;}
.s-head p{margin-top:20px;}

/* ==========================================================================
   SERVICIOS. Retícula bento de 4 celdas exactas, tamanos distintos.
   La celda mayor lleva foto para que la grilla no sea texto sobre texto.
   ========================================================================== */
.bento{
  display:grid;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);
  grid-template-columns:1.15fr 1fr 1fr;
  grid-template-areas:
    "a b b"
    "a c d";
}
.cell{background:var(--ink);padding:clamp(26px,2.4vw,40px);display:flex;flex-direction:column;}
.cell-a{grid-area:a;} .cell-b{grid-area:b;} .cell-c{grid-area:c;} .cell-d{grid-area:d;}

/* Celda con foto: la imagen ocupa la mitad superior y el texto se apoya abajo. */
.cell-a{padding:0;position:relative;overflow:hidden;min-height:420px;justify-content:flex-end;}
.cell-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--ease-2);}
.cell-a:hover img{transform:scale(1.04);}
.cell-a::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--ink) 12%,rgba(var(--ink-rgb),.90) 42%,rgba(var(--ink-rgb),.30) 100%);
}
.cell-a > .cell-body{position:relative;z-index:2;padding:clamp(26px,2.4vw,40px);}

.cell h3{margin-bottom:12px;}
.cell p{color:var(--bone-2);font-size:var(--t-sm);line-height:1.6;}
/* Detalle de servicio: tres items separados por regla fina, sin vinetas
   ni puntos. La regla ya separa; el punto seria ruido. */
.cell dl{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13.5px;color:var(--bone-3);}
.cell dl span{white-space:nowrap;}
.cell dl span + span{padding-left:14px;border-left:1px solid var(--line-2);}
.cell-b{background:var(--ink-2);}

@media (max-width:1000px){
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b b" "c d";}
  .cell-a{min-height:340px;}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d";}
  .cell dl span + span{padding-left:0;border-left:0;}
}

/* ==========================================================================
   PROCESO. Unica secuencia numerada de la pagina: el orden es informacion
   real (no se puede planificar antes de relevar). Riel horizontal con una
   regla que se dibuja al entrar en pantalla.
   ========================================================================== */
.proc{background:var(--ink-2);border-block:1px solid var(--line-2);}
.rail{position:relative;padding-top:34px;}
.rail::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hi);
  transform:scaleX(0);transform-origin:left;
}
.rail.on::before{transform:scaleX(1);transition:transform 1.2s var(--ease-2) .1s;}
.rail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px);}
.step{position:relative;}
.step .n{
  display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  color:var(--hi-text);margin-bottom:14px;
}
.step h3{margin-bottom:10px;}
.step p{color:var(--bone-2);font-size:var(--t-sm);line-height:1.6;}
@media (max-width:900px){.rail-grid{grid-template-columns:1fr 1fr;gap:34px;}}
@media (max-width:560px){.rail-grid{grid-template-columns:1fr;gap:30px;}}

/* ==========================================================================
   DIFERENCIALES. Titulo pegajoso a la izquierda, items desfilando a la
   derecha. Sin tarjetas, sin numeros, sin iconos.
   ========================================================================== */
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,90px);align-items:start;}
.split-sticky{position:sticky;top:120px;}
.reasons{display:grid;}
.reason{padding:clamp(24px,2.6vw,34px) 0;border-top:1px solid var(--line);}
.reason:first-child{border-top:0;padding-top:0;}
.reason h3{margin-bottom:10px;}
.reason p{color:var(--bone-2);font-size:var(--t-sm);max-width:52ch;line-height:1.6;}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split-sticky{position:static;}
}

/* ==========================================================================
   SECTORES. Banda a sangre con foto de fondo y los rubros en tipografia
   grande. Aca la lista ES el diseno, no una nomina con vinetas.
   ========================================================================== */
.band{position:relative;isolation:isolate;padding-block:clamp(80px,9vw,140px);overflow:hidden;}
.band-bg{position:absolute;inset:0;z-index:-2;}
.band-bg img{width:100%;height:100%;object-fit:cover;}
.band-bg::after{content:"";position:absolute;inset:0;background:rgba(var(--ink-rgb),.90);}
.band h2{max-width:15ch;}
.sector-list{
  display:flex;flex-wrap:wrap;gap:0 12px;margin-top:clamp(30px,3.4vw,46px);
  font-size:clamp(19px,1.9vw + 12px,34px);font-weight:600;letter-spacing:-.028em;line-height:1.42;
  color:var(--bone-3);
}
.sector-list span{transition:color var(--dur) var(--ease);cursor:default;}
.sector-list span:hover{color:var(--bone);}
.sector-list em{color:var(--line);font-style:normal;}

/* ==========================================================================
   PROFESIONAL. Composicion desplazada: la foto vertical sube y se solapa
   con el bloque de texto. Rompe la reticula a proposito.
   ========================================================================== */
.who{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(30px,4.6vw,76px);align-items:center;}
.who-shot{position:relative;}
.who-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.who h2{margin-bottom:8px;}
.who .role{color:var(--hi-text);font-weight:600;font-size:var(--t-sm);letter-spacing:.01em;}
.who p{margin-top:22px;}
.who-meta{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,auto);gap:28px;justify-content:start;}
.who-meta b{display:block;font-size:var(--t-sm);font-weight:700;}
.who-meta span{display:block;font-size:13px;color:var(--bone-3);}
@media (max-width:900px){
  .who{grid-template-columns:1fr;}
  .who-shot{max-width:330px;}
  .who-meta{grid-template-columns:1fr 1fr;gap:20px 28px;}
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,5vw,80px);align-items:start;}
@media (max-width:900px){.contact{grid-template-columns:1fr;}}

.lines{margin-top:34px;}
.line{
  display:block;padding:20px 0;border-top:1px solid var(--line);text-decoration:none;
  transition:padding-left var(--dur) var(--ease);
}
.line:last-child{border-bottom:1px solid var(--line);}
a.line:hover{padding-left:10px;}
.line .tag{display:block;margin-bottom:5px;}
.line b{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;}
a.line:hover b{color:var(--hi-text);}

.form{border:1px solid var(--line);padding:clamp(24px,2.8vw,40px);background:var(--ink-2);}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:var(--t-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-2);}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-sm);color:var(--bone);
  background:var(--ink);border:1px solid var(--line);border-radius:0;
  padding:14px 15px;width:100%;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.field textarea{resize:vertical;min-height:100px;line-height:1.55;}
/* Placeholder al 5:1, no al gris claro por defecto. */
.field ::placeholder{color:#6A635B;opacity:1;}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2355504A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.field select option{background:var(--ink-3);color:var(--bone);}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--hi);outline:none;background:var(--ink-3);
}
.field .err{display:none;font-size:13px;color:#B3300E;}
.field[data-bad="true"] input,
.field[data-bad="true"] select,
.field[data-bad="true"] textarea{border-color:#B3300E;}
.field[data-bad="true"] .err{display:block;}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px;}
.f-note{font-size:13px;color:var(--bone-3);margin-top:16px;max-width:52ch;}
.f-status{font-size:13.5px;color:var(--bone-2);margin:0;}
@media (max-width:620px){.f-grid{grid-template-columns:1fr;}}

/* ---- Footer ------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(44px,5vw,68px) 26px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,4vw,60px);}
.foot p{margin-top:18px;color:var(--bone-2);font-size:var(--t-sm);max-width:40ch;}
.foot h4{margin:0 0 18px;font-size:var(--t-xs);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bone-3);}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.foot a{color:var(--bone-2);text-decoration:none;font-size:var(--t-sm);
  transition:color var(--dur) var(--ease);}
.foot a:hover{color:var(--hi-text);}
.foot-bar{margin-top:clamp(36px,4.4vw,60px);padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13px;color:var(--bone-3);}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}.foot-about{grid-column:1/-1;}}

/* ---- WhatsApp flotante --------------------------------------------------
   Naranja, no verde: la pagina tiene un solo color de accion y no se rompe
   por un boton. La marca de WhatsApp basta para que se reconozca. */
.wa{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:var(--z-float);
  display:inline-flex;align-items:center;gap:11px;
  background:var(--hi);color:var(--ink);text-decoration:none;
  padding:14px 20px;font-size:var(--t-sm);font-weight:700;letter-spacing:-.005em;
  box-shadow:0 14px 34px rgba(23,21,15,.20);
  transform:translateY(120%);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),background var(--dur) var(--ease);
}
.wa.on{transform:none;opacity:1;}
.wa:hover{background:#8F2E02;}
.wa img{width:19px;height:19px;flex:none;}
@media (max-width:520px){.wa{padding:15px;} .wa span{display:none;}}

/* ==========================================================================
   PAGINAS INTERNAS
   Todo lo que sigue existe porque el sitio dejo de ser una sola pagina.
   Mismas reglas de siempre: radio 0, regla fina como separador, un solo
   color de accion. Nada nuevo en el sistema, solo piezas nuevas hechas
   con las mismas partes.
   ========================================================================== */

/* En una pagina interna no hay hero que cruzar: la barra arranca solida.
   El atributo lo escribe el HTML, no el JS, para que no haya un cuadro
   transparente sobre texto durante la carga. */

/* ---- Cabecera de pagina interna ----------------------------------------
   Reemplaza al hero de 100dvh. Foto de fondo con el mismo velo hueso del
   .band, para que la pagina interna pertenezca a la misma familia sin
   pedir otra pantalla completa. */
.phead{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(72px + clamp(52px,5.6vw,96px));
  padding-bottom:clamp(40px,4.6vw,72px);
  border-bottom:1px solid var(--line-2);
}
.phead-bg{position:absolute;inset:0;z-index:-2;}
.phead-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;}
/* Velo mas cerrado que el del hero: aca el texto es lo unico que importa
   y arranca mas arriba, pegado a la barra. */
.phead-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink) 6%, rgba(var(--ink-rgb),.90) 46%, rgba(var(--ink-rgb),.84) 100%),
    linear-gradient(to right, rgba(var(--ink-rgb),.50) 0%, rgba(var(--ink-rgb),.10) 70%);
}
.phead h1{font-size:var(--t-2xl);max-width:20ch;}
.phead .lede{margin-top:clamp(18px,1.8vw,26px);max-width:60ch;}

/* Migas. Orientan y le dicen a Google como se arma el sitio. */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0 0 clamp(20px,2vw,30px);padding:0;list-style:none;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bone-3);
}
.crumb a{color:var(--bone-3);text-decoration:none;transition:color var(--dur) var(--ease);}
.crumb a:hover{color:var(--hi-text);}
.crumb li::after{content:"/";margin-left:9px;color:var(--line);}
.crumb li:last-child{color:var(--bone-2);}
.crumb li:last-child::after{content:none;}

/* ---- Servicio en detalle ------------------------------------------------
   Titulo pegajoso a la izquierda, contenido a la derecha. Misma mecanica
   que .split, pero cada bloque abre con su numero de orden y cierra con
   la ficha de lo que se entrega. */
.svc{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4.4vw,80px);
  align-items:start;
  border-top:1px solid var(--line);
  padding-block:clamp(40px,4.6vw,72px);
}
.svc:last-child{border-bottom:1px solid var(--line);}
.svc-side{position:sticky;top:104px;}
.svc-side .n{
  display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  color:var(--hi-text);margin-bottom:14px;
}
.svc-side h2{font-size:var(--t-xl);max-width:14ch;}
.svc-side img{margin-top:24px;aspect-ratio:4/3;object-fit:cover;width:100%;}
.svc-body > p{color:var(--bone-2);max-width:62ch;}
@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:26px;}
  .svc-side{position:static;}
  .svc-side img{display:none;}
}

/* Ficha de entregables. Dos columnas de listas sin vinetas: la regla fina
   arriba de cada item ya separa, el punto seria ruido. */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);margin-top:clamp(28px,3vw,42px);}
.spec h3{font-size:var(--t-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bone-3);margin-bottom:4px;}
.spec ul{list-style:none;margin:0;padding:0;}
.spec li{
  padding:11px 0;border-top:1px solid var(--line-2);
  font-size:var(--t-sm);color:var(--bone-2);line-height:1.5;
}
@media (max-width:620px){.spec{grid-template-columns:1fr;gap:26px;}}

/* Pie de marco normativo. Va dentro del bloque de servicio, en --ink-2,
   para que se lea como dato de ficha y no como parrafo mas. */
.norm{
  margin-top:clamp(26px,2.8vw,38px);padding:20px 22px;background:var(--ink-2);
  border-left:2px solid var(--hi);
}
.norm .tag{display:block;margin-bottom:8px;}
.norm p{font-size:13.5px;color:var(--bone-2);line-height:1.6;max-width:64ch;}

/* ---- Etapa del proceso, en detalle --------------------------------------
   El riel de arriba resume; esto lo explica. Numero grande a la izquierda,
   sin caja: la cifra sola alcanza como ancla. */
.etapa{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,54px);
  border-top:1px solid var(--line);padding-block:clamp(34px,4vw,60px);
}
.etapa:last-child{border-bottom:1px solid var(--line);}
.etapa-n{
  font-size:clamp(38px,4.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:.9;
  color:var(--hi);opacity:.22;
}
.etapa h2{font-size:var(--t-xl);margin-bottom:14px;max-width:22ch;}
.etapa > div > p{color:var(--bone-2);max-width:62ch;}
@media (max-width:640px){
  .etapa{grid-template-columns:1fr;gap:12px;}
  .etapa-n{font-size:32px;}
}

/* ---- Grilla de datos sueltos (cobertura, plazos, formacion) -------------- */
.facts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  margin-top:clamp(30px,3.4vw,48px);
}
.facts-grid > div{background:var(--ink);padding:clamp(20px,2vw,30px);}
.facts-grid b{display:block;font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;margin-bottom:6px;}
.facts-grid span{display:block;font-size:var(--t-sm);color:var(--bone-2);line-height:1.55;}

/* ---- Banda de cierre ----------------------------------------------------
   Ultimo bloque de cada pagina interna. Manda a contacto sin repetir el
   formulario completo en todas partes. */
.cta{border-top:1px solid var(--line);background:var(--ink-2);padding-block:clamp(56px,6vw,96px);}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(22px,3vw,48px);}
.cta h2{max-width:17ch;}
.cta p{margin-top:14px;color:var(--bone-2);max-width:46ch;font-size:var(--t-sm);}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;}

/* ---- Enlace de avance ---------------------------------------------------
   El "ver todo" al pie de un resumen en la portada. */
.more{
  display:inline-flex;align-items:center;gap:11px;margin-top:clamp(26px,2.8vw,40px);
  font-size:var(--t-sm);font-weight:600;color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--hi);padding-bottom:5px;
  transition:color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.more:hover{color:var(--hi-text);gap:16px;}

/* ---- Preguntas ----------------------------------------------------------
   Sin acordeon: en una pagina de contacto la respuesta tiene que estar a
   la vista, no a un clic. */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);}
.qa > div{border-top:1px solid var(--line-2);padding-block:22px;}
.qa h3{font-size:var(--t-base);font-weight:700;margin-bottom:8px;}
.qa p{font-size:var(--t-sm);color:var(--bone-2);line-height:1.6;max-width:52ch;}
@media (max-width:760px){.qa{grid-template-columns:1fr;}}

/* En paginas internas el titulo de seccion no siempre necesita la regla
   superior: ya la trae el bloque anterior. */
.s-head.bare{border-top:0;padding-top:0;}