:root{
    /* Paleta tomada del logo real: escudo dorado sobre negro */
    --gold:#D4A244;
    --gold-bright:#F0C868;
    --gold-deep:#8A6520;      /* dorado legible sobre fondo claro */
    --black:#121212;
    --black-2:#1C1B18;
    --ink:#17150F;
    --ink-2:#57534A;
    --ink-3:#6B6558;
    /* SOLO DOS FONDOS: blanco y negro. No agregar un tercero. */
    --paper:#FFFFFF;
    --rule:#E4DFD5;
    --rule-dark:rgba(240,200,104,.22);
    --wa:#1FA855;
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none!important; transition:none!important}
  }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:Archivo,system-ui,sans-serif; line-height:1.14; margin:0; text-wrap:balance}
  img{max-width:100%; display:block}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  a{color:var(--gold-deep)}
  :focus-visible{outline:3px solid var(--gold); outline-offset:3px}


  /* nav */
  nav{position:sticky; top:0; z-index:30; background:rgba(18,18,18,.96); backdrop-filter:blur(8px)}
  .navin{display:flex; align-items:center; gap:22px; height:74px; max-width:1300px}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
  .brand img{height:46px; width:auto}
  .brand b{font-family:Archivo,system-ui,sans-serif; font-weight:700; color:#fff; font-size:18px; letter-spacing:.02em; white-space:nowrap}
  .brand b i{color:var(--gold); font-style:normal}
  .links{display:flex; gap:15px; margin-left:auto; align-items:center}
  .links a{color:#C9C3B6; text-decoration:none; font-size:14px; font-weight:500}
  .links a:hover{color:var(--gold-bright)}
  .cta-nav{background:var(--gold); color:#1A1408!important; padding:10px 18px; border-radius:2px; font-weight:600; font-size:14.5px}
  .cta-nav:hover{background:var(--gold-bright); color:#1A1408!important}
  @media(max-width:880px){.links a:not(.cta-nav){display:none} .brand b{display:none}}

  /* hero */
  /* La portada es 1600x800 (relacion 2). Se le da al hero la misma relacion
     para que entre completa: con cover y relaciones distintas el navegador
     recorta, y esta imagen tiene contenido de punta a punta. */
  .hero{
    position:relative; background:var(--black); color:#fff; overflow:hidden;
    /* Altura fija en 2:1, la relacion de la portada, para que entre completa.
       Con min-height la caja crecia y la imagen terminaba recortada a los
       costados: se perdia el panel izquierdo. El contenido se ajusta para
       entrar en esta altura, no al reves. */
    aspect-ratio:2 / 1; min-height:520px; display:flex; align-items:center;
  }
  .hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:.95}
  /* Velo mas suave: antes el extremo izquierdo quedaba casi negro */
  .hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(18,18,18,.86) 0%, rgba(18,18,18,.64) 30%, rgba(18,18,18,.26) 60%, rgba(18,18,18,.04) 100%);
  }
  .hero .wrap{position:relative; z-index:2; width:100%; padding-top:40px; padding-bottom:40px}
  /* En pantalla angosta la relacion 2/1 daria una franja muy baja: el alto
     pasa a mandarlo el contenido y el velo se vuelve vertical, porque el
     texto ocupa todo el ancho. */
  @media(max-width:860px){
    .hero{aspect-ratio:auto; min-height:auto; display:block}
    .hero .wrap{padding-top:118px; padding-bottom:56px}
    .hero::after{
      background:linear-gradient(to top, rgba(18,18,18,.94) 0%, rgba(18,18,18,.82) 48%, rgba(18,18,18,.46) 100%);
    }
  }
  .kicker{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 16px}
  .hero h1{font-size:clamp(2.1rem,5.4vw,3.6rem); font-weight:700; letter-spacing:0; max-width:21ch}
  .hero h1 em{color:var(--gold-bright); font-style:normal}
  .hero p{font-size:clamp(1.05rem,2.2vw,1.22rem); color:#D6D0C4; max-width:52ch; margin:20px 0 26px}
  @media(max-width:860px){.hero h1{max-width:100%; font-size:clamp(1.8rem,8vw,2.1rem); overflow-wrap:anywhere}.hero p{max-width:100%}}
  @media(max-width:560px){.hero .wrap{max-width:100%; overflow:hidden}.hero h1{max-width:14ch; font-size:1.65rem; text-wrap:wrap; overflow-wrap:normal}.hero p{max-width:32ch}}
  .ctas{display:flex; flex-wrap:wrap; gap:12px}
  .btn{
    display:inline-block; padding:14px 26px; border-radius:2px; text-decoration:none;
    font-weight:600; font-size:16px; border:1px solid transparent; cursor:pointer;
    font-family:Barlow,sans-serif;
  }
  .btn-primary{background:var(--gold); color:#1A1408}
  .btn-primary:hover{background:var(--gold-bright)}
  .btn-ghost{border-color:rgba(240,200,104,.45); color:var(--gold-bright)}
  .btn-ghost:hover{border-color:var(--gold-bright); background:rgba(240,200,104,.10)}

  /* secciones */
  section{padding:80px 0}
  .shead{max-width:60ch; margin-bottom:44px}
  .shead .kicker{color:var(--gold-deep)}
  .shead h2{font-size:clamp(1.7rem,3.6vw,2.3rem); font-weight:600; color:var(--ink); letter-spacing:0}
  .shead p{color:var(--ink-2); margin:14px 0 0}

  /* Secciones sobre el segundo fondo: el negro de la marca */
  .dark{background:var(--black); color:#E6E1D6}
  .dark .shead .kicker{color:var(--gold)}
  .dark .shead h2{color:#fff}
  .dark .shead p{color:#B8B2A5}

  /* servicios */
  .grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:stretch}
  @media(max-width:1259px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:620px){.grid{grid-template-columns:1fr}}
  .card{
    background:var(--paper); border:1px solid var(--rule); border-radius:3px;
    padding:26px 24px; border-top:3px solid var(--gold);
    transition:box-shadow .18s ease, transform .18s ease;
  }
  .card:hover{box-shadow:0 10px 28px rgba(23,21,15,.09); transform:translateY(-2px)}
  .card h3{font-size:1.16rem; font-weight:600; color:var(--ink); margin-bottom:9px}
  .card p{color:var(--ink-2); font-size:15.5px; margin:0}

  .service-group{
    min-width:0; border:1px solid var(--rule); border-top:3px solid var(--gold);
    padding:28px 25px; background:var(--paper); border-radius:3px;
  }
  .service-icon{width:34px; height:34px; fill:none; stroke:var(--gold-deep); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:22px}
  .service-group h3{font-size:1.22rem; font-weight:600; margin-bottom:10px}
  .service-group p{color:var(--ink-2); font-size:15.5px; margin:0 0 18px}
  .service-group ul{list-style:none; margin:0; padding:0; display:grid; gap:1px}
  .service-group li{border-top:1px solid var(--rule)}
  .service-group a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500}
  .service-group a::after{content:"→"; color:var(--gold-deep)}
  .service-group a:hover{color:var(--gold-deep)}

  /* valores + foto */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
  @media(max-width:880px){.split{grid-template-columns:1fr; gap:34px}}
  .split figure{margin:0; position:relative}
  .split img{border-radius:3px; width:100%; object-fit:cover; aspect-ratio:4/5}
  .split figcaption{
    font-size:13px; color:var(--ink-3); margin-top:10px; font-style:italic;
  }
  .valores{display:grid; gap:28px}
  .valor h3{
    font-size:1.2rem; color:var(--ink); font-weight:600; margin-bottom:9px;
    padding-top:14px; border-top:2px solid var(--gold);
  }
  .valor p{margin:0; color:var(--ink-2); font-size:15.5px}
  .dark .valor h3{color:#fff}
  .dark .valor p{color:#B8B2A5}
  .dark .split figcaption{color:#8B857A}

  /* quienes somos */
  .about-top{display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center}
  .about-top .shead{margin-bottom:24px}
  .about-lead{margin:0; color:#D5CFC3; font-size:1.08rem; max-width:none}
  .about-slider{position:relative; min-width:0}
  .about-slides{position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:3px; background:var(--black-2)}
  .about-slides::after{content:""; position:absolute; inset:0; border:1px solid var(--gold); border-radius:3px; pointer-events:none; z-index:1}
  .about-slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .5s ease; pointer-events:none}
  .about-slide.active{opacity:1; pointer-events:auto}
  .about-slide img{width:100%; height:100%; object-fit:cover}
  .slider-dots{display:flex; justify-content:center; gap:9px; padding-top:16px}
  .slider-dot{width:30px; height:4px; padding:0; border:0; background:#5A554B; cursor:pointer}
  .slider-dot.active{background:var(--gold)}
  .values-head{margin-top:62px; margin-bottom:28px}
  @media(max-width:860px){
    .about-top{grid-template-columns:1fr; gap:34px}
    .values-head{margin-top:46px}
  }

  /* pendiente */
  .pend{border:1.5px dashed var(--rule); border-radius:3px; padding:34px 28px; text-align:center}
  .pend .tag{display:inline-block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin-bottom:10px}
  .pend p{margin:0 auto; color:var(--ink-3); max-width:46ch; font-size:15.5px}
  .dark .pend{border-color:var(--rule-dark)}
  .dark .pend .tag{color:var(--gold)}
  .dark .pend p{color:#8B857A}

  /* carrusel de clientes */
  .marquee{position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .track{display:flex; gap:14px; width:max-content; animation:slide 62s linear infinite}
  .track.rev{animation-direction:reverse; animation-duration:74s}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .logo-tile{
    flex:none; width:186px; height:88px; background:#fff; border:1px solid var(--rule);
    border-radius:3px; display:grid; place-items:center; padding:12px;
  }
  .logo-tile img{max-height:100%; width:auto; object-fit:contain; filter:none; opacity:1; transition:transform .2s}
  .logo-tile:hover img{transform:scale(1.04)}
  .marquee + .marquee{margin-top:14px}
  .cli-stats{display:flex; flex-wrap:wrap; justify-content:center; margin-top:32px; color:var(--ink-2); font-size:15px}
  .cli-stats b{font-family:Archivo,system-ui,sans-serif; color:var(--gold); font-size:1.4rem; font-weight:700; margin-right:7px; font-variant-numeric:tabular-nums}
  .dark .logo-tile{border-color:transparent}
  .dark .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

  /* cotizador */
  .cot{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
  @media(max-width:840px){.cot{grid-template-columns:1fr; gap:32px}}
  fieldset{border:0; margin:0 0 26px; padding:0}
  legend{font-family:Archivo,system-ui,sans-serif; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; padding:0; margin-bottom:14px}
  .checks{display:grid; gap:2px}
  .check{display:flex; align-items:flex-start; gap:11px; padding:11px 13px; cursor:pointer; border:1px solid var(--rule); border-radius:2px; background:#fff; transition:border-color .15s}
  .check:hover{border-color:var(--gold)}
  .check input{margin:3px 0 0; accent-color:var(--gold-deep); width:17px; height:17px; flex:none; cursor:pointer}
  .check span{font-size:15.5px; color:var(--ink)}
  .check:has(input:checked){border-color:var(--gold); background:rgba(212,162,68,.08)}
  .fields{display:grid; grid-template-columns:1fr 1fr; gap:13px}
  @media(max-width:520px){.fields{grid-template-columns:1fr}}
  .f label{display:block; font-size:13px; color:var(--ink-2); font-weight:500; margin-bottom:5px}
  .f input{width:100%; padding:11px 13px; border:1px solid var(--rule); border-radius:2px; font-family:Barlow,sans-serif; font-size:15.5px; color:var(--ink); background:#fff}
  .f input:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(212,162,68,.18)}
  .send{display:flex; flex-wrap:wrap; gap:11px; margin-top:22px}
  .btn-wa{background:var(--wa); color:#fff}
  .btn-wa:hover{filter:brightness(1.08)}
  .btn-mail{background:var(--black); color:#fff}
  .btn-mail:hover{background:var(--black-2)}
  .btn-outline{border-color:var(--gold-deep); color:var(--ink)}
  .btn-outline:hover{border-color:var(--gold); color:var(--gold-deep)}
  .hint{font-size:13.5px; color:var(--ink-3); margin:14px 0 0}
  .err{color:#B5322A; font-size:14px; margin:12px 0 0; min-height:1px}
  .preview{background:var(--black); border-radius:3px; padding:24px 26px; color:#CFC9BC; font-size:14.5px; line-height:1.68; position:sticky; top:96px}
  .preview .lbl{font-family:Archivo,system-ui,sans-serif; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:14px}
  .preview pre{margin:0; white-space:pre-wrap; word-break:break-word; font-family:Barlow,sans-serif; font-size:14.5px; color:#E4DFD3}

  /* footer */
  .foot{background:var(--black); color:#fff; padding:66px 0 30px}
  .fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; align-items:start}
  @media(max-width:760px){.fgrid{grid-template-columns:1fr; gap:28px}}
  .foot h3{font-size:1.05rem; margin-bottom:14px; color:#fff; font-weight:600}
  .foot .kicker{color:var(--gold)}
  .foot p, .foot a, .foot li{color:#B8B2A5; text-decoration:none; font-size:15.5px}
  .foot a:hover{color:var(--gold-bright)}
  .foot .mail-web-link{color:var(--gold-bright); font-weight:600}
  .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
  .copy{border-top:1px solid rgba(255,255,255,.12); margin-top:46px; padding-top:22px; font-size:13.5px; color:#7E786C; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

  /* --- Cotizador sobre fondo negro --- */
  .dark legend{color:var(--gold)}
  .dark .f label{color:#B8B2A5}
  .dark .f input{background:var(--black-2); border-color:var(--rule-dark); color:#F2EFE7}
  .dark .f input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,162,68,.22)}
  .dark .check{background:var(--black-2); border-color:var(--rule-dark)}
  .dark .check span{color:#E6E1D6}
  .dark .check input{accent-color:var(--gold)}
  .dark .check:hover{border-color:var(--gold)}
  .dark .check:has(input:checked){border-color:var(--gold); background:rgba(212,162,68,.13)}
  .dark .hint{color:#8B857A}
  /* el boton negro desaparece sobre negro: pasa a dorado */
  .dark .btn-mail{background:var(--gold); color:#1A1408}
  .dark .btn-mail:hover{background:var(--gold-bright)}
  /* el mensaje sale en blanco, como una hoja sobre el negro */
  .dark .preview{background:var(--paper); color:var(--ink)}
  .dark .preview .lbl{color:var(--gold-deep)}
  .dark .preview pre{color:var(--ink)}

  /* cotizador y footer son los dos negros: hace falta el filete */
  .foot{border-top:1px solid var(--rule-dark)}

  /* contacto y resumen de calidad */
  .contact-quality{border-top:1px solid var(--rule)}
  .contact-quality-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:68px; align-items:start}
  .contact-quality h2{font-size:clamp(1.7rem,3.6vw,2.3rem); font-weight:600; margin-bottom:16px}
  .quality-summary{border-left:3px solid var(--gold); padding:6px 0 8px 28px}
  .quality-link-row{display:flex; align-items:center; gap:18px; margin-top:14px}
  .iram-logo{display:block; flex:0 0 auto; width:48px; max-height:48px; object-fit:contain}
  .quality-link-row .text-link{margin-top:0}
  .quality-summary p:not(.kicker){color:var(--ink-2); max-width:58ch}
  .text-link{display:inline-flex; gap:9px; align-items:center; margin-top:8px; color:var(--gold-deep); font-weight:600; text-decoration:none}
  .text-link:hover{color:var(--ink)}
  .contact-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0}
  .contact-list li{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:13px 0; border-top:1px solid var(--rule)}
  .contact-list span{font-size:13px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
  .contact-list strong,.contact-list a{color:var(--ink); font-weight:500; text-decoration:none; overflow-wrap:anywhere}
  .contact-list a:hover{color:var(--gold-deep)}
  .contact-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:25px}
  @media(max-width:820px){
    .contact-quality-grid{grid-template-columns:1fr; gap:48px}
    .contact-list li{grid-template-columns:1fr; gap:3px}
  }
  @media(max-width:460px){.quality-summary{padding-left:20px}.iram-logo{width:42px; max-height:42px}.quality-link-row{gap:13px}}

  .wa-float{
    position:fixed; right:22px; bottom:22px; z-index:40; width:68px; height:68px;
    display:grid; place-items:center; border-radius:50%; background:var(--wa); color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.24); transition:transform .18s ease, filter .18s ease;
  }
  .wa-float:hover{transform:translateY(-2px); filter:brightness(1.06)}
  .wa-float svg{width:34px; height:34px; fill:currentColor}
  @media(max-width:560px){.wa-float{right:16px; bottom:16px; width:60px; height:60px}}

  /* --- Valores en tres columnas --- */
  .valores.tri{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px}

  /* --- En terreno: bloques alternados imagen / texto --- */
  /* impares: imagen a la derecha. pares: imagen a la izquierda */
  @media(max-width:820px){
  }

  /* --- Referencias de toma: bocetos, NO fotos --- */

  #terreno{padding-bottom:24px}
  #clientes{padding-top:32px; border-top:1px solid var(--rule)}

/* ===== Páginas internas ===== */
/* El encabezado de las internas comparte la clase .hero, asi que heredaba la
   relacion 2:1 y el alto minimo pensados para la portada de la home: quedaban
   720px de alto para un titulo y cuatro botones. Aca el alto lo da el
   contenido. */
.hero-sm{aspect-ratio:auto; min-height:auto; display:block}
.hero-sm .wrap{padding-top:52px; padding-bottom:52px}
.hero-sm h1{font-size:clamp(1.9rem,4.6vw,2.9rem)}
.hero-sm p{margin-bottom:0}

@media(max-width:860px){
  .hero-sm .wrap{padding-top:40px; padding-bottom:40px}
}

.art{display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:start}
@media(max-width:900px){.art{grid-template-columns:1fr; gap:38px}}
.lead{font-size:1.12rem; color:var(--ink-2); max-width:60ch}
.sub{
  font-family:Archivo,system-ui,sans-serif; font-size:1.12rem; font-weight:600; color:var(--ink);
  margin:34px 0 12px; padding-top:14px; border-top:2px solid var(--gold);
}
.prest{list-style:none; margin:0; padding:0; display:grid; gap:2px; max-width:56ch}
.prest li{position:relative; padding:7px 0 7px 20px; color:var(--ink-2); border-bottom:1px dotted var(--rule)}
.prest li:last-child{border-bottom:0}
.prest li::before{content:""; position:absolute; left:0; top:16px; width:6px; height:6px; background:var(--gold); border-radius:50%}
.modal{margin-top:26px; font-size:15px; color:var(--ink-2)}
.modal b{color:var(--ink)}

.side{border:1px solid var(--rule); border-radius:3px; padding:24px; position:sticky; top:96px}
.side h3{font-family:Archivo,system-ui,sans-serif; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin-bottom:14px}
.side ul{list-style:none; margin:0; padding:0; display:grid; gap:1px}
.side li{border-bottom:1px solid var(--rule)}
.side li:last-child{border-bottom:0}
.side a{display:block; padding:10px 0; color:var(--ink); text-decoration:none; font-size:15px}
.side a:hover{color:var(--gold-deep)}
.side ul.plain li{padding:8px 0 8px 18px; position:relative; color:var(--ink-2); font-size:15px}
.side ul.plain li::before{content:""; position:absolute; left:0; top:16px; width:5px; height:5px; background:var(--gold); border-radius:50%}
.side-nota{margin:16px 0 0; font-size:13px; color:var(--ink-3); line-height:1.5}
@media(max-width:900px){.side{position:static}}

.service-brand{aspect-ratio:4/5; display:grid; place-items:center; padding:48px; background:transparent}
.service-brand img{width:min(210px,82%); height:auto}
@media(max-width:900px){
}

.quality-page{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:stretch}
.quality-page .shead{margin-bottom:24px}
.quality-page p{color:var(--ink-2); max-width:74ch}
.quality-document{padding-top:24px}
.quality-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:start}
.quality-policy{min-width:0; padding:0 32px}
.quality-document-head{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px}
.quality-document-head .kicker{color:var(--gold-deep); margin:8px 0 0}
.quality-document-head h2{font-size:clamp(1.5rem,3vw,2rem); color:var(--ink)}
.quality-policy-copy{color:var(--ink-2)}
.quality-policy-copy p{margin:0 0 20px}
.quality-policy-signoff{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:30px; padding-top:20px; border-top:1px solid var(--rule)}
.quality-policy-signoff p{margin:0; color:var(--ink-3); font-size:15px}
.quality-signature{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.quality-signature img{display:block; width:104px; height:92px; object-fit:contain; filter:contrast(1.5) saturate(1.45) drop-shadow(0 0 .65px #252044)}
.quality-signature p{color:var(--ink)!important; font-weight:600; line-height:1.45}
.quality-signature p span{color:var(--ink-3); font-weight:400}
@media(max-width:700px){
  .quality-document-head{align-items:start; flex-direction:column}
}
@media(max-width:900px){.quality-layout{grid-template-columns:1fr; gap:54px}.quality-policy{padding:0}}
.quality-copy{align-self:center}
.quality-principles{position:relative; overflow:hidden; background:var(--paper); color:var(--ink); padding:10px 0 10px 34px; border-left:2px solid var(--gold)}
.quality-principles .kicker{position:relative; z-index:1; color:var(--gold-deep); margin-bottom:12px}
.quality-principles p{color:var(--ink-2)}
/* el logo entra entero: antes salia del recuadro por las coordenadas
   negativas y el overflow:hidden del contenedor lo cortaba */
.quality-watermark{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:clamp(120px, 22%, 168px); height:auto; opacity:.05; pointer-events:none;
}
.quality-point{position:relative; z-index:1; padding:18px 0; border-top:1px solid var(--rule)}
.quality-point h3{font-size:1.05rem; color:var(--ink); margin-bottom:5px}
.quality-point p{font-size:15px; line-height:1.5; margin:0}
@media(max-width:820px){
  .quality-page{grid-template-columns:1fr; gap:38px}
  .quality-principles{padding-left:24px}
}

.loading{color:var(--ink-3); margin:0}

/* ===== Entrada de las imágenes al scrollear =====
   Cada bloque entra desde el lado contrario al que ocupa. */
@media(prefers-reduced-motion:reduce){
}
@media(max-width:820px){
}

/* la tarjeta de servicio ahora es un enlace */
a.card{text-decoration:none; display:block}
.card-mas{
  display:inline-block; margin-top:14px; font-family:Archivo,system-ui,sans-serif; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold-deep); font-weight:600;
}
a.card:hover .card-mas{color:var(--ink)}
a.card:hover h3{color:var(--gold-deep)}

/* pasos de la postulación */
.pasos{margin:0; padding:0 0 0 20px; display:grid; gap:9px; counter-reset:paso; list-style:none}
.pasos li{position:relative; color:var(--ink-2); font-size:15.5px; padding-left:16px}
.pasos li::before{
  counter-increment:paso; content:counter(paso);
  position:absolute; left:-20px; top:1px; width:22px; height:22px; border-radius:50%;
  background:var(--gold); color:#1A1408; font-family:Archivo,system-ui,sans-serif; font-weight:700;
  font-size:12px; display:grid; place-items:center;
}
.pasos b{color:var(--ink)}
.nota-cv{
  margin:16px 0 0; padding:12px 14px; border-left:2px solid var(--gold);
  font-size:14px; color:var(--ink-3); background:rgba(212,162,68,.06);
}

/* valores encuadrados */
.valores.tri .valor{
  border:1px solid var(--rule); border-top:3px solid var(--gold);
  border-radius:3px; padding:26px 24px;
}
.valores.tri .valor h3{border-top:0; padding-top:0; margin-bottom:11px}
.dark .valores.tri .valor{border-color:var(--rule-dark); border-top-color:var(--gold)}

.dir{margin-top:10px!important; font-size:14.5px}


/* ===== Landings por familia (Seguridad / Maestranza y mantenimiento / Obras)
   Cada bloque es un servicio: texto a la izquierda, fotos a la derecha. ===== */
.serv-indice{margin-top:26px}
.serv-indice ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.serv-indice a{
  display:inline-block; padding:7px 14px; border:1px solid rgba(240,200,104,.34);
  border-radius:2px; color:var(--gold-bright); text-decoration:none; font-size:14px; font-weight:500;
}
.serv-indice a:hover{background:rgba(240,200,104,.10); border-color:var(--gold-bright)}

.serv-bloque{display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; padding:4px 0}
.serv-sep{border-top:1px solid var(--rule); margin-top:38px; padding-top:38px}
.serv-txt{min-width:0}
.serv-txt h2{font-size:clamp(1.5rem,3vw,1.95rem); color:var(--ink); font-weight:600; letter-spacing:-.01em}
.serv-claim{
  font-family:Archivo,system-ui,sans-serif; font-size:1.02rem; font-weight:600; color:var(--gold-deep);
  margin:8px 0 20px; padding-bottom:14px; border-bottom:2px solid var(--gold);
  display:inline-block;
}
.serv-cta{margin-top:26px}

/* Una columna, todas del mismo ancho, una debajo de la otra.
   Sin aspect-ratio ni object-fit: cada foto se muestra en su proporcion
   real, asi que ninguna se recorta y da igual si viene vertical u
   horizontal. */
.serv-fotos{display:grid; gap:14px}
.serv-fotos figure{margin:0}
.serv-fotos img{width:100%; height:auto; display:block; border-radius:3px}
/* Tres fotos: la primera a todo el ancho como principal, las otras dos
   debajo en dos columnas. Sin recortes: cada una sigue en su proporcion. */
.serv-n3{grid-template-columns:1fr 1fr}
.serv-n3 figure:first-child{grid-column:1 / -1}

.serv-reserva{
  display:grid; place-items:center; gap:14px; text-align:center;
  aspect-ratio:4/3; border:1.5px dashed var(--rule); border-radius:3px; padding:24px;
}
.serv-reserva img{width:96px; height:auto; opacity:.5}
.serv-reserva span{font-size:13.5px; color:var(--ink-3); max-width:26ch; line-height:1.5}

.otras-fam{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px}
.otras-fam .kicker{margin:0; color:var(--gold)}
.otras-fam ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px}
.otras-fam a{
  display:inline-block; padding:10px 18px; border:1px solid rgba(240,200,104,.34);
  border-radius:2px; color:var(--gold-bright); text-decoration:none; font-weight:500;
}
.otras-fam a:hover{background:rgba(240,200,104,.10); border-color:var(--gold-bright)}

@media(max-width:900px){
  .serv-bloque{grid-template-columns:1fr; gap:28px}
  .serv-fotos{position:static}
  .serv-sep{margin-top:30px; padding-top:30px}
}

/* la tarjeta de familia es un enlace entero */
/* columna flexible: la descripcion se estira y el filete con el boton
   queda a la misma altura en las tres tarjetas, sin importar cuantas
   lineas ocupe cada texto */
a.service-group{text-decoration:none; display:flex; flex-direction:column; height:100%}
a.service-group p{flex:1 1 auto}
.service-mas{margin-top:auto}
a.service-group:hover h3{color:var(--gold-deep)}
a.service-group:hover .service-icon{transform:translateY(-2px)}
.service-icon{transition:transform .18s ease}
.service-mas{
  display:inline-block; margin-top:18px; padding-top:16px; border-top:1px solid var(--rule);
  width:100%; font-family:Archivo,system-ui,sans-serif; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:600;
}
a.service-group:hover .service-mas{color:var(--ink)}

/* Ajustes solicitados para el segundo ciclo de servicios. */
.social-nav{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border:1px solid rgba(240,200,104,.35); border-radius:50%; color:var(--gold-bright)!important;
}

.quality-vmv{border-left:1px solid var(--rule); padding:0 32px}
.quality-vmv .shead{margin-bottom:28px}
.quality-vmv .shead h2{color:var(--ink); font-size:clamp(1.5rem,3vw,2rem); margin-bottom:8px}
.quality-vmv .shead .kicker{margin:0}
.quality-vmv-grid{display:grid; gap:22px}
.quality-vmv-grid>div{border-top:2px solid var(--gold); padding-top:16px}
.quality-vmv-grid h3{font-size:1.15rem; color:var(--ink); margin-bottom:9px}
.quality-vmv-grid p{margin:0; color:var(--ink-2); font-size:15.5px}
.quality-certificate{margin:32px 0 0; padding-top:24px; border-top:1px solid var(--rule)}
.quality-certificate img{display:block; width:min(100%,390px); height:auto; border:1px solid var(--gold); border-radius:3px; box-shadow:0 8px 24px rgba(23,21,15,.1)}
.quality-certificate figcaption{margin-top:9px; color:var(--ink-3); font-size:14px}
@media(max-width:900px){.quality-vmv{border-left:0; border-top:1px solid var(--rule); padding:38px 0 0}}
.social-nav svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.linkedin-nav svg{fill:currentColor; stroke:none}
.social-nav:not(.is-pending):hover{background:rgba(240,200,104,.12); border-color:var(--gold-bright)}
.social-nav.is-pending{display:none}

.service-group{
  display:flex!important; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; min-height:330px; padding:30px 24px;
  background:var(--gold); border-color:var(--gold); border-top-color:var(--gold-bright); color:#1A1408;
  transition:box-shadow .18s ease, background .18s ease;
}
.service-group:hover{background:var(--gold-bright); box-shadow:0 10px 28px rgba(23,21,15,.18)}
.service-icon{
  display:block; flex:0 0 auto; width:58px; height:58px; margin:0 0 17px; padding:13px; border:3px solid #fff; stroke:#fff;
  border-radius:50%; transition:transform .18s ease, background .18s ease;
}
.service-group h3,.serv-txt h2{font-family:Archivo,system-ui,sans-serif; font-weight:700; letter-spacing:0}
.service-group h3{display:flex; align-items:flex-start; justify-content:center; min-height:3.42em; font-size:1.5rem; font-weight:700; margin-bottom:10px; color:#1A1408; -webkit-text-stroke:0}
.service-group p{max-width:28ch; margin:0 auto 16px; color:#3A2B0E; line-height:1.48}
.service-group .service-mas{
  display:inline-flex; align-items:center; justify-content:center; width:auto; margin-top:auto; padding:9px 13px;
  border:1px solid #fff; border-radius:2px; color:#fff; transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.service-group:hover .service-icon{transform:scale(1.05); background:rgba(255,255,255,.14)}
.service-group:hover .service-mas{transform:scale(1.035); border-color:#fff; background:rgba(255,255,255,.14)}

/* Cada servicio se lee sobre un fondo fotográfico leve y su galería queda
   visible mientras se recorre el bloque. */
.serv-bloque{
  position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,680px);
  align-items:center; min-height:540px; padding:58px; border:1px solid rgba(240,200,104,.34); background:var(--black);
}
.service-landing{padding:0; background:var(--black)}
.service-stack{width:100%}
.serv-bloque::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(18,18,18,.42),rgba(18,18,18,.32) 52%,rgba(18,18,18,.10))}
/* Seguridad patrimonial y Seguridad para eventos conservan el velo anterior:
   sus imagenes se van a revisar aparte. */
#seguridad-patrimonial.serv-bloque::before,
#seguridad-eventos.serv-bloque::before{background:linear-gradient(90deg,rgba(18,18,18,.56),rgba(18,18,18,.42) 52%,rgba(18,18,18,.20))}
.serv-sep{margin-top:0; padding-top:58px; border-top:1px solid rgba(240,200,104,.34)}
.serv-txt{position:relative; z-index:1}
.serv-txt h2{font-size:clamp(2rem,4vw,2.7rem); color:#fff}
.serv-claim{color:var(--gold-bright); border-color:var(--gold);}
.serv-txt .lead,.serv-txt p:not(.serv-claim):not(.serv-cta),.serv-txt .modal{color:#E6E1D6}
.serv-txt .sub,.serv-txt .modal b{color:#fff; border-color:var(--gold)}
.serv-txt .modal{font-family:Archivo,system-ui,sans-serif; font-size:1rem; font-weight:600}
.serv-items{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:8px; max-width:60ch}
.serv-items li{position:relative; padding-left:22px; color:#E6E1D6; font-size:16px; line-height:1.45}
.serv-items li::before{content:"★"; position:absolute; left:0; top:0; color:var(--gold-bright); font-size:13px; line-height:1.75}
.serv-fotos{
  position:absolute; inset:0; z-index:-2; display:block; overflow:hidden; background:var(--black-2);
}
.serv-fotos figure{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s ease; pointer-events:none}
.serv-fotos figure.active{opacity:1; pointer-events:auto}
.serv-fotos img{width:100%; height:100%; object-fit:cover; border-radius:0}
.serv-fotos figure.portrait img{object-fit:contain; object-position:78% center; background:var(--black-2)}
.serv-dots{position:absolute; z-index:2; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:7px}
.serv-dot{width:26px; height:4px; padding:0; border:0; background:rgba(255,255,255,.48); cursor:pointer}
.serv-dot.active{background:var(--gold-bright)}
.serv-reserva{height:100%; border:0; background:rgba(18,18,18,.9)}
.serv-reserva span{display:none}

@media(max-width:1030px){
  .links{gap:15px}
  .links a{font-size:14px}
}
@media(max-width:900px){
  .serv-bloque{min-height:0; padding:42px 30px}
  .serv-fotos figure.portrait img{object-position:center center}
}
@media(min-width:1260px){
  #servicios .wrap{max-width:1360px}
  .service-group{aspect-ratio:auto; min-height:360px; padding:24px 20px}
  .service-icon{width:66px; height:66px; margin-bottom:13px; padding:11px}
}
@media(max-width:880px){
  .links .social-nav{display:grid!important}
  .links{gap:10px}
}
@media(max-width:560px){
  .navin{height:68px; gap:8px; padding:0 16px}
  .links{margin-left:auto; gap:7px}
  .cta-nav{padding:9px 10px; font-size:13px!important}
  .social-nav{width:28px; height:28px}
  .serv-bloque{padding:38px 20px}
}
@media(max-width:420px){
  .cta-nav{font-size:0!important}
  .cta-nav::after{content:"Cotizar"; font-size:13px}
}

/* crédito del estudio, en el pie */
.creado{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:#7E786C; font-size:13px; transition:color .18s ease;
}
.creado img{width:18px; height:18px; border-radius:4px; opacity:.75; transition:opacity .18s ease}
.creado b{font-weight:600; color:#8E8779}
.creado:hover{color:var(--gold-bright)}
.creado:hover img{opacity:1}
.creado:hover b{color:var(--gold-bright)}

/* Textos justificados, pedido de Ventas: Quienes somos, el cuadro de
   Calidad garantizada de la home y la landing de Calidad. Sin particion
   silabica: las palabras nunca se cortan con guion al final del renglon.
   Para compensar, esos bloques tienen mas ancho, asi el espacio sobrante
   se reparte entre mas palabras. En pantallas angostas vuelven a la
   izquierda, donde el justificado abriria huecos grandes. */
.about-top > div > p,
.quality-summary p:not(.kicker),
.quality-policy-copy p,
.quality-vmv-grid p{
  text-align:justify; -webkit-hyphens:manual; hyphens:manual;
  overflow-wrap:normal; word-break:normal; text-wrap:pretty;
}
@media(max-width:700px){
  .about-top > div > p,
  .quality-summary p:not(.kicker),
  .quality-policy-copy p,
  .quality-vmv-grid p{
    text-align:left; -webkit-hyphens:manual; hyphens:manual;
  }
}