/* =========================================================
   Tanzaca — Hoja de estilos principal
   Sitio estático (HTML/CSS/JS) listo para cPanel.
   ========================================================= */

/* ---------- 0. Tipografía Exo alojada en el sitio ----------
   Solo 3 pesos (400 texto · 500 títulos · 700 énfasis y etiquetas), subconjunto latino
   (incluye tildes, ñ, ¿ y ¡). Archivos en assets/fonts/. font-display: swap evita texto invisible. */
@font-face { font-family: "Exo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/exo-400.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/exo-500.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/exo-700.woff2") format("woff2"); }

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca */
  --accent: #E66210;          /* naranja del logo: acentos, detalles sobre fondo oscuro */
  --accent-strong: #C4500A;   /* variante para fondos de botón con texto blanco (contraste AA 4.6:1) */
  --accent-deep: #A94407;     /* hover de botones */
  --accent-bright: #FF4400;
  --brown: #4C1B00;
  --ink: #070404;             /* negro cálido */
  --ink-2: #16100D;
  --gray: #54595F;

  /* Neutros — tema oscuro */
  --bg: #0B0807;              /* fondo general (casi negro) */
  --bg-alt: #1A1512;          /* secciones alternas: carbón cálido, claramente distinto de --bg */
  --surface: #241D19;         /* tarjetas y paneles */
  --surface-2: #2F2621;       /* etiquetas, hover */
  --line: rgba(255, 255, 255, .11);
  --heading: #F6F2EE;         /* títulos */
  --text: #D8D0C8;            /* texto de párrafo */
  --text-muted: #A89F97;      /* texto secundario (AA sobre --bg y --surface) */
  --on-dark: #FFFFFF;
  --on-dark-muted: #BDB6B0;
  color-scheme: dark;

  /* Tipografía */
  --font: "Exo", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-hero: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem);

  /* Espaciado */
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --radius: 4px;
  --container: 1320px;
  --header-h: 76px;          /* alto del header COMPACTO (el que se ve al hacer scroll); lo usan los elementos sticky */
  --header-h-top: 100px;     /* alto del header arriba de todo (logo grande) */
  --utility-h: 40px;

  --shadow: 0 18px 40px -18px rgba(7, 4, 4, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Alto visible de la ventana (02/10/2026). 100svh descuenta las barras del navegador en móviles, pero los navegadores
   anteriores a 2022 (Safari < 15.4, Chrome < 108) no conocen esa unidad. OJO: una declaración que mezcla una unidad
   desconocida con var() NO cae a la declaración anterior: queda inválida y la propiedad se pierde (así se aplastaban el
   hero y la sección de Servicios en esos navegadores). Por eso el respaldo se decide aquí, una sola vez, con @supports,
   y el resto de la hoja usa var(--vh-s). No escribir "100svh" junto a un var() en ninguna otra parte. */
:root { --vh-s: 100vh; }
@supports (height: 100svh) { :root { --vh-s: 100svh; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

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

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

.hide-sm { display: none; }
@media (min-width: 720px) { .hide-sm { display: initial; } }

/* ---------- 3. Tipografía de sección ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.eyebrow--light { color: var(--on-dark-muted); }

/* Títulos de sección en Exo 500 (antes 300: sobre fondo oscuro se veían finos y débiles) */
.section-title { font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: var(--heading); }
.section-title--light { color: var(--on-dark); }
.section-lead { color: var(--text-muted); max-width: 42ch; font-size: var(--fs-base); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: var(--on-dark); border-block: 1px solid var(--line); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* ---------- 4. Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .8rem 1.6rem;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em;
  border-radius: var(--radius); border: 1.5px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
  white-space: nowrap;
}
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: var(--fs-xs); }
.btn--primary { background: var(--accent-strong); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--outline { border-color: rgba(255,255,255,.55); color: var(--heading); }
.btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Secundario de marca: fondo transparente, borde y texto naranja; al pasar el cursor se rellena */
.btn--outline-accent { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--outline-accent:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: var(--fs-sm); color: var(--heading);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color .2s;
}
.link-arrow::after { content: "→"; color: var(--accent); transition: transform .25s var(--ease); }
.link-arrow:hover { border-color: var(--accent); }
.link-arrow:hover::after, a:hover .link-arrow::after { transform: translateX(4px); }

/* ---------- 5. Barra superior (compartida por las 3 Tanzaca) ----------
   Izquierda: selector Energy · Industry · Marine. Derecha: contacto + idioma.
   Se separa del header para que la navegación principal quede con pocos enlaces
   y todos en el mismo estilo (tipo oración). */
.utility-bar { position: sticky; top: var(--header-h-top); z-index: 99; transition: transform .25s var(--ease), top .25s var(--ease); }
.utility-bar.is-stuck { top: var(--header-h); }
.utility-bar.is-hidden { transform: translateY(-101%); }
.utility-bar { background: #120E0C; color: var(--on-dark-muted); font-size: var(--fs-xs); border-bottom: 1px solid rgba(255,255,255,.06); }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--utility-h); gap: 1rem; }
.utility-bar__end { display: flex; align-items: center; gap: 1.25rem; }
.utility-bar__list { display: flex; gap: 1.5rem; align-items: center; }
.utility-bar a:hover { color: #fff; }
.utility-bar .icon { margin-right: .4rem; color: var(--accent); }
.utility-bar__phone { display: inline-flex; align-items: center; min-height: 32px; }
.hide-lg { display: none; }
@media (min-width: 1100px) { .hide-lg { display: initial; } }

.divisions-nav { display: flex; align-items: center; gap: .75rem; align-self: stretch; }
.divisions-nav__label {
  position: relative; display: inline-flex; align-items: center; align-self: stretch; margin-right: .75rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d8680; line-height: 1;
  transition: color .15s;
}
/* separador vertical (antes era border-right del texto) */
.divisions-nav__label::before { content: ""; position: absolute; right: -.75rem; top: 50%; height: .95em; margin-top: -.475em; border-right: 1px solid rgba(255,255,255,.14); }
/* misma marca de "seleccionado" que Energy / Marine: texto blanco + subrayado naranja */
.divisions-nav__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.divisions-nav__label:hover { color: #fff; }
.divisions-nav__label:hover::after, .divisions-nav__label.is-current::after { transform: scaleX(1); }
.divisions-nav__label.is-current { color: #fff; }
.divisions-nav__list { display: flex; align-items: stretch; height: 100%; gap: .25rem; }
.divisions-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 .6rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted);
  transition: color .15s;
}
.divisions-nav__link::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.divisions-nav__link:hover { color: #fff; }
.divisions-nav__link:hover::after, .divisions-nav__link.is-current::after { transform: scaleX(1); }
.divisions-nav__link.is-current { color: #fff; }
@media (max-width: 599px) { .divisions-nav__label { display: none; } }
@media (max-width: 479px) {
  .divisions-nav__list { gap: 0; }
  .divisions-nav__link { padding: 0 .5rem; letter-spacing: .06em; font-size: .75rem; }
  .utility-bar__end { gap: .6rem; }
  .divisions-nav__list li:first-child .divisions-nav__link { padding-left: 0; }
  .divisions-nav__list li:first-child .divisions-nav__link::after { left: 0; }
}

/* ---------- 6. Header / navegación ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); /* sin backdrop-filter: rompería el menú móvil position:fixed */
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 8px 28px -12px rgba(0,0,0,.6); }
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h-top); transition: height .25s var(--ease); }
.site-header.is-scrolled .site-header__inner { height: var(--header-h); }

.brand { flex: 0 0 auto; display: flex; align-items: center; }
/* Logo en versión para fondo oscuro (PNG transparente con letras blancas).
   Arriba: 90 px de alto → "OIL & GAS" queda en ~7,5 px de altura de mayúscula (legible).
   Compacto al hacer scroll: 64 px. */
.brand__logo { width: auto; height: 90px; aspect-ratio: 480 / 428; object-fit: contain; transition: height .25s var(--ease); }
.site-header.is-scrolled .brand__logo { height: 64px; }

.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: .25rem; }
.main-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  height: var(--header-h); padding: 0 .8rem;
  font-weight: 500; font-size: var(--fs-sm); color: #fff; letter-spacing: .01em; white-space: nowrap;
}
/* 7 enlaces en el home: entre 1024 y 1279 px se compactan para que quepan en una sola línea junto al botón de cotización */
@media (min-width: 1024px) and (max-width: 1279px) {
  .main-nav__list { gap: 0; }
  .main-nav__link { padding: 0 .55rem; font-size: .8125rem; }
  .main-nav__link::after { left: .55rem; right: .55rem; }
}
.main-nav__link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 14px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.main-nav__link:hover::after,
.main-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
[aria-expanded="true"] > .chev { transform: rotate(-135deg) translateY(-1px); }

.site-header__actions { display: flex; align-items: center; gap: .9rem; }
/* CTA del header: visible en todos los tamaños. En pantallas angostas usa la etiqueta corta. */
.site-header__cta .cta-short { display: none; }
@media (max-width: 480px) {
  .site-header__cta { padding-inline: .9rem; }
  .site-header__cta .cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header__cta .cta-short { display: inline; }
}

.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 2px; }
.lang-switch__btn {
  min-width: 34px; height: 26px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--on-dark-muted);
  transition: background-color .2s, color .2s;
}
.lang-switch__btn[aria-pressed="true"] { background: #fff; color: var(--ink); }
.lang-switch__btn:not([aria-pressed="true"]):hover { color: #fff; }

/* Mega-menú (desktop) */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  animation: megaIn .22s var(--ease);
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__inner { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 2.5rem 2.75rem; }
.mega__intro { padding-right: 1.5rem; border-right: 1px solid var(--line); }
.mega__intro .eyebrow { margin-bottom: .75rem; }
.mega__title { font-size: var(--fs-lg); font-weight: 400; line-height: 1.35; color: var(--heading); margin-bottom: 1.5rem; }
.mega__heading { font-weight: 700; font-size: var(--fs-sm); color: var(--heading); margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.mega__col li + li { margin-top: .5rem; }

/* Si una foto no carga, se oculta el texto alternativo visible (sigue disponible para lectores de pantalla) */
.hero__img, .card__media img, .consult__media img, .photo-band__img, .cta-band__img { color: transparent; }

/* Menú compartido "Credentials" (certificaciones + clientes de las 3 Tanzaca) */
.mega__inner--cred { grid-template-columns: 1fr 1fr 1.35fr; }
.cred-certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cred-cert { display: grid; gap: .4rem; justify-items: center; text-align: center; min-width: 0; }
.cred-cert__logo { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background: #fff; border-radius: 6px; padding: .5rem; }
.cred-cert__logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.cred-cert__name { font-size: .75rem; font-weight: 700; color: var(--text-muted); }
.mega__heading--sub { margin-top: 1.25rem; }
.cred-clients { display: flex; flex-wrap: wrap; gap: .45rem; align-content: flex-start; }
.mega__col .cred-clients li, .mega__col .cred-certs li { margin-top: 0; }
.cred-clients li { font-size: var(--fs-xs); font-weight: 700; color: var(--heading); background: var(--surface-2); border-radius: 4px; padding: .35rem .7rem; }

/* Botón hamburguesa */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .25s, opacity .2s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Navegación móvil / tablet (≤ 1023 px: el mismo corte que usa main.js). Desde 1024 px el menú completo + CTA caben también en español. */
@media (max-width: 1023px) {
  :root { --header-h: 64px; --header-h-top: 80px; }
  .brand__logo { height: 72px; }
  .site-header.is-scrolled .brand__logo { height: 56px; }
  .nav-toggle { display: block; margin-right: -8px; }
  .site-header__actions { margin-left: auto; gap: .6rem; }
  .main-nav {
    position: fixed; inset: var(--nav-top, calc(var(--header-h-top) + var(--utility-h))) 0 0 0; margin: 0;
    background: var(--ink); overflow-y: auto; padding: .5rem var(--gutter) 3rem;
    transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s;
  }
  .main-nav.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease); }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav__list > li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav__link { width: 100%; height: auto; padding: 1.1rem 0; font-size: var(--fs-lg); justify-content: space-between; }
  .main-nav__link::after { display: none; }
  .mega { position: static; box-shadow: none; border: 0; animation: none; background: transparent; }
  .mega__inner, .mega__inner--cred { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 0 1.5rem; }
  .mega .container { padding-inline: 0; }
  .mega__intro { border: 0; padding: 0; }
  .mega__intro .eyebrow, .mega__title { display: none; }
  .mega__heading { color: #fff; }
  .cred-certs { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, calc(var(--vh-s) - var(--header-h-top) - var(--utility-h)), 860px);
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.hero__slide picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { object-fit: cover; transform: scale(1.06); transition: transform 7s linear; background: #1b1512; }
.hero__slide.is-active .hero__img { transform: scale(1); }
.hero__slide::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(7,4,4,.86) 0%, rgba(7,4,4,.55) 45%, rgba(7,4,4,.12) 80%),
    linear-gradient(0deg, rgba(7,4,4,.55) 0%, rgba(7,4,4,0) 35%);
}
.hero__content { position: relative; z-index: 1; padding-block: 6rem 8rem; }
.hero__title { font-size: var(--fs-hero); font-weight: 700; line-height: 1.04; letter-spacing: -.015em; max-width: 19ch; margin-bottom: 1.25rem; }
.hero__text { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); font-weight: 400; color: rgba(255,255,255,.9); max-width: 46ch; margin-bottom: 2.25rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__slide .hero__content > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero__slide.is-active .hero__content > * { opacity: 1; transform: none; }
.hero__slide.is-active .hero__content > :nth-child(2) { transition-delay: .1s; }
.hero__slide.is-active .hero__content > :nth-child(3) { transition-delay: .2s; }
.hero__slide.is-active .hero__content > :nth-child(4) { transition-delay: .3s; }

.hero__controls {
  position: relative; z-index: 2; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2rem;
}
.hero__progress { flex: 1; max-width: 320px; height: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.hero__progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.hero__progress span.is-running { animation: heroProgress var(--hero-interval, 7s) linear forwards; }
.hero.is-paused .hero__progress span { animation-play-state: paused; }
@keyframes heroProgress { to { width: 100%; } }
.hero__nav { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-sm); font-weight: 500; letter-spacing: .08em; }
.hero__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5);
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center; padding-bottom: 3px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.hero__arrow:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero__counter { min-width: 3.5rem; text-align: center; }
@media (max-width: 719px) {
  .hero__content { padding-block: 4rem 7rem; align-self: flex-end; }
  .hero__ctas .btn { flex: 1 1 100%; }
  /* Móvil: el texto ocupa todo el ancho sobre la foto, así que el degradado lateral no alcanza.
     Velo general más fuerte + degradado vertical desde abajo, donde está el texto. */
  .hero__slide::after {
    background:
      linear-gradient(0deg, rgba(7,4,4,.96) 0%, rgba(7,4,4,.88) 45%, rgba(7,4,4,.55) 75%, rgba(7,4,4,.35) 100%);
  }
  .hero__title, .hero__text { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
}

/* ---------- 8a. Intro + franja de respaldo (cifras, clientes, sellos) ---------- */
.intro__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 4rem); align-items: center; }
@media (min-width: 960px) { .intro__grid { grid-template-columns: 1fr 1fr; align-items: end; } }
.intro__head .section-title { margin-bottom: 0; }
.intro__lead { color: var(--text); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 400; max-width: 56ch; margin-bottom: 1.75rem; }

/* Cifras */
.intro-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-block: 1px solid var(--line);
}
.intro-stat { display: grid; align-content: center; gap: .35rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) clamp(.75rem, .5rem + 1.5vw, 2rem); }
.intro-stat + .intro-stat { border-left: 1px solid var(--line); }
.intro-stat:first-child { padding-left: 0; }
.intro-stat__num { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--heading); }
.intro-stat__num span { color: var(--accent); margin-left: .05em; }
.intro-stat__label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.35; }
@media (max-width: 559px) {
  .intro-stat { padding-inline: .6rem; }
  .intro-stat__label { font-size: var(--fs-xs); }
}

/* Clientes + sellos */
.proof { display: grid; gap: 2rem 4rem; padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
@media (min-width: 960px) { .proof { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.proof__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d8680; margin-bottom: 1rem; }
.proof__clients { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.25rem; --logo-rest: .9; --logo-slot: 2.75rem; }   /* logos blancos del mismo componente que el home (.logo-item) */
.client-mark { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 700; letter-spacing: .02em; color: #CFC7BF; white-space: nowrap; }
.client-mark--logo { height: 30px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .85; }
.proof__seals { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Certificaciones de Energy: logos en blanco sin ficha (misma variante "trust" y tratamiento por logoKind que el home, sección 20).
   Las variables --logo-* del home viven en .trust; aquí se repiten para este grupo. */
.proof__group--certs {
  --logo-slot-sub: 2.5rem; --logo-h-sub: 1.875rem; --logo-h-sub-lg: 2.25rem; --logo-h-sub-xl: 3.25rem; --logo-rest-sub: .75;
}
.proof__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.logo-item--sub[data-size="xl"] .logo-item__img { height: var(--logo-h-sub-xl, 3.25rem); }
/* Certificaciones de Energy: INEA y RACDA a la altura de Testek y SNC (52 px); OMI, que es ancho, algo más bajo (40 px).
   max-width:none porque la regla base limita el ancho a 8,5 rem y deformaría el logo ancho de OMI. */
.proof__logos .logo-item--sub[data-id="inea"] .logo-item__img,
.proof__logos .logo-item--sub[data-id="racda"] .logo-item__img { height: var(--logo-h-sub-xl, 3.25rem); max-width: none; }
.proof__logos .logo-item--sub[data-id="omi"] .logo-item__img { height: 2.5rem; max-width: none; }
@media (max-width: 559px) { .proof__logos { gap: .9rem 1.75rem; } }

/* (Heredado) Fichas blancas de los sellos: ya no se usan en energy.html; siguen definidas por si otra página usa data-variant="seals" */
.seal { display: grid; justify-items: center; gap: .4rem; }
.seal__logo { display: grid; place-items: center; width: 84px; height: 60px; background: #fff; border-radius: 6px; padding: .4rem .5rem; }
.seal__logo img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.seal__name { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); text-align: center; }
@media (max-width: 559px) {
  .proof__seals { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .seal__logo { width: 100%; height: 52px; }
  .seal__name { font-size: .625rem; letter-spacing: 0; }
  .proof__clients { gap: .6rem 1.5rem; }
}

/* ---------- 8. Divisiones ---------- */
.divisions { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .divisions { grid-template-columns: 1fr 1fr; } }
.division {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  min-height: clamp(420px, 40vw, 560px); background: var(--ink-2); color: #fff; isolation: isolate;
}
.division img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: -2; }
.division::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,4,4,.92) 0%, rgba(7,4,4,.5) 45%, rgba(7,4,4,.05) 75%); }
.division:hover img { transform: scale(1.05); }
.division__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.division__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .75rem; }
.division__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 500; line-height: 1.15; max-width: 20ch; margin-bottom: .85rem; }
.division__text { color: rgba(255,255,255,.82); max-width: 44ch; margin-bottom: 1.4rem; }
.division .link-arrow { color: #fff; }
.division .link-arrow::after { color: var(--accent); }
.division:hover .link-arrow { border-color: var(--accent); }

/* ---------- 9. Cifras ---------- */
.stats { background: var(--ink); color: #fff; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { border-left: 2px solid rgba(255,255,255,.14); padding-left: 1.25rem; }
.stat__num { font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; margin-bottom: .5rem; }
.stat__label { color: var(--on-dark-muted); font-size: var(--fs-sm); text-transform: lowercase; }
.stat__label::first-letter { text-transform: uppercase; }

/* ---------- 10. Servicios: pista horizontal con scroll propio (02/10/2026) ----------
   La sección YA NO se fija ni convierte el scroll vertical en horizontal: mide lo que mide su contenido y, si se sigue
   bajando, la página pasa a la sección siguiente. Las tarjetas se recorren de lado dentro de .hscroll__track, que tiene
   scroll horizontal nativo (gesto táctil, trackpad, Mayús + rueda, teclado), arrastrándolas con el mouse (clic
   sostenido + mover, main.js §8b) o con la barra de abajo
   (.hscroll__progress), que main.js §8b convierte en una barra de desplazamiento arrastrable. Sin JS se ve la barra
   nativa del navegador.
   Los nombres de clase se conservan aunque .hscroll__sticky ya no sea "sticky": los generadores de tarjetas
   (generar-servicios.py y generar-servicios-marine.py) buscan este marcado.
   No volver a fijar la sección ni a ligar la pista al scroll vertical salvo que Victor lo pida. */
.hscroll {
  position: relative; background: var(--bg-alt);
  padding-block: calc(var(--section-y) - .5rem) calc(var(--section-y) - 2.75rem);   /* descuenta el aire propio de la pista y de la barra */
}
.hscroll__sticky {
  position: relative;
  container-type: inline-size;                                            /* habilita 100cqw */
  --hs-w: 100vw;                                                          /* ancho del visor para la pista (respaldo) */
  --hs-gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  /* borde izquierdo: el primer panel arranca alineado con el contenedor del resto del sitio */
  --hs-edge: max(var(--gutter), calc((var(--hs-w) - var(--container)) / 2 + var(--gutter)));
  /* alto de las tarjetas: el mismo de cuando la sección era fija (caben completas bajo el header), con tope de 38rem.
     --vh-s: 100svh, o 100vh donde no existe (ver sección 1) */
  --hs-card-h: min(calc(var(--vh-s) - var(--header-h) - 5.5rem), 38rem);
}
@supports (width: 1cqw) { .hscroll__sticky { --hs-w: 100cqw; } }          /* sin la barra de desplazamiento de Windows */
.hscroll__track {
  display: flex; align-items: stretch; gap: var(--hs-gap);
  /* min-height y no height: si un texto no cabe, la pista crece en vez de cortar la tarjeta.
     .5rem arriba y 1.75rem abajo: aire para el borde de foco y la sombra (el scroll recorta lo que sobresale). */
  min-height: calc(var(--hs-card-h) + 2.25rem);
  padding: .5rem 0 1.75rem var(--hs-edge);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;                                         /* el gesto lateral no dispara "atrás" del navegador */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255,255,255,.14);
}
/* Margen del final de la pista: un elemento vacío en vez de padding-right (hay navegadores que no cuentan el padding
   final de un contenedor con scroll y dejarían la última tarjeta pegada al borde). Con el gap suma un --gutter. */
.hscroll__track::after { content: ""; flex: none; width: max(1px, calc(var(--gutter) - var(--hs-gap))); }

/* Panel de introducción (primer "slide" de la pista) */
.hscroll__intro { flex: none; width: min(30rem, 82vw); padding-right: clamp(1rem, 2vw, 3rem); }
.hscroll__intro .section-title { margin-bottom: 1.25rem; }
.hscroll__hint { display: inline-flex; align-items: center; gap: .75rem; margin-top: 2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); }
.hscroll__hint-arrow { position: relative; width: 44px; height: 2px; background: var(--accent); }
.hscroll__hint-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }

/* Barra de desplazamiento de la pista. La activa main.js §8b (clase .hscroll--bar en la sección): el tramo naranja
   mide la parte visible de la pista y se arrastra; un clic en la barra salta a ese punto. La zona sensible es toda la
   altura del contenedor (1.75rem), aunque la línea mida 4 px. Sin JS no se muestra: queda la barra nativa.
   Cuentas de alto: aire de la pista (.5rem + 1.75rem) + barra (1.75rem - .75rem) = 3.25rem, menos que lo que --hs-card-h
   descuenta del alto de la ventana (3.5rem como mínimo): tarjetas y barra caben juntas bajo el header. */
.hscroll__progress {
  display: none; position: relative; height: 1.75rem; margin: -.75rem var(--hs-edge) 0;   /* sube sobre el aire inferior de la pista: la línea queda a ~30 px de las tarjetas */
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.hscroll__progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255,255,255,.14); }
.hscroll__progress span {
  position: absolute; left: 0; top: 50%; width: 25%; height: 4px; margin-top: -2px; border-radius: 4px;
  background: var(--accent); cursor: grab; will-change: transform;
  transition: height .15s var(--ease), margin-top .15s var(--ease);
}
.hscroll__progress span::after { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; bottom: -.75rem; }   /* zona de agarre */
.hscroll__progress:hover span, .hscroll__progress.is-dragging span { height: 8px; margin-top: -4px; }
.hscroll__progress.is-dragging, .hscroll__progress.is-dragging span { cursor: grabbing; }
.hscroll--bar .hscroll__progress { display: block; }
.hscroll--bar.hscroll--fits .hscroll__progress { display: none; }          /* todo cabe: no hay nada que desplazar */
.hscroll--bar .hscroll__track { scrollbar-width: none; -ms-overflow-style: none; }
.hscroll--bar .hscroll__track::-webkit-scrollbar { display: none; }
/* Arrastre con el mouse (clic sostenido + mover). main.js §8b pone .hscroll--drag en la sección y, mientras se arrastra,
   .is-dragging en la pista: mano cerrada, sin selección de texto y sin efectos de hover en las tarjetas. */
.hscroll--drag .hscroll__track { cursor: grab; }
.hscroll--drag .hscroll__track.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.hscroll--drag .hscroll__track.is-dragging * { pointer-events: none; }

/* Tarjetas de servicio */
.hs-card {
  flex: none; display: flex; flex-direction: column;
  width: clamp(20rem, 40vw, 36rem);                                      /* más anchas: ~576 px en escritorio; el alto lo da la pista (--hs-card-h) */
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(0,0,0,.8);
}
.hs-card__media { position: relative; flex: 1 1 0; min-height: 6.5rem; background: var(--ink-2); overflow: hidden; }
.hs-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; transition: transform .8s var(--ease); }
.hs-card:hover .hs-card__media img { transform: scale(1.04); }
.hs-card__body { flex: none; display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.15rem, .9rem + 1vw, 1.9rem); }
.hs-card__num { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.hs-card__num span { color: var(--text-muted); font-weight: 500; }
.hs-card__title { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.95rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--heading); }
.hs-card__text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
/* Etiquetas: texto con un cuadrito de acento, sin borde ni fondo */
.hs-card__chips { display: flex; flex-direction: column; gap: .3rem; }
.hs-card__chips li { position: relative; padding-left: .95rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; line-height: 1.4; color: #CFC7BF; }
.hs-card__chips li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--accent); }
.hs-card .link-arrow { align-self: flex-start; margin-top: .2rem; }

@media (max-width: 719px) {
  .hscroll__sticky { --hs-card-h: min(calc(var(--vh-s) - var(--header-h) - 4.5rem), 38rem); }
  .hs-card { width: min(88vw, 26rem); }
  .hscroll__intro { width: 84vw; }
}
/* Pantallas bajas (laptops de 768 px, teléfonos pequeños): textos más compactos */
@media (max-height: 700px) {
  .hscroll__sticky { --hs-card-h: calc(var(--vh-s) - var(--header-h) - 3.5rem); }
  .hs-card__body { gap: .5rem; padding: 1rem 1.1rem 1.1rem; }
  .hs-card__title { font-size: 1.35rem; }
  .hs-card__text { font-size: .875rem; line-height: 1.45; }
}

/* ---------- 11. Pestañas y tarjetas ---------- */
.tabs { display: inline-flex; gap: .25rem; border-bottom: 1px solid var(--line); }
.tabs__btn {
  position: relative; padding: .85rem 1.2rem; font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted);
  transition: color .2s;
}
.tabs__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .25s var(--ease); }
.tabs__btn[aria-selected="true"] { color: var(--heading); }
.tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__btn:hover { color: var(--heading); }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fadeUp .45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cards { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.card { display: flex; flex-direction: column; background: transparent; }
.card__media { overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.card__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 0 0; flex: 1; }
.card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; color: var(--heading); }
.card__title a:hover { color: var(--accent); }
.card__text { color: var(--text-muted); font-size: var(--fs-sm); }
.card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .5rem; }
.card__meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.card--news .card__media img { aspect-ratio: 16 / 10; }

/* ---------- 11b. Proyectos ---------- */
/* Proyecto activo — layout dividido: contenido a la izquierda, fotografía a sangre a la derecha.
   El contenedor recorta (overflow hidden + radio) la foto, así sus esquinas exteriores derechas quedan
   redondeadas y fusionadas con el bloque. En móvil la foto se apila arriba (order: -1). */
.project-featured {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr; align-items: stretch;
  background: linear-gradient(135deg, #2B2019 0%, var(--surface) 60%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
  box-shadow: 0 30px 70px -34px rgba(230,98,16,.3), 0 20px 40px -24px rgba(0,0,0,.8);
}
@media (min-width: 900px) { .project-featured { grid-template-columns: 1.1fr 1fr; } }

.project-featured__content {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
/* Fotografía: llena el 100 % de alto y ancho de su mitad, sin bordes internos */
.project-featured__media { position: relative; order: -1; aspect-ratio: 16 / 10; min-height: 0; }
.project-featured__media picture { position: absolute; inset: 0; display: block; }
.project-featured__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 900px) { .project-featured__media { order: 0; aspect-ratio: auto; min-height: 100%; } }

.project-featured__badge {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--accent-strong); border-radius: 999px; padding: .4rem .9rem .4rem .75rem;
}
.project-featured__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.project-featured__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.project-featured__client { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
/* Contraste reforzado: título blanco puro, párrafo gris muy claro */
.project-featured__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 500; letter-spacing: -.02em; color: #fff; line-height: 1.05; margin-bottom: 1rem; }
.project-featured__text { color: #E6E1DC; max-width: 60ch; }
.project-featured__standards { display: flex; gap: .5rem; margin-top: 1.5rem; }
.project-featured__standards li { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: #fff; border-bottom: 2px solid var(--accent); padding: .15rem .1rem; }
.project-featured__standards li + li { margin-left: .75rem; }

/* Alcance del trabajo: sin recuadro interior ni numeración; cuadrícula 2×2 con íconos naranjas */
.project-featured__scope { align-self: stretch; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.project-featured__scope-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #D9D3CD; margin-bottom: 1.1rem; }
.project-featured__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.project-featured__list li { display: flex; align-items: center; gap: .8rem; font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; color: #fff; }
.project-featured__icon { flex: none; width: 28px; height: 28px; color: var(--accent); }
.project-featured .btn--outline-accent { margin-top: 2rem; }
@media (max-width: 420px) { .project-featured__list { gap: 1rem; } .project-featured__list li { gap: .6rem; } .project-featured__icon { width: 24px; height: 24px; } }

.projects__subhead { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d8680; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.projects__subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Proyectos ejecutados — tarjetas uniformes */
/* Tres columnas desde 1024 px (antes 1200) para que no quede una tarjeta huérfana en tableta */
@media (min-width: 1024px) and (max-width: 1199px) { #projects .cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.project { position: relative; }
/* Foto siempre 16:9; la imagen se recorta por dentro (object-fit) para que todas las tarjetas midan igual */
.project .card__media { aspect-ratio: 16 / 9; }
.project .card__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% var(--focus-y, 50%); transition: transform .7s var(--ease); }
.project:hover .card__media img { transform: scale(1.06); }
/* Ubicación: naranja, mayúsculas y letras ligeramente separadas */
.project .card__meta { color: var(--accent); letter-spacing: .16em; }
.project .card__title a { transition: color .3s var(--ease); }
.project:hover .card__title a, .project__link:focus-visible { color: var(--accent); }
/* Descripción: gris más claro y máximo 3 líneas (puntos suspensivos si es más larga) */
.project .card__text {
  color: #CFC7BF;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* Enlace estirado: el ::after del título cubre toda la tarjeta (toda la tarjeta es el área de clic) */
.project__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.project__link:focus-visible { outline: none; }
.project__link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 4px; }
.project { cursor: pointer; }

/* ---------- 11c. Utilidades ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Redes sociales (barra superior y footer) */
.social { display: flex; align-items: center; gap: .35rem; }
.social__link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--on-dark-muted); transition: color .2s, background-color .2s; }
.social__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.social--footer { gap: .6rem; margin-top: 1.25rem; }
.social--footer .social__link { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.social--footer .social__link:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.social--footer svg { width: 20px; height: 20px; }
@media (max-width: 719px) { .social--bar { display: none; } }   /* en móvil quedan en el footer */

/* ---------- 12. Nosotros ---------- */
.about { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 960px) { .about { grid-template-columns: 1fr 1fr; } }
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 11 / 10; object-fit: cover; border-radius: var(--radius); background: #d9d4ce; filter: grayscale(.15); }
.about__badge {
  position: absolute; left: clamp(-1rem, -2vw, 0rem); bottom: -1.5rem;
  background: var(--ink); color: #fff; padding: 1.25rem 1.6rem; border-radius: var(--radius);
  display: grid; gap: .15rem; box-shadow: var(--shadow);
}
.about__badge strong { font-size: 2.4rem; font-weight: 500; line-height: 1; }
.about__badge span { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.about__body > * + * { margin-top: 1.25rem; }
.about__body .section-title { margin-bottom: .5rem; }
.about__body p { color: var(--text-muted); }
.about__vision { border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.25rem; }
.about__vision p { color: var(--heading); font-size: var(--fs-lg); font-weight: 400; line-height: 1.5; }
.about__body .btn { margin-top: 2rem; }

/* ---------- 13. Consultoría ---------- */
.consult { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 960px) { .consult { grid-template-columns: 1.1fr .9fr; } }
.consult__lead { color: var(--on-dark-muted); max-width: 52ch; margin: 1.25rem 0 2.25rem; }
.consult__groups { display: grid; gap: 1.75rem 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 600px) { .consult__groups { grid-template-columns: 1fr 1fr; } }
.consult__group { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; }
.consult__group h3 { font-size: var(--fs-base); font-weight: 700; color: #fff; margin-bottom: .6rem; }
.consult__group li { position: relative; padding-left: 1rem; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.consult__group li + li { margin-top: .35rem; }
.consult__group li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.consult__media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); background: #2a211d; }
@media (max-width: 959px) { .consult__media img { aspect-ratio: 16 / 10; } }

/* ---------- 13b. Franja de foto a ancho completo ---------- */
.photo-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
.photo-band picture, .photo-band__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-band__img { object-fit: cover; object-position: 50% 45%; z-index: -2; }
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,4,4,.9) 0%, rgba(7,4,4,.62) 50%, rgba(7,4,4,.3) 100%); }
.photo-band__inner { min-height: clamp(360px, 42vw, 540px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3.5rem, 3rem + 3vw, 6rem); }
.photo-band__title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; max-width: 18ch; }
.photo-band__caption { margin-top: auto; padding-top: 2.5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: .6rem; }
.photo-band__caption::before { content: ""; width: 18px; height: 2px; background: var(--accent); flex: none; }
@media (max-width: 719px) {
  .photo-band::before { background: linear-gradient(0deg, rgba(7,4,4,.92) 0%, rgba(7,4,4,.6) 60%, rgba(7,4,4,.4) 100%); }
}

/* ---------- 14. Banda CTA ----------
   Foto real con velo oscuro + el óvalo del logo en trazo naranja (el acento solo como línea
   y en el botón, no como fondo). A la derecha, los canales directos. */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; padding-block: clamp(4.5rem, 3.5rem + 4vw, 7.5rem); border-top: 1px solid var(--line); }
.cta-band picture, .cta-band__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-band__img { object-fit: cover; object-position: 50% 30%; z-index: -3; filter: grayscale(.35); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(7,4,4,.97) 0%, rgba(7,4,4,.9) 50%, rgba(25,10,2,.78) 100%); }
.cta-band__ring { position: absolute; z-index: -1; width: min(980px, 110vw); right: -18%; top: 50%; transform: translateY(-50%) rotate(-8deg); fill: none; stroke: var(--accent); pointer-events: none; }
.cta-band__ring ellipse:first-child { stroke-width: 2; opacity: .55; }
.cta-band__ring ellipse:last-child { stroke-width: 1; opacity: .25; }
.cta-band__inner { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 960px) { .cta-band__inner { grid-template-columns: 1.3fr 1fr; } }
.cta-band__title { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; }
.cta-band__text { color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin-top: 1rem; max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.btn--lg { min-height: 56px; padding: .9rem 1.9rem; font-size: var(--fs-base); }
.cta-band__card { background: rgba(28,22,18,.82); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.cta-band__card-title { font-weight: 700; color: #fff; margin-bottom: 1rem; }
.cta-band__card ul { display: grid; gap: 1rem; }
.cta-band__card li { display: grid; gap: .2rem; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.cta-band__card li + li { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1rem; }
.cta-band__card a { color: #fff; font-weight: 500; width: fit-content; }
.cta-band__card a:hover { color: var(--accent); }
.cta-band__label { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8d8680; }
@media (max-width: 719px) {
  .cta-band__actions .btn { flex: 1 1 100%; }
  .cta-band__ring { right: -60%; top: 22%; width: 150vw; }
}

/* ---------- 15. Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); font-size: var(--fs-sm); }
.footer__grid { display: grid; gap: 2.5rem; padding-block: clamp(3.5rem, 3rem + 2vw, 5rem); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
/* Footer común (lo escribe herramientas/footer_comun.py): logo · Tanzaca · Energy services · Marine services · Contact */
@media (min-width: 1200px) { .footer__grid { grid-template-columns: 1.15fr .8fr 1.3fr 1.3fr 1.15fr; } }
.footer__logo { height: 90px; width: auto; aspect-ratio: 480 / 428; margin-bottom: 1.25rem; }
.footer__brand p + p { margin-top: 1rem; }
.footer__legal { font-size: var(--fs-xs); color: #8d8680; }
.footer__heading { display: block; color: #fff; font-weight: 700; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
/* Columnas plegables: en escritorio el título no se ve como control */
.footer__col > summary { list-style: none; cursor: default; }
.footer__col > summary::-webkit-details-marker { display: none; }
.footer__col li + li { margin-top: .6rem; }
.footer__col a { transition: color .15s; }
.footer__col a:hover { color: #fff; }
.footer__contact p + p { margin-top: .9rem; }
.partners { display: flex; flex-wrap: wrap; gap: .5rem; }
.partners li { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--on-dark-muted); background: rgba(255,255,255,.05); border-radius: 4px; padding: .35rem .7rem; }
.partners__all { display: none; margin-top: 1rem; font-size: var(--fs-xs); color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); }
.footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; }
.footer__top:hover { color: #fff; }

/* Footer en móvil: columnas plegables (acordeón) y lista de clientes resumida */
@media (max-width: 719px) {
  .footer__grid { gap: 0; padding-block: 2.5rem 1.5rem; }
  .footer__brand { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center; padding-bottom: 1.75rem; }
  .footer__brand picture { grid-row: span 2; }
  .footer__logo { height: 72px; margin: 0; }
  .footer__brand p + p { margin-top: 0; }
  .footer__col { border-top: 1px solid rgba(255,255,255,.1); }
  .footer__col:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer__col > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 1.1rem 0; min-height: 48px; }
  .footer__col > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
  .footer__col[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
  .footer__col > ul, .footer__col > address { padding-bottom: 1.25rem; }
  .footer__partners { padding-block: 1.75rem; }
  .partners--clients li:nth-child(n+7) { display: none; }
  .partners__all { display: inline-flex; }
}

/* ---------- 15b. Botón "volver arriba" (fijo, abajo a la derecha) ----------
   Aparece después de pasar el hero; main.js (sección 8f) lo muestra/oculta y hace el scroll. */
.to-top {
  position: fixed; right: clamp(1rem, .5rem + 1.5vw, 2rem); bottom: clamp(1rem, .5rem + 1.5vw, 2rem); z-index: 90;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-strong); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s, background-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease), background-color .2s; }
.to-top:hover { background: var(--accent-deep); }
.to-top:hover svg { transform: translateY(-2px); }
.to-top svg { transition: transform .2s var(--ease); }
.to-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body.nav-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 719px) { .to-top { width: 46px; height: 46px; } }

/* ---------- 16. Animación de aparición ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 19. Cursor animado del hero (estilo IVECO) ----------
   Zonas: izquierda = diapositiva anterior, derecha = siguiente,
   centro/texto = acceder al contenido de la diapositiva.
   Solo se activa con mouse (hover + puntero fino).               */
.hero.has-cursor, .hero.has-cursor .hero__slide { cursor: none; }
.hero.has-cursor a, .hero.has-cursor button { cursor: pointer; }

.hero-cursor {
  --size: 112px;
  position: absolute; left: 0; top: 0; z-index: 5;
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  pointer-events: none; color: #fff;
  transform: translate3d(var(--x, -200px), var(--y, -200px), 0);
  will-change: transform;
}
.hero-cursor__disc, .hero-cursor__ring, .hero-cursor__halo {
  position: absolute; inset: 0; border-radius: 50%;
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), opacity .3s ease, background-color .3s ease;
}
.hero-cursor__disc {
  display: grid; place-items: center;
  background: rgba(230, 98, 16, .9);
  box-shadow: 0 10px 30px -10px rgba(7, 4, 4, .6);
  transform: scale(0);
}
.hero-cursor__halo { background: rgba(230, 98, 16, .22); transform: scale(0); }
.hero-cursor__ring { z-index: 1; border: 1.5px dashed rgba(255, 255, 255, .75); transform: scale(0); opacity: 0; }

.hero-cursor__arrow, .hero-cursor__open { grid-area: 1 / 1; transition: opacity .25s ease, transform .45s cubic-bezier(.2, .9, .25, 1.15); }
.hero-cursor__arrow { width: 38px; height: 38px; opacity: 0; }
.hero-cursor__open { display: grid; justify-items: center; gap: .2rem; opacity: 0; transform: scale(.6); }
.hero-cursor__plus { transition: transform .5s cubic-bezier(.2, .9, .25, 1.15); transform: rotate(-90deg); }
.hero-cursor__label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* Anterior / siguiente: disco mediano + flecha que "empuja" hacia su lado */
.hero-cursor[data-state="prev"] .hero-cursor__disc,
.hero-cursor[data-state="next"] .hero-cursor__disc { transform: scale(.64); }
.hero-cursor[data-state="prev"] .hero-cursor__halo,
.hero-cursor[data-state="next"] .hero-cursor__halo { transform: scale(.8); animation: cursorPulse 1.6s ease-out infinite; }
.hero-cursor[data-state="prev"] .hero-cursor__arrow--prev,
.hero-cursor[data-state="next"] .hero-cursor__arrow--next { opacity: 1; }
.hero-cursor[data-state="prev"] .hero-cursor__arrow--prev { animation: nudgeLeft 1.1s ease-in-out infinite; }
.hero-cursor[data-state="next"] .hero-cursor__arrow--next { animation: nudgeRight 1.1s ease-in-out infinite; }
@keyframes nudgeRight { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(5px); } }
@keyframes nudgeLeft  { 0%, 100% { transform: translateX(2px); } 50% { transform: translateX(-5px); } }
@keyframes cursorPulse { 0% { transform: scale(.66); opacity: .9; } 100% { transform: scale(1.05); opacity: 0; } }

/* Acceder: disco grande, "+" que gira, etiqueta y anillo punteado rotando */
.hero-cursor[data-state="open"] .hero-cursor__disc { transform: scale(1); }
.hero-cursor[data-state="open"] .hero-cursor__halo { transform: scale(1.3); }
.hero-cursor[data-state="open"] .hero-cursor__ring { transform: scale(1.12); opacity: 1; animation: ringSpin 8s linear infinite; }
.hero-cursor[data-state="open"] .hero-cursor__open { opacity: 1; transform: none; }
.hero-cursor[data-state="open"] .hero-cursor__plus { transform: rotate(0deg); }
@keyframes ringSpin { from { transform: scale(1.12) rotate(0deg); } to { transform: scale(1.12) rotate(360deg); } }

/* Sobre botones/enlaces: se reduce a un punto para no tapar el control */
.hero-cursor[data-state="mini"] .hero-cursor__disc { transform: scale(.1); }

/* Clic: rebote corto */
.hero-cursor.is-pressed .hero-cursor__disc { transition-duration: .12s; transform: scale(.54); }
.hero-cursor.is-pressed[data-state="open"] .hero-cursor__disc { transform: scale(.88); }

/* ---------- 17. Movimiento reducido ---------- */

/* ---------- 18. Quiénes somos: Bento Grid inmersivo ----------
   Capas (de atrás hacia adelante):
   1) .about-bento            fondo negro cálido (--ink)
   2) .about-bento__bg        balancín vectorial a gran escala, 8 % de opacidad, fijo en pantalla
                              mientras se recorre la sección (sticky) + degradados de fundido arriba/abajo
   3) .bento                  mosaico asimétrico de tarjetas de cristal esmerilado; la última celda
                              (CTA) es un bloque sólido naranja
   Contraste (AA): títulos #F6F2EE y párrafos #D8D0C8 sobre cristal ≈ #120D0B → > 12:1.
   CTA: texto #070404 sobre #E66210 → 5,1:1 (hover #FF4400 → 5,9:1). "1984" y etiquetas #E66210 sobre cristal → ≈ 4,8:1. */
.about-bento {
  --glass-bg: rgba(20, 14, 11, .58);
  --glass-line: rgba(255, 255, 255, .10);
  --bento-radius: 14px;
  --bento-gap: clamp(.75rem, .5rem + .8vw, 1.25rem);
  position: relative; isolation: isolate;
  background: var(--ink);
  padding-block: var(--section-y);
}

/* 2) Fondo: el balancín se dimensiona respecto a la SECCIÓN (no a la pantalla) para que la máquina
      completa abarque casi todo su alto y su forma se lea entera: la cabeza de caballo y la viga asoman
      junto al título y el resto se ve a través del cristal y en los huecos del mosaico.
      En móvil (sección muy alta, 1 columna) el escenario pasa a ser sticky de 100svh; ver más abajo. */
/* (El fondo del balancín vive ahora en la sección "Ejecución integrada": ver .process--rig / .rig-bg más abajo.) */
.rig-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; }
.rig-bg__stage { position: absolute; inset: 0; }
.rig-bg__art {
  position: absolute; left: 66%; bottom: -8%; transform: translateX(-50%);
  height: 112%; width: auto; max-width: none; aspect-ratio: 640 / 490;
  opacity: .08;
}
/* Fundido con las secciones vecinas (el balancín no "corta" en seco) */
.rig-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(7, 4, 4, 0) 16%, rgba(7, 4, 4, 0) 84%, var(--ink) 100%);
}

/* Encabezado */
.about-bento__head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.eyebrow--accent { color: var(--accent); }
.about-bento__title {
  font-size: clamp(2.5rem, 1.4rem + 4.8vw, 5.75rem); font-weight: 500; line-height: 1;
  letter-spacing: -.03em; color: var(--heading); max-width: 14ch; text-wrap: balance;
}

/* 3) Mosaico — móvil: una columna */
.bento { display: grid; grid-template-columns: 1fr; gap: var(--bento-gap); }

.bento__card {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  border-radius: var(--bento-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -28px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  backdrop-filter: blur(5px) saturate(115%);
}
/* Sin backdrop-filter (navegadores viejos): cristal más opaco para no perder contraste */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .about-bento { --glass-bg: rgba(20, 14, 11, .82); }
}

.bento__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); line-height: 1.2; }
.bento__heading { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--heading); margin-bottom: .6rem; }
.bento__heading--lg { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); max-width: 20ch; margin-bottom: 0; }
.bento__text { color: var(--text); max-width: 52ch; }

/* Tarjeta 1: año masivo */
.bento__card--year { justify-content: space-between; gap: 2rem; }
.bento__year {
  font-size: clamp(5rem, 3rem + 9vw, 10rem); font-weight: 500; line-height: .82;
  letter-spacing: -.05em; color: var(--accent); font-variant-numeric: lining-nums;
}

/* Tarjeta 3: misión condensada, como declaración */
.bento__statement { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.45; color: var(--heading); }
.bento__card--mission { justify-content: space-between; gap: 1.5rem; }

/* Tarjeta 4: CTA sólido naranja (rompe el cristal a propósito) */
.bento__cta {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 8rem;
  background: var(--accent); border-color: transparent; color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 24px 48px -24px rgba(230, 98, 16, .45);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bento__cta-text { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; max-width: 14ch; }
.bento__cta-arrow {
  flex: none; display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 2px solid var(--ink); font-size: 1.5rem; line-height: 1;
  transition: transform .3s var(--ease), background-color .25s, color .25s;
}
.bento__cta:hover { background: var(--accent-bright); box-shadow: 0 28px 56px -22px rgba(255, 68, 0, .55); }
.bento__cta:hover .bento__cta-arrow { transform: translateX(6px); background: var(--ink); color: var(--accent-bright); }
.bento__cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* Aparición escalonada de las celdas (usa .reveal de la sección 16) */
.bento > .reveal:nth-child(2) { transition-delay: .08s; }
.bento > .reveal:nth-child(3) { transition-delay: .16s; }
.bento > .reveal:nth-child(4) { transition-delay: .24s; }

/* Tableta (≥ 640 px): 2 columnas — 1984 alta a la izquierda, CTA a lo ancho abajo */
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__card--year { grid-row: span 2; }
  .bento__cta { grid-column: 1 / -1; }
  .bento__cta-text { max-width: 24ch; }
}

/* Escritorio (≥ 1024 px): 3 columnas asimétricas
   ┌────────┬─────────────────┐
   │        │  Energy (ancha) │
   │  1984  ├────────┬────────┤
   │ (alta) │ Misión │  CTA   │
   └────────┴────────┴────────┘ */
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-rows: minmax(15rem, auto) minmax(17rem, auto);
    grid-template-areas: "year energy energy" "year mission cta";
  }
  .bento__card--year    { grid-area: year; }
  .bento__card--energy  { grid-area: energy; justify-content: flex-end; }
  .bento__card--mission { grid-area: mission; }
  .bento__cta           { grid-area: cta; flex-direction: column; align-items: stretch; }
  .bento__cta-text { max-width: 12ch; }
  .bento__cta-arrow { align-self: flex-end; }
}

/* Móvil: escenario sticky (el balancín acompaña el scroll de la columna) y corrido a la derecha
   para que se vean la cabeza de caballo y el pozo */
@media (max-width: 639px) {
  .rig-bg__stage { position: sticky; top: 0; inset: auto; height: 100vh; height: 100svh; }
  .rig-bg__art { height: auto; width: 170%; left: auto; right: -30%; bottom: 2%; transform: none; }
}

/* Movimiento reducido: sin desplazamiento de la flecha */

/* Colores del vector del balancín (compartidos) */
.pj-layer-1 { fill: #3A2C24; }
.pj-layer-2 { fill: #30241D; }
.pj-layer-3 { fill: #251B15; }
.pj-pores circle { fill: var(--accent); opacity: .7; }
.pj-ground { stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.pj-casing { fill: #1A1411; stroke: #7A7F85; stroke-width: 1; }
.pj-rod { stroke: #E8E2DC; stroke-width: 2.4; stroke-linecap: round; }
.pj-oilflow { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 5 9; stroke-linecap: round; }
.pj-barrel { fill: #7A7F85; }
.pj-plunger { fill: var(--accent); }
.pj-tank-shell { fill: #1C1612; stroke: #D8D0C8; stroke-width: 2; }
.pj-tank-band { stroke: #7A7F85; stroke-width: 1; opacity: .7; }
.pj-pipe { fill: none; stroke: #5E6368; stroke-width: 7; stroke-linejoin: round; }
.pj-wellhead rect { fill: #7A7F85; }
.pj-base { fill: #CFC7BF; }
.pj-motor { fill: #7A7F85; }
.pj-belt { stroke: #CFC7BF; stroke-width: 2; }
.pj-pedestal { fill: #4A413B; }
.pj-samson line { stroke: #CFC7BF; stroke-width: 7; stroke-linecap: round; }
.pj-pitman { stroke: #E8E2DC; stroke-width: 6; stroke-linecap: round; }
.pj-gearbox { fill: #6B7076; stroke: #CFC7BF; stroke-width: 2; }
.pj-crank rect, .pj-counterweight { fill: #E8E2DC; }
.pj-pin { fill: var(--bg); stroke: #E8E2DC; stroke-width: 2; }
.pj-hub, .pj-bearing { fill: var(--bg); stroke: #E8E2DC; stroke-width: 3; }
.pj-beam { fill: #E8E2DC; }
.pj-equalizer { fill: #7A7F85; }
.pj-horsehead { fill: var(--accent); }
.pj-bridle { stroke: #A89F97; stroke-width: 1.5; }
.pj-carrier { fill: #E8E2DC; }

/* Tarjetas de división del index (Energy · Marine): logo corporativo + nombre en texto + botón.
   Sustituye los estilos en línea que tenía el HTML. */
.bento--divisions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); grid-template-rows: none; grid-template-areas: none; }
.bento__card--brand { align-items: center; justify-content: center; text-align: center; gap: 1.25rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.brand-card__logo { width: 200px; height: auto; margin-inline: auto; }
.brand-card__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--heading); line-height: 1; margin-bottom: .75rem; }
.divisions-brand { padding-top: 0; padding-bottom: calc(var(--section-y) * .6); }

/* ---------- 20. Con la confianza de líderes de la industria (index.html) ----------
   Datos desde assets/js/shared-data.js (main.js §0). Un solo lenguaje visual en toda la sección:
   logos monocromos (blancos/gris claro) directamente sobre el fondo, SIN cajas, bordes ni fichas.
   · Clientes (.logo-row--client): protagonistas. Todos con el MISMO PESO VISUAL: main.js calcula el tamaño de cada logo
     para que ocupe la misma área (un logo ancho queda bajo y un logo apilado queda alto). Opacidad .7.
     Móvil 2 col. · tableta 3 col. · escritorio una fila con espacio parejo (flex, space-between).
   · Aliados y certificaciones (.trust-groups): dos grupos con su rótulo, más pequeños (30 px; 40 px las marcas
     casi cuadradas con size:"lg") y siempre legibles (opacidad .8). Móvil: apilados.
   · Placeholder: mientras una entrada no tenga logo se pinta su nombre (.logo-item__word, Exo 600) en un
     contenedor del MISMO alto que un logo, para que al poner el archivo no se mueva nada.
   · Solo los elementos con enlace (.is-link) reaccionan al cursor y al foco; los demás son estáticos.
   · Tratamiento según  logoKind  (ver shared-data.js):
       transparent → silueta clara (brightness(0) invert(1))
       tone        → transparente pero con detalle interior (escudos, hojas): escala de grises aclarada, sin aplastar a silueta
       on-light    → logo oscuro sobre fondo blanco: se invierte y el blanco se funde con el fondo (mix-blend-mode: screen)
       on-dark     → logo claro sobre fondo sólido oscuro: el fondo se aplasta a negro y se funde igual
       chip        → ficha clara idéntica (último recurso)
     mix-blend-mode necesita un fondo plano y ningún ancestro con opacity/transform: por eso la opacidad va en la
     propia imagen y esta sección no usa .reveal. */
.trust {
  --logo-slot: 2.75rem;        /* alto mínimo de cada celda de cliente (cabe un wordmark de 2 líneas) */
  --logo-slot-sub: 2.5rem;     /* alto de celda de aliado/certificación */
  --logo-h-sub: 1.875rem;      /* 30 px */
  --logo-h-sub-lg: 2.25rem;    /* 36 px: marcas casi cuadradas o verticales */
  --logo-rest: .7;             /* clientes en reposo */
  --logo-rest-sub: .75;        /* secundarios: nunca por debajo de .75 */
  background: var(--bg-alt);
  padding-block: calc(var(--section-y) * .6);
}
.trust__title {
  font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em;
  color: var(--heading); margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

/* Filas de logos */
.logo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; justify-items: start; align-items: center; }
.logo-row--client { gap: 2rem 1.5rem; }
@media (min-width: 640px) { .logo-row--client { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .logo-row--client { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2.5rem; }
}
.logo-item { display: flex; align-items: center; min-width: 0; min-height: var(--logo-slot); }
.logo-item--sub { min-height: var(--logo-slot-sub); }
.logo-item picture { display: contents; }
.logo-item__link { display: flex; align-items: center; border-radius: 2px; }

/* Logo (imagen) */
.logo-item__img {
  display: block; max-width: 100%; object-fit: contain; object-position: left center;   /* el tamaño de los logos de clientes lo fija main.js (width/height) */
  filter: brightness(0) invert(1); opacity: var(--logo-rest);
  transition: opacity .25s var(--ease);
}
.logo-item__img[data-kind="tone"]     { filter: grayscale(1) brightness(1.8); }
.logo-item__img[data-kind="on-light"] { filter: grayscale(1) invert(1) brightness(2.6); mix-blend-mode: screen; }
.logo-item__img[data-kind="on-dark"]  { filter: grayscale(1) contrast(4); mix-blend-mode: screen; }
.logo-item__img[data-kind="chip"]     { filter: none; mix-blend-mode: normal; }

/* Wordmark placeholder: el nombre, igual para todos, con el mismo alto de celda que un logo */
.logo-item__word {
  font-weight: 600; font-size: 1.125rem; line-height: 1.2; letter-spacing: .01em; color: var(--heading);
  max-width: 11rem; text-wrap: balance; opacity: var(--logo-rest);
  transition: opacity .25s var(--ease);
}

/* Aliados y certificaciones: más pequeños, algo más contrastados que "apagados" */
/* Respaldo: el tamaño real lo fija main.js (atributos width/height). Si el JS no corrió, nunca se muestra a 160 px. */
.logo-item--client .logo-item__img { max-height: 6rem; max-width: 10.625rem; }
.logo-item--sub .logo-item__img { height: var(--logo-h-sub); width: auto; max-width: 8.5rem; opacity: var(--logo-rest-sub); }
.logo-item--sub[data-size="lg"] .logo-item__img { height: var(--logo-h-sub-lg); }
.logo-item--sub .logo-item__word { font-size: 1rem; opacity: var(--logo-rest-sub); }

/* Ficha clara (solo si una entrada usa logoKind:"chip"): mismo tamaño y color para todas */
.logo-item--chip { display: grid; place-items: center; width: 7.5rem; height: 3.5rem; padding: .5rem .75rem; background: #E9E4DF; border-radius: var(--radius); }
.logo-item--chip .logo-item__img { height: auto; max-height: 100%; max-width: 100%; opacity: 1; object-position: center; }

/* Interacción: solo si hay enlace */
.logo-item.is-link:hover .logo-item__img,
.logo-item.is-link:hover .logo-item__word,
.logo-item__link:focus-visible .logo-item__img,
.logo-item__link:focus-visible .logo-item__word { opacity: 1; }
.logo-item__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }

/* Enlace secundario bajo la fila de clientes */
.trust__more { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); display: flex; justify-content: flex-start; }
@media (min-width: 640px) { .trust__more { justify-content: flex-end; } }
.trust__more .link-arrow { font-weight: 500; }
.trust__more .link-arrow:hover { color: var(--accent); border-color: transparent; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* Aliados + certificaciones: divisor sutil; los dos grupos van uno bajo el otro, con rótulo y logos centrados */
.trust-groups {
  display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); border-top: 1px solid var(--line);
  text-align: center;
}
/* flex (no grid) también en móvil: así el último logo suelto de una fila queda centrado y no pegado a la izquierda */
.trust-groups .logo-row--sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.25rem; }
.trust-groups .logo-item__img { object-position: center; }
/* Certificaciones del home un poco más grandes (INEA, RACDA y OMI se leían pequeñas junto al resto). Solo aplica a esta franja:
   energy y las demás páginas siguen con el tamaño base de shared-data.js. */
.trust-groups .logo-item--sub[data-id="inea"]  .logo-item__img { height: 2.875rem; }   /* 46 px (antes 36) */
.trust-groups .logo-item--sub[data-id="racda"] .logo-item__img { height: 3rem; }       /* 48 px (antes 36) */
.trust-groups .logo-item--sub[data-id="omi"]   .logo-item__img { height: 2.375rem; max-width: none; }   /* 38 px (antes 30) */
/* Global Green: logo horizontal (6:1). Con el tope general de 8.5rem de ancho quedaría a 23 px de alto; aquí se le da su alto propio. */
.trust-groups .logo-item--sub[data-id="global-green"] .logo-item__img { height: 2.5rem; max-width: 100%; }   /* 40 px de alto ≈ 239 px de ancho */
/* Dux Oil: logo horizontal (4:1). Con el tope general de 8.5rem de ancho quedaría a 30 px de alto y se ve pequeño junto a los demás. */
.trust-groups .logo-item--sub[data-id="dux-oil"] .logo-item__img { height: 2.5rem; max-width: 100%; }   /* 40 px de alto ≈ 158 px de ancho */
.trust-group__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
  color: var(--text-muted); margin-bottom: 1.1rem;
}
@media (min-width: 640px) { .logo-row--sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem; } }

/* ---------- 21. Home corporativa (index.html) ----------
   Hero estático + tarjetas de división superpuestas, franja "Trusted by", quiénes somos,
   proceso de 5 pasos (también en energy.html) y formulario de cotización. */

/* Hero estático. --overlap es la única medida de la superposición hero ↔ tarjetas:
   el hero la suma como padding inferior y la franja de tarjetas la resta con margen negativo. */
.home-top { --overlap: 0rem; }
@media (min-width: 900px) { .home-top { --overlap: 6.5rem; } }
.home-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ink);
  display: flex; align-items: center;
  min-height: clamp(520px, 74vh, 720px); min-height: clamp(520px, 74svh, 720px); padding-bottom: var(--overlap);
}
.home-hero__pic, .home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__img { object-fit: cover; object-position: 50% 60%; background: #1b1512; }
.home-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,4,4,.9) 0%, rgba(7,4,4,.62) 48%, rgba(7,4,4,.2) 85%),
    linear-gradient(0deg, rgba(7,4,4,.6) 0%, rgba(7,4,4,0) 40%);
}
.home-hero__content { position: relative; z-index: 1; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.home-hero .hero__title { max-width: 21ch; }
.home-hero .hero__text { margin-bottom: 2rem; }
@media (max-width: 719px) {
  .home-hero { min-height: 0; align-items: flex-end; }
  .home-hero__content { padding-block: 5rem 2.5rem; }
  .home-hero::after { background: linear-gradient(0deg, rgba(7,4,4,.96) 0%, rgba(7,4,4,.86) 50%, rgba(7,4,4,.5) 100%); }
  .home-hero .hero__title, .home-hero .hero__text { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
  .home-hero .hero__ctas .btn { flex: 1 1 100%; }
}

/* Tarjetas de división: móvil = filas compactas; escritorio = tarjetas con foto */
.divisions-strip { position: relative; z-index: 2; margin-top: calc(var(--overlap) * -1); padding-block: 1.25rem 0; }
@media (min-width: 900px) { .divisions-strip { padding-top: 0; } }
.div-cards { display: grid; gap: .75rem; }
.div-card {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: .75rem 2.75rem .75rem .75rem; background: var(--surface);
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  transition: border-color .2s, background-color .2s;
}
.div-card:hover, .div-card:focus-within { border-color: rgba(255,255,255,.3); background: #2a221d; }
.div-card__media { width: 96px; height: 96px; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.div-card__media picture { display: block; width: 100%; height: 100%; }
.div-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .7s var(--ease); }
.div-card:hover .div-card__media img { transform: scale(1.05); }
.div-card__media--icon { display: grid; place-items: center; color: var(--on-dark-muted); background: linear-gradient(135deg, #1d1612, #2b221c); }
.div-card__icon { width: 44px; height: 44px; }
.div-card__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; color: #fff; }
.div-card__line { margin-top: .25rem; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-muted); }
.div-card__chips { display: none; }
/* Toda la tarjeta es el área de clic: el ::after del enlace cubre la tarjeta */
.div-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.div-card__link:focus-visible { outline: none; }
.div-card__link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; }
.div-card__cta { display: block; }
.div-card__cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.div-card__arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: var(--accent); transition: transform .25s var(--ease); }
.div-card:hover .div-card__arrow { transform: translate(4px, -50%); }

@media (min-width: 900px) {
  .div-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .div-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.85);
  }
  .div-card__media { width: 100%; height: auto; aspect-ratio: 16 / 8; border-radius: 0; }
  .div-card__media--icon { place-items: center; }
  .div-card__icon { width: 64px; height: 64px; }
  .div-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.75rem 1.6rem; }
  .div-card__title { font-size: var(--fs-h3); }
  .div-card__line { font-size: var(--fs-base); margin-top: .4rem; }
  .div-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
  .div-card__chips li { font-size: var(--fs-xs); font-weight: 500; color: var(--text); background: var(--surface-2); border-radius: 4px; padding: .3rem .65rem; }
  .div-card__cta { display: inline-flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: 1.4rem; font-weight: 700; font-size: var(--fs-sm); color: #fff; }
  .div-card__cta-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .div-card__arrow { position: static; transform: none; font-size: 1.2rem; }
  .div-card:hover .div-card__arrow { transform: translateX(4px); }
}

/* Franja "Trusted by": fondo claro para que los logos oficiales (hechos para fondo claro) se vean en gris */
.trusted { background: #ECE7E1; color: #3B342E; padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.trusted__inner { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 960px) { .trusted__inner { grid-template-columns: 1.15fr 1.5fr auto; align-items: center; } }
.trusted__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5C544D; margin-bottom: .9rem; }
.trusted__clients { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
.trusted .client-mark { color: #453E38; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.trusted__certs { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
.trust-logo img { height: 56px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: filter .25s, opacity .25s; }
.trust-logo:hover img { filter: none; opacity: 1; }
.trusted .link-arrow { color: #2B2520; }
.trusted .link-arrow:hover { color: var(--accent-deep); }

/* Quiénes somos */
.about-corp .intro-stats { margin-bottom: 0; }
.about-corp .intro-stat { align-content: start; }
.intro-stat__link { justify-self: start; margin-top: .35rem; font-size: var(--fs-xs); font-weight: 700; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.intro-stat__link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.about__grid { display: grid; gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .about__grid { grid-template-columns: 5fr 7fr; } }
.about__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 8px; }
@media (min-width: 960px) { .about__photo img { aspect-ratio: 4 / 4.4; } }
.about__text p { color: var(--text); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 56ch; }
.about__text p + p { margin-top: 1rem; }
.about__sectors-title { margin-top: 2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: 0 1.25rem; margin-top: .75rem; border-top: 1px solid var(--line); }
.sectors li { padding: .85rem 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--heading); }

/* Ejecución integrada: texto breve + foto arriba, proceso de 5 pasos debajo (index y energy) */
.process__top { display: grid; gap: 2rem 4rem; align-items: center; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 900px) { .process__top { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
.process--text .process__top { grid-template-columns: 1fr; }
/* Variante con balancín animado de fondo (energy.html): capa decorativa detrás del contenido */
.process--rig { position: relative; isolation: isolate; background: var(--ink); }
.process__text { margin-top: 1.25rem; max-width: 52ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--text); }
.process__intro .link-arrow { margin-top: 1.75rem; }
.process__values { margin-top: 1.25rem; max-width: 52ch; font-size: var(--fs-sm); color: var(--text-muted); }
.process__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
@media (max-width: 899px) { .process__photo img { aspect-ratio: 16 / 10; } }

/* Los pasos: <ol> sin viñetas; la numeración 01–05 (gris) sale de un contador CSS, así no se duplica */
.process__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process__step { counter-increment: step; position: relative; padding: 1.75rem 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,.22); }
/* Punto sobre la línea, alineado al borde izquierdo del paso (y de su etiqueta) */
.process__step::after { content: ""; position: absolute; left: 0; top: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: #8d8680; transition: background-color .2s; }
.process__step::before { content: "0" counter(step); display: block; margin-bottom: .4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: #8d8680; }
.process__step:hover::after, .process__step:focus-within::after { background: var(--accent); }
.process__label { font-size: var(--fs-lg); font-weight: 500; line-height: 1.25; color: var(--heading); }
.process__caps { margin-top: .75rem; display: grid; gap: .35rem; }
.process__caps li { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-muted); }
@media (max-width: 899px) {
  .process__steps { grid-template-columns: 1fr; border-left: 1px solid rgba(255,255,255,.22); margin-left: .3rem; }
  .process__step { border-top: 0; padding: 0 0 1.75rem 1.75rem; }
  .process__step:last-child { padding-bottom: 0; }
  .process__step::after { left: -.33rem; top: .35rem; }
  .process__step::before { margin-bottom: .15rem; }
}

/* Formulario de cotización */
.quote-form { display: grid; gap: 1.1rem; margin-top: 2rem; max-width: 36rem; }
.quote-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .quote-form__row { grid-template-columns: 1fr 1fr; } }
.quote-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field { display: grid; gap: .4rem; align-content: start; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; font: inherit; font-size: var(--fs-base); color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; background: rgba(255,255,255,.12); }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: #FF9E7D; }
.field__error { min-height: 1.1em; font-size: var(--fs-xs); font-weight: 500; color: #FFB59E; }
.field__error:empty { display: none; }
.quote-form__status { min-height: 1.5em; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.quote-form__status.is-ok { color: #9FE0AE; }
.quote-form__status.is-error { color: #FFB59E; }
.quote-form__status:empty { display: none; }
.quote-form .btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 719px) { .quote-form__actions .btn { width: 100%; } }
/* contact.html: el bloque es la página entera, sin foto pesada de fondo */
main > .contact:only-child { min-height: 60vh; }

/* (El footer corporativo de 4 columnas, .footer__grid--corp, se eliminó el 02/10/2026: todas las páginas usan el footer común.) */

/* credentials.html */
.cred-page__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.cred-page__head .section-title { margin-bottom: 1rem; }
.cred-block { padding-block: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem); border-top: 1px solid var(--line); }
.cred-block__title { font-size: var(--fs-h3); font-weight: 500; color: var(--heading); margin-bottom: 1.25rem; }
.cred-block__text { max-width: 60ch; color: var(--text); }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.cert-card { display: grid; gap: .3rem; align-content: start; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.cert-card__logo { display: grid; place-items: center; height: 104px; margin-bottom: .6rem; padding: .6rem; background: #fff; border-radius: 6px; }
.cert-card__logo img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.cert-card__name { color: #fff; font-weight: 700; }
.cert-card__full { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.client-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.client-list li { padding: .5rem 1rem; background: var(--surface-2); border-radius: 4px; font-weight: 700; color: var(--heading); }
.legal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
.legal-client { display: grid; gap: .15rem; align-content: start; padding: .85rem 1rem; background: var(--surface-2); border-radius: 4px; }
.legal-client__name { font-weight: 700; color: var(--heading); }
.legal-client__full { font-size: var(--fs-sm); color: var(--text-muted); }
.cred-page__back { margin-top: 1rem; }

/* Movimiento reducido: sin zoom de fotos ni desplazamientos en la home corporativa */

/* Enlace de las tarjetas de proyecto: el <a> cubre la tarjeta (::after) y el texto con flecha va dentro */
.project__link { margin-top: auto; align-self: flex-start; }
.project__link .link-arrow { padding-top: .5rem; }

/* Banda de contacto: la foto de fondo (<picture> absoluto) no debe interceptar clics; el contenido queda por encima */
.cta-band picture { pointer-events: none; }
.cta-band__inner { position: relative; z-index: 1; }

/* (Restaurado) Ejecución integrada de la home original */
/* ---------- 21. Ejecución integrada (home: bajo las cifras de "About us") ----------
   Texto de Tanzaca: capacidades + ciclo completo del proyecto (5 pasos) + estándares.
   Naranja solo en detalles (cuadritos, numeración), no como fondo. */
.scope { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 960px) { .scope { grid-template-columns: 1.1fr 1fr; align-items: start; column-gap: clamp(2rem, 4vw, 4rem); } .scope__steps { grid-column: 1 / -1; } }
.scope__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--heading); max-width: 22ch; }
.scope__text { margin-top: 1rem; max-width: 56ch; color: var(--text); }
.scope__values-label { margin-top: 1.75rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.scope__values { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.scope__values li { padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--heading); }

.scope__caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.5rem; border-top: 1px solid var(--line); }
.scope__caps li { position: relative; padding: .9rem 0 .9rem 1.4rem; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--heading); }
.scope__caps li::before { content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; background: var(--accent); }

.scope__steps { list-style: none; margin: 0; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.scope__steps li { counter-increment: step; position: relative; padding: 1.25rem 1rem 0 0; font-weight: 500; line-height: 1.3; color: var(--heading); }
.scope__steps li::before { content: "0" counter(step); display: block; margin-bottom: .4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.scope__steps li::after { content: ""; position: absolute; left: 0; top: -1.3rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
@media (max-width: 719px) {
  .scope__steps { grid-template-columns: 1fr; padding-top: 0; border-top: 0; border-left: 1px solid var(--line); margin-left: .27rem; }
  .scope__steps li { padding: .6rem 0 .6rem 1.5rem; }
  .scope__steps li::before { display: inline; margin: 0 .6rem 0 0; }
  .scope__steps li::after { left: -.3rem; top: 50%; margin-top: -.27rem; }
}


/* ---------- 22. Servicios: tarjetas enlazadas y páginas de detalle (service-*.html) ----------
   Las páginas las genera herramientas/generar-servicios.py. El naranja solo va en detalles
   (numeración, cuadritos, enlaces, bordes de foco): nunca como fondo de secciones. */

/* Tarjetas de energy.html: toda la tarjeta es clicable (el ::before del enlace se estira sobre ella) */
.hs-card { position: relative; }
.hs-card__media picture { display: contents; }
.hs-card .link-arrow { position: static; }
.hs-card .link-arrow::before { content: ""; position: absolute; inset: 0; }
.hs-card .link-arrow:focus-visible { outline: none; }
.hs-card:has(.link-arrow:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.hs-card__title { transition: color .25s var(--ease); }
.hs-card:hover .hs-card__title { color: var(--accent); }

/* Tarjetas con filas alineadas: la pista de Services es una rejilla y las tarjetas usan subgrid, así la foto, el número, el título,
   el texto, las etiquetas y el enlace ocupan la MISMA altura en todas. Si un título (o texto) es más largo, esa fila crece
   para todas las tarjetas y la foto es la que cede (nunca hay tarjetas con fotos de distinto alto). */
/* Base para TODOS los navegadores: la pista es una fila flexible y cada tarjeta una columna (foto arriba, texto abajo).
   Así se ve en los navegadores sin subgrid (Safari < 16, Chrome < 117): cada foto ocupa el alto que deja su texto.
   El alto de la pista y de las tarjetas se define en la sección 10 de styles.css (--hs-card-h). */
.hscroll__intro { align-self: center; }
.hs-card { height: auto; }
.hs-card__body > * { min-width: 0; }
/* Mejora con subgrid: filas compartidas entre tarjetas. TODO lo que dependa de subgrid va dentro de este @supports:
   fuera de él, "display: grid" + "grid-row: 2 / -1" sin subgrid mandaban la foto DEBAJO del texto, como una franja delgada
   (visto el 02/10/2026 en una MacBook con navegador sin actualizar). La foto lleva su fila explícita (grid-row: 1). */
@supports (grid-template-rows: subgrid) {
  .hscroll__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
    grid-template-rows: minmax(6.5rem, 1fr) repeat(5, auto);   /* foto · nº · título · texto · etiquetas · enlace */
  }
  .hscroll__intro { grid-row: 1 / -1; }
  .hs-card { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
  .hs-card__media { grid-row: 1; min-height: 0; }
  .hs-card__body { display: grid; grid-template-rows: subgrid; grid-row: 2 / -1; align-content: start; }
  .hs-card .link-arrow { justify-self: start; align-self: start; }
}

/* Hero: texto a la izquierda, foto enmarcada a la derecha (las fotos disponibles son de resolución media) */
.sv-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.sv-hero__ring { position: absolute; z-index: -1; right: -14%; top: 50%; width: min(64rem, 120%); height: auto; transform: translateY(-50%); fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .16; pointer-events: none; }
.sv-hero__inner { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .sv-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.sv-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; font-size: var(--fs-xs); color: var(--text-muted); }
.sv-crumbs a:hover { color: var(--heading); text-decoration: underline; }
.sv-hero__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); font-weight: 500; line-height: 1.06; letter-spacing: -.02em; color: var(--heading); max-width: 20ch; }
.sv-hero__lead { margin-top: 1.25rem; max-width: 58ch; font-size: var(--fs-lg); line-height: 1.55; color: #E6E1DC; }
.sv-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.sv-hero__media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); box-shadow: 0 28px 56px -28px rgba(0, 0, 0, .85); }
.sv-hero__media picture { display: contents; }
.sv-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }
@media (max-width: 959px) { .sv-hero__media { aspect-ratio: 16 / 10; } }

/* Cifras clave (mismo estilo que las cifras de la Intro) */
.sv-facts { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
.sv-facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
@media (min-width: 900px) { .sv-facts__list { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.sv-fact { display: grid; gap: .3rem; align-content: start; border-left: 2px solid rgba(255, 255, 255, .14); padding-left: 1.1rem; }
.sv-fact__value { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; color: var(--heading); }
.sv-fact__label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }

/* Cuerpo: índice lateral fijo (escritorio) o fila desplazable de enlaces (móvil) + secciones */
.sv-layout { display: grid; gap: 2rem clamp(2rem, 4vw, 5rem); padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (min-width: 1024px) { .sv-layout { grid-template-columns: 14.5rem minmax(0, 1fr); align-items: start; } }
.sv-toc { font-size: var(--fs-sm); min-width: 0; }
@media (min-width: 1024px) { .sv-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; } }
.sv-toc__title { margin-bottom: .9rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.sv-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; border-left: 1px solid var(--line); }
.sv-toc li { counter-increment: toc; }
.sv-toc a { display: block; padding: .5rem 0 .5rem 1rem; line-height: 1.35; color: var(--text-muted); transition: color .2s; }
.sv-toc a::before { content: counter(toc, decimal-leading-zero); margin-right: .6rem; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.sv-toc a:hover { color: var(--heading); }
@media (max-width: 1023px) {
  .sv-toc ol { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .6rem; border-left: 0; scrollbar-width: thin; }
  .sv-toc a { white-space: nowrap; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; }
}

.sv-body { min-width: 0; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.sv-sec { display: grid; gap: 1.1rem; align-content: start; padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); border-top: 1px solid var(--line); }
.sv-sec__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.sv-sec__title { max-width: 30ch; font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem); font-weight: 500; line-height: 1.12; letter-spacing: -.012em; color: var(--heading); }
.sv-sec__body { display: grid; gap: 1.5rem; min-width: 0; }
.sv-p { max-width: 72ch; color: var(--text); }
.sv-h3 { margin-top: .5rem; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--heading); }
.sv-list { display: grid; gap: .55rem; max-width: 72ch; }
.sv-list li { position: relative; padding-left: 1.2rem; line-height: 1.5; color: var(--text); }
.sv-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; background: var(--accent); }
.sv-list--sm li { font-size: var(--fs-sm); }
.sv-more { margin: 0; }

/* Aliado comercial */
.sv-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sv-partner__logo { flex: none; display: flex; align-items: center; justify-content: center; padding: .6rem 1rem; background: #fff; border-radius: 8px; }
.sv-partner__logo--navy { background: #0F1144; }
.sv-partner__logo picture { display: contents; }
.sv-partner__logo img { width: auto; height: 3rem; max-width: 11rem; object-fit: contain; }
.sv-partner__text { flex: 1 1 18rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }

/* Tarjetas de contenido */
.sv-cards { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .sv-cards--2, .sv-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .sv-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-card { display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: clamp(1.15rem, .9rem + 1vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sv-card__info { display: flex; flex-direction: column; gap: .7rem; min-width: 0; align-content: start; }
.sv-card__meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--accent); }
.sv-card__title { font-size: 1.2rem; font-weight: 500; line-height: 1.2; color: var(--heading); }
.sv-card__text { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); }
/* Tarjeta con fotos: texto a la izquierda, fotos a la derecha */
.sv-card--media { gap: 1.25rem; }
@media (min-width: 900px) { .sv-card--media { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.75rem; align-items: start; } }
.sv-card__figs { display: grid; gap: .9rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .sv-card__figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-card__figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Etapas numeradas */
.sv-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-step { counter-increment: step; display: grid; gap: .5rem; align-content: start; padding: 1.25rem 1.25rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sv-step::before { content: counter(step, decimal-leading-zero); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.sv-step__title { font-size: 1.15rem; font-weight: 500; line-height: 1.25; color: var(--heading); }
.sv-step__text { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); }

/* "Conviene saber": información complementaria (definiciones y contexto del sector) */
.sv-note { display: grid; gap: .4rem; max-width: 72ch; padding: 1.1rem 1.25rem 1.2rem; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.sv-note__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sv-note__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); }

/* Normas de referencia */
.sv-standards { max-width: 72ch; margin: 0; border-top: 1px solid var(--line); }
.sv-std { display: grid; gap: .25rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .sv-std { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
.sv-std dt { font-weight: 700; letter-spacing: .02em; color: var(--heading); }
.sv-std dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }

/* Figuras */
.sv-figs { display: grid; gap: 1rem; min-width: 0; }
.sv-figs--row2 { grid-template-columns: minmax(0, 1fr); }
.sv-figs--row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .sv-figs--row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .sv-figs--row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-figs--portrait { max-width: 21rem; }
.sv-figs--medium { max-width: 36rem; }
.sv-fig { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.sv-fig picture { display: block; position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); aspect-ratio: 4 / 3; }
.sv-figs--wide .sv-fig picture { aspect-ratio: 16 / 9; }
.sv-figs--row4 .sv-fig picture { aspect-ratio: 1 / 1; }
.sv-figs--portrait .sv-fig picture { aspect-ratio: 3 / 4; }
.sv-figs--medium .sv-fig picture { aspect-ratio: 3 / 2; }
.sv-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }
.sv-fig--contain picture { background: #fff; }
.sv-fig--contain img { object-fit: contain; }
.sv-fig figcaption { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }

/* Navegación entre servicios */
.sv-pager { background: var(--bg-alt); border-top: 1px solid var(--line); }
.sv-pager__inner { display: grid; gap: 1rem; padding-block: 2rem; }
@media (min-width: 720px) { .sv-pager__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-pager__link { display: grid; gap: .3rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transition: border-color .25s var(--ease), background .25s var(--ease); }
.sv-pager__link:hover { background: var(--surface-2); border-color: var(--accent); }
.sv-pager__link--next { text-align: right; }
.sv-pager__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.sv-pager__link--prev .sv-pager__label::before { content: "← "; color: var(--accent); }
.sv-pager__link--next .sv-pager__label::after { content: " →"; color: var(--accent); }
.sv-pager__title { font-size: 1.15rem; font-weight: 500; line-height: 1.25; color: var(--heading); }

/* Cierre con llamado a la acción */
.sv-cta { background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sv-cta__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .sv-cta__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.sv-cta__title { max-width: 20ch; font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: var(--heading); }
.sv-cta__text { max-width: 52ch; margin-top: 1rem; color: var(--text-muted); }
.sv-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Movimiento reducido: estas páginas no tienen animaciones propias; solo transiciones de hover, que se mantienen (las provoca el usuario) */

/* =========================================================
   23. Ajustes del index (01/10/2026)
   23a. Métricas centradas con contador · 23b. Teléfonos → WhatsApp · 23c. "Building Venezuela" (carrusel parallax)
   23d. clients.html (pantalla "Ver todos los clientes")
   ========================================================= */

/* ---------- 23a. Métricas: número y rótulo centrados en su recuadro, con efecto de conteo ----------
   main.js (§7b) cuenta de 0 al valor cuando la cifra entra en pantalla. El ancho del número se reserva con el valor final
   (::before invisible) y los dígitos van alineados a la derecha pegados al "+", así nada se mueve mientras cuenta. */
.intro-stats--center .intro-stat { justify-items: center; align-content: center; text-align: center; }
.intro-stats--center .intro-stat:first-child { padding-left: clamp(.75rem, .5rem + 1.5vw, 2rem); }
.intro-stats--center .intro-stat__num { display: inline-flex; align-items: baseline; justify-content: center; }
.intro-stats--center .intro-stat__num span { color: inherit; margin-left: 0; }
.intro-stats--center .intro-stat__num .intro-stat__plus { color: var(--accent); margin-left: .05em; }
.intro-stat__value { display: inline-grid; justify-items: end; font-variant-numeric: tabular-nums; }
.intro-stat__value::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; }
.intro-stat__value > [data-count] { grid-area: 1 / 1; }
.intro-stats--center .intro-stat__label { max-width: 18ch; text-wrap: balance; }
@media (max-width: 559px) {
  .intro-stats--center .intro-stat:first-child { padding-left: .6rem; }
}

/* ---------- 23b. Teléfonos que abren WhatsApp ---------- */
.wa-ico { display: inline-block; width: 1em; height: 1em; flex: none; fill: currentColor; color: var(--accent); vertical-align: -.14em; margin-right: .45em; }
.wa-link { display: inline-flex; align-items: center; }
.wa-link .wa-ico { vertical-align: 0; }
.utility-bar__phone .icon { display: inline-flex; align-items: center; }
.utility-bar__phone .icon .wa-ico { width: 16px; height: 16px; margin: 0; vertical-align: 0; }

/* ---------- 23c. Building Venezuela: carrusel de fotos con parallax (scroll-driven animations) ----------
   Técnica de la demo "Parallax Carousel" de scroll-driven-animations.style:
   · .pcar__viewport es el scroller horizontal, SIN scroll-snap: al soltar el scroll/arrastre se queda exactamente donde quedó.
   · Cada <li> declara un view-timeline horizontal (--pcar-slide).
   · La foto (.pcar__img) está ampliada un 30 % dentro de su marco y se desplaza de -11 % a +11 % mientras la diapositiva
     cruza el visor: se mueve más despacio que el marco y da profundidad.
   · La figura (.pcar__fig) se atenúa y se achica un poco en los bordes del visor y queda a tamaño completo al centro.
   Todo con CSS; el movimiento depende solo del scroll del usuario, por eso se mantiene con "reducir movimiento"
   (mismo criterio que la sección de Servicios). Sin soporte (Firefox) las fotos quedan estáticas, a tamaño normal. */
.pcar { background: var(--bg); padding-block: var(--section-y); overflow: hidden; border-top: 1px solid var(--line); }
.pcar__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pcar__head .eyebrow { margin-bottom: .75rem; }
.pcar__head .section-title { margin-bottom: 1rem; }
.pcar__viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pcar__viewport:focus-visible { outline-offset: -3px; }

.pcar__viewport {
  --pcar-slide-w: clamp(18rem, 84vw, 27rem);
  /* el primer panel arranca alineado con el contenedor del resto del sitio */
  --pcar-pad: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  overflow-x: auto; overflow-y: hidden;
  /* sin scroll-snap a propósito: con snap la galería saltaba sola a la foto más cercana al soltar */
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: 1.5rem;
  cursor: grab;
}
/* Barra de desplazamiento gruesa (16 px) y visible. Chromium/Safari usan ::-webkit-scrollbar; Firefox (que no lo soporta)
   usa scrollbar-width/-color. Se separan con @supports porque en Chromium reciente scrollbar-color anularía el estilo -webkit. */
.pcar__viewport::-webkit-scrollbar { height: 16px; }
.pcar__viewport::-webkit-scrollbar-track { background: rgba(255,255,255,.1); border-radius: 999px; margin-inline: var(--pcar-pad); }
.pcar__viewport::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; min-width: 3rem; }
.pcar__viewport::-webkit-scrollbar-thumb:hover { background: var(--accent-bright); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) { .pcar__viewport { scrollbar-width: auto; scrollbar-color: var(--accent) rgba(255,255,255,.12); } }
/* Arrastrando con el mouse: sin snap (si no, pelea contra el arrastre); al soltar vuelve el snap y se acomoda sola */
.pcar__viewport.is-dragging { cursor: grabbing; user-select: none; }
.pcar__viewport.is-dragging * { pointer-events: none; }
.pcar__track { display: flex; gap: clamp(.9rem, .5rem + 1.2vw, 1.75rem); width: max-content; padding-inline: var(--pcar-pad); }
.pcar__slide {
  flex: 0 0 var(--pcar-slide-w);
  view-timeline-name: --pcar-slide; view-timeline-axis: inline;
}
@media (min-width: 720px) { .pcar__viewport { --pcar-slide-w: clamp(25rem, 34vw, 32rem); } }
.pcar__fig { margin: 0; }
.pcar__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: #1b1512; box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
.pcar__frame picture { position: absolute; inset: 0; display: block; }
.pcar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* Fotos apaisadas (4:3): la de Petro Roraima es vertical, se encuadra más arriba para no cortar al técnico */
.pcar__slide:nth-child(1) .pcar__img { object-position: 50% 28%; }
.pcar__cap { display: grid; gap: .2rem; margin-top: 1rem; }
.pcar__place { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pcar__what { font-size: var(--fs-base); font-weight: 500; color: var(--heading); line-height: 1.3; }

@supports (animation-timeline: view()) {
  .pcar__img {
    scale: 1.3;
    animation: pcar-parallax linear both;
    animation-timeline: --pcar-slide;
    animation-range: cover 0% cover 100%;
  }
  .pcar__fig {
    animation: pcar-focus linear both;
    animation-timeline: --pcar-slide;
    animation-range: cover 0% cover 100%;
  }
}
@keyframes pcar-parallax {
  from { translate: -11% 0; }
  to   { translate: 11% 0; }
}
@keyframes pcar-focus {
  0%   { opacity: .35; scale: .94; }
  15%  { opacity: 1;   scale: 1; }
  85%  { opacity: 1;   scale: 1; }
  100% { opacity: .35; scale: .94; }
}
/* Movimiento reducido: el efecto responde solo al scroll del usuario, así que se mantiene (se excluye de la regla global de la sección 17) */

/* ---------- 23d. clients.html: todos los clientes ---------- */
.client-grid {
  --logo-rest: .9; --logo-slot: 4.5rem;     /* variables que usan los logos (.logo-item), definidas aquí porque viven fuera de .trust */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
}
@media (min-width: 720px)  { .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1100px) { .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.client-card {
  display: grid; justify-items: center; align-content: center; gap: .6rem; text-align: center;
  min-height: 11rem; padding: 1.5rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.client-card:hover { border-color: rgba(230,98,16,.55); background: var(--surface-2); }
.client-card .logo-item { justify-content: center; }
.client-card .logo-item__img { object-position: center; }
.client-card .logo-item__word { max-width: 12rem; text-align: center; font-size: 1.2rem; }
.client-card__name { font-weight: 700; color: var(--heading); font-size: var(--fs-sm); }
.client-card__full { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; max-width: 22ch; }
.clients-cta { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-top: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.clients-cta__title { font-size: var(--fs-h3); font-weight: 500; color: var(--heading); max-width: 28ch; line-height: 1.25; }

/* ---------- 23e. Home: misión y visión, mosaicos Energy/Marine, HSE ---------- */
.mv { background: var(--bg-alt); padding-block: var(--section-y); border-top: 1px solid var(--line); }
.mv__head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 40rem; }
.mv__head .eyebrow { margin-bottom: .75rem; }
.mv__grid { display: grid; gap: 1.25rem; }
.mv-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); overflow: hidden; }
.mv-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.mv-card__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.mv-card__title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; color: var(--heading); margin-bottom: 1.1rem; }
.mv-card__text { color: var(--text); line-height: 1.7; max-width: 52ch; }
@media (min-width: 860px) { .mv__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.div-tiles { background: var(--bg); padding-block: var(--section-y); border-top: 1px solid var(--line); }
.div-tiles__grid { display: grid; gap: 1.25rem; }
.div-tile { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; min-height: clamp(20rem, 14rem + 30vw, 32rem); display: flex; align-items: flex-end; background: #120d0b; }
.div-tile__pic, .div-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.div-tile__img { object-fit: cover; transition: transform 1.1s var(--ease); z-index: -2; }
/* velo oscuro semi-opaco: sube desde abajo para que el nombre y el texto destaquen sobre cualquier foto */
.div-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,8,7,.45) 0%, rgba(11,8,7,.62) 45%, rgba(11,8,7,.9) 100%); transition: background .5s; }
.div-tile::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width .45s var(--ease); }
.div-tile:hover .div-tile__img, .div-tile:focus-within .div-tile__img { transform: scale(1.06); }
.div-tile:hover::before { background: linear-gradient(180deg, rgba(11,8,7,.35) 0%, rgba(11,8,7,.55) 45%, rgba(11,8,7,.88) 100%); }
.div-tile:hover::after, .div-tile:focus-within::after { width: 6px; }
.div-tile__body { position: relative; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); display: grid; gap: .9rem; justify-items: start; width: 100%; }
.div-tile__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.div-tile__title { margin: 0; font-size: clamp(3.25rem, 2rem + 6vw, 6.5rem); font-weight: 200; line-height: .95; letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,.55); }
.div-tile__link { color: inherit; text-decoration: none; }
.div-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* toda la tarjeta es clicable */
.div-tile__link:focus-visible { outline: none; }
.div-tile:has(.div-tile__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.div-tile__text { color: rgba(255,255,255,.88); line-height: 1.5; white-space: nowrap; font-size: clamp(.85rem, .7rem + .7vw, 1.125rem); }   /* subtítulo de una sola línea */
/* el texto se ajusta al ancho real de la tarjeta (container query) para que siga en una línea también en español y a 820 px */
@supports (font-size: 1cqi) {
  .div-tile { container-type: inline-size; }
  .div-tile__text { font-size: clamp(.78rem, calc((100cqi - 4.5rem) / 20.5), 1.125rem); }
}
.div-tile__cta { display: inline-flex; align-items: center; gap: .65rem; margin-top: .35rem; padding: .8rem 1.4rem; background: var(--accent-strong); color: #fff; font-weight: 600; border-radius: 999px; transition: background-color .25s, gap .25s; }
.div-tile:hover .div-tile__cta { background: var(--accent-deep); gap: 1rem; }
@media (min-width: 800px) { .div-tiles__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.hse { background: var(--bg-alt); padding-block: var(--section-y); border-top: 1px solid var(--line); }
.hse__head { display: grid; gap: 1.75rem; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); }
.hse__intro { max-width: 46rem; }
.hse__head .eyebrow { margin-bottom: .75rem; }
.hse__head .section-title { margin-bottom: 1.25rem; }
.hse__lead { color: var(--text); font-size: var(--fs-lg, 1.125rem); line-height: 1.7; }
/* Aval de Siety Compliance: separado por una línea (horizontal en móvil, vertical desde 760px), logo horizontal en gris
   (siety-compliance-mono.svg = vector de un solo color, blanco sobre transparente; el gris sale de la opacidad,
   pareja para todo el logo. Ajuste 02/10/2026: se pasó de PNG a SVG porque "COMPLIANCE" salía con letras en grises distintos.
   Ancho mínimo 240px: por debajo, en pantallas de densidad normal, los trazos finos de "COMPLIANCE" vuelven a verse más claros) */
.hse__endorse { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hse__endorse-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.hse__endorse picture { display: contents; }
.hse__endorse-logo { width: min(240px, 66vw); height: auto; filter: brightness(0) invert(1); opacity: .55; }
@media (min-width: 760px) {
  .hse__head { grid-template-columns: minmax(0, 46rem) auto; justify-content: start; align-items: stretch; gap: 0; }
  .hse__intro { padding-right: clamp(2rem, 1rem + 3vw, 4rem); }
  .hse__endorse { justify-content: center; gap: 1.1rem; padding: .5rem 0 .5rem clamp(2rem, 1rem + 3vw, 4rem); border-top: 0; border-left: 1px solid var(--line); }
  .hse__endorse-logo { width: clamp(240px, 110px + 13vw, 310px); }
}
.hse__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.hse-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem 1.5rem 1.75rem; transition: border-color .3s, transform .3s var(--ease); }
.hse-card:hover { border-color: rgba(230,98,16,.55); transform: translateY(-3px); }
.hse-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.hse-card__icon { flex: none; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); }
/* Pills con las normas ISO (arriba a la derecha). Neutras: el naranja queda para lo interactivo. */
.hse-card__iso { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.hse-iso { font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; color: var(--heading); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; }
.hse-card__title { font-size: var(--fs-h4, 1.15rem); font-weight: 600; color: var(--heading); margin-bottom: .5rem; line-height: 1.25; }
.hse-card__text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
@media (min-width: 640px) { .hse__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hse__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 24. Proyectos: páginas de detalle (project-*.html) ----------
   Reutilizan el diseño de las páginas de servicio (bloque 22, clases .sv-*); aquí solo lo propio de proyectos.
   Las genera herramientas/generar-proyectos.py. El naranja solo va en detalles (lugar, numeración, cuadritos). */
.pj-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.1rem; }
.pj-hero__tags .eyebrow { margin: 0; }
.pj-hero__tags .project-featured__badge { margin: 0; }
.pj-badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E6E1DC; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: .4rem .9rem; }
.pj-hero__place { margin: 0 0 .8rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--accent); }
/* El valor de los datos del proyecto puede ser un nombre (no solo una cifra): se permite que baje de línea */
.page-project .sv-fact__value { overflow-wrap: anywhere; }
/* fin bloque 24 */


/* ---------- 24. Pantalla de cotización (contact.html): botón de WhatsApp junto al envío ---------- */
.quote-form__actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.btn--wa { display: inline-flex; align-items: center; gap: .55rem; }
.btn--wa .wa-ico { width: 1.25em; height: 1.25em; flex: none; margin: 0; color: currentColor; }
@media (max-width: 719px) { .quote-form__actions .btn { flex: 1 1 100%; } }

/* ---------- 25. Tanzaca Marine (marine.html) ----------
   La página reutiliza todos los componentes de Energy (hero, intro + cifras, .process--rig, .hscroll, photo-band,
   .consult, cta-band, footer). Aquí solo van los colores de la escena marina vectorial que sirve de fondo a
   "How we work" (.process--sea), animada por main.js §8c. Misma paleta y opacidad que el balancín de Energy. */
.ms-sea { fill: #1F1814; }
.ms-wave { fill: none; stroke: #CFC7BF; stroke-width: 2; stroke-linecap: round; }
.ms-wave--soft { stroke-width: 1.2; opacity: .55; }
.ms-front { fill: #1F1814; stroke: #CFC7BF; stroke-width: 2; }
.ms-pile { fill: #4A413B; }
.ms-deck { fill: #CFC7BF; }
.ms-deck-edge { stroke: #E8E2DC; stroke-width: 2; }
.ms-bollard { fill: #7A7F85; }
.ms-fender-cone { fill: #2A2320; stroke: #7A7F85; stroke-width: 1; }
.ms-fender-panel { fill: var(--accent); }
.ms-winch-base { fill: #7A7F85; }
.ms-winch-frame { fill: #4A413B; stroke: #CFC7BF; stroke-width: 1.5; }
.ms-drum-shell { fill: #6B7076; stroke: #E8E2DC; stroke-width: 2; }
.ms-drum-core { fill: none; stroke: var(--accent); stroke-width: 3; }
.ms-drum-spoke { stroke: #E8E2DC; stroke-width: 2; }
.ms-drum-mark { fill: var(--accent); }
.ms-drum-hub { fill: var(--bg); stroke: #E8E2DC; stroke-width: 2; }
.ms-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.ms-hull { fill: #E8E2DC; }
.ms-boot { fill: #7A3A14; }
.ms-hull-line { stroke: #7A7F85; stroke-width: 1.5; }
.ms-house { fill: #CFC7BF; }
.ms-bridge { fill: #E8E2DC; }
.ms-windows rect { fill: #1A1411; }
.ms-funnel { fill: #4A413B; }
.ms-funnel-band { fill: var(--accent); }
.ms-hatches rect { fill: #7A7F85; }
.ms-mast { stroke: #CFC7BF; stroke-width: 3; stroke-linecap: round; }
.ms-boom { stroke: #A89F97; stroke-width: 2; stroke-linecap: round; }
.ms-bitt { fill: #4A413B; stroke: #E8E2DC; stroke-width: 1.5; }
/* Encuadre de la escena: más a la izquierda que el balancín para que el muelle y el winche (borde derecho del dibujo)
   queden dentro de la pantalla; en móvil el dibujo se alinea al borde derecho (se ven la proa, la defensa y el winche). */
.process--sea .rig-bg__art { left: 55%; top: 2%; bottom: auto; height: 112%; aspect-ratio: 640 / 390; opacity: .12; }   /* más alto y más grande (01/10) */
@media (max-width: 639px) { .process--sea .rig-bg__art { left: auto; right: 0; top: auto; bottom: 18%; width: 205%; height: auto; } }

/* ---------- 26. Tanzaca Marine: proyectos destacados, clientes y "Por qué Tanzaca" (marine.html) ----------
   Proyectos (.works): las fotos reales de la presentación naval son muy pequeñas (132 a 236 px), así que se muestran
   como "ojos de buey": círculo de ~130 px con aro claro. Los archivos ya traen la máscara circular (transparente).
   Cuando lleguen las fotos en alta se puede pasar a tarjetas con foto grande (.cards / .project de Energy). */
.works { display: grid; gap: 1rem; }
@media (min-width: 900px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.work {
  display: flex; align-items: center; gap: clamp(1rem, .7rem + 1.4vw, 1.75rem);
  padding: clamp(1rem, .8rem + 1vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.work__photo {
  display: block; flex: none; width: clamp(84px, 22vw, 132px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px rgba(255, 255, 255, .3);   /* aro del ojo de buey */
}
.work__photo img { width: 100%; height: 100%; object-fit: cover; }
.work__body { min-width: 0; }
.work__title { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); font-weight: 700; line-height: 1.25; color: var(--heading); margin-bottom: .4rem; }
.work__text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }


/* Franja de clientes de la Intro de Marine: CVG Naviera del Orinoco (cliente naval) va primero */
#marine .proof__clients .logo-item[data-id="cvg-naviera"] { order: -1; }

/* "Por qué Tanzaca": cuatro razones en columnas con filete superior (mismo lenguaje que .consult__group) */
.reasons { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 640px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reason { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.1rem; }
.reason__num { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--accent); margin-bottom: .85rem; }
.reason__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; color: var(--heading); margin-bottom: .5rem; }
.reason__text { font-size: var(--fs-sm); color: var(--on-dark-muted); }

/* ---------- 27. Tanzaca Marine: páginas de detalle de servicios (marine-service-*.html) ----------
   Las genera herramientas/generar-servicios-marine.py y reutilizan el bloque 22 (clases sv-*). Aquí solo va lo propio de Marine:
   las fotos reales pequeñas ("ojos de buey" con pie de foto) y las tarjetas enlazadas de "Servicios relacionados". */
.sv-ports { display: grid; gap: 1rem; max-width: 72ch; }
.sv-port { display: flex; align-items: center; gap: clamp(1rem, .8rem + 1vw, 1.5rem); margin: 0; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sv-port .work__photo { width: clamp(84px, 22vw, 124px); }
.sv-port figcaption { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }
.sv-card--link { position: relative; transition: border-color .25s var(--ease), background .25s var(--ease); }
.sv-card--link:hover { background: var(--surface-2); border-color: var(--accent); }
.sv-card--link .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .35rem; }
.sv-card--link .link-arrow::before { content: ""; position: absolute; inset: 0; border-radius: 10px; }   /* toda la tarjeta es clicable */
.sv-card--link .link-arrow:focus-visible { outline: none; }
.sv-card--link:has(.link-arrow:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
/* fin del bloque 27 */

/* ---------- 28. Tanzaca Marine: sección destacada "Agua de lastre" (marine.html#ballast) ----------
   Reemplaza a "Embarcaciones y activos". Dos columnas en escritorio: texto + cifras a la izquierda, tarjeta con el esquema
   de un sistema de tratamiento (lista ordenada con tubería animada) y la foto real del historial a la derecha.
   El esquema es contexto general; solo los tramos resaltados (.ballast-flow__step--scope y la tubería) son alcance de Tanzaca. */
.ballast__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: start; }
@media (min-width: 960px) { .ballast__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.ballast__body .consult__lead { margin-bottom: 2rem; }

.ballast__facts { display: grid; gap: 1.25rem 1.5rem; margin-bottom: 2.25rem; }
@media (min-width: 700px) { .ballast__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ballast__fact { display: flex; flex-direction: column; gap: .35rem; border-left: 2px solid var(--accent); padding-left: 1rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--on-dark-muted); }
.ballast__fact-value { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; color: var(--on-dark); }

.ballast__do { margin-bottom: 1.75rem; }
.ballast__do ul { display: grid; gap: .35rem 2rem; }
@media (min-width: 600px) { .ballast__do ul { grid-template-columns: 1fr 1fr; } }
.ballast__do li + li { margin-top: 0; }
.ballast__why { max-width: 62ch; margin-bottom: 2rem; padding-left: 1rem; border-left: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.ballast__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

.ballast-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
@media (min-width: 960px) { .ballast-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.ballast-card__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; }

.ballast-flow { position: relative; display: grid; gap: 1.6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ballast-flow::before {            /* tubería que une las cuatro etapas */
  content: ""; position: absolute; left: 1.125rem; top: 1.2rem; bottom: 1.2rem; width: 4px; margin-left: -2px; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 10px, rgba(230, 98, 16, .28) 10px 20px);
  background-size: 100% 20px;
}
.ballast-flow__step { position: relative; display: flex; align-items: flex-start; gap: 1rem; }
.ballast-flow__node {
  flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .28); color: var(--heading); font-size: var(--fs-sm); font-weight: 700; position: relative; z-index: 1;
}
.ballast-flow__step strong { display: block; font-size: var(--fs-base); font-weight: 700; line-height: 1.25; color: var(--heading); }
.ballast-flow__step span:not(.ballast-flow__node) { display: block; margin-top: .2rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }
.ballast-flow__step--scope .ballast-flow__node { background: var(--accent-strong); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(230, 98, 16, .18); }
.ballast-flow__step--scope strong { color: #fff; }

.ballast-card__scope { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.ballast-card__dot { flex: none; width: 8px; height: 8px; margin-top: .4em; background: var(--accent); }
.ballast-card__photo.sv-port { max-width: none; padding: 0; background: none; border: 0; }

/* La tubería "fluye" solo si la persona no pidió reducir el movimiento (es decorativo: nada se mueve solo con "reducir") */
@media (prefers-reduced-motion: no-preference) {
  .ballast-flow::before { animation: ballast-flow 1.4s linear infinite; }
}
@keyframes ballast-flow { to { background-position: 0 20px; } }
/* fin del bloque 28 */

/* ---------- 29. Compatibilidad con navegadores anteriores (02/10/2026) ----------
   Proporción de los marcos de foto donde no existe aspect-ratio (Safari < 15, Chrome < 88). En esos navegadores los marcos
   cuyo contenido va en position:absolute quedaban con alto 0 (la foto no se veía). Se usa el truco clásico de padding-top.
   Los demás respaldos están junto a su regla: --vh-s (sección 1), --hs-w (sección 10) y subgrid (bloque 22).
   Si se agrega un marco nuevo con aspect-ratio + contenido absoluto, sumarlo aquí. */
@supports not (aspect-ratio: 1 / 1) {
  .pcar__frame, .sv-hero__media, .sv-fig picture, .project-featured__media { height: 0; padding-top: 75%; }   /* 4:3 */
  .sv-figs--wide .sv-fig picture { padding-top: 56.25%; }      /* 16:9 */
  .sv-figs--row4 .sv-fig picture { padding-top: 100%; }        /* 1:1 */
  .sv-figs--portrait .sv-fig picture { padding-top: 133.33%; } /* 3:4 */
  .sv-figs--medium .sv-fig picture { padding-top: 66.67%; }    /* 3:2 */
  .project-featured__media { padding-top: 62.5%; }             /* 16:10 */
  @media (min-width: 900px) { .project-featured__media { height: auto; padding-top: 0; } }
  @media (max-width: 959px) { .sv-hero__media { padding-top: 62.5%; } }
  .work__photo { height: clamp(84px, 22vw, 132px); }           /* ojos de buey: mismo alto que ancho */
}

/* ---------- 30. Tanzaca Energy: sección destacada "Tratamiento de aguas residuales" (energy.html#wastewater) ----------
   Reemplaza a "Ingeniería y Consultoría" (02/10/2026). No usa el esquema "texto a un lado, foto al otro": el centro es
   la PLANTA (.ww-plant), una línea de tratamiento animada que se recorre etapa por etapa.
     · .ww-tank    = tanque con el dibujo en <canvas> (main.js §8i): partículas que avanzan de izquierda a derecha y que
                     cada etapa va retirando; el agua llega clara al final. Los sólidos caen al carril de lodos (abajo).
     · .ww-tabs    = las 7 etapas (role="tablist"). Cada botón queda centrado bajo su compuerta del tanque: el JS lee
                     el centro de cada botón para dibujar la compuerta, así que tanque y botones deben medir lo mismo.
     · .ww-panels  = lectura de la etapa elegida. Con JS los 7 paneles ocupan la MISMA celda (el alto es el del más
                     largo): al cambiar de etapa la página no salta. Sin JS se leen uno debajo del otro.
   Colores de las partículas: variables --ww-* (las lee el JS para el canvas; la leyenda usa las mismas).
   Sin JS: se ocultan el tanque y los botones (.ww-tank, .ww-tabs) y queda la lista de etapas. */
.ww__title { max-width: 21ch; }
/* Encabezado con el logo de Global Green al lado (03/10/2026): mismo esquema que el aval de Siety en HSE (.hse__endorse),
   pero SIN título encima del logo. Línea horizontal en móvil, vertical desde 760px. El logo (global-green-horizontal,
   blanco sobre transparente) sale en el mismo gris que el de Siety: filtro a blanco + opacidad .55.
   Es un enlace a globalgreen.com.ve; el <a> es una caja propia para que el foco del teclado se vea. */
.ww__head { display: grid; gap: 1.75rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.ww__head .ww__title { margin-bottom: 1.25rem; }
.ww__endorse { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.ww__endorse-link { display: block; line-height: 0; border-radius: 4px; }
.ww__endorse picture { display: contents; }
.ww__endorse-logo { width: min(260px, 72vw); height: auto; filter: brightness(0) invert(1); opacity: .55; }
@media (min-width: 760px) {
  .ww__head { grid-template-columns: minmax(0, 46rem) auto; justify-content: start; align-items: stretch; gap: 0; }
  .ww__intro { padding-right: clamp(2rem, 1rem + 3vw, 4rem); }
  .ww__endorse { justify-content: center; padding: .5rem 0 .5rem clamp(2rem, 1rem + 3vw, 4rem); border-top: 0; border-left: 1px solid var(--line); }
  .ww__endorse-logo { width: clamp(260px, 100px + 18vw, 360px); }
}
.ww-plant {
  --ww-solids: #C2A98F; --ww-oils: #E3B24B; --ww-organic: #9DA86F; --ww-bacteria: #8FC1A9; --ww-dissolved: #D8D0C8; --ww-sludge: #A07654;
  --ww-murk: 122, 78, 40;                 /* tinte del agua sin tratar (r, g, b) */
  --ww-murk-line: #A8703C;                /* el mismo tono, más claro, para líneas sobre fondo oscuro */
  position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.1rem, .7rem + 1.8vw, 2.25rem);
}
.ww-plant__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.25rem; }
.ww-plant__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.ww-plant__hint { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.ww-plant__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ww-plant__pulse::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); animation: ww-pulse 1.8s ease-out infinite; }
@keyframes ww-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

/* Entrada y salida: dos textos en los extremos (sin etiquetas ni recuadros), cada uno con una barra del color de su agua,
   unidos por una línea que pasa de turbia a clara y avanza hacia la salida */
.ww-ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.ww-end { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding-left: .8rem; border-left: 3px solid var(--ww-murk-line); }
.ww-end--out { padding: 0 .8rem 0 0; border-left: 0; border-right: 3px solid var(--heading); text-align: right; }
.ww-end__label { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.ww-end__text { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; color: var(--heading); }
.ww-ends__line { position: relative; grid-column: 1 / -1; grid-row: 2; height: 2px; margin-right: .5rem; }
.ww-ends__line::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, var(--ww-murk-line), var(--heading)); }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .ww-ends__line::before {                                        /* la línea avanza hacia la salida */
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 12px, transparent 12px 20px); mask-image: repeating-linear-gradient(to right, #000 0 12px, transparent 12px 20px);
    -webkit-mask-size: 20px 100%; mask-size: 20px 100%; animation: ww-ends-flow 1s linear infinite;
  }
}
@keyframes ww-ends-flow { to { -webkit-mask-position: 20px 0; mask-position: 20px 0; } }
.ww-ends__line::after {                                           /* punta de flecha hacia la salida */
  content: ""; position: absolute; right: -.5rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-top: 2px solid var(--heading); border-right: 2px solid var(--heading); transform: rotate(45deg); transform-origin: center;
}
@media (min-width: 760px) {                                        /* una sola fila: entrada · línea · salida */
  .ww-ends { grid-template-columns: auto minmax(3rem, 1fr) auto; align-items: center; }
  .ww-ends__line { grid-column: auto; grid-row: auto; }
}

/* Tanque */
.ww-tank {
  position: relative; height: clamp(170px, 110px + 12vw, 270px); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(90deg, #1D1510 0%, #130E0B 60%, #100C0A 100%);
}
.ww-tank__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.ww-tank__tag { position: absolute; left: .7rem; bottom: .4rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; }

/* Etapas (pestañas): un nodo por compuerta, unidos por una tubería que "fluye" */
.ww-tabs { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: .9rem 0 0 8%; }   /* 8 % libre a la izquierda: tramo de agua sin tratar antes de la primera compuerta */
.ww-tabs::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(.9rem + 1.125rem - 1px); height: 2px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .3) 0 8px, rgba(255, 255, 255, .08) 8px 16px);
  background-size: 16px 100%; animation: ww-flow 1s linear infinite;
}
@keyframes ww-flow { to { background-position: 16px 0; } }
.ww-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0;
  padding: 0 .2rem .85rem; background: none; border: 0; cursor: pointer; text-align: center;
  font: inherit; color: var(--text-muted); transition: color .25s;
  -webkit-tap-highlight-color: transparent;
}
.ww-tab::before { content: ""; position: absolute; left: 50%; top: -.9rem; width: 1px; height: .9rem; background: rgba(255, 255, 255, .22); }   /* une el nodo con su compuerta */
.ww-tab__node {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .28); color: var(--heading); font-size: var(--fs-sm); font-weight: 700; line-height: 1;
  transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.ww-tab--sludge .ww-tab__node { border-radius: 8px; }            /* la etapa 7 trabaja sobre los lodos, no sobre el agua */
.ww-tab__name { font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; }
.ww-tab:hover { color: var(--heading); }
.ww-tab:hover .ww-tab__node { border-color: var(--accent); transform: translateY(-2px); }
.ww-tab.is-active { color: #fff; }
.ww-tab.is-active::before { background: var(--accent); }
.ww-tab.is-active .ww-tab__node { background: var(--accent-strong); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(230, 98, 16, .18); }
.ww-tab:focus-visible { outline-offset: 0; }
.ww-tab::after {                                                  /* avance del recorrido automático (main.js pone --ww-p de 0 a 1) */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(var(--ww-p, 0)); transform-origin: left center; opacity: 0;
}
.ww-plant.is-auto .ww-tab.is-active::after { opacity: 1; }
@media (max-width: 899px) {                                        /* poco ancho: solo el número; el nombre se lee en la lectura */
  .ww-tab__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ww-tab { padding-bottom: .7rem; }
  .ww-tab::after { left: 12%; right: 12%; }
}
@media (max-width: 420px) { .ww-tab__node { width: 2rem; height: 2rem; } .ww-tabs::before { top: calc(.9rem + 1rem - 1px); } }

/* Lectura de la etapa elegida */
.ww-panels { margin-top: .9rem; padding-top: clamp(1.25rem, 1rem + 1vw, 2rem); border-top: 1px solid var(--line); }
.ww-panel { display: grid; gap: .9rem 2rem; align-items: start; }
.ww-panel + .ww-panel { margin-top: 1.75rem; }
@media (min-width: 640px) {                                       /* número a la izquierda; "Retira" debajo del texto */
  .ww-panel { grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1.5rem, 1rem + 2vw, 3.5rem); }
  .ww-panel__removes { grid-column: 2; }
}
@media (min-width: 1040px) {                                      /* tres columnas: número · texto · "Retira" */
  .ww-panel { grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem); align-items: center; }
  .ww-panel__removes { grid-column: auto; }
}
.ww-panel__num { font-size: clamp(3.25rem, 2rem + 5.5vw, 6.5rem); font-weight: 700; line-height: .85; letter-spacing: -.03em; color: var(--surface-2); font-variant-numeric: tabular-nums; }
@supports (-webkit-text-stroke: 1px #fff) { .ww-panel__num { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .36); } }
.ww-panel__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--heading); margin-bottom: .45rem; }
.ww-panel__text { max-width: 58ch; color: var(--text); }
.ww-panel__removes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-left: 1rem; border-left: 2px solid var(--accent); font-size: var(--fs-base); }
.ww-panel__removes .ww-kind { font-weight: 700; }
.ww-panel__label { flex-basis: 100%; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.js .ww-panels { display: grid; }
.js .ww-panel { grid-area: 1 / 1; margin-top: 0; visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; }
.js .ww-panel.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* Qué retira la planta: mismo punto de color que la partícula del tanque */
.ww-kind { --k: var(--ww-solids); display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; line-height: 1.3; color: var(--heading); }
.ww-kind::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--k); }
.ww-kind--oils { --k: var(--ww-oils); }
.ww-kind--oils::before { width: .75rem; height: .75rem; background: rgba(227, 178, 75, .45); border: 1.5px solid var(--k); }
.ww-kind--organic { --k: var(--ww-organic); }
.ww-kind--organic::before { width: .45rem; height: .45rem; }
.ww-kind--bacteria { --k: var(--ww-bacteria); }
.ww-kind--bacteria::before { width: .85rem; height: .32rem; border-radius: 1rem; transform: rotate(-28deg); }
.ww-kind--dissolved { --k: var(--ww-dissolved); }
.ww-kind--dissolved::before { width: .25rem; height: .25rem; margin: 0 .3rem 0 .05rem; box-shadow: .38rem .2rem 0 var(--k), .2rem -.3rem 0 var(--k); }
.ww-kind--sludge { --k: var(--ww-sludge); }
.ww-kind--sludge::before { width: .85rem; height: .5rem; border-radius: 2px; }

.ww-plant__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ww-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); }
.ww-legend .ww-kind { color: var(--text-muted); transition: opacity .3s, color .3s; }
.js .ww-legend .ww-kind { opacity: .38; }                          /* con JS: solo se enciende lo que trata la etapa activa */
.js .ww-legend .ww-kind.is-on { opacity: 1; color: var(--heading); font-weight: 700; }
.ww-plant__note { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }

/* Sin JS: no hay animación ni pestañas; queda la lista de etapas */
html:not(.js) .ww-tank, html:not(.js) .ww-tabs, html:not(.js) .ww-plant__hint { display: none; }

/* Toda la vida de una planta: cuatro pasos sobre una línea que "fluye" */
.ww-life { display: grid; gap: 1.5rem 3rem; margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 960px) { .ww-life { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: center; } }
.ww-life__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--heading); }
.ww-life__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ww-life__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ww-life__step { position: relative; padding: 1.5rem .75rem 0 0; }
.ww-life__step::before {
  content: ""; position: absolute; left: 0; right: 0; top: .3125rem; height: 2px;
  background: repeating-linear-gradient(to right, var(--accent) 0 10px, rgba(230, 98, 16, .28) 10px 20px);
  background-size: 20px 100%; animation: ww-flow-life 1.4s linear infinite;
}
@keyframes ww-flow-life { to { background-position: 20px 0; } }
.ww-life__step::after { content: ""; position: absolute; left: 0; top: 0; width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg-alt); }
.ww-life__step span { display: block; margin-bottom: .2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--text-muted); }
.ww-life__step strong { display: block; font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; color: var(--heading); overflow-wrap: anywhere; }

.ww-facts { display: grid; gap: 1.25rem 1.5rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) 0 0; border-top: 1px solid var(--line); list-style: none; }
@media (min-width: 700px) { .ww-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ww-fact { display: flex; flex-direction: column; gap: .35rem; padding-left: 1rem; border-left: 2px solid var(--accent); font-size: var(--fs-sm); line-height: 1.45; color: var(--on-dark-muted); }
.ww-fact__value { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; color: var(--on-dark); }
.ww-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
/* fin del bloque 30 */

/* ---------- 31. Ajustes SOLO para móvil y tablet (03/10/2026) ----------
   Auditoría móvil, tanda 1. TODO lo de este bloque vive dentro de media queries con max-width de 1023 px o menos:
   desde 1024 px (escritorio) ninguna de estas reglas aplica y el diseño queda exactamente igual que antes.
   Los ajustes móviles nuevos van AQUÍ, al final de la hoja, y no dentro de los bloques 22, 24 y 27, que los
   reescriben los generadores de herramientas/. No agregar en este bloque reglas fuera de un @media (max-width: …).
     · M-07  Hero: el texto ya no se corta por arriba (el hero crece con su contenido).
     · M-14  Proyecto activo: "Alcance del trabajo" en una columna en pantallas angostas.
     · M-02  Barra superior: idioma, WhatsApp y redes con área táctil suficiente. */

/* M-07 · Hero (home, Energy y Marine). Las diapositivas eran absolutas: su texto no hacía crecer el hero y, cuando no
   cabía en los 560 px mínimos (alto visible de 700 px o menos, sobre todo en español), se cortaba por arriba el rótulo
   y parte del título. En móvil las diapositivas pasan a ocupar una misma celda de grid EN FLUJO: el hero mide lo que
   mide la diapositiva más alta (y nunca menos que su min-height de siempre). Los controles se superponen abajo, como antes. */
@media (max-width: 719px) {
  .hero__slides { position: relative; inset: auto; flex: 1 1 auto; min-height: inherit; display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__slide { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; align-items: flex-end; }
  .hero__content { padding-block: 2.5rem 6.5rem; }
  .hero__controls { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* M-14 · Proyecto activo (energy.html): en dos columnas, "Instrumentación" y "Obras mecánicas y metalmecánica" se salían
   de su celda y la tarjeta las cortaba. En pantallas angostas la lista va en una sola columna. */
@media (max-width: 479px) {
  .project-featured__list { grid-template-columns: minmax(0, 1fr); }
}

/* M-02 · Barra superior: los botones EN/ES medían 34×26 px y el ícono de WhatsApp 22×32 px, a 10 px uno del otro.
   La barra sube a 48 px de alto (Energy / Marine quedan de 48 px), el idioma a 44×36 px con zona táctil de 48 px de alto,
   y WhatsApp y las redes a 44×44 px. El aspecto (colores, tipografía, íconos) no cambia. */
@media (max-width: 1023px) {
  :root { --utility-h: 48px; }
  .lang-switch__btn { position: relative; min-width: 44px; height: 36px; }
  .lang-switch__btn::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }   /* zona táctil */
  .utility-bar__phone { min-width: 44px; min-height: 44px; justify-content: center; }
  .social--bar .social__link { width: 44px; height: 44px; }
}
@media (max-width: 719px) {
  .utility-bar__phone .icon { margin-right: 0; }   /* aquí solo se ve el ícono: queda centrado en su área */
}
@media (max-width: 359px) {
  .lang-switch__btn { min-width: 40px; }           /* 320 px: que la barra no se quede sin aire */
}

/* ===== Tanda 2 (03/10/2026) ===== */

/* M-03 · Menú móvil: al abrirlo tapaba la barra superior y no se podía cambiar de idioma ni de división. Ahora la barra
   queda visible encima del panel (aunque estuviera oculta por el scroll) y el menú abre debajo de ella. main.js pone
   --nav-top = borde inferior del header. overscroll-behavior: el scroll del menú no arrastra la página de fondo. */
@media (max-width: 1023px) {
  body.nav-open .utility-bar { z-index: 101; transform: none; }
  .main-nav { top: calc(var(--nav-top, var(--header-h-top)) + var(--utility-h)); overscroll-behavior: contain; }
}
/* "Tanzaca" también en la barra del teléfono (antes solo se veían Energy y Marine por debajo de 600 px).
   La barra se sigue ocultando al bajar y reaparece al subir (main.js §2, sin cambios). */
@media (max-width: 599px) {
  .divisions-nav__label { display: inline-flex; }
}
@media (max-width: 479px) {
  .utility-bar__inner { gap: .5rem; }
  .utility-bar__end { gap: .25rem; }
  .divisions-nav { gap: .5rem; }
  .divisions-nav__label { margin-right: .5rem; font-size: .75rem; letter-spacing: .06em; }
  .divisions-nav__label::before { right: -.5rem; }
  .divisions-nav__link { padding: 0 .4rem; }
}
@media (max-width: 389px) {
  .utility-bar__inner { gap: .4rem; }
  .utility-bar__end { gap: .15rem; }
  .divisions-nav { gap: .35rem; }
  .divisions-nav__label { margin-right: .35rem; letter-spacing: .03em; }
  .divisions-nav__label::before { right: -.35rem; }
  .divisions-nav__link { padding: 0 .3rem; letter-spacing: .03em; }
  .divisions-nav__link::after { left: .3rem; right: .3rem; }
}
@media (max-width: 359px) {                        /* 320 px: todo en una fila y dentro del margen */
  .utility-bar__inner { gap: .3rem; }
  .divisions-nav { gap: .3rem; }
  .divisions-nav__label { margin-right: .3rem; }
  .divisions-nav__label::before { right: -.3rem; }
  .divisions-nav__label, .divisions-nav__link { font-size: .6875rem; letter-spacing: .02em; }
  .utility-bar__phone, .lang-switch__btn { min-width: 38px; }   /* sustituye los 40 px de la tanda 1: ahora también entra "Tanzaca" */
}

/* M-01 · Botón "volver arriba": tapaba texto, viñetas y las flechas del acordeón del footer. En el teléfono se muestra
   solo cuando la persona sube (misma señal que la barra superior: main.js le pone .is-hidden al bajar). */
@media (max-width: 719px) {
  .utility-bar.is-hidden ~ .to-top { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
}

/* M-04 · Enlaces del footer (20 px de alto) y teléfonos / correos de contacto (24 px, a 3 px uno del otro): filas de 44 px. */
@media (max-width: 1023px) {
  .footer__col li + li { margin-top: 0; }
  .footer__col li > a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .3rem; }
  .footer__contact a { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; min-height: 44px; }
  .footer__contact a + br { display: none; }
  .footer__contact p + p { margin-top: .35rem; }
  .cta-band__card li { gap: 0; }
  .cta-band__card a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* M-10 y M-11 · Servicios (energy.html y marine.html) en el teléfono. El panel de introducción se alinea arriba y se
   angosta para que asome más de la primera tarjeta. Las tarjetas dejan de igualar sus filas (subgrid): en móvil se ve una
   a la vez y la igualación dejaba huecos y tarjetas más altas que la pantalla. Cada tarjeta acomoda su texto sin huecos
   y la foto ocupa el alto que sobra (por eso las fotos pueden medir distinto entre tarjetas). Decisión de Victor, 03/10. */
@media (max-width: 719px) {
  .hscroll__intro { width: 70vw; align-self: flex-start; }
  @supports (grid-template-rows: subgrid) {
    .hscroll__track { display: flex; }
    .hs-card { display: flex; }
    .hs-card__media { min-height: 6.5rem; }
    .hs-card__body { display: flex; }
  }
}

/* M-12 · Aguas residuales: pestañas de etapas 1 a 7 más altas (48 px) y un poco más anchas (menos relleno del recuadro). */
@media (max-width: 479px) {
  .ww-plant { padding-inline: .75rem; }
  .ww-tab { padding-bottom: 1rem; }
}

/* M-13 · "Mantenimiento" se partía en dos líneas a 320 px en español. */
@media (max-width: 359px) {
  .ww-life__step strong { font-size: 1.0625rem; }
}

/* M-17 · Marine, proyectos ("ojos de buey"): a 320 px las palabras largas ensanchaban la rejilla y las tarjetas se
   salían del margen. Columna que no crece con su contenido, foto más pequeña alineada arriba y títulos que pueden partir. */
@media (max-width: 479px) {
  .works { grid-template-columns: minmax(0, 1fr); }
  .work { align-items: flex-start; gap: .9rem; }
  .work__photo { width: 72px; }
  .work__title { overflow-wrap: anywhere; }
  @supports not (aspect-ratio: 1 / 1) { .work__photo { height: 72px; } }
}

/* M-19 · Páginas de detalle: la entradilla de 20 px empujaba los botones fuera de la primera pantalla. */
@media (max-width: 719px) {
  .sv-hero { padding-top: 1.75rem; }
  .sv-crumbs { margin-bottom: 1rem; }
  .sv-hero__lead { margin-top: 1rem; font-size: var(--fs-base); line-height: 1.5; }
  .sv-hero__ctas { margin-top: 1.5rem; }
}

/* M-21 · Texto de lectura: los párrafos de tarjetas, notas y definiciones iban a 15 px (14 px en las tarjetas de
   Servicios) y los pies de foto a 13 px. En el teléfono suben a 16 px y 14 px. No se tocan --fs-sm ni --fs-xs. */
@media (max-width: 719px) {
  .sv-note__text, .sv-card__text, .sv-step__text, .sv-std dd, .sv-list--sm li, .sv-partner__text, .sv-port figcaption,
  .hse-card__text, .work__text, .reason__text, .hs-card__text, .ballast__why, .consult__group li { font-size: 1rem; }
  .sv-fig figcaption { font-size: .875rem; }
}

/* ===== Tanda 3 (03/10/2026) ===== */

/* M-05 · Áreas táctiles que quedaban por debajo de 44 px. Los enlaces de texto crecen con un pseudo-elemento
   transparente (no mueve nada de sitio); el botón del header, las redes y los chips, con su propio alto. */
@media (max-width: 1023px) {
  .btn--sm { min-height: 44px; }                                    /* botón de cotizar del header: 42 → 44 px */
  .social--footer .social__link { width: 44px; height: 44px; }       /* redes del footer: 40 → 44 px */
  .sv-toc a { padding-block: .7rem; }                                /* chips del índice (páginas de detalle): 38 → 44 px */
  .link-arrow, .sv-crumbs a, .footer__top { position: relative; }
  .hs-card .link-arrow, .sv-card--link .link-arrow { position: static; }   /* su ::before ya cubre toda la tarjeta: quedan igual */
  .link-arrow::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
  .sv-crumbs a::after, .footer__top::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
  .hscroll__progress::after { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; bottom: -.5rem; }   /* barra de Servicios: 28 → 44 px (main.js escucha en la barra, no en el tramo) */
}

/* M-06 · En pantallas táctiles el :hover se queda "pegado" después de tocar (el botón seguía blanco, la tarjeta
   levantada). Solo donde no hay cursor (hover: none) se devuelve el estado normal. */
@media (hover: none) and (max-width: 1023px) {
  .btn--outline:hover { background: transparent; color: var(--heading); border-color: rgba(255,255,255,.55); }
  .btn--ghost-light:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
  .hse-card:hover { border-color: var(--line); transform: none; }
}

/* M-08 · Hero (home, Energy y Marine). El mínimo fijo de 560 px dejaba los controles del carrusel bajo la primera
   pantalla en teléfonos pequeños; desde la tanda 1 el hero crece con su texto, así que ese mínimo ya no hace falta:
   el hero mide lo que queda visible bajo el header y la barra, o lo que pida su texto si es más. */
@media (max-width: 719px) {
  .hero { min-height: clamp(0px, calc(var(--vh-s) - var(--header-h-top) - var(--utility-h)), 860px); }
}
@media (max-width: 400px) {
  .hero__title { font-size: 1.9rem; }
}
/* Teléfono en horizontal (poco alto): sin alto mínimo y con las diapositivas en flujo, como en la tanda 1,
   para que el hero mida lo que mide su texto y nada se corte. */
@media (max-width: 932px) and (max-height: 480px) {
  .hero { min-height: 0; }
  .hero__slides { position: relative; inset: auto; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__slide { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; align-items: flex-end; }
  .hero__content { padding-block: 2.5rem 6.5rem; }
  .hero__title { font-size: 2.2rem; }
  .hero__controls { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* M-15 · Energy, proyectos completados en tablet: con dos columnas la tercera tarjeta quedaba sola. Ahora ocupa las
   dos columnas, con la foto a la izquierda (del ancho de una columna) y el texto a la derecha. Decisión de Victor. */
@media (min-width: 720px) and (max-width: 1023px) {
  #projects .cards > .project:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.5rem; }
  #projects .cards > .project:last-child:nth-child(odd) .card__media { flex: 0 0 calc(50% - .75rem); }
  #projects .cards > .project:last-child:nth-child(odd) .card__body { flex: 1 1 0; min-width: 0; padding-top: 0; }
}

/* M-16 · Aguas residuales: los ítems apagados de la leyenda iban al 38 % (2:1 de contraste) y casi no se leían en el
   teléfono. Al 75 % llegan a 4,7:1 (AA) y siguen distinguiéndose de los encendidos (blancos y en negrita). */
@media (max-width: 719px) {
  .js .ww-legend .ww-kind { opacity: .75; }
}

/* M-18 · Banda de contacto: el óvalo cruzaba el título, el párrafo y los botones. Mientras la banda va en una sola
   columna (hasta 959 px) queda más tenue y asomando por la esquina superior derecha. Decisión de Victor. */
@media (max-width: 959px) {
  .cta-band__ring { width: 78vw; right: -42vw; top: -2vw; }
  .cta-band__ring ellipse:first-child { opacity: .32; }
  .cta-band__ring ellipse:last-child { opacity: .16; }
}

/* M-20 · Cifras clave de las páginas de detalle: en dos columnas las palabras largas ("Revegetación",
   "Termoeléctrico") se salían o se partían. El tamaño acompaña al ancho del teléfono hasta los 24 px de siempre. */
@media (max-width: 479px) {
  .sv-fact__value { font-size: clamp(1rem, 5.3vw, 1.5rem); overflow-wrap: anywhere; }
}
@media (max-width: 359px) {                        /* 320 px: un poco más de ancho útil por columna ("motogeneradores" en la etiqueta) */
  .sv-facts__list { column-gap: .75rem; }
  .sv-fact { padding-left: .7rem; }
}

/* M-22 · clients.html: los logos anchos (Vopak, Ajeven, Fluxus) se salían de su tarjeta a 320 px. */
@media (max-width: 479px) {
  .client-card .logo-item { max-width: 100%; }
  .client-card .logo-item__img { max-width: 100%; height: auto; }
}
/* fin del bloque 31 */

.footer__dev { margin-left: .6rem; white-space: nowrap; }
.footer__dev a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.footer__dev a:hover { color: var(--accent, #f47a20); }

/* ---------- 32. Noticias petroleras (13/10/2026): news.html + sección #news de energy.html ----------
   Contenido dinámico (assets/js/news.js ← assets/data/news.json). Tarjetas de texto, sin fotos: los titulares vienen
   del boletín semanal de la Cámara Petrolera de Venezuela y no traen imagen. */
.news-hero__inner { position: relative; }
.news-hero .sv-hero__title { max-width: 22ch; }

.news-week {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem;
  padding-bottom: 1.5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.news-week__head .eyebrow { margin-bottom: .6rem; }
.news-week__title { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem); font-weight: 500; line-height: 1.15; color: var(--heading); }
.news-week__picker { display: grid; gap: .35rem; }
.news-week__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-week__select {
  min-height: 46px; min-width: 16rem; max-width: 100%; padding: .55rem 2.6rem .55rem .9rem;
  font: inherit; font-size: var(--fs-sm); color: var(--heading); background-color: var(--surface);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - .8rem) 52%; background-size: 6px 6px; background-repeat: no-repeat;
}
.news-week__select:hover { border-color: var(--accent); }

.news-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .news-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); align-items: start; }
  .news-prices { position: sticky; top: calc(var(--header-h) + 1.5rem); margin-top: 1.5rem; }
}

.news-page { padding-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.news-page [hidden] { display: none !important; }
.news-list { margin: 0; padding: 0; list-style: none; }
.news-item + .news-item { border-top: 1px solid var(--line); }
.news-item__link {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) clamp(5.5rem, 3rem + 9vw, 11rem); gap: 1rem clamp(1rem, .5rem + 1.5vw, 1.75rem);
  align-items: start; padding-block: 1.5rem; border-radius: 2px;
}
@media (max-width: 479px) { .news-item__link { grid-template-columns: 1.6rem minmax(0, 1fr) 5.25rem; gap: .75rem; } }
.news-item__num { padding-top: .2rem; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.news-item__title {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); font-weight: 500; line-height: 1.38; color: var(--heading);
  transition: color .2s;
}
.news-item__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .55rem; font-size: var(--fs-xs); color: var(--text-muted); }
.news-item__source { font-weight: 700; color: var(--text); }
.news-item__domain { letter-spacing: .02em; }
.news-item__link:hover .news-item__title { color: var(--accent); }
.news-item__thumb { margin-top: .2rem; }
/* Teléfonos: la miniatura es pequeña y el nombre del medio no cabe (ya aparece bajo el titular): solo el óvalo */
@media (max-width: 479px) { .news-item__thumb .news-thumb__label { display: none; } }

/* Miniatura: foto de portada de la nota original (enlazada) o, si no hay, recuadro de Tanzaca con el nombre del medio */
.news-thumb {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--surface-2); border-radius: 6px;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a:hover .news-thumb img { transform: scale(1.05); }
.news-thumb.is-fallback {
  display: grid; place-items: center; padding: .5rem; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 100% 0%, rgba(230, 98, 16, .16), transparent 60%), var(--surface-2);
}
.news-thumb.is-fallback::before {                     /* óvalo del logo como trazo, igual que en los héroes */
  content: ""; position: absolute; width: 130%; height: 120%; right: -55%; top: -35%;
  border: 1.5px solid var(--accent); border-radius: 50%; opacity: .28;
}
.news-thumb__label {
  position: relative; max-width: 100%; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); text-align: center; overflow-wrap: anywhere; line-height: 1.3;
}
.news-empty { padding-block: 2rem; color: var(--text-muted); }

.news-prices { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.news-prices__title { font-size: var(--fs-h3); font-weight: 500; color: var(--heading); }
.news-prices__when { margin-top: .25rem; font-size: var(--fs-xs); color: var(--text-muted); }
.news-prices__when::first-letter { text-transform: uppercase; }
.news-prices__list { margin: 0; }
.news-prices__group-title { margin: 1.35rem 0 .35rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-top: 1px solid var(--line); }
.news-price__label { color: var(--text); font-size: var(--fs-sm); }
.news-price__value { display: inline-flex; align-items: baseline; gap: .3rem; margin: 0; white-space: nowrap; }
.news-price__num { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.news-price__unit { font-size: var(--fs-xs); color: var(--text-muted); }
.news-price__trend { display: inline-block; min-width: 1.1em; text-align: right; font-size: .72rem; }
.news-price__trend.is-up { color: #5FD08F; }
.news-price__trend.is-down { color: #FF7A66; }
.news-price__trend.is-flat { color: var(--text-muted); }
.news-prices__note { margin-top: 1.1rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }

.news-credit { max-width: 72ch; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-muted); }

/* Detalle de una noticia (diálogo modal) */
.news-dialog {
  width: min(40rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0;
  border: 0; background: transparent; color: var(--text); overflow: visible;
}
.news-dialog::backdrop { background: rgba(7, 4, 4, .8); }
html:has(.news-dialog[open]) { overflow: hidden; }
.news-dialog__box {
  position: relative; max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.news-dialog__close {
  position: absolute; z-index: 2; top: .6rem; right: .6rem; display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--text-muted); border-radius: 50%; transition: color .2s, background-color .2s;
}
.news-dialog__media:not([hidden]) ~ .news-dialog__meta { padding-right: 0; }
.news-dialog__box:has(.news-dialog__media:not([hidden])) .news-dialog__close { color: #fff; background: rgba(7, 4, 4, .62); }
.news-dialog__media {
  position: relative; margin: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.5rem)) calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.5rem)) 1.5rem;
  aspect-ratio: 2 / 1; max-height: 36vh; overflow: hidden; background: var(--surface-2);
}
.news-dialog__media[hidden] { display: none; }
.news-dialog__media img { width: 100%; height: 100%; object-fit: cover; }
.news-dialog__img-credit {
  position: absolute; right: .6rem; bottom: .6rem; padding: .2rem .55rem; border-radius: 3px;
  font-size: .72rem; color: #fff; background: rgba(7, 4, 4, .7);
}
.news-dialog__close:hover { color: var(--heading); background: var(--surface-2); }
.news-dialog__meta { padding-right: 2.5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-dialog__title { margin: .7rem 0 1.4rem; padding-right: 1.5rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 500; line-height: 1.25; color: var(--heading); }
.news-mt { margin-bottom: 1.4rem; padding: .9rem 1rem; background: rgba(230, 98, 16, .09); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; font-size: var(--fs-sm); }
.news-mt__note { display: flex; gap: .6rem; color: var(--heading); line-height: 1.45; }
.news-mt__note svg { flex: none; margin-top: .1rem; color: var(--accent); }
.news-mt__orig { margin-top: .6rem; padding-left: 1.6rem; color: var(--text-muted); line-height: 1.45; }
.news-mt__orig-label { font-weight: 700; color: var(--text); }
.news-dialog__facts { display: grid; gap: .5rem; margin: 0; font-size: var(--fs-sm); }
.news-dialog__facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
.news-dialog__facts dt { color: var(--text-muted); }
.news-dialog__facts dd { margin: 0; color: var(--heading); font-weight: 500; }
.news-dialog__facts > div[hidden] { display: none; }
.news-dialog__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.news-dialog__actions .btn { white-space: normal; text-align: center; }
@media (max-width: 519px) {
  .news-dialog__facts > div { grid-template-columns: 1fr; gap: 0; }
  .news-dialog__actions .btn { width: 100%; }
}

/* energy.html: sección "News" (3 titulares + precios del crudo) */
.news-teaser__range { margin-top: .75rem; font-size: var(--fs-sm); color: var(--text-muted); }
.news-cards { display: grid; gap: 1rem; }
@media (min-width: 720px) { .news-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.news-card__link {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, transform .25s var(--ease);
}
.news-card__link:hover { border-color: var(--accent); transform: translateY(-2px); }
.news-card__thumb { margin: -1.5rem -1.5rem 1.25rem; aspect-ratio: 16 / 9; border-radius: 0; }
.news-card__meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); line-height: 1.4; }
.news-card__title { margin: .7rem 0 1.25rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 500; line-height: 1.38; color: var(--heading); }
.news-card__domain { margin-top: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.news-card__domain::after { content: " →"; color: var(--accent); }
.news-teaser__prices { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.news-teaser__prices-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-teaser__when { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .35rem; }
.news-strip { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; }
.news-price--compact { display: inline-flex; gap: .5rem; padding: 0; border: 0; }
.news-price--compact .news-price__label { font-size: var(--fs-sm); }
/* (16/10/2026) Historial de semanas y aviso de semana anterior */
.news-week { scroll-margin-top: calc(var(--header-h) + var(--utility-h) + 1rem); }
.news-latest {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 1.25rem 0 0;
  padding: .85rem 1rem; background: rgba(230, 98, 16, .09); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0;
  font-size: var(--fs-sm); color: var(--heading);
}
.news-latest[hidden] { display: none; }
.news-archive { margin-top: clamp(3rem, 2.5rem + 3vw, 5.5rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
.news-archive__head { margin-bottom: 1.75rem; }
.news-archive__head .eyebrow { margin-bottom: .6rem; }
.news-archive__title { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem); font-weight: 500; line-height: 1.15; color: var(--heading); }
.news-archive__lead { margin-top: .5rem; color: var(--text-muted); font-size: var(--fs-sm); }
.news-archive__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .news-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .news-archive__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-week-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, transform .25s var(--ease);
}
.news-week-card__link:hover { border-color: var(--accent); transform: translateY(-2px); }
.news-week-card__thumb { aspect-ratio: 16 / 7; border-radius: 0; }
.news-week-card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.news-week-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.news-week-card__badge { padding: .1rem .5rem; border-radius: 999px; background: var(--accent-strong); color: #fff; letter-spacing: .06em; }
.news-week-card__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--heading); }
.news-week-card__heads { display: grid; gap: .35rem; margin: .25rem 0 .5rem; padding: 0; list-style: none; }
.news-week-card__heads li {
  position: relative; padding-left: .9rem; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-week-card__heads li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.news-week-card__cta { margin-top: auto; align-self: flex-start; }
.news-week-card__link:hover .news-week-card__cta { border-color: var(--accent); }
/* fin del bloque 32 */