/* GROUPPIPE® · Sitio Hostinger 2.1 · hoja de estilos del diseño nuevo (06.11.2026)
   Sale de la maqueta 1.8 (Dirección A con la identidad actual, aprobada por Silvi) y del listado 1.6.
   Se carga después de Bootstrap y de css/styles-mod.css, desde navbar.php. Lato en todo: Black (900) en títulos. */

:root {
  --paper: #ffffff;
  --panel: #f2f2f0;
  --ink: #000000;
  --ink-2: #4d4d4d;
  --night-2: #b8b8b8;   /* texto secundario sobre negro */
  --rule: #d9d9d6;
  --red: #e11b22;       /* acciones; el #FF0000 queda solo en el logo */
  --red-dark: #b5121a;
  --agua: #1f6fd9;
  --max: 1320px;
  --gut: 24px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Lato", Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.55;
  font-variant-numeric: lining-nums;
}
:focus-visible { outline: 2px solid var(--agua); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

.h-xl { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; }
.h-l { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; }
.h-s { font-size: 20px; line-height: 1.25; }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.muted { color: var(--ink-2); }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--red); }

/* ---------- Botones (mismo radio que hoy) ---------- */
.btn-red, .btn-line, .btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 4px; font: 900 16px/1 "Lato", sans-serif; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-white { border-color: #fff; color: #fff; background: transparent; }
.btn-white:hover { background: #fff; color: var(--ink); }
.btn-red.btn-xs, .btn-line.btn-xs, .btn-white.btn-xs { height: 32px; padding: 0 14px; font-size: 14px; }

/* ---------- Cabecera: barra superior + la botonera de hoy ---------- */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top-izq { display: flex; align-items: center; gap: 20px; }
.login { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.login:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.top-der { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.top-der a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.top-der a:hover { text-decoration: underline; }
.idioma { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.idioma a { color: var(--ink-2); font-weight: 400; }
.idioma span[aria-current] { color: var(--ink); }
.idioma i { width: 1px; height: 14px; background: var(--rule); }

.barra { background: var(--paper); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--rule); }
.barra .wrap { height: 72px; display: flex; align-items: center; gap: 24px; }
.botonera { display: flex; align-items: center; gap: 26px; font-weight: 700; font-size: 16px; }
.botonera a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.botonera a:hover, .botonera a[aria-current] { border-bottom-color: var(--ink); }
/* Sitio GPi 2027: la casa sin el círculo negro (Silvi, 07.11), negra como el menú y con la misma raya debajo cuando se está en la portada */
.casa { display: grid; place-items: center; color: var(--ink); padding: 6px 0 !important; border: 0 !important; border-bottom: 2px solid transparent !important; }
.casa:hover, .casa[aria-current] { border-bottom-color: var(--ink) !important; }
.barra .logo { margin-left: auto; }
.barra .logo img { width: 190px; height: auto; }
.cel-tools { display: none; }
.botonera .solo-cel { display: none; }
.menu-btn { display: none; }

/* ---------- Banner negro (portada) ---------- */
.negro { background: var(--ink); color: #fff; }
.portada .wrap { display: grid; grid-template-columns: 6fr 6fr; gap: 40px; align-items: center; min-height: 440px; }
.portada .mundo { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.portada .mundo img { width: 100%; max-width: 520px; max-height: 440px; object-fit: contain; object-position: right center; }
.portada h1 .grande { display: block; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.04; }
.portada h1 .sub { display: block; margin-top: 16px; font-size: 19px; font-weight: 400; color: var(--night-2); letter-spacing: 0; }
.portada .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Banner negro de sección (uno por botón) ----------
   Los 9 mundos son cuadrados de 460 px con la bola centrada y del mismo tamaño:
   en todas las páginas quedan en el mismo lugar y con la misma medida. */
.banda .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; height: 230px; }
.banda .mundo { height: 230px; display: flex; align-items: center; justify-content: flex-end; }
.banda .mundo img { width: 210px; height: 210px; }
.banda .migas { font-size: 14px; color: var(--night-2); margin: 0 0 10px; }
.banda .migas a { text-decoration: none; }
.banda .migas a:hover { text-decoration: underline; color: #fff; }
.banda .frase { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; }
.banda .bajada { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--night-2); max-width: 34em; }

/* ---------- Portada: los productos enseguida, por importancia ----------
   Fila 1: las dos tuberías (primero la sólida). Fila 2: los accesorios y la planta en números. */
.productos { padding: 32px 0 0; }
.fila-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; margin-top: 16px; }
.card { border: 1px solid var(--rule); display: flex; flex-direction: column; text-decoration: none; background: var(--paper); }
.card h2 { background: var(--ink); color: #fff; font-size: 19px; line-height: 1.2; text-align: center; padding: 14px 12px; min-height: 52px; display: grid; place-items: center; }
.card h2 a { text-decoration: none; }
.card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card img { aspect-ratio: 3 / 2; object-fit: contain; width: 100%; padding: 8px 16px 0; }
.card p { margin: 0; padding: 4px 18px 0; font-size: 16px; color: var(--ink-2); }
.card .ir { margin-top: auto; padding: 14px 18px 18px; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
a.card:hover, .tubo:hover { border-color: var(--ink); }
a.card:hover .ir, .card .ir:hover { color: var(--red); }

/* Tarjeta grande de tubería: foto + las líneas principales con su color real */
.tubo h2 { font-size: 23px; min-height: 60px; }
.tubo .cuerpo { flex: 1; display: grid; grid-template-columns: 4fr 7fr; gap: 20px; padding: 20px 22px 22px 14px; align-items: center; }
.tubo .foto img { padding: 0; }
.tubo .txt p { padding: 0; margin: 0 0 14px; }
.tubo .ir { display: inline-block; padding: 14px 0 0; }
/* subgrid: las tres columnas (color, nombre, uso) quedan alineadas en todas las filas */
.lineas { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 40px auto 1fr; column-gap: 12px; row-gap: 7px; font-size: 15px; }
.lineas li, .lineas a { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.lineas a { text-decoration: none; }
.lineas b { font-weight: 900; }
.lineas span { color: var(--ink-2); }
.lineas a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Muestra de color (1.8): un caño chiquito visto de costado, con la boca a la derecha,
   el color y la franja reales de cada tubería. --c caño · --l franja · --b borde (caño blanco). */
.mu { --c: #1b1b1b; --l: transparent; --h: 12px; position: relative; display: block; width: 34px; height: var(--h); margin-right: calc(var(--h) * .3);
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0, rgba(255,255,255,.06) 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%), var(--c);
  border-radius: 2px 0 0 2px / 50% 0 0 50%; box-shadow: inset 0 0 0 1px var(--b, transparent); }
.mu::after { content: ""; position: absolute; left: 3px; right: 2px; top: 28%; height: 2px; background: var(--l); }
.mu::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: calc(var(--h) * -.3); width: calc(var(--h) * .6); border-radius: 50%;
  background: radial-gradient(closest-side, #050505 0 56%, transparent 64%), color-mix(in srgb, var(--c) 70%, #fff);
  box-shadow: inset 0 0 0 1px var(--b, rgba(0,0,0,.28)); }
.mu.corr { background: linear-gradient(180deg, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%), repeating-linear-gradient(90deg, #1b1b1b 0 3px, #5e5e5e 3px 4px); }

/* La planta en números, al lado de los accesorios */
.planta { background: var(--panel); padding: 22px 26px 24px; display: flex; flex-direction: column; }
.planta h2 { font-size: 19px; }
.cifras { flex: 1; display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 18px; }
.cifra { padding: 18px 16px 18px 0; border-top: 1px solid var(--rule); }
.cifra:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule); }
.cifra strong { display: block; font-size: clamp(26px, 2.3vw, 34px); font-weight: 900; line-height: 1.1; white-space: nowrap; }
.cifra span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }

.sec { padding: 88px 0; }
.sec-head { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: end; margin-bottom: 40px; }
.sec-head p { margin: 0; color: var(--ink-2); max-width: 36em; }

.apps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.app { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--rule); text-decoration: none; display: grid; gap: 6px; align-content: start; }
.app:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--rule); }
.app p { margin: 0; color: var(--ink-2); font-size: 16px; }
.app .mu { --h: 16px; width: 46px; margin-bottom: 8px; }
.app .mu::after { left: 4px; top: 26%; height: 3px; }
.app .prods { font-weight: 700; font-size: 15px; margin-top: 6px; }
.app .rango { font-size: 15px; color: var(--ink-2); }
.app:hover h3 { text-decoration: underline; text-underline-offset: 5px; }

.obras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.obra figure { margin: 0; }
.obra img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.obra h3 { font-size: 19px; margin: 16px 0 10px; }
.datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 15px; border-top: 1px solid var(--rule); padding-top: 10px; }
.datos dt { color: var(--ink-2); }
.datos dd { margin: 0; }

.normas { background: var(--panel); }
.normas .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.sellos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sellos div { background: var(--paper); height: 92px; display: grid; place-items: center; padding: 12px; }
.sellos img { max-height: 56px; max-width: 86%; width: auto; filter: grayscale(1); }

/* Banner negro de cierre. Sitio 2.3: la foto ocupa la mitad izquierda, a sangre, con los caños entrando desde el borde */
.sec.cierre { position: relative; overflow: hidden; padding: 0; }
.cierre .cierre-foto { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.cierre .cierre-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.cierre .wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; align-items: center; }
.cierre .cierre-txt { grid-column: 2; padding: 88px 0 88px 48px; }
.cierre h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; }
.cierre p { color: var(--night-2); margin: 16px 0 28px; max-width: 32em; }
.cierre .acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--rule); padding: 48px 0 28px; font-size: 15px; }
.pie-grid { display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; gap: 28px; }
.pie h4 { margin: 0 0 10px; font-size: 15px; font-weight: 900; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; color: var(--ink); }
.news input { width: 100%; height: 42px; border: 1px solid var(--rule); padding: 0 12px; font: inherit; font-size: 15px; margin-bottom: 8px; }
.pie .legal { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; }
.pie .legal span:first-child { margin-right: auto; }
.pie .firma { margin: 40px 0 0; font-size: 16px; font-weight: 300; letter-spacing: .02em; color: var(--ink-2); }
.pie .firma + .legal { margin-top: 12px; }

/* ---------- Ficha ---------- */
.ficha-top { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 32px 0 64px; align-items: start; }
.galeria .principal { border: 1px solid var(--rule); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.galeria .principal img { width: 86%; }
.variantes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.variantes button { background: var(--paper); border: 1px solid var(--rule); padding: 8px 8px 12px; cursor: pointer; font: inherit; font-size: 14px; text-align: left; color: var(--ink); }
.variantes button img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 6px; }
.variantes button[aria-pressed="true"] { border-color: #8c8c88; } /* el mismo filete de 1 px que los demás recuadros (Silvi, 07.11); solo cambia el tono */
.ficha-info h1 { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.04; }
.ficha-info .uso { font-size: 20px; color: var(--ink-2); margin: 10px 0 26px; }
.clave { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); margin: 0 0 26px; }
.clave div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.clave div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
.clave dt { font-size: 14px; color: var(--ink-2); }
.clave dd { margin: 4px 0 0; font-size: 20px; font-weight: 900; line-height: 1.25; }
.ficha-info .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agregar { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; font: 700 15px "Lato", sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; color: var(--ink); }
.agregar:hover { color: var(--red); }
.ficha-info .resp { font-size: 14px; color: var(--ink-2); margin-top: 16px; }

.subnav { position: sticky; top: 72px; z-index: 10; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.subnav .wrap { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex-shrink: 0; text-decoration: none; font-size: 15px; font-weight: 700; padding: 15px 0 13px; border-bottom: 2px solid transparent; }
.subnav a:hover { border-bottom-color: var(--ink); }
.bloque { padding: 64px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 140px; }
.bloque-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; }
.bloque h2 { font-size: 30px; line-height: 1.12; }
.bloque .intro { color: var(--ink-2); margin: 14px 0 0; font-size: 16px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); }
.tabla th { width: 34%; font-weight: 400; color: var(--ink-2); }
.tabla tr:first-child th, .tabla tr:first-child td { border-top: 2px solid var(--ink); }
.lista-simple { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.lista-simple li { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.lista-simple li b { display: block; font-weight: 900; }
.dos-col { columns: 2; column-gap: 40px; }
.dos-col li { break-inside: avoid; }
.obras-ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.obras-ficha figure { margin: 0; }
.obras-ficha img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block; height: auto; }
.obras-ficha h3 { font-size: 17px; margin: 12px 0 2px; }
.obras-ficha p { margin: 0; font-size: 15px; color: var(--ink-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 17px 40px 17px 0; position: relative; font-size: 18px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 26px; font-weight: 300; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--ink-2); max-width: 40em; }
.descargas { border-top: 2px solid var(--ink); }
.descarga { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.descarga b { font-weight: 700; }
.descarga:hover b { text-decoration: underline; }
.descarga span { color: var(--ink-2); font-size: 15px; }

.barra-cel { display: none; }
.aviso { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 14px 20px; font-size: 15px; opacity: 0; transition: opacity .2s, transform .2s; z-index: 40; pointer-events: none; }
.aviso.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso a { color: #fff; font-weight: 700; margin-left: 14px; text-underline-offset: 3px; }

/* ---------- La ® siempre igual (1.8): en superíndice, a la mitad del tamaño del texto y sin mover el renglón ---------- */
sup.r { font-size: .5em; font-weight: 400; line-height: 0; vertical-align: baseline; position: relative; top: -.8em; margin-left: .04em; letter-spacing: 0; }

/* ---------- Páginas de sección: título y presentación debajo del banner (1.8) ---------- */
.intro-pag { padding: 56px 0 0; }
.intro-pag .sec-head { margin-bottom: 40px; align-items: start; }
.intro-pag h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }

/* ---------- Servicios: la obra de punta a punta, dibujada como una tubería con sus uniones ---------- */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.etapas::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: var(--ink); border-radius: 2px; }
.etapa { position: relative; padding: 36px 24px 0 0; }
.etapa::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-sizing: border-box; }
.etapa .n { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.etapa h2 { font-size: 22px; line-height: 1.2; margin: 2px 0 8px; }
.etapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.etapa a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.etapa a:hover { text-decoration-color: currentColor; color: var(--red); }

.destacado { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--rule); margin-top: 72px; scroll-margin-top: 96px; }
.destacado img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.destacado .txt { padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.destacado h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; }
.destacado h2 .h2-sub { display: block; margin-top: 8px; font-size: .55em; font-weight: 400; line-height: 1.2; }   /* «Capacitación» y abajo «Academia GROUPPIPE®» (Silvi, 09.11) */
.destacado p { margin: 0; color: var(--ink-2); }
.destacado .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.servs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.serv { display: flex; flex-direction: column; border: 1px solid var(--rule); scroll-margin-top: 96px; }
.serv:hover { border-color: var(--ink); }
.serv > img, .serv .tipo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.serv .tipo { background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; }
.serv .tipo b { font-size: clamp(24px, 2.1vw, 30px); font-weight: 900; line-height: 1.12; }
.serv .tipo span { color: var(--night-2); font-size: 15px; margin-top: 8px; }
.serv .cuerpo { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.serv h3 { font-size: 21px; line-height: 1.2; }
.serv p { margin: 0; color: var(--ink-2); font-size: 16px; }
.serv ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; border-top: 1px solid var(--rule); }
.serv li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.serv .ir { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.serv .ir:hover { color: var(--red); }
.estado { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 3px 8px; border: 1px solid currentColor; border-radius: 3px; }

/* Página de un servicio (plantilla: Servicio de fusión) */
.serv-top { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 32px 0 64px; align-items: start; }
.serv-top .foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.serv-top h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; }
.serv-top .uso { font-size: 20px; color: var(--ink-2); margin: 10px 0 26px; }
.serv-top .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; border-top: 2px solid var(--ink); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 48px 1fr; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.pasos li::before { content: counter(paso, decimal-leading-zero); grid-row: span 2; font-size: 20px; font-weight: 900; line-height: 1.3; }
.pasos b { font-size: 18px; font-weight: 900; }
.pasos span { grid-column: 2; color: var(--ink-2); }
.galeria-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.galeria-3 figure { margin: 0; }
.galeria-3 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.galeria-3 figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2); }

/* ---------- Contacto (1.8): los datos a la izquierda y los 4 formularios de hoy en solapas ---------- */
.contacto { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding-top: 48px; padding-bottom: 88px; align-items: start; }
.contacto h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; }
.contacto .lead { margin: 12px 0 28px; font-size: 18px; }
.canal { margin: 0; border-top: 2px solid var(--ink); }
.canal > div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.canal dt { font-size: 14px; color: var(--ink-2); }
.canal dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.canal .tel { font-size: 24px; font-weight: 900; text-decoration: none; }
.canal .tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.canal .mini { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; font-size: 15px; font-weight: 700; }
.canal .mini a { text-underline-offset: 4px; }
.canal .mini a:hover { color: var(--red); }
.form-card { border: 1px solid var(--rule); scroll-margin-top: 90px; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.tabs button { height: 54px; padding: 0 8px; border: 0; border-right: 1px solid var(--rule); background: var(--panel); color: var(--ink-2); font: 700 15px/1.2 "Lato", sans-serif; cursor: pointer; }
.tabs button:last-child { border-right: 0; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 3px 0 var(--red); }
.panel { padding: 28px 32px 30px; }
.panel h2 { font-size: 26px; line-height: 1.15; }
.panel .intro { margin: 8px 0 22px; color: var(--ink-2); font-size: 16px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 14px; font-weight: 700; }
.campo input, .campo textarea { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #b9b9b4; border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.campo textarea { height: 132px; padding: 10px 12px; resize: vertical; }
.campo input[type="file"] { height: auto; padding: 9px 10px; font-size: 15px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--agua); outline-offset: 0; border-color: var(--agua); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acepto { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 18px; font-size: 15px; }
.acepto input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.req { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.proteccion { padding: 18px 32px 22px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.proteccion b { color: var(--ink); }
.pedido { margin: 0 0 18px; padding: 14px 16px; background: var(--panel); font-size: 15px; }
.pedido h3 { margin: 0 0 8px; font-size: 15px; }
.pedido ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pedido li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pedido li button { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.pedido .vacio { margin: 0; color: var(--ink-2); }

/* ---------- Tableta y celular (como hoy: logo a la izquierda y menú a la derecha) ---------- */
@media (max-width: 991px) {
  .top { display: none; }
  .barra .wrap { height: 64px; }
  .botonera { display: none; }
  .barra .logo { margin-left: 0; order: -1; }
  .barra .logo img { width: 150px; }
  .cel-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 14px; }
  .menu-btn { display: inline-grid; place-items: center; width: 46px; height: 40px; border: 1px solid var(--rule); border-radius: 6px; background: none; cursor: pointer; }
  .botonera.open { display: grid; position: absolute; top: 64px; left: 0; right: 0; background: var(--paper); padding: 8px var(--gut) 20px; gap: 0; border-bottom: 1px solid var(--rule); }
  .botonera.open a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .botonera.open .casa { display: none; }
  .botonera.open .solo-cel { display: block; color: var(--ink-2); }
  .subnav { top: 64px; }
  .portada .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 0; padding-bottom: 36px; gap: 0; }
  .portada .mundo { order: -1; margin: 0 calc(var(--gut) * -1); }   /* en el celular, el mundo arriba */
  .portada .mundo img { max-height: 210px; max-width: 70%; object-position: right center; }
  .banda .wrap { grid-template-columns: 1fr 120px; height: auto; padding-top: 20px; padding-bottom: 20px; gap: 16px; }
  .banda .mundo { height: 110px; justify-content: flex-end; }
  .banda .mundo img { width: 104px; height: 104px; }
  .banda .solo-esc { display: none; }
  .banda .bajada { font-size: 15px; margin-top: 8px; }
  .fila-1 { grid-template-columns: 1fr; }
  .fila-2 { grid-template-columns: 1fr 1fr; }
  .planta { grid-column: 1 / -1; }
  .sec-head, .normas .wrap, .cierre .wrap, .ficha-top, .bloque-grid { grid-template-columns: 1fr; }
  .apps, .obras, .obras-ficha { grid-template-columns: 1fr 1fr; }
  .app:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .app:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule); }
  .pie-grid { grid-template-columns: 1fr 1fr 1fr; }
  .destacado, .contacto, .serv-top { grid-template-columns: 1fr; }
  .serv-top { gap: 28px; }
  .servs { grid-template-columns: 1fr 1fr; }
  .galeria-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  body { font-size: 16px; padding-bottom: 72px; }
  .cel-tools .idioma { font-size: 14px; }
  .portada .mundo img { max-height: 170px; }
  .portada .acts .btn { flex: 1 1 100%; }
  .portada .acts .btn-white { display: none; }   /* «Cotizar» ya está en la barra fija */
  .fila-1, .fila-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fila-2 { margin-top: 10px; }
  .card h2, .tubo h2 { font-size: 15px; padding: 11px 8px; min-height: 52px; }
  .card p { display: none; }
  .card .ir { padding: 6px 12px 14px; font-size: 14px; }
  .tubo .cuerpo { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .tubo .foto img { padding: 8px 16px 0; }
  .tubo .txt p, .lineas { display: none; }
  .tubo .ir { padding: 6px 12px 14px; }
  .planta { padding: 18px 16px 18px; }
  .cifra strong { font-size: 24px; }
  .cifra { padding-right: 10px; }
  .cifra:nth-child(even) { padding-left: 14px; }
  .sec { padding: 64px 0; }
  .apps, .obras, .obras-ficha { grid-template-columns: 1fr; }
  .app, .app:nth-child(even) { padding-left: 0; border-left: 0; }
  .sellos { grid-template-columns: repeat(3, 1fr); }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .ficha-top { gap: 24px; padding-bottom: 40px; }
  .ficha-info { order: -1; }
  .ficha-info .acts { grid-template-columns: 1fr; }
  .bloque { padding: 44px 0; }
  .dos-col { columns: 1; }
  .descarga { grid-template-columns: 1fr auto; }
  .descarga span.peso { display: none; }
  .intro-pag { padding-top: 36px; }
  .etapas { grid-template-columns: 1fr; row-gap: 22px; }
  .etapas::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; }
  .etapa { padding: 0 0 0 40px; }
  .servs { grid-template-columns: 1fr; }
  .destacado { margin-top: 48px; }
  .destacado .txt { padding: 22px 18px 24px; }
  .serv-top .acts { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: 1fr 1fr; }
  .tabs button { border-bottom: 1px solid var(--rule); }
  .tabs button:nth-child(2) { border-right: 0; }
  .panel { padding: 22px 16px 24px; }
  .proteccion { padding: 16px; }
  .campos { grid-template-columns: 1fr; }
  .contacto { gap: 36px; padding-top: 28px; padding-bottom: 56px; }
  .galeria-3 { grid-template-columns: 1fr; }
  .barra-cel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); border-top: 1px solid var(--rule); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Listados de productos (de la maqueta 1.6) ---------- */

.vh, .sr-only-gp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pestañas de Productos (reemplazan el menú lateral de hoy) */
.lst-tabs { border-bottom: 1px solid var(--rule); }
.lst-tabs .wrap { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.lst-tabs a { flex-shrink: 0; text-decoration: none; font-size: 15px; font-weight: 700; padding: 16px 0 14px; border-bottom: 2px solid transparent; color: var(--ink-2); }
.lst-tabs a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.lst-tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.lst-tabs span { font-weight: 400; color: var(--ink-2); margin-left: 4px; }

.lst { padding: 44px 0 88px; }
.lst-head { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: end; margin-bottom: 28px; }
.lst-head p { margin: 0; color: var(--ink-2); max-width: 38em; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); color: var(--ink); font: 700 14px/1 "Lato", sans-serif; cursor: pointer; white-space: nowrap; }
.chip span { font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-pressed="true"] span { color: var(--night-2); }
.herr { display: flex; gap: 18px; align-items: center; }
.dn { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.dn select { height: 36px; border: 1px solid var(--rule); border-radius: 4px; padding: 0 30px 0 12px; font: 400 15px "Lato", sans-serif; color: var(--ink); background: var(--paper); cursor: pointer; }
.vista { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.vista button { height: 34px; padding: 0 14px; border: 0; background: var(--paper); font: 700 14px "Lato", sans-serif; color: var(--ink-2); cursor: pointer; }
.vista button + button { border-left: 1px solid var(--rule); }
.vista button[aria-pressed="true"] { background: var(--panel); color: var(--ink); }
.cuenta { margin: 14px 0 18px; font-size: 14px; color: var(--ink-2); }

/* Tarjetas: cabecera negra como en la portada */
.grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grilla[hidden], .prod[hidden], .tabla-prod tr[hidden] { display: none; }
.prod { border: 1px solid var(--rule); display: flex; flex-direction: column; background: var(--paper); }
.prod:hover { border-color: var(--ink); }
.prod h3 { background: var(--ink); color: #fff; font-size: 18px; line-height: 1.2; text-align: center; padding: 13px 10px; }
.prod h3 a { text-decoration: none; }
.prod h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.prod .foto img { aspect-ratio: 4 / 3; width: 100%; object-fit: contain; padding: 10px 16px 0; }
.prod .uso { display: flex; gap: 10px; align-items: flex-start; margin: 6px 16px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); min-height: 2.8em; }
.prod .uso .mu { flex: none; margin-top: 4px; }
.prod .mini { margin: 12px 16px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.prod .mini div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.prod .mini dt { color: var(--ink-2); }
.prod .mini dd { margin: 0; font-weight: 700; }
.pie-prod { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 16px; }
.pie-prod .ir { font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.pie-prod .ir:hover { color: var(--red); }
.mas { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font: 700 13px "Lato", sans-serif; color: var(--ink); cursor: pointer; }
.mas:hover { border-color: var(--ink); }

/* Tabla: la misma información para comparar de un vistazo */
.tabla-wrap { overflow-x: auto; }
.tabla-wrap[hidden] { display: none; }
.tabla-prod { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 860px; }
.tabla-prod th, .tabla-prod td { text-align: left; vertical-align: middle; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.tabla-prod thead th { font-size: 13px; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-top: 4px; }
.tabla-prod tbody th { font-weight: 900; white-space: nowrap; }
.tabla-prod tbody th a { text-decoration: none; }
.tabla-prod tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tabla-prod td:first-child { width: 54px; }
.tabla-prod .num { white-space: nowrap; }
.tabla-prod td a { font-weight: 700; }
.tabla-prod tbody tr:hover { background: var(--panel); }

.vacio { border: 1px solid var(--rule); background: var(--panel); padding: 22px 24px; }
.vacio[hidden] { display: none; }
.vacio p { margin: 0 0 14px; color: var(--ink-2); }
.vacio b { color: var(--ink); }

@media (max-width: 1100px) {
  .grilla { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .lst-head { grid-template-columns: 1fr; gap: 12px; }
  .filtros { align-items: stretch; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
  .herr { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .lst { padding: 28px 0 64px; }
  .lst-tabs .wrap { gap: 22px; }
  .lst-tabs a { font-size: 14px; }
  .grilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prod h3 { font-size: 15px; padding: 11px 8px; }
  .prod .foto img { padding: 8px 10px 0; }
  .prod .uso { margin: 4px 10px 0; font-size: 14px; min-height: 0; }
  .prod .mini { margin: 8px 10px 0; font-size: 13px; }
  .prod .mini div { grid-template-columns: 1fr; gap: 0; padding: 5px 0; }
  .prod .mini div:not(:first-child) { display: none; }   /* en el celular, solo los diámetros */
  .pie-prod { flex-direction: column; align-items: flex-start; padding: 10px 10px 12px; }
  .vista { display: none; }   /* en el celular, solo tarjetas */
}

/* ==========================================================================
   Sitio 2.1 · convivencia con Bootstrap 5.3 (lo carga head.php) y con css/styles-mod.css
   ========================================================================== */
.gp h1, .gp h2, .gp h3, .gp h4, .banda h1, .banda p, .pie h4 { margin: 0; }
.gp h1, .gp h2, .gp h3, .banda h1 { font-weight: 900; letter-spacing: -0.005em; }
.gp img, .banda img, .pie img, .barra img, .portada img { max-width: 100%; height: auto; display: block; }
.gp .card { border-radius: 0; color: var(--ink); }
.gp .lead { font-weight: 400; }
.gp a:not(.btn), .pie a, .banda a, .barra a, .top a:not(.btn) { color: inherit; }
.gp ul, .gp ol, .gp dl { margin-bottom: 0; }
.gp p:last-child { margin-bottom: 0; }
/* css/styles-mod.css (la hoja de hoy) agranda p y a, achica cada span y pone los b en 800 con !important.
   Dentro del diseño nuevo se vuelve a lo normal; las reglas con :where() no le ganan a las de cada componente. */
:where(.gp, .pie, .banda, .barra, .top, .barra-cel, .aviso, .gp-contacto, .clients-wrap) :is(p, a, span) { font-size: inherit; }
:where(.gp, .gp-contacto) a { text-decoration: underline; text-underline-offset: 3px; }
:where(.gp, .pie, .aviso, .gp-contacto, .banda) :is(b, strong) { font-weight: 900 !important; }
.gp .descarga b { font-weight: 700 !important; }
.pie { color: var(--ink); background: var(--paper); }
.banda .frase { font-weight: 900; letter-spacing: -0.005em; }
.btn-red, .btn-line, .btn-white { --bs-btn-active-bg: inherit; box-shadow: none !important; }
.btn-red:active, .btn-red:focus { background: var(--red-dark) !important; color: #fff !important; border-color: transparent !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La barra de arriba y la botonera reemplazan la navbar de Bootstrap */
.barra .botonera a { color: var(--ink); }
.barra .logo img { display: block; }
.top-izq .btn-red { color: #fff; }

/* El banner de sección: el H1 de las páginas viejas queda abajo; la frase es un párrafo */
.banda .wrap { position: relative; }
.banda .migas a { color: var(--night-2); }

/* Recuadro de contacto lateral (contacto_banner.php), con la identidad nueva */
.gp-contacto { border: 1px solid var(--rule); background: var(--paper); }
.gp-contacto h2 { background: var(--ink); color: #fff; font-size: 17px; font-weight: 900; padding: 12px 16px; margin: 0; }
.gp-contacto .cuerpo { padding: 16px 18px 18px; font-size: 16px; }
.gp-contacto dl { margin: 0; }
.gp-contacto dt { font-size: 13px; color: var(--ink-2); font-weight: 400; margin-top: 10px; }
.gp-contacto dt:first-child { margin-top: 0; }
.gp-contacto dd { margin: 2px 0 0; }
.gp-contacto a { text-underline-offset: 3px; }
.gp-contacto .tel { font-size: 20px; font-weight: 900; text-decoration: none; }
.gp-contacto .acts { display: grid; gap: 8px; margin-top: 16px; }
.gp-contacto .acts .btn-red, .gp-contacto .acts .btn-line { height: 42px; font-size: 15px; }

/* ==========================================================================
   Páginas que mantienen su contenido de hoy: toman la identidad nueva
   ========================================================================== */
body { color: var(--ink); }
.container { max-width: var(--max); padding-left: var(--gut); padding-right: var(--gut); }
main h1, main h2, main h3, main h4, main h5, main h6 { font-family: "Lato", Arial, Helvetica, sans-serif; font-weight: 900; letter-spacing: -0.005em; }
main:not(.gp) h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
main:not(.gp) a:not(.btn):not(.nav-link) { color: inherit; text-underline-offset: 3px; }
main:not(.gp) a:not(.btn):not(.nav-link):not(.gp a):hover { color: var(--red); }
.text-danger { color: var(--red) !important; }
.bg-danger { background-color: var(--red) !important; }
.btn { border-radius: 4px; font-family: "Lato", Arial, Helvetica, sans-serif; }
.btn-danger { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red-dark); --bs-btn-hover-border-color: var(--red-dark); --bs-btn-active-bg: var(--red-dark); font-weight: 900; }
.btn-dark { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); font-weight: 900; }
.card { border-radius: 0; }
.titlebar { background: var(--ink) !important; color: #fff !important; font-family: "Lato", sans-serif; font-weight: 900 !important; border-radius: 0 !important; }
.form-control, .form-select { border-radius: 4px; border-color: #b9b9b4; min-height: 46px; font-size: 16px; }
.form-control:focus, .form-select:focus { border-color: var(--agua); box-shadow: 0 0 0 2px rgba(31, 111, 217, .2); }
.form-label { font-weight: 700; font-size: 14px; }
/* La barra «GROUPPIPE® │ Sección» de hoy: la reemplazan las migas del banner. Queda el ancla #inicio. */
.breadcrumb-bar { height: 0 !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; border: 0 !important; scroll-margin-top: 90px; }
#inicio { scroll-margin-top: 90px; }
/* El banner de cierre y los logos de clientes del pie de hoy */
.clients-wrap .clients-title { font-weight: 900; font-size: 20px; }
.clients-swiper .swiper-slide img { filter: grayscale(1); opacity: .85; }
.clients-swiper .swiper-slide img:hover { filter: none; opacity: 1; }

@media (max-width: 991px) {
  .gp-contacto { margin-top: 32px; }
}

/* Contacto en el sitio: las solapas son links entre las 4 páginas de hoy */
.tabs a { display: grid; place-items: center; height: 54px; padding: 0 8px; border-right: 1px solid var(--rule); background: var(--panel); color: var(--ink-2); font: 700 15px/1.2 "Lato", sans-serif; text-decoration: none !important; text-align: center; }
.tabs a:last-child { border-right: 0; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { background: var(--paper); color: var(--ink); box-shadow: inset 0 3px 0 var(--red); }
.estado-envio .btn-red, .estado-envio .btn-line { margin-top: 8px; }
.estado-envio.ok h2 { color: var(--ink); }
.vacio-pedido { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .tabs a { border-bottom: 1px solid var(--rule); }
  .tabs a:nth-child(2) { border-right: 0; }
}

/* Ficha en el sitio: las versiones llevan su nombre y las medidas, dos columnas */
.variantes button .vn { display: block; }
.tabla .par { display: flex; justify-content: space-between; gap: 16px; }
.tabla .par + .par { margin-top: 4px; }
.ficha-info .clave dd { font-size: 18px; }
.lista-simple li a { text-decoration: none; }
.lista-simple li a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Aplicaciones: las 15 juntas, y las obras de la base (las fotos ya vienen sin la franja de texto, 06.11) */
.apps-todas .app { scroll-margin-top: 96px; }
.apps-todas .app h2 { font-size: 20px; line-height: 1.25; }
.app .prods a { text-decoration: underline; text-underline-offset: 3px; }
.app .ver { margin-top: 6px; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.app .ver:hover, .app .prods a:hover { color: var(--red); }
.mu-vacia { visibility: hidden; }
.obra.db img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }

/* Páginas de servicio sin foto (Ensayos, Recursos): un panel negro con el dato */
.serv-top .tipo-panel { aspect-ratio: 3 / 2; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 36px; }
.serv-top .tipo-panel b { font-size: clamp(30px, 3vw, 44px); font-weight: 900; line-height: 1.1; }
.serv-top .tipo-panel span { color: var(--night-2); margin-top: 10px; font-size: 17px; }

/* ---------- Tanda de Silvi del 06.11 (tarde) ---------- */
/* La ® mucho más chica: arriba, a la altura de las mayúsculas, y nunca más de 12 px (en los títulos grandes no crece) */
/* (styles-mod.css agranda toda <sup> con !important: por eso aquí también va !important) */
sup.r { font-size: clamp(6px, .4em, 12px) !important; line-height: 1; vertical-align: top; position: relative; top: .42em !important; margin-left: .05em; font-weight: 400; }
/* Pie: el título de cada columna a la misma distancia que los links entre sí */
.pie h4 { margin: 0 0 6px; line-height: 1.5; font-size: 15px; }
.pie ul { gap: 6px; }
.pie li { line-height: 1.5; }
/* Las minituberías de la portada, un poco más grandes */
.lineas .mu { --h: 14px; width: 40px; }
.lineas .mu::after { top: 27%; height: 2.5px; }
/* Aplicaciones: una minitubería lisa y una corrugada cuando la aplicación tiene las dos */
.mus { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.app .mus .mu { margin-bottom: 0; }
/* Servicios: la línea de las etapas, más fina */
.etapas::before { top: 8px; height: 1px; border-radius: 0; }
.etapa::before { top: 0; width: 17px; height: 17px; border-width: 1px; }
.etapa { padding-top: 32px; }
@media (max-width: 640px) {
  .etapas::before { left: 8px; width: 1px; height: auto; }
  .etapa { padding: 0 0 0 36px; }
}
/* Recuadros: al pasar el mouse el filete se pone negro, en todo el sitio */
.card, .prod, .serv, .destacado, .gp-card, .form-card { transition: border-color .15s; }
.card:hover, .destacado:hover, .gp-card:hover { border-color: var(--ink); }
/* Portada de Productos: los cuatro recuadros con el sistema de la portada */
.prod-home { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prod-home .card { height: 100%; }
.prod-home .card h2 { margin: 0; }
.prod-home .card p { padding: 4px 18px 0; }
.prod-home .card .ir { padding: 14px 18px 18px; }
@media (max-width: 640px) { .prod-home { gap: 10px; } }
/* Servicios: el menú de la sección, debajo del banner, en las 8 páginas */
nav.secnav { background: var(--paper); border-bottom: 1px solid var(--rule); }
nav.secnav .wrap { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
nav.secnav .wrap::-webkit-scrollbar { display: none; }
nav.secnav a { flex-shrink: 0; text-decoration: none; font-size: 15px; font-weight: 400; color: var(--ink-2); padding: 16px 0 13px; border-bottom: 2px solid transparent; }
nav.secnav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
nav.secnav a[aria-current] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
@media (max-width: 640px) { nav.secnav .wrap { gap: 22px; } nav.secnav a { font-size: 14px; padding: 13px 0 11px; } }

/* ---------- Sitio 2.2 (07.11): páginas de contenido con el menú de sección arriba ---------- */
/* Compañía, Información, Obras, Novedades, Eventos, Distribuidores, Catálogo, Preguntas frecuentes y las legales */
.pagina { padding: 56px 0 88px; }
.pag-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(250px, 4fr); gap: 64px; align-items: start; }
.pag-aside { position: sticky; top: 92px; display: grid; gap: 20px; }
.pag-aside .sub { border: 1px solid var(--rule); background: var(--paper); }
.pag-aside .sub h2 { background: var(--ink); color: #fff; font-size: 16px; padding: 12px 18px; margin: 0; }
.pag-aside .sub ul { list-style: none; margin: 0; padding: 6px 18px 10px; }
.pag-aside .sub li { border-bottom: 1px solid var(--rule); }
.pag-aside .sub li:last-child { border-bottom: 0; }
.pag-aside .sub a { display: block; padding: 10px 0; font-size: 15px; text-decoration: none; color: var(--ink-2); }
.pag-aside .sub a:hover, .pag-aside .sub a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.pag-aside .sub a[aria-current] { font-weight: 700; }
.texto { min-width: 0; font-size: 17px; line-height: 1.62; color: var(--ink-2); }
.texto > h1, .texto h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; color: var(--ink); font-weight: 900; margin: 0 0 22px; letter-spacing: -0.005em; }
.texto h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--ink); font-weight: 900; margin: 44px 0 14px; }
.texto h3, .texto h4, .texto h5, .texto h6 { font-size: 19px; line-height: 1.3; color: var(--ink); font-weight: 900; margin: 30px 0 10px; }
.texto h1 + h2, .texto h1 + h3 { margin-top: 0; }
.texto p { margin: 0 0 16px; }
.texto .entrada { font-size: 20px; line-height: 1.42; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
.texto .entrada + .entrada { font-size: 18px; font-weight: 400; color: var(--ink-2); }
.texto ul, .texto ol { margin: 0 0 18px; padding-left: 22px; }
.texto li { margin: 5px 0; }
.texto li::marker { color: var(--ink-2); }
.texto a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.texto a:hover { color: var(--red); }
.texto strong, .texto b { color: var(--ink); }
.texto img { max-width: 100%; height: auto; }
.texto figure { margin: 28px 0; }
.texto figure img { width: 100%; }
/* Fotos reales de la planta y de servicios (Fotos para el sitio 1.2, 06.11): una grande y de a dos, en 3:2 */
.foto-ancha > img, .fotos-2 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; display: block; }
.foto-ancha figcaption, .fotos-2 figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.fotos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.fotos-2 figure, .texto .fotos-2 figure { margin: 0; }
@media (max-width: 640px) { .fotos-2 { grid-template-columns: 1fr; } }
.texto hr { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; opacity: 1; }
.texto table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0 0 24px; }
.texto th, .texto td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); }
.texto thead th { border-bottom: 2px solid var(--ink); color: var(--ink); }
/* La lista de links de una sección (Nosotros: misión, valores…) */
.texto .enlaces { list-style: none; padding: 0; margin: 32px 0 0; border-top: 2px solid var(--ink); }
.texto .enlaces li { margin: 0; border-bottom: 1px solid var(--rule); }
.texto .enlaces a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; text-decoration: none; font-weight: 700; color: var(--ink); }
.texto .enlaces a::after { content: "→"; font-weight: 400; color: var(--ink-2); }
.texto .enlaces a:hover { color: var(--red); }
.texto .enlaces a:hover::after { color: var(--red); }
/* Grillas de logos y certificados que vienen de las páginas de siempre */
.texto .row { --bs-gutter-x: 20px; }
.texto .card, .texto .gp-card { border: 1px solid var(--rule); border-radius: 0; height: 100%; }
.texto .card-body { padding: 16px 18px; }
.texto .titlebar { background: var(--ink); color: #fff; font-weight: 900; padding: 12px 16px; text-align: center; }
/* Las preguntas frecuentes */
.texto .faq-item { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.texto .faq-item:first-child { border-top: 2px solid var(--ink); }
.texto .faq-item h2 { font-size: 19px; margin: 0 0 6px; }
.texto .faq-item p { margin: 0; }
@media (max-width: 991px) {
  .pag-grid { grid-template-columns: 1fr; gap: 40px; }
  .pag-aside { position: static; }
}

/* ---------- Sitio GPi 2027 (07.11) ---------- */
/* Páginas de contenido: la columna lateral va a la izquierda, con el mismo ancho en todo el sitio (270 px, el de
   Quiénes somos), y lleva el submenú (si la sección lo tiene) y abajo Contacto. Silvi, 07.11: «el cuadrado de Contacto
   en todas las páginas debe tener el mismo ancho… y a la izquierda». En el HTML el texto va primero (en el celular, arriba). */
.pag-grid { grid-template-columns: 270px minmax(0, 1fr); gap: 56px; }
.pag-grid > .pag-aside { grid-column: 1; grid-row: 1; }
.pag-grid > .texto { grid-column: 2; grid-row: 1; }
.texto :is(p, ul, ol, dl, blockquote) { max-width: 48em; }      /* renglones cómodos de leer, aunque la columna sea ancha */
.pag-aside .sub a { line-height: 1.35; }
@media (max-height: 840px) { .pag-aside { position: static; } }  /* si la pantalla es baja, la columna no queda fija */
@media (max-width: 1100px) { .pag-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; } }
@media (max-width: 991px) {
  .pag-grid { grid-template-columns: 1fr; }
  .pag-grid > .pag-aside, .pag-grid > .texto { grid-column: auto; grid-row: auto; }
}

/* El cierre en la tableta y el celular: la foto arriba, a lo ancho, y el texto abajo */
@media (max-width: 991px) {
  .cierre .cierre-foto { position: relative; width: 100%; height: 68.75vw; max-height: 620px; }   /* la proporción justa de la foto: no se recorta */
  .cierre .wrap { grid-template-columns: 1fr; min-height: 0; }
  .cierre .cierre-txt { grid-column: 1; padding: 28px 0 64px; }
}

/* Portada de Productos: seis recuadros de dos en dos, con todas las líneas y las familias adentro (Silvi, 07.11) */
.prod-portada { padding: 56px 0 88px; }
.prod-portada .lst-head { margin-bottom: 32px; }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pp h2 { font-size: 23px; min-height: 60px; }
.pp .pp-top { display: grid; grid-template-columns: 4fr 7fr; gap: 20px; align-items: center; padding: 20px 22px 0 14px; }
.pp .pp-top img { padding: 0; }
.pp .pp-top .obra img { aspect-ratio: 3 / 2; object-fit: cover; }
.pp .pp-top p { padding: 0; margin: 0; }
.pp-lista { list-style: none; margin: 18px 22px 0; padding: 14px 0 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--filas, 5), auto); grid-auto-flow: column; gap: 12px 24px; }
.pp-lista a, .pp-lista .fila { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.pp-lista .mu { flex: none; margin-top: 4px; --h: 13px; width: 38px; }
.pp-lista .mu::after { top: 27%; height: 2.5px; }
.pp-lista b { display: block; font-size: 15px; font-weight: 900; line-height: 1.3; }
.pp-lista small { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-2); margin-top: 1px; }
.pp-lista a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pp-lista.solo-nombre b { font-weight: 700; }
.pp .ir { padding: 18px 22px 22px; }
@media (max-width: 860px) { .pp-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .prod-portada { padding: 36px 0 56px; }
  .pp h2 { font-size: 17px; min-height: 52px; }
  .pp .pp-top { grid-template-columns: 2fr 3fr; gap: 14px; padding: 14px 14px 0 8px; }
  .pp .pp-top p { display: block; font-size: 15px; }
  .pp-lista { margin: 14px 14px 0; gap: 10px 14px; }
  .pp-lista a, .pp-lista .fila { gap: 8px; }
  .pp-lista .mu { --h: 11px; width: 30px; }
  .pp-lista b { font-size: 14px; }
  .pp-lista small { font-size: 13px; }
  .pp .ir { padding: 14px 14px 18px; font-size: 15px; }
}
@media (max-width: 640px) {
  .pagina { padding: 36px 0 56px; }
  .texto { font-size: 16px; }
  .texto .entrada { font-size: 18px; }
}

/* La muestra de las corrugadas toma el color de la línea (ENERCORR® Antillama es roja) */
.mu.corr { background: linear-gradient(180deg, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%), repeating-linear-gradient(90deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 70%, #fff) 3px 4px); }

/* Aire entre el cierre negro y «Nuestros clientes» */
main > .sec.cierre:last-child { margin-bottom: 56px; }
@media (max-width: 640px) { main > .sec.cierre:last-child { margin-bottom: 36px; } }
/* Listados en el celular: en inglés «View product» + «Quote» no entraban en media columna */
.grilla > * { min-width: 0; }
@media (max-width: 640px) { .pie-prod { flex-wrap: wrap; row-gap: 8px; } }

/* Equipo directivo: la foto en un círculo, el nombre, el cargo y el mail (Silvi, 07.11) */
.directivos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 28px 0 8px; }
.texto .directivo { margin: 0; text-align: center; }
.texto .directivo img { width: 168px; height: 168px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); background: #fff; margin: 0 auto 16px; display: block; }
.directivo figcaption { display: flex; flex-direction: column; gap: 3px; }
.directivo b { color: var(--ink); font-size: 18px; font-weight: 900; }
.directivo span { font-size: 15px; color: var(--ink-2); }
.directivo a { font-size: 15px; }
@media (max-width: 640px) {
  .directivos { grid-template-columns: 1fr; gap: 28px; }
  .texto .directivo img { width: 148px; height: 148px; }
}

/* Debajo de las obras: consultar por las demás (Sitio GPi 2027) */
.obras-mas { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; gap: 16px 32px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.obras-mas p { margin: 0; max-width: 40em; color: var(--ink-2); }
.obras-mas .acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* Fotos de obra y de las fichas: limpias, sin el logo blanco encima (Silvi, 06.11: «el logo en blanco así no…
   dejémosla sin nada»). La marca va adentro de cada imagen, en los datos de autor (XMP), y en el nombre del archivo. */

/* ---------- Sitio GPi 2027 · tanda del 06.11, noche ---------- */
/* Normas y Afiliaciones: los logos en recuadros iguales, separados como en la portada (Silvi) */
.gp .texto .std-logos-grid, .gp .texto .std-logos, .gp .texto .logos-camaras {
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: none; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  margin: 18px 0 32px !important; max-width: none; --bs-gutter-x: 0; --bs-gutter-y: 0; }
.gp .texto .logos-camaras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp .texto .std-logos > *, .gp .texto .std-logos-grid > *, .gp .texto .logos-camaras > * {
  background: var(--paper); height: 108px !important; display: grid; place-items: center; padding: 16px !important; margin: 0 !important;
  width: auto !important; max-width: none !important; flex: none !important; border: 0 !important; border-right: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; }
.gp .texto .std-logos img, .gp .texto .std-logos-grid img { max-height: 58px !important; max-width: 82% !important; width: auto !important; height: auto !important; filter: grayscale(1); }
.gp .texto .logos-camaras img { max-height: 52px; max-width: 84%; width: auto; height: auto; }
@media (max-width: 640px) {
  .gp .texto .std-logos-grid, .gp .texto .std-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gp .texto .logos-camaras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp .texto .std-logos > *, .gp .texto .std-logos-grid > *, .gp .texto .logos-camaras > * { height: 88px !important; padding: 12px !important; }
}
/* Clientes: la lista alineada a la izquierda, como el título */
.gp .texto .list-unstyled { padding-left: 0; list-style: none; }
/* Botones de descarga que venían de las páginas de siempre (Bootstrap «btn-dark»): con el estilo del sitio y el texto legible */
.gp .btn.btn-dark, .gp .btn.btn-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 4px !important;
  background: var(--red); border: 1.5px solid var(--red); color: #fff !important; text-decoration: none !important; font: 900 15px/1 "Lato", sans-serif; }
.gp .btn.btn-dark:hover, .gp .btn.btn-download:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff !important; }
/* Educación: el logo centrado sobre el bloque de texto y aire entre curso y curso */
.texto .logo-centrado { max-width: 48em; text-align: center; margin: 44px 0 40px; } /* más aire arriba (Silvi, 06.11) */
.texto .logo-centrado img { display: block; margin: 0 auto; max-width: 340px; width: 100%; height: auto; }
/* Capacitación: el mismo logo de ACADEMY, centrado y con aire arriba, como en Educación (Silvi, 07.11) */
.bloque .logo-centrado { text-align: center; margin: 44px 0 8px; }
.bloque .logo-centrado img { display: block; margin: 0 auto; max-width: 340px; width: 100%; height: auto; }
/* Stock: la galería en dos, «Tuberías» y «Accesorios», cada una con su título (Silvi, 07.11) */
.galeria-tit { font-size: 20px; font-weight: 900; line-height: 1.2; margin: 64px 0 0; }   /* un renglón más de aire (Silvi, 07.11) */
.galeria-tit + .galeria-3 { margin-top: 24px; }
.texto .curso { margin: 0 0 30px; max-width: 48em; }
.texto .curso h3 { margin: 0 0 6px; font-size: 18px; }
.texto .curso p { margin: 0; }
/* Portada: el sistema de gestión de calidad, después de Normas (fondo blanco, para separarlo del bloque gris) */
.calidad-home .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.sellos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); background: none; border: 0; gap: 24px; } .sellos.dos div { background: none; } /* sin recuadros (Silvi, 07.11) */
.sellos.dos div { height: 168px; }
.sellos.dos img { max-height: 124px; max-width: 78%; filter: none; }
@media (max-width: 991px) { .calidad-home .wrap { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sellos.dos div { height: 120px; } .sellos.dos img { max-height: 88px; } }
/* Mapa del sitio: las secciones en columnas, con links */
.mapa-sitio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
.mapa-sitio > ul { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0 0 8px; }
.mapa-sitio .bloque-mapa h2 { font-size: 19px; margin: 18px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.mapa-sitio .bloque-mapa ul { list-style: none; padding: 0; margin: 0; }
.mapa-sitio .bloque-mapa ul ul { padding-left: 16px; margin: 4px 0 6px; }
.mapa-sitio li { margin: 0; padding: 4px 0; }
.mapa-sitio .bloque-mapa ul ul li { padding: 2px 0; font-size: 15px; }
@media (max-width: 640px) { .mapa-sitio { grid-template-columns: 1fr; } }
/* Equipo: los responsables de área en cuatro columnas; sin foto, un círculo con las iniciales; la foto grupal en blanco y negro */
.directivos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.directivos.cuatro .directivo img, .directivo .sin-foto { width: 140px; height: 140px; }
.directivo .sin-foto { display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; border: 1px solid var(--rule); background: #f2f2f0; color: #9a9a96; font: 900 34px/1 "Lato", sans-serif; letter-spacing: .02em; }
.texto .foto-grupo { margin: 16px 0 8px; max-width: none; }
.texto .foto-grupo img { width: 100%; height: auto; filter: grayscale(1); }
.texto .foto-grupo figcaption { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 991px) { .directivos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Usos por sector 07.11: fotos reales (o el tubo, sobre blanco) y el enlace «Ver obras de este rubro» */
.app-card .figure { position: relative; }
.app-card .figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.app-card .col-md-12 .figure { min-height: 0; aspect-ratio: 16 / 7; }
.app-card .figure.render { background: #fff; }
.app-card .figure.render img { object-fit: contain; padding: 18px; }
.gp .app-card .sector-obras { display: inline-block; padding: 14px 0 0; border: 0; color: #E11B22; font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.gp .app-card .sector-obras:hover { color: #b3121a; text-decoration-thickness: 2px; }
.gp .app-card.white .sector-obras { color: #E11B22; border-top-color: #ddd; }
.gp .app-card.white .sector-obras:hover { color: #b3121a; }
@media (max-width: 767px) { .app-card .col-md-12 .figure { aspect-ratio: 3 / 2; } }
.gp .texto .app-card .titlebar { background: none !important; color: var(--ink) !important; text-align: left; padding: 0 0 14px; font-size: 24px; line-height: 1.2; border: 0; } /* sin negro (Silvi, 07.11) */

/* Adjuntar archivo con botón propio, en el idioma de la página (Silvi, 06.11) */
.gp .archivo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; position: relative; }
.gp .campo .archivo-in { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.gp .archivo-btn { display: inline-block; margin: 0; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.gp .archivo-btn:hover { background: var(--ink); color: #fff; }
.gp .campo .archivo-in:focus-visible + .archivo-btn { outline: 2px solid #E11B22; outline-offset: 2px; }
.gp .archivo-nombre { font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }

/* Obras 06.11 · el listado de obras.php (unas 65 obras): filtros, grilla y «Ver más obras»; en la portada y en
   Aplicaciones, debajo de las obras, solo el botón «Ver más obras» (Silvi, 06.11) */
.obras-ver { margin-top: 28px; display: flex; justify-content: flex-start; }
.ol-filtros { margin: 28px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 16px; }
.ol-filtros[hidden] { display: none; }
.ol-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ol-chip { font: 700 15px/1 "Lato", sans-serif; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; }
.ol-chip:hover { border-color: var(--ink); }
.ol-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ol-chip:focus-visible, .ol-selects select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ol-selects { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.ol-selects label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--ink-2); }
.ol-selects select { font: 400 15px/1.2 "Lato", sans-serif; padding: 9px 34px 9px 12px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--ink); max-width: 100%; }
.ol-cuenta { margin: 0; font-size: 15px; color: var(--ink-2); }
.ol-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.ol-obra[hidden] { display: none; }
.ol-obra figure { margin: 0; }
.ol-obra img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #eeeeec; }
.texto .ol-obra .ol-tit { font-size: 17px; line-height: 1.3; margin: 14px 0 4px; }
.texto .ol-obra p { margin: 0; font-size: 15px; line-height: 1.4; }
.ol-obra .ol-prod { color: var(--ink); font-weight: 700; }
.ol-obra .ol-lugar { color: var(--ink-2); }
.ol-nada { margin: 8px 0 0; color: var(--ink-2); }
.ol-mas { margin-top: 32px; display: flex; justify-content: center; }
.ol-mas .btn[hidden] { display: none; }
@media (max-width: 1100px) { .ol-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ol-grilla { grid-template-columns: 1fr; gap: 28px; }
  .ol-selects label { width: 100%; justify-content: space-between; }
  .ol-selects select { flex: 1; }
}

/* Obras 07.11 · primero el tipo de tubería, así no se mezclan (Silvi: «separar tubería sólida y tubería corrugada») */
.ol-tipo { display: inline-flex; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; justify-self: start; }
.ol-tipo-btn { font: 900 16px/1 "Lato", sans-serif; padding: 14px 22px; border: 0; background: #fff; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.ol-tipo-btn + .ol-tipo-btn { border-left: 1px solid var(--ink); }
.ol-tipo-btn:hover { background: #f2f2f0; }
.ol-tipo-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ol-tipo-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ol-tipo-n { font-weight: 400; font-size: 14px; opacity: .75; }
.ol-chip[hidden], .ol-selects label[hidden] { display: none; }
@media (max-width: 640px) {
  .ol-tipo { display: flex; justify-self: stretch; }
  .ol-tipo-btn { flex: 1; justify-content: center; padding: 14px 10px; font-size: 15px; }
}
/* «Consultar por más obras» con letras blancas (Silvi, 07.11): el color de los links del texto lo dejaba oscuro */
.texto .obras-mas .btn-red, .texto .obras-mas .btn-red:hover, .texto .obras-mas .btn-red:visited, .texto .obras-mas .btn-red:focus { color: #fff; text-decoration: none; }
/* «Más antecedentes» (07.11): tabla en escritorio, lista en celular */
.ant { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.texto .ant h2 { margin: 0 0 6px; }
.texto .ant .ant-intro { margin: 0 0 18px; color: var(--ink-2); }
.ant-tabla { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.ant-tabla th { text-align: left; font-weight: 900; color: var(--ink); padding: 0 12px 8px 0; border-bottom: 2px solid var(--ink); }
.ant-tabla td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
.ant-tabla td.ant-o { color: var(--ink); font-weight: 700; }
.ant-tabla td.ant-a { white-space: nowrap; width: 6.5em; }
.ant-tabla tr[hidden], #ant-con-tipo[hidden], .ant-mas .btn[hidden] { display: none; }
.ant-mas { margin-top: 20px; display: flex; justify-content: center; }
.texto .ant .ant-sub { margin: 32px 0 8px; font-size: 18px; }
@media (max-width: 640px) {
  .ant-tabla thead { display: none; }
  .ant-tabla, .ant-tabla tbody, .ant-tabla tr, .ant-tabla td { display: block; }
  .ant-tabla tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ant-tabla tr[hidden] { display: none; }
  .ant-tabla td, .ant-tabla td.ant-a { border: 0; padding: 1px 0; width: auto; }
  .ant-tabla td.ant-a { font-size: 13px; }
  .ant-tabla td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); }
  .ant-tabla td:empty { display: none; }
}

/* Prensa y Distribuidores 06.11 */
.texto.prensa .lead { margin: 4px 0 8px; }
.texto.prensa h2 { margin-top: 44px; }
.texto.prensa .prensa-logo .btn { text-decoration: none; }
.texto.prensa .prensa-logo { display: flex; flex-wrap: wrap; gap: 12px; } /* los dos logos para descargar (06.11) */
.prensa-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 28px; }
.texto .prensa-fotos figure { margin: 0; }
.texto .prensa-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.prensa-fotos figcaption { margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
/* Novedades 07.11: la galería muestra los últimos 5 años y la cantidad cambia sola. En escritorio, si la última foto queda sola en su fila, ocupa la fila entera, más baja */
@media (min-width: 992px) {
  .prensa-fotos figure:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .texto .prensa-fotos figure:last-child:nth-child(3n+1) img { aspect-ratio: 3 / 1; }
}
/* En el celular (2 columnas), lo mismo si la última queda sola */
@media (max-width: 991px) {
  .prensa-fotos figure:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
  .texto .prensa-fotos figure:last-child:nth-child(2n+1) img { aspect-ratio: 2 / 1; }
}
/* 09.11 (Silvi: «que se vea todo el stand»): una foto vertical (.alta) ocupa dos filas. Como suma una celda, se corrige la última fila */
.prensa-fotos figure.alta { grid-row: span 2; display: flex; flex-direction: column; }
.texto .prensa-fotos figure.alta img { aspect-ratio: auto; flex: 1 1 0; min-height: 0; object-position: center top; }
@media (min-width: 992px) {
  .prensa-fotos:has(.alta) figure:last-child:nth-child(3n+1) { grid-column: span 2; }
  .prensa-fotos:has(.alta) figure:last-child:nth-child(3n) { grid-column: 1 / -1; }
  .texto .prensa-fotos:has(.alta) figure:last-child:nth-child(3n) img { aspect-ratio: 3 / 1; }
}
@media (max-width: 991px) {
  .prensa-fotos:has(.alta) figure:last-child:nth-child(2n+1) { grid-column: auto; }
  .texto .prensa-fotos:has(.alta) figure:last-child:nth-child(2n+1) img { aspect-ratio: 3 / 2; }
  .prensa-fotos:has(.alta) figure:last-child:nth-child(2n) { grid-column: 1 / -1; }
  .texto .prensa-fotos:has(.alta) figure:last-child:nth-child(2n) img { aspect-ratio: 2 / 1; }
}
.texto ol.ferias { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--rule); max-width: none; }
.ferias > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ferias .anio { font-weight: 900; font-size: 18px; line-height: 1.4; }
.texto .ferias ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.texto .ferias ul li { margin: 0; padding: 0; font-size: 16px; line-height: 1.4; }
.ferias ul li::before { display: none; }
.ferias .lugar { color: var(--ink-2); white-space: nowrap; }
.ferias .lugar::before { content: "· "; }
.texto dl.prensa-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 16px 0 24px; border-top: 1px solid var(--rule); max-width: none; }
.prensa-datos > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.prensa-datos dt { font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: none; }
.prensa-datos dd { margin: 2px 0 0; font-size: 16px; }
.prensa-eventos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 16px 0 8px; }
.prensa-evento img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 12px; }
.prensa-evento h3 { margin: 0 0 4px; font-size: 18px; font-weight: 900; }
.prensa-evento .sub { margin: 0 0 6px; color: var(--ink-2); }
/* En los medios (07.11): lista de medios y años, sin las imágenes de los avisos */
.texto ul.medios { list-style: none; margin: 16px 0 8px; padding: 0; border-top: 1px solid var(--rule); max-width: none; }
.texto .medios > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4px 20px; align-items: baseline; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.4; }
.medios > li::before { display: none; }
.medios b { font-weight: 900; }
.medios .tipo, .medios .que { color: var(--ink-2); }
.medios .anios { font-weight: 700; white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  .texto .medios > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .medios .tipo, .medios .que { grid-column: 1; font-size: 15px; }
  .medios .anios { grid-column: 2; grid-row: 1; }
}
.texto.distribuidores .lead { margin: 4px 0 24px; }
.texto.distribuidores .foto-ancha { margin: 0 0 24px; }
.texto.distribuidores h2 { margin-top: 40px; }
.texto ol.beneficios { list-style: none; margin: 8px 0 24px; padding: 0; max-width: 48em; }
.beneficios > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.beneficios > li:first-child { border-top: 1px solid var(--rule); }
.beneficios .num { font-weight: 900; font-size: 30px; line-height: 1; color: #E11B22; }
.texto .beneficios h3 { margin: 2px 0 6px; font-size: 18px; font-weight: 900; }
.texto .beneficios p { margin: 0; }
.distribuidor-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin: 36px 0 8px; padding: 24px 0 0; border-top: 2px solid var(--ink); }
.texto .distribuidor-cta p { margin: 0; font-size: 21px; font-weight: 900; color: var(--ink); }
.texto .distribuidor-cta .btn { text-decoration: none; }
@media (max-width: 991px) { .prensa-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .prensa-fotos { gap: 12px; }
  .ferias > li { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .texto dl.prensa-datos, .prensa-eventos { grid-template-columns: 1fr; }
}

/* Ser distribuidor en el Home (Silvi, 07.11) */
/* 07.11: sobre blanco, el logo bastante más chico y después de Normas y Calidad (Silvi) */
.distrib-home { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.distrib-home .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } /* el logo a la izquierda, centrado en su columna y más grande; el texto a la derecha (Silvi, 07.11) */
.distrib-home .distrib-logo { order: 0; justify-self: center; }
.distrib-home .distrib-logo img { display: block; width: 100%; max-width: 306px; height: auto; }   /* un 10 % más chico (Silvi, 07.11) */
.distrib-home p { color: var(--ink-2); max-width: 36em; margin: 12px 0 22px; }
.distrib-home .acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 991px) { .distrib-home .wrap { grid-template-columns: 1fr; gap: 20px; } .distrib-home .distrib-logo { order: 0; justify-self: start; } .distrib-home .distrib-logo img { max-width: 220px; } }

/* Distintivo A en las fotos de las fichas: pie de foto con una rayita roja (Silvi, 07.11) */
.ficha-foto { margin: 40px 0 0; }
.ficha-pie { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 400; line-height: 1.35; color: #5f5f5b; }
.ficha-pie .raya { flex: 0 0 28px; height: 3px; background: var(--ink); }
.ficha-pie .mu { flex: none; margin-top: 0; }   /* la muestra de color de la tubería (07.11) */

/* Usos por sector en tres columnas, como Las 15 aplicaciones (Silvi, 07.11) */
.sectores .sector { gap: 10px; scroll-margin-top: 96px; }
.sectores .sector-foto { margin: 0 0 6px; aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }
.sectores .sector-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sectores .sector-foto.render img { object-fit: contain; padding: 12px; }
.sectores .sector h2 { font-size: 20px; line-height: 1.25; margin: 0; }
.sectores .sector-txt p { margin: 0 0 6px; color: var(--ink-2); font-size: 16px; }
.gp .sectores .sector-obras { display: inline-block; margin-top: 6px; padding: 0; border: 0; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; } /* en negro, como «Ver en detalle» de Las 15 aplicaciones (Silvi, 07.11) */
.gp .sectores .sector-obras:hover { color: var(--red); }
@media (max-width: 991px) { .sectores { grid-template-columns: repeat(2, 1fr); } .sectores .app:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .sectores .app:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--rule); } }
@media (max-width: 640px) { .sectores { grid-template-columns: 1fr; } .sectores .app:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* Familias sin piezas: «Estamos trabajando…» y las fotos de accesorios de la planta (Silvi, 07.11) */
.vacio-familia .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-tit { margin: 40px 0 14px; }
.acc-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acc-fotos figure { margin: 0; }
.acc-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.acc-fotos figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 991px) { .acc-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .acc-fotos { grid-template-columns: 1fr; } }

/* Distribuidores: el logo de Partners arriba y las fotos en chico, como en las demás páginas (Silvi, 07.11) */
.texto .partner-logo { margin: 72px 0 36px; text-align: center; max-width: 48em; }   /* centrado como el de Academy y con un renglón más de aire arriba (Silvi, 07.11) */
.texto .partner-logo img { display: block; margin: 0 auto; width: 100%; max-width: 300px; height: auto; }
.gp .texto .distribuidor-cta .btn-red, .gp .texto .distribuidor-cta .btn-red:hover { color: #fff; }   /* letras blancas (Silvi, 07.11) */
.texto .distrib-fotos { margin: 12px 0 36px; }
.texto .distrib-fotos figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 991px) { .texto .distrib-fotos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .texto .distrib-fotos { grid-template-columns: 1fr; } .texto .partner-logo img { max-width: 220px; } }

/* Stock: los títulos «Tuberías» y «Accesorios» con aire arriba y abajo (Silvi, 07.11); gana a la regla de los h3 del bloque */
.gp .bloque h3.galeria-tit, .gp h3.galeria-tit { margin: 56px 0 20px !important; }

/* Video de la planta en Nosotros (Silvi, 07.11) */
.texto .video-planta { margin: 20px 0 36px; max-width: 48em; }
.texto .video-planta video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.texto .video-planta figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.texto .video-planta { position: relative; }
.texto .video-planta .video-placa { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; display: block; }
.texto .video-planta .video-placa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.texto .video-planta .video-play { position: absolute; left: 50%; bottom: 14%; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: #E11B22; }
.texto .video-planta .video-play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.texto .video-planta .video-placa:hover .video-play { background: #b3121a; }
.texto .video-planta.en-curso .video-placa { display: none; }

/* Armado nuevo: Calidad, Normas, Inversores y guía 07.11 (sin la grilla vieja de Bootstrap; textos y SEO iguales) */
.texto .cal-alcance { margin: 24px 0 8px; }
.texto .cal-bloque { margin-top: 40px; }
.texto .cal-bloque h3 { margin-top: 4px; }
.texto .cal-sellos { margin-top: 18px; }
.texto .cal-sellos img { max-width: 70%; }
.texto .cert-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.texto .cert-docs figure { margin: 0; border: 1px solid var(--rule); background: #fff; }
.texto .cert-docs img { display: block; width: 100%; height: auto; }
.texto .cal-descarga { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.texto .cal-descarga .btn { text-decoration: none; }
.texto hr.filete { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; opacity: 1; }
.texto .docs-inv { margin: 24px 0 8px; }
.texto .descarga.doc { grid-template-columns: 72px 1fr auto; gap: 18px; }
.texto .descarga.doc img { display: block; width: 72px; height: auto; border: 1px solid var(--rule); background: #fff; }
.texto .inv-mas { margin-top: 28px; }
.texto .inv-mas h3 { margin: 0 0 4px; }
.guia { padding: 44px 0 64px; }
.guia-usos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.guia-ficha { margin-bottom: 18px; }
.guia-ficha .nombre { display: block; font-size: 17px; font-weight: 900; color: var(--ink); margin: 10px 0 8px; }
.guia-ficha .foto { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--rule); background: #fff; overflow: hidden; }
.guia-ficha .foto img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.guia-ficha .txt { padding-top: 8px; }
.guia-ficha .txt p { margin: 0 0 4px; font-size: 15px; color: var(--ink-2); }
.guia-mas { margin-top: 28px; }
.guia h2.guia-sig { margin-top: 28px; }
.guia-obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guia-pie { margin-top: 18px; }
@media (max-width: 991px) {
  .guia-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia-obras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .guia-usos { grid-template-columns: 1fr; }
  .guia-obras { grid-template-columns: 1fr; }
  .texto .cert-docs { grid-template-columns: 1fr; }
  .texto .descarga.doc { grid-template-columns: 56px 1fr; }
  .texto .descarga.doc img { width: 56px; }
  .texto .descarga.doc span { grid-column: 2; }
}

/* Correcciones Compañía/Productos 07.11 */
/* 20. Usos por sector: todas las imágenes del mismo tamaño (antes la primera columna salía más ancha) */
@media (min-width: 992px) {
  .gp .apps.sectores .app.sector:nth-child(3n + 1) { padding-left: 0; padding-right: 32px; }
  .gp .apps.sectores .app.sector:nth-child(3n + 2) { padding-left: 16px; padding-right: 16px; }
  .gp .apps.sectores .app.sector:nth-child(3n) { padding-left: 32px; padding-right: 0; }
}
@media (min-width: 641px) and (max-width: 991px) {
  .gp .apps.sectores .app.sector:nth-child(2n + 1) { padding-left: 0; padding-right: 16px; }
  .gp .apps.sectores .app.sector:nth-child(2n) { padding-left: 16px; padding-right: 0; }
}
.gp .apps.sectores .sector-foto { width: 100%; aspect-ratio: 3 / 2; }

/* Correcciones Home/Obras/Novedades 07.11 */
.ol-selects .ol-linea[hidden], .ol-selects label[hidden] { display: none !important; }   /* sin el filtro por línea (Silvi, punto 25) */
.prensa-fotos figure:last-child { grid-column: auto !important; }   /* la última foto no se agranda: Salta 2022 queda chica (punto 28) */
.texto .prensa-fotos figure:last-child img { aspect-ratio: 3 / 2 !important; }
/* 33. Representaciones: los logos en recuadros, como en Afiliaciones; nombre y texto debajo */
.gp .texto .reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 0; margin: 18px 0 32px; max-width: none; }
.gp .texto .rep { margin: 0; }
.gp .texto .rep h3, .gp .texto .rep p { padding-right: 24px; }
/* los recuadros pegados, como la tira de Afiliaciones */
.gp .texto .rep-caja { height: 108px; display: grid; place-items: center; padding: 16px; border: 1px solid var(--rule); border-left: 0; background: var(--paper); margin-bottom: 14px; }
.gp .texto .rep:first-child .rep-caja { border-left: 1px solid var(--rule); }
.gp .texto .rep-caja img { max-height: 52px; max-width: 84%; width: auto; height: auto; filter: grayscale(1); }
.gp .texto .rep h3 { font-size: 17px; margin: 0 0 6px; }
.gp .texto .rep p { font-size: 15px; margin: 0; color: var(--ink-2); }
@media (max-width: 767px) { .gp .texto .reps { grid-template-columns: 1fr; } .gp .texto .rep-caja { height: 88px; border-left: 1px solid var(--rule); } .gp .texto .rep h3, .gp .texto .rep p { padding-right: 0; } }

/* Correcciones Servicios 07.11 */
/* 4. Botones rojos y de descarga: letras blancas en todo el sitio («.texto a» los oscurecía) */
.gp .texto a.btn-red, .gp .texto a.btn-red:visited, .gp .texto a.btn-red:hover, .gp .texto a.btn-red:focus,
.gp a.btn-red, .gp a.btn-red:visited, .gp a.btn-red:hover, .gp button.btn-red,
.gp .texto a.btn-download, .gp .texto a.btn-dark { color: #fff !important; text-decoration: none !important; }
.gp .texto a.btn-line, .gp .texto a.btn-white { text-decoration: none; }
.gp .texto a.btn-line:hover { color: #fff; }
/* 16. Logística: la foto principal más grande (en celular sigue a todo el ancho) */
@media (min-width: 992px) { .serv-top.foto-grande { grid-template-columns: 8fr 4fr; } }
/* 18. LogSystem: la foto mucho más chica */
.texto img.logsystem-foto, img.logsystem-foto { display: block; width: 100%; max-width: 340px; height: auto; }
/* 35. El título del listado no se corta: «Accesorios tubería corrugada» entra en un renglón en escritorio; en celular, «tubería corrugada» va junta */
@media (min-width: 992px) { .lst-head { grid-template-columns: minmax(max-content, 5fr) 7fr; } }
/* 37. Tubería sustentable: la misma raya y el mismo aire que las corrugadas y las sólidas, sin la botonera */
.cuenta.cuenta-sola { margin: 0 0 18px; padding-top: 14px; border-top: 2px solid var(--ink); }
/* 38. Guía del PEAD: más aire después del título (solo el espacio; el texto y el SEO no cambian) */
.guia-intro h1.page-title { margin-bottom: 28px; }
@media (max-width: 640px) { .guia-intro h1.page-title { margin-bottom: 20px; } }

/* 09.11 (Silvi: «agrandá un poco las imágenes de la familia de accesorios, en los dos tipos de tubería»):
   en los listados de accesorios la pieza se ve más grande dentro de la tarjeta (las fotos traen margen blanco) */
.lst.acc .prod .foto { overflow: hidden; }
.lst.acc .prod .foto img { padding: 4px 8px 0; transform: scale(1.14); transform-origin: 50% 55%; }

/* 09.11 · Fichas: «Volver» a la familia o al listado, arriba de la foto */
.ficha-volver { margin: 22px 0 -6px; font-size: 15px; font-weight: 700; }
.ficha-volver a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }
.ficha-volver a:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--red); }

/* 09.11 (Silvi: «en el home, Obras, usá el criterio del botón Obras, así todo queda igual»): las obras de la portada
   con el mismo formato que la página Obras: título, la tubería en negrita y, abajo, diámetro, longitud y lugar */
.obra h3 { font-size: 17px; line-height: 1.3; margin: 14px 0 4px; }
.obra .obra-prod, .obra .obra-lugar { margin: 0; font-size: 15px; line-height: 1.4; }
.obra .obra-prod { color: var(--ink); font-weight: 700; }
.obra .obra-lugar { color: var(--ink-2); }

/* 09.11 (Silvi: «achicá las caras de los que están en Equipo»): las fotos de Equipo, más chicas */
.texto .directivo img { width: 124px; height: 124px; margin-bottom: 12px; }
.directivos { margin-top: 18px; }
@media (max-width: 767px) { .texto .directivo img { width: 112px; height: 112px; } }

/* 09.11 · Más antecedentes: nota de que la lista se sigue completando */
.ant .ant-nota { margin: -6px 0 16px; font-size: 14px; color: var(--ink-2); font-style: italic; }

/* 09.11 (Silvi: «en Estados contables quedaron subrayados, sacá eso»): las filas de documentos de Inversores sin subrayado;
   «Solicitar →» abre el formulario de contacto con el pedido escrito */
.texto .descarga.doc, .texto .descarga.doc:hover { text-decoration: none; }
.texto .descarga.doc b { text-decoration: none; }
.texto .descarga.doc .pedir { color: var(--ink); font-weight: 700; font-size: 15px; white-space: nowrap; }
.texto .descarga.doc:hover .pedir { color: var(--red); }

/* 09.11 · Piezas especiales: la galería de fotos de la planta, separada de las fichas */
.lst h2.acc-tit { margin: 56px 0 16px; }

/* 09.11 (Silvi: «en corrugado, los botones de Diámetro y Tarjetas, ponelos en el mismo lugar que en sólidos»): en el celular la banda negra
   tiene un alto mínimo parejo, así una frase de dos renglones («Flexibilidad global») no corre los filtros más abajo que en otra página */
@media (max-width: 991px) { .banda .wrap { min-height: 212px; box-sizing: border-box; } }
/* 09.11: en inglés los estados contables van sin link (se piden por mail): sin hover */
.texto div.descarga.doc:hover b { text-decoration: none; }
/* 09.11 (auditoría): en el banner, que el último renglón no quede con una sola palabra («…hace más de 42 / años.»).
   pretty evita la palabra sola (Chrome, Edge, Safari); donde no existe, balance empareja los renglones (Firefox). */
.banda .bajada, .banda .frase { text-wrap: balance; text-wrap: pretty; }
/* 09.11 (auditoría): Novedades muestra 8 fotos de ferias y el resto con «Ver más fotos» */
.prensa-fotos.corta figure.mas { display: none; }
.prensa-mas { margin: -8px 0 28px; }
@media (max-width: 991px) {
  .prensa-fotos.corta figure:nth-child(8) { grid-column: 1 / -1 !important; }
  .texto .prensa-fotos.corta figure:nth-child(8) img { aspect-ratio: 2 / 1 !important; }
}