/* ============================================================
   J & C Ingeniería y Servicios Generales S.A.C.
   Sistema visual — "acero y plano"
   ============================================================ */

:root{
  /* Color — derivado del azul real del logotipo (#0070BA) */
  --azul:        #0070BA;
  --azul-hondo:  #005382;
  --azul-claro:  #B8D7EC;
  --tinta:       #0C2233;   /* casi-negro con sesgo azul */
  --tinta-2:     #35505F;
  --tinta-3:     #6B8394;
  --niebla:      #F2F6F9;   /* fondo claro, sesgo azul */
  --papel:       #FFFFFF;
  --borde:       #D6E0E8;
  --borde-fuerte:#B9C8D4;
  --minio:       #D4552A;   /* naranja de imprimación anticorrosiva */
  --minio-suave: #F6E5DE;

  --logo-monte:  var(--azul);
  --logo-solape: #005E9C;
  --logo-faceta: #FFFFFF;

  /* diagrama del ciclo */
  --dia-alta-bg: #0C2233;  --dia-alta-tx: #FFFFFF;
  --dia-baja-bg: #2E90D4;  --dia-baja-tx: #FFFFFF;
  --dia-linea:   #6B8394;  --dia-texto:   #35505F;

  --sombra: 0 1px 2px rgba(12,34,51,.06), 0 8px 24px -12px rgba(12,34,51,.18);

  /* Tipografía */
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --texto:   "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ancho: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --azul:        #4BA3E0;
    --azul-hondo:  #8CC6EE;
    --azul-claro:  #B8D7EC;
    --tinta:       #E8F0F6;
    --tinta-2:     #AFC3D1;
    --tinta-3:     #8099AB;
    --niebla:      #0E1C26;
    --papel:       #132634;
    --borde:       #23404F;
    --borde-fuerte:#33566A;
    --minio:       #F3835B;
    --minio-suave: #3A2119;
    --logo-monte:  #B8D7EC;
    --logo-solape: #8CB9D8;
    --logo-faceta: #FFFFFF;
    --dia-alta-bg: #B8D7EC;  --dia-alta-tx: #0C2233;
    --dia-baja-bg: #3C93D2;  --dia-baja-tx: #FFFFFF;
    --dia-linea:   #7D97A8;  --dia-texto:   #AFC3D1;
    --sombra: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --azul:        #4BA3E0;
  --azul-hondo:  #8CC6EE;
  --azul-claro:  #B8D7EC;
  --tinta:       #E8F0F6;
  --tinta-2:     #AFC3D1;
  --tinta-3:     #8099AB;
  --niebla:      #0E1C26;
  --papel:       #132634;
  --borde:       #23404F;
  --borde-fuerte:#33566A;
  --minio:       #F3835B;
  --minio-suave: #3A2119;
  --logo-monte:  #B8D7EC;
  --logo-solape: #8CB9D8;
  --logo-faceta: #FFFFFF;
  --dia-alta-bg: #B8D7EC;  --dia-alta-tx: #0C2233;
  --dia-baja-bg: #3C93D2;  --dia-baja-tx: #FFFFFF;
  --dia-linea:   #7D97A8;  --dia-texto:   #AFC3D1;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme: dark;
}

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

body{
  margin:0;
  background: var(--niebla);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: .005em;
  text-wrap: balance;
  margin: 0;
}
h1{ font-size: clamp(2.25rem, 4.7vw, 3.7rem); text-transform: uppercase; letter-spacing: -.005em; }
h2{ font-size: clamp(1.85rem, 3.6vw, 2.85rem); text-transform: uppercase; }
h3{ font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4{ font-size: 1.12rem; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

/* ---------- utilidades ---------- */
.env{ width:100%; max-width: var(--ancho); margin-inline:auto; padding-inline: var(--gutter); }

.eyebrow{
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 .9rem;
  line-height: 1.5;
}
.eyebrow::before{
  content:""; display:inline-block; vertical-align: middle;
  width: 26px; height: 2px; margin-right:.7rem; margin-bottom:.15em;
  background: var(--minio);
}
.plomo{ color: var(--tinta-2); }
.medida{ max-width: 62ch; }

.seccion{ padding-block: clamp(56px, 7vw, 96px); }
.seccion--papel{ background: var(--papel); }
.seccion--niebla{ background: var(--niebla); }
.seccion--tinta{ background:#0C2233; color:#E8F0F6; }
.seccion--tinta h2, .seccion--tinta h3{ color:#fff; }
.seccion--tinta .plomo{ color:#9FB6C5; }
.seccion--tinta .eyebrow{ color: var(--azul-claro); }

.cab-seccion{
  display:grid; gap: 18px 48px; align-items:end;
  grid-template-columns: minmax(0,1fr);
  margin-bottom: clamp(32px, 4vw, 52px);
}
@media (min-width: 860px){
  .cab-seccion{ grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--texto); font-weight:600; font-size: .93rem;
  padding: .82rem 1.5rem; border-radius: 2px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition: background .18s, color .18s, border-color .18s, transform .18s;
  line-height:1.2;
}
.btn--primario{ background: var(--minio); color:#fff; }
.btn--primario:hover{ background:#B8441F; }
.btn--azul{ background: var(--azul); color:#fff; }
.btn--azul:hover{ background: var(--azul-hondo); }
.btn--linea{ border-color: var(--borde-fuerte); color: var(--tinta); background: transparent; }
.btn--linea:hover{ border-color: var(--azul); color: var(--azul); }
.seccion--tinta .btn--linea{ border-color:#3A5668; color:#E8F0F6; }
.seccion--tinta .btn--linea:hover{ border-color: var(--azul-claro); color: var(--azul-claro); }
.btn--claro{ background:#fff; color:#0C2233; }
.btn--claro:hover{ background: var(--azul-claro); }

/* ---------- barra superior + cabecera ---------- */
.franja{
  background:#0C2233; color:#A9C0CF;
  font-family: var(--mono); font-size: .74rem; letter-spacing:.03em;
}
.franja .env{ display:flex; flex-wrap:wrap; gap: .4rem 1.6rem; align-items:center; padding-block:.55rem; }
.franja a{ color:#D5E4EE; text-decoration:none; }
.franja a:hover{ color:#fff; text-decoration:underline; }
.franja .sep{ color:#42606F; }
.franja .rnp{ margin-left:auto; color: var(--azul-claro); }

.cabecera{
  position: sticky; top:0; z-index: 40;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .env{ display:flex; align-items:center; gap: 1.2rem; padding-block: .7rem; }

.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; flex:none; }
.marca svg{ width: 46px; height: auto; flex:none; }
.marca__nombre{ display:block; font-family: var(--display); font-weight:700; font-size:1.72rem; letter-spacing:.02em; line-height:1; color: var(--tinta); }
.marca__bajada{ display:block; font-family: var(--mono); font-size:.56rem; letter-spacing:.145em; text-transform:uppercase; color: var(--tinta-3); margin-top:3px; }

.nav{ margin-left:auto; display:flex; align-items:center; gap: .15rem; }
.nav a{
  font-size: .9rem; font-weight:500; color: var(--tinta-2); text-decoration:none;
  padding: .55rem .78rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover{ color: var(--tinta); }
.nav a.activo{ color: var(--azul); border-bottom-color: var(--minio); }
.cabecera .btn{ padding: .62rem 1.05rem; font-size:.86rem; }

.menu-btn{
  margin-left:auto; display:none; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--borde-fuerte); border-radius:2px;
  padding:.5rem .8rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--tinta); cursor:pointer;
}
@media (max-width: 1000px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .cabecera__cta{ display:none; }
  .nav.abierto{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background: var(--papel); border-bottom:1px solid var(--borde);
    padding: .5rem var(--gutter) 1.1rem;
    box-shadow: var(--sombra);
  }
  .nav.abierto a{ padding:.8rem 0; border-bottom:1px solid var(--borde); border-left:2px solid transparent; }
  .nav.abierto a.activo{ border-bottom-color: var(--borde); padding-left:.6rem; border-left-color: var(--minio); }
  .nav.abierto .btn{ margin-top:.9rem; }
}

/* ---------- portada ---------- */
.portada{ background: var(--papel); border-bottom:1px solid var(--borde); overflow:hidden; }
.portada .env{
  display:grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0,1fr);
  padding-block: clamp(46px, 6vw, 84px);
  align-items:center;
}
@media (min-width: 940px){
  .portada .env{ grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); }
}
.portada h1 span{ color: var(--azul); }
.portada__bajada{ font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--tinta-2); margin-top:1.35rem; max-width: 54ch; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top: 2rem; }

.lamina{ position:relative; }
.lamina img{ width:100%; height:auto; aspect-ratio: 4/3.05; object-fit: cover; border:1px solid var(--borde); }
/* cajetín — como el bloque de rótulo de un plano */
.cajetin{
  position:absolute; left:-1px; bottom:-1px; background: var(--papel);
  border:1px solid var(--borde-fuerte); border-left:3px solid var(--minio);
  padding:.7rem 1.05rem; max-width: 82%;
}
.cajetin dt{ font-family: var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color: var(--tinta-3); }
.cajetin dd{ margin:2px 0 0; font-family: var(--display); font-weight:600; font-size:1.16rem; text-transform:uppercase; letter-spacing:.01em; color: var(--tinta); }

/* ---------- credenciales ---------- */
.credenciales{ background:#0C2233; color:#DCE9F1; }
.credenciales .env{ display:grid; gap:0; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); }
.cred{ padding: 1.5rem 0 1.6rem; }
@media (min-width: 700px){
  .credenciales .env{ padding-inline: calc(var(--gutter) - 1.7rem); }
  .cred{ padding: 1.6rem 1.7rem; border-left:1px solid #22394A; }
  .cred:first-child{ border-left:0; }
}
.cred dt{ font-family: var(--mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color: var(--azul-claro); }
.cred dd{ margin:.42rem 0 0; font-size:.885rem; line-height:1.5; color:#9FB6C5; }

/* ---------- rejillas ---------- */
.rejilla{ display:grid; gap: 1px; background: var(--borde); border:1px solid var(--borde); }
.rejilla--3{ grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* panel de servicio */
.panel{
  background: var(--papel); padding: 1.7rem 1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:.85rem;
  text-decoration:none; color:inherit; position:relative;
  transition: background .18s;
}
.panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--azul);
  transform: scaleX(1); transform-origin:left; transition: background .18s;
}
.panel:hover{ background: color-mix(in srgb, var(--azul) 5%, var(--papel)); }
.panel:hover::before{ background: var(--minio); }
.panel h3{ color: var(--tinta); }
.panel p{ color: var(--tinta-2); font-size:.93rem; }
.panel__specs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .45rem; }
.panel__specs li{
  font-family: var(--mono); font-size:.665rem; letter-spacing:.055em; text-transform:uppercase;
  color: var(--tinta-2); border:1px solid var(--borde); padding:.2rem .45rem; border-radius:2px;
  background: var(--niebla);
}
.panel__ver{
  margin-top:auto; padding-top:.5rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--azul); display:flex; align-items:center; gap:.4rem;
}
.panel:hover .panel__ver{ color: var(--minio); }
.panel__ver span{ transition: transform .18s; }
.panel:hover .panel__ver span{ transform: translateX(4px); }

/* ---------- sectores ---------- */
.sectores{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.sectores li{
  font-family: var(--mono); font-size:.775rem; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid #2C4658; color:#C6DAE6; padding:.42rem .8rem; border-radius:2px;
}

/* ---------- proyectos ---------- */
.obras{ display:grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); }
.obra{ background: var(--papel); border:1px solid var(--borde); }
.obra__foto{ overflow:hidden; }
.obra img{ width:100%; height:auto; aspect-ratio: 4/2.9; object-fit:cover; transition: transform .5s ease; }
.obra:hover img{ transform: scale(1.045); }
.obra__pie{ padding: 1rem 1.15rem 1.15rem; }
.obra__tipo{ font-family: var(--mono); font-size:.655rem; letter-spacing:.15em; text-transform:uppercase; color: var(--minio); }
.obra h4{ margin:.3rem 0 .3rem; color: var(--tinta); }
.obra p{ font-size:.875rem; color: var(--tinta-2); margin:0; }

/* ---------- listas de alcance ---------- */
.alcance{ list-style:none; margin:0; padding:0; display:grid; gap:.05rem; }
.alcance li{
  padding:.6rem 0 .6rem 1.55rem; border-bottom:1px solid var(--borde); position:relative; font-size:.95rem;
}
.alcance li::before{
  content:""; position:absolute; left:0; top:1.12em; width:8px; height:8px;
  background: var(--azul); transform: rotate(45deg);
}
.seccion--tinta .alcance li{ border-bottom-color:#22394A; }

.dos-col{ display:grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0,1fr); align-items:start; }
@media (min-width: 900px){ .dos-col{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 900px){ .dos-col--ancho-izq{ grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); } }

/* ---------- fichas (visión / misión / política) ---------- */
.fichas{ display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(255px,1fr)); }
.ficha{ background: var(--papel); border:1px solid var(--borde); border-top:3px solid var(--azul); padding:1.5rem 1.4rem; }
.ficha:nth-child(2){ border-top-color: var(--minio); }
.ficha:nth-child(3){ border-top-color: var(--azul-claro); }
.ficha h3{ margin-bottom:.6rem; }
.ficha p{ font-size:.93rem; color: var(--tinta-2); }

/* ---------- llamada ---------- */
.llamada{ background: var(--azul); color:#fff; }
.llamada .env{ display:grid; gap:1.6rem; align-items:center; padding-block: clamp(40px,5vw,62px); }
@media (min-width: 860px){ .llamada .env{ grid-template-columns: minmax(0,1fr) auto; } }
.llamada h2{ color:#fff; }
.llamada p{ color: #D5EAF8; margin-top:.6rem; max-width:56ch; }
.llamada__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ---------- contacto ---------- */
.form{ display:grid; gap:1rem; }
.campo{ display:grid; gap:.35rem; }
.campo label{ font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea{
  font-family: var(--texto); font-size:.95rem; color: var(--tinta);
  background: var(--papel); border:1px solid var(--borde-fuerte); border-radius:2px;
  padding:.72rem .85rem; width:100%;
}
.campo textarea{ min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color: var(--azul); outline:2px solid color-mix(in srgb, var(--azul) 30%, transparent); outline-offset:0; }
.form__fila{ display:grid; gap:1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 620px){ .form__fila{ grid-template-columns: 1fr 1fr; } }
.form__nota{ font-size:.8rem; color: var(--tinta-3); }
.aviso{
  background: var(--minio-suave); border:1px solid var(--minio); border-radius:2px;
  padding:.85rem 1rem; font-size:.88rem; color: var(--tinta);
}

.sedes{ display:grid; gap:1px; background: var(--borde); border:1px solid var(--borde); }
.sede{ background: var(--papel); padding:1.15rem 1.3rem; }
.sede dt{ font-family: var(--display); font-weight:600; font-size:1.25rem; text-transform:uppercase; color: var(--tinta); }
.sede dd{ margin:.25rem 0 0; font-size:.9rem; color: var(--tinta-2); }
.sede dd.mono{ font-family: var(--mono); font-size:.82rem; }

.datos{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.datos li{ display:grid; grid-template-columns: 108px minmax(0,1fr); gap:.8rem; align-items:baseline; padding-bottom:.85rem; border-bottom:1px solid var(--borde); }
.datos dt, .datos .et{ font-family: var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color: var(--tinta-3); }
.datos a{ text-decoration:none; font-weight:500; }
.datos a:hover{ text-decoration:underline; }

/* ---------- pie ---------- */
.pie{ background:#0A1C29; color:#93AAB9; padding-block: clamp(44px,5vw,64px) 0; }
.pie__rejilla{ display:grid; gap: 2.4rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 780px){ .pie__rejilla{ grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); } }
.pie h4{ font-family: var(--mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color: var(--azul-claro); margin-bottom:1rem; font-weight:500; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.pie a{ color:#C2D6E2; text-decoration:none; font-size:.9rem; }
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie .marca__nombre{ color:#fff; }
.pie .marca__bajada{ color:#6C8698; }
.pie__texto{ font-size:.88rem; margin-top:1.1rem; max-width:40ch; color:#8AA2B2; }
.pie__legal{
  margin-top: 2.8rem; border-top:1px solid #16303F; padding-block:1.3rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-family: var(--mono); font-size:.7rem; letter-spacing:.06em; color:#5F7889;
}

/* ---------- whatsapp flotante ---------- */
.wa{
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 54px; height: 54px; border-radius: 50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.45); transition: transform .18s;
}
.wa:hover{ transform: translateY(-2px); }
.wa svg{ width:28px; height:28px; fill:#fff; }

/* ---------- detalle de servicio ---------- */
.miga{ font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--tinta-3); margin-bottom:1rem; }
.miga a{ color: var(--tinta-3); text-decoration:none; }
.miga a:hover{ color: var(--azul); }

.vista[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .obra:hover img{ transform:none; }
}

/* ============================================================
   Componentes técnicos — brochure de refrigeración y clima
   ============================================================ */

/* ---------- franja de rangos de temperatura ---------- */
.rangos{
  display:grid; gap: 1.4rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(165px,1fr));
  margin-top: 1.6rem;
}
.rango__barra{ height:7px; border-radius:1px; }
.rango:nth-child(1) .rango__barra{ background:#0C2233; }
.rango:nth-child(2) .rango__barra{ background:#1C5F96; }
.rango:nth-child(3) .rango__barra{ background:#2E90D4; }
.rango:nth-child(4) .rango__barra{ background:#8FC4E6; }
.rango__valor{
  display:block; font-family: var(--display); font-weight:600;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-top:.6rem; line-height:1.1;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.rango__que{ display:block; font-size:.85rem; color: var(--tinta-2); margin-top:.15rem; }
.seccion--tinta .rango__valor{ color:#fff; }
.seccion--tinta .rango__que{ color:#9FB6C5; }
.seccion--tinta .rango:nth-child(1) .rango__barra{ background:#7FA8C4; }

/* ---------- diagrama del ciclo ---------- */
.ciclo{
  background: var(--papel); border:1px solid var(--borde);
  padding: clamp(18px, 3vw, 34px);
}
.ciclo svg{ width:100%; height:auto; display:block; }
.ciclo__leyenda{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top:1.1rem;
  font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--tinta-2);
}
.ciclo__leyenda span{ display:inline-flex; align-items:center; gap:.5rem; }
.ciclo__leyenda i{ width:22px; height:4px; border-radius:1px; display:inline-block; }

/* ---------- tarjetas de tipo (split, compactos) ---------- */
.tipos{ display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(265px,1fr)); }
.tipo{ background: var(--papel); border:1px solid var(--borde); display:flex; flex-direction:column; }
.tipo__art{
  background: linear-gradient(170deg, color-mix(in srgb, var(--azul) 10%, var(--papel)), var(--papel));
  border-bottom:1px solid var(--borde); padding: 1.4rem;
}
.tipo__art svg{ width:100%; height:auto; max-height:132px; display:block; }
.tipo__cuerpo{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.tipo__etiqueta{ font-family: var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--minio); }
.tipo h3{ font-size:1.32rem; }
.tipo p{ font-size:.9rem; color: var(--tinta-2); margin:0; }
.tipo ul{ list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.42rem; }
.tipo ul li{ position:relative; padding-left:1.05rem; font-size:.855rem; color: var(--tinta-2); }
.tipo ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  background: var(--azul); transform:rotate(45deg);
}

/* ---------- modos de mantenimiento ---------- */
.modos{ display:grid; gap:1px; background: var(--borde); border:1px solid var(--borde); }
@media (min-width: 820px){ .modos{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.modo{ background: var(--papel); padding:1.5rem 1.4rem; }
.modo h3{ margin-bottom:.3rem; }
.modo__cuando{
  font-family: var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--minio); padding-bottom:.9rem; border-bottom:2px solid var(--azul); display:block;
}
.modo ul{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.62rem; }
.modo ul li{ position:relative; padding-left:1.35rem; font-size:.885rem; color: var(--tinta-2); }
.modo ul li::before{
  content:""; position:absolute; left:0; top:.36em; width:11px; height:6px;
  border-left:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform: rotate(-45deg);
}

/* ---------- bloques de alcance técnico (equipos, tuberías...) ---------- */
.bloques{ display:grid; gap:1px; background: var(--borde); border:1px solid var(--borde); }
@media (min-width: 760px){ .bloques{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.bloque{ background: var(--papel); padding:1.35rem 1.4rem; }
.bloque h4{ font-family: var(--texto); font-weight:600; font-size:.98rem; margin-bottom:.85rem; }
.bloque ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.bloque ul li{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.04em;
  border:1px solid var(--borde); background: var(--niebla);
  padding:.3rem .6rem; border-radius:2px; color: var(--tinta-2);
}

/* ---------- nota destacada ---------- */
.nota{
  border-left:3px solid var(--azul); background: var(--niebla);
  padding:1.1rem 1.3rem; font-size:.93rem; color: var(--tinta-2);
}
.nota strong{ color: var(--tinta); }
.seccion--tinta .nota{ background:#122C40; border-left-color: var(--azul-claro); color:#B9CEDC; }
.seccion--tinta .nota strong{ color:#fff; }

/* ---------- pilares / razones ---------- */
.pilares{ display:grid; gap:1px; background: var(--borde); border:1px solid var(--borde); }
@media (min-width: 760px){ .pilares--3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 760px){ .pilares--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1050px){ .pilares--4{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.pilar{ background: var(--papel); padding:1.5rem 1.45rem; border-top:3px solid var(--azul); }
.pilar h3{ font-size:1.28rem; margin-bottom:.5rem; }
.pilar p{ font-size:.9rem; color: var(--tinta-2); margin:0; }
.seccion--tinta .pilar{ background:#122C40; border-top-color: var(--azul-claro); }
.seccion--tinta .pilares{ background:#22394A; border-color:#22394A; }
.seccion--tinta .pilar p{ color:#9FB6C5; }

/* ---------- sectores con descripción ---------- */
.sectores-det{ display:grid; gap:1px; background: var(--borde); border:1px solid var(--borde); }
@media (min-width: 720px){ .sectores-det{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1020px){ .sectores-det{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sector{ background: var(--papel); padding:1.35rem 1.4rem; }
.sector h4{ font-family: var(--texto); font-weight:600; font-size:1rem; margin-bottom:.4rem; color: var(--tinta); }
.sector p{ font-size:.875rem; color: var(--tinta-2); margin:0; }

/* ---------- cita / frase de portada ---------- */
.frase{
  display:grid; gap:1.4rem; align-items:center;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 900px){ .frase{ grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); } }
.frase__titular{ font-family: var(--display); font-size: clamp(1.6rem,3vw,2.2rem); line-height:1.1; text-transform:none; color:#fff; }

/* paneles no enlazados (listados de detalle): sin estado de hover */
div.panel{ cursor:default; }
div.panel:hover{ background: var(--papel); }
div.panel:hover::before{ background: var(--azul); }
div.panel .alcance li:last-child{ border-bottom:0; padding-bottom:0; }

/* grupo de cuatro tipos: 2×2, como en el brochure */
@media (min-width: 760px){ .tipos--2col{ grid-template-columns: repeat(2, minmax(0,1fr)); } }